diff --git a/README.md b/README.md
index 187df9c..51e9974 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,255 @@
-# react-ui-components
-Syncfusion React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 14+ UI components that every applications will ever need.
+# Syncfusion Pure React UI Components Library
+
+Syncfusion Pure React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 15+ UI components that every applications will ever need.
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
+
+
+## Resources
+* [Getting Started](https://react.syncfusion.com/getting-started/introduction)
+* [View Online Demos](https://react.syncfusion.com/button)
+
+## Pure React Components highlights
+
+### Built for Modern React
+These components are built entirely using React’s modern architecture, leveraging functional components and hooks rather than relying on class-based components, wrappers. This ensures seamless integration with any modern React application and gives developers full control using idiomatic React patterns.
+
+### Fully Reactive by Design
+Components automatically respond to state and prop changes without manual refreshes, ensuring predictable UI updates.
+
+### Smarter Rendering for Better UX
+Optimized rendering logic refreshes only what’s necessary, improving performance and user experience.
+
+### Active State Preservation
+Interactions like focused inputs or selected items remain intact even when the surrounding state changes. This preserves the user's context and ensures a consistent, uninterrupted experience.
+
+### Native Template Rendering
+Templates are rendered using pure JSX, in line with React’s rendering lifecycle.
+
+### Performance-Driven Architecture
+From architecture to execution, every detail has been considered to boost performance. With fewer renders, leaner updates, and smarter state handling, apps feel faster and more responsive.
+
+### Material 3 Theming
+Built-in Material 3 stylesheets provide a modern, accessible design out of the box. Enjoy sharp visuals, consistent theming, and minimal setup.
+
+## Control List
+
+### Buttons
+
+
+
+### Notifications
+
+
+
+### Inputs
+
+
+
+### Layout
+
+
+
+## Support
+ Product support is available for through following mediums.
+ * Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=react-ui-components) support system or [Community forum](https://www.syncfusion.com/forums/pure-react?utm_source=npm&utm_campaign=react-ui-components).
+* New [GitHub issue](https://github.com/syncfusion/react-ui-components/issues/new).
+* Ask your query in [Stack Overflow](https://stackoverflow.com/) with tag `syncfusion` and `react-pure`.
+## License
+Check the license detail [here](https://github.com/syncfusion/react-ui-components/blob/master/license).
+
+## Changelog
+Check the changelog [here](https://react-api.syncfusion.com/api/release-notes/29.2.4).
+
+© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
\ No newline at end of file
diff --git a/components/base/CHANGELOG.md b/components/base/CHANGELOG.md
new file mode 100644
index 0000000..30d5cee
--- /dev/null
+++ b/components/base/CHANGELOG.md
@@ -0,0 +1,3 @@
+# Changelog
+
+## [Unreleased]
\ No newline at end of file
diff --git a/components/base/README.md b/components/base/README.md
new file mode 100644
index 0000000..e08c0d7
--- /dev/null
+++ b/components/base/README.md
@@ -0,0 +1,46 @@
+# React Base Library
+
+A common package of Essential® studio react components which contains base libraries, providers and functions.
+
+**Key Features**
+
+* Animation
+* Ripple
+* Internationalization
+* Localization
+* Right to Left
+
+
+Trusted by the world's leading companies
+
+
+
+
+
+## Setup
+
+To install `base` and its dependent packages, use the following command,
+
+```sh
+npm install @syncfusion/react-base
+```
+
+## Support
+
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* Live chat
+
+## Changelog
+Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/base/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
+
+© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
diff --git a/components/base/gulpfile.js b/components/base/gulpfile.js
new file mode 100644
index 0000000..b1bf280
--- /dev/null
+++ b/components/base/gulpfile.js
@@ -0,0 +1,52 @@
+var gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+
+/**
+ * Compile ts files
+ */
+gulp.task('scripts', function(done) {
+ var ts = require('gulp-typescript');
+ var tsProject = ts.createProject('./tsconfig.json', {
+ typescript: require('typescript'),
+ declaration: true
+ });
+ var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' })
+ .pipe(tsProject());
+ tsResult.js.pipe(gulp.dest('./'))
+ .on('end', function() {
+ tsResult.dts.pipe(gulp.dest('./'))
+ .on('end', function() {
+ done();
+ });
+ });
+});
+
+/**
+ * Compile styles
+ */
+let isCompiled = true;
+gulp.task('styles', function (done) {
+ var styles = './styles/**/*.scss';
+ return gulp.src(styles, { base: './' })
+ .pipe(sass({
+ outputStyle: 'expanded',
+ includePaths: "./node_modules/@syncfusion/"
+ }).on('error', function (error) {
+ isCompiled = false;
+ console.log(error);
+ this.emit('end');
+ }))
+ .pipe(gulp.dest('.'))
+ .on('end', function () {
+ if (!isCompiled) {
+ process.exit(1);
+ }
+ done();
+ });
+});
+
+/**
+ * Build ts and scss files
+ */
+gulp.task('build', gulp.series('scripts', 'styles'));
+
diff --git a/components/base/license b/components/base/license
new file mode 100644
index 0000000..5de8e37
--- /dev/null
+++ b/components/base/license
@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
\ No newline at end of file
diff --git a/components/base/package.json b/components/base/package.json
new file mode 100644
index 0000000..dad1dd0
--- /dev/null
+++ b/components/base/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "@syncfusion/react-base",
+ "version": "29.2.4",
+ "description": "A common package of core Pure React base, methods and class definitions",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "keywords": [
+ "syncfusion",
+ "web-components",
+ "react",
+ "react-base",
+ "syncfusion-react",
+ "base",
+ "library",
+ "react-base"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/react-ui-components.git"
+ },
+ "homepage": "https://www.syncfusion.com/react-ui-components",
+ "module": "./index.js",
+ "readme": "README.md",
+ "devDependencies": {
+ "gulp": "4.0.2",
+ "gulp-typescript": "5.0.1",
+ "typescript": "5.7.2",
+ "gulp-sass": "5.1.0",
+ "sass": "1.83.1",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
+ "@types/react": "19.0.1",
+ "@types/react-dom": "19.0.1",
+ "@types/node": "^22.15.17"
+ },
+ "scripts": {
+ "build": "gulp build"
+ },
+ "typings": "index.d.ts",
+ "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/base/src/animation.tsx b/components/base/src/animation.tsx
new file mode 100644
index 0000000..86ee468
--- /dev/null
+++ b/components/base/src/animation.tsx
@@ -0,0 +1,299 @@
+import { selectAll } from './dom';
+
+/**
+ * Animation effect names
+ */
+export type Effect = 'FadeIn' | 'FadeOut' | 'FadeZoomIn' | 'FadeZoomOut' | 'FlipLeftDownIn' | 'FlipLeftDownOut' | 'FlipLeftUpIn' |
+'FlipLeftUpOut' | 'FlipRightDownIn' | 'FlipRightDownOut' | 'FlipRightUpIn' | 'FlipRightUpOut' | 'FlipXDownIn' | 'FlipXDownOut' |
+'FlipXUpIn' | 'FlipXUpOut' | 'FlipYLeftIn' | 'FlipYLeftOut' | 'FlipYRightIn' | 'FlipYRightOut' | 'SlideBottomIn' | 'SlideBottomOut' |
+'SlideDown' | 'SlideLeft' | 'SlideLeftIn' | 'SlideLeftOut' | 'SlideRight' | 'SlideRightIn' | 'SlideRightOut' | 'SlideTopIn' |
+'SlideTopOut' | 'SlideUp' | 'ZoomIn' | 'ZoomOut';
+
+/**
+ * Interface for Animation propsRef
+ */
+export interface AnimationOptions {
+ /**
+ * Specify the type of animation
+ *
+ * @default FadeIn
+ */
+ name?: Effect;
+
+ /**
+ * Specify the duration to animate
+ *
+ * @default 400
+ */
+ duration?: number;
+
+ /**
+ * Specify the animation timing function
+ *
+ * @default ease
+ */
+ timingFunction?: string;
+
+ /**
+ * Specify the delay to start animation
+ *
+ * @default 0
+ */
+ delay?: number;
+
+ /**
+ * Triggers when animation is in-progress
+ *
+ * @event progress
+ */
+ progress?: (args: AnimationOptions) => void;
+
+ /**
+ * Triggers when the animation is started
+ *
+ * @event begin
+ */
+ begin?: (args: AnimationOptions) => void;
+
+ /**
+ * Triggers when animation is completed
+ *
+ * @event end
+ */
+ end?: (args: AnimationOptions) => void;
+
+ /**
+ * Triggers when animation is failed due to any scripts
+ *
+ * @event fail
+ */
+ fail?: (args: AnimationOptions) => void;
+ /**
+ * Get current time-stamp in progress EventHandler
+ */
+ timeStamp?: number;
+ /**
+ * Get current animation element in progress EventHandler
+ */
+ element?: HTMLElement;
+}
+
+export interface IAnimation extends AnimationOptions {
+ /**
+ * Returns module name as animation
+ *
+ * @private
+ * @returns {void} ?
+ */
+ getModuleName(): string;
+ animate(element: HTMLElement | string, props?: AnimationOptions): void;
+ easing: { [key: string]: string };
+}
+
+export let animationMode: string | GlobalAnimationMode;
+
+/**
+ * The Animation function provide options to animate the html DOM elements
+ *
+ * @param {AnimationOptions} props - The animation options
+ * @returns {Animation} The animation object
+ */
+export function Animation(props: AnimationOptions): IAnimation {
+ /**
+ * @param {AnimationOptions} props - The animation options
+ * @returns {Animation} The animation object
+ */
+
+ const propsRef: IAnimation = {...props} as IAnimation;
+
+ propsRef.easing = {
+ ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',
+ linear: 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',
+ easeIn: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)',
+ easeOut: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)',
+ easeInOut: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+ elasticInOut: 'cubic-bezier(0.5,-0.58,0.38,1.81)',
+ elasticIn: 'cubic-bezier(0.17,0.67,0.59,1.81)',
+ elasticOut: 'cubic-bezier(0.7,-0.75,0.99,1.01)'
+ };
+
+ /**
+ * Applies animation to the current element.
+ *
+ * @param {string | HTMLElement} element - Element which needs to be animated.
+ * @param {AnimationOptions} props - Animation options.
+ * @returns {void}
+ */
+ propsRef.animate = (element: HTMLElement, props?: AnimationOptions): void => {
+ const model: AnimationOptions = getModel(props || {});
+ if (typeof element === 'string') {
+ const elements: HTMLElement[] = Array.from(selectAll(element, document));
+ elements.forEach((ele: HTMLElement) => {
+ model.element = ele ;
+ Animation.delayAnimation(model);
+ });
+ } else {
+ model.element = element;
+ Animation.delayAnimation(model);
+ }
+ };
+
+ /**
+ * Returns Animation Model
+ *
+ * @param {AnimationOptions} props - Animation options
+ * @returns {AnimationOptions} The animation model
+ */
+ function getModel(props: AnimationOptions): AnimationOptions {
+ return {
+ name: props.name || propsRef.name || 'FadeIn',
+ delay: props.delay || propsRef.delay || 0,
+ duration: props.duration !== undefined ? props.duration : propsRef.duration || 400,
+ begin: props.begin || propsRef.begin,
+ end: props.end || propsRef.end,
+ fail: props.fail || propsRef.fail,
+ progress: props.progress || propsRef.progress,
+ timingFunction: props.timingFunction && propsRef.easing[props.timingFunction] ? propsRef.easing[props.timingFunction] : (props.timingFunction || propsRef.timingFunction) || 'ease'
+ };
+ }
+
+ /**
+ * Returns the module name for animation.
+ *
+ * @returns {string} The module name.
+ */
+ propsRef.getModuleName = (): string => 'animation';
+
+ return propsRef;
+}
+
+/**
+ * Stop the animation effect on animated element.
+ *
+ * @param {HTMLElement} element - Element which needs to be stop the animation.
+ * @param {AnimationOptions} model - Handling the animation model at stop function.
+ * @returns {void}
+ */
+Animation.stop = (element: HTMLElement, model?: AnimationOptions) => {
+ element.style.animation = '';
+ element.removeAttribute('sf-animate');
+ const animationId: string | null = element.getAttribute('sf-animation-id');
+ if (animationId) {
+ const frameId: number = parseInt(animationId, 10);
+ cancelAnimationFrame(frameId);
+ element.removeAttribute('sf-animation-id');
+ }
+ if (model && model.end) {
+ model.end(model);
+ }
+};
+
+/**
+ * Set delay to animation element
+ *
+ * @param {AnimationOptions} model ?
+ * @returns {void}
+ */
+Animation.delayAnimation = (model: AnimationOptions): void => {
+ if (animationMode === 'Disable' || animationMode === GlobalAnimationMode.Disable) {
+ if (model.begin) {
+ model.begin(model);
+ }
+ if (model.end) {
+ model.end(model);
+ }
+ } else {
+ if (model.delay) {
+ setTimeout(() => { Animation.applyAnimation(model); }, model.delay);
+ } else {
+ Animation.applyAnimation(model);
+ }
+ }
+};
+
+/**
+ * Triggers animation
+ *
+ * @param {AnimationOptions} model ?
+ * @returns {void}
+ */
+Animation.applyAnimation = (model: AnimationOptions): void => {
+ model.timeStamp = 0;
+ let step: number = 0;
+ let timerId: number = 0;
+ let prevTimeStamp: number = 0;
+ const duration: number | null = model.duration || null;
+ model.element.setAttribute('sf-animate', 'true');
+
+ const startAnimation: (timeStamp?: number) => void = (timeStamp?: number): void => {
+ try {
+ if (timeStamp) {
+ prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp;
+ model.timeStamp = (timeStamp + (model.timeStamp || 0)) - prevTimeStamp;
+ prevTimeStamp = timeStamp;
+
+ if (!step && model.begin) {
+ model.begin(model);
+ }
+
+ step = step + 1;
+ const avg: number = model.timeStamp / step;
+
+ if (duration && model.timeStamp < duration && model.timeStamp + avg < duration && model.element && model.element.getAttribute('sf-animate')) {
+ model.element.style.animation = `${model.name} ${model.duration}ms ${model.timingFunction}`;
+ if (model.progress) {
+ model.progress(model);
+ }
+ requestAnimationFrame(startAnimation);
+ } else {
+ cancelAnimationFrame(timerId);
+ model.element.removeAttribute('sf-animation-id');
+ model.element.removeAttribute('sf-animate');
+ model.element.style.animation = '';
+ if (model.end) {
+ model.end(model);
+ }
+ }
+ } else {
+ timerId = requestAnimationFrame(startAnimation);
+ model.element.setAttribute('sf-animation-id', timerId.toString());
+ }
+ } catch (e) {
+ cancelAnimationFrame(timerId);
+ model.element.removeAttribute('sf-animation-id');
+ if (model.fail) {
+ model.fail(e);
+ }
+ }
+ };
+
+ startAnimation();
+};
+
+/**
+ * This method is used to enable or disable the animation for all components.
+ *
+ * @param {string|GlobalAnimationMode} value - Specifies the value to enable or disable the animation for all components. When set to 'enable', it enables the animation for all components, regardless of the individual component's animation settings. When set to 'disable', it disables the animation for all components, regardless of the individual component's animation settings.
+ * @returns {void}
+ */
+export function setGlobalAnimation(value: string | GlobalAnimationMode): void {
+ animationMode = value;
+}
+
+/**
+ * Defines the global animation modes for all components.
+ */
+export enum GlobalAnimationMode {
+ /**
+ * Defines the global animation mode as Default. Animation is enabled or disabled based on the component's animation settings.
+ */
+ Default = 'Default',
+ /**
+ * Defines the global animation mode as Enable. Enables the animation for all components, regardless of the individual component's animation settings.
+ */
+ Enable = 'Enable',
+ /**
+ * Defines the global animation mode as Disable. Disables the animation for all components, regardless of the individual component's animation settings.
+ */
+ Disable = 'Disable'
+}
diff --git a/components/base/src/base.tsx b/components/base/src/base.tsx
new file mode 100644
index 0000000..a7f77cb
--- /dev/null
+++ b/components/base/src/base.tsx
@@ -0,0 +1,186 @@
+import { RefObject, useLayoutEffect, useRef } from 'react';
+import { Observer, IObserver } from './observer';
+import { isNullOrUndefined, getValue } from './util';
+
+const isColEName: RegExp = new RegExp(']');
+
+export declare type EmitType = ((arg?: T, ...rest: unknown[]) => void);
+
+/**
+ * Main interface for public and protected properties and methods in Base.
+ *
+ * @private
+ */
+export interface IBase {
+ /**
+ * Associated HTML element.
+ *
+ * @private
+ */
+ element?: RefObject<(ElementType) | null>;
+
+ /**
+ * Determines if the instance is destroyed.
+ *
+ * @private
+ */
+ isDestroyed?: boolean;
+
+ /**
+ * Checks if changes are protected.
+ *
+ * @private
+ */
+ isProtectedOnChange?: boolean;
+
+ /**
+ * Observer for the component model.
+ *
+ * @private
+ */
+ modelObserver?: IObserver;
+
+ /**
+ * Indicates if the component is refreshing.
+ *
+ * @private
+ */
+ refreshing?: boolean;
+
+ /**
+ * Adds an event listener.
+ *
+ * @private
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The handler function to execute when the event is triggered.
+ */
+ addEventListener?(eventName: string, handler: Function): void;
+
+ /**
+ * Removes an event listener.
+ *
+ * @private
+ * @param eventName - The name of the event to stop listening for.
+ * @param handler - The handler function to remove.
+ */
+ removeEventListener?(eventName: string, handler: Function): void;
+
+ /**
+ * Triggers event listeners for a specified event.
+ *
+ * @private
+ * @param eventName - The name of the event to trigger.
+ * @param eventProp - Properties of the event.
+ * @param successHandler - Function to call on successful event execution.
+ * @param errorHandler - Function to call on failed event execution.
+ * @returns {void | object}
+ */
+ trigger?(eventName: string, eventProp?: Object, successHandler?: Function, errorHandler?: Function): void | object;
+
+ /**
+ * Destroys the instance and cleans up resources.
+ */
+ destroy?(): void;
+}
+
+/**
+ * Base component function that initializes and manages component properties.
+ *
+ * @private
+ * @template ElementType - The type of the element reference.
+ * @param {IBase} [props] - The initial properties for the component.
+ * @param {RefObject} [element] - The reference object for the element.
+ * @returns {IBase} The initialized component properties.
+ */
+export function Base(props?: IBase, element?: RefObject): IBase {
+ const modelObserver: IObserver = Observer();
+
+ const propsRef: IBase = {
+ isDestroyed: false,
+ isProtectedOnChange: true,
+ modelObserver,
+ ...props
+ };
+
+ propsRef.element = useRef(null);
+
+ /**
+ * Adds the handler to the given event listener.
+ *
+ * @param {string} eventName - A String that specifies the name of the event.
+ * @param {Function} handler - Specifies the function to run when the event occurs.
+ * @returns {void}
+ */
+ propsRef.addEventListener = (eventName: string, handler: Function) => {
+ propsRef.modelObserver.on(eventName, handler);
+ };
+
+ /**
+ * Removes the handler from the given event listener.
+ *
+ * @param {string} eventName - A String that specifies the name of the event to remove.
+ * @param {Function} handler - Specifies the function to remove.
+ * @returns {void}
+ */
+ propsRef.removeEventListener = (eventName: string, handler: Function): void => {
+ propsRef.modelObserver.off(eventName, handler);
+ };
+
+ /**
+ * Triggers the handlers in the specified event.
+ *
+ * @param {string} eventName - Specifies the event to trigger for the specified component properties.
+ * @param {Object} [eventProp] - Additional parameters to pass on to the event properties.
+ * @param {Function} [successHandler] - This function will invoke after the event successfully triggered.
+ * @param {Function} [errorHandler] - This function will invoke if the event fails to trigger.
+ * @returns {void | object} ?
+ */
+ propsRef.trigger = (
+ eventName: string,
+ eventProp?: Object,
+ successHandler?: Function,
+ errorHandler?: Function
+ ): void | object => {
+ if (propsRef.isDestroyed !== true) {
+ const prevDetection: boolean = propsRef.isProtectedOnChange;
+ propsRef.isProtectedOnChange = false;
+ const data: object = propsRef.modelObserver.notify(eventName, eventProp, successHandler, errorHandler) as object;
+ if (isColEName.test(eventName)) {
+ const handler: Function = getValue(eventName, propsRef);
+ if (handler) {
+ handler.call(propsRef, eventProp);
+ if (successHandler) {
+ successHandler.call(propsRef, eventProp);
+ }
+ } else if (successHandler) {
+ successHandler.call(propsRef, eventProp);
+ }
+ }
+ propsRef.isProtectedOnChange = prevDetection;
+ return data;
+ }
+ };
+
+ /**
+ * Destroys the instance and cleans up resources.
+ *
+ * @returns {void}
+ */
+ propsRef.destroy = () => {
+ propsRef.modelObserver.destroy();
+ propsRef.isDestroyed = true;
+ };
+
+ useLayoutEffect(() => {
+ /**
+ * Initialize the instance.
+ */
+ if (element && !isNullOrUndefined(element.current)) {
+ propsRef.element.current = element.current;
+ propsRef.isProtectedOnChange = false;
+ }
+ propsRef.isDestroyed = false;
+ }, []);
+
+ return propsRef;
+}
diff --git a/components/base/src/browser.tsx b/components/base/src/browser.tsx
new file mode 100644
index 0000000..c3cdca6
--- /dev/null
+++ b/components/base/src/browser.tsx
@@ -0,0 +1,504 @@
+import { isUndefined } from './util';
+const REGX_MOBILE: RegExp = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i;
+const REGX_IE: RegExp = /msie|trident/i;
+const REGX_IE11: RegExp = /Trident\/7\./;
+const REGX_IOS: RegExp = /(ipad|iphone|ipod touch)/i;
+const REGX_IOS7: RegExp = /(ipad|iphone|ipod touch);.*os 7_\d|(ipad|iphone|ipod touch);.*os 8_\d/i;
+const REGX_ANDROID: RegExp = /android/i;
+const REGX_WINDOWS: RegExp = /trident|windows phone|edge/i;
+const REGX_VERSION: RegExp = /(version)[ /]([\w.]+)/i;
+const REGX_BROWSER: { [key: string]: RegExp } = {
+ OPERA: /(opera|opr)(?:.*version|)[ /]([\w.]+)/i,
+ EDGE: /(edge)(?:.*version|)[ /]([\w.]+)/i,
+ CHROME: /(chrome|crios)[ /]([\w.]+)/i,
+ PANTHOMEJS: /(phantomjs)[ /]([\w.]+)/i,
+ SAFARI: /(safari)[ /]([\w.]+)/i,
+ WEBKIT: /(webkit)[ /]([\w.]+)/i,
+ MSIE: /(msie|trident) ([\w.]+)/i,
+ MOZILLA: /(mozilla)(?:.*? rv:([\w.]+)|)/i
+};
+
+interface MyWindow extends Window {
+ browserDetails: BrowserDetails;
+ cordova: Object;
+ PhoneGap: Object;
+ phonegap: Object;
+ forge: Object;
+ Capacitor?: { getPlatform: () => string };
+}
+declare let window: MyWindow;
+
+/* istanbul ignore else */
+if (typeof window !== 'undefined') {
+ window.browserDetails = window.browserDetails || {};
+}
+
+/**
+ * Interface for BrowserType.
+ */
+interface IBrowser {
+ /**
+ * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.
+ * Also we can set our own userAgent.
+ */
+ userAgent: string;
+
+ /**
+ * Property is to get the browser information like Name, Version and Language.
+ */
+ info: BrowserInfo;
+
+ /**
+ * Property is to get whether the userAgent is based IE.
+ */
+ isIE: boolean;
+
+ /**
+ * Property is to get whether the browser has touch support.
+ */
+ isTouch: boolean;
+
+ /**
+ * Property is to get whether the browser has Pointer support.
+ */
+ isPointer: boolean;
+
+ /**
+ * Property is to get whether the browser has MSPointer support.
+ */
+ isMSPointer: boolean;
+
+ /**
+ * Property is to get whether the userAgent is device based.
+ */
+ isDevice: boolean;
+
+ /**
+ * Property is to get whether the userAgent is Ios.
+ */
+ isIos: boolean;
+
+ /**
+ * Property is to get whether the userAgent is Ios7.
+ */
+ isIos7: boolean;
+
+ /**
+ * Property is to get whether the userAgent is Android.
+ */
+ isAndroid: boolean;
+
+ /**
+ * Property is to identify whether application ran in web view.
+ */
+ isWebView: boolean;
+
+ /**
+ * Property is to get whether the userAgent is Windows.
+ */
+ isWindows: boolean;
+
+ /**
+ * Property is to get the touch start event. It returns event name based on browser.
+ */
+ touchStartEvent: string;
+
+ /**
+ * Property is to get the touch move event. It returns event name based on browser.
+ */
+ touchMoveEvent: string;
+
+ /**
+ * Property is to get the touch end event. It returns event name based on browser.
+ */
+ touchEndEvent: string;
+
+ /**
+ * Property is to cancel the touch end event.
+ */
+ touchCancelEvent: string;
+
+ /**
+ * Method to check whether the browser on the iPad device is Safari or not.
+ */
+ isSafari: () => boolean;
+
+ /**
+ * Property specifies the userAgent of the browser.
+ */
+ uA: string;
+}
+
+/**
+ * Get configuration details for Browser
+ *
+ * @private
+ */
+export const Browser: IBrowser = (() => {
+ const uA: string = typeof navigator !== 'undefined' ? navigator.userAgent : '';
+
+ /**
+ * Extract browser detail.
+ *
+ * @returns {BrowserInfo} ?
+ */
+ function extractBrowserDetail(): BrowserInfo {
+ const browserInfo: BrowserInfo = { culture: {} };
+ const keys: string[] = Object.keys(REGX_BROWSER);
+ let clientInfo: string[] = [];
+ for (const key of keys) {
+ clientInfo = Browser.userAgent.match(REGX_BROWSER[`${key}`]);
+ if (clientInfo) {
+ browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase());
+ browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name);
+ browserInfo.version = clientInfo[2];
+ browserInfo.culture.name = browserInfo.culture.language = navigator.language;
+ if (Browser.userAgent.match(REGX_IE11)) {
+ browserInfo.name = 'msie';
+ break;
+ }
+ const version: RegExpMatchArray | null = Browser.userAgent.match(REGX_VERSION);
+ if (browserInfo.name === 'safari' && version) {
+ browserInfo.version = version[2];
+ }
+ break;
+ }
+ }
+ return browserInfo;
+ }
+
+ /**
+ * Types of events that can be triggered.
+ *
+ * @typedef {('start' | 'move' | 'end' | 'cancel')} EventTypes
+ */
+ type EventTypes = 'start' | 'move' | 'end' | 'cancel';
+
+ /**
+ * Names of the event categories based on the input device.
+ *
+ * @typedef {('isPointer' | 'isTouch' | 'isDevice')} EventNames
+ */
+ type EventNames = 'isPointer' | 'isTouch' | 'isDevice';
+
+ /**
+ * To get events from the browser
+ *
+ * @param {EventTypes} event - type of event triggered.
+ * @returns {string} ?
+ */
+ function getEvent(event: EventTypes): string {
+ const events: Record> = {
+ start: {
+ isPointer: 'pointerdown',
+ isTouch: 'touchstart',
+ isDevice: 'mousedown'
+ },
+ move: {
+ isPointer: 'pointermove',
+ isTouch: 'touchmove',
+ isDevice: 'mousemove'
+ },
+ end: {
+ isPointer: 'pointerup',
+ isTouch: 'touchend',
+ isDevice: 'mouseup'
+ },
+ cancel: {
+ isPointer: 'pointercancel',
+ isTouch: 'touchcancel',
+ isDevice: 'mouseleave'
+ }
+ };
+
+ return Browser.isPointer
+ ? events[`${event}`].isPointer
+ : (Browser.isTouch
+ ? events[`${event}`].isTouch + (!Browser.isDevice ? ' ' + events[`${event}`].isDevice : '')
+ : events[`${event}`].isDevice);
+ }
+
+ /**
+ * To get the Touch start event from browser
+ *
+ * @returns {string} ?
+ */
+ function getTouchStartEvent(): string {
+ return getEvent('start');
+ }
+
+ /**
+ * To get the Touch end event from browser
+ *
+ * @returns {string} ?
+ */
+ function getTouchEndEvent(): string {
+ return getEvent('end');
+ }
+
+ /**
+ * To get the Touch move event from browser
+ *
+ * @returns {string} ?
+ */
+ function getTouchMoveEvent(): string {
+ return getEvent('move');
+ }
+
+ /**
+ * To cancel the touch event from browser
+ *
+ * @returns {string} ?
+ */
+ function getTouchCancelEvent(): string {
+ return getEvent('cancel');
+ }
+
+ /**
+ * Check whether the browser on the iPad device is Safari or not
+ *
+ * @returns {boolean} ?
+ */
+ function isSafari(): boolean {
+ return (
+ Browser.isDevice &&
+ Browser.isIos &&
+ Browser.isTouch &&
+ typeof window !== 'undefined' &&
+ window.navigator.userAgent.toLowerCase().indexOf('iphone') === -1 &&
+ window.navigator.userAgent.toLowerCase().indexOf('safari') > -1
+ );
+ }
+
+ /**
+ * To get the value based on provided key and regX
+ *
+ * @param {string} key ?
+ * @param {RegExp} regX ?
+ * @returns {Object} ?
+ */
+ function getValue(key: string, regX: RegExp): Object {
+ const browserDetails: {} = typeof window !== 'undefined' ? window.browserDetails : {};
+ if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true && !REGX_BROWSER.CHROME.test(navigator.userAgent)) {
+ browserDetails['isIos'] = true;
+ browserDetails['isDevice'] = true;
+ browserDetails['isTouch'] = true;
+ browserDetails['isPointer'] = true;
+ // Set 'isPointer' for pointer-enabled devices (e.g., iPad on Safari)
+ browserDetails['isPointer'] = ('pointerEnabled' in window.navigator);
+ }
+ if (typeof window !== 'undefined' && window.Capacitor && window.Capacitor.getPlatform() === 'ios') {
+ browserDetails['isPointer'] = false;
+ }
+ if ('undefined' === typeof browserDetails[`${key}`]) {
+ return browserDetails[`${key}`] = regX.test(Browser.userAgent);
+ }
+ return browserDetails[`${key}`];
+ }
+
+ return {
+ // Properties
+ /**
+ * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.
+ * Also we can set our own userAgent.
+ *
+ * @param {string} uA ?
+ */
+ set userAgent(uA: string) {
+ Browser.uA = uA;
+ window.browserDetails = {};
+ },
+ get userAgent(): string {
+ return Browser.uA;
+ },
+
+ //Read Only Properties
+
+ /**
+ * Property is to get the browser information like Name, Version and Language
+ *
+ * @returns {BrowserInfo} ?
+ */
+ get info(): BrowserInfo {
+ if (isUndefined(window.browserDetails.info)) {
+ window.browserDetails.info = extractBrowserDetail();
+ }
+ return window.browserDetails.info;
+ },
+
+ /**
+ * Property is to get whether the userAgent is based IE.
+ *
+ * @returns {boolean} ?
+ */
+ get isIE(): boolean {
+ return getValue('isIE', REGX_IE) as boolean;
+ },
+
+ /**
+ * Property is to get whether the browser has touch support.
+ *
+ * @returns {boolean} ?
+ */
+ get isTouch(): boolean {
+ if (isUndefined(window.browserDetails.isTouch)) {
+ window.browserDetails.isTouch = ('ontouchstart' in window.navigator) || (window &&
+ window.navigator &&
+ (window.navigator.maxTouchPoints > 0)) || ('ontouchstart' in window);
+ }
+ return window.browserDetails.isTouch;
+ },
+
+ /**
+ * Property is to get whether the browser has Pointer support.
+ *
+ * @returns {boolean} ?
+ */
+ get isPointer(): boolean {
+ if (isUndefined(window.browserDetails.isPointer)) {
+ window.browserDetails.isPointer = ('pointerEnabled' in window.navigator);
+ }
+ return window.browserDetails.isPointer;
+ },
+ /**
+ * Property is to get whether the browser has MSPointer support.
+ *
+ * @returns {boolean} ?
+ */
+ get isMSPointer(): boolean {
+ if (isUndefined(window.browserDetails.isMSPointer)) {
+ window.browserDetails.isMSPointer = ('msPointerEnabled' in window.navigator);
+ }
+ return window.browserDetails.isMSPointer;
+ },
+ /**
+ * Property is to get whether the userAgent is device based.
+ *
+ * @returns {boolean} ?
+ */
+ get isDevice(): boolean {
+ return getValue('isDevice', REGX_MOBILE) as boolean;
+ },
+ /**
+ * Property is to get whether the userAgent is Ios.
+ *
+ * @returns {boolean} ?
+ */
+ get isIos(): boolean {
+ return getValue('isIos', REGX_IOS) as boolean;
+ },
+ /**
+ * Property is to get whether the userAgent is Ios7.
+ *
+ * @returns {boolean} ?
+ */
+ get isIos7(): boolean {
+ return getValue('isIos7', REGX_IOS7) as boolean;
+ },
+ /**
+ * Property is to get whether the userAgent is Android.
+ *
+ * @returns {boolean} ?
+ */
+ get isAndroid(): boolean {
+ return getValue('isAndroid', REGX_ANDROID) as boolean;
+ },
+ /**
+ * Property is to identify whether application ran in web view.
+ *
+ * @returns {boolean} ?
+ */
+ get isWebView(): boolean {
+ if (isUndefined(window.browserDetails.isWebView)) {
+ window.browserDetails.isWebView = !(isUndefined(window.cordova) && isUndefined(window.PhoneGap)
+ && isUndefined(window.phonegap) && window.forge !== 'object');
+ }
+ return window.browserDetails.isWebView;
+ },
+ /**
+ * Property is to get whether the userAgent is Windows.
+ *
+ * @returns {boolean} ?
+ */
+ get isWindows(): boolean {
+ return getValue('isWindows', REGX_WINDOWS) as boolean;
+ },
+ /**
+ * Property is to get the touch start event. It returns event name based on browser.
+ *
+ * @returns {string} ?
+ */
+ get touchStartEvent(): string {
+ if (isUndefined(window.browserDetails.touchStartEvent)) {
+ window.browserDetails.touchStartEvent = getTouchStartEvent();
+ }
+ return window.browserDetails.touchStartEvent;
+ },
+ /**
+ * Property is to get the touch move event. It returns event name based on browser.
+ *
+ * @returns {string} ?
+ */
+ get touchMoveEvent(): string {
+ if (isUndefined(window.browserDetails.touchMoveEvent)) {
+ window.browserDetails.touchMoveEvent = getTouchMoveEvent();
+ }
+ return window.browserDetails.touchMoveEvent;
+ },
+ /**
+ * Property is to get the touch end event. It returns event name based on browser.
+ *
+ * @returns {string} ?
+ */
+ get touchEndEvent(): string {
+ if (isUndefined(window.browserDetails.touchEndEvent)) {
+ window.browserDetails.touchEndEvent = getTouchEndEvent();
+ }
+ return window.browserDetails.touchEndEvent;
+ },
+ /**
+ * Property is to cancel the touch end event.
+ *
+ * @returns {string} ?
+ */
+ get touchCancelEvent(): string {
+ if (isUndefined(window.browserDetails.touchCancelEvent)) {
+ window.browserDetails.touchCancelEvent = getTouchCancelEvent();
+ }
+ return window.browserDetails.touchCancelEvent;
+ },
+ isSafari,
+ uA
+ };
+})();
+
+/**
+ * Browser details for the window object.
+ */
+interface BrowserDetails {
+ isAndroid?: boolean;
+ isDevice?: boolean;
+ isIE?: boolean;
+ isIos?: boolean;
+ isIos7?: boolean;
+ isMSPointer?: boolean;
+ isPointer?: boolean;
+ isTouch?: boolean;
+ isWebView?: boolean;
+ isWindows?: boolean;
+ isSafari?: boolean;
+ info?: BrowserInfo;
+ touchStartEvent?: string;
+ touchMoveEvent?: string;
+ touchEndEvent?: string;
+ touchCancelEvent?: string;
+}
+
+/**
+ * Information about the browser.
+ */
+interface BrowserInfo {
+ name?: string;
+ version?: string;
+ culture?: { name?: string, language?: string };
+}
diff --git a/components/base/src/component.tsx b/components/base/src/component.tsx
new file mode 100644
index 0000000..c618533
--- /dev/null
+++ b/components/base/src/component.tsx
@@ -0,0 +1,91 @@
+import { validateLicense, createLicenseOverlay, componentList } from './validate-lic';
+
+let componentCount: number = 0;
+let lastPageID: number;
+let lastHistoryLen: number = 0;
+// Declare the static variable to count the instance
+let instancecount: number = 0;
+// Declare the static variable to find if control limit exceed or not
+let isvalid: boolean = true;
+// We have added styles to inline type so here declare the static variable to detect if banner is added or not
+let isBannerAdded: boolean = false;
+
+//Function handling for page navigation detection
+/* istanbul ignore next */
+(() => {
+ if (typeof window !== 'undefined') {
+ window.addEventListener(
+ 'popstate',
+ /* istanbul ignore next */
+ () => {
+ componentCount = 0;
+ });
+ }
+})();
+
+/**
+ * Checks if the browsing history has changed based on the current page ID or history length.
+ *
+ * @returns {boolean} - Returns true if history has changed, otherwise false.
+ */
+function isHistoryChanged(): boolean {
+ return lastPageID !== pageID(window.location.href) || lastHistoryLen !== window.history.length;
+}
+
+/**
+ * Computes a unique page ID based on the provided URL.
+ *
+ * @param {string} url - The URL from which to generate the page ID.
+ * @returns {number} - The calculated page ID.
+ */
+function pageID(url: string): number {
+ let hash: number = 0;
+ if (url.length === 0) { return hash; }
+ for (let i: number = 0; i < url.length; i++) {
+ const char: number = url.charCodeAt(i);
+ hash = ((hash << 5) - hash) + char;
+ hash = hash & hash; // Convert to 32bit integer
+ }
+ return Math.abs(hash);
+}
+
+/**
+ * Generates a unique ID for the component instance based on the current page and instance count.
+ *
+ * @private
+ * @param {string} [definedName] - The name to prefix the unique ID.
+ * @returns {string} - The generated unique ID.
+ */
+export function componentUniqueID(definedName?: string): string {
+ if (isHistoryChanged()) {
+ componentCount = 0;
+ }
+ lastPageID = pageID(window.location.href);
+ lastHistoryLen = window.history.length;
+ return `${definedName}_${lastPageID}_${componentCount++}`;
+}
+
+/**
+ * Pre-render function to manage license validation and instance counting.
+ * This function ensures that a license overlay is created if necessary
+ * and tracks the number of instances for specific modules.
+ *
+ * @private
+ * @param {string} moduleName - The name of the module being rendered.
+ * @returns {void}
+ */
+export function preRender(moduleName: string): void {
+ if (!isvalid && !isBannerAdded) {
+ createLicenseOverlay();
+ isBannerAdded = true;
+ }
+ // Based on the considered control list we have count the instance
+ if (window && document && !validateLicense()) {
+ if (componentList.indexOf(moduleName) !== -1) {
+ instancecount = instancecount + 1;
+ if (instancecount > 5) {
+ isvalid = false;
+ }
+ }
+ }
+}
diff --git a/components/base/src/dom.tsx b/components/base/src/dom.tsx
new file mode 100644
index 0000000..4494de6
--- /dev/null
+++ b/components/base/src/dom.tsx
@@ -0,0 +1,486 @@
+import { EventHandler } from './event-handler';
+import { isNullOrUndefined, getValue, setValue, isObject, extend } from './util';
+
+const SVG_REG: RegExp = /^svg|^path|^g/;
+export interface ElementProperties {
+ id?: string;
+ className?: string;
+ innerHTML?: string;
+ styles?: string;
+ attrs?: { [key: string]: string };
+}
+
+/**
+ * Function to create Html element.
+ *
+ * @param {string} tagName - Name of the tag, id and class names.
+ * @param {ElementProperties} properties - Object to set properties in the element.
+ * @param {ElementProperties} properties.id - To set the id to the created element.
+ * @param {ElementProperties} properties.className - To add classes to the element.
+ * @param {ElementProperties} properties.innerHTML - To set the innerHTML to element.
+ * @param {ElementProperties} properties.styles - To set the some custom styles to element.
+ * @param {ElementProperties} properties.attrs - To set the attributes to element.
+ * @returns {any} ?
+ * @private
+ */
+export function createElement(tagName: string, properties?: ElementProperties): HTMLElement {
+ const element: HTMLElement = (SVG_REG.test(tagName) ? document.createElementNS('http://www.w3.org/2000/svg', tagName) : document.createElement(tagName)) as HTMLElement;
+ if (typeof (properties) === 'undefined') {
+ return element as HTMLElement;
+ }
+ element.innerHTML = (properties.innerHTML ? properties.innerHTML : '');
+
+ if (properties.className !== undefined) {
+ element.className = properties.className;
+ }
+ if (properties.id !== undefined) {
+ element.id = properties.id;
+ }
+ if (properties.styles !== undefined) {
+ element.setAttribute('style', properties.styles);
+ }
+ if (properties.attrs !== undefined) {
+ attributes(element, properties.attrs);
+ }
+ return element;
+}
+
+/**
+ * The function used to add the classes to array of elements
+ *
+ * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes
+ * @param {string|string[]} classes - String or array of string that need to add an individual element as a class
+ * @returns {any} .
+ * @private
+ */
+export function addClass(elements: Element[] | NodeList, classes: string | string[]): Element[] | NodeList {
+ const classList: string[] = getClassList(classes);
+ const regExp: RegExpConstructor = RegExp;
+ for (const ele of (elements as Element[])) {
+ for (const className of classList) {
+ if (isObject(ele)) {
+ const curClass: string = getValue('attributes.className', ele);
+ if (isNullOrUndefined(curClass)) {
+ setValue('attributes.className', className, ele);
+ } else if (!new regExp('\\b' + className + '\\b', 'i').test(curClass)) {
+ setValue('attributes.className', curClass + ' ' + className, ele);
+ }
+ } else {
+ if (!ele.classList.contains(className)) {
+ ele.classList.add(className);
+ }
+ }
+ }
+ }
+ return elements;
+}
+
+/**
+ * The function used to add the classes to array of elements
+ *
+ * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes
+ * @param {string|string[]} classes - String or array of string that need to add an individual element as a class
+ * @returns {any} .
+ * @private
+ */
+export function removeClass(elements: Element[] | NodeList, classes: string | string[]): Element[] | NodeList {
+ const classList: string[] = getClassList(classes);
+ for (const ele of (elements as Element[])) {
+ const flag: boolean = isObject(ele);
+ const canRemove: boolean = flag ? getValue('attributes.className', ele) : ele.className !== '';
+ if (canRemove) {
+ for (const className of classList) {
+ if (flag) {
+ const classes: string = getValue('attributes.className', ele);
+ const classArr: string[] = classes.split(' ');
+ const index: number = classArr.indexOf(className);
+ if (index !== -1) {
+ classArr.splice(index, 1);
+ }
+ setValue('attributes.className', classArr.join(' '), ele);
+ } else {
+ ele.classList.remove(className);
+ }
+ }
+ }
+ }
+ return elements;
+}
+
+/**
+ * The function used to get classlist.
+ *
+ * @param {string | string[]} classes - An element the need to check visibility
+ * @returns {string[]} ?
+ * @private
+ */
+function getClassList(classes: string | string[]): string[] {
+ if (typeof classes === 'string') {
+ return [classes];
+ }
+ return classes;
+}
+
+/**
+ * The function used to check element is visible or not.
+ *
+ * @param {Element|Node} element - An element the need to check visibility
+ * @returns {boolean} ?
+ * @private
+ */
+export function isVisible(element: Element | Node): boolean {
+ const ele: HTMLElement = element as HTMLElement;
+ return ele.style.visibility === '' && ele.offsetWidth > 0;
+}
+
+/**
+ * The function used to insert an array of elements into a first of the element.
+ *
+ * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend.
+ * @param {Element} toElement - An element that is going to prepend.
+ * @param {boolean} isEval - ?
+ * @returns {Element[] | NodeList} ?
+ * @private
+ */
+export function prepend(
+ fromElements: HTMLElement[] | NodeListOf,
+ toElement: Element, isEval?: boolean
+): Element[] | NodeList {
+ const docFrag: DocumentFragment = document.createDocumentFragment();
+ for (const ele of (fromElements as Element[])) {
+ docFrag.appendChild(ele);
+ }
+ toElement.insertBefore(docFrag, toElement.firstElementChild);
+ if (isEval) {
+ executeScript(toElement);
+ }
+ return fromElements;
+}
+
+/**
+ * The function used to insert an array of elements into last of the element.
+ *
+ * @param {Element[]|NodeList} fromElements - An array of elements that need to append.
+ * @param {Element} toElement - An element that is going to prepend.
+ * @param {boolean} isEval - ?
+ * @returns {Element[] | NodeList} ?
+ * @private
+ */
+export function append(fromElements: Element[] | NodeList, toElement: Element, isEval?: boolean): Element[] | NodeList {
+ const docFrag: DocumentFragment = document.createDocumentFragment();
+ if (fromElements instanceof NodeList) {
+ while (fromElements.length > 0) {
+ docFrag.appendChild(fromElements[0]);
+ }
+ } else {
+ for (const ele of fromElements) {
+ docFrag.appendChild(ele);
+ }
+ }
+ toElement.appendChild(docFrag);
+ if (isEval) {
+ executeScript(toElement);
+ }
+ return fromElements;
+}
+
+/**
+ * The function is used to evaluate script from Ajax request
+ *
+ * @param {Element} ele - An element is going to evaluate the script
+ * @returns {void} ?
+ */
+function executeScript(ele: Element): void {
+ if (!document) {
+ return;
+ }
+ const scripts: NodeListOf = ele.querySelectorAll('script');
+ scripts.forEach((scriptElement: HTMLScriptElement) => {
+ const script: HTMLScriptElement = document.createElement('script');
+ script.text = scriptElement.innerHTML;
+ document.head.appendChild(script).parentNode.removeChild(script);
+ });
+}
+
+
+/**
+ * The function used to remove the element from parentnode
+ *
+ * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom
+ * @returns {any} ?
+ * @private
+ */
+export function detach(element: Element | Node | HTMLElement): Element | null {
+ const parentNode: Node = element.parentNode as ParentNode;
+ if (parentNode) {
+ return parentNode.removeChild(element) as Element;
+ }
+ return null;
+}
+
+/**
+ * The function used to remove the element from Dom also clear the bounded events
+ *
+ * @param {Element|Node|HTMLElement} element - An element remove from the Dom
+ * @returns {void} ?
+ * @private
+ */
+export function remove(element: Element | Node | HTMLElement): void {
+ const parentNode: Node = element.parentNode as ParentNode;
+ EventHandler.clearEvents(element as Element);
+ if (parentNode) {
+ parentNode.removeChild(element);
+ }
+}
+
+/**
+ * The function helps to set multiple attributes to an element
+ *
+ * @param {Element|Node} element - An element that need to set attributes.
+ * @param {string} attributes - JSON Object that is going to as attributes.
+ * @returns {Element} ?
+ * @private
+ */
+export function attributes(element: Element | Node, attributes: { [key: string]: string }): Element {
+ const ele: Element = element as Element;
+ Object.keys(attributes).forEach((key: string) => {
+ if (isObject(ele)) {
+ let iKey: string = key;
+ if (key === 'tabindex') {
+ iKey = 'tabIndex';
+ }
+ ele.attributes[`${iKey}`] = attributes[`${key}`];
+ } else {
+ ele.setAttribute(key, attributes[`${key}`]);
+ }
+ });
+ return ele;
+}
+
+/**
+ * The function selects the element from giving context.
+ *
+ * @param {string} selector - Selector string need fetch element
+ * @param {Document|Element} context - It is an optional type, That specifies a Dom context.
+ * @returns {any} ?
+ * @private
+ */
+export function select(selector: string, context: Document | Element = document): Element | null {
+ if (!document) {
+ return null;
+ }
+ selector = querySelectId(selector);
+ return context.querySelector(selector);
+}
+
+/**
+ * The function selects an array of element from the given context.
+ *
+ * @param {string} selector - Selector string need fetch element
+ * @param {Document|Element} context - It is an optional type, That specifies a Dom context.
+ * @returns {HTMLElement[]} ?
+ * @private
+ */
+export function selectAll(selector: string, context: Document | Element = document): HTMLElement[] | [] {
+ if (!document) {
+ return [];
+ }
+ selector = querySelectId(selector);
+ const nodeList: NodeListOf = context.querySelectorAll(selector);
+ return Array.from(nodeList) as HTMLElement[];
+}
+
+/**
+ * The function selects an id of element from the given context.
+ *
+ * @param {string} selector - Selector string need fetch element
+ * @returns {string} ?
+ */
+function querySelectId(selector: string): string {
+ const charRegex: RegExp = /(!|"|\$|%|&|'|\(|\)|\*|\/|:|;|<|=|\?|@|\]|\^|`|{|}|\||\+|~)/g;
+ if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {
+ const idList: string[] = selector.split(',');
+ for (let i: number = 0; i < idList.length; i++) {
+ const list: string[] = idList[parseInt(i.toString(), 10)].split(' ');
+ for (let j: number = 0; j < list.length; j++) {
+ if (list[parseInt(j.toString(), 10)].indexOf('#') > -1) {
+ if (!list[parseInt(j.toString(), 10)].match(/\[.*\]/)) {
+ const splitId: string[] = list[parseInt(j.toString(), 10)].split('#');
+ if (splitId[1].match(/^\d/) || splitId[1].match(charRegex)) {
+ const setId: string[] = list[parseInt(j.toString(), 10)].split('.');
+ setId[0] = setId[0].replace(/#/, '[id=\'') + '\']';
+ list[parseInt(j.toString(), 10)] = setId.join('.');
+ }
+ }
+ }
+ }
+ idList[parseInt(i.toString(), 10)] = list.join(' ');
+ }
+ return idList.join(',');
+ }
+ return selector;
+}
+
+/**
+ * Returns the closest ancestor of the current element (or the current element itself)
+ * that matches the specified CSS selector.
+ *
+ * @param {Element} element - An element that need to find the closest element.
+ * @param {string} selector - A classSelector of closest element.
+ * @returns {Element} ?
+ * @private
+ */
+export function closest(element: Element | Node, selector: string): Element | null {
+ let el: Element = element as Element;
+ if (el && typeof el.closest === 'function') {
+ return el.closest(selector);
+ }
+
+ while (el && el.nodeType === 1) {
+ if (matches(el, selector)) {
+ return el;
+ }
+
+ el = el.parentElement as Element;
+ }
+
+ return null;
+}
+
+/**
+ * Returns all sibling elements of the given element.
+ *
+ * @param {Element|Node} element - An element that need to get siblings.
+ * @returns {Element[]} ?
+ * @private
+ */
+export function siblings(element: Element | Node): Element[] {
+ const siblings: Element[] = [];
+ const siblingNodes: NodeListOf = (element.parentNode.childNodes || []) as NodeListOf;
+
+ siblingNodes.forEach((curNode: Element) => {
+ if (curNode.nodeType === Node.ELEMENT_NODE && element !== curNode) {
+ siblings.push(curNode as Element);
+ }
+ });
+
+ return siblings;
+}
+
+/**
+ * set the value if not exist. Otherwise set the existing value
+ *
+ * @param {HTMLElement} element - An element to which we need to set value.
+ * @param {string} property - Property need to get or set.
+ * @param {string} value - value need to set.
+ * @returns {string} ?
+ * @private
+ */
+export function getAttributeOrDefault(element: HTMLElement, property: string, value: string): string {
+ let attrVal: string = element.getAttribute(property);
+ if (isNullOrUndefined(attrVal) && value) {
+ element.setAttribute(property, value.toString());
+ attrVal = value;
+ }
+ return attrVal;
+}
+
+/**
+ * Set the style attributes to Html element.
+ *
+ * @param {HTMLElement} element - Element which we want to set attributes
+ * @param {any} attrs - Set the given attributes to element
+ * @returns {void} ?
+ * @private
+ */
+export function setStyleAttribute(element: HTMLElement, attrs: { [key: string]: Object }): void {
+ if (!isNullOrUndefined(attrs)) {
+ Object.keys(attrs).forEach((key: string) => {
+ element.style[`${key}`] = attrs[`${key}`];
+ });
+ }
+}
+
+/**
+ * Method for add and remove classes to a dom element.
+ *
+ * @param {Element} element - Element for add and remove classes
+ * @param {string[]} addClasses - List of classes need to be add to the element
+ * @param {string[]} removeClasses - List of classes need to be remove from the element
+ * @returns {void} ?
+ * @private
+ */
+export function classList(element: Element, addClasses: string[], removeClasses: string[]): void {
+ addClass([element], addClasses);
+ removeClass([element], removeClasses);
+}
+
+/**
+ * Method to check whether the element matches the given selector.
+ *
+ * @param {Element} element - Element to compare with the selector.
+ * @param {string} selector - String selector which element will satisfy.
+ * @returns {void} ?
+ * @private
+ */
+export function matches(element: Element, selector: string): boolean {
+ if (!document) {
+ return false;
+ }
+ const matchesFn: Function = element.matches
+ || (element as { msMatchesSelector?: (selector: string) => boolean }).msMatchesSelector
+ || element.webkitMatchesSelector;
+ if (matchesFn) {
+ return matchesFn.call(element, selector);
+ } else {
+ return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;
+ }
+}
+
+/**
+ * Method to get the html text from DOM.
+ *
+ * @param {HTMLElement} ele - Element to compare with the selector.
+ * @param {string} innerHTML - String selector which element will satisfy.
+ * @returns {void} ?
+ * @private
+ */
+export function includeInnerHTML(ele: HTMLElement, innerHTML: string): void {
+ ele.innerHTML = innerHTML;
+}
+
+/**
+ * Method to get the containsclass.
+ *
+ * @param {HTMLElement} ele - Element to compare with the selector.
+ * @param {string} className - String selector which element will satisfy.
+ * @returns {boolean} ?
+ * @private
+ */
+export function containsClass(ele: HTMLElement, className: string): boolean {
+ if (isObject(ele)) {
+ const regExp: RegExpConstructor = RegExp;
+ return new regExp('\\b' + className + '\\b', 'i').test(ele.attributes.getNamedItem('class')?.value || '');
+ } else {
+ return ele.classList.contains(className);
+ }
+}
+
+/**
+ * Method to check whether the element matches the given selector.
+ *
+ * @param {Object} element - Element to compare with the selector.
+ * @param {boolean} deep ?
+ * @returns {any} ?
+ * @private
+ */
+// eslint-disable-next-line
+export function cloneNode(element: Object, deep?: boolean): any {
+ if (isObject(element)) {
+ if (deep) {
+ return extend({}, {}, element, true);
+ }
+ } else {
+ return (element as HTMLElement).cloneNode(deep);
+ }
+}
diff --git a/components/base/src/event-handler.tsx b/components/base/src/event-handler.tsx
new file mode 100644
index 0000000..ca48c99
--- /dev/null
+++ b/components/base/src/event-handler.tsx
@@ -0,0 +1,202 @@
+import { debounce, extend } from './util';
+import { Browser } from './browser';
+
+/**
+ * Interface for EventHandler.
+ */
+interface IEventHandler {
+ add: (
+ element: Element | HTMLElement | Document,
+ eventName: string,
+ listener: Function,
+ bindTo?: Object,
+ intDebounce?: number
+ ) => Function | null;
+ clearEvents: (element: Element) => void;
+ remove: (
+ element: Element | HTMLElement | Document,
+ eventName: string,
+ listener: Function
+ ) => void;
+ trigger: (element: HTMLElement, eventName: string, eventProp?: Object) => void;
+}
+
+/**
+ * Custom hook to handle events on HTML elements.
+ */
+export const EventHandler: IEventHandler = (() => {
+ /**
+ * Adds or retrieves event data from an element.
+ *
+ * @param {Element | HTMLElement | Document} element - The target element to retrieve or add event data.
+ * @returns {EventOptions[]} - The list of event options associated with the element.
+ */
+ function addOrGetEventData(element: Element | HTMLElement | Document): EventOptions[] {
+ if (!element) {
+ return null;
+ }
+ if ('__eventList' in element) {
+ return (element as EventData).__eventList.events || [];
+ } else {
+ (element as EventData).__eventList = {};
+ return (element as EventData).__eventList.events = [];
+ }
+ }
+
+ /**
+ * Adds an event listener to the specified DOM element.
+ *
+ * @param {Element | HTMLElement | Document} element - Target HTML DOM element.
+ * @param {string} eventName - A string that specifies the name of the event.
+ * @param {Function} listener - Specifies the function to run when the event occurs.
+ * @param {Object} [bindTo] - An object that binds 'this' variable in the event handler.
+ * @param {number} [intDebounce] - Specifies at what interval the given event listener should be triggered.
+ * @returns {Function} - The final event listener function with optional debounce and binding applied.
+ */
+ function add(
+ element: Element | HTMLElement | Document,
+ eventName: string,
+ listener: Function,
+ bindTo?: Object,
+ intDebounce?: number
+ ): Function {
+ if (!element) {
+ return null;
+ }
+ const eventData: EventOptions[] = addOrGetEventData(element);
+ let debounceListener: Function = intDebounce ? debounce(listener, intDebounce) : listener;
+ if (bindTo) { debounceListener = debounceListener.bind(bindTo); }
+ const event: string[] = eventName.split(' ');
+ for (let i: number = 0; i < event.length; i++) {
+ eventData.push({
+ name: event[parseInt(i.toString(), 10)],
+ listener: listener,
+ debounce: debounceListener
+ });
+ const options: {passive: boolean} = Browser.isIE ? null : { passive: false };
+ element.addEventListener(event[parseInt(i.toString(), 10)], debounceListener as EventListener, options);
+ }
+ return debounceListener;
+ }
+
+ /**
+ * Removes an event listener from the specified DOM element.
+ *
+ * @param {Element | HTMLElement | Document} element - Specifies the target HTML element to remove the event.
+ * @param {string} eventName - A string that specifies the name of the event to remove.
+ * @param {Function} listener - Specifies the function to remove.
+ * @returns {void}
+ */
+ function remove(
+ element: Element | HTMLElement | Document,
+ eventName: string,
+ listener: Function
+ ): void {
+ if (!element) {
+ return null;
+ }
+ const eventData: EventOptions[] = addOrGetEventData(element);
+ const event: string[] = eventName.split(' ');
+ for (let j: number = 0; j < event.length; j++) {
+ let index: number = -1;
+ let debounceListener: Function | null = null;
+ if (eventData && eventData.length !== 0) {
+ eventData.some((x: EventOptions, i: number) => {
+ if (x.name === event[parseInt(j.toString(), 10)] && x.listener === listener) {
+ index = i;
+ debounceListener = x.debounce || null;
+ return true;
+ }
+ return false;
+ });
+ }
+ if (index !== -1) {
+ eventData.splice(index, 1);
+ }
+ if (debounceListener) {
+ element.removeEventListener(event[parseInt(j.toString(), 10)], debounceListener as EventListener);
+ }
+ }
+ }
+
+ /**
+ * Clears all the event listeners that have been previously attached to the element.
+ *
+ * @param {Element} element - Specifies the target HTML element to clear the events.
+ * @returns {void}
+ */
+ function clearEvents(element: Element): void {
+ if (!element) {
+ return null;
+ }
+ const eventData: EventOptions[] = addOrGetEventData(element);
+ const copyData: EventOptions[] = extend([], undefined, eventData) as EventOptions[];
+ for (let i: number = 0; i < copyData.length; i++) {
+ const parseValue: EventOptions = copyData[parseInt(i.toString(), 10)];
+ element.removeEventListener(parseValue.name, parseValue.debounce as EventListener);
+ eventData.shift();
+ }
+ }
+
+ /**
+ * Triggers a specific event on the given HTML element.
+ *
+ * @param {HTMLElement} element - Specifies the target HTML element to trigger the event.
+ * @param {string} eventName - Specifies the event to trigger for the specified element.
+ * @param {Object} [eventProp] - Additional parameters to pass on to the event properties.
+ * @returns {void}
+ */
+ function trigger(element: HTMLElement, eventName: string, eventProp?: Object): void {
+ if (!element) {
+ return null;
+ }
+ const eventData: EventOptions[] = addOrGetEventData(element);
+ for (const event of eventData) {
+ if (event.name === eventName) {
+ event.debounce(eventProp);
+ }
+ }
+ }
+
+ return {
+ add,
+ clearEvents,
+ remove,
+ trigger
+ };
+})();
+
+/**
+ * Interface for EventData extending Element for custom event storage.
+ */
+interface EventData extends Element {
+ __eventList: EventList;
+}
+
+/**
+ * Interface for a list of events associated with an element.
+ */
+interface EventList {
+ events?: EventOptions[];
+}
+
+/**
+ * Interface for event options to store event details.
+ */
+interface EventOptions {
+ name: string;
+ listener: Function;
+ debounce?: Function;
+}
+
+/**
+ * Common Event argument for all base Essential JavaScript 2 Events.
+ *
+ * @private
+ */
+export interface BaseEventArgs {
+ /**
+ * Specifies name of the event.
+ */
+ name?: string;
+}
diff --git a/components/base/src/fetch.tsx b/components/base/src/fetch.tsx
new file mode 100644
index 0000000..63f23ea
--- /dev/null
+++ b/components/base/src/fetch.tsx
@@ -0,0 +1,202 @@
+import { isNullOrUndefined as isNOU } from './util';
+
+/**
+ * Interface for the Fetch properties and methods.
+ */
+export interface IFetch {
+ /**
+ * Specifies the URL to which the request is to be sent.
+ *
+ * @default null
+ */
+ url?: string;
+ /**
+ * Specifies which request method is to be used, such as GET, POST, etc.
+ *
+ * @default GET
+ */
+ type?: string;
+ /**
+ * Specifies the content type of the request, which is used to indicate the original media type of the resource.
+ *
+ * @default null
+ */
+ contentType?: string;
+ /**
+ * Specifies the data that needs to be added to the request.
+ *
+ * @default null
+ */
+ data?: string | Object;
+ /**
+ * A boolean value indicating whether to reject the promise or not.
+ *
+ * @private
+ * @default true
+ */
+ emitError?: boolean;
+ /**
+ * Specifies the request object that represents a resource request.
+ *
+ * @default null
+ */
+ fetchRequest?: Request;
+ /**
+ * Specifies the callback function to be triggered before sending the request to the server.
+ * This can be used to modify the fetchRequest object before it is sent.
+ *
+ * @event beforeSend
+ */
+ beforeSend?: ((args: BeforeSendFetchEventArgs) => void) | null;
+ /**
+ * Specifies the callback function to be triggered after the response is received.
+ * This callback will be triggered even if the request is failed.
+ *
+ * @event onLoad
+ */
+ onLoad?: ((response: Response) => void) | null;
+ /**
+ * Specifies the callback function to be triggered after the request is successful.
+ * The callback will contain the server response as a parameter.
+ *
+ * @event onSuccess
+ */
+ onSuccess?: ((data: string | Object, instance: IFetch) => void) | null;
+ /**
+ * Specifies the callback function to be triggered after the request is failed.
+ *
+ * @event onFailure
+ */
+ onFailure?: ((error: Error) => void) | null;
+
+ /**
+ * Sends the fetch request.
+ *
+ * @param {string | Object} [data] - Optional data to be sent with the request.
+ * @returns {Promise} - A promise that resolves to the fetch response.
+ */
+ send?: (data?: string | Object) => Promise;
+}
+
+
+/**
+ * The Fetch function provides a way to make asynchronous network requests, typically to retrieve resources from a server.
+ *
+ * @param {string | Fetch} [props] - The URL string or Fetch object containing request details.
+ * @param {string} [type] - The HTTP method type (e.g., 'GET', 'POST').
+ * @param {string} [contentType] - The content type of the request.
+ * @returns {Fetch} A Fetch object for making the request.
+ *
+ * @example
+ *
+ * var fetchApi = Fetch('index.html', 'GET');
+ * fetchApi.send()
+ * .then((value) => {
+ * console.log(value);
+ * }).catch((error) => {
+ * console.log(error);
+ * });
+ */
+export function Fetch(props?: string | IFetch, type?: string, contentType?: string): IFetch {
+ let url: string | undefined;
+ let fetchProps: IFetch;
+ if (typeof props === 'string') {
+ url = props;
+ fetchProps = {
+ url,
+ type: type ? type.toUpperCase() : 'GET',
+ contentType: contentType || 'application/json; charset=utf-8'
+ };
+ } else {
+ ({ url, type, contentType, ...fetchProps } = props);
+ fetchProps.url = url;
+ fetchProps.type = type ? type.toUpperCase() : 'GET';
+ fetchProps.contentType = contentType || 'application/json; charset=utf-8';
+ }
+ const propsRef: IFetch = {
+ emitError: true,
+ ...fetchProps
+ };
+ let fetchResponse: Promise | null = null;
+
+ propsRef.send = async (data?: string | Object): Promise => {
+ const contentTypes: Object = {
+ 'application/json': 'json',
+ 'multipart/form-data': 'formData',
+ 'application/octet-stream': 'blob',
+ 'application/x-www-form-urlencoded': 'formData'
+ };
+ try {
+ if (isNOU(propsRef.fetchRequest) && propsRef.type === 'GET') {
+ propsRef.fetchRequest = new Request(propsRef.url, { method: propsRef.type });
+ } else if (isNOU(propsRef.fetchRequest)) {
+ propsRef.data = data && !isNOU(data) ? data : propsRef.data;
+ propsRef.fetchRequest = new Request(propsRef.url, {
+ method: propsRef.type,
+ headers: { 'Content-Type': propsRef.contentType },
+ body: propsRef.data as BodyInit
+ });
+ }
+ const eventArgs: BeforeSendFetchEventArgs = { cancel: false, fetchRequest: propsRef.fetchRequest };
+ triggerEvent(propsRef.beforeSend, eventArgs);
+ if (eventArgs.cancel) { return null; }
+ fetchResponse = fetch(propsRef.fetchRequest);
+ return fetchResponse.then((response: Response) => {
+ triggerEvent(propsRef.onLoad, response);
+ if (!response.ok) {
+ throw response;
+ }
+ let responseType: string = 'text';
+ for (const key of Object.keys(contentTypes)) {
+ if (response.headers.get('Content-Type') && (response.headers.get('Content-Type') as string).indexOf(key) !== -1) {
+ responseType = contentTypes[key as string];
+ }
+ }
+ return response[responseType as string]();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ }).then((data: any) => {
+ triggerEvent(propsRef.onSuccess, data, propsRef);
+ return data;
+ }).catch((error: Error) => {
+ let returnVal: Object = {};
+ if (propsRef.emitError) {
+ triggerEvent(propsRef.onFailure, error);
+ returnVal = Promise.reject(error);
+ }
+ return returnVal;
+ });
+ } catch (error) {
+ return error;
+ }
+ };
+
+ /**
+ * Triggers the callback function with provided data and instance.
+ *
+ * @param {Function | null} callback - The callback function to be triggered
+ * @param {string | Object} [data] - Optional data to pass to the callback
+ * @param {IFetch} [instance] - Optional FetchProps instance
+ * @returns {void}
+ */
+ function triggerEvent(callback: Function | null, data?: string | Object, instance?: IFetch): void {
+ if (!isNOU(callback) && typeof callback === 'function') {
+ callback(data, instance);
+ }
+ }
+
+ return propsRef;
+}
+
+/**
+ * Provides information about the beforeSend event.
+ */
+export interface BeforeSendFetchEventArgs {
+ /**
+ * A boolean value indicating whether to cancel the fetch request or not.
+ */
+ cancel?: boolean;
+ /**
+ * Returns the request object that represents a resource request.
+ */
+ fetchRequest: Request;
+}
diff --git a/components/base/src/hijri-parser.tsx b/components/base/src/hijri-parser.tsx
new file mode 100644
index 0000000..a3e538f
--- /dev/null
+++ b/components/base/src/hijri-parser.tsx
@@ -0,0 +1,226 @@
+/**
+ * Hijri parser custom hook
+ */
+
+
+// HijriParser namespace equivalent
+interface HijriDate {
+ year: number;
+ month: number;
+ date: number;
+}
+
+interface IHijriParser {
+ getHijriDate: (gDate: Date) => HijriDate;
+ toGregorian: (year: number, month: number, day: number) => Date
+}
+/**
+ * Custom hook for Hijri date parsing.
+ */
+export const HijriParser: IHijriParser = ((): IHijriParser => {
+
+ const dateCorrection: number[] = [28607, 28636, 28665, 28695, 28724, 28754, 28783, 28813, 28843, 28872, 28901, 28931, 28960, 28990,
+ 29019, 29049, 29078, 29108, 29137, 29167, 29196, 29226, 29255, 29285, 29315, 29345, 29375, 29404, 29434, 29463, 29492, 29522,
+ 29551, 29580, 29610, 29640, 29669, 29699, 29729, 29759, 29788, 29818, 29847, 29876, 29906, 29935, 29964, 29994, 30023, 30053,
+ 30082, 30112, 30141, 30171, 30200, 30230, 30259, 30289, 30318, 30348, 30378, 30408, 30437, 30467, 30496, 30526, 30555, 30585,
+ 30614, 30644, 30673, 30703, 30732, 30762, 30791, 30821, 30850, 30880, 30909, 30939, 30968, 30998, 31027, 31057, 31086, 31116,
+ 31145, 31175, 31204, 31234, 31263, 31293, 31322, 31352, 31381, 31411, 31441, 31471, 31500, 31530, 31559, 31589, 31618, 31648,
+ 31676, 31706, 31736, 31766, 31795, 31825, 31854, 31884, 31913, 31943, 31972, 32002, 32031, 32061, 32090, 32120, 32150, 32180,
+ 32209, 32239, 32268, 32298, 32327, 32357, 32386, 32416, 32445, 32475, 32504, 32534, 32563, 32593, 32622, 32652, 32681, 32711,
+ 32740, 32770, 32799, 32829, 32858, 32888, 32917, 32947, 32976, 33006, 33035, 33065, 33094, 33124, 33153, 33183, 33213, 33243,
+ 33272, 33302, 33331, 33361, 33390, 33420, 33450, 33479, 33509, 33539, 33568, 33598, 33627, 33657, 33686, 33716, 33745, 33775,
+ 33804, 33834, 33863, 33893, 33922, 33952, 33981, 34011, 34040, 34069, 34099, 34128, 34158, 34187, 34217, 34247, 34277, 34306,
+ 34336, 34365, 34395, 34424, 34454, 34483, 34512, 34542, 34571, 34601, 34631, 34660, 34690, 34719, 34749, 34778, 34808, 34837,
+ 34867, 34896, 34926, 34955, 34985, 35015, 35044, 35074, 35103, 35133, 35162, 35192, 35222, 35251, 35280, 35310, 35340, 35370,
+ 35399, 35429, 35458, 35488, 35517, 35547, 35576, 35605, 35635, 35665, 35694, 35723, 35753, 35782, 35811, 35841, 35871, 35901,
+ 35930, 35960, 35989, 36019, 36048, 36078, 36107, 36136, 36166, 36195, 36225, 36254, 36284, 36314, 36343, 36373, 36403, 36433,
+ 36462, 36492, 36521, 36551, 36580, 36610, 36639, 36669, 36698, 36728, 36757, 36786, 36816, 36845, 36875, 36904, 36934, 36963,
+ 36993, 37022, 37052, 37081, 37111, 37141, 37170, 37200, 37229, 37259, 37288, 37318, 37347, 37377, 37406, 37436, 37465, 37495,
+ 37524, 37554, 37584, 37613, 37643, 37672, 37701, 37731, 37760, 37790, 37819, 37849, 37878, 37908, 37938, 37967, 37997, 38027,
+ 38056, 38085, 38115, 38144, 38174, 38203, 38233, 38262, 38292, 38322, 38351, 38381, 38410, 38440, 38469, 38499, 38528, 38558,
+ 38587, 38617, 38646, 38676, 38705, 38735, 38764, 38794, 38823, 38853, 38882, 38912, 38941, 38971, 39001, 39030, 39059, 39089,
+ 39118, 39148, 39178, 39208, 39237, 39267, 39297, 39326, 39355, 39385, 39414, 39444, 39473, 39503, 39532, 39562, 39592, 39621,
+ 39650, 39680, 39709, 39739, 39768, 39798, 39827, 39857, 39886, 39916, 39946, 39975, 40005, 40035, 40064, 40094, 40123, 40153,
+ 40182, 40212, 40241, 40271, 40300, 40330, 40359, 40389, 40418, 40448, 40477, 40507, 40536, 40566, 40595, 40625, 40655, 40685,
+ 40714, 40744, 40773, 40803, 40832, 40862, 40892, 40921, 40951, 40980, 41009, 41039, 41068, 41098, 41127, 41157, 41186, 41216,
+ 41245, 41275, 41304, 41334, 41364, 41393, 41422, 41452, 41481, 41511, 41540, 41570, 41599, 41629, 41658, 41688, 41718, 41748,
+ 41777, 41807, 41836, 41865, 41894, 41924, 41953, 41983, 42012, 42042, 42072, 42102, 42131, 42161, 42190, 42220, 42249, 42279,
+ 42308, 42337, 42367, 42397, 42426, 42456, 42485, 42515, 42545, 42574, 42604, 42633, 42662, 42692, 42721, 42751, 42780, 42810,
+ 42839, 42869, 42899, 42929, 42958, 42988, 43017, 43046, 43076, 43105, 43135, 43164, 43194, 43223, 43253, 43283, 43312, 43342,
+ 43371, 43401, 43430, 43460, 43489, 43519, 43548, 43578, 43607, 43637, 43666, 43696, 43726, 43755, 43785, 43814, 43844, 43873,
+ 43903, 43932, 43962, 43991, 44021, 44050, 44080, 44109, 44139, 44169, 44198, 44228, 44258, 44287, 44317, 44346, 44375, 44405,
+ 44434, 44464, 44493, 44523, 44553, 44582, 44612, 44641, 44671, 44700, 44730, 44759, 44788, 44818, 44847, 44877, 44906, 44936,
+ 44966, 44996, 45025, 45055, 45084, 45114, 45143, 45172, 45202, 45231, 45261, 45290, 45320, 45350, 45380, 45409, 45439, 45468,
+ 45498, 45527, 45556, 45586, 45615, 45644, 45674, 45704, 45733, 45763, 45793, 45823, 45852, 45882, 45911, 45940, 45970, 45999,
+ 46028, 46058, 46088, 46117, 46147, 46177, 46206, 46236, 46265, 46295, 46324, 46354, 46383, 46413, 46442, 46472, 46501, 46531,
+ 46560, 46590, 46620, 46649, 46679, 46708, 46738, 46767, 46797, 46826, 46856, 46885, 46915, 46944, 46974, 47003, 47033, 47063,
+ 47092, 47122, 47151, 47181, 47210, 47240, 47269, 47298, 47328, 47357, 47387, 47417, 47446, 47476, 47506, 47535, 47565, 47594,
+ 47624, 47653, 47682, 47712, 47741, 47771, 47800, 47830, 47860, 47890, 47919, 47949, 47978, 48008, 48037, 48066, 48096, 48125,
+ 48155, 48184, 48214, 48244, 48273, 48303, 48333, 48362, 48392, 48421, 48450, 48480, 48509, 48538, 48568, 48598, 48627, 48657,
+ 48687, 48717, 48746, 48776, 48805, 48834, 48864, 48893, 48922, 48952, 48982, 49011, 49041, 49071, 49100, 49130, 49160, 49189,
+ 49218, 49248, 49277, 49306, 49336, 49365, 49395, 49425, 49455, 49484, 49514, 49543, 49573, 49602, 49632, 49661, 49690, 49720,
+ 49749, 49779, 49809, 49838, 49868, 49898, 49927, 49957, 49986, 50016, 50045, 50075, 50104, 50133, 50163, 50192, 50222, 50252,
+ 50281, 50311, 50340, 50370, 50400, 50429, 50459, 50488, 50518, 50547, 50576, 50606, 50635, 50665, 50694, 50724, 50754, 50784,
+ 50813, 50843, 50872, 50902, 50931, 50960, 50990, 51019, 51049, 51078, 51108, 51138, 51167, 51197, 51227, 51256, 51286, 51315,
+ 51345, 51374, 51403, 51433, 51462, 51492, 51522, 51552, 51582, 51611, 51641, 51670, 51699, 51729, 51758, 51787, 51816, 51846,
+ 51876, 51906, 51936, 51965, 51995, 52025, 52054, 52083, 52113, 52142, 52171, 52200, 52230, 52260, 52290, 52319, 52349, 52379,
+ 52408, 52438, 52467, 52497, 52526, 52555, 52585, 52614, 52644, 52673, 52703, 52733, 52762, 52792, 52822, 52851, 52881, 52910,
+ 52939, 52969, 52998, 53028, 53057, 53087, 53116, 53146, 53176, 53205, 53235, 53264, 53294, 53324, 53353, 53383, 53412, 53441,
+ 53471, 53500, 53530, 53559, 53589, 53619, 53648, 53678, 53708, 53737, 53767, 53796, 53825, 53855, 53884, 53913, 53943, 53973,
+ 54003, 54032, 54062, 54092, 54121, 54151, 54180, 54209, 54239, 54268, 54297, 54327, 54357, 54387, 54416, 54446, 54476, 54505,
+ 54535, 54564, 54593, 54623, 54652, 54681, 54711, 54741, 54770, 54800, 54830, 54859, 54889, 54919, 54948, 54977, 55007, 55036,
+ 55066, 55095, 55125, 55154, 55184, 55213, 55243, 55273, 55302, 55332, 55361, 55391, 55420, 55450, 55479, 55508, 55538, 55567,
+ 55597, 55627, 55657, 55686, 55716, 55745, 55775, 55804, 55834, 55863, 55892, 55922, 55951, 55981, 56011, 56040, 56070, 56100,
+ 56129, 56159, 56188, 56218, 56247, 56276, 56306, 56335, 56365, 56394, 56424, 56454, 56483, 56513, 56543, 56572, 56601, 56631,
+ 56660, 56690, 56719, 56749, 56778, 56808, 56837, 56867, 56897, 56926, 56956, 56985, 57015, 57044, 57074, 57103, 57133, 57162,
+ 57192, 57221, 57251, 57280, 57310, 57340, 57369, 57399, 57429, 57458, 57487, 57517, 57546, 57576, 57605, 57634, 57664, 57694,
+ 57723, 57753, 57783, 57813, 57842, 57871, 57901, 57930, 57959, 57989, 58018, 58048, 58077, 58107, 58137, 58167, 58196, 58226,
+ 58255, 58285, 58314, 58343, 58373, 58402, 58432, 58461, 58491, 58521, 58551, 58580, 58610, 58639, 58669, 58698, 58727, 58757,
+ 58786, 58816, 58845, 58875, 58905, 58934, 58964, 58994, 59023, 59053, 59082, 59111, 59141, 59170, 59200, 59229, 59259, 59288,
+ 59318, 59348, 59377, 59407, 59436, 59466, 59495, 59525, 59554, 59584, 59613, 59643, 59672, 59702, 59731, 59761, 59791, 59820,
+ 59850, 59879, 59909, 59939, 59968, 59997, 60027, 60056, 60086, 60115, 60145, 60174, 60204, 60234, 60264, 60293, 60323, 60352,
+ 60381, 60411, 60440, 60469, 60499, 60528, 60558, 60588, 60618, 60648, 60677, 60707, 60736, 60765, 60795, 60824, 60853, 60883,
+ 60912, 60942, 60972, 61002, 61031, 61061, 61090, 61120, 61149, 61179, 61208, 61237, 61267, 61296, 61326, 61356, 61385, 61415,
+ 61445, 61474, 61504, 61533, 61563, 61592, 61621, 61651, 61680, 61710, 61739, 61769, 61799, 61828, 61858, 61888, 61917, 61947,
+ 61976, 62006, 62035, 62064, 62094, 62123, 62153, 62182, 62212, 62242, 62271, 62301, 62331, 62360, 62390, 62419, 62448, 62478,
+ 62507, 62537, 62566, 62596, 62625, 62655, 62685, 62715, 62744, 62774, 62803, 62832, 62862, 62891, 62921, 62950, 62980, 63009,
+ 63039, 63069, 63099, 63128, 63157, 63187, 63216, 63246, 63275, 63305, 63334, 63363, 63393, 63423, 63453, 63482, 63512, 63541,
+ 63571, 63600, 63630, 63659, 63689, 63718, 63747, 63777, 63807, 63836, 63866, 63895, 63925, 63955, 63984, 64014, 64043, 64073,
+ 64102, 64131, 64161, 64190, 64220, 64249, 64279, 64309, 64339, 64368, 64398, 64427, 64457, 64486, 64515, 64545, 64574, 64603,
+ 64633, 64663, 64692, 64722, 64752, 64782, 64811, 64841, 64870, 64899, 64929, 64958, 64987, 65017, 65047, 65076, 65106, 65136,
+ 65166, 65195, 65225, 65254, 65283, 65313, 65342, 65371, 65401, 65431, 65460, 65490, 65520, 65549, 65579, 65608, 65638, 65667,
+ 65697, 65726, 65755, 65785, 65815, 65844, 65874, 65903, 65933, 65963, 65992, 66022, 66051, 66081, 66110, 66140, 66169, 66199,
+ 66228, 66258, 66287, 66317, 66346, 66376, 66405, 66435, 66465, 66494, 66524, 66553, 66583, 66612, 66641, 66671, 66700, 66730,
+ 66760, 66789, 66819, 66849, 66878, 66908, 66937, 66967, 66996, 67025, 67055, 67084, 67114, 67143, 67173, 67203, 67233, 67262,
+ 67292, 67321, 67351, 67380, 67409, 67439, 67468, 67497, 67527, 67557, 67587, 67617, 67646, 67676, 67705, 67735, 67764, 67793,
+ 67823, 67852, 67882, 67911, 67941, 67971, 68000, 68030, 68060, 68089, 68119, 68148, 68177, 68207, 68236, 68266, 68295, 68325,
+ 68354, 68384, 68414, 68443, 68473, 68502, 68532, 68561, 68591, 68620, 68650, 68679, 68708, 68738, 68768, 68797, 68827, 68857,
+ 68886, 68916, 68946, 68975, 69004, 69034, 69063, 69092, 69122, 69152, 69181, 69211, 69240, 69270, 69300, 69330, 69359, 69388,
+ 69418, 69447, 69476, 69506, 69535, 69565, 69595, 69624, 69654, 69684, 69713, 69743, 69772, 69802, 69831, 69861, 69890, 69919,
+ 69949, 69978, 70008, 70038, 70067, 70097, 70126, 70156, 70186, 70215, 70245, 70274, 70303, 70333, 70362, 70392, 70421, 70451,
+ 70481, 70510, 70540, 70570, 70599, 70629, 70658, 70687, 70717, 70746, 70776, 70805, 70835, 70864, 70894, 70924, 70954, 70983,
+ 71013, 71042, 71071, 71101, 71130, 71159, 71189, 71218, 71248, 71278, 71308, 71337, 71367, 71397, 71426, 71455, 71485, 71514,
+ 71543, 71573, 71602, 71632, 71662, 71691, 71721, 71751, 71781, 71810, 71839, 71869, 71898, 71927, 71957, 71986, 72016, 72046,
+ 72075, 72105, 72135, 72164, 72194, 72223, 72253, 72282, 72311, 72341, 72370, 72400, 72429, 72459, 72489, 72518, 72548, 72577,
+ 72607, 72637, 72666, 72695, 72725, 72754, 72784, 72813, 72843, 72872, 72902, 72931, 72961, 72991, 73020, 73050, 73080, 73109,
+ 73139, 73168, 73197, 73227, 73256, 73286, 73315, 73345, 73375, 73404, 73434, 73464, 73493, 73523, 73552, 73581, 73611, 73640,
+ 73669, 73699, 73729, 73758, 73788, 73818, 73848, 73877, 73907, 73936, 73965, 73995, 74024, 74053, 74083, 74113, 74142, 74172,
+ 74202, 74231, 74261, 74291, 74320, 74349, 74379, 74408, 74437, 74467, 74497, 74526, 74556, 74586, 74615, 74645, 74675, 74704,
+ 74733, 74763, 74792, 74822, 74851, 74881, 74910, 74940, 74969, 74999, 75029, 75058, 75088, 75117, 75147, 75176, 75206, 75235,
+ 75264, 75294, 75323, 75353, 75383, 75412, 75442, 75472, 75501, 75531, 75560, 75590, 75619, 75648, 75678, 75707, 75737, 75766,
+ 75796, 75826, 75856, 75885, 75915, 75944, 75974, 76003, 76032, 76062, 76091, 76121, 76150, 76180, 76210, 76239, 76269, 76299,
+ 76328, 76358, 76387, 76416, 76446, 76475, 76505, 76534, 76564, 76593, 76623, 76653, 76682, 76712, 76741, 76771, 76801, 76830,
+ 76859, 76889, 76918, 76948, 76977, 77007, 77036, 77066, 77096, 77125, 77155, 77185, 77214, 77243, 77273, 77302, 77332, 77361,
+ 77390, 77420, 77450, 77479, 77509, 77539, 77569, 77598, 77627, 77657, 77686, 77715, 77745, 77774, 77804, 77833, 77863, 77893,
+ 77923, 77952, 77982, 78011, 78041, 78070, 78099, 78129, 78158, 78188, 78217, 78247, 78277, 78307, 78336, 78366, 78395, 78425,
+ 78454, 78483, 78513, 78542, 78572, 78601, 78631, 78661, 78690, 78720, 78750, 78779, 78808, 78838, 78867, 78897, 78926, 78956,
+ 78985, 79015, 79044, 79074, 79104, 79133, 79163, 79192, 79222, 79251, 79281, 79310, 79340, 79369, 79399, 79428, 79458, 79487,
+ 79517, 79546, 79576, 79606, 79635, 79665, 79695, 79724, 79753, 79783, 79812, 79841, 79871, 79900, 79930, 79960, 79990
+ ];
+
+ /**
+ * Converts a Gregorian date to a Hijri date.
+ *
+ * @param {Date} gDate - The Gregorian date to convert.
+ * @returns {HijriDate} - The converted Hijri date.
+ */
+ function getHijriDate(gDate: Date): HijriDate {
+ let day: number = gDate.getDate();
+ let month: number = gDate.getMonth();
+ let year: number = gDate.getFullYear();
+ let tMonth: number = month + 1;
+ let tYear: number = year;
+ if (tMonth < 3) {
+ tYear -= 1;
+ tMonth += 12;
+ }
+ let yPrefix: number = Math.floor(tYear / 100);
+ let julilanOffset: number = yPrefix - Math.floor(yPrefix / 4) - 2;
+ const julianNumber: number = Math.floor(365.25 * (tYear + 4716)) + Math.floor(30.6001 * (tMonth + 1)) + day - julilanOffset - 1524;
+ yPrefix = Math.floor((julianNumber - 1867216.25) / 36524.25);
+ julilanOffset = yPrefix - Math.floor(yPrefix / 4) + 1;
+ const b: number = julianNumber + julilanOffset + 1524;
+ let c: number = Math.floor((b - 122.1) / 365.25);
+ const d: number = Math.floor(365.25 * c);
+ const tempMonth: number = Math.floor((b - d) / 30.6001);
+ day = (b - d) - Math.floor(30.6001 * tempMonth);
+ month = Math.floor((b - d) / 20.6001);
+ if (month > 13) {
+ c += 1;
+ month -= 12;
+ }
+ month -= 1;
+ year = c - 4716;
+ const modifiedJulianDate: number = julianNumber - 2400000;
+
+ const iyear: number = 10631 / 30;
+ let z: number = julianNumber - 1948084;
+ const cyc: number = Math.floor(z / 10631.);
+ z = z - 10631 * cyc;
+ const j: number = Math.floor((z - 0.1335) / iyear);
+ const iy: number = 30 * cyc + j;
+ z = z - Math.floor(j * iyear + 0.1335);
+ let im: number = Math.floor((z + 28.5001) / 29.5);
+ if (im === 13) {
+ im = 12;
+ }
+ const tempDay: number = z - Math.floor(29.5001 * im - 29);
+ let i: number = 0;
+ for (; i < dateCorrection.length; i++) {
+ if (dateCorrection[parseInt(i.toString(), 10)] > modifiedJulianDate) {
+ break;
+ }
+ }
+ const iln: number = i + 16260;
+ const ii: number = Math.floor((iln - 1) / 12);
+ let hYear: number = ii + 1;
+ let hmonth: number = iln - 12 * ii;
+ let hDate: number = modifiedJulianDate - dateCorrection[i - 1] + 1;
+ if ((hDate + '').length > 2) {
+ hDate = tempDay;
+ hmonth = im;
+ hYear = iy;
+ }
+ return { year: hYear, month: hmonth, date: hDate };
+ }
+
+ /**
+ * Converts a Hijri date to a Gregorian date.
+ *
+ * @param {number} year - The Hijri year.
+ * @param {number} month - The Hijri month.
+ * @param {number} day - The Hijri day.
+ * @returns {Date} - The converted Gregorian date.
+ */
+ function toGregorian(year: number, month: number, day: number): Date {
+ const iy: number = year;
+ const im: number = month;
+ const id: number = day;
+ const ii: number = iy - 1;
+ const iln: number = (ii * 12) + 1 + (im - 1);
+ const i: number = iln - 16260;
+ const mcjdn: number = id + dateCorrection[i - 1] - 1;
+ const julianDate: number = mcjdn + 2400000;
+ const z: number = Math.floor(julianDate + 0.5);
+ let a: number = Math.floor((z - 1867216.25) / 36524.25);
+ a = z + 1 + a - Math.floor(a / 4);
+ const b: number = a + 1524;
+ const c: number = Math.floor((b - 122.1) / 365.25);
+ const d: number = Math.floor(365.25 * c);
+ const e: number = Math.floor((b - d) / 30.6001);
+ const gDay: number = b - d - Math.floor(e * 30.6001);
+ let gMonth: number = e - (e > 13.5 ? 13 : 1);
+ const gYear: number = c - (gMonth > 2.5 ? 4716 : 4715);
+
+ if (gYear <= 0) {
+ gMonth--;
+ }
+
+ return new Date(`${gYear}/${gMonth}/${gDay}`);
+ }
+
+ return {
+ getHijriDate,
+ toGregorian
+ };
+})();
diff --git a/components/base/src/index.ts b/components/base/src/index.ts
new file mode 100644
index 0000000..d16d516
--- /dev/null
+++ b/components/base/src/index.ts
@@ -0,0 +1,21 @@
+/**
+ * Base modules
+ */
+export * from './animation';
+export * from './base';
+export * from './browser';
+export * from './component';
+export * from './dom';
+export * from './event-handler';
+export * from './fetch';
+export * from './hijri-parser';
+export * from './internationalization';
+export * from './l10n';
+export * from './observer';
+export * from './ripple';
+export * from './sanitize-helper';
+export * from './touch';
+export * from './util';
+export * from './validate-lic';
+export * from './provider';
+export * from './svg-icon';
diff --git a/components/base/src/internationalization.tsx b/components/base/src/internationalization.tsx
new file mode 100644
index 0000000..28e5a23
--- /dev/null
+++ b/components/base/src/internationalization.tsx
@@ -0,0 +1,311 @@
+import { DateFormat } from './intl/date-formatter';
+import { NumberFormat } from './intl/number-formatter';
+import { DateParser } from './intl/date-parser';
+import { NumberParser } from './intl/number-parser';
+import { IntlBase } from './intl/intl-base';
+import { extend, getValue } from './util';
+
+/**
+ * Interface for DateFormatOptions
+ */
+export interface DateFormatOptions {
+ /**
+ * Specifies the skeleton for date formatting.
+ */
+ skeleton?: string;
+ /**
+ * Specifies the type of date formatting either date, dateTime or time.
+ */
+ type?: string;
+ /**
+ * Specifies custom date formatting to be used.
+ */
+ format?: string;
+ /**
+ * Specifies the calendar mode other than gregorian
+ */
+ calendar?: string;
+ /**
+ * Enable server side date formating.
+ */
+ isServerRendered?: boolean;
+}
+
+/**
+ * Interface for numberFormatOptions
+ */
+export interface NumberFormatOptions {
+ /**
+ * Specifies minimum fraction digits in formatted value.
+ */
+ minimumFractionDigits?: number;
+ /**
+ * Specifies maximum fraction digits in formatted value.
+ */
+ maximumFractionDigits?: number;
+ /**
+ * Specifies minimum significant digits in formatted value.
+ */
+ minimumSignificantDigits?: number;
+ /**
+ * Specifies maximum significant digits in formatted value.
+ */
+ maximumSignificantDigits?: number;
+ /**
+ * Specifies whether to use grouping or not in formatted value,
+ */
+ useGrouping?: boolean;
+ /**
+ * Specifies whether to ignore currency symbol in formatted value,
+ */
+ ignoreCurrency?: boolean;
+ /**
+ * Specifies the skeleton for perform formatting.
+ */
+ skeleton?: string;
+ /**
+ * Specifies the currency code to be used for formatting.
+ */
+ currency?: string | null;
+ /**
+ * Specifies minimum integer digits in formatted value.
+ */
+ minimumIntegerDigits?: number;
+ /**
+ * Specifies custom number format for formatting.
+ */
+ format?: string;
+ /**
+ * Species which currency symbol to consider.
+ */
+ altSymbol?: string;
+}
+
+/**
+ * Specifies the CLDR data loaded for internationalization functionalities.
+ *
+ * @private
+ */
+export const cldrData: Object = {};
+
+/**
+ * Specifies the default culture value to be considered.
+ *
+ * @private
+ */
+export let defaultCulture: string = 'en-US';
+
+/**
+ * Specifies default currency code to be considered
+ *
+ * @private
+ */
+export let defaultCurrencyCode: string = 'USD';
+
+const mapper: string[] = ['numericObject', 'dateObject'];
+
+/**
+ * Gets a date formatter function for specified culture and format options
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US')
+ * @param {DateFormatOptions} props - Date formatting options
+ * @returns {Function} Formatter function that accepts Date objects
+ */
+export function getDateFormat(culture: string, props?: DateFormatOptions): Function {
+ return DateFormat.dateFormat(culture, props || { type: 'date', skeleton: 'short' }, cldrData);
+}
+
+/**
+ * Gets a number formatter function for specified culture and format options
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US')
+ * @param {NumberFormatOptions} props - Number formatting options
+ * @returns {Function} Formatter function that accepts numeric values
+ */
+export function getNumberFormat(culture: string, props?: NumberFormatOptions): Function {
+ if (props && !props.currency) {
+ props.currency = defaultCurrencyCode;
+ }
+ return NumberFormat.numberFormatter(culture, props || {}, cldrData);
+}
+
+/**
+ * Returns the parser function for given props.
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US')
+ * @param {DateFormatOptions} props - Specifies the format props in which the parser function will return.
+ * @returns {Function} The date parser function.
+ */
+export function getDateParser(culture: string, props?: DateFormatOptions): Function {
+ return DateParser.dateParser(culture, props || { skeleton: 'short', type: 'date' }, cldrData);
+}
+
+/**
+ * Returns the parser function for given props.
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US')
+ * @param {NumberFormatOptions} props - Specifies the format props in which the parser function will return.
+ * @returns {Function} The number parser function.
+ */
+export function getNumberParser(culture: string, props?: NumberFormatOptions): Function {
+ return NumberParser.numberParser(culture, props || { format: 'N' }, cldrData);
+}
+
+/**
+ * Returns the formatted string based on format props.
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US')
+ * @param {number} value - Specifies the number to format.
+ * @param {NumberFormatOptions} option - Specifies the format props in which the number will be formatted.
+ * @returns {string} The formatted number string.
+ */
+export function formatNumber(culture: string, value: number, option?: NumberFormatOptions): string {
+ return getNumberFormat(culture, option)(value) || value;
+}
+
+/**
+ * Returns the formatted date string based on format props.
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US').
+ * @param {Date} value - Specifies the number to format.
+ * @param {DateFormatOptions} option - Specifies the format props in which the number will be formatted.
+ * @returns {string} The formatted date string.
+ */
+export function formatDate(culture: string, value: Date, option?: DateFormatOptions): string {
+ return getDateFormat(culture, option)(value);
+}
+
+/**
+ * Returns the date object for given date string and props.
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US').
+ * @param {string} value - Specifies the string to parse.
+ * @param {DateFormatOptions} option - Specifies the parse props in which the date string will be parsed.
+ * @returns {Date} The parsed Date object.
+ */
+export function parseDate(culture: string, value: string, option?: DateFormatOptions): Date {
+ return getDateParser(culture, option)(value);
+}
+
+/**
+ * Returns the number object from the given string value and props.
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US').
+ * @param {string} value - Specifies the string to parse.
+ * @param {NumberFormatOptions} option - Specifies the parse props in which the string number will be parsed.
+ * @returns {number} The parsed number.
+ */
+export function parseNumber(culture: string, value: string, option?: NumberFormatOptions): number {
+ return getNumberParser(culture, option)(value);
+}
+
+/**
+ * Returns Native Date Time Pattern
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US').
+ * @param {DateFormatOptions} option - Specifies the parse props for resultant date time pattern.
+ * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.
+ * @returns {string} The native date time pattern.
+ * @private
+ */
+export function getDatePattern(culture: string, option: DateFormatOptions, isExcelFormat?: boolean): string {
+ return IntlBase.getActualDateTimeFormat(culture, option, cldrData, isExcelFormat);
+}
+
+/**
+ * Returns Native Number Pattern
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US').
+ * @param {NumberFormatOptions} option - Specifies the parse props for resultant number pattern.
+ * @param {boolean} isExcel - Specifies whether to return Excel format.
+ * @returns {string} The native number pattern.
+ * @private
+ */
+export function getNumberPattern(culture: string, option: NumberFormatOptions, isExcel?: boolean): string {
+ return IntlBase.getActualNumberFormat(culture, option, cldrData, isExcel);
+}
+
+/**
+ * Returns the First Day of the Week
+ *
+ * @param {string} culture - The culture code (e.g. 'en-US').
+ * @returns {number} The first day of the week.
+ */
+export function getFirstDayOfWeek(culture: string): number {
+ return IntlBase.getWeekData(culture, cldrData);
+}
+/**
+ * Set the default culture to all components
+ *
+ * @private
+ * @param {string} cultureName - Specifies the culture name to be set as default culture.
+ * @returns {void}
+ */
+export function setCulture(cultureName: string): void {
+ defaultCulture = cultureName;
+}
+
+/**
+ * Set the default currency code to all components
+ *
+ * @private
+ * @param {string} currencyCode - Specifies the currency code to be set as default currency.
+ * @returns {void}
+ */
+export function setCurrencyCode(currencyCode: string): void {
+ defaultCurrencyCode = currencyCode;
+}
+
+/**
+ * Load the CLDR data into context
+ *
+ * @param {Object[]} data - Specifies the CLDR data's to be used for formatting and parser.
+ * @returns {void}
+ */
+export function loadCldr(...data: Object[]): void {
+ for (const obj of data) {
+ extend(cldrData, obj, {}, true);
+ }
+}
+
+
+/**
+ * To get the numeric CLDR object for given culture
+ *
+ * @private
+ * @param {string} locale - Specifies the locale for which numericObject to be returned.
+ * @param {string} type - Specifies the type, by default it's decimal.
+ * @returns {Object} Returns the numeric CLDR object containing number formatting patterns and symbols
+ */
+export function getNumericObject(locale: string, type?: string): Object {
+ const numObject: Object = IntlBase.getDependables(cldrData, locale, '', true)[mapper[0]];
+ const dateObject: Object = IntlBase.getDependables(cldrData, locale, '')[mapper[1]];
+ const numSystem: string = getValue('defaultNumberingSystem', numObject);
+ const symbPattern: Record = getValue('symbols-numberSystem-' + numSystem, numObject);
+ const pattern: string = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false);
+ return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) });
+}
+
+/**
+ * To get the numeric CLDR number base object for given culture
+ *
+ * @private
+ * @param {string} locale - Specifies the locale for which numericObject to be returned.
+ * @param {string} currency - Specifies the currency for which numericObject to be returned.
+ * @returns {string} Returns the currency symbol for the specified locale and currency
+ */
+export function getNumberDependable(locale: string, currency: string): string {
+ const numObject: Object = IntlBase.getDependables(cldrData, locale, '', true);
+ return IntlBase.getCurrencySymbol(numObject['numericObject'], currency);
+}
+
+/**
+ * To get the default date CLDR object.
+ *
+ * @private
+ * @param {string} mode - Specify the mode, optional.
+ * @returns {Object} Returns the default date CLDR object containing date formatting patterns
+ */
+export function getDefaultDateObject(mode?: string): Object {
+ return IntlBase.getDependables(cldrData, '', mode, false)[mapper[1]];
+}
diff --git a/components/base/src/intl/date-formatter.tsx b/components/base/src/intl/date-formatter.tsx
new file mode 100644
index 0000000..6260caa
--- /dev/null
+++ b/components/base/src/intl/date-formatter.tsx
@@ -0,0 +1,334 @@
+import { DateFormatOptions } from '../internationalization';
+import { ParserBase as parser, NumberMapper } from './parser-base';
+import { IntlBase as base, TimeZoneOptions, Dependables, DateObject } from './intl-base';
+import { isUndefined, throwError, getValue } from '../util';
+import { HijriParser } from '../hijri-parser';
+import { isNullOrUndefined } from '../util';
+const abbreviateRegexGlobal: RegExp = /\/MMMMM|MMMM|MMM|a|LLLL|LLL|EEEEE|EEEE|E|K|cccc|ccc|WW|W|G+|z+/gi;
+const standalone: string = 'stand-alone';
+const weekdayKey: string[] = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+export const basicPatterns: string[] = ['short', 'medium', 'long', 'full'];
+/**
+ * @interface FormatOptions
+ * Interface for Date Format Options Modules.
+ *
+ * @private
+ */
+export interface FormatOptions {
+ month?: Object;
+ weekday?: Object;
+ pattern?: string;
+ designator?: Object;
+ timeZone?: TimeZoneOptions;
+ era?: Object;
+ hour12?: boolean;
+ numMapper?: NumberMapper;
+ dateSeperator?: string;
+ isIslamic?: boolean;
+ weekOfYear?: string;
+}
+const timeSetter: Object = {
+ m: 'getMinutes',
+ h: 'getHours',
+ H: 'getHours',
+ s: 'getSeconds',
+ d: 'getDate',
+ f: 'getMilliseconds'
+};
+export const datePartMatcher: { [key: string]: Object } = {
+ 'M': 'month',
+ 'd': 'day',
+ 'E': 'weekday',
+ 'c': 'weekday',
+ 'y': 'year',
+ 'm': 'minute',
+ 'h': 'hour',
+ 'H': 'hour',
+ 's': 'second',
+ 'L': 'month',
+ 'a': 'designator',
+ 'z': 'timeZone',
+ 'Z': 'timeZone',
+ 'G': 'era',
+ 'f': 'milliseconds'
+};
+
+const timeSeparator: string = 'timeSeparator';
+
+export interface IDateFormat {
+ /**
+ * Returns the formatter function for a given skeleton.
+ *
+ * @private
+ * @param {string} culture Specifies the culture name for formatting.
+ * @param {DateFormatOptions} option Specifies the format in which the date will format.
+ * @param {Object} cldr Specifies the global cldr data collection.
+ * @returns {Function} Formatter function
+ */
+ dateFormat: (culture: string, option: DateFormatOptions, cldr: Object) => Function;
+ /**
+ * Returns the value of the Time Zone.
+ *
+ * @private
+ * @param {number} tVal Time Zone offset value.
+ * @param {string} pattern Time Zone pattern.
+ * @returns {string} Time Zone formatted string.
+ */
+ getTimeZoneValue: (tVal: number, pattern: string) => string;
+}
+
+/**
+ * @hook useDateFormat
+ * Date Format is a framework that provides support for date formatting.
+ *
+ * @returns {Object} An object containing methods related to date formatting.
+ */
+export const DateFormat: IDateFormat = (() => {
+
+ /**
+ * Returns the formatter function for a given skeleton.
+ *
+ * @param {string} culture Specifies the culture name for formatting.
+ * @param {DateFormatOptions} option Specifies the format in which the date will format.
+ * @param {Object} cldr Specifies the global cldr data collection.
+ * @returns {Function} Formatter function
+ */
+ function dateFormat(culture: string, option: DateFormatOptions, cldr: Object): Function {
+ const dependable: Dependables = base.getDependables(cldr, culture, option.calendar);
+ const dateObject: Object = dependable.dateObject;
+ const formatOptions: FormatOptions = { isIslamic: base.islamicRegex.test(option.calendar) };
+
+ const resPattern: string = option.format ||
+ base.getResultantPattern(option.skeleton, dateObject, option.type, false);
+
+ formatOptions.dateSeperator = base.getDateSeparator(dateObject);
+
+ if (isUndefined(resPattern)) {
+ throwError('Format options or type given must be invalid');
+ } else {
+ formatOptions.pattern = resPattern;
+ formatOptions.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));
+ const patternMatch: string[] = resPattern.match(abbreviateRegexGlobal) || [];
+ for (const str of patternMatch) {
+ const len: number = str.length;
+ let char: string = str[0];
+ if (char === 'K') {
+ char = 'h';
+ }
+
+ switch (char) {
+ case 'E':
+ case 'c':
+ formatOptions.weekday = (dependable.dateObject)[`${base.days}`][`${standalone}`][(base).monthIndex[`${len}`]];
+ break;
+ case 'M':
+ case 'L':
+ formatOptions.month = (dependable.dateObject)[`${base.month}`][`${standalone}`][(base.monthIndex)[`${len}`]];
+ break;
+ case 'a':
+ formatOptions.designator = getValue('dayPeriods.format.wide', dateObject);
+ break;
+ case 'G': {
+ const eText: string = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';
+ formatOptions.era = getValue('eras.' + eText, dependable.dateObject);
+ break;
+ }
+ case 'z':
+ formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);
+ break;
+ }
+ }
+ }
+
+ return (value: Date): string => {
+ if (isNaN(value.getDate())) {
+ return null;
+ }
+ return intDateFormatter(value, formatOptions);
+ };
+ }
+
+ /**
+ * Formats the date according to the specified options.
+ *
+ * @param {Date} value The date to format.
+ * @param {FormatOptions} options The formatting options.
+ * @returns {string} The formatted date string.
+ */
+ function intDateFormatter(value: Date, options: FormatOptions): string {
+ const pattern: string | null = options.pattern;
+ let ret: string = '';
+ const matches: string[] | null = pattern.match(base.dateParseRegex);
+ const dObject: DateObject = getCurrentDateValue(value, options.isIslamic);
+
+ if (matches) {
+ for (const match of matches) {
+ const length: number = match.length;
+ let char: string = match[0];
+ if (char === 'K') {
+ char = 'h';
+ }
+
+ let curval: number;
+ let curvalstr: string = '';
+ let isNumber: boolean;
+ let processNumber: boolean;
+ let curstr: string = '';
+
+ switch (char) {
+ case 'M':
+ case 'L':
+ curval = dObject.month;
+ if (length > 2) {
+ ret += options.month[`${curval}`];
+ } else {
+ isNumber = true;
+ }
+ break;
+ case 'E':
+ case 'c':
+ ret += options.weekday[`${weekdayKey[value.getDay()]}`];
+ break;
+ case 'H':
+ case 'h':
+ case 'm':
+ case 's':
+ case 'd':
+ case 'f':
+ isNumber = true;
+ if (char === 'd') {
+ curval = dObject.date;
+ } else if (char === 'f') {
+ isNumber = false;
+ processNumber = true;
+ curvalstr = (value)[`${(timeSetter)[`${char}`]}`]().toString();
+ curvalstr = curvalstr.substring(0, length);
+ const curlength: number = curvalstr.length;
+ if (length !== curlength) {
+ if (length > 3) {
+ continue;
+ }
+ for (let i: number = 0; i < length - curlength; i++) {
+ curvalstr = '0' + curvalstr.toString();
+ }
+ }
+ curstr += curvalstr;
+ } else {
+ curval = (value)[`${(timeSetter)[`${char}`]}`]();
+ }
+ if (char === 'h') {
+ curval = curval % 12 || 12;
+ }
+ break;
+ case 'y':
+ processNumber = true;
+ curstr += dObject.year;
+ if (length === 2) {
+ curstr = curstr.substr(curstr.length - 2);
+ }
+ break;
+ case 'a': {
+ const desig: string = value.getHours() < 12 ? 'am' : 'pm';
+ ret += options.designator[`${desig}`];
+ break;
+ }
+ case 'G': {
+ const dec: number = value.getFullYear() < 0 ? 0 : 1;
+ let retu: string = options.era[`${dec}`];
+ if (isNullOrUndefined(retu)) {
+ retu = options.era[dec ? 0 : 1];
+ }
+ ret += retu || '';
+ break;
+ }
+ case '\'':
+ ret += (match === '\'\'') ? '\'' : match.replace(/'/g, '');
+ break;
+ case 'z': {
+ const timezone: number = value.getTimezoneOffset();
+ let pattern: string = (length < 4) ? '+H;-H' : options.timeZone.hourFormat;
+ pattern = pattern.replace(/:/g, options.numMapper.timeSeparator);
+ if (timezone === 0) {
+ ret += options.timeZone.gmtZeroFormat;
+ } else {
+ processNumber = true;
+ curstr = getTimeZoneValue(timezone, pattern);
+ }
+ curstr = options.timeZone.gmtFormat.replace(/\{0\}/, curstr);
+ break;
+ }
+ case ':':
+ ret += (options).numMapper.numberSymbols[`${timeSeparator}`];
+ break;
+ case '/':
+ ret += options.dateSeperator;
+ break;
+ case 'W':
+ isNumber = true;
+ curval = base.getWeekOfYear(value);
+ break;
+ default:
+ ret += match;
+ }
+ if (isNumber) {
+ processNumber = true;
+ curstr = checkTwodigitNumber(curval, length);
+ }
+ if (processNumber) {
+ ret += parser.convertValueParts(curstr, base.latnParseRegex, options.numMapper.mapper);
+ }
+ }
+ }
+ return ret;
+ }
+
+ /**
+ * Returns the current date values, adjusted for Islamic calendar if needed.
+ *
+ * @param {Date} value The date object.
+ * @param {boolean} [isIslamic] Whether the date is Islamic.
+ * @returns {DateObject} The current date values.
+ */
+ function getCurrentDateValue(value: Date, isIslamic?: boolean): DateObject {
+ if (isIslamic) {
+ return HijriParser.getHijriDate(value);
+ }
+ return { year: value.getFullYear(), month: value.getMonth() + 1, date: value.getDate() };
+ }
+
+ /**
+ * Checks and formats the number to two digits.
+ *
+ * @param {number} val The number
+ * @param {number} len The desired length of the number.
+ * @returns {string} The formatted two-digit number string.
+ */
+ function checkTwodigitNumber(val: number, len: number): string {
+ const ret: string = val + '';
+ if (len === 2 && ret.length !== 2) {
+ return '0' + ret;
+ }
+ return ret;
+ }
+
+ /**
+ * Returns the value of the Time Zone.
+ *
+ * @param {number} tVal Time Zone offset value.
+ * @param {string} pattern Time Zone pattern.
+ * @returns {string} Time Zone formatted string.
+ */
+ function getTimeZoneValue(tVal: number, pattern: string): string {
+ const splt: string[] = pattern.split(';');
+ const curPattern: string = splt[tVal > 0 ? 1 : 0];
+ const no: number = Math.abs(tVal);
+
+ return curPattern.replace(/HH?|mm/g, (str: string): string => {
+ const len: number = str.length;
+ const isHour: boolean = str.indexOf('H') !== -1;
+ return checkTwodigitNumber(Math.floor(isHour ? (no / 60) : (no % 60)), len);
+ });
+ }
+
+ return { dateFormat, getTimeZoneValue };
+})();
diff --git a/components/base/src/intl/date-parser.tsx b/components/base/src/intl/date-parser.tsx
new file mode 100644
index 0000000..fafbba9
--- /dev/null
+++ b/components/base/src/intl/date-parser.tsx
@@ -0,0 +1,499 @@
+import { DateFormatOptions } from '../internationalization';
+import { IntlBase as base, TimeZoneOptions, Dependables, DateObject } from './intl-base';
+import { ParserBase as parser, NumericOptions, NumberMapper } from './parser-base';
+import { isUndefined, throwError, getValue, isNullOrUndefined } from '../util';
+import { datePartMatcher } from './date-formatter';
+import { HijriParser } from '../hijri-parser';
+
+const standalone: string = 'stand-alone';
+const latnRegex: RegExp = /^[0-9]*$/;
+const timeSetter: Record = {
+ minute: 'setMinutes',
+ hour: 'setHours',
+ second: 'setSeconds',
+ day: 'setDate',
+ month: 'setMonth',
+ milliseconds: 'setMilliseconds'
+};
+
+/**
+ * Interface for date parsing options
+ */
+interface ParseOptions {
+ month?: Object;
+ weekday?: string[];
+ pattern?: string;
+ designator?: Object;
+ timeZone?: TimeZoneOptions;
+ era?: Object;
+ hour12?: boolean;
+ parserRegex?: RegExp;
+ evalposition?: { [key: string]: ValuePosition };
+ isIslamic?: boolean;
+ culture?: string;
+}
+
+/**
+ * Interface for the date options
+ */
+interface DateParts {
+ month?: number;
+ day?: number;
+ year?: number;
+ hour?: number;
+ minute?: number;
+ second?: number;
+ designator?: string;
+ timeZone?: number;
+ hour12?: boolean;
+}
+
+const month: string = 'months';
+
+/**
+ * Interface for value position
+ */
+interface ValuePosition {
+ isNumber: boolean;
+ pos: number;
+ hourOnly?: boolean;
+}
+
+export interface IDateParser {
+ /**
+ * Returns the parser function for given skeleton.
+ *
+ * @private
+ * @param {string} culture - Specifies the culture name to be which formatting.
+ * @param {DateFormatOptions} option - Specific the format in which string date will be parsed.
+ * @param {Object} cldr - Specifies the global cldr data collection.
+ * @returns {Function} ?
+ */
+ dateParser: (culture: string, option: DateFormatOptions, cldr: Object) => Function;
+ /**
+ * Returns date object for provided date options.
+ *
+ * @private
+ * @param {DateParts} options ?
+ * @param {Date} value ?
+ * @returns {Date} ?
+ */
+ getDateObject: (options: DateParts, value?: Date) => Date;
+ /**
+ * Returns date parsing options for provided value along with parse and numeric options.
+ *
+ * @private
+ * @param {string} value ?
+ * @param {ParseOptions} parseOptions ?
+ * @param {NumericOptions} num ?
+ * @returns {DateParts} ?
+ */
+ internalDateParse: (value: string, parseOptions: ParseOptions, num: NumericOptions) => DateParts;
+ /**
+ * Returns parsed number for provided Numeric string and Numeric Options.
+ *
+ * @private
+ * @param {string} value ?
+ * @param {NumericOptions} option ?
+ * @returns {number} ?
+ */
+ internalNumberParser: (value: string, option: NumericOptions) => number;
+ /**
+ * Returns parsed time zone RegExp for provided hour format and time zone.
+ *
+ * @private
+ * @param {string} hourFormat ?
+ * @param {TimeZoneOptions} tZone ?
+ * @param {string} nRegex ?
+ * @returns {string} ?
+ */
+ parseTimeZoneRegx: (hourFormat: string, tZone: TimeZoneOptions, nRegex: string) => string;
+ /**
+ * Returns zone based value.
+ *
+ * @private
+ * @param {boolean} flag ?
+ * @param {string} val1 ?
+ * @param {string} val2 ?
+ * @param {NumericOptions} num ?
+ * @returns {number} ?
+ */
+ getZoneValue: (flag: boolean, val1: string, val2: string, num: NumericOptions) => number;
+}
+
+/**
+ * Custom function for date parsing.
+ */
+export const DateParser: IDateParser = (() => {
+/**
+ * Returns the parser function for given skeleton.
+ *
+ * @param {string} culture - Specifies the culture name for formatting.
+ * @param {DateFormatOptions} option - Specifies the format in which string date will be parsed.
+ * @param {Object} cldr - Specifies the global cldr data collection.
+ * @returns {Function} - Returns a function that can parse dates.
+ */
+ function dateParser(culture: string, option: DateFormatOptions, cldr: Object): Function {
+ const dependable: Dependables = base.getDependables(cldr, culture, option.calendar);
+ const numOptions: NumericOptions = parser.getCurrentNumericOptions(
+ dependable.parserObject,
+ parser.getNumberingSystem(cldr),
+ false
+ );
+ let parseOptions: ParseOptions = {};
+ const resPattern: string = option.format ||
+ base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false);
+ let regexString: string = '';
+ let hourOnly: boolean;
+
+ if (isUndefined(resPattern)) {
+ throwError('Format options or type given must be invalid');
+ } else {
+ parseOptions = {
+ isIslamic: base.islamicRegex.test(option.calendar),
+ pattern: resPattern,
+ evalposition: {},
+ culture: culture
+ };
+ const patternMatch: string[] = resPattern.match(base.dateParseRegex) || [];
+ const length: number = patternMatch.length;
+ let gmtCorrection: number = 0;
+ let zCorrectTemp: number = 0;
+ let isgmtTraversed: boolean = false;
+ const nRegx: string = numOptions.numericRegex;
+ const numMapper: NumberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));
+
+ for (let i: number = 0; i < length; i++) {
+ const str: string = patternMatch[parseInt(i.toString(), 10)];
+ const len: number = str.length;
+ const char: string = (str[0] === 'K') ? 'h' : str[0];
+ let isNumber: boolean;
+ let canUpdate: boolean;
+ const charKey: keyof typeof datePartMatcher = datePartMatcher[`${char}`] as string;
+ const optional: string = (len === 2) ? '' : '?';
+
+ if (isgmtTraversed) {
+ gmtCorrection = zCorrectTemp;
+ isgmtTraversed = false;
+ }
+
+ switch (char) {
+ case 'E':
+ case 'c': {
+ const weekData: Object = (dependable.dateObject)[`${base.days}`][`${standalone}`][(base).monthIndex[`${len}`]];
+ const weekObject: Object = parser.reverseObject(weekData);
+ regexString += '(' + Object.keys(weekObject).join('|') + ')';
+ break;
+ }
+ case 'M':
+ case 'L':
+ case 'd':
+ case 'm':
+ case 's':
+ case 'h':
+ case 'H':
+ case 'f':
+ canUpdate = true;
+ if ((char === 'M' || char === 'L') && len > 2) {
+ const monthData: Object = (dependable).dateObject[`${month}`][`${standalone}`][(base).monthIndex[`${len}`]];
+ (parseOptions)[`${charKey}`] = parser.reverseObject(monthData);
+ regexString += '(' + Object.keys((parseOptions)[`${charKey}`]).join('|') + ')';
+ } else if (char === 'f') {
+ if (len > 3) {
+ continue;
+ }
+ isNumber = true;
+ regexString += '(' + nRegx + nRegx + '?' + nRegx + '?' + ')';
+ } else {
+ isNumber = true;
+ regexString += '(' + nRegx + nRegx + optional + ')';
+ }
+ if (char === 'h') {
+ parseOptions.hour12 = true;
+ }
+ break;
+ case 'W': {
+ const opt: string = len === 1 ? '?' : '';
+ regexString += '(' + nRegx + opt + nRegx + ')';
+ break;
+ }
+ case 'y':
+ canUpdate = isNumber = true;
+ if (len === 2) {
+ regexString += '(' + nRegx + nRegx + ')';
+ } else {
+ regexString += '(' + nRegx + '{' + len + ',})';
+ }
+ break;
+ case 'a': {
+ canUpdate = true;
+ const periodValue: Object = getValue('dayPeriods.format.wide', dependable.dateObject);
+ (parseOptions)[`${charKey}`] = parser.reverseObject(periodValue);
+ regexString += '(' + Object.keys((parseOptions)[`${charKey}`]).join('|') + ')';
+ break;
+ }
+ case 'G': {
+ canUpdate = true;
+ const eText: string = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';
+ (parseOptions)[`${charKey}`] = parser.reverseObject(getValue('eras.' + eText, dependable.dateObject));
+ regexString += '(' + Object.keys((parseOptions)[`${charKey}`]).join('|') + '?)';
+ break;
+ }
+ case 'z': {
+ const tval: number = new Date().getTimezoneOffset();
+ canUpdate = (tval !== 0);
+ (parseOptions)[`${charKey}`] = getValue('dates.timeZoneNames', dependable.parserObject);
+ const tzone: TimeZoneOptions = (parseOptions)[`${charKey}`];
+ hourOnly = (len < 4);
+ let hpattern: string = hourOnly ? '+H;-H' : tzone.hourFormat;
+ hpattern = hpattern.replace(/:/g, numMapper.timeSeparator);
+ regexString += '(' + parseTimeZoneRegx(hpattern, tzone, nRegx) + ')?';
+ isgmtTraversed = true;
+ zCorrectTemp = hourOnly ? 6 : 12;
+ break;
+ }
+ case '\'': {
+ const iString: string = str.replace(/'/g, '');
+ regexString += '(' + iString + ')?';
+ break;
+ }
+ default:
+ regexString += '([\\D])';
+ break;
+ }
+
+ if (canUpdate) {
+ parseOptions.evalposition[`${charKey}`] = { isNumber: isNumber, pos: i + 1 + gmtCorrection, hourOnly: hourOnly };
+ }
+
+ if (i === length - 1 && !isNullOrUndefined(regexString)) {
+ const regExp: RegExpConstructor = RegExp;
+ parseOptions.parserRegex = new regExp('^' + regexString + '$', 'i');
+ }
+ }
+ }
+
+ return (value: string): Date => {
+ const parsedDateParts: DateParts = internalDateParse(value, parseOptions, numOptions);
+ if (isNullOrUndefined(parsedDateParts) || !Object.keys(parsedDateParts).length) {
+ return null;
+ }
+ if (parseOptions.isIslamic) {
+ let dobj: DateObject = {};
+ let tYear: number | undefined = parsedDateParts.year;
+ const tDate: number | undefined = parsedDateParts.day;
+ const tMonth: number | undefined = parsedDateParts.month;
+ const ystrig: string = tYear ? (tYear + '') : '';
+ const is2DigitYear: boolean = (ystrig.length === 2);
+ if (!tYear || !tMonth || !tDate || is2DigitYear) {
+ dobj = HijriParser.getHijriDate(new Date());
+ }
+ if (is2DigitYear) {
+ tYear = parseInt((dobj.year + '').slice(0, 2) + ystrig, 10);
+ }
+ const dateObject: Date = HijriParser.toGregorian(
+ tYear || dobj.year, tMonth || dobj.month, tDate || dobj.date);
+ parsedDateParts.year = dateObject.getFullYear();
+ parsedDateParts.month = dateObject.getMonth() + 1;
+ parsedDateParts.day = dateObject.getDate();
+ }
+ return getDateObject(parsedDateParts);
+ };
+ }
+
+ /**
+ * Returns date object for provided date options.
+ *
+ * @param {DateParts} options - Specifies the date parts consisting of year, month, day, etc.
+ * @param {Date} [value] - Specifies the base date value to copy time parts.
+ * @returns {Date} - Returns the constructed date object.
+ */
+ function getDateObject(options: DateParts, value?: Date): Date {
+ const res: Date = value || new Date();
+ res.setMilliseconds(0);
+ const tKeys: string[] = ['hour', 'minute', 'second', 'milliseconds', 'month', 'day'];
+ let y: number | undefined = options.year;
+ const desig: string | undefined = options.designator;
+ const tzone: number | undefined = options.timeZone;
+
+ if (y && !isUndefined(y)) {
+ const len: number = (y + '').length;
+ if (len <= 2) {
+ const century: number = Math.floor(res.getFullYear() / 100) * 100;
+ y += century;
+ }
+ res.setFullYear(y);
+ }
+
+ for (const key of tKeys) {
+ let tValue: number = (options)[`${key}`];
+ if (isUndefined(tValue) && key === 'day') {
+ res.setDate(1);
+ }
+ if (!isUndefined(tValue)) {
+ if (key === 'month') {
+ tValue -= 1;
+ if (tValue < 0 || tValue > 11) {
+ return new Date('invalid');
+ }
+ const pDate: number = res.getDate();
+ res.setDate(1);
+ (res)[(timeSetter)[`${key}`]](tValue);
+ const lDate: number = new Date(res.getFullYear(), tValue + 1, 0).getDate();
+ res.setDate(pDate < lDate ? pDate : lDate);
+ } else {
+ if (key === 'day') {
+ const lastDay: number = new Date(res.getFullYear(), res.getMonth() + 1, 0).getDate();
+ if ((tValue < 1 || tValue > lastDay)) {
+ return null;
+ }
+ }
+ (res)[`${(timeSetter)[`${key}`]}`](tValue);
+ }
+ }
+ }
+
+ if (!isUndefined(desig)) {
+ const hour: number = res.getHours();
+ if (desig === 'pm') {
+ res.setHours(hour + (hour === 12 ? 0 : 12));
+ } else if (hour === 12) {
+ res.setHours(0);
+ }
+ }
+
+ if (tzone && !isUndefined(tzone)) {
+ const tzValue: number = tzone - res.getTimezoneOffset();
+ if (tzValue !== 0) {
+ res.setMinutes(res.getMinutes() + tzValue);
+ }
+ }
+
+ return res;
+ }
+
+ /**
+ * Returns date parsing options for provided value along with parse and numeric options.
+ *
+ * @param {string} value - Specifies the string value to be parsed.
+ * @param {ParseOptions} parseOptions - Specifies the parsing options.
+ * @param {NumericOptions} num - Specifies the numeric options.
+ * @returns {DateParts} - Returns the parsed date parts.
+ */
+ function internalDateParse(value: string, parseOptions: ParseOptions, num: NumericOptions): DateParts {
+ const matches: string[] = value.match(parseOptions.parserRegex);
+ const retOptions: DateParts = { 'hour': 0, 'minute': 0, 'second': 0 };
+
+ if (isNullOrUndefined(matches)) {
+ return null;
+ } else {
+ const props: string[] = Object.keys(parseOptions.evalposition);
+ for (const prop of props) {
+ const curObject: ValuePosition = parseOptions.evalposition[`${prop}`];
+ let matchString: string = matches[curObject.pos];
+ if (curObject.isNumber) {
+ (retOptions)[`${prop}`] = internalNumberParser(matchString, num);
+ } else {
+ if (prop === 'timeZone' && !isUndefined(matchString)) {
+ const pos: number = curObject.pos;
+ let val: number;
+ const tmatch: string = matches[pos + 1];
+ const flag: boolean = !isUndefined(tmatch);
+ if (curObject.hourOnly) {
+ val = getZoneValue(flag, tmatch, matches[pos + 4], num) * 60;
+ } else {
+ val = getZoneValue(flag, tmatch, matches[pos + 7], num) * 60;
+ val += getZoneValue(flag, matches[pos + 4], matches[pos + 10], num);
+ }
+
+ if (!isNullOrUndefined(val)) {
+ retOptions[`${prop}`] = val;
+ }
+ } else {
+ const cultureOptions: string[] = ['en-US', 'en-MH', 'en-MP'];
+ matchString = ((prop === 'month') && (!(parseOptions).isIslamic) && ((parseOptions).culture === 'en' || (parseOptions).culture === 'en-GB' || (parseOptions).culture === 'en-US'))
+ ? matchString[0].toUpperCase() + matchString.substring(1).toLowerCase() : matchString;
+ matchString = ((prop !== 'month') && (prop === 'designator') && parseOptions.culture && (parseOptions).culture.indexOf('en-') !== -1 && cultureOptions.indexOf(parseOptions.culture) === -1)
+ ? matchString.toLowerCase() : matchString;
+ (retOptions)[`${prop}`] = (parseOptions)[`${prop}`][`${matchString}`];
+ }
+ }
+ }
+ if (parseOptions.hour12) {
+ retOptions.hour12 = true;
+ }
+ }
+ return retOptions;
+ }
+
+ /**
+ * Returns parsed number for provided Numeric string and Numeric Options.
+ *
+ * @param {string} value - Specifies the numeric string value to be parsed.
+ * @param {NumericOptions} option - Specifies the numeric options.
+ * @returns {number} - Returns the parsed numeric value.
+ */
+ function internalNumberParser(value: string, option: NumericOptions): number {
+ value = parser.convertValueParts(value, option.numberParseRegex, option.numericPair);
+ if (latnRegex.test(value)) {
+ return +value;
+ }
+ return null;
+ }
+
+ /**
+ * Returns parsed time zone RegExp for provided hour format and time zone.
+ *
+ * @param {string} hourFormat - Specifies the format of the hour.
+ * @param {TimeZoneOptions} tZone - Specifies the time zone options.
+ * @param {string} nRegex - Specifies the numeric regex.
+ * @returns {string} - Returns the timezone regular expression string.
+ */
+ function parseTimeZoneRegx(hourFormat: string, tZone: TimeZoneOptions, nRegex: string): string {
+ const pattern: string = tZone.gmtFormat;
+ let ret: string;
+ const cRegex: string = '(' + nRegex + ')' + '(' + nRegex + ')';
+
+ ret = hourFormat.replace('+', '\\+');
+ if (hourFormat.indexOf('HH') !== -1) {
+ ret = ret.replace(/HH|mm/g, '(' + cRegex + ')');
+ } else {
+ ret = ret.replace(/H|m/g, '(' + cRegex + '?)');
+ }
+ const splitStr: string[] = (ret.split(';').map((str: string): string => {
+ return pattern.replace('{0}', str);
+ }));
+ ret = splitStr.join('|') + '|' + tZone.gmtZeroFormat;
+ return ret;
+ }
+
+ /**
+ * Returns zone based value.
+ *
+ * @param {boolean} flag - Specifies whether the value needs to be negated.
+ * @param {string} val1 - Specifies the first value to be parsed.
+ * @param {string} val2 - Specifies the second value to be parsed.
+ * @param {NumericOptions} num - Specifies the numeric options.
+ * @returns {number} - Returns the computed zone value.
+ */
+ function getZoneValue(flag: boolean, val1: string, val2: string, num: NumericOptions): number {
+ const ival: string = flag ? val1 : val2;
+ if (!ival) {
+ return 0;
+ }
+ const value: number = internalNumberParser(ival, num);
+ if (value && flag) {
+ return -value;
+ }
+ return value;
+ }
+
+ return {
+ dateParser,
+ getDateObject,
+ internalDateParse,
+ internalNumberParser,
+ parseTimeZoneRegx,
+ getZoneValue
+ };
+})();
diff --git a/components/base/src/intl/index.ts b/components/base/src/intl/index.ts
new file mode 100644
index 0000000..ae01671
--- /dev/null
+++ b/components/base/src/intl/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Internationalization
+ */
+export * from './date-formatter';
+export * from './number-formatter';
+export * from './intl-base';
+export * from './date-parser';
+export * from './number-parser';
diff --git a/components/base/src/intl/intl-base.tsx b/components/base/src/intl/intl-base.tsx
new file mode 100644
index 0000000..ac42bb7
--- /dev/null
+++ b/components/base/src/intl/intl-base.tsx
@@ -0,0 +1,1320 @@
+import { NumberFormatOptions, DateFormatOptions, defaultCurrencyCode } from '../internationalization';
+import { NumericParts } from './number-parser';
+import { getValue, isNullOrUndefined, extend } from '../util';
+import { ParserBase as parser } from './parser-base';
+import { DateFormat, FormatOptions } from './date-formatter';
+import { NumberFormat, FormatParts, CommonOptions } from './number-formatter';
+import { isUndefined } from '../util';
+
+/**
+ * Interface for NumericSkeleton structure
+ */
+export interface NumericSkeleton {
+ type?: string;
+ isAccount?: boolean;
+ fractionDigits?: number;
+}
+
+/**
+ * Interface for GenericFormatOptions structure
+ */
+export interface GenericFormatOptions {
+ nData?: NegativeData;
+ pData?: NegativeData;
+ zeroData?: NegativeData;
+}
+
+/**
+ * Interface for GroupSize structure
+ */
+export interface GroupSize {
+ primary?: number;
+ secondary?: number;
+}
+
+/**
+ * Interface for NegativeData structure
+ *
+ * @private
+ */
+export interface NegativeData extends FormatParts {
+ nlead?: string;
+ nend?: string;
+ groupPattern?: string;
+ minimumFraction?: number;
+ maximumFraction?: number;
+}
+
+/**
+ * Interface for Dependables structure
+ */
+export interface Dependables {
+ parserObject?: Object;
+ dateObject?: Object;
+ numericObject?: Object;
+}
+
+/**
+ * Interface for TimeZoneOptions structure
+ */
+export interface TimeZoneOptions {
+ hourFormat?: string;
+ gmtFormat?: string;
+ gmtZeroFormat?: string;
+}
+
+/**
+ * Interface for DateObject structure
+ */
+export interface DateObject {
+ year?: number;
+ month?: number;
+ date?: number;
+}
+
+/**
+ * Interface defining the exported properties and methods in the IntlBase namespace.
+ */
+export interface IIntlBase {
+ negativeDataRegex?: RegExp;
+ customRegex?: RegExp;
+ latnParseRegex?: RegExp;
+ fractionRegex?: RegExp;
+ defaultCurrency?: string;
+ mapper?: string[];
+ dateConverterMapper?: RegExp;
+ islamicRegex?: RegExp;
+ formatRegex?: RegExp;
+ currencyFormatRegex?: RegExp;
+ curWithoutNumberRegex?: RegExp;
+ dateParseRegex?: RegExp;
+ basicPatterns?: string[];
+ defaultObject?: Object;
+ monthIndex?: Object;
+ month?: string;
+ days?: string;
+ patternMatcher?: { [key: string]: string };
+ /**
+ * Computes the resultant date pattern.
+ *
+ * @private
+ * @param skeleton - Pattern skeleton.
+ * @param dateObject - Date-related object mapping.
+ * @param type - Format type.
+ * @param isIslamic - Islamic mode flag.
+ * @returns {string} The resultant pattern.
+ */
+ getResultantPattern?(
+ skeleton: string,
+ dateObject: Object,
+ type: string,
+ isIslamic?: boolean,
+ ): string;
+
+ /**
+ * Retrieves dependables based on the CLDR data.
+ *
+ * @private
+ * @param cldr - CLDR object data.
+ * @param culture - Culture code.
+ * @param mode - Calendar mode.
+ * @param isNumber - Flag indicating number operations.
+ * @returns {Dependables} Dependable objects.
+ */
+ getDependables?(
+ cldr: Object,
+ culture: string,
+ mode: string,
+ isNumber?: boolean
+ ): Dependables;
+
+ /**
+ * Fetches the symbol pattern for given parameters.
+ *
+ * @private
+ * @param type - Format type.
+ * @param numSystem - Number system.
+ * @param obj - Formatting object.
+ * @param isAccount - Account mode flag.
+ * @returns {string} Symbol pattern.
+ */
+ getSymbolPattern?(
+ type: string,
+ numSystem: string,
+ obj: Object,
+ isAccount: boolean
+ ): string;
+
+ /**
+ * Determines the proper numeric skeleton.
+ *
+ * @private
+ * @param skeleton - Skeleton string.
+ * @returns {NumericSkeleton} Numeric skeleton details.
+ */
+ getProperNumericSkeleton?(skeleton: string): NumericSkeleton;
+
+ /**
+ * Fetches format data for numbers.
+ *
+ * @private
+ * @param pattern - Number pattern.
+ * @param needFraction - Fraction requirement flag.
+ * @param cSymbol - Currency symbol.
+ * @param fractionOnly - Fraction data flag.
+ * @returns {NegativeData} Number format details.
+ */
+ getFormatData?(
+ pattern: string,
+ needFraction: boolean,
+ cSymbol: string,
+ fractionOnly?: boolean
+ ): NegativeData;
+
+ /**
+ * Changes the currency symbol in a given string.
+ *
+ * @private
+ * @param val - The value containing the currency symbol.
+ * @param sym - The new currency symbol.
+ * @returns {string} The value with the currency symbol replaced.
+ */
+ changeCurrencySymbol?(val: string, sym: string): string;
+
+ /**
+ * Retrieves the currency symbol based on the currency code.
+ *
+ * @private
+ * @param numericObject - The numeric object containing currency details.
+ * @param currencyCode - The currency code.
+ * @param altSymbol - Alternate symbol if applicable.
+ * @param ignoreCurrency - Flag to ignore currency in lookup.
+ * @returns {string} The currency symbol.
+ */
+ getCurrencySymbol?(
+ numericObject: Object,
+ currencyCode: string,
+ altSymbol?: string,
+ ignoreCurrency?: boolean
+ ): string;
+
+ /**
+ * Returns custom number format options.
+ *
+ * @private
+ * @param format - The custom format string.
+ * @param dOptions - Common options for number formatting.
+ * @param obj - Dependable object.
+ * @returns {GenericFormatOptions} Custom number format options.
+ */
+ customFormat?(
+ format: string,
+ dOptions: CommonOptions,
+ obj: Dependables
+ ): GenericFormatOptions;
+
+ /**
+ * Defines custom number format details.
+ *
+ * @private
+ * @param format - Format string.
+ * @param dOptions - Common options.
+ * @param numObject - Numeric object.
+ * @returns {NegativeData} Custom number formats.
+ */
+ customNumberFormat?(
+ format: string,
+ dOptions?: CommonOptions,
+ numObject?: Object
+ ): NegativeData;
+
+ /**
+ * Determines if a format is currency or percent type.
+ *
+ * @private
+ * @param parts - The parts of the format string.
+ * @param actual - The actual identifier.
+ * @param symbol - The symbol used.
+ * @returns {NegativeData} Formatting options.
+ */
+ isCurrencyPercent?(
+ parts: string[],
+ actual: string,
+ symbol: string
+ ): NegativeData;
+
+ /**
+ * Retrieves date separator for a given date object.
+ *
+ * @private
+ * @param dateObj - The date configuration object.
+ * @returns {string} Date separator.
+ */
+ getDateSeparator?(dateObj: Object): string;
+
+ /**
+ * Obtains the native date time format based on given options.
+ *
+ * @private
+ * @param culture - Cultural context.
+ * @param options - Date format settings.
+ * @param cldr - CLDR object.
+ * @param isExcelFormat - Flag for formatting in Excel.
+ * @returns {string} Compiled date time pattern.
+ */
+ getActualDateTimeFormat?(
+ culture: string,
+ options: DateFormatOptions,
+ cldr?: Object,
+ isExcelFormat?: boolean
+ ): string;
+
+ /**
+ * Processes symbols within a format string.
+ *
+ * @private
+ * @param actual - Original pattern string.
+ * @param option - Formatting options.
+ * @returns {string} Processed pattern.
+ */
+ processSymbol?(actual: string, option: CommonOptions): string;
+
+ /**
+ * Returns number format pattern for a culture.
+ *
+ * @private
+ * @param culture - Cultural context.
+ * @param options - Number format configurations.
+ * @param cldr - CLDR object.
+ * @param isExcel - Excel integration flag.
+ * @returns {string} Numeric pattern.
+ */
+ getActualNumberFormat?(
+ culture: string,
+ options: NumberFormatOptions,
+ cldr?: Object,
+ isExcel?: boolean
+ ): string;
+
+ /**
+ * Constructs pattern for fraction digits.
+ *
+ * @private
+ * @param minDigits - Minimum digits required.
+ * @param maxDigits - Maximum available digits.
+ * @returns {string} Pattern string with fraction digits.
+ */
+ fractionDigitsPattern?(
+ pattern: string,
+ minDigits: number,
+ maxDigits?: number
+ ): string;
+
+ /**
+ * Constructs pattern for integer digits.
+ *
+ * @private
+ * @param pattern - Base pattern.
+ * @param digits - Integer digit enforcement count.
+ * @returns {string} The pattern with integer digits.
+ */
+ minimumIntegerPattern?(pattern: string, digits: number): string;
+
+ /**
+ * Generates pattern to represent numeric grouping.
+ *
+ * @private
+ * @param pattern - Base numeric pattern.
+ * @returns {string} Group-patterned string.
+ */
+ groupingPattern?(pattern: string): string;
+
+ /**
+ * Returns first day of the week for the given culture.
+ *
+ * @private
+ * @param culture - Cultural context.
+ * @param cldr - CLDR data.
+ * @returns {number} The index number of the first day.
+ */
+ getWeekData?(culture: string, cldr?: Object): number;
+
+ /**
+ * Calculates the week number of the year for a given date.
+ *
+ * @private
+ * @param date - The date to calculate the week number for.
+ * @returns {number} The week number in the year.
+ */
+ getWeekOfYear?(date: Date): number;
+}
+
+/**
+ * Collection of methods and constants related to internationalization, date and number formatting.
+ */
+export const IntlBase: IIntlBase = (() => {
+ const regExp: RegExpConstructor = RegExp;
+ const props: IIntlBase = {
+ // eslint-disable-next-line security/detect-unsafe-regex
+ negativeDataRegex: /^(('[^']+'|''|[^*#@0,.E])*)(\*.)?((([#,]*[0,]*0+)(\.0*[0-9]*#*)?)|([#,]*@+#*))(E\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/,
+ // eslint-disable-next-line security/detect-unsafe-regex
+ customRegex: /^(('[^']+'|''|[^*#@0,.])*)(\*.)?((([0#,]*[0,]*[0#]*[0# ]*)(\.[0#]*)?)|([#,]*@+#*))(E\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/,
+ latnParseRegex: /0|1|2|3|4|5|6|7|8|9/g,
+ defaultCurrency: '$',
+ dateConverterMapper: /dddd|ddd/ig,
+ islamicRegex: /^islamic/,
+ formatRegex: new regExp('(^[ncpae]{1})([0-1]?[0-9]|20)?$', 'i'),
+ currencyFormatRegex: new regExp('(^[ca]{1})([0-1]?[0-9]|20)?$', 'i'),
+ curWithoutNumberRegex: /(c|a)$/ig,
+ dateParseRegex: /([a-z])\1*|'([^']|'')+'|''|./gi,
+ basicPatterns: ['short', 'medium', 'long', 'full']
+ };
+ const fractionRegex: RegExp = /[0-9]/g;
+ const mapper: string[] = ['infinity', 'nan', 'group', 'decimal'];
+ const patternRegex: RegExp = /G|M|L|H|c|'| a|yy|y|EEEE|E/g;
+ const patternMatch: object = {
+ 'G': '',
+ 'M': 'm',
+ 'L': 'm',
+ 'H': 'h',
+ 'c': 'd',
+ '\'': '"',
+ ' a': ' AM/PM',
+ 'yy': 'yy',
+ 'y': 'yyyy',
+ 'EEEE': 'dddd',
+ 'E': 'ddd'
+ };
+ const defaultFirstDay: string = 'sun';
+ const firstDayMapper: object = {
+ 'sun': 0,
+ 'mon': 1,
+ 'tue': 2,
+ 'wed': 3,
+ 'thu': 4,
+ 'fri': 5,
+ 'sat': 6
+ };
+ const typeMapper: object = {
+ '$': 'isCurrency',
+ '%': 'isPercent',
+ '-': 'isNegative',
+ 0: 'nlead',
+ 1: 'nend'
+ };
+ props.defaultObject = {
+ 'dates': {
+ 'calendars': {
+ 'gregorian': {
+ 'months': {
+ 'stand-alone': {
+ 'abbreviated': {
+ '1': 'Jan',
+ '2': 'Feb',
+ '3': 'Mar',
+ '4': 'Apr',
+ '5': 'May',
+ '6': 'Jun',
+ '7': 'Jul',
+ '8': 'Aug',
+ '9': 'Sep',
+ '10': 'Oct',
+ '11': 'Nov',
+ '12': 'Dec'
+ },
+ 'narrow': {
+ '1': 'J',
+ '2': 'F',
+ '3': 'M',
+ '4': 'A',
+ '5': 'M',
+ '6': 'J',
+ '7': 'J',
+ '8': 'A',
+ '9': 'S',
+ '10': 'O',
+ '11': 'N',
+ '12': 'D'
+ },
+ 'wide': {
+ '1': 'January',
+ '2': 'February',
+ '3': 'March',
+ '4': 'April',
+ '5': 'May',
+ '6': 'June',
+ '7': 'July',
+ '8': 'August',
+ '9': 'September',
+ '10': 'October',
+ '11': 'November',
+ '12': 'December'
+ }
+ }
+ },
+ 'days': {
+ 'stand-alone': {
+ 'abbreviated': {
+ 'sun': 'Sun',
+ 'mon': 'Mon',
+ 'tue': 'Tue',
+ 'wed': 'Wed',
+ 'thu': 'Thu',
+ 'fri': 'Fri',
+ 'sat': 'Sat'
+ },
+ 'narrow': {
+ 'sun': 'S',
+ 'mon': 'M',
+ 'tue': 'T',
+ 'wed': 'W',
+ 'thu': 'T',
+ 'fri': 'F',
+ 'sat': 'S'
+ },
+ 'short': {
+ 'sun': 'Su',
+ 'mon': 'Mo',
+ 'tue': 'Tu',
+ 'wed': 'We',
+ 'thu': 'Th',
+ 'fri': 'Fr',
+ 'sat': 'Sa'
+ },
+ 'wide': {
+ 'sun': 'Sunday',
+ 'mon': 'Monday',
+ 'tue': 'Tuesday',
+ 'wed': 'Wednesday',
+ 'thu': 'Thursday',
+ 'fri': 'Friday',
+ 'sat': 'Saturday'
+ }
+ }
+ },
+ 'dayPeriods': {
+ 'format': {
+ 'wide': {
+ 'am': 'AM',
+ 'pm': 'PM'
+ }
+ }
+ },
+ 'eras': {
+ 'eraNames': {
+ '0': 'Before Christ',
+ '0-alt-variant': 'Before Common Era',
+ '1': 'Anno Domini',
+ '1-alt-variant': 'Common Era'
+ },
+ 'eraAbbr': {
+ '0': 'BC',
+ '0-alt-variant': 'BCE',
+ '1': 'AD',
+ '1-alt-variant': 'CE'
+ },
+ 'eraNarrow': {
+ '0': 'B',
+ '0-alt-variant': 'BCE',
+ '1': 'A',
+ '1-alt-variant': 'CE'
+ }
+ },
+ 'dateFormats': {
+ 'full': 'EEEE, MMMM d, y',
+ 'long': 'MMMM d, y',
+ 'medium': 'MMM d, y',
+ 'short': 'M/d/yy'
+ },
+ 'timeFormats': {
+ 'full': 'h:mm:ss a zzzz',
+ 'long': 'h:mm:ss a z',
+ 'medium': 'h:mm:ss a',
+ 'short': 'h:mm a'
+ },
+ 'dateTimeFormats': {
+ 'full': '{1} \'at\' {0}',
+ 'long': '{1} \'at\' {0}',
+ 'medium': '{1}, {0}',
+ 'short': '{1}, {0}',
+ 'availableFormats': {
+ 'd': 'd',
+ 'E': 'ccc',
+ 'Ed': 'd E',
+ 'Ehm': 'E h:mm a',
+ 'EHm': 'E HH:mm',
+ 'Ehms': 'E h:mm:ss a',
+ 'EHms': 'E HH:mm:ss',
+ 'Gy': 'y G',
+ 'GyMMM': 'MMM y G',
+ 'GyMMMd': 'MMM d, y G',
+ 'GyMMMEd': 'E, MMM d, y G',
+ 'h': 'h a',
+ 'H': 'HH',
+ 'hm': 'h:mm a',
+ 'Hm': 'HH:mm',
+ 'hms': 'h:mm:ss a',
+ 'Hms': 'HH:mm:ss',
+ 'hmsv': 'h:mm:ss a v',
+ 'Hmsv': 'HH:mm:ss v',
+ 'hmv': 'h:mm a v',
+ 'Hmv': 'HH:mm v',
+ 'M': 'L',
+ 'Md': 'M/d',
+ 'MEd': 'E, M/d',
+ 'MMM': 'LLL',
+ 'MMMd': 'MMM d',
+ 'MMMEd': 'E, MMM d',
+ 'MMMMd': 'MMMM d',
+ 'ms': 'mm:ss',
+ 'y': 'y',
+ 'yM': 'M/y',
+ 'yMd': 'M/d/y',
+ 'yMEd': 'E, M/d/y',
+ 'yMMM': 'MMM y',
+ 'yMMMd': 'MMM d, y',
+ 'yMMMEd': 'E, MMM d, y',
+ 'yMMMM': 'MMMM y'
+ }
+ }
+ },
+ 'islamic': {
+ 'months': {
+ 'stand-alone': {
+ 'abbreviated': {
+ '1': 'Muh.',
+ '2': 'Saf.',
+ '3': 'Rab. I',
+ '4': 'Rab. II',
+ '5': 'Jum. I',
+ '6': 'Jum. II',
+ '7': 'Raj.',
+ '8': 'Sha.',
+ '9': 'Ram.',
+ '10': 'Shaw.',
+ '11': 'Dhuʻl-Q.',
+ '12': 'Dhuʻl-H.'
+ },
+ 'narrow': {
+ '1': '1',
+ '2': '2',
+ '3': '3',
+ '4': '4',
+ '5': '5',
+ '6': '6',
+ '7': '7',
+ '8': '8',
+ '9': '9',
+ '10': '10',
+ '11': '11',
+ '12': '12'
+ },
+ 'wide': {
+ '1': 'Muharram',
+ '2': 'Safar',
+ '3': 'Rabiʻ I',
+ '4': 'Rabiʻ II',
+ '5': 'Jumada I',
+ '6': 'Jumada II',
+ '7': 'Rajab',
+ '8': 'Shaʻban',
+ '9': 'Ramadan',
+ '10': 'Shawwal',
+ '11': 'Dhuʻl-Qiʻdah',
+ '12': 'Dhuʻl-Hijjah'
+ }
+ }
+ },
+ 'days': {
+ 'stand-alone': {
+ 'abbreviated': {
+ 'sun': 'Sun',
+ 'mon': 'Mon',
+ 'tue': 'Tue',
+ 'wed': 'Wed',
+ 'thu': 'Thu',
+ 'fri': 'Fri',
+ 'sat': 'Sat'
+ },
+ 'narrow': {
+ 'sun': 'S',
+ 'mon': 'M',
+ 'tue': 'T',
+ 'wed': 'W',
+ 'thu': 'T',
+ 'fri': 'F',
+ 'sat': 'S'
+ },
+ 'short': {
+ 'sun': 'Su',
+ 'mon': 'Mo',
+ 'tue': 'Tu',
+ 'wed': 'We',
+ 'thu': 'Th',
+ 'fri': 'Fr',
+ 'sat': 'Sa'
+ },
+ 'wide': {
+ 'sun': 'Sunday',
+ 'mon': 'Monday',
+ 'tue': 'Tuesday',
+ 'wed': 'Wednesday',
+ 'thu': 'Thursday',
+ 'fri': 'Friday',
+ 'sat': 'Saturday'
+ }
+ }
+ },
+ 'dayPeriods': {
+ 'format': {
+ 'wide': {
+ 'am': 'AM',
+ 'pm': 'PM'
+ }
+ }
+ },
+ 'eras': {
+ 'eraNames': {
+ '0': 'AH'
+ },
+ 'eraAbbr': {
+ '0': 'AH'
+ },
+ 'eraNarrow': {
+ '0': 'AH'
+ }
+ },
+ 'dateFormats': {
+ 'full': 'EEEE, MMMM d, y G',
+ 'long': 'MMMM d, y G',
+ 'medium': 'MMM d, y G',
+ 'short': 'M/d/y GGGGG'
+ },
+ 'timeFormats': {
+ 'full': 'h:mm:ss a zzzz',
+ 'long': 'h:mm:ss a z',
+ 'medium': 'h:mm:ss a',
+ 'short': 'h:mm a'
+ },
+ 'dateTimeFormats': {
+ 'full': '{1} \'at\' {0}',
+ 'long': '{1} \'at\' {0}',
+ 'medium': '{1}, {0}',
+ 'short': '{1}, {0}',
+ 'availableFormats': {
+ 'd': 'd',
+ 'E': 'ccc',
+ 'Ed': 'd E',
+ 'Ehm': 'E h:mm a',
+ 'EHm': 'E HH:mm',
+ 'Ehms': 'E h:mm:ss a',
+ 'EHms': 'E HH:mm:ss',
+ 'Gy': 'y G',
+ 'GyMMM': 'MMM y G',
+ 'GyMMMd': 'MMM d, y G',
+ 'GyMMMEd': 'E, MMM d, y G',
+ 'h': 'h a',
+ 'H': 'HH',
+ 'hm': 'h:mm a',
+ 'Hm': 'HH:mm',
+ 'hms': 'h:mm:ss a',
+ 'Hms': 'HH:mm:ss',
+ 'M': 'L',
+ 'Md': 'M/d',
+ 'MEd': 'E, M/d',
+ 'MMM': 'LLL',
+ 'MMMd': 'MMM d',
+ 'MMMEd': 'E, MMM d',
+ 'MMMMd': 'MMMM d',
+ 'ms': 'mm:ss',
+ 'y': 'y G',
+ 'yyyy': 'y G',
+ 'yyyyM': 'M/y GGGGG',
+ 'yyyyMd': 'M/d/y GGGGG',
+ 'yyyyMEd': 'E, M/d/y GGGGG',
+ 'yyyyMMM': 'MMM y G',
+ 'yyyyMMMd': 'MMM d, y G',
+ 'yyyyMMMEd': 'E, MMM d, y G',
+ 'yyyyMMMM': 'MMMM y G',
+ 'yyyyQQQ': 'QQQ y G',
+ 'yyyyQQQQ': 'QQQQ y G'
+ }
+ }
+ }
+ },
+ 'timeZoneNames': {
+ 'hourFormat': '+HH:mm;-HH:mm',
+ 'gmtFormat': 'GMT{0}',
+ 'gmtZeroFormat': 'GMT'
+ }
+ },
+ 'numbers': {
+ 'currencies': {
+ 'USD': {
+ 'displayName': 'US Dollar',
+ 'symbol': '$',
+ 'symbol-alt-narrow': '$'
+ },
+ 'EUR': {
+ 'displayName': 'Euro',
+ 'symbol': '€',
+ 'symbol-alt-narrow': '€'
+ },
+ 'GBP': {
+ 'displayName': 'British Pound',
+ 'symbol-alt-narrow': '£'
+ }
+ },
+ 'defaultNumberingSystem': 'latn',
+ 'minimumGroupingDigits': '1',
+ 'symbols-numberSystem-latn': {
+ 'decimal': '.',
+ 'group': ',',
+ 'list': ';',
+ 'percentSign': '%',
+ 'plusSign': '+',
+ 'minusSign': '-',
+ 'exponential': 'E',
+ 'superscriptingExponent': '×',
+ 'perMille': '‰',
+ 'infinity': '∞',
+ 'nan': 'NaN',
+ 'timeSeparator': ':'
+ },
+ 'decimalFormats-numberSystem-latn': {
+ 'standard': '#,##0.###'
+ },
+ 'percentFormats-numberSystem-latn': {
+ 'standard': '#,##0%'
+ },
+ 'currencyFormats-numberSystem-latn': {
+ 'standard': '¤#,##0.00',
+ 'accounting': '¤#,##0.00;(¤#,##0.00)'
+ },
+ 'scientificFormats-numberSystem-latn': {
+ 'standard': '#E0'
+ }
+ }
+ };
+ props.monthIndex = {
+ 3: 'abbreviated',
+ 4: 'wide',
+ 5: 'narrow',
+ 1: 'abbreviated'
+ };
+ props.month = 'months';
+ props.days = 'days';
+ props.patternMatcher = {
+ C: 'currency',
+ P: 'percent',
+ N: 'decimal',
+ A: 'currency',
+ E: 'scientific'
+ };
+
+ /**
+ * Returns the resultant pattern based on the skeleton, dateObject, and the type provided.
+ *
+ * @param {string} skeleton ?
+ * @param {Object} dateObject ?
+ * @param {string} type ?
+ * @returns {string} Resultant pattern.
+ */
+ props.getResultantPattern = (
+ skeleton: string, dateObject: Object, type: string): string => {
+ let resPattern: string;
+ const iType: string = type || 'date';
+ if (props.basicPatterns.indexOf(skeleton) !== -1) {
+ resPattern = getValue(iType + 'Formats.' + skeleton, dateObject);
+ if (iType === 'dateTime') {
+ const dPattern: string = getValue('dateFormats.' + skeleton, dateObject);
+ const tPattern: string = getValue('timeFormats.' + skeleton, dateObject);
+ resPattern = resPattern.replace('{1}', dPattern).replace('{0}', tPattern);
+ }
+ } else {
+ resPattern = getValue('dateTimeFormats.availableFormats.' + skeleton, dateObject);
+ }
+ if (isUndefined(resPattern) && skeleton === 'yMd') {
+ resPattern = 'M/d/y';
+ }
+ return resPattern;
+ };
+
+ /**
+ * Returns the dependable object for provided cldr data and culture.
+ *
+ * @param {Object} cldr ?
+ * @param {string} culture ?
+ * @param {string} mode ?
+ * @param {boolean} isNumber ?
+ * @returns {Dependables} Dependable object.
+ */
+ props.getDependables = (cldr: Object, culture: string, mode: string, isNumber?: boolean): Dependables => {
+ const ret: Dependables = {};
+ const calendartype: string = mode || 'gregorian';
+ ret.parserObject = parser.getMainObject(cldr, culture) || (IntlBase.defaultObject);
+ if (isNumber) {
+ ret.numericObject = getValue('numbers', ret.parserObject);
+ } else {
+ const dateString: string = ('dates.calendars.' + calendartype);
+ ret.dateObject = getValue(dateString, ret.parserObject);
+ }
+ return ret;
+ };
+
+ /**
+ * Returns the symbol pattern for provided parameters.
+ *
+ * @param {string} type ?
+ * @param {string} numSystem ?
+ * @param {Object} obj ?
+ * @param {boolean} isAccount ?
+ * @returns {string} Symbol pattern.
+ */
+ props.getSymbolPattern = (type: string, numSystem: string, obj: Object, isAccount: boolean): string => {
+ return getValue(
+ type + 'Formats-numberSystem-' + numSystem + (isAccount ? '.accounting' : '.standard'),
+ obj
+ ) || (isAccount ? getValue(
+ type + 'Formats-numberSystem-' + numSystem + '.standard',
+ obj
+ ) : '');
+ };
+
+ /**
+ * Returns the proper numeric skeleton.
+ *
+ * @param {string} skeleton ?
+ * @returns {NumericSkeleton} Numeric skeleton.
+ */
+ props.getProperNumericSkeleton = (skeleton: string): NumericSkeleton => {
+ const matches: RegExpMatchArray | null = skeleton.match(props.formatRegex);
+ const ret: NumericSkeleton = {};
+ const pattern: string = matches ? matches[1].toUpperCase() : '';
+ ret.isAccount = (pattern === 'A');
+ ret.type = props.patternMatcher[`${pattern}`];
+ if (matches && skeleton.length > 1 && matches[2]) {
+ ret.fractionDigits = parseInt(matches[2], 10);
+ }
+ return ret;
+ };
+
+ /**
+ * Returns format data for number formatting.
+ *
+ * @param {string} pattern ?
+ * @param {boolean} needFraction ?
+ * @param {string} cSymbol ?
+ * @param {boolean} fractionOnly ?
+ * @returns {NegativeData} Format data.
+ */
+ props.getFormatData = (pattern: string, needFraction: boolean, cSymbol: string, fractionOnly?: boolean): NegativeData => {
+ const nData: NegativeData = fractionOnly ? {} : { nlead: '', nend: '' };
+ const match: string[] | null = pattern.match(props.customRegex);
+ if (match) {
+ if (!fractionOnly) {
+ nData.nlead = props.changeCurrencySymbol(match[1], cSymbol);
+ nData.nend = props.changeCurrencySymbol(match[10], cSymbol);
+ nData.groupPattern = match[4];
+ }
+ const fraction: string = match[7];
+ if (fraction && needFraction) {
+ const fmatch: string[] | null = fraction.match(fractionRegex);
+ nData.minimumFraction = fmatch ? fmatch.length : 0;
+ nData.maximumFraction = fraction.length - 1;
+ }
+ }
+ return nData;
+ };
+
+ /**
+ * Changes currency symbol.
+ *
+ * @param {string} val ?
+ * @param {string} sym ?
+ * @returns {string} Changed symbol.
+ */
+ props.changeCurrencySymbol = (val: string, sym: string): string => {
+ if (val) {
+ val = val.replace(props.defaultCurrency, sym);
+ return (sym === '') ? val.trim() : val;
+ }
+ return '';
+ };
+
+ /**
+ * Returns currency symbol based on currency code.
+ *
+ * @param {Object} numericObject ?
+ * @param {string} currencyCode ?
+ * @param {string} altSymbol ?
+ * @param {string} ignoreCurrency ?
+ * @returns {string} Currency symbol.
+ */
+ props.getCurrencySymbol = (
+ numericObject: Object, currencyCode: string, altSymbol?: string, ignoreCurrency?: boolean
+ ): string => {
+ const symbol: string = altSymbol ? ('.' + altSymbol) : '.symbol';
+ const getCurrency: string = ignoreCurrency ? '$'
+ : getValue('currencies.' + currencyCode + symbol, numericObject)
+ || getValue('currencies.' + currencyCode + '.symbol-alt-narrow', numericObject)
+ || '$';
+ return getCurrency;
+ };
+
+ /**
+ * Returns formatting options for custom number format.
+ *
+ * @param {string} format ?
+ * @param {CommonOptions} dOptions ?
+ * @param {Dependables} obj ?
+ * @returns {GenericFormatOptions} Custom format options.
+ */
+ props.customFormat = (format: string, dOptions: CommonOptions, obj: Dependables): GenericFormatOptions => {
+ const options: GenericFormatOptions = {};
+ const formatSplit: string[] = format.split(';');
+ const data: string[] = ['pData', 'nData', 'zeroData'];
+ for (let i: number = 0; i < formatSplit.length; i++) {
+ options[data[parseInt(i.toString(), 10)]] = props.customNumberFormat(formatSplit[parseInt(i.toString(), 10)], dOptions, obj);
+ }
+ if (isNullOrUndefined(options.nData)) {
+ options.nData = extend({}, options.pData);
+ options.nData.nlead = (dOptions?.minusSymbol || '-') + options.nData.nlead;
+ }
+ return options;
+ };
+
+ /**
+ * Returns custom formatting options.
+ *
+ * @param {string} format ?
+ * @param {CommonOptions} dOptions ?
+ * @param {Object} numObject ?
+ * @returns {NegativeData} Custom number format.
+ */
+ props.customNumberFormat = (format: string, dOptions?: CommonOptions, numObject?: Object): NegativeData => {
+ const cOptions: NegativeData = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 };
+ const pattern: string[] | null = format.match(props.customRegex);
+ if (isNullOrUndefined(pattern) || (pattern[5] === '' && format !== 'N/A')) {
+ cOptions.type = undefined;
+ return cOptions;
+ }
+ cOptions.nlead = pattern[1];
+ cOptions.nend = pattern[10];
+ let integerPart: string = pattern[6];
+ const spaceCapture: boolean = integerPart.match(/ $/g) ? true : false;
+ const spaceGrouping: boolean = integerPart.replace(/ $/g, '').indexOf(' ') !== -1;
+ cOptions.useGrouping = integerPart.indexOf(',') !== -1 || spaceGrouping;
+ integerPart = integerPart.replace(/,/g, '');
+ const fractionPart: string = pattern[7];
+ if (integerPart.indexOf('0') !== -1) {
+ cOptions.minimumIntegerDigits = integerPart.length - integerPart.indexOf('0');
+ }
+ if (!isNullOrUndefined(fractionPart)) {
+ cOptions.minimumFractionDigits = fractionPart.lastIndexOf('0');
+ cOptions.maximumFractionDigits = fractionPart.lastIndexOf('#');
+ if (cOptions.minimumFractionDigits === -1) {
+ cOptions.minimumFractionDigits = 0;
+ }
+ if (cOptions.maximumFractionDigits === -1 || cOptions.maximumFractionDigits < cOptions.minimumFractionDigits) {
+ cOptions.maximumFractionDigits = cOptions.minimumFractionDigits;
+ }
+ }
+ if (!isNullOrUndefined(dOptions)) {
+ dOptions.isCustomFormat = true;
+ extend(cOptions, props.isCurrencyPercent([cOptions.nlead, cOptions.nend], '$', dOptions.currencySymbol));
+ if (!cOptions.isCurrency) {
+ extend(cOptions, props.isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', dOptions.percentSymbol));
+ }
+ } else {
+ extend(cOptions, props.isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', '%'));
+ }
+ if (!isNullOrUndefined(numObject)) {
+ const symbolPattern: string = props.getSymbolPattern(
+ cOptions.type, dOptions.numberMapper.numberSystem, numObject, false);
+ if (cOptions.useGrouping) {
+ cOptions.groupSeparator = spaceGrouping ? ' ' : dOptions.numberMapper.numberSymbols[mapper[2]];
+ cOptions.groupData = NumberFormat.getGroupingDetails(symbolPattern.split(';')[0]);
+ }
+ cOptions.nlead = cOptions.nlead.replace(/'/g, '');
+ cOptions.nend = spaceCapture ? ' ' + cOptions.nend.replace(/'/g, '') : cOptions.nend.replace(/'/g, '');
+ }
+ return cOptions;
+ };
+
+ /**
+ * Evaluates if formatting applies to currency or percent type.
+ *
+ * @param {string[]} parts ?
+ * @param {string} actual ?
+ * @param {string} symbol ?
+ * @returns {NegativeData} Information on currency or percent formatting.
+ */
+ props.isCurrencyPercent = (parts: string[], actual: string, symbol: string): NegativeData => {
+ const options: NegativeData = { nlead: parts[0], nend: parts[1] };
+ for (let i: number = 0; i < 2; i++) {
+ const part: string = parts[parseInt(i.toString(), 10)];
+ const loc: number = part.indexOf(actual);
+ if ((loc !== -1) && ((loc < part.indexOf('\'')) || (loc > part.lastIndexOf('\'')))) {
+ options[typeMapper[parseInt(i.toString(), 10)]] = part.substr(0, loc) + symbol + part.substr(loc + 1);
+ options[typeMapper[`${actual}`]] = true;
+ options.type = options.isCurrency ? 'currency' : 'percent';
+ break;
+ }
+ }
+ return options;
+ };
+
+ /**
+ * Returns culture-based date separator.
+ *
+ * @param {Object} dateObj ?
+ * @returns {string} Date separator.
+ */
+ props.getDateSeparator = (dateObj: Object): string => {
+ const value: string[] = (getValue('dateFormats.short', dateObj) || '').match(/[dM]([^dM])[dM]/i);
+ return value ? value[1] : '/';
+ };
+
+ /**
+ * Returns native date time pattern.
+ *
+ * @param {string} culture ?
+ * @param {DateFormatOptions} options ?
+ * @param {Object} cldr ?
+ * @param {boolean} isExcelFormat ?
+ * @returns {string} Actual date time pattern.
+ */
+ props.getActualDateTimeFormat = (
+ culture: string, options: DateFormatOptions, cldr?: Object, isExcelFormat?: boolean
+ ): string => {
+ const dependable: Dependables = props.getDependables(cldr, culture, options.calendar);
+ let actualPattern: string = options.format || props.getResultantPattern(options.skeleton, dependable.dateObject, options.type);
+ if (isExcelFormat) {
+ actualPattern = actualPattern.replace(patternRegex, (pattern: string): string => {
+ return patternMatch[`${pattern}`];
+ });
+ if (actualPattern.indexOf('z') !== -1) {
+ const tLength: number = actualPattern.match(/z/g).length || 0;
+ let timeZonePattern: string;
+ const formatOptions: FormatOptions = { timeZone: {} };
+ formatOptions.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));
+ formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);
+ const value: Date = new Date();
+ const timezone: number = value.getTimezoneOffset();
+ let pattern: string = (tLength < 4) ? '+H;-H' : formatOptions.timeZone.hourFormat;
+ pattern = pattern.replace(/:/g, formatOptions.numMapper.timeSeparator);
+ if (timezone === 0) {
+ timeZonePattern = formatOptions.timeZone.gmtZeroFormat;
+ } else {
+ timeZonePattern = DateFormat.getTimeZoneValue(timezone, pattern);
+ timeZonePattern = formatOptions.timeZone.gmtFormat.replace(/\{0\}/, timeZonePattern);
+ }
+ actualPattern = actualPattern.replace(/[z]+/, '"' + timeZonePattern + '"');
+ }
+ actualPattern = actualPattern.replace(/ $/, '');
+ }
+ return actualPattern;
+ };
+
+ /**
+ * Processes symbols in format.
+ *
+ * @param {string} actual ?
+ * @param {CommonOptions} option ?
+ * @returns {string} Processed symbols.
+ */
+ props.processSymbol = (actual: string, option: CommonOptions): string => {
+ if (actual.indexOf(',') !== -1) {
+ const split: string[] = actual.split(',');
+ actual = (split[0] + getValue('numberMapper.numberSymbols.group', option) +
+ split[1].replace('.', getValue('numberMapper.numberSymbols.decimal', option)));
+ } else {
+ actual = actual.replace('.', getValue('numberMapper.numberSymbols.decimal', option));
+ }
+ return actual;
+ };
+
+ /**
+ * Returns native number pattern.
+ *
+ * @param {string} culture ?
+ * @param {NumberFormatOptions} options ?
+ * @param {Object} cldr ?
+ * @param {boolean} isExcel ?
+ * @returns {string} Actual number format.
+ */
+ props.getActualNumberFormat = (
+ culture: string, options: NumberFormatOptions, cldr?: Object, isExcel?: boolean
+ ): string => {
+ const dependable: Dependables = props.getDependables(cldr, culture, '', true);
+ const parseOptions: NumericParts = { custom: true };
+ let minFrac: number;
+ const curObj: GenericFormatOptions & { hasNegativePattern?: boolean } = {};
+ const curMatch: string[] | null = (options.format)?.match(props.currencyFormatRegex);
+ const dOptions: CommonOptions = {};
+ if (curMatch) {
+ dOptions.numberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);
+ const curCode: string = props.getCurrencySymbol(
+ dependable.numericObject,
+ options.currency || defaultCurrencyCode,
+ options.altSymbol
+ );
+ let symbolPattern: string = props.getSymbolPattern(
+ 'currency', dOptions.numberMapper.numberSystem, dependable.numericObject, (/a/i).test(options.format));
+ symbolPattern = symbolPattern.replace(/\u00A4/g, curCode);
+ const split: string[] = symbolPattern.split(';');
+ curObj.hasNegativePattern = (split.length > 1);
+ curObj.nData = props.getFormatData(split[1] || '-' + split[0], true, curCode);
+ curObj.pData = props.getFormatData(split[0], false, curCode);
+ if (!curMatch[2] && !options.minimumFractionDigits && !options.maximumFractionDigits) {
+ minFrac = props.getFormatData(symbolPattern.split(';')[0], true, '', true).minimumFraction;
+ }
+ }
+ let actualPattern: string;
+ if ((props.formatRegex.test(options.format)) || !(options.format)) {
+ extend(parseOptions, props.getProperNumericSkeleton(options.format || 'N'));
+ parseOptions.custom = false;
+ actualPattern = '###0';
+ if (parseOptions.fractionDigits || options.minimumFractionDigits || options.maximumFractionDigits || minFrac) {
+ const defaultMinimum: number = 0;
+ if (parseOptions.fractionDigits) {
+ options.minimumFractionDigits = options.maximumFractionDigits = parseOptions.fractionDigits;
+ }
+ actualPattern = props.fractionDigitsPattern(
+ actualPattern, minFrac || parseOptions.fractionDigits ||
+ options.minimumFractionDigits || defaultMinimum,
+ options.maximumFractionDigits || defaultMinimum);
+ }
+ if (options.minimumIntegerDigits) {
+ actualPattern = props.minimumIntegerPattern(actualPattern, options.minimumIntegerDigits);
+ }
+ if (options.useGrouping) {
+ actualPattern = props.groupingPattern(actualPattern);
+ }
+ if (parseOptions.type === 'currency') {
+ const cPattern: string = actualPattern;
+ actualPattern = curObj.pData.nlead + cPattern + curObj.pData.nend;
+ if (curObj.hasNegativePattern) {
+ actualPattern += ';' + curObj.nData.nlead + cPattern + curObj.nData.nend;
+ }
+ }
+ if (parseOptions.type === 'percent') {
+ actualPattern += ' %';
+ }
+ } else {
+ actualPattern = options.format.replace(/'/g, '"');
+ }
+ if (Object.keys(dOptions).length > 0) {
+ actualPattern = !isExcel ? props.processSymbol(actualPattern, dOptions) : actualPattern;
+ }
+ return actualPattern;
+ };
+
+ /**
+ * Constructs the pattern for fraction digits.
+ *
+ * @param {string} pattern ?
+ * @param {number} minDigits ?
+ * @param {number} maxDigits ?
+ * @returns {string} Pattern with fraction digits.
+ */
+ props.fractionDigitsPattern = (pattern: string, minDigits: number, maxDigits?: number): string => {
+ pattern += '.';
+ for (let i: number = 0; i < minDigits; i++) {
+ pattern += '0';
+ }
+ if (minDigits < maxDigits) {
+ const diff: number = maxDigits - minDigits;
+ for (let j: number = 0; j < diff; j++) {
+ pattern += '#';
+ }
+ }
+ return pattern;
+ };
+
+ /**
+ * Constructs the pattern for minimum integer digits.
+ *
+ * @param {string} pattern ?
+ * @param {number} digits ?
+ * @returns {string} Pattern with minimum integer digits.
+ */
+ props.minimumIntegerPattern = (pattern: string, digits: number): string => {
+ const parts: string[] = pattern.split('.');
+ let integer: string = '';
+ for (let i: number = 0; i < digits; i++) {
+ integer += '0';
+ }
+ return parts[1] ? (integer + '.' + parts[1]) : integer;
+ };
+
+ /**
+ * Constructs the pattern for grouping.
+ *
+ * @param {string} pattern ?
+ * @returns {string} Grouped pattern.
+ */
+ props.groupingPattern = (pattern: string): string => {
+ const parts: string[] = pattern.split('.');
+ let integerPart: string = parts[0];
+ const no: number = 3 - integerPart.length % 3;
+ const hash: string = (no && no === 1) ? '#' : (no === 2 ? '##' : '');
+ integerPart = hash + integerPart;
+ pattern = '';
+ for (let i: number = integerPart.length - 1; i > 0; i -= 3) {
+ pattern = ',' + integerPart[i - 2] + integerPart[i - 1] + integerPart[parseInt(i.toString(), 10)] + pattern;
+ }
+ pattern = pattern.slice(1);
+ return parts[1] ? (pattern + '.' + parts[1]) : pattern;
+ };
+
+ /**
+ * Returns week data based on culture.
+ *
+ * @param {string} culture ?
+ * @param {Object} cldr ?
+ * @returns {number} Week data.
+ */
+ props.getWeekData = (culture: string, cldr?: Object): number => {
+ let firstDay: string = defaultFirstDay;
+ const mapper: Object = getValue('supplemental.weekData.firstDay', cldr);
+ let iCulture: string = culture;
+ if ((/en-/).test(iCulture)) {
+ iCulture = iCulture.slice(3);
+ }
+ iCulture = iCulture.slice(0, 2).toUpperCase() + iCulture.substr(2);
+ if (mapper) {
+ firstDay = mapper[`${iCulture}`] || mapper[iCulture.slice(0, 2)] || defaultFirstDay;
+ }
+ return firstDayMapper[`${firstDay}`];
+ };
+
+ /**
+ * Gets the week number of the year.
+ *
+ * @param {Date} date ?
+ * @returns {number} Week number.
+ */
+ props.getWeekOfYear = (date: Date): number => {
+ const newYear: Date = new Date(date.getFullYear(), 0, 1);
+ let day: number = newYear.getDay();
+ let weeknum: number;
+ day = (day >= 0 ? day : day + 7);
+ const daynum: number = Math.floor((date.getTime() - newYear.getTime() -
+ (date.getTimezoneOffset() - newYear.getTimezoneOffset()) * 60000) / 86400000) + 1;
+ if (day < 4) {
+ weeknum = Math.floor((daynum + day - 1) / 7) + 1;
+ if (weeknum > 52) {
+ const nYear: Date = new Date(date.getFullYear() + 1, 0, 1);
+ let nday: number = nYear.getDay();
+ nday = nday >= 0 ? nday : nday + 7;
+ weeknum = nday < 4 ? 1 : 53;
+ }
+ } else {
+ weeknum = Math.floor((daynum + day - 1) / 7);
+ }
+ return weeknum;
+ };
+ return props;
+})();
diff --git a/components/base/src/intl/number-formatter.tsx b/components/base/src/intl/number-formatter.tsx
new file mode 100644
index 0000000..829a896
--- /dev/null
+++ b/components/base/src/intl/number-formatter.tsx
@@ -0,0 +1,456 @@
+import { isUndefined, throwError, isNullOrUndefined, extend } from '../util';
+import { NumberFormatOptions, defaultCurrencyCode } from '../internationalization';
+import { IntlBase as base, NegativeData, GenericFormatOptions, NumericSkeleton, Dependables } from './intl-base';
+import { ParserBase as parser, NumberMapper } from './parser-base';
+
+/**
+ * Interface for default formatting options.
+ *
+ * @private
+ */
+export interface FormatParts extends NumericSkeleton, NumberFormatOptions {
+ groupOne?: boolean;
+ isPercent?: boolean;
+ isCurrency?: boolean;
+ isNegative?: boolean;
+ groupData?: GroupDetails;
+ groupSeparator?: string;
+}
+
+/**
+ * Interface for common formatting options.
+ */
+export interface CommonOptions {
+ numberMapper?: NumberMapper;
+ currencySymbol?: string;
+ percentSymbol?: string;
+ minusSymbol?: string;
+ isCustomFormat?: boolean;
+}
+
+/**
+ * Interface for currency processing.
+ */
+export interface CurrencyOptions {
+ position?: string;
+ symbol?: string;
+ currencySpace?: boolean;
+}
+
+/**
+ * Interface for grouping process.
+ */
+export interface GroupDetails {
+ primary?: number;
+ secondary?: number;
+}
+
+/**
+ * Error text mappings for significant and fraction digits.
+ */
+const errorText: Object = {
+ 'ms': 'minimumSignificantDigits',
+ 'ls': 'maximumSignificantDigits',
+ 'mf': 'minimumFractionDigits',
+ 'lf': 'maximumFractionDigits'
+};
+
+/**
+ * Percent sign constant.
+ */
+const percentSign: string = 'percentSign';
+
+/**
+ * Minus sign constant.
+ */
+const minusSign: string = 'minusSign';
+
+/**
+ * Mapper array for numeric symbols.
+ */
+const mapper: string[] = ['infinity', 'nan', 'group', 'decimal', 'exponential'];
+
+
+
+/**
+ * Interface for public and protected properties/methods of NumberFormatObject.
+ */
+export interface INumberFormat {
+ /**
+ * Returns the formatter function for given skeleton.
+ *
+ * @private
+ * @param {string} culture - Specifies the culture name to be used for formatting.
+ * @param {NumberFormatOptions} option - Specifies the format in which number will be formatted.
+ * @param {Object} cldr - Specifies the global cldr data collection.
+ * @returns {Function}
+ */
+ numberFormatter: (culture: string, option: NumberFormatOptions, cldr: Object) => Function;
+ /**
+ * Returns grouping details for the pattern provided.
+ *
+ * @private
+ * @param {string} pattern
+ * @returns {GroupDetails}
+ */
+ getGroupingDetails: (pattern: string) => GroupDetails;
+}
+
+/**
+ * Custom object structure for NumberFormat with all methods and properties.
+ */
+export const NumberFormat: INumberFormat = (() => {
+
+ /**
+ * Returns the formatter function for given skeleton.
+ *
+ * @param {string} culture - Specifies the culture name to be used for formatting.
+ * @param {NumberFormatOptions} option - Specifies the format in which number will be formatted.
+ * @param {Object} cldr - Specifies the global cldr data collection.
+ * @returns {Function} Returns the formatter function for the given number format options.
+ */
+ function numberFormatter(culture: string, option: NumberFormatOptions, cldr: Object): Function {
+ const fOptions: FormatParts = extend({}, option);
+ let cOptions: GenericFormatOptions = {};
+ const dOptions: CommonOptions = {};
+ let symbolPattern: string;
+
+ const dependable: Dependables = base.getDependables(cldr, culture, '', true);
+ dOptions.numberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);
+ dOptions.currencySymbol = base.getCurrencySymbol(
+ dependable.numericObject, fOptions.currency || defaultCurrencyCode, option.altSymbol, option.ignoreCurrency);
+ dOptions.percentSymbol = (dOptions).numberMapper.numberSymbols[`${percentSign}`];
+ dOptions.minusSymbol = (dOptions).numberMapper.numberSymbols[`${minusSign}`];
+
+ const symbols: Object = dOptions.numberMapper.numberSymbols;
+ if (option.format && !base.formatRegex.test(option.format)) {
+ cOptions = base.customFormat(option.format, dOptions, dependable.numericObject);
+ if (!isUndefined(fOptions.useGrouping) && fOptions.useGrouping) {
+ fOptions.useGrouping = cOptions.pData.useGrouping;
+ }
+ } else {
+ extend(fOptions, base.getProperNumericSkeleton(option.format || 'N'));
+ fOptions.isCurrency = fOptions.type === 'currency';
+ fOptions.isPercent = fOptions.type === 'percent';
+ symbolPattern = base.getSymbolPattern(
+ fOptions.type, dOptions.numberMapper.numberSystem, dependable.numericObject, fOptions.isAccount);
+ fOptions.groupOne = checkValueRange(fOptions.maximumSignificantDigits, fOptions.minimumSignificantDigits, true);
+ checkValueRange(fOptions.maximumFractionDigits, fOptions.minimumFractionDigits, false, true);
+ if (!isUndefined(fOptions.fractionDigits)) {
+ fOptions.minimumFractionDigits = fOptions.maximumFractionDigits = fOptions.fractionDigits;
+ }
+ if (isUndefined(fOptions.useGrouping)) {
+ fOptions.useGrouping = true;
+ }
+ if (fOptions.isCurrency) {
+ symbolPattern = symbolPattern.replace(/\u00A4/g, base.defaultCurrency);
+ }
+ const split: string[] = symbolPattern.split(';');
+ cOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, dOptions.currencySymbol);
+ cOptions.pData = base.getFormatData(split[0], false, dOptions.currencySymbol);
+ if (fOptions.useGrouping) {
+ fOptions.groupSeparator = symbols[mapper[2]];
+ fOptions.groupData = getGroupingDetails(split[0]);
+ }
+ const minFrac: boolean = isUndefined(fOptions.minimumFractionDigits);
+ if (minFrac) {
+ fOptions.minimumFractionDigits = cOptions.nData.minimumFraction;
+ }
+ if (isUndefined(fOptions.maximumFractionDigits)) {
+ const mval: number = cOptions.nData.maximumFraction;
+ fOptions.maximumFractionDigits = isUndefined(mval) && fOptions.isPercent ? 0 : mval;
+ }
+ const mfrac: number = fOptions.minimumFractionDigits;
+ const lfrac: number = fOptions.maximumFractionDigits;
+ if (!isUndefined(mfrac) && !isUndefined(lfrac)) {
+ if (mfrac > lfrac) {
+ fOptions.maximumFractionDigits = mfrac;
+ }
+ }
+ }
+ extend(cOptions.nData, fOptions);
+ extend(cOptions.pData, fOptions);
+ return (value: number): string => {
+ if (isNaN(value)) {
+ return symbols[mapper[1]];
+ } else if (!isFinite(value)) {
+ return symbols[mapper[0]];
+ }
+ return intNumberFormatter(value, cOptions, dOptions, option);
+ };
+ }
+
+ /**
+ * Returns grouping details for the pattern provided.
+ *
+ * @param {string} pattern ?
+ * @returns {GroupDetails} Returns an object containing primary and secondary grouping details
+ */
+ function getGroupingDetails(pattern: string): GroupDetails {
+ const ret: GroupDetails = {};
+ const match: string[] | null = pattern.match(base.negativeDataRegex);
+ if (match && match[4]) {
+ const pattern: string = match[4];
+ const p: number = pattern.lastIndexOf(',');
+ if (p !== -1) {
+ const temp: string = pattern.split('.')[0];
+ ret.primary = (temp.length - p) - 1;
+ const s: number = pattern.lastIndexOf(',', p - 1);
+ if (s !== -1) {
+ ret.secondary = p - 1 - s;
+ }
+ }
+ }
+ return ret;
+ }
+
+ /**
+ * Checks if the provided integer range is valid.
+ *
+ * @param {number} val1 ?
+ * @param {number} val2 ?
+ * @param {boolean} checkbothExist ?
+ * @param {boolean} isFraction ?
+ * @returns {boolean} ?
+ */
+ function checkValueRange(val1: number, val2: number, checkbothExist: boolean, isFraction?: true): boolean {
+ const decide: string = isFraction ? 'f' : 's';
+ let dint: number = 0;
+ const str1: string = (errorText)['l' + decide];
+ const str2: string = (errorText)['m' + decide];
+ if (!isUndefined(val1)) {
+ checkRange(val1, str1, isFraction);
+ dint++;
+ }
+ if (!isUndefined(val2)) {
+ checkRange(val2, str2, isFraction);
+ dint++;
+ }
+ if (dint === 2) {
+ if (val1 < val2) {
+ throwError(str2 + 'specified must be less than the' + str1);
+ } else {
+ return true;
+ }
+ } else if (checkbothExist && dint === 1) {
+ throwError('Both' + str2 + 'and' + str2 + 'must be present');
+ }
+ return false;
+ }
+
+ /**
+ * Validates if a value is within a specified range.
+ *
+ * @param {number} val ?
+ * @param {string} text ?
+ * @param {boolean} isFraction ?
+ * @returns {void}
+ */
+ function checkRange(val: number, text: string, isFraction?: boolean): void {
+ const range: number[] = isFraction ? [0, 20] : [1, 21];
+ if (val < range[0] || val > range[1]) {
+ throwError(text + 'value must be within the range' + range[0] + 'to' + range[1]);
+ }
+ }
+
+ /**
+ * Formats numeric strings based on options.
+ *
+ * @param {number} value ?
+ * @param {GenericFormatOptions} fOptions ?
+ * @param {CommonOptions} dOptions ?
+ * @param {NumberFormatOptions} [option] ?
+ * @returns {string} ?
+ */
+ function intNumberFormatter(
+ value: number, fOptions: GenericFormatOptions,
+ dOptions: CommonOptions,
+ option?: NumberFormatOptions
+ ): string {
+ let curData: NegativeData;
+ if (isUndefined(fOptions.nData.type)) {
+ return null;
+ } else {
+ if (value < 0) {
+ value = value * -1;
+ curData = fOptions.nData;
+ } else if (value === 0) {
+ curData = fOptions.zeroData || fOptions.pData;
+ } else {
+ curData = fOptions.pData;
+ }
+ let fValue: string = '';
+ if (curData.isPercent) {
+ value = value * 100;
+ }
+ if (curData.groupOne) {
+ fValue = processSignificantDigits(value, curData.minimumSignificantDigits, curData.maximumSignificantDigits);
+ } else {
+ fValue = processFraction(value, curData.minimumFractionDigits, curData.maximumFractionDigits, option);
+ if (curData.minimumIntegerDigits) {
+ fValue = processMinimumIntegers(fValue, curData.minimumIntegerDigits);
+ }
+ if (dOptions.isCustomFormat && curData.minimumFractionDigits < curData.maximumFractionDigits
+ && /\d+\.\d+/.test(fValue)) {
+ const temp: string[] = fValue.split('.');
+ let decimalPart: string = temp[1];
+ const len: number = decimalPart.length;
+ for (let i: number = len - 1; i >= 0; i--) {
+ if (decimalPart[parseInt(i.toString(), 10)] === '0' && i >= curData.minimumFractionDigits) {
+ decimalPart = decimalPart.slice(0, i);
+ } else {
+ break;
+ }
+ }
+ fValue = temp[0] + '.' + decimalPart;
+ }
+ }
+ if (curData.type === 'scientific') {
+ fValue = value.toExponential(curData.maximumFractionDigits);
+ fValue = fValue.replace('e', dOptions.numberMapper.numberSymbols[mapper[4]]);
+ }
+ fValue = fValue.replace('.', (dOptions).numberMapper.numberSymbols[mapper[3]]);
+ fValue = curData.format === '#,###,,;(#,###,,)' ? customPivotFormat(parseInt(fValue, 10)) : fValue;
+ if (curData.useGrouping) {
+ fValue = groupNumbers(
+ fValue, curData.groupData.primary, curData.groupSeparator || ',',
+ (dOptions).numberMapper.numberSymbols[mapper[3]] || '.', curData.groupData.secondary);
+ }
+ fValue = parser.convertValueParts(fValue, base.latnParseRegex, dOptions.numberMapper.mapper);
+ if (curData.nlead === 'N/A') {
+ return curData.nlead;
+ } else {
+ if (fValue === '0' && option && option.format === '0') {
+ return fValue + curData.nend;
+ }
+ return curData.nlead + fValue + curData.nend;
+ }
+ }
+ }
+
+ /**
+ * Processes significant digits for a value.
+ *
+ * @param {number} value ?
+ * @param {number} min ?
+ * @param {number} max ?
+ * @returns {string} ?
+ */
+ function processSignificantDigits(value: number, min: number, max: number): string {
+ let temp: string = value + '';
+ let tn: number;
+ const length: number = temp.length;
+ if (length < min) {
+ return value.toPrecision(min);
+ } else {
+ temp = value.toPrecision(max);
+ tn = +temp;
+ return tn + '';
+ }
+ }
+
+ /**
+ * Groups numeric strings based on separator and levels.
+ *
+ * @param {string} val ?
+ * @param {number} level1 ?
+ * @param {string} sep ?
+ * @param {string} decimalSymbol ?
+ * @param {number} level2 ?
+ * @returns {string} ?
+ */
+ function groupNumbers(val: string, level1: number, sep: string, decimalSymbol: string, level2?: number): string {
+ let flag: boolean = !isNullOrUndefined(level2) && level2 !== 0;
+ const split: string[] = val.split(decimalSymbol);
+ const prefix: string = split[0];
+ let length: number = prefix.length;
+ let str: string = '';
+ while (length > level1) {
+ str = prefix.slice(length - level1, length) + (str.length ?
+ (sep + str) : '');
+ length -= level1;
+ if (flag) {
+ level1 = level2;
+ flag = false;
+ }
+ }
+ split[0] = prefix.slice(0, length) + (str.length ? sep : '') + str;
+ return split.join(decimalSymbol);
+ }
+
+ /**
+ * Processes the fraction part of the numeric value.
+ *
+ * @param {number} value ?
+ * @param {number} min ?
+ * @param {number} max ?
+ * @param {NumberFormatOptions} [option] ?
+ * @returns {string} ?
+ */
+ function processFraction(value: number, min: number, max: number, option?: NumberFormatOptions): string {
+ const temp: string = (value + '').split('.')[1];
+ const length: number = temp ? temp.length : 0;
+ if (min && length < min) {
+ let ret: string = '';
+ if (length === 0) {
+ ret = value.toFixed(min);
+ } else {
+ ret += value;
+ for (let j: number = 0; j < min - length; j++) {
+ ret += '0';
+ }
+ return ret;
+ }
+ return value.toFixed(min);
+ } else if (!isNullOrUndefined(max) && (length > max || max === 0)) {
+ return value.toFixed(max);
+ }
+ let str: string = value + '';
+ if (str[0] === '0' && option && option.format === '###.00') {
+ str = str.slice(1);
+ }
+ return str;
+ }
+
+ /**
+ * Processes integer part ensuring minimum digit count.
+ *
+ * @param {string} value ?
+ * @param {number} min ?
+ * @returns {string} ?
+ */
+ function processMinimumIntegers(value: string, min: number): string {
+ const temp: string[] = value.split('.');
+ let lead: string = temp[0];
+ const len: number = lead.length;
+ if (len < min) {
+ for (let i: number = 0; i < min - len; i++) {
+ lead = '0' + lead;
+ }
+ temp[0] = lead;
+ }
+ return temp.join('.');
+ }
+
+ /**
+ * Formats for pivot tables specifically.
+ *
+ * @param {number} value ?
+ * @returns {string} ?
+ */
+ function customPivotFormat(value: number): string {
+ if (value >= 500000) {
+ value /= 1000000;
+ const decimal: string | undefined = value.toString().split('.')[1];
+ return decimal && +decimal.substring(0, 1) >= 5
+ ? Math.ceil(value).toString()
+ : Math.floor(value).toString();
+ }
+ return '';
+ }
+
+ return {
+ getGroupingDetails,
+ numberFormatter
+ };
+})();
diff --git a/components/base/src/intl/number-parser.tsx b/components/base/src/intl/number-parser.tsx
new file mode 100644
index 0000000..102dcd6
--- /dev/null
+++ b/components/base/src/intl/number-parser.tsx
@@ -0,0 +1,162 @@
+import { NumberFormatOptions } from '../internationalization';
+import { extend, isNullOrUndefined } from '../util';
+import { ParserBase as parser, NumericOptions } from './parser-base';
+import { IntlBase as base, NegativeData, Dependables } from './intl-base';
+
+const regExp: RegExpConstructor = RegExp;
+const parseRegex: RegExp = new regExp('^([^0-9]*)' + '(([0-9,]*[0-9]+)(.[0-9]+)?)' + '([Ee][+-]?[0-9]+)?([^0-9]*)$');
+const groupRegex: RegExp = /,/g;
+
+const keys: string[] = ['minusSign', 'infinity'];
+
+/**
+ * Interface for Numeric Formatting Parts
+ */
+export interface NumericParts {
+ symbolRegex?: RegExp;
+ nData?: NegativeData;
+ pData?: NegativeData;
+ infinity?: string;
+ type?: string;
+ fractionDigits?: number;
+ isAccount?: boolean;
+ custom?: boolean;
+ maximumFractionDigits?: number;
+}
+
+/**
+ * Interface for numeric parse options
+ */
+export interface NumberParseOptions {
+ parseRegex: string;
+ numbericMatcher: Object;
+}
+
+/**
+ * Interface defining the properties and methods of the useNumberParser hook.
+ */
+export interface INumberParser {
+ numberParser: (culture: string, option: NumberFormatOptions, cldr: Object) => (value: string) => number;
+}
+
+/**
+ * Custom function to parse numbers according to specified format and culture.
+ */
+export const NumberParser: INumberParser = (() => {
+ /**
+ * Parses a number string based on the given options and CLDR data.
+ *
+ * @param {string} culture - Specifies the culture name to be used for formatting.
+ * @param {NumberFormatOptions} option - Specifies the format options.
+ * @param {Object} cldr - Specifies the global CLDR data collection.
+ * @returns {Function} - Returns a function to parse the given string to a number.
+ */
+ function numberParser(culture: string, option: NumberFormatOptions, cldr: Object): ((value: string) => number) {
+ const dependable: Dependables = base.getDependables(cldr, culture, '', true);
+ const parseOptions: NumericParts = { custom: true };
+ if ((base.formatRegex.test(option.format)) || !(option.format)) {
+ extend(parseOptions, base.getProperNumericSkeleton(option.format || 'N'));
+ parseOptions.custom = false;
+ if (!parseOptions.fractionDigits) {
+ if (option.maximumFractionDigits) {
+ parseOptions.maximumFractionDigits = option.maximumFractionDigits;
+ }
+ }
+ } else {
+ extend(parseOptions, base.customFormat(option.format, null, null));
+ }
+ const numOptions: NumericOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), true);
+ parseOptions.symbolRegex = parser.getSymbolRegex(Object.keys(numOptions.symbolMatch));
+ parseOptions.infinity = (numOptions).symbolNumberSystem[keys[1]];
+ let symbolpattern: string;
+ symbolpattern = base.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount);
+ if (symbolpattern) {
+ symbolpattern = symbolpattern.replace(/\u00A4/g, base.defaultCurrency);
+ const split: string[] = symbolpattern.split(';');
+ parseOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, '');
+ parseOptions.pData = base.getFormatData(split[0], true, '');
+ }
+ return (value: string): number => {
+ return getParsedNumber(value, parseOptions, numOptions);
+ };
+ }
+ /**
+ * Returns parsed number for the provided formatting options.
+ *
+ * @param {string} value - The string value to be converted to number.
+ * @param {NumericParts} options - The numeric parts required for parsing.
+ * @param {NumericOptions} numOptions - Options for numeric conversion.
+ * @returns {number} - The parsed numeric value.
+ */
+ function getParsedNumber(value: string, options: NumericParts, numOptions: NumericOptions): number {
+ let isNegative: boolean;
+ let isPercent: boolean;
+ let tempValue: string;
+ let lead: string;
+ let end: string;
+ let ret: number;
+
+ if (value.indexOf(options.infinity) !== -1) {
+ return Infinity;
+ } else {
+ value = parser.convertValueParts(value, options.symbolRegex, numOptions.symbolMatch);
+ value = parser.convertValueParts(value, numOptions.numberParseRegex, numOptions.numericPair);
+ value = value.indexOf('-') !== -1 ? value.replace('-.', '-0.') : value;
+ if (value.indexOf('.') === 0) {
+ value = '0' + value;
+ }
+ const matches: string[] = value.match(parseRegex);
+ if (isNullOrUndefined(matches)) {
+ return NaN;
+ }
+ lead = matches[1];
+ tempValue = matches[2];
+ const exponent: string = matches[5];
+ end = matches[6];
+ isNegative = options.custom ? (lead === options.nData.nlead && end === options.nData.nend) :
+ (lead.indexOf(options.nData.nlead) !== -1 && end.indexOf(options.nData.nend) !== -1);
+ isPercent = isNegative ? options.nData.isPercent : options.pData.isPercent;
+ tempValue = tempValue.replace(groupRegex, '');
+ if (exponent) {
+ tempValue += exponent;
+ }
+ ret = +tempValue;
+ if (options.type === 'percent' || isPercent) {
+ ret = ret / 100;
+ }
+ if (options.custom || options.fractionDigits) {
+ ret = parseFloat(ret.toFixed(options.custom ?
+ (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.fractionDigits));
+ }
+ if (options.maximumFractionDigits) {
+ ret = convertMaxFracDigits(tempValue, options, ret, isNegative);
+ }
+ if (isNegative) {
+ ret *= -1;
+ }
+ return ret;
+ }
+ }
+
+ /**
+ * Adjusts the number according to the maximum fraction digits allowed.
+ *
+ * @param {string} value - The string value of the number before parsing.
+ * @param {NumericParts} options - Parsing options with numeric parts.
+ * @param {number} ret - The current numeric value.
+ * @param {boolean} isNegative - Flag if the number is negative.
+ * @returns {number} - The processed number with appropriate fraction digits.
+ */
+ function convertMaxFracDigits(value: string, options: NumericParts, ret: number, isNegative: boolean): number {
+ const decimalSplitValue: string[] = value.split('.');
+ if (decimalSplitValue[1] && decimalSplitValue[1].length > options.maximumFractionDigits) {
+ ret = +(ret.toFixed(options.custom ?
+ (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.maximumFractionDigits));
+ }
+ return ret;
+ }
+
+ return {
+ numberParser
+ };
+})();
diff --git a/components/base/src/intl/parser-base.tsx b/components/base/src/intl/parser-base.tsx
new file mode 100644
index 0000000..3713172
--- /dev/null
+++ b/components/base/src/intl/parser-base.tsx
@@ -0,0 +1,330 @@
+import { isUndefined, getValue } from '../util';
+
+/**
+ * Default numbering system for Latin script.
+ */
+const defaultNumberingSystem: { [key: string]: object } = {
+ 'latn': {
+ '_digits': '0123456789',
+ '_type': 'numeric'
+ }
+};
+
+/**
+ * Default symbols used in numbers representation.
+ */
+const defaultNumberSymbols: { [key: string]: string } = {
+ 'decimal': '.',
+ 'group': ',',
+ 'percentSign': '%',
+ 'plusSign': '+',
+ 'minusSign': '-',
+ 'infinity': '∞',
+ 'nan': 'NaN',
+ 'exponential': 'E'
+};
+
+/**
+ * Latin number system representation as array.
+ */
+const latnNumberSystem: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+/**
+ * Interface for numeric Options.
+ */
+export interface NumericOptions {
+ numericPair?: Object;
+ numericRegex?: string;
+ numberParseRegex?: RegExp;
+ symbolNumberSystem?: Object;
+ symbolMatch?: Object;
+ numberSystem?: string;
+}
+
+/**
+ * Interface for numeric object holding numbers system data.
+ */
+export interface NumericObject {
+ obj?: Object;
+ nSystem?: string;
+}
+
+/**
+ * Interface for number mapper holding mapping of symbols and digits.
+ */
+export interface NumberMapper {
+ mapper?: Object;
+ timeSeparator?: string;
+ numberSymbols?: Object;
+ numberSystem?: string;
+}
+
+/**
+ * Interface for the public and protected properties and methods in useParserBase custom object.
+ */
+export interface IParserBase {
+ nPair?: string;
+ nRegex?: string;
+ numberingSystems?: Object;
+ /**
+ * Returns the cldr object for the culture specified.
+ *
+ * @private
+ * @param {Object} obj - Specifies the object from which culture object to be acquired.
+ * @param {string} cName - Specifies the culture name.
+ * @returns {Object}
+ */
+ getMainObject?(obj: Object, cName: string): Object;
+ /**
+ * Returns the numbering system object from given cldr data.
+ *
+ * @private
+ * @param {Object} obj - Specifies the object from which number system is acquired.
+ * @returns {Object}
+ */
+ getNumberingSystem?(obj: Object): Object;
+ /**
+ * Returns the reverse of given object keys or keys specified.
+ *
+ * @private
+ * @param {Object} prop - Specifies the object to be reversed.
+ * @param {number[]} [keys] - Optional parameter specifies the custom keyList for reversal.
+ * @returns {Object}
+ */
+ reverseObject?(prop: Object, keys?: number[]): Object;
+ /**
+ * Returns the symbol regex by skipping the escape sequence.
+ *
+ * @private
+ * @param {string[]} props - Specifies the array values to be skipped.
+ * @returns {RegExp}
+ */
+ getSymbolRegex?(props: string[]): RegExp;
+ /**
+ * Returns default numbering system object for formatting from cldr data.
+ *
+ * @private
+ * @param {Object} obj
+ * @returns {NumericObject}
+ */
+ getDefaultNumberingSystem?(obj: Object): NumericObject;
+ /**
+ * Returns the replaced value of matching regex and obj mapper.
+ *
+ * @private
+ * @param {string} value - Specifies the values to be replaced.
+ * @param {RegExp} regex - Specifies the regex to search.
+ * @param {Object} obj - Specifies the object matcher to be replace value parts.
+ * @returns {string}
+ */
+ convertValueParts?(value: string, regex: RegExp, obj: Object): string;
+ /**
+ * Returns the replaced value of matching regex and obj mapper.
+ *
+ * @private
+ * @param {Object} curObj
+ * @param {Object} numberSystem
+ * @param {boolean} [needSymbols]
+ * @returns {NumericOptions}
+ */
+ getCurrentNumericOptions?(curObj: Object, numberSystem: Object, needSymbols?: boolean): NumericOptions;
+ /**
+ * Returns number mapper object for the provided cldr data.
+ *
+ * @private
+ * @param {Object} curObj
+ * @param {Object} numberSystem
+ * @param {boolean} [isNumber]
+ * @returns {NumberMapper}
+ */
+ getNumberMapper?(curObj: Object, numberSystem: Object, isNumber?: boolean): NumberMapper;
+}
+
+/**
+ * Class for handling the Parser Base functionalities.
+ */
+export const ParserBase: IParserBase = (() => {
+
+ const props: IParserBase = {
+ nPair: 'numericPair',
+ nRegex: 'numericRegex',
+ numberingSystems: defaultNumberingSystem
+ };
+
+ /**
+ * Returns the cldr object for the culture specified.
+ *
+ * @param {Object} obj - Specifies the object from which culture object to be acquired.
+ * @param {string} cName - Specifies the culture name.
+ * @returns {Object} ?
+ */
+ props.getMainObject = (obj: Object, cName: string): Object => {
+ const value: string = 'main.' + cName;
+ return getValue(value, obj);
+ };
+
+ /**
+ * Returns the numbering system object from given cldr data.
+ *
+ * @param {Object} obj - Specifies the object from which number system is acquired.
+ * @returns {Object} ?
+ */
+ props.getNumberingSystem = (obj: Object): Object => {
+ return getValue('supplemental.numberingSystems', obj) || props.numberingSystems;
+ };
+
+ /**
+ * Returns the reverse of given object keys or keys specified.
+ *
+ * @param {Object} prop - Specifies the object to be reversed.
+ * @param {number[]} [keys] - Optional parameter specifies the custom keyList for reversal.
+ * @returns {Object} ?
+ */
+ props.reverseObject = (prop: Object, keys?: number[]): Object => {
+ const propKeys: string[] | number[] = keys || Object.keys(prop);
+ const res: Object = {};
+ for (const key of propKeys) {
+ if (!Object.prototype.hasOwnProperty.call(res, (prop)[`${key}`])) {
+ (res)[(prop)[`${key}`]] = key;
+ }
+ }
+ return res;
+ };
+
+ /**
+ * Returns the symbol regex by skipping the escape sequence.
+ *
+ * @param {string[]} props - Specifies the array values to be skipped.
+ * @returns {RegExp} ?
+ */
+ props.getSymbolRegex = (props: string[]): RegExp => {
+ const regexStr: string = props.map((str: string): string => {
+ return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
+ }).join('|');
+ const regExp: RegExpConstructor = RegExp;
+ return new regExp(regexStr, 'g');
+ };
+
+ /**
+ * Returns default numbering system object for formatting from cldr data.
+ *
+ * @param {Object} obj ?
+ * @returns {NumericObject} ?
+ */
+ function getDefaultNumberingSystem(obj: Object): NumericObject {
+ const ret: NumericObject = {};
+ ret.obj = getValue('numbers', obj);
+ ret.nSystem = getValue('defaultNumberingSystem', ret.obj);
+ return ret;
+ }
+
+ /**
+ * Returns the replaced value of matching regex and obj mapper.
+ *
+ * @param {string} value - Specifies the values to be replaced.
+ * @param {RegExp} regex - Specifies the regex to search.
+ * @param {Object} obj - Specifies the object matcher to be replace value parts.
+ * @returns {string} ?
+ */
+ props.convertValueParts = (value: string, regex: RegExp, obj: Object): string => {
+ return value.replace(regex, (str: string): string => {
+ return (obj)[`${str}`];
+ });
+ };
+
+ /**
+ * Returns the replaced value of matching regex and obj mapper.
+ *
+ * @param {Object} curObj ?
+ * @param {Object} numberSystem ?
+ * @param {boolean} [needSymbols] ?
+ * @returns {NumericOptions} ?
+ */
+ props.getCurrentNumericOptions = (
+ curObj: Object,
+ numberSystem: Object,
+ needSymbols?: boolean
+ ): NumericOptions => {
+ const ret: NumericOptions = {};
+ const cur: NumericObject = getDefaultNumberingSystem(curObj);
+ if (!isUndefined(cur.nSystem)) {
+ const digits: string = getValue(cur.nSystem + '._digits', numberSystem);
+ if (!isUndefined(digits)) {
+ ret.numericPair = props.reverseObject(digits, latnNumberSystem);
+ const regExp: RegExpConstructor = RegExp;
+ ret.numberParseRegex = new regExp(constructRegex(digits), 'g');
+ ret.numericRegex = '[' + digits[0] + '-' + digits[9] + ']';
+ if (needSymbols) {
+ ret.numericRegex = digits[0] + '-' + digits[9];
+ ret.symbolNumberSystem = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj
+ );
+ ret.symbolMatch = getSymbolMatch(ret.symbolNumberSystem);
+ ret.numberSystem = cur.nSystem;
+ }
+ }
+ }
+ return ret;
+ };
+
+ /**
+ * Returns number mapper object for the provided cldr data.
+ *
+ * @param {Object} curObj ?
+ * @param {Object} numberSystem ?
+ * @returns {NumberMapper} ?
+ */
+ props.getNumberMapper = (
+ curObj: Object,
+ numberSystem: Object
+ ): NumberMapper => {
+ const ret: NumberMapper = { mapper: {} };
+ const cur: NumericObject = getDefaultNumberingSystem(curObj);
+ if (!isUndefined(cur.nSystem)) {
+ ret.numberSystem = cur.nSystem;
+ ret.numberSymbols = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj);
+ ret.timeSeparator = getValue('timeSeparator', ret.numberSymbols);
+ const digits: string = getValue(cur.nSystem + '._digits', numberSystem);
+ if (!isUndefined(digits)) {
+ for (const i of latnNumberSystem) {
+ ret.mapper[parseInt(i.toString(), 10)] = digits[parseInt(i.toString(), 10)];
+ }
+ }
+ }
+ return ret;
+ };
+
+ /**
+ * Returns the symbol match for the provided object.
+ *
+ * @param {Object} prop ?
+ * @returns {Object} ?
+ */
+ function getSymbolMatch(prop: Object): Object {
+ const matchKeys: string[] = Object.keys(defaultNumberSymbols);
+ const ret: Object = {};
+ for (const key of matchKeys) {
+ (ret)[(prop)[`${key}`]] = (defaultNumberSymbols)[`${key}`];
+ }
+ return ret;
+ }
+
+ /**
+ * Constructs a regex string for the provided value.
+ *
+ * @param {string} val ?
+ * @returns {string} ?
+ */
+ function constructRegex(val: string): string {
+ const len: number = val.length;
+ let ret: string = '';
+ for (let i: number = 0; i < len; i++) {
+ ret += val[parseInt(i.toString(), 10)];
+ if (i !== len - 1) {
+ ret += '|';
+ }
+ }
+ return ret;
+ }
+
+ return props;
+})();
diff --git a/components/base/src/l10n.tsx b/components/base/src/l10n.tsx
new file mode 100644
index 0000000..51449a3
--- /dev/null
+++ b/components/base/src/l10n.tsx
@@ -0,0 +1,92 @@
+import { extend, isNullOrUndefined } from './util';
+import { defaultCulture } from './internationalization';
+
+/**
+ * L10n modules provides localized text for different culture.
+ */
+export interface IL10n {
+ /**
+ * Sets the locale text.
+ *
+ * @param {string} locale
+ * @returns {void}
+ */
+ setLocale(locale: string): void;
+
+ /**
+ * Returns current locale text for the property based on the culture name and control name.
+ *
+ * @param {string} prop - Specifies the property for which localize text to be returned.
+ * @returns {string}
+ */
+ getConstant(prop: string): string;
+}
+
+/**
+ * L10n modules provides localized text for different culture.
+ *
+ * @param {string} controlName - name of the control.
+ * @param {object} localeStrings - collection of locale string.
+ * @param {string} locale - default locale string.
+ * @returns {L10n} - Returns configured properties and methods for localization.
+ */
+export function L10n(controlName: string, localeStrings: Object, locale?: string): IL10n {
+ let currentLocale: object = {};
+
+ /**
+ * Sets the locale text.
+ *
+ * @param {string} locale - Specifies the locale to be set.
+ * @returns {void}
+ */
+ function setLocale(locale: string): void {
+ const intLocale: Object = intGetControlConstant(L10n.locale, locale);
+ currentLocale = intLocale || localeStrings;
+ }
+ /**
+ * Returns current locale text for the property based on the culture name and control name.
+ *
+ * @param {string} prop - Specifies the property for which localized text to be returned.
+ * @returns {string} ?
+ */
+ function getConstant(prop: string): string {
+ if (!isNullOrUndefined(currentLocale[`${prop}`])) {
+ return currentLocale[`${prop}`];
+ } else {
+ return localeStrings[`${prop}`] || '';
+ }
+ }
+
+ /**
+ * Returns the control constant object for current object and the locale specified.
+ *
+ * @param {Object} curObject ?
+ * @param {string} locale ?
+ * @returns {Object} ?
+ */
+ function intGetControlConstant(curObject: Object, locale: string): Object {
+ if (curObject[`${locale}`]) {
+ return curObject[`${locale}`][`${controlName}`];
+ }
+ return null;
+ }
+
+ setLocale(locale || defaultCulture);
+
+ return {
+ setLocale,
+ getConstant
+ };
+}
+
+L10n.locale = {} as object;
+
+/**
+ * Sets the global locale for all components.
+ *
+ * @param {Object} localeObject - Specifies the localeObject to be set as global locale.
+ * @returns {void}
+ */
+L10n.load = (localeObject: Object): void => {
+ L10n.locale = extend(L10n.locale, localeObject, {}, true);
+};
diff --git a/components/base/src/observer.tsx b/components/base/src/observer.tsx
new file mode 100644
index 0000000..ffc0ed5
--- /dev/null
+++ b/components/base/src/observer.tsx
@@ -0,0 +1,187 @@
+import { isNullOrUndefined, getValue } from './util';
+
+/**
+ * Interface for the bound options used in the observer.
+ */
+export interface BoundOptions {
+ handler?: Function;
+ context?: Object;
+ event?: string;
+ id?: string;
+}
+
+export interface IObserver {
+ isJson: (value: string) => boolean;
+ ranArray: string[];
+ boundedEvents: { [key: string]: BoundOptions[] };
+ on: (property: string, handler: Function, context?: object, id?: string) => void;
+ off: (property: string, handler?: Function, id?: string) => void;
+ notify: (property: string, argument?: Object, successHandler?: Function, errorHandler?: Function) => void | Object;
+ destroy: () => void;
+}
+
+/**
+ * Observer is used to perform event handling based the object.
+ *
+ * @returns {IObserver} Returns an Observer instance for event handling
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Observer: any = () => {
+ let ranArray: string[] = [];
+ const boundedEvents: { [key: string]: BoundOptions[] } = {};
+
+ /**
+ * Attach handler for given property in current context.
+ *
+ * @param {string} property - specifies the name of the event.
+ * @param {Function} handler - Specifies the handler function to be called while event notified.
+ * @param {Object} context - Specifies the context binded to the handler.
+ * @param {string} id - specifies the random generated id.
+ * @returns {void}
+ */
+ function on(property: string, handler: Function, context?: Object, id?: string): void {
+ if (isNullOrUndefined(handler)) {
+ return;
+ }
+ const cntxt: Object = context || {};
+ if (notExist(property)) {
+ boundedEvents[`${property}`] = [{ handler, context: cntxt, id }];
+ } else if (id && !ranArray.includes(id)) {
+ ranArray.push(id);
+ boundedEvents[`${property}`].push({ handler, context: cntxt, id });
+ } else if (!boundedEvents[`${property}`].some((event: BoundOptions) => event.handler === handler)) {
+ boundedEvents[`${property}`].push({ handler, context: cntxt });
+ }
+ }
+
+ /**
+ * To remove handlers from a event attached using on() function.
+ *
+ * @param {string} property - specifies the name of the event.
+ * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.
+ * @param {string} id - specifies the random generated id.
+ * @returns {void}
+ */
+ function off(property: string, handler?: Function, id?: string): void {
+ if (notExist(property)) {
+ return;
+ }
+ const curObject: BoundOptions[] = getValue(property, boundedEvents);
+ if (handler) {
+ for (let i: number = 0; i < curObject.length; i++) {
+ const currentEvent: BoundOptions = curObject[parseInt(i.toString(), 10)];
+ if (id && currentEvent.id === id) {
+ curObject.splice(i, 1);
+ ranArray = ranArray.filter((item: string) => item !== id);
+ break;
+ } else if (handler === currentEvent.handler) {
+ curObject.splice(i, 1);
+ break;
+ }
+ }
+ } else {
+ delete boundedEvents[`${property}`];
+ }
+ }
+
+ /**
+ * To notify the handlers in the specified event.
+ *
+ * @param {string} property - Specifies the event to be notify.
+ * @param {Object} argument - Additional parameters to pass while calling the handler.
+ * @param {Function} successHandler - this function will invoke after event successfully triggered
+ * @param {Function} errorHandler - this function will invoke after event if it was failure to call.
+ * @returns {void} ?
+ */
+ function notify(property: string, argument?: Object, successHandler?: Function, errorHandler?: Function): void {
+ if (notExist(property)) {
+ if (successHandler) {
+ successHandler(argument);
+ }
+ return;
+ }
+ if (argument) {
+ argument = { ...argument, name: property };
+ }
+ const curObject: BoundOptions[] = getValue(property, boundedEvents).slice(0);
+ for (const cur of curObject) {
+ try {
+ cur.handler(argument);
+ } catch (error) {
+ if (errorHandler) {
+ errorHandler(error);
+ }
+ }
+ }
+ if (successHandler) {
+ successHandler(argument);
+ }
+ }
+
+ /**
+ * Checks if a string value is valid JSON.
+ *
+ * @param {string} value - The string to check if it's valid JSON
+ * @returns {boolean} Returns true if the string is valid JSON, false otherwise
+ */
+ function isJson(value: string): boolean {
+ try {
+ JSON.parse(value);
+ } catch (e) {
+ return false;
+ }
+ return true;
+ }
+ /**
+ * To destroy handlers in the event
+ *
+ * @returns {void} ?
+ */
+ function destroy(): void {
+ Object.keys(boundedEvents).forEach((key: string) => {
+ delete boundedEvents[`${key}`];
+ });
+ ranArray = [];
+ }
+ /**
+ * To remove internationalization events
+ *
+ * @returns {void} ?
+ */
+ function offIntlEvents(): void {
+ const eventsArr: BoundOptions[] = boundedEvents['notifyExternalChange'];
+ if (eventsArr) {
+ for (let i: number = 0; i < eventsArr.length; i++) {
+ const curEvent: BoundOptions = eventsArr[parseInt(i.toString(), 10)];
+ const curContext: object = curEvent.context;
+ if (curContext && curContext['detectFunction'] && curContext['randomId'] && curContext['isReactMock']) {
+ off('notifyExternalChange', curEvent.handler, curContext['randomId']);
+ i--;
+ }
+ }
+ if (!boundedEvents['notifyExternalChange'].length) {
+ delete boundedEvents['notifyExternalChange'];
+ }
+ }
+ }
+ /**
+ * Returns if the property exists.
+ *
+ * @param {string} prop ?
+ * @returns {boolean} ?
+ */
+ function notExist(prop: string): boolean {
+ return !boundedEvents[`${prop}`] || boundedEvents[`${prop}`].length === 0;
+ }
+
+ return {
+ isJson,
+ on,
+ off,
+ notify,
+ destroy,
+ ranArray,
+ boundedEvents,
+ offIntlEvents
+ };
+};
diff --git a/components/base/src/provider.tsx b/components/base/src/provider.tsx
new file mode 100644
index 0000000..1474a6d
--- /dev/null
+++ b/components/base/src/provider.tsx
@@ -0,0 +1,59 @@
+import { createContext, useContext, ReactNode } from 'react';
+
+// Define the shape of the context
+interface ProviderContextProps {
+ locale: string;
+ dir: string;
+ ripple: boolean;
+}
+
+// Create context with default empty fallback
+const ProviderContext: React.Context = createContext({locale: 'en-US', dir: 'ltr', ripple: false});
+
+/**
+ * Props for the Provider context.
+ */
+export interface ProviderProps {
+ /**
+ * Child components that will be wrapped by the Provider.
+ */
+ children: ReactNode;
+ /**
+ * Overrides the global culture and localization settings for the component.
+ *
+ * @default 'en-US'
+ */
+ locale?: string;
+ /**
+ * Specifies the component’s rendering direction, with ltr for left-to-right and rtl for right-to-left direction.
+ *
+ * @default 'ltr'
+ */
+ dir?: string;
+ /**
+ * Enable or disable the ripple effect for supported components.
+ *
+ * @default false
+ */
+ ripple?: boolean;
+}
+
+// The Locale provider component
+export const Provider: React.FC = (props: ProviderProps) => {
+ const { children, locale = 'en-US', dir = 'ltr', ripple = false } = props;
+ return (
+
+ {children}
+
+ );
+};
+
+/**
+ * Custom hook to consume locale context.
+ *
+ * @private
+ * @returns {ProviderContextProps} - The locale context value.
+ */
+export function useProviderContext(): ProviderContextProps {
+ return useContext(ProviderContext);
+}
diff --git a/components/base/src/ripple.tsx b/components/base/src/ripple.tsx
new file mode 100644
index 0000000..fc18e13
--- /dev/null
+++ b/components/base/src/ripple.tsx
@@ -0,0 +1,315 @@
+import { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
+
+/**
+ * Configuration options for the ripple effect behavior.
+ */
+export interface RippleOptions {
+ /**
+ * The duration of the ripple animation in milliseconds.
+ *
+ * @default 350
+ */
+ duration?: number;
+
+ /**
+ * Whether the ripple should start from the center of the element instead of the click position.
+ *
+ * @default false
+ */
+ isCenterRipple?: boolean;
+
+ /**
+ * CSS selector for elements that should not trigger a ripple effect when clicked.
+ *
+ * @default null
+ */
+ ignore?: string | null;
+
+ /**
+ * CSS selector to identify which parent element should receive the ripple when a child is clicked.
+ *
+ * @default null
+ */
+ selector?: string | null;
+}
+
+/**
+ * Interface for the ripple effect handlers and component.
+ */
+export interface RippleEffect {
+ /**
+ * Handler for the mouse down event to start the ripple effect.
+ *
+ * @param {MouseEvent} e - The mouse down event.
+ */
+ rippleMouseDown: (e: React.MouseEvent) => void;
+
+ /**
+ * React component that renders the actual ripple elements.
+ */
+ Ripple: React.FC;
+}
+
+/**
+ * Props for an individual ripple item.
+ *
+ * @private
+ */
+interface RippleProps {
+ /**
+ * The x-coordinate position of the ripple relative to its container.
+ */
+ x: number;
+
+ /**
+ * The y-coordinate position of the ripple relative to its container.
+ */
+ y: number;
+
+ /**
+ * The size of the ripple, either in pixels or percentage.
+ */
+ size: string;
+
+ /**
+ * The duration of the ripple animation in milliseconds.
+ */
+ duration: number;
+
+ /**
+ * Whether the ripple is centered within its container.
+ */
+ isCenterRipple: boolean;
+
+ /**
+ * Callback function triggered when the animation is complete.
+ */
+ onAnimationComplete: () => void;
+}
+
+/**
+ * Interface representing the data structure for a single ripple effect.
+ *
+ * @private
+ */
+interface RippleItem {
+ id: string | number;
+ x: number;
+ y: number;
+ size: number | string;
+ duration: number;
+ isCenterRipple: boolean;
+}
+
+/**
+ * Interface representing the data structure RippleContainerRef.
+ *
+ * @private
+ */
+interface RippleContainerRef {
+ createRipple: (x: number, y: number, size: number, duration: number, isCenterRipple: boolean) => void;
+}
+
+declare type Timeout = ReturnType;
+
+// Individual ripple component
+export const RippleElement: React.FC = ({
+ x,
+ y,
+ size,
+ duration,
+ onAnimationComplete
+}: RippleProps) => {
+ const rippleRef: React.RefObject = useRef(null);
+ useEffect(() => {
+ const ripple: HTMLDivElement | null = rippleRef.current;
+ if (!ripple) {
+ return undefined;
+ }
+ void ripple.offsetWidth;
+ ripple.style.transform = 'scale(1)';
+ const fadeTimer: Timeout = setTimeout(() => {
+ if (ripple){
+ ripple.style.opacity = '0';
+ }
+ }, duration / 2);
+ const cleanupTimer: Timeout = setTimeout(() => {
+ if (ripple) {
+ ripple.style.opacity = '0';
+ ripple.style.visibility = 'hidden';
+ }
+ if (onAnimationComplete){
+ onAnimationComplete();
+ }
+ }, duration);
+ return () => {
+ clearTimeout(fadeTimer);
+ clearTimeout(cleanupTimer);
+ };
+ }, [duration, onAnimationComplete]);
+ return (
+
+ );
+};
+
+export const RippleContainer: React.ForwardRefExoticComponent<{ maxRipples?: number } & React.RefAttributes
+> = forwardRef((props: { maxRipples?: number }, ref: React.ForwardedRef) => {
+ const { maxRipples = 2 } = props;
+ const containerRef: React.RefObject = useRef(null);
+ const [ripples, setRipples] = useState([]);
+ const nextIdRef: React.RefObject = useRef(0);
+ const createRipple: (x: number, y: number, size: number, duration: number, isCenterRipple: boolean) => void =
+ useCallback((x: number, y: number, size: number, duration: number, isCenterRipple: boolean) => {
+ const id: number = nextIdRef.current++;
+ setRipples((prevRipples: RippleItem[]) => {
+ if (prevRipples.length >= maxRipples) {
+ return [
+ ...prevRipples.slice(prevRipples.length - maxRipples + 1),
+ { id, x, y, size, duration, isCenterRipple }
+ ];
+ }
+ return [
+ ...prevRipples,
+ { id, x, y, size, duration, isCenterRipple }
+ ];
+ });
+ }, [maxRipples]);
+
+ const removeRipple: (id: string | number) => void = useCallback((id: string | number) => {
+ setRipples((prevRipples: RippleItem[]) => prevRipples.filter((r: RippleItem) => r.id !== id));
+ }, []);
+
+ useImperativeHandle(ref, () => ({
+ createRipple
+ }));
+
+ return (
+
+ {ripples.map((ripple: RippleItem) => (
+ removeRipple(ripple.id)}
+ />
+ ))}
+
+ );
+});
+
+const closestParent: (element: HTMLElement, selector: string | null) => HTMLElement | null =
+(element: HTMLElement, selector: string | null): HTMLElement | null => {
+ if (!selector)
+ {
+ return null;
+ }
+ let el: HTMLElement = element;
+ while (el) {
+ if (el.matches && el.matches(selector)) {
+ return el;
+ }
+ el = el.parentElement as HTMLElement;
+ if (!el)
+ {
+ break;
+ }
+ }
+ return null;
+};
+
+/**
+ * useRippleEffect function provides wave effect when an element is clicked.
+ *
+ * @param {boolean} isEnabled - Whether the ripple effect is enabled.
+ * @param {RippleOptions} options - Optional configuration for the ripple effect.
+ * @returns {RippleEffect} - Ripple effect controller object.
+ */
+export function useRippleEffect(isEnabled: boolean, options?: RippleOptions): RippleEffect {
+ const rippleRef: React.RefObject = useRef(null);
+ const defaultOptions: RippleOptions = {
+ duration: 350,
+ isCenterRipple: false,
+ ignore: null,
+ selector: null,
+ ...options
+ };
+ const maxRipples: number = 2;
+ const ignoreRipple: (target: HTMLElement) => boolean = useCallback((target: HTMLElement): boolean => {
+ if (!isEnabled || closestParent(target, defaultOptions.ignore || '')) {
+ return true;
+ }
+ return false;
+ }, [isEnabled, defaultOptions.ignore]);
+
+ const createRipple: (e: React.MouseEvent) => void = useCallback((e: React.MouseEvent) => {
+ if (!isEnabled || !rippleRef.current)
+ {
+ return;
+ }
+ let target: HTMLElement = e.currentTarget;
+ if (defaultOptions.selector) {
+ const matchedTarget: Element | null = closestParent(target, defaultOptions.selector);
+ if (!matchedTarget){
+ return;
+ }
+ target = matchedTarget as HTMLElement; }
+
+ if (ignoreRipple(target))
+ {
+ return;
+ }
+ const rect: DOMRect = target.getBoundingClientRect();
+ const offsetX: number = e.pageX - window.pageXOffset;
+ const offsetY: number = e.pageY - window.pageYOffset;
+ let rippleX: number;
+ let rippleY: number;
+ let rippleSize: number;
+ if (defaultOptions.isCenterRipple) {
+ rippleX = rect.width / 2;
+ rippleY = rect.height / 2;
+ rippleSize = Math.max(rect.width, rect.height);
+ } else {
+ rippleX = offsetX - rect.left;
+ rippleY = offsetY - rect.top;
+ const sizeX: number = Math.max(Math.abs(rect.width - rippleX), rippleX) * 2;
+ const sizeY: number = Math.max(Math.abs(rect.height - rippleY), rippleY) * 2;
+ rippleSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY);
+ }
+ rippleRef.current.createRipple(
+ rippleX,
+ rippleY,
+ rippleSize,
+ defaultOptions.duration || 350,
+ defaultOptions.isCenterRipple || false
+ );
+ }, [isEnabled, defaultOptions, ignoreRipple]);
+
+ const Ripple: () => React.ReactNode = useCallback(() => (
+
+ ), []);
+
+ return {
+ rippleMouseDown: createRipple,
+ Ripple
+ };
+}
diff --git a/components/base/src/sanitize-helper.tsx b/components/base/src/sanitize-helper.tsx
new file mode 100644
index 0000000..688ea8d
--- /dev/null
+++ b/components/base/src/sanitize-helper.tsx
@@ -0,0 +1,299 @@
+import { detach } from './dom';
+import { isNullOrUndefined } from './util';
+
+/**
+ * Interface for the request to sanitize HTML.
+ */
+interface BeforeSanitizeHtml {
+ /** Illustrates whether the current action needs to be prevented or not. */
+ cancel?: boolean;
+ /** It is a callback function and executed it before our inbuilt action. It should return HTML as a string.
+ *
+ * @function
+ * @param {string} value - Returns the value.
+ * @returns {string}
+ */
+ /** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack.
+ * Also possible to modify the block list in this event.
+ */
+ selectors?: SanitizeSelectors;
+}
+
+interface SanitizeSelectors {
+ /** Returns the tags. */
+ tags?: string[];
+ /** Returns the attributes. */
+ attributes?: SanitizeRemoveAttrs[];
+}
+
+interface SanitizeRemoveAttrs {
+ /** Defines the attribute name to sanitize */
+ attribute?: string;
+ /** Defines the selector that sanitize the specified attributes within the selector */
+ selector?: string;
+}
+
+
+interface ISanitize {
+ /** Array of attributes to remove during sanitization */
+ removeAttrs: SanitizeRemoveAttrs[]
+ /** Array of HTML tags to remove during sanitization */
+ removeTags: string[]
+ /** Element to wrap the sanitized content */
+ wrapElement: Element
+ /** Callback function executed before sanitization begins */
+ beforeSanitize: () => BeforeSanitizeHtml
+ /** Custom sanitization function */
+ sanitize: (value: string) => string
+ /** Function to serialize the sanitized value */
+ serializeValue: (item: BeforeSanitizeHtml, value: string) => string
+}
+
+const removeTags: string[] = [
+ 'script',
+ 'style',
+ 'iframe[src]',
+ 'link[href*="javascript:"]',
+ 'object[type="text/x-scriptlet"]',
+ 'object[data^="data:text/html;base64"]',
+ 'img[src^="data:text/html;base64"]',
+ '[src^="javascript:"]',
+ '[dynsrc^="javascript:"]',
+ '[lowsrc^="javascript:"]',
+ '[type^="application/x-shockwave-flash"]'
+];
+
+const removeAttrs: SanitizeRemoveAttrs[] = [
+ { attribute: 'href', selector: '[href*="javascript:"]' },
+ { attribute: 'href', selector: 'a[href]' },
+ { attribute: 'background', selector: '[background^="javascript:"]' },
+ { attribute: 'style', selector: '[style*="javascript:"]' },
+ { attribute: 'style', selector: '[style*="expression("]' },
+ { attribute: 'href', selector: 'a[href^="data:text/html;base64"]' }
+];
+
+const jsEvents: string[] = ['onchange',
+ 'onclick',
+ 'onmouseover',
+ 'onmouseout',
+ 'onkeydown',
+ 'onload',
+ 'onerror',
+ 'onblur',
+ 'onfocus',
+ 'onbeforeload',
+ 'onbeforeunload',
+ 'onkeyup',
+ 'onsubmit',
+ 'onafterprint',
+ 'onbeforeonload',
+ 'onbeforeprint',
+ 'oncanplay',
+ 'oncanplaythrough',
+ 'oncontextmenu',
+ 'ondblclick',
+ 'ondrag',
+ 'ondragend',
+ 'ondragenter',
+ 'ondragleave',
+ 'ondragover',
+ 'ondragstart',
+ 'ondrop',
+ 'ondurationchange',
+ 'onemptied',
+ 'onended',
+ 'onformchange',
+ 'onforminput',
+ 'onhaschange',
+ 'oninput',
+ 'oninvalid',
+ 'onkeypress',
+ 'onloadeddata',
+ 'onloadedmetadata',
+ 'onloadstart',
+ 'onmessage',
+ 'onmousedown',
+ 'onmousemove',
+ 'onmouseup',
+ 'onmousewheel',
+ 'onoffline',
+ 'onoine',
+ 'ononline',
+ 'onpagehide',
+ 'onpageshow',
+ 'onpause',
+ 'onplay',
+ 'onplaying',
+ 'onpopstate',
+ 'onprogress',
+ 'onratechange',
+ 'onreadystatechange',
+ 'onredo',
+ 'onresize',
+ 'onscroll',
+ 'onseeked',
+ 'onseeking',
+ 'onselect',
+ 'onstalled',
+ 'onstorage',
+ 'onsuspend',
+ 'ontimeupdate',
+ 'onundo',
+ 'onunload',
+ 'onvolumechange',
+ 'onwaiting',
+ 'onmouseenter',
+ 'onmouseleave',
+ 'onstart',
+ 'onpropertychange',
+ 'oncopy',
+ 'ontoggle',
+ 'onpointerout',
+ 'onpointermove',
+ 'onpointerleave',
+ 'onpointerenter',
+ 'onpointerrawupdate',
+ 'onpointerover',
+ 'onbeforecopy',
+ 'onbeforecut',
+ 'onbeforeinput'
+];
+
+/**
+ * Custom hook for sanitizing HTML.
+ *
+ * @private
+ * @returns An object with methods for sanitizing strings and working with HTML sanitation.
+ */
+export const SanitizeHtmlHelper: ISanitize = (() => {
+ const props: ISanitize = {
+ removeAttrs: [] as SanitizeRemoveAttrs[],
+ removeTags: [] as string[],
+ wrapElement: null as Element,
+ beforeSanitize: null as (() => BeforeSanitizeHtml) | null,
+ sanitize: null as ((value: string) => string) | null,
+ serializeValue: null as ((item: BeforeSanitizeHtml, value: string) => string) | null
+ };
+
+ /**
+ * Configures settings before sanitizing HTML.
+ *
+ * @returns {BeforeSanitizeHtml} An object containing selectors.
+ */
+ props.beforeSanitize = (): BeforeSanitizeHtml => ({
+ selectors: {
+ tags: removeTags,
+ attributes: removeAttrs
+ }
+ });
+
+ /**
+ * Sanitizes the provided HTML string.
+ *
+ * @param {string} value - The HTML string to be sanitized.
+ * @returns {string} The sanitized HTML string.
+ */
+ props.sanitize = (value: string): string => {
+ if (isNullOrUndefined(value)) {
+ return value;
+ }
+ const item: BeforeSanitizeHtml = props.beforeSanitize();
+ return props.serializeValue(item, value);
+ };
+
+ /**
+ * Serializes and sanitizes the given HTML value based on the provided item configuration.
+ *
+ * @param {BeforeSanitizeHtml} item - The item configuration for sanitization.
+ * @param {string} value - The HTML string to be serialized and sanitized.
+ * @returns {string} The sanitized HTML string.
+ */
+ props.serializeValue = (item: BeforeSanitizeHtml, value: string): string => {
+ props.removeAttrs = item.selectors.attributes;
+ props.removeTags = item.selectors.tags;
+ props.wrapElement = document.createElement('div');
+ props.wrapElement.innerHTML = value;
+ removeXssTags();
+ removeJsEvents();
+ removeXssAttrs();
+ const sanitizedValue: string = props.wrapElement.innerHTML;
+ removeElement();
+ props.wrapElement = null;
+ return sanitizedValue.replace(/&/g, '&');
+ };
+
+ /**
+ * Removes potentially harmful element attributes.
+ *
+ * @returns {void}
+ */
+ function removeElement(): void {
+ if (props.wrapElement) {
+ // Removes an element's attibute to avoid html tag validation
+ const nodes: HTMLCollection = props.wrapElement.children;
+ for (let j: number = 0; j < nodes.length; j++) {
+ const attribute: NamedNodeMap = nodes[parseInt(j.toString(), 10)].attributes;
+ for (let i: number = 0; i < attribute.length; i++) {
+ nodes[parseInt(j.toString(), 10)].removeAttribute(attribute[parseInt(i.toString(), 10)].localName);
+ }
+ }
+ }
+ }
+
+ /**
+ * Removes potentially harmful tags to prevent XSS attacks.
+ *
+ * @returns {void}
+ */
+ function removeXssTags(): void {
+ if (props.wrapElement) {
+ const elements: NodeListOf = props.wrapElement.querySelectorAll(props.removeTags.join(','));
+ elements.forEach((element: Element) => {
+ detach(element);
+ });
+ }
+ }
+
+ /**
+ * Removes JavaScript event attributes to prevent XSS attacks.
+ *
+ * @returns {void}
+ */
+ function removeJsEvents(): void {
+ if (props.wrapElement) {
+ const elements: NodeListOf = props.wrapElement.querySelectorAll('[' + jsEvents.join('],[') + ']');
+ elements.forEach((element: Element) => {
+ jsEvents.forEach((attr: string) => {
+ if (element.hasAttribute(attr)) {
+ element.removeAttribute(attr);
+ }
+ });
+ });
+ }
+ }
+
+ /**
+ * Removes attributes based on configured selectors to prevent XSS attacks.
+ *
+ * @returns {void}
+ */
+ function removeXssAttrs(): void {
+ if (props.wrapElement) {
+ props.removeAttrs.forEach((item: SanitizeRemoveAttrs) => {
+ const elements: NodeListOf = props.wrapElement.querySelectorAll(item.selector);
+ elements.forEach((element: Element) => {
+ if (item.selector === 'a[href]') {
+ const attrValue: string = element.getAttribute(item.attribute || '');
+ if (attrValue && attrValue.replace(/\t|\s|&/, '').includes('javascript:alert')) {
+ element.removeAttribute(item.attribute || '');
+ }
+ } else {
+ element.removeAttribute(item.attribute || '');
+ }
+ });
+ });
+ }
+ }
+
+ return props;
+})();
diff --git a/components/base/src/svg-icon.tsx b/components/base/src/svg-icon.tsx
new file mode 100644
index 0000000..d29dce9
--- /dev/null
+++ b/components/base/src/svg-icon.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+export interface IconProps {
+ /**
+ * Specifies the path data for the SVG icon.
+ *
+ * @default ''
+ */
+ d?: string;
+
+ /**
+ * Specifies the path fill color of the SVG icon.
+ *
+ * @default ''
+ */
+ fill?: string;
+
+ /**
+ * Specifies the height of the SVG icon.
+ *
+ * @default '16'
+ */
+ height?: string;
+
+ /**
+ * Specifies the viewBox of the SVG icon.
+ *
+ * @default '0 0 24 24'
+ */
+ viewBox?: string;
+
+ /**
+ * Specifies the width of the SVG icon.
+ *
+ * @default '16'
+ */
+ width?: string;
+}
+
+type SvgProps = IconProps & HTMLAttributes;
+
+/**
+ * The SVG component displays SVG icons with a given height, width, and viewBox.
+ *
+ * @private
+ * @param {SvgProps} props - The props of the component.
+ * @returns {void} Returns the SVG element.
+ */
+export const SvgIcon: React.FC = ((props: SvgProps) => {
+ const {
+ height = '16',
+ viewBox = '0 0 24 24',
+ width = '16',
+ fill,
+ d = '',
+ ...restProps
+ } = props;
+
+ return (
+
+
+
+ );
+});
+
+export default SvgIcon;
diff --git a/components/base/src/touch.tsx b/components/base/src/touch.tsx
new file mode 100644
index 0000000..9fda926
--- /dev/null
+++ b/components/base/src/touch.tsx
@@ -0,0 +1,535 @@
+import { useLayoutEffect, RefObject, MouseEvent } from 'react';
+import { extend } from './util';
+import { Browser } from './browser';
+import { EventHandler, BaseEventArgs } from './event-handler';
+import { Base, IBase } from './base';
+
+/**
+ * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc..,
+ */
+export interface SwipeSettings {
+ /**
+ * Property specifies minimum distance of swipe moved.
+ *
+ * @default 50
+ */
+ swipeThresholdDistance?: number;
+}
+
+const swipeRegex: RegExp = /(Up|Down)/;
+
+/**
+ * Interface defining the touch handling props.
+ */
+export interface ITouch extends IBase {
+ /**
+ * Specifies the callback function for tap event.
+ */
+ tap?: (args: TapEventArgs) => void;
+
+ /**
+ * Specifies the callback function for tapHold event.
+ */
+ tapHold?: (args: TapEventArgs) => void;
+
+ /**
+ * Specifies the callback function for swipe event.
+ */
+ swipe?: (args: SwipeEventArgs) => void;
+
+ /**
+ * Specifies the callback function for scroll event.
+ */
+ scroll?: (args: ScrollEventArgs) => void;
+
+ /**
+ * Specifies the time delay for tap.
+ *
+ * @default 350
+ */
+ tapThreshold?: number;
+
+ /**
+ * Specifies the time delay for tap hold.
+ *
+ * @default 750
+ */
+ tapHoldThreshold?: number;
+
+ /**
+ * Customize the swipe event configuration.
+ *
+ * @default '{swipeThresholdDistance: 50}'
+ */
+ swipeSettings?: SwipeSettings;
+}
+
+/**
+ * Custom hook to handle touch events such as tap, double tap, swipe, etc.
+ *
+ * @private
+ * @param {RefObject} element Target HTML element for touch events
+ * @param {Touch} props props to customize touch behavior
+ * @returns {Touch} The Touch object
+ */
+export function Touch(element: RefObject, props?: ITouch): ITouch {
+ const baseRef: IBase = Base();
+ const propsRef: ITouch = { ...props };
+ //Internal Variables
+ let isTouchMoved: boolean = false;
+ let startPoint: Points = { clientX: 0, clientY: 0 };
+ let startEventData: MouseEventArgs | TouchEventArgs = null;
+ let lastMovedPoint: Points = { clientX: 0, clientY: 0 };
+ let scrollDirection: string = '';
+ let hScrollLocked: boolean = false;
+ let vScrollLocked: boolean = false;
+ let defaultArgs: TapEventArgs = { originalEvent: null };
+ let distanceX: number = 0;
+ let distanceY: number = 0;
+ let movedDirection: string = '';
+ let tStampStart: number = 0;
+ let touchAction: boolean = true;
+ let timeOutTap: ReturnType | null = null;
+ let timeOutTapHold: ReturnType | null = null;
+ let tapCount: number = 0;
+
+ useLayoutEffect(() => {
+ bind();
+ return () => {
+ unwireEvents();
+ baseRef.destroy();
+ };
+ }, []);
+
+ /**
+ * Binds the touch event handlers to the target element.
+ * Calls internal methods to setup required bindings and adds necessary class for IE browser.
+ *
+ * @returns {void}
+ */
+ function bind(): void {
+ if (element.current) {
+ wireEvents();
+ if (Browser.isIE) { element.current.classList.add('sf-block-touch'); }
+ }
+ }
+
+ /**
+ * Attaches event listeners for start, move, end, and cancel touch events to the target element.
+ *
+ * @returns {void}
+ */
+ function wireEvents(): void {
+ EventHandler.add(element.current, Browser.touchStartEvent, startEvent, undefined);
+ }
+
+ /**
+ * Detaches event listeners for start, move, end, and cancel touch events to the target element.
+ *
+ * @returns {void}
+ */
+ function unwireEvents(): void {
+ EventHandler.remove(element.current, Browser.touchStartEvent, startEvent);
+ }
+
+ /**
+ * Returns if the HTML element is scrollable by inspecting its overflow properties.
+ *
+ * @param {HTMLElement} element - The HTML element to be checked.
+ * @returns {boolean} True if the element is scrollable, false otherwise.
+ */
+ function isScrollable(element: HTMLElement): boolean {
+ const eleStyle: CSSStyleDeclaration = getComputedStyle(element);
+ const style: string = eleStyle.overflow + eleStyle.overflowX + eleStyle.overflowY;
+ return (/(auto|scroll)/).test(style);
+ }
+
+ /**
+ * Handler for the touch start event. Initializes touch action tracking and
+ * attaches additional event listeners for move, end, and cancel actions.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch start action.
+ * @returns {void}
+ */
+ function startEvent(evt: MouseEventArgs | TouchEventArgs): void {
+ if (touchAction === true) {
+ const point: MouseEventArgs | TouchEventArgs = updateChangeTouches(evt);
+ if (evt.changedTouches !== undefined) {
+ touchAction = false;
+ }
+ isTouchMoved = false;
+ movedDirection = '';
+ startPoint = lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };
+ startEventData = point;
+ hScrollLocked = vScrollLocked = false;
+ tStampStart = Date.now();
+ timeOutTapHold = setTimeout(() => { tapHoldEvent(evt); }, propsRef.tapHoldThreshold ? propsRef.tapHoldThreshold : 750);
+ EventHandler.add(element.current, Browser.touchMoveEvent, moveEvent, undefined);
+ EventHandler.add(element.current, Browser.touchEndEvent, endEvent, undefined);
+ EventHandler.add(element.current, Browser.touchCancelEvent, cancelEvent, undefined);
+ }
+ }
+
+ /**
+ * Handler for the touch move event. Updates movement tracking and triggers the scroll event if a scroll action is detected.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch move action.
+ * @returns {void}
+ */
+ function moveEvent(evt: MouseEventArgs | TouchEventArgs): void {
+ const point: MouseEventArgs | TouchEventArgs = updateChangeTouches(evt);
+ isTouchMoved = !(point.clientX === startPoint.clientX && point.clientY === startPoint.clientY);
+ let eScrollArgs: ScrollEventArgs = {};
+ if (isTouchMoved) {
+ clearTimeout(timeOutTapHold);
+ calcScrollPoints(evt);
+ const scrollArg: ScrollEventArgs = {
+ startEvents: startEventData,
+ originalEvent: evt,
+ startX: startPoint.clientX,
+ startY: startPoint.clientY,
+ distanceX: distanceX,
+ distanceY: distanceY,
+ scrollDirection: scrollDirection,
+ velocity: getVelocity(point)
+ };
+ eScrollArgs = extend(eScrollArgs, {}, scrollArg);
+ baseRef.trigger('scroll', eScrollArgs, propsRef.scroll);
+ lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };
+ }
+ }
+
+ /**
+ * Handler for the touch cancel event. Clears timeouts and triggers necessary cleanup.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch cancel action.
+ * @returns {void}
+ */
+ function cancelEvent(evt: MouseEventArgs | TouchEventArgs): void {
+ clearTimeout(timeOutTapHold);
+ clearTimeout(timeOutTap);
+ tapCount = 0;
+ swipeFn(evt);
+ EventHandler.remove(element.current, Browser.touchCancelEvent, cancelEvent);
+ }
+
+ /**
+ * Triggers when a tap hold is detected.
+ * Invokes the tap hold callback and removes additional event listeners.
+ *
+ * @param {MouseEvent | TouchEventArgs} evt - The event object from the tap hold action.
+ * @returns {void}
+ */
+ function tapHoldEvent(evt: MouseEventArgs | TouchEventArgs): void {
+ tapCount = 0;
+ touchAction = true;
+ EventHandler.remove(element.current, Browser.touchMoveEvent, moveEvent);
+ EventHandler.remove(element.current, Browser.touchEndEvent, endEvent);
+ const eTapArgs: TapEventArgs = { originalEvent: evt };
+ baseRef.trigger('tapHold', eTapArgs, propsRef.tapHold);
+ EventHandler.remove(element.current, Browser.touchCancelEvent, cancelEvent);
+ }
+
+ /**
+ * Handler for the touch end event. Determines if a tap or swipe occurred and triggers the respective callbacks.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch end action.
+ * @returns {void}
+ */
+ function endEvent(evt: MouseEventArgs | TouchEventArgs): void {
+ swipeFn(evt);
+ if (!isTouchMoved) {
+ if (typeof propsRef.tap === 'function') {
+ baseRef.trigger('tap', { originalEvent: evt, tapCount: ++tapCount }, propsRef.tap);
+ timeOutTap = setTimeout(() => {
+ tapCount = 0;
+ }, propsRef.tapThreshold ? propsRef.tapThreshold : 350);
+ }
+ }
+ modeclear();
+ }
+
+ /**
+ * Determines if a swipe occurred and triggers the swipe event callback.
+ * Computes swipe direction, distance, and velocity.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the swipe action.
+ * @returns {void}
+ */
+ function swipeFn(evt: MouseEventArgs | TouchEventArgs): void {
+ clearTimeout(timeOutTapHold);
+ clearTimeout(timeOutTap);
+ const point: MouseEventArgs | TouchEventArgs = updateChangeTouches(evt);
+ let diffX: number = point.clientX - startPoint.clientX;
+ let diffY: number = point.clientY - startPoint.clientY;
+ diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX);
+ diffY = Math.floor(diffY < 0 ? -1 * diffY : diffY);
+ isTouchMoved = diffX > 1 || diffY > 1;
+ const isFirefox: boolean = (/Firefox/).test(Browser.userAgent);
+ if (isFirefox && point.clientX === 0 && point.clientY === 0 && evt.type === 'mouseup') {
+ isTouchMoved = false;
+ }
+ calcPoints(evt);
+ const swipeArgs: SwipeEventArgs = {
+ originalEvent: evt,
+ startEvents: startEventData,
+ startX: startPoint.clientX,
+ startY: startPoint.clientY,
+ distanceX: distanceX,
+ distanceY: distanceY,
+ swipeDirection: movedDirection,
+ velocity: getVelocity(point)
+ };
+ if (isTouchMoved) {
+ const tDistance: number = propsRef.swipeSettings ? propsRef.swipeSettings.swipeThresholdDistance : 50;
+ const eSwipeArgs: object = extend(undefined, defaultArgs, swipeArgs);
+ let canTrigger: boolean = false;
+ const scrollBool: boolean = isScrollable(element.current);
+ const moved: boolean = swipeRegex.test(movedDirection);
+ if (tDistance && ((tDistance < distanceX && !moved) || (tDistance < distanceY && moved))) {
+ if (!scrollBool) {
+ canTrigger = true;
+ } else {
+ canTrigger = checkSwipe(element.current, moved);
+ }
+ }
+ if (canTrigger) {
+ baseRef.trigger('swipe', eSwipeArgs, propsRef.swipe);
+ }
+ }
+ modeclear();
+ }
+
+ /**
+ * Clears or resets various states and timeouts after a touch action completes.
+ * Ensures the touch action can be re-triggered properly.
+ *
+ * @returns {void}
+ */
+ function modeclear(): void {
+ setTimeout(() => {
+ touchAction = true;
+ }, typeof propsRef.tap !== 'function' ? 0 : 20);
+ EventHandler.remove(element.current, Browser.touchMoveEvent, moveEvent);
+ EventHandler.remove(element.current, Browser.touchEndEvent, endEvent);
+ EventHandler.remove(element.current, Browser.touchCancelEvent, cancelEvent);
+ }
+
+ /**
+ * Calculates the distance and direction of the touch points during a swipe.
+ * Sets the moved direction based on the calculated points' differences.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the movement action.
+ * @returns {void}
+ */
+ function calcPoints(evt: MouseEventArgs | TouchEventArgs): void {
+ const point: MouseEventArgs | TouchEventArgs = updateChangeTouches(evt);
+ defaultArgs = { originalEvent: evt };
+ distanceX = Math.abs(Math.abs(point.clientX) - Math.abs(startPoint.clientX));
+ distanceY = Math.abs(Math.abs(point.clientY) - Math.abs(startPoint.clientY));
+ movedDirection = distanceX > distanceY
+ ? (point.clientX > startPoint.clientX ? 'Right' : 'Left')
+ : (point.clientY < startPoint.clientY ? 'Up' : 'Down');
+ }
+
+ /**
+ * Calculates the scrolling distance and direction when a scroll action is detected.
+ * Determines which direction the scroll is locked, updating the scroll direction accordingly.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the scroll action.
+ * @returns {void}
+ */
+ function calcScrollPoints(evt: MouseEventArgs | TouchEventArgs): void {
+ const point: MouseEventArgs | TouchEventArgs = updateChangeTouches(evt);
+ defaultArgs = { originalEvent: evt };
+ distanceX = Math.abs(Math.abs(point.clientX) - Math.abs(lastMovedPoint.clientX));
+ distanceY = Math.abs(Math.abs(point.clientY) - Math.abs(lastMovedPoint.clientY));
+ if ((distanceX > distanceY || hScrollLocked) && !vScrollLocked) {
+ scrollDirection = point.clientX > lastMovedPoint.clientX ? 'Right' : 'Left';
+ hScrollLocked = true;
+ } else {
+ scrollDirection = point.clientY < lastMovedPoint.clientY ? 'Up' : 'Down';
+ vScrollLocked = true;
+ }
+ }
+
+ /**
+ * Calculates the velocity of the swipe or scroll action based on the distance moved and time taken.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} pnt - The point from which velocity is calculated.
+ * @returns {number} The calculated velocity of the touch action.
+ */
+ function getVelocity(pnt: MouseEventArgs | TouchEventArgs): number {
+ const newX: number = pnt.clientX;
+ const newY: number = pnt.clientY;
+ const newT: number = Date.now();
+ const xDist: number = newX - startPoint.clientX;
+ const yDist: number = newY - startPoint.clientY;
+ const interval: number = newT - tStampStart;
+ return Math.sqrt(xDist * xDist + yDist * yDist) / interval;
+ }
+
+ /**
+ * Determines if a swipe action should be triggered based on the element's scrollable status and direction of movement.
+ *
+ * @param {HTMLElement} ele - The element to check for swipe triggering.
+ * @param {boolean} flag - Indicates the swipe direction (horizontal or vertical).
+ * @returns {boolean} True if the swipe can be triggered, false otherwise.
+ */
+ function checkSwipe(ele: HTMLElement, flag: boolean): boolean {
+ const keys: string[] = ['scroll', 'offset'];
+ const temp: string[] = flag ? ['Height', 'Top'] : ['Width', 'Left'];
+ if (ele[keys[0] + temp[0]] <= ele[keys[1] + temp[0]]) {
+ return true;
+ }
+ return (
+ ele[keys[0] + temp[1]] === 0 ||
+ ele[keys[1] + temp[0]] + ele[keys[0] + temp[1]] >= ele[keys[0] + temp[0]]
+ );
+ }
+
+ /**
+ * Updates and returns the primary touch point from the event, used in various calculations.
+ *
+ * @param {MouseEventArgs | TouchEventArgs} evt - The event object from which to extract the touch point.
+ * @returns {MouseEventArgs | TouchEventArgs} The updated point from the touch event.
+ */
+ function updateChangeTouches(evt: MouseEventArgs | TouchEventArgs): MouseEventArgs | TouchEventArgs {
+ return evt.changedTouches && evt.changedTouches.length !== 0 ? evt.changedTouches[0] : evt;
+ }
+
+ return propsRef;
+}
+
+interface Points {
+ clientX: number;
+ clientY: number;
+}
+
+/**
+ * The argument type of `Tap` Event
+ */
+export interface TapEventArgs extends BaseEventArgs {
+ /**
+ * Original native event Object.
+ */
+ originalEvent: TouchEventArgs | MouseEventArgs;
+ /**
+ * Tap Count.
+ */
+ tapCount?: number;
+}
+
+/**
+ * The argument type of `Scroll` Event
+ */
+export interface ScrollEventArgs extends BaseEventArgs {
+ /**
+ * Event argument for start event.
+ */
+ startEvents?: TouchEventArgs | MouseEventArgs;
+ /**
+ * Original native event object for scroll.
+ */
+ originalEvent?: TouchEventArgs | MouseEventArgs;
+ /**
+ * X position when scroll started.
+ */
+ startX?: number;
+ /**
+ * Y position when scroll started.
+ */
+ startY?: number;
+ /**
+ * The direction scroll.
+ */
+ scrollDirection?: string;
+ /**
+ * The total traveled distance from X position
+ */
+ distanceX?: number;
+ /**
+ * The total traveled distance from Y position
+ */
+ distanceY?: number;
+ /**
+ * The velocity of scroll.
+ */
+ velocity?: number;
+}
+
+/**
+ * The argument type of `Swipe` Event
+ */
+export interface SwipeEventArgs extends BaseEventArgs {
+ /**
+ * Event argument for start event.
+ */
+ startEvents?: TouchEventArgs | MouseEventArgs;
+ /**
+ * Original native event object for swipe.
+ */
+ originalEvent?: TouchEventArgs | MouseEventArgs;
+ /**
+ * X position when swipe started.
+ */
+ startX?: number;
+ /**
+ * Y position when swipe started.
+ */
+ startY?: number;
+ /**
+ * The direction swipe.
+ */
+ swipeDirection?: string;
+ /**
+ * The total traveled distance from X position
+ */
+ distanceX?: number;
+ /**
+ * The total traveled distance from Y position
+ */
+ distanceY?: number;
+ /**
+ * The velocity of swipe.
+ */
+ velocity?: number;
+}
+
+export interface TouchEventArgs extends MouseEvent {
+ /**
+ * A TouchList with touched points.
+ */
+ changedTouches: MouseEventArgs[] | TouchEventArgs[];
+ /**
+ * Cancel the default action.
+ */
+ preventDefault(): void;
+ /**
+ * The horizontal coordinate point of client area.
+ */
+ clientX: number;
+ /**
+ * The vertical coordinate point of client area.
+ */
+ clientY: number;
+}
+
+export interface MouseEventArgs extends MouseEvent {
+ /**
+ * A TouchList with touched points.
+ */
+ changedTouches: MouseEventArgs[] | TouchEventArgs[];
+ /**
+ * Cancel the default action.
+ */
+ preventDefault(): void;
+ /**
+ * The horizontal coordinate point of client area.
+ */
+ clientX: number;
+ /**
+ * The vertical coordinate point of client area.
+ */
+ clientY: number;
+}
diff --git a/components/base/src/util.tsx b/components/base/src/util.tsx
new file mode 100644
index 0000000..ea8a0be
--- /dev/null
+++ b/components/base/src/util.tsx
@@ -0,0 +1,418 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Common utility methods
+ *
+ * @private
+ */
+interface IKeyValue extends CSSStyleDeclaration {
+ [key: string]: any;
+}
+
+declare let window: {
+ msCrypto: Crypto;
+} & Window;
+let uid: number = 0;
+
+/**
+ * Create Instance from constructor function with desired parameters.
+ *
+ * @param {Function} classFunction - Class function to which need to create instance
+ * @param {any[]} params - Parameters need to passed while creating instance
+ * @returns {any} ?
+ * @private
+ */
+export function createInstance(classFunction: Function, params: any[]): any {
+ const arrayParam: Object[] = params;
+ arrayParam.unshift(undefined);
+ return Function.prototype.bind.apply(classFunction, arrayParam);
+}
+
+/**
+ * To run a callback function immediately after the browser has completed other operations.
+ *
+ * @param {Function} handler - callback function to be triggered.
+ * @returns {Function} ?
+ * @private
+ */
+export function setImmediate(handler: Function): Function {
+ let unbind: Function;
+ const num: any = new Uint16Array(5);
+ const intCrypto: Crypto = window.msCrypto || window.crypto;
+ intCrypto.getRandomValues(num);
+ let secret: string = 'syn' + combineArray(num);
+ let messageHandler: Function = (event: any): void => {
+ if (event.source === window && typeof event.data === 'string' && event.data.length <= 32 && event.data === secret) {
+ handler();
+ unbind();
+ }
+ };
+ window.addEventListener('message', messageHandler as EventListener, false);
+ window.postMessage(secret, '*');
+ return unbind = () => {
+ window.removeEventListener('message', messageHandler as EventListener);
+ handler = messageHandler = secret = undefined;
+ };
+}
+
+/**
+ * To get nameSpace value from the desired object.
+ *
+ * @param {string} nameSpace - String value to the get the inner object
+ * @param {any} obj - Object to get the inner object value.
+ * @returns {any} ?
+ * @private
+ */
+export function getValue(nameSpace: string, obj: any): any {
+ let value: any = obj;
+ const splits: string[] = !isNullOrUndefined(nameSpace) ? nameSpace.replace(/\[/g, '.').replace(/\]/g, '').split('.') : [];
+ for (let i: number = 0; i < splits.length && !isNullOrUndefined(value); i++) {
+ value = value[splits[parseInt(i.toString(), 10)]];
+ }
+ return value;
+}
+
+/**
+ * To set value for the nameSpace in desired object.
+ *
+ * @param {string} nameSpace - String value to the get the inner object
+ * @param {any} value - Value that you need to set.
+ * @param {any} obj - Object to get the inner object value.
+ * @returns {any} ?
+ * @private
+ */
+export function setValue(nameSpace: string, value: any, obj: any): any {
+ const keys: string[] = nameSpace.replace(/\[/g, '.').replace(/\]/g, '').split('.');
+ const start: any = obj || {};
+ let fromObj: any = start;
+ let i: number;
+ const length: number = keys.length;
+ let key: string;
+
+ for (i = 0; i < length; i++) {
+ key = keys[parseInt(i.toString(), 10)];
+
+ if (i + 1 === length) {
+ fromObj[`${key}`] = value === undefined ? {} : value;
+ } else if (isNullOrUndefined(fromObj[`${key}`])) {
+ fromObj[`${key}`] = {};
+ }
+
+ fromObj = fromObj[`${key}`];
+ }
+
+ return start;
+}
+
+/**
+ * Delete an item from Object
+ *
+ * @param {any} obj - Object in which we need to delete an item.
+ * @param {string} key - String value to the get the inner object
+ * @returns {void} ?
+ * @private
+ */
+export function deleteObject(obj: any, key: string): void {
+ delete obj[`${key}`];
+}
+
+/**
+ *@private
+ */
+export const containerObject: any = typeof window !== 'undefined' ? window : {};
+
+/**
+ * Check weather the given argument is only object.
+ *
+ * @param {any} obj - Object which is need to check.
+ * @returns {boolean} ?
+ * @private
+ */
+export function isObject(obj: any): boolean {
+ const objCon: {} = {};
+ return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);
+}
+
+/**
+ * To get enum value by giving the string.
+ *
+ * @param {any} enumObject - Enum object.
+ * @param {string} enumValue - Enum value to be searched
+ * @returns {any} ?
+ * @private
+ */
+export function getEnumValue(enumObject: any, enumValue: string | number): any {
+ return (enumObject[`${enumValue}`]);
+}
+
+/**
+ * Merge the source object into destination object.
+ *
+ * @param {any} source - source object which is going to merge with destination object
+ * @param {any} destination - object need to be merged
+ * @returns {void} ?
+ * @private
+ */
+export function merge(source: Object, destination: Object): void {
+ if (!isNullOrUndefined(destination)) {
+ const temrObj: IKeyValue = source as IKeyValue;
+ const tempProp: IKeyValue = destination as IKeyValue;
+ const keys: string[] = Object.keys(destination);
+ const deepmerge: string = 'deepMerge';
+ for (const key of keys) {
+ if (!isNullOrUndefined(temrObj[`${deepmerge}`]) && (temrObj[`${deepmerge}`].indexOf(key) !== -1) &&
+ (isObject(tempProp[`${key}`]) || Array.isArray(tempProp[`${key}`]))) {
+ extend(temrObj[`${key}`], temrObj[`${key}`], tempProp[`${key}`], true);
+ } else {
+ temrObj[`${key}`] = tempProp[`${key}`];
+ }
+ }
+ }
+}
+
+/**
+ * Extend the two object with newer one.
+ *
+ * @param {any} copied - Resultant object after merged
+ * @param {Object} first - First object need to merge
+ * @param {Object} second - Second object need to merge
+ * @param {boolean} deep ?
+ * @returns {Object} ?
+ * @private
+ */
+export function extend(copied: Object, first: Object, second?: Object, deep?: boolean): Object {
+ const result: IKeyValue = copied && typeof copied === 'object' ? copied as IKeyValue : {} as IKeyValue;
+ let length: number = arguments.length;
+ const args: Object = [copied, first, second, deep];
+ if (deep) {
+ length = length - 1;
+ }
+ for (let i: number = 1; i < length; i++) {
+ if (!args[parseInt(i.toString(), 10)]) {
+ continue;
+ }
+ const obj1: { [key: string]: Object } = args[parseInt(i.toString(), 10)];
+ Object.keys(obj1).forEach((key: string) => {
+ const src: Object = result[`${key}`];
+ const copy: Object = obj1[`${key}`];
+ let clone: Object;
+ if (deep && (isObject(copy) || Array.isArray(copy))) {
+ if (isObject(copy)) {
+ clone = src ? src : {};
+ if (Array.isArray(clone) && Object.prototype.hasOwnProperty.call(clone, 'isComplexArray')) {
+ extend(clone, {}, copy, deep);
+ } else {
+ result[`${key}`] = extend(clone, {}, copy, deep);
+ }
+ } else {
+ clone = src ? src : [];
+ result[`${key}`] = extend([], clone, copy, (clone && (clone as any).length) || (copy && (copy as any).length));
+ }
+ } else {
+ result[`${key}`] = copy;
+ }
+ });
+ }
+ return result;
+}
+
+/**
+ * To check whether the object is null or undefined.
+ *
+ * @param {any} value - To check the object is null or undefined
+ * @returns {boolean} ?
+ * @private
+ */
+export function isNullOrUndefined(value: T): boolean {
+ return value === undefined || value === null;
+}
+
+/**
+ * To check whether the object is undefined.
+ *
+ * @param {any} value - To check the object is undefined
+ * @returns {boolean} ?
+ * @private
+ */
+export function isUndefined(value: T): boolean {
+ return typeof value === 'undefined';
+}
+
+/**
+ * To return the generated unique name
+ *
+ * @param {string} definedName - To concatenate the unique id to provided name
+ * @returns {string} ?
+ * @private
+ */
+export function getUniqueID(definedName?: string): string {
+ return definedName ? `${definedName}_${uid++}` : `unique_${uid++}`;
+}
+
+/**
+ * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly.
+ *
+ * @param {Function} eventFunction - Specifies the function to run when the event occurs
+ * @param {number} delay - A number that specifies the milliseconds for function delay call option
+ * @returns {Function} ?
+ * @private
+ */
+export function debounce(eventFunction: Function, delay: number): Function {
+ let timerId: NodeJS.Timeout;
+ return function (...args: any[]): void {
+ clearTimeout(timerId);
+ timerId = setTimeout(() => {
+ eventFunction.apply(this, args);
+ }, delay);
+ };
+}
+
+/**
+ * To convert the object to string for query url
+ *
+ * @param {Object} data ?
+ * @returns {string} ?
+ * @private
+ */
+export function queryParams(data: any): string {
+ return Object.keys(data)
+ .map((key: string) => `${encodeURIComponent(key)}=${encodeURIComponent(data[`${key}`])}`)
+ .join('&');
+}
+
+/**
+ * To check whether the given array contains object.
+ *
+ * @param {any} value - Specifies the T type array to be checked.
+ * @returns {boolean} ?
+ * @private
+ */
+export function isObjectArray(value: T[]): boolean {
+ return Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' && value[0] !== null;
+}
+
+/**
+ * To check whether the child element is descendant to parent element or parent and child are same element.
+ *
+ * @param {Element} child - Specifies the child element to compare with parent.
+ * @param {Element} parent - Specifies the parent element.
+ * @returns {boolean} ?
+ * @private
+ */
+export function compareElementParent(child: Element, parent: Element): boolean {
+ let node: Node = child;
+
+ while (node !== null && node !== document) {
+ if (node === parent) {
+ return true;
+ }
+ node = node.parentNode as Node;
+ }
+ return false;
+}
+
+/**
+ * To throw custom error message.
+ *
+ * @param {string} message - Specifies the error message to be thrown.
+ * @returns {void} ?
+ * @private
+ */
+export function throwError(message: string): void {
+ try {
+ throw new Error(message);
+ } catch (e) {
+ throw new Error(e.message + '\n' + e.stack);
+ }
+}
+
+/**
+ * This function is used to print given element
+ *
+ * @param {Element} element - Specifies the print content element.
+ * @param {Window} printWindow - Specifies the print window.
+ * @returns {Window | null} ?
+ * @private
+ */
+export function print(element: Element, printWindow?: Window | null): Window | null {
+ if (typeof window === 'undefined') {
+ return null;
+ }
+ const div: Element = document.createElement('div');
+ const links: HTMLElement[] = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('base, link, style'));
+ const blinks: HTMLElement[] = [].slice.call(document.getElementsByTagName('body')[0].querySelectorAll('link, style'));
+ if (blinks.length) {
+ for (let l: number = 0, len: number = blinks.length; l < len; l++) {
+ links.push(blinks[parseInt(l.toString(), 10)]);
+ }
+ }
+ let reference: string = '';
+ if (!printWindow) {
+ printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');
+ }
+ if (!printWindow) {
+ throw new Error('Unable to open print window');
+ }
+ div.appendChild(element.cloneNode(true) as Element);
+ for (let i: number = 0, len: number = links.length; i < len; i++) {
+ reference += links[parseInt(i.toString(), 10)].outerHTML;
+ }
+ printWindow.document.write(' ' + reference + '' + div.innerHTML +
+ '' + '');
+ printWindow.document.close();
+ printWindow.focus();
+ const interval: any = setInterval(
+ () => {
+ if ((printWindow as any).ready) {
+ printWindow.print();
+ printWindow.close();
+ clearInterval(interval);
+ }
+ },
+ 500
+ );
+ return printWindow;
+}
+
+/**
+ * Function to normalize the units applied to the element.
+ *
+ * @param {number|string} value ?
+ * @returns {string} result
+ * @private
+ */
+export function formatUnit(value: number | string): string {
+ const result: string = (value as string) + '';
+ if (result.match(/auto|cm|mm|in|px|pt|pc|%|em|ex|ch|rem|vw|vh|vmin|vmax/)) {
+ return result;
+ }
+ return result + 'px';
+}
+
+/**
+ * Function to generate the unique id.
+ *
+ * @returns {any} ?
+ * @private
+ */
+export function uniqueID(): any {
+ if ((typeof window) === 'undefined') {
+ return;
+ }
+ const num: any = new Uint16Array(5);
+ const intCrypto: Crypto = window.msCrypto || window.crypto;
+ return intCrypto.getRandomValues(num);
+}
+
+/**
+ * Combines the first five elements of an Int16Array into a comma-separated string.
+ *
+ * @param {Int16Array} num ?
+ * @returns {string} ?
+ */
+function combineArray(num: Int16Array): string {
+ let ret: string = '';
+ for (let i: number = 0; i < 5; i++) {
+ ret += (i ? ',' : '') + num[parseInt(i.toString(), 10)];
+ }
+ return ret;
+}
diff --git a/components/base/src/validate-lic.tsx b/components/base/src/validate-lic.tsx
new file mode 100644
index 0000000..7918740
--- /dev/null
+++ b/components/base/src/validate-lic.tsx
@@ -0,0 +1,486 @@
+import { getValue, containerObject, setValue, isNullOrUndefined } from './util';
+import { createElement } from './dom';
+
+export const componentList: string[] = ['grid', 'pivotview', 'treegrid', 'spreadsheet', 'rangeNavigator', 'DocumentEditor', 'listbox', 'inplaceeditor', 'PdfViewer', 'richtexteditor', 'DashboardLayout', 'chart', 'stockChart', 'circulargauge', 'diagram', 'heatmap', 'lineargauge', 'maps', 'slider', 'smithchart', 'barcode', 'sparkline', 'treemap', 'bulletChart', 'kanban', 'daterangepicker', 'schedule', 'gantt', 'signature', 'query-builder', 'drop-down-tree', 'carousel', 'filemanager', 'uploader', 'accordion', 'tab', 'treeview'];
+
+const bypassKey: number[] = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46,
+ 105, 115, 76, 105, 99, 86, 97, 108, 105, 100, 97, 116, 101, 100];
+let accountURL: string;
+
+export type ILicenseValidator = {
+ isValidated: boolean,
+ isLicensed: boolean,
+ version: string,
+ platform: RegExp,
+ errors: IErrorType,
+ validate: () => boolean,
+ getDecryptedData: (key: string) => string,
+ getInfoFromKey: () => IValidator[]
+}
+
+/**
+ * License validation module
+ *
+ * @private
+ * @param {string} key - License key to validate
+ * @returns {LicenseValidator} License validator object
+ * @private
+ */
+export function LicenseValidator(key: string = ''): ILicenseValidator {
+ let isValidated: boolean = false;
+ let isLicensed: boolean = true;
+ const version: string = '{syncfusionReleaseversion}';
+ const platform: RegExp = /JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats|essentialstudio/i;
+ const errors: IErrorType = {
+ noLicense: 'This application was built using a trial version of Syncfusion® Essential Studio® .' +
+ ' To remove the license validation message permanently, a valid license key must be included. ',
+ trailExpired: 'This application was built using a trial version of Syncfusion® Essential Studio® .' +
+ ' To remove the license validation message permanently, a valid license key must be included. ',
+ versionMismatched: 'The included Syncfusion® license key is invalid. ',
+ platformMismatched: 'The included Syncfusion® license key is invalid. ',
+ invalidKey: 'The included Syncfusion® license key is invalid. '
+ };
+
+ /**
+ * To manage licensing operation.
+ */
+ const manager: {
+ setKey: (key: string) => void;
+ getKey: () => string;
+ } = (() => {
+ let licKey: string = '';
+ /**
+ * Sets the license key.
+ *
+ * @param {string} key - Specifies the license key.
+ * @returns {void}
+ */
+ function set(key: string): void { licKey = key; }
+ /**
+ * Gets the license key.
+ *
+ * @returns {string} -Gets the license key.
+ */
+ function get(): string { return licKey; }
+ return {
+ setKey: set,
+ getKey: get
+ };
+ })();
+
+ /**
+ * To manage npx licensing operation.
+ */
+ const npxManager: {
+ getKey: () => string;
+ } = (() => {
+ const npxLicKey: string = 'npxKeyReplace';
+ /**
+ * Gets the license key.
+ *
+ * @returns {string} - Gets the license key.
+ */
+ function get(): string { return npxLicKey; }
+ return {
+ getKey: get
+ };
+ })();
+
+ manager.setKey(key);
+
+ /**
+ * To validate the provided license key.
+ *
+ * @returns {boolean} ?
+ */
+ function validate(): boolean {
+ const contentKey: number[] = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46, 108, 105,
+ 99, 101, 110, 115, 101, 67, 111, 110, 116, 101, 110, 116];
+ const URLKey: number[] = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46, 99, 108,
+ 97, 105, 109, 65, 99, 99, 111, 117, 110, 116, 85, 82, 76];
+ if (!isValidated && (containerObject && !getValue(convertToChar(bypassKey), containerObject))) {
+ let validateMsg: string | null = null;
+ let validateURL: string | null = null;
+ if ((manager && manager.getKey()) || (npxManager && npxManager.getKey() !== 'npxKeyReplace')) {
+ const result: IValidator[] = getInfoFromKey();
+ if (result && result.length) {
+ for (const res of result) {
+ if (!platform.test(res.platform) || res.invalidPlatform) {
+ validateMsg = errors.platformMismatched;
+ }
+ else {
+ if (((res.minVersion >= res.lastValue) && (res.minVersion !== res.lastValue)) ||
+ (res.lastValue < parseInt(version, 10))) {
+ validateMsg = errors.versionMismatched;
+ }
+ else {
+ if (res.lastValue == null || isNaN(res.lastValue)) {
+ validateMsg = errors.versionMismatched;
+ }
+ }
+ if (res.expiryDate) {
+ const expDate: Date = new Date(res.expiryDate);
+ const currDate: Date = new Date();
+ if (expDate !== currDate && expDate < currDate) {
+ validateMsg = errors.trailExpired;
+ } else {
+ break;
+ }
+ }
+ }
+ }
+ } else {
+ validateMsg = errors.invalidKey;
+ }
+ } else {
+ const licenseContent: string = getValue(convertToChar(contentKey), containerObject);
+ validateURL = getValue(convertToChar(URLKey), containerObject);
+ if (licenseContent && licenseContent !== '') {
+ validateMsg = licenseContent;
+ } else {
+ validateMsg = errors.noLicense;
+ }
+ }
+ if (validateMsg && typeof document !== 'undefined' && !isNullOrUndefined(document)) {
+ accountURL = (validateURL && validateURL !== '') ? validateURL : 'https://www.syncfusion.com/account/claim-license-key?pl=SmF2YVNjcmlwdA==&vs=Mjc=&utm_source=es_license_validation_banner&utm_medium=listing&utm_campaign=license-information';
+ const errorDiv: HTMLElement = createElement('div', {
+ innerHTML: ` ` + validateMsg + ' ' + 'Claim your free account '
+ });
+ errorDiv.setAttribute('style', `position: fixed;
+ top: 10px;
+ left: 10px;
+ right: 10px;
+ font-size: 14px;
+ background: #EEF2FF;
+ color: #222222;
+ z-index: 999999999;
+ text-align: left;
+ border: 1px solid #EEEEEE;
+ padding: 10px 11px 10px 50px;
+ border-radius: 8px;
+ font-family: Helvetica Neue, Helvetica, Arial;`);
+ document.body.appendChild(errorDiv);
+ isLicensed = false;
+ }
+ isValidated = true;
+ setValue(convertToChar(bypassKey), isValidated, containerObject);
+ }
+ return isLicensed;
+ }
+
+ /**
+ * Decrypts base64 encoded data from the provided key.
+ *
+ * @param {string} key - The base64 encoded key to decrypt
+ * @returns {string} The decrypted string or empty string if decryption fails
+ */
+ function getDecryptedData(key: string): string {
+ try {
+ return atob(key);
+ }
+ catch (error) {
+ return '';
+ }
+ }
+
+ /**
+ * Get license information from key.
+ *
+ * @returns {IValidator} - Get license information from key.
+ */
+ function getInfoFromKey(): IValidator[] {
+ try {
+ let licKey: string = '';
+ const pkey: number[] = [5439488, 7929856, 5111808, 6488064, 4587520, 7667712, 5439488,
+ 6881280, 5177344, 7208960, 4194304, 4456448, 6619136, 7733248, 5242880, 7077888,
+ 6356992, 7602176, 4587520, 7274496, 7471104, 7143424];
+ let decryptedStr: string[] = [];
+ const resultArray: IValidator[] = [];
+ let invalidPlatform: boolean = false;
+ let isNpxKey: boolean = false;
+ if (manager.getKey()) {
+ licKey = manager.getKey();
+ } else {
+ isNpxKey = true;
+ licKey = npxManager.getKey().split('npxKeyReplace')[1];
+ }
+ const licKeySplit: string[] = licKey.split(';');
+ for (const lKey of licKeySplit) {
+ const decodeStr: string = getDecryptedData(lKey);
+ if (!decodeStr) {
+ continue;
+ }
+ let k: number = 0;
+ let buffr: string = '';
+ if (!isNpxKey) {
+ for (let i: number = 0; i < decodeStr.length; i++, k++) {
+ if (k === pkey.length) { k = 0; }
+ const c: number = decodeStr.charCodeAt(i);
+ buffr += String.fromCharCode(c ^ (pkey[parseInt(k.toString(), 10)] >> 16));
+ }
+ } else {
+ const charKey: string = decodeStr[decodeStr.length - 1];
+ const decryptedKey: number[] = [];
+ for (let i: number = 0; i < decodeStr.length; i++) {
+ decryptedKey[parseInt(i.toString(), 10)] = decodeStr[parseInt(i.toString(), 10)].charCodeAt(0)
+ - charKey.charCodeAt(0);
+ }
+ for (let i: number = 0; i < decryptedKey.length; i++) {
+ buffr += String.fromCharCode(decryptedKey[parseInt(i.toString(), 10)]);
+ }
+ }
+ if (platform.test(buffr)) {
+ decryptedStr = buffr.split(';');
+ invalidPlatform = false;
+ if (decryptedStr.length > 3) {
+ const minVersion: number = parseInt(decryptedStr[1].split('.')[0], 10);
+ const lastValue: number = parseInt(decryptedStr[4], 10);
+ resultArray.push({
+ platform: decryptedStr[0],
+ version: decryptedStr[1],
+ expiryDate: decryptedStr[2],
+ lastValue: lastValue,
+ minVersion: minVersion
+ });
+ }
+ } else if (buffr && buffr.split(';').length > 3) {
+ invalidPlatform = true;
+ }
+ }
+ if (invalidPlatform && !resultArray.length) {
+ return [{ invalidPlatform: invalidPlatform }];
+ } else {
+ return resultArray.length ? resultArray : [];
+ }
+ } catch (error) {
+ return [];
+ }
+ }
+
+ return {
+ isValidated,
+ isLicensed,
+ version,
+ platform,
+ errors,
+ validate,
+ getDecryptedData,
+ getInfoFromKey
+ };
+}
+
+let licenseValidator: ILicenseValidator = LicenseValidator();
+
+/**
+ * Converts the given number to characters.
+ *
+ * @private
+ * @param {number} cArr - Specifies the license key as number.
+ * @returns {string} ?
+ */
+export function convertToChar(cArr: number[]): string {
+ let ret: string = '';
+ for (const arr of cArr) {
+ ret += String.fromCharCode(arr);
+ }
+ return ret;
+}
+
+/**
+ * To set license key.
+ *
+ * @param {string} key - license key
+ * @returns {void}
+ */
+export function registerLicense(key: string): void {
+ licenseValidator = LicenseValidator(key);
+}
+
+/**
+ * Validates the license key.
+ *
+ * @private
+ * @param {string} [key] - Optional license key to validate
+ * @returns {boolean} Returns true if license is valid, false otherwise
+ */
+export function validateLicense(key?: string): boolean {
+ if (key) {
+ registerLicense(key);
+ }
+ return licenseValidator.validate();
+}
+
+/**
+ * Gets the version information from the license validator.
+ *
+ * @private
+ * @returns {string} The version string from the license validator
+ */
+export function getVersion(): string {
+ return licenseValidator.version;
+}
+
+/**
+ * Method for create overlay over the sample
+ *
+ * @private
+ * @returns {void}
+ */
+export function createLicenseOverlay(): void {
+ const bannerTemplate: string = `
+
+
+
+
+
+
Claim your FREE account and get a key in less than a minute
+
+ Access to a 30-day free trial of any of our products.
+ Access to 24x5 support by developers via the support tickets , forum , feature & feedback page and chat.
+ 200+ ebooks on the latest technologies, industry trends, and research topics.
+
+ Largest collection of over 7500 flat and wireframe icons for free with Syncfusion® Metro Studio.
+ Free and unlimited access to Syncfusion® technical blogs and whitepapers.
+
+
Syncfusion is trusted by 29,000+ businesses worldwide
+
+
Claim your FREE account
+
have a Syncfusion
® account?
Sign In
+
+
`;
+ if (typeof document !== 'undefined' && !isNullOrUndefined(document)) {
+ const errorBackground: HTMLElement = createElement('div', {
+ innerHTML: bannerTemplate
+ });
+ document.body.appendChild(errorBackground);
+ }
+}
+
+interface IValidator {
+ version?: string;
+ expiryDate?: string;
+ platform?: string;
+ invalidPlatform?: boolean;
+ lastValue?: number;
+ minVersion?: number;
+}
+
+interface IErrorType {
+ noLicense: string;
+ trailExpired: string;
+ versionMismatched: string;
+ platformMismatched: string;
+ invalidKey: string;
+}
diff --git a/components/base/styles/_all.scss b/components/base/styles/_all.scss
new file mode 100644
index 0000000..b07cc99
--- /dev/null
+++ b/components/base/styles/_all.scss
@@ -0,0 +1,2 @@
+@import 'common/all.scss';
+@import 'animation/all.scss';
diff --git a/components/base/styles/_material3-dark-definition.scss b/components/base/styles/_material3-dark-definition.scss
new file mode 100644
index 0000000..2b536d3
--- /dev/null
+++ b/components/base/styles/_material3-dark-definition.scss
@@ -0,0 +1,15 @@
+@use 'sass:meta';
+@import 'definition/material3-dark.scss';
+
+@if not meta.variable-exists('is-roboto-loaded') {
+ //sass-lint:disable no-url-protocols,no-url-domains
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap');// stylelint-disable-line no-invalid-position-at-import-rule
+}
+
+$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $warning !default;
+$success-font-color: $success !default;
+$information-font-color: $info !default;
diff --git a/components/base/styles/_material3-definition.scss b/components/base/styles/_material3-definition.scss
new file mode 100644
index 0000000..17b8458
--- /dev/null
+++ b/components/base/styles/_material3-definition.scss
@@ -0,0 +1,16 @@
+@use 'sass:meta';
+@import 'definition/material3.scss';
+
+@if not meta.variable-exists('is-roboto-loaded') {
+ //sass-lint:disable no-url-protocols,no-url-domains
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap');// stylelint-disable-line no-invalid-position-at-import-rule
+}
+
+$is-roboto-loaded: 'true' !default;
+$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $warning !default;
+$success-font-color: $success !default;
+$information-font-color: $info !default;
diff --git a/components/base/styles/animation/_all.scss b/components/base/styles/animation/_all.scss
new file mode 100644
index 0000000..9845ebf
--- /dev/null
+++ b/components/base/styles/animation/_all.scss
@@ -0,0 +1,505 @@
+@include export-module('base-animation') {
+
+ @keyframes SlideLeftOut {
+ from {
+ transform: translate(0, 0);
+ }
+
+ to {
+ transform: translate(-100%, 0);
+ }
+ }
+
+ @keyframes SlideLeftIn {
+ from {
+ transform: translate(-100%, 0);
+ }
+
+ to {
+ transform: translate(0, 0);
+ }
+ }
+
+ @keyframes SlideRightIn {
+ from {
+ transform: translate(100%, 0);
+ }
+
+ to {
+ transform: translate(0, 0);
+ }
+ }
+
+ @keyframes SlideRightOut {
+ from {
+ transform: translate(0, 0);
+ }
+
+ to {
+ transform: translate(100%, 0);
+ }
+ }
+
+ @keyframes SlideBottomIn {
+ from {
+ transform: translate(0, 100%);
+ }
+
+ to {
+ transform: translate(0, 0);
+ }
+ }
+
+ @keyframes SlideBottomOut {
+ from {
+ transform: translate(0, 0);
+ }
+
+ to {
+ transform: translate(0, 100%);
+ }
+ }
+
+ @keyframes SlideTopIn {
+ from {
+ transform: translate(0, -100%);
+ }
+
+ to {
+ transform: translate(0, 0);
+ }
+ }
+
+ @keyframes SlideTopOut {
+ from {
+ transform: translate(0, 0);
+ }
+
+ to {
+ transform: translate(0, -100%);
+ }
+ }
+
+ @keyframes SlideRight {
+ from {
+ width: 0;
+ }
+
+ to {
+ width: 100%;
+ }
+ }
+
+ @keyframes SlideLeft {
+ from {
+ width: 100%;
+ }
+
+ to {
+ width: 0;
+ }
+ }
+
+ @keyframes SlideDown {
+ from {
+ height: 0;
+ }
+
+ to {
+ height: 100%;
+ }
+ }
+
+ @keyframes SlideUp {
+ from {
+ height: 100%;
+ }
+
+ to {
+ height: 0;
+ }
+ }
+
+ @keyframes FadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ @keyframes FadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+ }
+
+ @keyframes ZoomIn {
+ from {
+ transform: translate(0, 0) scale(0);
+ }
+
+ to {
+ transform: translate(0, 0) scale(1);
+ }
+ }
+
+ @keyframes ZoomOut {
+ from {
+ transform: translate(0, 0) scale(1);
+ }
+
+ to {
+ transform: translate(0, 0) scale(0);
+ }
+ }
+
+ @keyframes FadeZoomIn {
+ from {
+ opacity: 0;
+ transform: scale(0);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+ }
+
+ @keyframes FadeZoomOut {
+ from {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale(0);
+ }
+ }
+
+ @keyframes FlipRightDownIn {
+ from {
+ transform: perspective(400px) rotateY(-180deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(0deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipRightDownOut {
+ from {
+ transform: perspective(400px) rotateY(0deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(-180deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipRightUpIn {
+ from {
+ transform: perspective(400px) rotateY(135deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(0deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipRightUpOut {
+ from {
+ transform: perspective(400px) rotateY(0deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(135deg);
+ transform-origin: right center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipLeftDownIn {
+ from {
+ transform: perspective(400px) rotateY(-180deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(0deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipLeftDownOut {
+ from {
+ transform: perspective(400px) rotateY(0deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(135deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipLeftUpIn {
+ from {
+ transform: perspective(400px) rotateY(-135deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(0deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipLeftUpOut {
+ from {
+ transform: perspective(400px) rotateY(0deg);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+
+ to {
+ transform: rotateY(135deg) perspective(200px);
+ transform-origin: left center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipYLeftIn {
+ from {
+ opacity: 0;
+ transform: perspective(400px) rotateY(180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateY(90deg);
+ }
+
+ to {
+ opacity: 1;
+ transform: rotateY(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipYLeftOut {
+ from {
+ opacity: 1;
+ transform: perspective(400px) rotateY(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateY(90deg);
+ }
+
+ 75% {
+ transform: perspective(850px) rotateY(125deg);
+ }
+
+ to {
+ opacity: 0;
+ transform: rotateY(180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipYRightIn {
+ from {
+ opacity: 0;
+ transform: perspective(400px) rotateY(-180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateY(-90deg);
+ }
+
+ to {
+ opacity: 1;
+ transform: rotateY(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipYRightOut {
+ from {
+ opacity: 1;
+ transform: perspective(400px) rotateY(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateY(-90deg);
+ }
+
+ to {
+ opacity: 0;
+ transform: rotateY(-180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipXDownIn {
+ from {
+ opacity: 0;
+ transform: perspective(400px) rotateX(180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateX(90deg);
+ }
+
+ to {
+ opacity: 1;
+ transform: rotateX(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipXDownOut {
+ from {
+ opacity: 1;
+ transform: perspective(400px) rotateX(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateX(90deg);
+ }
+
+ 75% {
+ transform: perspective(850px) rotateX(125deg);
+ }
+
+ to {
+ opacity: 0;
+ transform: rotateX(180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipXUpIn {
+ from {
+ opacity: 0;
+ transform: perspective(400px) rotateX(-180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateX(-90deg);
+ }
+
+ to {
+ opacity: 1;
+ transform: rotateX(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ @keyframes FlipXUpOut {
+ from {
+ opacity: 1;
+ transform: perspective(400px) rotateX(0deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+
+ 50% {
+ transform: perspective(700px) rotateX(-90deg);
+ }
+
+ to {
+ opacity: 0;
+ transform: rotateX(-180deg);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ }
+ }
+
+ #{&} .sf-ripple-wrapper
+ {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: hidden;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ $ripple-background: rgba(0, 0, 0, .1);
+ $ripple-background-m3: linear-gradient(90deg, rgba(28, 27, 31, .08) 0%, rgba(28, 27, 31, .1) 5%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 95%, rgba(28, 27, 31, .08) 100%);
+
+ #{&} .sf-ripple-element
+ {
+ @if $skin-name =='Material3' {
+ background: $ripple-background-m3;
+ }
+
+ @else {
+ background-color: $ripple-background;
+ }
+ border-radius: 0;
+ overflow: hidden;
+ pointer-events: none;
+ position: absolute;
+ transform: scale(0);
+
+ @if $skin-name =='Material3' {
+ transition: opacity .3s transform 50ms cubic-bezier(.2, 0, 0, 1);
+ }
+
+ @else {
+ transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1);
+ }
+ }
+}
diff --git a/components/base/styles/common/_all.scss b/components/base/styles/common/_all.scss
new file mode 100644
index 0000000..d43f3cf
--- /dev/null
+++ b/components/base/styles/common/_all.scss
@@ -0,0 +1,2 @@
+@import 'mixin.scss';
+@import 'core.scss';
diff --git a/components/base/styles/common/_core.scss b/components/base/styles/common/_core.scss
new file mode 100644
index 0000000..263307a
--- /dev/null
+++ b/components/base/styles/common/_core.scss
@@ -0,0 +1,111 @@
+@include export-module('base-core') {
+
+ .sf-control,
+ .sf-css,
+ .sf-error {
+ font-family: $font-family;
+ font-size: $font-size;
+ font-weight: $font-weight;
+ }
+
+ $white: #fff;
+ $background: #e82824;
+ $warning: #ffd800;
+ $yellow: #ff0;
+ .sf-error {
+ @if $skin-name == 'Material3' {
+ color: rgba($error-font-color);
+ }
+ @else {
+ color: $error-font-color;
+ }
+ }
+
+ .sf-control,
+ .sf-control [class ^= 'sf-'],
+ .sf-control [class *= ' sf-'] {
+ box-sizing: border-box;
+ }
+
+ .sf-control:focus,
+ .sf-control *:focus {
+ outline: none;
+ }
+
+ .sf-rtl {
+ direction: rtl;
+ text-align: right;
+ }
+
+ .sf-overlay {
+ background-color: $overlay-bg-color;
+ height: 100%;
+ opacity: .5;
+ pointer-events: none;
+ touch-action: none;
+ width: 100%;
+ }
+
+ .sf-hidden {
+ display: none;
+ }
+
+ .sf-blazor-hidden {
+ visibility: hidden;
+ }
+
+ .sf-disabled {
+ background-image: none;
+ cursor: default;
+ opacity: .35;
+ }
+
+ .sf-ul {
+ list-style-type: none;
+ }
+
+ .sf-prevent-select {
+ user-select: none;
+ }
+
+ .sf-warning {
+ @if $skin-name == 'Material3' {
+ color: rgba($warning-font-color);
+ }
+ @else {
+ color: $warning-font-color;
+ }
+ }
+
+ .sf-success {
+ @if $skin-name == 'Material3' {
+ color: rgba($success-font-color);
+ }
+ @else {
+ color: $success-font-color;
+ }
+ }
+
+ .sf-information {
+ @if $skin-name == 'Material3' {
+ color: rgba($information-font-color);
+ }
+ @else {
+ color: $information-font-color;
+ }
+ }
+
+ .sf-block-touch {
+ touch-action: pinch-zoom;
+ }
+ .sf-license {
+ color: $yellow;
+ text-decoration: none;
+ }
+ .sf-license-banner {
+ position: absolute;
+ right: 10px;
+ top: 27%;
+ cursor: pointer;
+ }
+}
diff --git a/components/base/styles/common/_mixin.scss b/components/base/styles/common/_mixin.scss
new file mode 100644
index 0000000..e72286b
--- /dev/null
+++ b/components/base/styles/common/_mixin.scss
@@ -0,0 +1,11 @@
+@use 'sass:list';
+
+$css: '' !default;
+$imported-modules: () !default;
+
+@mixin export-module($module) {
+ @if (list.index($imported-modules, $module) == null) {
+ $imported-modules: list.append($imported-modules, $module) !global;
+ @content;
+ }
+}
\ No newline at end of file
diff --git a/components/base/styles/definition/_material3-dark.scss b/components/base/styles/definition/_material3-dark.scss
new file mode 100644
index 0000000..994eb2d
--- /dev/null
+++ b/components/base/styles/definition/_material3-dark.scss
@@ -0,0 +1,662 @@
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:list';
+@import '../common/mixin.scss';
+
+@function mapcolorvariable($pallete-name){
+ @return var(#{'--color-sf-'+ $pallete-name});
+}
+
+@function darken-color($color, $amount) {
+ @if is-custom-property($color) {
+ @return #{$color}-#{$amount};
+ }
+
+ // maybe there is a way to call the original `darken` instead??
+ @return adjust-color($color, $lightness: -1 * $amount);
+}
+
+@mixin lighten-color($color, $amount) {
+ filter: brightness(#{100% + $amount}) saturate(100%) hue-rotate(0deg);
+ background-color: $color;
+}
+
+@function rgbaChange($hex, $alpha: 1) {
+ $r: str-slice($hex, 1, 2);
+ $g: str-slice($hex, 3, 4);
+ $b: str-slice($hex, 5, 6);
+ $rgba: rgba(hex($r), hex($g), hex($b), $alpha);
+ @return $rgba;
+}
+
+:root {
+ --color-sf-black: 0, 0, 0;
+ --color-sf-white: 255, 255, 255;
+ --color-sf-primary: 208, 188, 255;
+ --color-sf-primary-container: 79, 55, 139;
+ --color-sf-secondary: 204, 194, 220;
+ --color-sf-secondary-container: 74, 68, 88;
+ --color-sf-tertiary: 239, 184, 200;
+ --color-sf-tertiary-container: 99, 59, 72;
+ --color-sf-surface: 28, 27, 31;
+ --color-sf-surface-variant: 73, 69, 79;
+ --color-sf-background: var(--color-sf-surface);
+ --color-sf-on-primary: 55, 30, 115;
+ --color-sf-on-primary-container: 234, 221, 255;
+ --color-sf-on-secondary: 51, 45, 65;
+ --color-sf-on-secondary-container: 232, 222, 248;
+ --color-sf-on-tertiary: 73, 37, 50;
+ --color-sf-on-tertiary-containe: 255, 216, 228;
+ --color-sf-on-surface: 230, 225, 229;
+ --color-sf-on-surface-variant: 202, 196, 208;
+ --color-sf-on-background: 230, 225, 229;
+ --color-sf-outline: 147, 143, 153;
+ --color-sf-outline-variant: 68, 71, 70;
+ --color-sf-shadow: 0, 0, 0;
+ --color-sf-surface-tint-color: 208, 188, 255;
+ --color-sf-inverse-surface: 230, 225, 229;
+ --color-sf-inverse-on-surface: 49, 48, 51;
+ --color-sf-inverse-primary: 103, 80, 164;
+ --color-sf-scrim: 0, 0, 0;
+ --color-sf-error: 242, 184, 181;
+ --color-sf-error-container: 140, 29, 24;
+ --color-sf-on-error: 96, 20, 16;
+ --color-sf-on-error-container: 249, 222, 220;
+ --color-sf-success: 83, 202, 23;
+ --color-sf-success-container: 22, 62, 2;
+ --color-sf-on-success: 13, 39, 0;
+ --color-sf-on-success-container: 183, 250, 150;
+ --color-sf-info: 71, 172, 251;
+ --color-sf-info-container: 0, 67, 120;
+ --color-sf-on-info: 0, 51, 91;
+ --color-sf-on-info-container: 173, 219, 255;
+ --color-sf-warning: 245, 180, 130;
+ --color-sf-warning-container: 123, 65, 0;
+ --color-sf-on-warning: 99, 52, 0;
+ --color-sf-on-warning-container: 255, 220, 193;
+ --color-sf-spreadsheet-gridline: 231, 224, 236;
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
+ --color-sf-success-text: 0, 0, 0;
+ --color-sf-warning-text: 0, 0, 0;
+ --color-sf-info-text: 0, 0, 0;
+ --color-sf-danger-text: 0, 0, 0;
+ --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
+}
+
+$black: mapcolorvariable('black') !default;
+$white: mapcolorvariable('white') !default;
+
+$primary : mapcolorvariable('primary') !default;
+$primary-container: mapcolorvariable('primary-container') !default;
+$secondary: mapcolorvariable('secondary') !default;
+$secondary-container: mapcolorvariable('secondary-container') !default;
+$tertiary: mapcolorvariable('tertiary') !default;
+$tertiary-container: mapcolorvariable('tertiary-container') !default;
+$surface: mapcolorvariable('surface') !default;
+$surface-variant: mapcolorvariable('surface-variant') !default;
+$background: mapcolorvariable('background') !default;
+$on-primary: mapcolorvariable('on-primary') !default;
+$on-primary-container: mapcolorvariable('on-primary-container') !default;
+$on-secondary: mapcolorvariable('on-secondary') !default;
+$on-secondary-container: mapcolorvariable('on-secondary-container') !default;
+$on-tertiary: mapcolorvariable('on-tertiary') !default;
+$on-tertiary-containe: mapcolorvariable('on-tertiary-containe') !default;
+$on-surface: mapcolorvariable('on-surface') !default;
+$on-surface-variant: mapcolorvariable('on-surface-variant') !default;
+$on-background: mapcolorvariable('on-background') !default;
+$outline: mapcolorvariable('outline') !default;
+$outline-variant: mapcolorvariable('outline-variant') !default;
+$shadow: mapcolorvariable('shadow') !default;
+$surface-tint-color: mapcolorvariable('surface-tint-color') !default;
+$inverse-surface: mapcolorvariable('inverse-surface') !default;
+$inverse-on-surface: mapcolorvariable('inverse-on-surface') !default;
+$inverse-primary: mapcolorvariable('inverse-primary') !default;
+$scrim:mapcolorvariable('scrim') !default;
+$error: mapcolorvariable('error') !default;
+$error-container: mapcolorvariable('error-container') !default;
+$on-error: mapcolorvariable('on-error') !default;
+$on-error-container: mapcolorvariable('on-error-container') !default;
+$success: mapcolorvariable('success') !default;
+$success-container: mapcolorvariable('success-container') !default;
+$on-success: mapcolorvariable('on-success') !default;
+$on-success-container: mapcolorvariable('on-success-container') !default;
+$info: mapcolorvariable('info') !default;
+$info-container: mapcolorvariable('info-container') !default;
+$on-info: mapcolorvariable('on-info') !default;
+$on-info-container: mapcolorvariable('on-info-container') !default;
+$warning: mapcolorvariable('warning') !default;
+$warning-container: mapcolorvariable('warning-container') !default;
+$on-warning: mapcolorvariable('on-warning') !default;
+$on-warning-container: mapcolorvariable('on-warning-container') !default;
+$success-text: mapcolorvariable('success-text') !default;
+$warning-text: mapcolorvariable('warning-text') !default;
+$info-text: mapcolorvariable('info-text') !default;
+$danger-text: mapcolorvariable('danger-text') !default;
+$spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
+
+$opacity0: 0 !default;
+$opacity4: .04 !default;
+$opacity5: .05 !default;
+$opacity6: .06 !default;
+$opacity8: .08 !default;
+$opacity11: .11 !default;
+$opacity12: .12 !default;
+$opacity14: .14 !default;
+$opacity16: .16 !default;
+
+$surface1: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)), rgba($surface) !default;
+$surface2: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)), rgba($surface) !default;
+$surface3: linear-gradient(0deg, rgba($primary, $opacity11), rgba($primary, $opacity11)), rgba($surface) !default;
+$surface4: linear-gradient(0deg, rgba($primary, $opacity12), rgba($primary, $opacity12)), rgba($surface) !default;
+$surface5: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)), rgba($surface) !default;
+$surface6: linear-gradient(0deg, rgba($primary, $opacity16), rgba($primary, $opacity16)), rgba($surface) !default;
+
+$level1: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
+$level2: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
+$level3: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
+$level4: 0 2px 3px 0 rgba(0, 0, 0, .3), 0 6px 10px 4px rgba(0, 0, 0, .15);
+$level5: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 8px 12px 6px rgba(0, 0, 0, .15);
+
+$primary: $primary !default;
+$primary-text-color: $on-primary !default;
+$primary-light: $primary-container !default;
+$primary-lighter: $primary-light !default;
+$primary-dark: $surface-tint-color !default;
+$primary-darker: $on-primary-container !default;
+$success: $success !default;
+$transparent: transparent !default;
+$info: $info !default;
+$warning: $warning !default;
+$danger: $error !default;
+$success-light: $success-container !default;
+$info-light: $info-container !default;
+$warning-light: $warning-container !default;
+$danger-light: $error-container !default;
+$success-dark: $success !default;
+$info-dark: $info !default;
+$warning-dark: $warning !default;
+$danger-dark:$error !default;
+$success-light-alt: $success-light !default;
+$info-light-alt: $info-light !default;
+$warning-light-alt: $warning-light !default;
+$danger-light-alt: $danger-light !default;
+
+$content-bg-color: $surface !default;
+$content-bg-color-alt1: $surface1 !default;
+$content-bg-color-alt2: $surface2 !default;
+$content-bg-color-alt3: $surface3 !default;
+$content-bg-color-alt4: $surface4 !default;
+$content-bg-color-alt5: $surface5 !default;
+$content-bg-color-alt6: $surface6 !default;
+$content-bg-color-hover: rgba($on-surface, $opacity5) !default;
+$content-bg-color-pressed: rgba($on-surface, $opacity8) !default;
+$content-bg-color-focus: rgba($on-surface, $opacity4) !default;
+$content-bg-color-selected: $primary-light !default;
+$content-bg-color-dragged: $primary-light !default;
+$content-bg-color-disabled: $white !default;
+$flyout-bg-color: $surface3 !default;
+$flyout-bg-color-hover: rgba($on-surface, $opacity5) !default;
+$flyout-bg-color-pressed: rgba($on-surface, $opacity8) !default;
+$flyout-bg-color-selected: rgba($primary-container, .65) !default;
+$flyout-bg-color-focus: rgba($on-surface, $opacity4) !default;
+$overlay-bg-color: rgba($scrim, .5) !default;
+$table-bg-color-hover: rgba($on-surface, $opacity5) !default;
+$table-bg-color-pressed: rgba($on-surface, $opacity8) !default;
+$table-bg-color-selected: rgba($primary-container, .65) !default;
+
+$colorpicker-gradient-1: #f00 !default;
+$colorpicker-gradient-2: #ff0 !default;
+$ccolorpicker-gradient-3: #0f0 !default;
+$colorpicker-gradient-4: #0ff !default;
+$colorpicker-gradient-5: #00f !default;
+$colorpicker-gradient-6: #f0f !default;
+$colorpicker-gradient-7: #ff0004 !default;
+$spreadsheet-selection-1: #673ab8 !default;
+$spreadsheet-selection-2: #9c27b0 !default;
+$spreadsheet-selection-3: #029688 !default;
+$spreadsheet-selection-4: #4caf51 !default;
+$spreadsheet-selection-5: #fe9800 !default;
+$spreadsheet-selection-6: #3f52b5 !default;
+
+$content-text-color: $on-surface !default;
+$content-text-color-alt1: $on-surface-variant !default;
+$content-text-color-alt2: $on-surface-variant !default;
+$content-text-color-alt3: $on-tertiary !default;
+$content-text-color-inverse: $inverse-on-surface !default;
+$content-text-color-hover: $content-text-color !default;
+$content-text-color-pressed: $content-text-color !default;
+$content-text-color-focus: $content-text-color !default;
+$content-text-color-selected: $content-text-color !default;
+$content-text-color-dragged: $content-text-color !default;
+$content-text-color-disabled: rgba($on-surface, .38) !default;
+$placeholder-text-color: $outline !default;
+$flyout-text-color: $content-text-color !default;
+$flyout-text-color-hover: $content-text-color !default;
+$flyout-text-color-pressed: $content-text-color !default;
+$flyout-text-color-selected: $content-text-color !default;
+$flyout-text-color-focus: $content-text-color !default;
+$flyout-text-color-disabled: rgba($on-surface, .38) !default;
+$table-text-color-hover: $content-text-color !default;
+$table-text-color-pressed: $content-text-color !default;
+$table-text-color-selected: $content-text-color !default;
+
+$icon-color: $on-surface-variant !default;
+$icon-color-hover: $on-surface !default;
+$icon-color-pressed: $on-surface-variant !default;
+$icon-color-disabled: rgba($on-surface-variant, .38) !default;
+
+$border-light: $outline-variant !default;
+$border: $outline !default;
+$border-alt: $on-surface-variant !default;
+$border-dark: rgba($on-surface, .38) !default;
+$border-hover: $border-light !default;
+$border-pressed: $border-light !default;
+$border-focus: $border-light !default;
+$border-selected: $border-light !default;
+$border-dragged: $border-light !default;
+$border-disabled: $border-light !default;
+$border-warning: $warning !default;
+$border-error: $error !default;
+$border-success: $success !default;
+$spreadsheet-gridline: #e7e0ec !default;
+$flyout-border: $border-light !default;
+
+$tooltip-bg-color: $inverse-surface !default;
+$tooltip-border: $inverse-surface;
+$tooltip-text-color: $inverse-on-surface !default;
+
+$shadow: 0 .8px 16px rgba($black, .15) !default;
+$shadow-sm: $level1 !default;
+$shadow-md: $level2 !default;
+$shadow-lg: $level3 !default;
+$shadow-xl: $level4 !default;
+$shadow-2xl: $level5 !default;
+$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
+$shadow-none: 0 0 rgba($black, 0) !default;
+
+$shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff !default;
+$shadow-focus-ring2: 0 0 0 1px rgba($black, .95) !default;
+$primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default;
+$secondary-shadow-focus: 0 0 0 4px rgba($secondary, .5) !default;
+$success-shadow-focus: 0 0 0 4px rgba($success, .5) !default;
+$danger-shadow-focus: 0 0 0 4px rgba($danger, .5) !default;
+$info-shadow-focus: 0 0 0 4px rgba($info, .5) !default;
+$warning-shadow-focus: 0 0 0 4px rgba($warning, .5) !default;
+
+$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
+
+$text-xxs: 10px !default;
+$text-xs: 12px !default;
+$text-sm: 14px !default;
+$text-base: 16px !default;
+$text-lg: 18px !default;
+$text-xl: 20px !default;
+$text-2xl: 24px !default;
+$text-3xl: 28px !default;
+$text-4xl: 32px !default;
+$text-5xl: 42px !default;
+$text-6xl: 68px !default;
+$text-7xl: 78px !default;
+$text-8xl: 96px !default;
+$text-9xl: 128px !default;
+
+$h1-font-size: 40px !default;
+$h2-font-size: 32px !default;
+$h3-font-size: 28px !default;
+$h4-font-size: $text-2xl !default;
+$h5-font-size: $text-xl !default;
+$h6-font-size: $text-base !default;
+
+$leading-none: 1 !default;
+$leading-tight: 1.25 !default;
+$leading-snug: 1.375 !default;
+$leading-normal: 1.5 !default;
+$leading-relaxed: 1.625 !default;
+$leading-loose: 2 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$secondary-bg-color: $content-bg-color-alt1 !default;
+$secondary-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default;
+$secondary-text-color: $on-surface !default;
+$secondary-bg-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)), rgba($content-bg-color) !default;
+$secondary-border-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)) !default;
+$secondary-text-color-hover: $secondary-text-color !default;
+$secondary-bg-color-pressed:linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)), rgba($content-bg-color) !default;
+$secondary-border-color-pressed: linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)) !default;
+$secondary-text-color-pressed: $secondary-text-color !default;
+$secondary-bg-color-focus: $secondary-bg-color-hover !default;
+$secondary-border-color-focus: $secondary-border-color-hover !default;
+$secondary-text-color-focus: $secondary-text-color-hover !default;
+$secondary-bg-color-disabled: rgba($secondary, .12) !default;
+$secondary-border-color-disabled: rgba($secondary, 0) !default;
+$secondary-text-color-disabled: rgba($on-surface, .38) !default;
+
+$primary-bg-color: $primary !default;
+$primary-border-color: $primary !default;
+$primary-text: $primary-text-color !default;
+$primary-bg-color-hover: linear-gradient(0deg, rgba($primary-text, $opacity8), rgba($primary-text, $opacity8)), rgba($primary-bg-color) !default;
+$primary-border-color-hover: $primary-bg-color-hover !default;
+$primary-text-hover: $primary-text !default;
+$primary-bg-color-pressed: linear-gradient(0deg, rgba($primary-text, $opacity12), rgba($primary-text, $opacity12)), rgba($primary-bg-color) !default;
+$primary-border-color-pressed: $primary-bg-color-pressed !default;
+$primary-text-pressed: $primary-text-color !default;
+$primary-bg-color-focus: $primary-bg-color-hover !default;
+$primary-border-color-focus: $primary-border-color-hover !default;
+$primary-text-focus: $primary-text !default;
+$primary-bg-color-disabled: rgba($secondary, .12) !default;
+$primary-border-color-disabled: rgba($secondary, 0) !default;
+$primary-text-disabled: rgba($on-surface, .38) !default;
+
+$success-bg-color: $success !default;
+$success-border-color: $success !default;
+$success-text: $black !default;
+$success-bg-color-hover: linear-gradient(0deg, rgba($success-text, $opacity8), rgba($success-text, $opacity8)), rgba($success-bg-color) !default;
+$success-border-color-hover: $success-bg-color-hover !default;
+$success-text-hover: $success-text !default;
+$success-bg-color-pressed: linear-gradient(0deg, rgba($success-text, $opacity12), rgba($success-text, $opacity12)), rgba($success-bg-color) !default;
+$success-border-color-pressed: $success-bg-color-pressed !default;
+$success-text-pressed: $success-text !default;
+$success-bg-color-focus: $success-bg-color-hover !default;
+$success-border-color-focus: $success-border-color-hover !default;
+$success-text-focus: $success-text !default;
+$success-bg-color-disabled: rgba($secondary, .12) !default;
+$success-border-color-disabled: $success-bg-color-disabled !default;
+$success-text-disabled: rgba($on-surface, .38) !default;
+
+$warning-bg-color: $warning !default;
+$warning-border-color: $warning !default;
+$warning-text: $black !default;
+$warning-bg-color-hover: linear-gradient(0deg, rgba($warning-text, $opacity8), rgba($warning-text, $opacity8)), rgba($warning-bg-color) !default;
+$warning-border-color-hover: $warning-bg-color-hover !default;
+$warning-text-hover: $warning-text !default;
+$warning-bg-color-pressed: linear-gradient(0deg, rgba($warning-text, $opacity12), rgba($warning-text, $opacity12)), rgba($warning-bg-color) !default;
+$warning-border-color-pressed: $warning-bg-color-pressed !default;
+$warning-text-pressed: $warning-text !default;
+$warning-bg-color-focus: $warning-bg-color-hover !default;
+$warning-border-color-focus: $warning-border-color-hover !default;
+$warning-text-focus: $warning-text !default;
+$warning-bg-color-disabled: rgba($secondary, .12) !default;
+$warning-border-color-disabled: $warning-bg-color-disabled !default;
+$warning-text-disabled: rgba($on-surface, .38) !default;
+
+$danger-bg-color: $danger !default;
+$danger-border-color: $danger !default;
+$danger-text: $black !default;
+$danger-bg-color-hover: linear-gradient(0deg, rgba($danger-text, $opacity8), rgba($danger-text, $opacity8)), rgba($danger-bg-color) !default;
+$danger-border-color-hover: $danger-bg-color-hover !default;
+$danger-text-hover: $danger-text !default;
+$danger-bg-color-pressed: linear-gradient(0deg, rgba($danger-text, $opacity12), rgba($danger-text, $opacity12)), rgba($danger-bg-color) !default;
+$danger-border-color-pressed: $danger-bg-color-pressed !default;
+$danger-text-pressed: $danger-text !default;
+$danger-bg-color-focus: $danger-bg-color-hover !default;
+$danger-border-color-focus: $danger-border-color-hover !default;
+$danger-text-focus: $danger-text !default;
+$danger-bg-color-disabled: rgba($secondary, .12) !default;
+$danger-border-color-disabled: $danger-bg-color-disabled !default;
+$danger-text-disabled: rgba($on-surface, .38) !default;
+
+$info-text: $black !default;
+$info-bg-color: $info !default;
+$info-border-color: $info-bg-color !default;
+$info-bg-color-hover: linear-gradient(0deg, rgba($info-text, $opacity8), rgba($info-text, $opacity8)), rgba($info-bg-color) !default;
+$info-border-color-hover: $info-bg-color-hover !default;
+$info-text-hover: $info-text !default;
+$info-bg-color-pressed: linear-gradient(0deg, rgba($info-text, $opacity12), rgba($info-text, $opacity12)), rgba($info-bg-color) !default;
+$info-border-color-pressed: $info-bg-color-pressed !default;
+$info-text-pressed: $info-text !default;
+$info-bg-color-focus: $info-bg-color-hover !default;
+$info-border-color-focus: $info-border-color-hover !default;
+$info-text-focus: $info-text-hover !default;
+$info-bg-color-disabled: rgba($secondary, .12) !default;
+$info-border-color-disabled: $info-bg-color-disabled !default;
+$info-text-disabled: rgba($on-surface, .38) !default;
+
+$primary-outline: $primary-bg-color !default;
+$primary-outline-border: $outline !default;
+$secondary-outline: $secondary-text-color !default;
+$secondary-outline-border: $outline !default;
+$warning-outline: $warning-bg-color !default;
+$warning-outline-border: $outline !default;
+$danger-outline: $danger-bg-color !default;
+$danger-outline-border: $outline !default;
+$success-outline: $success-bg-color !default;
+$success-outline-border: $outline !default;
+$info-outline: $info-bg-color !default;
+$info-outline-border:$outline !default;
+
+$toast-text-color: $content-text-color !default;
+$toast-alt-text-color: $content-text-color !default;
+
+$series-1: $surface-variant !default;
+$series-2: $outline-variant !default;
+$series-3: $outline !default;
+$series-4: $on-surface-variant !default;
+$series-5: #6200ee !default;
+$series-6: #e77a16 !default;
+$series-7: #82c100 !default;
+$series-8: #7107dc !default;
+$series-9: #05b3da !default;
+$series-10: #828486 !default;
+$series-11: #b1212d !default;
+$series-12: #38be09 !default;
+$skin-name: 'Material3' !default;
+$theme-name: 'Material3-dark' !default;
+
+$diagram-palette-background: $inverse-surface !default;
+$diagram-palette-hover-background: rgba($surface, .05) !default;
+$diagram-palette-selection-background: rgba($surface, .12) !default;
+
+$shape-none:0 !default;
+$shape-extra-small:4px !default;
+$shape-small:8px !default;
+$shape-medium:12px !default;
+$shape-Large:16px !default;
+$shape-extra-large:16px !default;
+$shape-full:50% !default;
+
+$button-radius:$shape-full !default;
+$button-radius-small: $shape-full !default;
+$button-radius-bigger: $shape-full !default;
+$input-radius: $shape-extra-small !default;
+$input-radius-small: $shape-extra-small !default;
+$input-radius-bigger: $shape-extra-small !default;
+$model-radius: $shape-medium !default;
+$model-radius-small: $shape-small !default;
+$model-radius-bigger: $shape-Large !default;
+$flyout-radius: $shape-extra-small !default;
+$flyout-radius-bigger: $shape-extra-small !default;
+$flyout-radius-small: $shape-extra-small !default;
+$chkbox-radius:2px !default;
+$chkbox-radius-small:2px !default;
+$chkbox-radius-bigger:2px !default;
+$card-radius:$shape-small !default;
+$card-radius-small:$shape-extra-small !default;
+$card-radius-bigger:$shape-medium !default;
+$msg-radius:$shape-none !default;
+$msg-radius-small: $msg-radius !default;
+$msg-radius-bigger: $msg-radius !default;
+$toast-radius: $shape-extra-small !default;
+$toast-radius-small: $toast-radius !default;
+$toast-radius-bigger: $toast-radius !default;
+$chip-radius: $shape-extra-small !default;
+$chip-radius-small: $shape-extra-small !default;
+$chip-radius-bigger: $shape-small !default;
+
+$btn-secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 0), rgba($content-bg-color, 0)) !default;
+
+$msg-color: rgba($on-surface) !default;
+$msg-bg-color: $content-bg-color-alt1 !default;
+$msg-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default;
+$msg-color-alt1: rgba($on-surface) !default;
+$msg-bg-color-alt1: $transparent !default;
+$msg-border-color-alt1: rgba($outline) !default;
+$msg-color-alt2: rgba($inverse-on-surface) !default;
+$msg-bg-color-alt2: rgba($inverse-surface) !default;
+$msg-border-color-alt2: rgba($inverse-surface) !default;
+
+$msg-icon-color: rgba($on-surface-variant) !default;
+$msg-icon-color-alt1: rgba($on-surface-variant) !default;
+$msg-icon-color-alt2: rgba($inverse-on-surface) !default;
+
+$msg-close-icon-color: rgba($icon-color) !default;
+$msg-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-close-icon-color-alt2: rgba($inverse-on-surface) !default;
+
+$msg-success-color: rgba($on-success-container) !default;
+$msg-success-bg-color: rgba($success-container) !default;
+$msg-success-border-color: rgba($success-container) !default;
+$msg-success-color-alt1: rgba($on-success-container) !default;
+$msg-success-bg-color-alt1: $transparent !default;
+$msg-success-border-color-alt1: rgba($success) !default;
+$msg-success-color-alt2: rgba($on-success) !default;
+$msg-success-bg-color-alt2: rgba($success) !default;
+$msg-success-border-color-alt2: rgba($success) !default;
+
+$msg-success-icon-color: rgba($success) !default;
+$msg-success-icon-color-alt1: rgba($on-success-container) !default;
+$msg-success-icon-color-alt2: rgba($on-success) !default;
+
+$msg-success-close-icon-color: rgba($icon-color) !default;
+$msg-success-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-success-close-icon-color-alt2: rgba($on-success) !default;
+
+$msg-danger-color: rgba($on-error-container) !default;
+$msg-danger-bg-color: rgba($error-container) !default;
+$msg-danger-border-color: rgba($error-container) !default;
+$msg-danger-color-alt1: rgba($on-error-container) !default;
+$msg-danger-bg-color-alt1: $transparent !default;
+$msg-danger-border-color-alt1: rgba($error) !default;
+$msg-danger-color-alt2: rgba($on-error) !default;
+$msg-danger-bg-color-alt2: rgba($error) !default;
+$msg-danger-border-color-alt2: rgba($error) !default;
+
+$msg-danger-icon-color: rgba($error) !default;
+$msg-danger-icon-color-alt1: rgba($on-error-container) !default;
+$msg-danger-icon-color-alt2: rgba($on-error) !default;
+
+$msg-danger-close-icon-color: rgba($icon-color) !default;
+$msg-danger-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-danger-close-icon-color-alt2: rgba($on-error) !default;
+
+$msg-warning-color: rgba($on-warning-container) !default;
+$msg-warning-bg-color: rgba($warning-container) !default;
+$msg-warning-border-color: rgba($warning-container) !default;
+$msg-warning-color-alt1: rgba($on-warning-container) !default;
+$msg-warning-bg-color-alt1: $transparent !default;
+$msg-warning-border-color-alt1: rgba($warning) !default;
+$msg-warning-color-alt2: rgba($on-warning) !default;
+$msg-warning-bg-color-alt2: rgba($warning) !default;
+$msg-warning-border-color-alt2: rgba($warning) !default;
+
+$msg-warning-icon-color: rgba($warning) !default;
+$msg-warning-icon-color-alt1: rgba($on-warning-container) !default;
+$msg-warning-icon-color-alt2: rgba($on-warning) !default;
+
+$msg-warning-close-icon-color: rgba($icon-color) !default;
+$msg-warning-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-warning-close-icon-color-alt2: rgba($on-warning) !default;
+
+$msg-info-color: rgba($on-info-container) !default;
+$msg-info-bg-color: rgba($info-container) !default;
+$msg-info-border-color: rgba($info-container) !default;
+$msg-info-color-alt1: rgba($on-info-container) !default;
+$msg-info-bg-color-alt1: $transparent !default;
+$msg-info-border-color-alt1: rgba($info) !default;
+$msg-info-color-alt2: rgba($on-info) !default;
+$msg-info-bg-color-alt2: rgba($info) !default;
+$msg-info-border-color-alt2: rgba($info) !default;
+
+$msg-info-icon-color: rgba($info) !default;
+$msg-info-icon-color-alt1: rgba($on-info-container) !default;
+$msg-info-icon-color-alt2: rgba($on-info) !default;
+
+$msg-info-close-icon-color: rgba($icon-color) !default;
+$msg-info-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-info-close-icon-color-alt2: rgba($on-info) !default;
+
+$appbar-bg-color-alt1: $content-bg-color-alt2 !default;
+$appbar-color-alt1: rgba($content-text-color) !default;
+$appbar-border-color-alt1: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)) !default;
+$appbar-hover-bg-color-alt1: rgba(0, 0, 0, .05) !default;
+
+$appbar-bg-color-alt2: rgba($inverse-surface) !default;
+$appbar-color-alt2: rgba($inverse-on-surface) !default;
+$appbar-border-color-alt2: rgba($inverse-surface) !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+$appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default;
+$appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default;
+
+$rating-selected-color: $primary !default;
+$rating-unrated-color: $content-bg-color-alt3 !default;
+$rating-selected-disabled-color: rgba($on-surface, .24) !default;
+$rating-unrated-disabled-color: rgba($on-surface, .08) !default;
+$rating-selected-hover-color: darken-color(rgba($primary), 5%) !default;
+$rating-unrated-hover-color: darken-color(rgba($primary), 10%) !default;
+$rating-pressed-color: darken-color(rgba($primary), 10%) !default;
+
+$skeleton-wave-color: rgba(73, 69, 79, 1) !default;
+
+$splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
+$splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
+$splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
+
+$gantt-taskbar-color: linear-gradient(0deg, rgba($primary, .75), rgba($primary, .75)), rgba($content-bg-color) !default;
+
+$grey-white: #fff !default;
+$base-font: #000 !default;
+$grey-50: #fafafa !default;
+$grey-300: #e0e0e0 !default;
+$grey-400: #bdbdbd !default;
+$grey-500: #9e9e9e !default;
+$grey-600: #757575 !default;
+$grey-700: #616161 !default;
+$grey-800: #424242 !default;
+$grey-900: #212121 !default;
+$sd-focus-box-shadow: $secondary-shadow-focus !default;
+$toooltip-text-color: #f9fafb !default;
+
+$range-button-font-color: $info !default;
+$ddl-input-placeholder-padding: 0 0 0 8px !default;
+$theme-light: $primary-light !default;
+$gray-600: #6c757d !default;
+$gray-300: #dee2e6 !default;
+$gray-500: #adb5bd !default;
+$gray-900: #212529 !default;
+$primary-300: #7986cb;
+$gray-400: #ced4da !default;
+
+$font-icon-8: 8px !default;
+$font-icon-9: 9px !default;
+$font-icon-10: 10px !default;
+$font-icon-12: 12px !default;
+$font-icon-13: 13px !default;
+$font-icon-14: 14px !default;
+$font-icon-15: 15px !default;
+$font-icon-16: 16px !default;
+$font-icon-17: 17px !default;
+$font-icon-18: 18px !default;
+$font-icon-20: 20px !default;
+$font-icon-22: 22px !default;
+$font-icon-24: 24px !default;
+$font-icon-26: 26px !default;
+$font-icon-28: 28px !default;
+$font-icon-32: 32px !default;
+
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $warning !default;
+$success-font-color: $success !default;
+$information-font-color: $info !default;
+
+$frozen-shadow: rgba(0, 0, 0, .25) !default;
+$frozen-shadow-2: rgba(0, 0, 0, .25) !default;
\ No newline at end of file
diff --git a/components/base/styles/definition/_material3.scss b/components/base/styles/definition/_material3.scss
new file mode 100644
index 0000000..1ab6536
--- /dev/null
+++ b/components/base/styles/definition/_material3.scss
@@ -0,0 +1,731 @@
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:list';
+@import '../common/mixin.scss';
+
+@function mapcolorvariable($pallete-name){
+ @return var(#{'--color-sf-'+ $pallete-name});
+}
+
+@function darken-color($color, $amount) {
+ @if is-custom-property($color) {
+ @return #{$color}-#{$amount};
+ }
+
+ // maybe there is a way to call the original `darken` instead??
+ @return adjust-color($color, $lightness: -1 * $amount);
+}
+
+@mixin lighten-color($color, $amount) {
+ filter: brightness(#{100% + $amount}) saturate(100%) hue-rotate(0deg);
+ background-color: $color;
+}
+
+@function rgbaChange($hex, $alpha: 1) {
+ $r: str-slice($hex, 1, 2);
+ $g: str-slice($hex, 3, 4);
+ $b: str-slice($hex, 5, 6);
+ $rgba: rgba(hex($r), hex($g), hex($b), $alpha);
+ @return $rgba;
+}
+
+@function hex-to-rgba($hex, $opacity) {
+ $r: str-slice($hex, 1, 2);
+ $g: str-slice($hex, 3, 4);
+ $b: str-slice($hex, 5, 6);
+ @if str-length($hex) == 8 {
+ $opacity: str-slice($hex, 7, 8);
+ }
+ $r: str-to-num($r, 16);
+ $g: str-to-num($g, 16);
+ $b: str-to-num($b, 16);
+ $opacity: $opacity / 255;
+ @return rgba($r, $g, $b, $opacity);
+}
+
+:root {
+ --color-sf-black: 0, 0, 0;
+ --color-sf-white: 255, 255, 255;
+ --color-sf-primary: 103, 80, 164;
+ --color-sf-primary-container: 234, 221, 255;
+ --color-sf-secondary: 98, 91, 113;
+ --color-sf-secondary-container: 232, 222, 248;
+ --color-sf-tertiary: 125, 82, 96;
+ --color-sf-tertiary-container: 255, 216, 228;
+ --color-sf-surface: 255, 255, 255;
+ --color-sf-surface-variant: 231, 224, 236;
+ --color-sf-background: var(--color-sf-surface);
+ --color-sf-on-primary: 255, 255, 255;
+ --color-sf-on-primary-container: 33, 0, 94;
+ --color-sf-on-secondary: 255, 255, 255;
+ --color-sf-on-secondary-container: 30, 25, 43;
+ --color-sf-on-tertiary: 255, 255, 255;
+ --color-sf-on-tertiary-containe: 55, 11, 30;
+ --color-sf-on-surface: 28, 27, 31;
+ --color-sf-on-surface-variant: 73, 69, 78;
+ --color-sf-on-background: 28, 27, 31;
+ --color-sf-outline: 121, 116, 126;
+ --color-sf-outline-variant: 196, 199, 197;
+ --color-sf-shadow: 0, 0, 0;
+ --color-sf-surface-tint-color: 103, 80, 164;
+ --color-sf-inverse-surface: 49, 48, 51;
+ --color-sf-inverse-on-surface: 244, 239, 244;
+ --color-sf-inverse-primary: 208, 188, 255;
+ --color-sf-scrim: 0, 0, 0;
+ --color-sf-error: 179, 38, 30;
+ --color-sf-error-container: 249, 222, 220;
+ --color-sf-on-error: 255, 250, 250;
+ --color-sf-on-error-container: 65, 14, 11;
+ --color-sf-success: 32, 81, 7;
+ --color-sf-success-container: 209, 255, 186;
+ --color-sf-on-success: 244, 255, 239;
+ --color-sf-on-success-container: 13, 39, 0;
+ --color-sf-info: 1, 87, 155;
+ --color-sf-info-container: 233, 245, 255;
+ --color-sf-on-info: 250, 253, 255;
+ --color-sf-on-info-container: 0, 51, 91;
+ --color-sf-warning: 145, 76, 0;
+ --color-sf-warning-container: 254, 236, 222;
+ --color-sf-on-warning: 255, 255, 255;
+ --color-sf-on-warning-container: 47, 21, 0;
+ --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
+ --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
+ --color-sf-diagram-palette-background: --color-sf-white;
+ --color-sf-success-text: 255, 255, 255;
+ --color-sf-warning-text: 255, 255, 255;
+ --color-sf-danger-text: 255, 255, 255;
+ --color-sf-info-text: 255, 255, 255;
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
+ --color-sf-secondary-bg-color: var(--color-sf-surface);
+}
+
+$black: mapcolorvariable('black') !default;
+$white: mapcolorvariable('white') !default;
+
+$primary : mapcolorvariable('primary') !default;
+$primary-container: mapcolorvariable('primary-container') !default;
+$secondary: mapcolorvariable('secondary') !default;
+$secondary-container: mapcolorvariable('secondary-container') !default;
+$tertiary: mapcolorvariable('tertiary') !default;
+$tertiary-container: mapcolorvariable('tertiary-container') !default;
+$surface: mapcolorvariable('surface') !default;
+$surface-variant: mapcolorvariable('surface-variant') !default;
+$background: mapcolorvariable('background') !default;
+$on-primary: mapcolorvariable('on-primary') !default;
+$on-primary-container: mapcolorvariable('on-primary-container') !default;
+$on-secondary: mapcolorvariable('on-secondary') !default;
+$on-secondary-container: mapcolorvariable('on-secondary-container') !default;
+$on-tertiary: mapcolorvariable('on-tertiary') !default;
+$on-tertiary-containe: mapcolorvariable('on-tertiary-containe') !default;
+$on-surface: mapcolorvariable('on-surface') !default;
+$on-surface-variant: mapcolorvariable('on-surface-variant') !default;
+$on-background: mapcolorvariable('on-background') !default;
+$outline: mapcolorvariable('outline') !default;
+$outline-variant: mapcolorvariable('outline-variant') !default;
+$shadow: mapcolorvariable('shadow') !default;
+$surface-tint-color: mapcolorvariable('surface-tint-color') !default;
+$inverse-surface: mapcolorvariable('inverse-surface') !default;
+$inverse-on-surface: mapcolorvariable('inverse-on-surface') !default;
+$inverse-primary: mapcolorvariable('inverse-primary') !default;
+$scrim:mapcolorvariable('scrim') !default;
+$error: mapcolorvariable('error') !default;
+$error-container: mapcolorvariable('error-container') !default;
+$on-error: mapcolorvariable('on-error') !default;
+$on-error-container: mapcolorvariable('on-error-container') !default;
+$success: mapcolorvariable('success') !default;
+$success-container: mapcolorvariable('success-container') !default;
+$on-success: mapcolorvariable('on-success') !default;
+$on-success-container: mapcolorvariable('on-success-container') !default;
+$info: mapcolorvariable('info') !default;
+$info-container: mapcolorvariable('info-container') !default;
+$on-info: mapcolorvariable('on-info') !default;
+$on-info-container: mapcolorvariable('on-info-container') !default;
+$warning: mapcolorvariable('warning') !default;
+$warning-container: mapcolorvariable('warning-container') !default;
+$on-warning: mapcolorvariable('on-warning') !default;
+$on-warning-container: mapcolorvariable('on-warning-container') !default;
+$success-text: mapcolorvariable('success-text') !default;
+$warning-text: mapcolorvariable('warning-text') !default;
+$info-text: mapcolorvariable('info-text') !default;
+$danger-text: mapcolorvariable('danger-text') !default;
+
+$opacity0: 0 !default;
+$opacity4: .04 !default;
+$opacity5: .05 !default;
+$opacity6: .06 !default;
+$opacity8: .08 !default;
+$opacity11: .11 !default;
+$opacity12: .12 !default;
+$opacity14: .14 !default;
+$opacity16: .16 !default;
+
+$surface1: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)), rgba($surface) !default;
+$surface2: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)), rgba($surface) !default;
+$surface3: linear-gradient(0deg, rgba($primary, $opacity11), rgba($primary, $opacity11)), rgba($surface) !default;
+$surface4: linear-gradient(0deg, rgba($primary, $opacity12), rgba($primary, $opacity12)), rgba($surface) !default;
+$surface5: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)), rgba($surface) !default;
+$surface6: linear-gradient(0deg, rgba($primary, $opacity16), rgba($primary, $opacity16)), rgba($surface) !default;
+
+$level1: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
+$level2: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
+$level3: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
+$level4: 0 2px 3px 0 rgba(0, 0, 0, .3), 0 6px 10px 4px rgba(0, 0, 0, .15);
+$level5: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 8px 12px 6px rgba(0, 0, 0, .15);
+
+$primary: $primary !default;
+$primary-text-color: $on-primary !default;
+$primary-light: $primary-container !default;
+$primary-lighter: $primary-light !default;
+$primary-dark: $surface-tint-color !default;
+$primary-darker: $on-primary-container !default;
+$success: $success !default;
+$transparent: transparent !default;
+$info: $info !default;
+$warning: $warning !default;
+$danger: $error !default;
+$success-light: $success-container !default;
+$info-light: $info-container !default;
+$warning-light: $warning-container !default;
+$danger-light: $error-container !default;
+$success-dark: $success !default;
+$info-dark: $info !default;
+$warning-dark: $warning !default;
+$danger-dark:$error !default;
+$success-light-alt: $success-light !default;
+$info-light-alt: $info-light !default;
+$warning-light-alt: $warning-light !default;
+$danger-light-alt: $danger-light !default;
+
+$content-bg-color: $surface !default;
+$content-bg-color-alt1: $surface1 !default;
+$content-bg-color-alt2: $surface2 !default;
+$content-bg-color-alt3: $surface3 !default;
+$content-bg-color-alt4: $surface4 !default;
+$content-bg-color-alt5: $surface5 !default;
+$content-bg-color-alt6: $surface6 !default;
+$content-bg-color-hover: rgba($on-surface, $opacity5) !default;
+$content-bg-color-pressed: rgba($on-surface, $opacity8) !default;
+$content-bg-color-focus: rgba($on-surface, $opacity4) !default;
+$content-bg-color-selected: $primary-light !default;
+$content-bg-color-dragged: $primary-light !default;
+$content-bg-color-disabled: $white !default;
+$flyout-bg-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)), rgba($content-bg-color) !default;
+$flyout-bg-color-hover: rgba($on-surface, $opacity5) !default;
+$flyout-bg-color-pressed: rgba($on-surface, $opacity8) !default;
+$flyout-bg-color-selected: rgba($primary-container, .65) !default;
+$flyout-bg-color-focus: rgba($on-surface, $opacity4) !default;
+$overlay-bg-color: rgba($scrim, .5) !default;
+$table-bg-color-hover: rgba($on-surface, $opacity5) !default;
+$table-bg-color-pressed: rgba($primary-container, .65) !default;
+$table-bg-color-selected: rgba($primary-container, .65) !default;
+
+$colorpicker-gradient-1: #f00 !default;
+$colorpicker-gradient-2: #ff0 !default;
+$ccolorpicker-gradient-3: #0f0 !default;
+$colorpicker-gradient-4: #0ff !default;
+$colorpicker-gradient-5: #00f !default;
+$colorpicker-gradient-6: #f0f !default;
+$colorpicker-gradient-7: #ff0004 !default;
+$spreadsheet-selection-1: #673ab8 !default;
+$spreadsheet-selection-2: #9c27b0 !default;
+$spreadsheet-selection-3: #029688 !default;
+$spreadsheet-selection-4: #4caf51 !default;
+$spreadsheet-selection-5: #fe9800 !default;
+$spreadsheet-selection-6: #3f52b5 !default;
+
+$content-text-color: $on-surface !default;
+$content-text-color-alt1: $on-surface-variant !default;
+$content-text-color-alt2: $on-secondary-container !default;
+$content-text-color-alt3: $on-tertiary !default;
+$content-text-color-inverse: $inverse-on-surface !default;
+$content-text-color-hover: $content-text-color !default;
+$content-text-color-pressed: $content-text-color !default;
+$content-text-color-focus: $content-text-color !default;
+$content-text-color-selected: $content-text-color !default;
+$content-text-color-dragged: $content-text-color !default;
+$content-text-color-disabled: rgba($on-surface, .38) !default;
+$placeholder-text-color: $outline !default;
+$flyout-text-color: $content-text-color !default;
+$flyout-text-color-hover: $content-text-color !default;
+$flyout-text-color-pressed: $content-text-color !default;
+$flyout-text-color-selected: $content-text-color !default;
+$flyout-text-color-focus: $content-text-color !default;
+$flyout-text-color-disabled: rgba($on-surface, .38) !default;
+$table-text-color-hover: $content-text-color !default;
+$table-text-color-pressed: $content-text-color !default;
+$table-text-color-selected: $content-text-color !default;
+
+$icon-color: $on-surface-variant !default;
+$icon-color-hover: $on-surface !default;
+$icon-color-pressed: $on-surface-variant !default;
+$icon-color-disabled: rgba($on-surface-variant, .38) !default;
+
+$border-light: $outline-variant !default;
+$border: $outline !default;
+$border-alt: $on-surface-variant !default;
+$border-dark: rgba($on-surface, .38) !default;
+$border-hover: $border-light !default;
+$border-pressed: $border-light !default;
+$border-focus: $border-light !default;
+$border-selected: $border-light !default;
+$border-dragged: $border-light !default;
+$border-disabled: $border-light !default;
+$border-warning: $warning !default;
+$border-error: $error !default;
+$border-success: $success !default;
+$spreadsheet-gridline: $surface-variant !default;
+$flyout-border: $border-light !default;
+
+$tooltip-bg-color: $inverse-surface !default;
+$tooltip-border: $inverse-surface !default;
+$tooltip-text-color: $inverse-on-surface !default;
+
+$shadow: 0 .8px 16px rgba($black, .15) !default;
+$shadow-sm: $level1 !default;
+$shadow-md: $level2 !default;
+$shadow-lg: $level3 !default;
+$shadow-xl: $level4 !default;
+$shadow-2xl: $level5 !default;
+$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
+$shadow-none: 0 0 rgba($black, 0) !default;
+
+$shadow-focus-ring1: 0 0 0 1px #fff, 0 0 0 3px #000 !default;
+$shadow-focus-ring2: 0 0 0 1px rgba($black, .95) !default;
+$primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default;
+$secondary-shadow-focus: 0 0 0 4px rgba($secondary, .5) !default;
+$success-shadow-focus: 0 0 0 4px rgba($success, .5) !default;
+$danger-shadow-focus: 0 0 0 4px rgba($danger, .5) !default;
+$info-shadow-focus: 0 0 0 4px rgba($info, .5) !default;
+$warning-shadow-focus: 0 0 0 4px rgba($warning, .5) !default;
+
+$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
+
+$text-xxs: 10px !default;
+$text-xs: 12px !default;
+$text-sm: 14px !default;
+$text-base: 16px !default;
+$text-lg: 18px !default;
+$text-xl: 20px !default;
+$text-2xl: 24px !default;
+$text-3xl: 28px !default;
+$text-4xl: 32px !default;
+$text-5xl: 42px !default;
+$text-6xl: 68px !default;
+$text-7xl: 78px !default;
+$text-8xl: 96px !default;
+$text-9xl: 128px !default;
+
+$h1-font-size: 40px !default;
+$h2-font-size: 32px !default;
+$h3-font-size: 28px !default;
+$h4-font-size: $text-2xl !default;
+$h5-font-size: $text-xl !default;
+$h6-font-size: $text-base !default;
+
+$leading-none: 1 !default;
+$leading-tight: 1.25 !default;
+$leading-snug: 1.375 !default;
+$leading-normal: 1.5 !default;
+$leading-relaxed: 1.625 !default;
+$leading-loose: 2 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$secondary-bg-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)), rgba($content-bg-color) !default;
+$secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)) !default;
+$secondary-text-color: $on-surface !default;
+$secondary-bg-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)), rgba($content-bg-color) !default;
+$secondary-border-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)) !default;
+$secondary-text-color-hover: $secondary-text-color !default;
+$secondary-bg-color-pressed: linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)), rgba($content-bg-color) !default;
+$secondary-border-color-pressed: linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)) !default;
+$secondary-text-color-pressed: $secondary-text-color !default;
+$secondary-bg-color-focus: $secondary-bg-color-hover !default;
+$secondary-border-color-focus: $secondary-border-color-hover !default;
+$secondary-text-color-focus: $secondary-text-color-hover !default;
+$secondary-bg-color-disabled: rgba($secondary, .12) !default;
+$secondary-border-color-disabled: rgba($secondary, 0) !default;
+$secondary-text-color-disabled: rgba($on-surface, .38) !default;
+
+$primary-bg-color: $primary !default;
+$primary-border-color: $primary !default;
+$primary-text: $primary-text-color !default;
+$primary-bg-color-hover: linear-gradient(0deg, rgba($primary-text, $opacity8), rgba($primary-text, $opacity8)), rgba($primary-bg-color) !default;
+$primary-border-color-hover: $primary-bg-color-hover !default;
+$primary-text-hover: $primary-text !default;
+$primary-bg-color-pressed: linear-gradient(0deg, rgba($primary-text, $opacity12), rgba($primary-text, $opacity12)), rgba($primary-bg-color) !default;
+$primary-border-color-pressed: $primary-bg-color-pressed !default;
+$primary-text-pressed: $primary-text-color !default;
+$primary-bg-color-focus: $primary-bg-color-hover !default;
+$primary-border-color-focus: $primary-border-color-hover !default;
+$primary-text-focus: $primary-text !default;
+$primary-bg-color-disabled: rgba($secondary, .12) !default;
+$primary-border-color-disabled: rgba($secondary, 0) !default;
+$primary-text-disabled: rgba($on-surface, .38) !default;
+
+$success-bg-color: $success !default;
+$success-border-color: $success !default;
+$success-text: $white !default;
+$success-bg-color-hover: linear-gradient(0deg, rgba($success-text, $opacity8), rgba($success-text, $opacity8)), rgba($success-bg-color) !default;
+$success-border-color-hover: $success-bg-color-hover !default;
+$success-text-hover: $success-text !default;
+$success-bg-color-pressed: linear-gradient(0deg, rgba($success-text, $opacity12), rgba($success-text, $opacity12)), rgba($success-bg-color) !default;
+$success-border-color-pressed: $success-bg-color-pressed !default;
+$success-text-pressed: $success-text !default;
+$success-bg-color-focus: $success-bg-color-hover !default;
+$success-border-color-focus: $success-border-color-hover !default;
+$success-text-focus: $success-text !default;
+$success-bg-color-disabled: rgba($secondary, .12) !default;
+$success-border-color-disabled: $success-bg-color-disabled !default;
+$success-text-disabled: rgba($on-surface, .38) !default;
+
+$warning-bg-color: $warning !default;
+$warning-border-color: $warning !default;
+$warning-text: $white !default;
+$warning-bg-color-hover: linear-gradient(0deg, rgba($warning-text, $opacity8), rgba($warning-text, $opacity8)), rgba($warning-bg-color) !default;
+$warning-border-color-hover: $warning-bg-color-hover !default;
+$warning-text-hover: $warning-text !default;
+$warning-bg-color-pressed: linear-gradient(0deg, rgba($warning-text, $opacity12), rgba($warning-text, $opacity12)), rgba($warning-bg-color) !default;
+$warning-border-color-pressed: $warning-bg-color-pressed !default;
+$warning-text-pressed: $warning-text !default;
+$warning-bg-color-focus: $warning-bg-color-hover !default;
+$warning-border-color-focus: $warning-border-color-hover !default;
+$warning-text-focus: $warning-text !default;
+$warning-bg-color-disabled: rgba($secondary, .12) !default;
+$warning-border-color-disabled: $warning-bg-color-disabled !default;
+$warning-text-disabled: rgba($on-surface, .38) !default;
+
+$danger-bg-color: $danger !default;
+$danger-border-color: $danger !default;
+$danger-text: $white !default;
+$danger-bg-color-hover: linear-gradient(0deg, rgba($danger-text, $opacity8), rgba($danger-text, $opacity8)), rgba($danger-bg-color) !default;
+$danger-border-color-hover: $danger-bg-color-hover !default;
+$danger-text-hover: $danger-text !default;
+$danger-bg-color-pressed: linear-gradient(0deg, rgba($danger-text, $opacity12), rgba($danger-text, $opacity12)), rgba($danger-bg-color) !default;
+$danger-border-color-pressed: $danger-bg-color-pressed !default;
+$danger-text-pressed: $danger-text !default;
+$danger-bg-color-focus: $danger-bg-color-hover !default;
+$danger-border-color-focus: $danger-border-color-hover !default;
+$danger-text-focus: $danger-text !default;
+$danger-bg-color-disabled: rgba($secondary, .12) !default;
+$danger-border-color-disabled: $danger-bg-color-disabled !default;
+$danger-text-disabled: rgba($on-surface, .38) !default;
+
+$info-text: $white !default;
+$info-bg-color: $info !default;
+$info-border-color: $info-bg-color !default;
+$info-bg-color-hover: linear-gradient(0deg, rgba($info-text, $opacity8), rgba($info-text, $opacity8)), rgba($info-bg-color) !default;
+$info-border-color-hover: $info-bg-color-hover !default;
+$info-text-hover: $info-text !default;
+$info-bg-color-pressed: linear-gradient(0deg, rgba($info-text, $opacity12), rgba($info-text, $opacity12)), rgba($info-bg-color) !default;
+$info-border-color-pressed: $info-bg-color-pressed !default;
+$info-text-pressed: $info-text !default;
+$info-bg-color-focus: $info-bg-color-hover !default;
+$info-border-color-focus: $info-border-color-hover !default;
+$info-text-focus: $info-text-hover !default;
+$info-bg-color-disabled: rgba($secondary, .12) !default;
+$info-border-color-disabled: $info-bg-color-disabled !default;
+$info-text-disabled: rgba($on-surface, .38) !default;
+
+$primary-outline: $primary-bg-color !default;
+$primary-outline-border: $outline !default;
+$secondary-outline: $secondary-text-color !default;
+$secondary-outline-border: $outline !default;
+$warning-outline: $warning-bg-color !default;
+$warning-outline-border: $outline !default;
+$danger-outline: $danger-bg-color !default;
+$danger-outline-border: $outline !default;
+$success-outline: $success-bg-color !default;
+$success-outline-border: $outline !default;
+$info-outline: $info-bg-color !default;
+$info-outline-border:$outline !default;
+
+$toast-text-color: $content-text-color !default;
+$toast-alt-text-color: $content-text-color !default;
+
+$series-1: $surface-variant !default;
+$series-2: $outline-variant !default;
+$series-3: $outline !default;
+$series-4: $on-surface-variant !default;
+$series-5: #6200ee !default;
+$series-6: #e77a16 !default;
+$series-7: #82c100 !default;
+$series-8: #7107dc !default;
+$series-9: #05b3da !default;
+$series-10: #828486 !default;
+$series-11: #b1212d !default;
+$series-12: #38be09 !default;
+$skin-name: 'Material3' !default;
+$theme-name: 'Material3' !default;
+
+$diagram-palette-background: $white !default;
+$diagram-palette-hover-background: $content-bg-color-hover !default;
+$diagram-palette-selection-background: rgba($on-surface, .12) !default;
+
+$shape-none:0 !default;
+$shape-extra-small:4px !default;
+$shape-small:8px !default;
+$shape-medium:12px !default;
+$shape-Large:16px !default;
+$shape-extra-large:16px !default;
+$shape-full:50% !default;
+
+$button-radius: $shape-full !default;
+$button-radius-small: $shape-full !default;
+$button-radius-bigger: $shape-full !default;
+$input-radius: $shape-extra-small !default;
+$input-radius-small: $shape-extra-small !default;
+$input-radius-bigger: $shape-extra-small !default;
+$model-radius: $shape-medium !default;
+$model-radius-small: $shape-small !default;
+$model-radius-bigger: $shape-Large !default;
+$flyout-radius: $shape-extra-small !default;
+$flyout-radius-bigger: $shape-extra-small !default;
+$flyout-radius-small: $shape-extra-small !default;
+$chkbox-radius:2px !default;
+$chkbox-radius-small:2px !default;
+$chkbox-radius-bigger:2px !default;
+$card-radius:$shape-small !default;
+$card-radius-small:$shape-extra-small !default;
+$card-radius-bigger:$shape-medium !default;
+$msg-radius:$shape-none !default;
+$msg-radius-small: $msg-radius !default;
+$msg-radius-bigger: $msg-radius !default;
+$toast-radius: $shape-extra-small !default;
+$toast-radius-small: $toast-radius !default;
+$toast-radius-bigger: $toast-radius !default;
+$chip-radius: $shape-extra-small !default;
+$chip-radius-small: $shape-extra-small !default;
+$chip-radius-bigger: $shape-small !default;
+
+$btn-secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 0), rgba($content-bg-color, 0)) !default;
+
+$msg-color: rgba($on-surface) !default;
+$msg-bg-color: $content-bg-color-alt1 !default;
+$msg-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default;
+$msg-color-alt1: rgba($on-surface) !default;
+$msg-bg-color-alt1: $transparent !default;
+$msg-border-color-alt1: rgba($outline-variant) !default;
+$msg-color-alt2: rgba($inverse-on-surface) !default;
+$msg-bg-color-alt2: rgba($inverse-surface) !default;
+$msg-border-color-alt2: rgba($inverse-surface) !default;
+
+$msg-icon-color: rgba($on-surface-variant) !default;
+$msg-icon-color-alt1: rgba($on-surface-variant) !default;
+$msg-icon-color-alt2: rgba($inverse-on-surface) !default;
+
+$msg-close-icon-color: rgba($icon-color) !default;
+$msg-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-close-icon-color-alt2: rgba($inverse-on-surface) !default;
+
+$msg-success-color: rgba($on-success-container) !default;
+$msg-success-bg-color: rgba($success-container) !default;
+$msg-success-border-color: rgba($success-container) !default;
+$msg-success-color-alt1: rgba($on-success-container) !default;
+$msg-success-bg-color-alt1: $transparent !default;
+$msg-success-border-color-alt1: rgba($success) !default;
+$msg-success-color-alt2: rgba($on-success) !default;
+$msg-success-bg-color-alt2: rgba($success) !default;
+$msg-success-border-color-alt2: rgba($success) !default;
+
+$msg-success-icon-color: rgba($success) !default;
+$msg-success-icon-color-alt1: rgba($on-success-container) !default;
+$msg-success-icon-color-alt2: rgba($on-success) !default;
+
+$msg-success-close-icon-color: rgba($icon-color) !default;
+$msg-success-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-success-close-icon-color-alt2: rgba($on-success) !default;
+
+$msg-danger-color: rgba($on-error-container) !default;
+$msg-danger-bg-color: rgba($error-container) !default;
+$msg-danger-border-color: rgba($error-container) !default;
+$msg-danger-color-alt1: rgba($on-error-container) !default;
+$msg-danger-bg-color-alt1: $transparent !default;
+$msg-danger-border-color-alt1: rgba($error) !default;
+$msg-danger-color-alt2: rgba($on-error) !default;
+$msg-danger-bg-color-alt2: rgba($error) !default;
+$msg-danger-border-color-alt2: rgba($error) !default;
+
+$msg-danger-icon-color: rgba($error) !default;
+$msg-danger-icon-color-alt1: rgba($on-error-container) !default;
+$msg-danger-icon-color-alt2: rgba($on-error) !default;
+
+$msg-danger-close-icon-color: rgba($icon-color) !default;
+$msg-danger-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-danger-close-icon-color-alt2: rgba($on-error) !default;
+
+$msg-warning-color: rgba($on-warning-container) !default;
+$msg-warning-bg-color: rgba($warning-container) !default;
+$msg-warning-border-color: rgba($warning-container) !default;
+$msg-warning-color-alt1: rgba($on-warning-container) !default;
+$msg-warning-bg-color-alt1: $transparent !default;
+$msg-warning-border-color-alt1: rgba($warning) !default;
+$msg-warning-color-alt2: rgba($on-warning) !default;
+$msg-warning-bg-color-alt2: rgba($warning) !default;
+$msg-warning-border-color-alt2: rgba($warning) !default;
+
+$msg-warning-icon-color: rgba($warning) !default;
+$msg-warning-icon-color-alt1: rgba($on-warning-container) !default;
+$msg-warning-icon-color-alt2: rgba($on-warning) !default;
+
+$msg-warning-close-icon-color: rgba($icon-color) !default;
+$msg-warning-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-warning-close-icon-color-alt2: rgba($on-warning) !default;
+
+$msg-info-color: rgba($on-info-container) !default;
+$msg-info-bg-color: rgba($info-container) !default;
+$msg-info-border-color: rgba($info-container) !default;
+$msg-info-color-alt1: rgba($on-info-container) !default;
+$msg-info-bg-color-alt1: $transparent !default;
+$msg-info-border-color-alt1: rgba($info) !default;
+$msg-info-color-alt2: rgba($on-info) !default;
+$msg-info-bg-color-alt2: rgba($info) !default;
+$msg-info-border-color-alt2: rgba($info) !default;
+
+$msg-info-icon-color: rgba($info) !default;
+$msg-info-icon-color-alt1: rgba($on-info-container) !default;
+$msg-info-icon-color-alt2: rgba($on-info) !default;
+
+$msg-info-close-icon-color: rgba($icon-color) !default;
+$msg-info-close-icon-color-alt1: rgba($icon-color) !default;
+$msg-info-close-icon-color-alt2: rgba($on-info) !default;
+
+$appbar-bg-color-alt1: $content-bg-color-alt2 !default;
+$appbar-color-alt1: rgba($content-text-color) !default;
+$appbar-border-color-alt1: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)) !default;
+$appbar-hover-bg-color-alt1: rgba(0, 0, 0, .05) !default;
+
+$appbar-bg-color-alt2: rgba($inverse-surface) !default;
+$appbar-color-alt2: rgba($inverse-on-surface) !default;
+$appbar-border-color-alt2: rgba($inverse-surface) !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+$appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default;
+$appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default;
+
+$rating-selected-color: $primary !default;
+$rating-unrated-color: $content-bg-color-alt3 !default;
+$rating-selected-disabled-color: rgba($on-surface, .24) !default;
+$rating-unrated-disabled-color: rgba($on-surface, .08) !default;
+$rating-selected-hover-color: darken-color(rgba($primary), 5%) !default;
+$rating-unrated-hover-color: darken-color(rgba($primary), 10%) !default;
+$rating-pressed-color: darken-color(rgba($primary), 10%) !default;
+
+$skeleton-wave-color: rgba(255, 255, 255, 1) !default;
+
+$splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
+$splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
+$splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
+
+$gantt-taskbar-color: linear-gradient(0deg, rgba($primary, .75), rgba($primary, .75)), rgba($content-bg-color) !default;
+
+$grey-white: #fff !default;
+$base-font: #000 !default;
+$grey-50: #fafafa !default;
+$grey-300: #e0e0e0 !default;
+$grey-400: #bdbdbd !default;
+$grey-500: #9e9e9e !default;
+$grey-600: #757575 !default;
+$grey-700: #616161 !default;
+$grey-800: #424242 !default;
+$grey-900: #212121 !default;
+$sd-focus-box-shadow: $secondary-shadow-focus !default;
+$toooltip-text-color: #f9fafb !default;
+
+$range-button-font-color: $info !default;
+$ddl-input-placeholder-padding: 0 0 0 8px !default;
+$theme-light: $primary-light !default;
+$gray-600: #6c757d !default;
+$gray-300: #dee2e6 !default;
+$gray-500: #adb5bd !default;
+$gray-900: #212529 !default;
+$primary-300: #7986cb;
+$gray-400: #ced4da !default;
+
+$font-icon-8: 8px !default;
+$font-icon-9: 9px !default;
+$font-icon-10: 10px !default;
+$font-icon-12: 12px !default;
+$font-icon-13: 13px !default;
+$font-icon-14: 14px !default;
+$font-icon-15: 15px !default;
+$font-icon-16: 16px !default;
+$font-icon-17: 17px !default;
+$font-icon-18: 18px !default;
+$font-icon-20: 20px !default;
+$font-icon-22: 22px !default;
+$font-icon-24: 24px !default;
+$font-icon-26: 26px !default;
+$font-icon-28: 28px !default;
+$font-icon-32: 32px !default;
+
+.sf-dark-mode {
+ --color-sf-black: 0, 0, 0;
+ --color-sf-white: 255, 255, 255;
+ --color-sf-primary: 208, 188, 255;
+ --color-sf-primary-container: 79, 55, 139;
+ --color-sf-secondary: 204, 194, 220;
+ --color-sf-secondary-container: 74, 68, 88;
+ --color-sf-tertiary: 239, 184, 200;
+ --color-sf-tertiary-container: 99, 59, 72;
+ --color-sf-surface: 28, 27, 31;
+ --color-sf-surface-variant: 73, 69, 79;
+ --color-sf-background: var(--color-sf-surface);
+ --color-sf-on-primary: 55, 30, 115;
+ --color-sf-on-primary-container: 234, 221, 255;
+ --color-sf-on-secondary: 51, 45, 65;
+ --color-sf-on-secondary-container: 232, 222, 248;
+ --color-sf-on-tertiary: 73, 37, 50;
+ --color-sf-on-tertiary-containe: 255, 216, 228;
+ --color-sf-on-surface: 230, 225, 229;
+ --color-sf-on-surface-variant: 202, 196, 208;
+ --color-sf-on-background: 230, 225, 229;
+ --color-sf-outline: 147, 143, 153;
+ --color-sf-outline-variant: 68, 71, 70;
+ --color-sf-shadow: 0, 0, 0;
+ --color-sf-surface-tint-color: 208, 188, 255;
+ --color-sf-inverse-surface: 230, 225, 229;
+ --color-sf-inverse-on-surface: 49, 48, 51;
+ --color-sf-inverse-primary: 103, 80, 164;
+ --color-sf-scrim: 0, 0, 0;
+ --color-sf-error: 242, 184, 181;
+ --color-sf-error-container: 140, 29, 24;
+ --color-sf-on-error: 96, 20, 16;
+ --color-sf-on-error-container: 249, 222, 220;
+ --color-sf-success: 83, 202, 23;
+ --color-sf-success-container: 22, 62, 2;
+ --color-sf-on-success: 13, 39, 0;
+ --color-sf-on-success-container: 183, 250, 150;
+ --color-sf-info: 71, 172, 251;
+ --color-sf-info-container: 0, 67, 120;
+ --color-sf-on-info: 0, 51, 91;
+ --color-sf-on-info-container: 173, 219, 255;
+ --color-sf-warning: 245, 180, 130;
+ --color-sf-warning-container: 123, 65, 0;
+ --color-sf-on-warning: 99, 52, 0;
+ --color-sf-on-warning-container: 255, 220, 193;
+ --color-sf-spreadsheet-gridline: 231, 224, 236;
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
+ --color-sf-success-text: 0, 0, 0;
+ --color-sf-warning-text: 0, 0, 0;
+ --color-sf-info-text: 0, 0, 0;
+ --color-sf-danger-text: 0, 0, 0;
+ --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
+}
+
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $warning !default;
+$success-font-color: $success !default;
+$information-font-color: $info !default;
+
+$frozen-shadow: rgba(0, 0, 0, .12) !default;
+$frozen-shadow-2: rgba(0, 0, 0, .12) !default;
\ No newline at end of file
diff --git a/components/base/styles/material3-dark.scss b/components/base/styles/material3-dark.scss
new file mode 100644
index 0000000..c14a867
--- /dev/null
+++ b/components/base/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
diff --git a/components/base/styles/material3.scss b/components/base/styles/material3.scss
new file mode 100644
index 0000000..9eeb62e
--- /dev/null
+++ b/components/base/styles/material3.scss
@@ -0,0 +1,2 @@
+@import 'material3-definition.scss';
+@import 'all.scss';
diff --git a/components/base/tsconfig.json b/components/base/tsconfig.json
new file mode 100644
index 0000000..1da9467
--- /dev/null
+++ b/components/base/tsconfig.json
@@ -0,0 +1,51 @@
+{
+ "compilerOptions": {
+ "allowUnreachableCode": false, // Disable unreachable code warnings.
+ "allowUnusedLabels": false, // Disable unused label warnings.
+ "declaration": true, // Generate .d.ts files.
+ "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing.
+ "jsx": "react-jsx", // Enable JSX syntax support.
+ "module": "ESNext", // Use ESNext module system.
+ "moduleResolution": "Node", // Resolve modules using Node-style resolution.
+ "noEmitOnError": true, // Prevent emitting JS files if there are errors.
+ "noFallthroughCasesInSwitch": true, // Prevent fallthrough in switch cases.
+ "noImplicitAny": false, // Disallow implicit any types.
+ "noImplicitReturns": true, // Ensure functions return a value.
+ "noUnusedLocals": true, // Warn on unused local variables.
+ "noUnusedParameters": true, // Warn on unused function parameters.
+ "strict": false, // Enable all strict checks.
+ "strictBindCallApply": false, // Enable strict checking of bind, call, and apply methods.
+ "strictFunctionTypes": false, // Enable strict checking of function types.
+ "strictNullChecks": false, // Enable strict null checks.
+ "skipLibCheck": true, // Skip checking of declaration files.
+ "sourceMap": true, // Generate source maps.
+ "target": "ES2020", // Set ECMAScript version to ES2020.
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@testing-library"
+ ], // Specify root directory for type declarations.
+ "types": [
+ "node",
+ "react",
+ "react-dom"
+ ], // Include type declarations.
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ] // Include libraries for ES2020 and DOM.
+ },
+ "include": [
+ "src",
+ "spec",
+ "samples"
+ ], // Include only the provided directory for compilation.
+ "exclude": [
+ "node_modules",
+ "dist",
+ "public",
+ "coverage",
+ "test-report"
+ ], // Exclude these directories from compilation.
+ "compileOnSave": false // Disable Compile-on-Save.
+}
\ No newline at end of file
diff --git a/components/buttons/CHANGELOG.md b/components/buttons/CHANGELOG.md
new file mode 100644
index 0000000..7a08d63
--- /dev/null
+++ b/components/buttons/CHANGELOG.md
@@ -0,0 +1,108 @@
+# Changelog
+
+## [Unreleased]
+
+## 29.2.4 (2025-05-14)
+
+### Button
+
+The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability.
+
+Explore the demo here
+
+**Key features**
+
+- **Color Variants:** Style buttons with distinct color options like 'warning', 'success', 'danger', and 'info' to fit your application's theme.
+
+- **Icon Support:** Integrate SVG icons within buttons for enhanced visual cues. Configure the icon's position to be left, right, top, or bottom relative to button text.
+
+- **Toggle Functionality:** Use the button as a toggle to maintain and represent states within your application, enabling buttons to switch between active and inactive states upon user interaction.
+
+- **Size Options:** Adjust button dimensions with size variants such as 'small', 'medium' and 'bigger', allowing for flexibility in different UI contexts.
+
+- **Variant Styles:** Choose from various button styles like 'outlind', 'filled', and 'flat' to seamlessly integrate with your design language.
+
+- **Selection Management:** Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons.
+
+### Checkbox
+
+The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications.
+
+Explore the demo here
+
+**Key features**
+
+- **Selection States:** The Checkbox component can be configured to be in checked, unchecked, or indeterminate states. This provides a visual cue for users to understand the current selection state.
+
+- **Label Support:** Display informative text alongside the checkbox to clearly convey its purpose to users. The label can be positioned either before or after the checkbox element based on UI preferences.
+
+- **Label Positioning:** Configure the label placement with the `labelPlacement` prop, choosing whether the label appears before or after the Checkbox.
+
+### Chip
+
+The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element.
+
+Explore the demo here
+
+**Key features**
+
+- **Variants:** Display chips with different visual styles using either 'filled' or 'outlined' variants to match your design requirements.
+
+- **Colors:** Customize the appearance with predefined color options including primary, info, danger, success, and warning.
+
+- **Icons and Avatars:** Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context.
+
+### ChipList
+
+The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements.
+
+Explore the demo here
+
+**Key features**
+
+- **Selection Modes:** Supports three selection types - 'single', 'multiple', and 'none' to control how users can select chips.
+
+- **Data Binding:** Easily populate the ChipList with an array of strings, numbers, or custom chip configurations.
+
+- **Customizable Chips:** Each chip can be individually styled with avatars, leading icons, trailing icons, and different variants.
+
+- **Removable Chips:** Configure chips to be removable with built-in delete event handling.
+
+- **Controlled & Uncontrolled Modes:** Supports both controlled and uncontrolled component patterns for selection and deletion.
+
+### Floating Action Button
+
+The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options.
+
+Explore the demo here
+
+**Key features**
+
+- **Color Variants:** Customizable color options such as 'warning', 'success', 'danger', and 'info' are available to help the FAB blend seamlessly with your application's color scheme.
+
+- **Icon Customization:** Integrate SVG icons within buttons for enhanced visual appeal. Control icon placement relative to text with configurable options for positioning.
+
+- **Visibility Control:** Easily manage the visibility of the FAB using the `isVisible` prop, deciding if it should be displayed based on application logic.
+
+- **Positioning:** The FAB can be positioned flexibly with options like top-left, top-right, bottom-left, and bottom-right to fit different design requirements.
+
+- **Size Options:** Modify the size of the FAB with options for 'small', 'medium' and 'bigger', accommodating different interface contexts.
+
+- **Toggle Functionality:** Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios.
+
+
+### RadioButton
+
+The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users.
+
+Explore the demo here
+
+**Key features**
+
+- **Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group.
+
+- **Label Customization:** The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection.
+
+- **Label Positioning:** Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency.
+
+- **Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing.
diff --git a/components/buttons/README.md b/components/buttons/README.md
new file mode 100644
index 0000000..d0a7925
--- /dev/null
+++ b/components/buttons/README.md
@@ -0,0 +1,142 @@
+# React Buttons Components
+
+## What's Included in the React Button Package
+
+The React Button package includes the following list of components.
+
+### React Button
+
+The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability.
+
+Explore the demo [here](https://react.syncfusion.com/button).
+
+**Key features**
+
+- **Color Variants:** Style buttons with distinct color options like 'warning', 'success', 'danger', and 'info' to fit your application's theme.
+
+- **Icon Support:** Integrate SVG icons within buttons for enhanced visual cues. Configure the icon's position to be left, right, top, or bottom relative to button text.
+
+- **Toggle Functionality:** Use the button as a toggle to maintain and represent states within your application, enabling buttons to switch between active and inactive states upon user interaction.
+
+- **Size Options:** Adjust button dimensions with size variants such as 'small', 'medium' and 'bigger', allowing for flexibility in different UI contexts.
+
+- **Variant Styles:** Choose from various button styles like 'outlind', 'filled', and 'flat' to seamlessly integrate with your design language.
+
+- **Selection Management:** Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons.
+
+### React Checkbox
+
+The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications.
+
+Explore the demo [here](https://react.syncfusion.com/checkbox).
+
+**Key features**
+
+- **Selection States:** The Checkbox component can be configured to be in checked, unchecked, or indeterminate states. This provides a visual cue for users to understand the current selection state.
+
+- **Label Support:** Display informative text alongside the checkbox to clearly convey its purpose to users. The label can be positioned either before or after the checkbox element based on UI preferences.
+
+- **Label Positioning:** Configure the label placement with the `labelPlacement` prop, choosing whether the label appears before or after the Checkbox.
+
+### React Chip
+
+The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element.
+
+Explore the demo [here](https://react.syncfusion.com/chip).
+
+**Key features**
+
+- **Variants:** Display chips with different visual styles using either 'filled' or 'outlined' variants to match your design requirements.
+
+- **Colors:** Customize the appearance with predefined color options including primary, info, danger, success, and warning.
+
+- **Icons and Avatars:** Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context.
+
+### React ChipList
+
+The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements.
+
+Explore the demo [here](https://react.syncfusion.com/chiplist).
+
+**Key features**
+
+- **Selection Modes:** Supports three selection types - 'single', 'multiple', and 'none' to control how users can select chips.
+
+- **Data Binding:** Easily populate the ChipList with an array of strings, numbers, or custom chip configurations.
+
+- **Customizable Chips:** Each chip can be individually styled with avatars, leading icons, trailing icons, and different variants.
+
+- **Removable Chips:** Configure chips to be removable with built-in delete event handling.
+
+- **Controlled & Uncontrolled Modes:** Supports both controlled and uncontrolled component patterns for selection and deletion.
+
+### React Floating Action Button
+
+The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options.
+
+Explore the demo [here](https://react.syncfusion.com/floating-action-button).
+
+**Key features**
+
+- **Color Variants:** Customizable color options such as 'warning', 'success', 'danger', and 'info' are available to help the FAB blend seamlessly with your application's color scheme.
+
+- **Icon Customization:** Integrate SVG icons within buttons for enhanced visual appeal. Control icon placement relative to text with configurable options for positioning.
+
+- **Visibility Control:** Easily manage the visibility of the FAB using the `isVisible` prop, deciding if it should be displayed based on application logic.
+
+- **Positioning:** The FAB can be positioned flexibly with options like top-left, top-right, bottom-left, and bottom-right to fit different design requirements.
+
+- **Size Options:** Modify the size of the FAB with options for 'small', 'medium' and 'bigger', accommodating different interface contexts.
+
+- **Toggle Functionality:** Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios.
+
+### React RadioButton
+
+The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users.
+
+Explore the demo [here](https://react.syncfusion.com/radio-button).
+
+**Key features**
+
+- **Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group.
+
+- **Label Customization:** The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection.
+
+- **Label Positioning:** Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency.
+
+- **Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing.
+
+
+Trusted by the world's leading companies
+
+
+
+
+
+## Setup
+
+To install `buttons` and its dependent packages, use the following command,
+
+```sh
+npm install @syncfusion/react-buttons
+```
+
+## Support
+
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* Live chat
+
+## Changelog
+Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/buttons/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
+
+© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
diff --git a/components/buttons/gulpfile.js b/components/buttons/gulpfile.js
new file mode 100644
index 0000000..b1bf280
--- /dev/null
+++ b/components/buttons/gulpfile.js
@@ -0,0 +1,52 @@
+var gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+
+/**
+ * Compile ts files
+ */
+gulp.task('scripts', function(done) {
+ var ts = require('gulp-typescript');
+ var tsProject = ts.createProject('./tsconfig.json', {
+ typescript: require('typescript'),
+ declaration: true
+ });
+ var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' })
+ .pipe(tsProject());
+ tsResult.js.pipe(gulp.dest('./'))
+ .on('end', function() {
+ tsResult.dts.pipe(gulp.dest('./'))
+ .on('end', function() {
+ done();
+ });
+ });
+});
+
+/**
+ * Compile styles
+ */
+let isCompiled = true;
+gulp.task('styles', function (done) {
+ var styles = './styles/**/*.scss';
+ return gulp.src(styles, { base: './' })
+ .pipe(sass({
+ outputStyle: 'expanded',
+ includePaths: "./node_modules/@syncfusion/"
+ }).on('error', function (error) {
+ isCompiled = false;
+ console.log(error);
+ this.emit('end');
+ }))
+ .pipe(gulp.dest('.'))
+ .on('end', function () {
+ if (!isCompiled) {
+ process.exit(1);
+ }
+ done();
+ });
+});
+
+/**
+ * Build ts and scss files
+ */
+gulp.task('build', gulp.series('scripts', 'styles'));
+
diff --git a/components/buttons/license b/components/buttons/license
new file mode 100644
index 0000000..af45e1a
--- /dev/null
+++ b/components/buttons/license
@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/components/buttons/package.json b/components/buttons/package.json
new file mode 100644
index 0000000..2412a7c
--- /dev/null
+++ b/components/buttons/package.json
@@ -0,0 +1,62 @@
+{
+ "name": "@syncfusion/react-buttons",
+ "version": "29.2.4",
+ "description": "A package of feature-rich native React Pure components such as Button, CheckBox and RadioButton.",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "keywords": [
+ "syncfusion",
+ "web-components",
+ "react",
+ "syncfusion-react",
+ "react-buttons",
+ "button",
+ "react button",
+ "checkbox",
+ "react checkbox",
+ "checkboxes",
+ "radio button",
+ "radiobutton",
+ "radiobuttons",
+ "react radiobutton",
+ "primary button",
+ "flat button",
+ "round button",
+ "icon button",
+ "togglebutton",
+ "toggle button",
+ "form control",
+ "form controls",
+ "input",
+ "floating action button",
+ "floating button",
+ "fab"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/react-ui-components.git"
+ },
+ "homepage": "https://www.syncfusion.com/react-ui-components",
+ "module": "./index.js",
+ "readme": "README.md",
+ "dependencies": {
+ "@syncfusion/react-base": "~29.2.4"
+ },
+ "devDependencies": {
+ "gulp": "4.0.2",
+ "gulp-typescript": "5.0.1",
+ "typescript": "5.7.2",
+ "gulp-sass": "5.1.0",
+ "sass": "1.83.1",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
+ "@types/react": "19.0.1",
+ "@types/react-dom": "19.0.1",
+ "@types/node": "^22.15.17"
+ },
+ "scripts": {
+ "build": "gulp build"
+ },
+ "typings": "index.d.ts",
+ "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/buttons/src/button/button.tsx b/components/buttons/src/button/button.tsx
new file mode 100644
index 0000000..ebd38db
--- /dev/null
+++ b/components/buttons/src/button/button.tsx
@@ -0,0 +1,306 @@
+import { useEffect, useRef, useState, useImperativeHandle, forwardRef, ButtonHTMLAttributes, Ref } from 'react';
+import { preRender, SvgIcon, useProviderContext, useRippleEffect } from '@syncfusion/react-base';
+import * as React from 'react';
+
+/**
+ * Defines the label position of the component.
+ * ```props
+ * After :- When the label is positioned After, it appears to the right of the component.
+ * Before :- When the label is positioned Before, it appears to the left of the component.
+ * ```
+ */
+export type LabelPlacement = 'After' | 'Before';
+
+/**
+ * Specifies the position of an icon relative to text content in a button component.
+ */
+export enum IconPosition {
+ /**
+ * Positions the icon to the left of text content in a button.
+ */
+ Left = 'Left',
+
+ /**
+ * Positions the icon to the right of text content in a button.
+ */
+ Right = 'Right',
+
+ /**
+ * Positions the icon above text content in a button.
+ */
+ Top = 'Top',
+
+ /**
+ * Positions the icon below text content in a button.
+ */
+ Bottom = 'Bottom',
+}
+
+/**
+ * Specifies the type of Color to display the Button with distinctive colors.
+ */
+export enum Color {
+ /**
+ * The button is displayed with colors that indicate success.
+ */
+ Success = 'Success',
+ /**
+ * The button is displayed with colors that indicate information.
+ */
+ Info = 'Info',
+ /**
+ * The button is displayed with colors that indicate a warning.
+ */
+ Warning = 'Warning',
+ /**
+ * The button is displayed with colors that indicate danger.
+ */
+ Danger = 'Danger',
+ /**
+ * The button is displayed with colors that indicate it is a primary button.
+ */
+ Primary = 'Primary',
+ /**
+ * The button is displayed with colors that indicate it is a secondary button.
+ */
+ Secondary = 'Secondary'
+}
+
+/**
+ * Defines the visual style variants for a button component, controlling background, border, and text appearance.
+ */
+export enum Variant {
+ /**
+ * Displays a solid background color with contrasting text.
+ */
+ Filled = 'Filled',
+
+ /**
+ * Displays a border with a transparent background and colored text.
+ */
+ Outlined = 'Outlined',
+
+ /**
+ * Displays only colored text without background and border.
+ */
+ Flat = 'Flat'
+}
+
+/**
+ * Specifies the size of the Button for layout purposes.
+ */
+export enum Size {
+ /**
+ * The button is displayed in a smaller size.
+ */
+ Small = 'Small',
+
+ /**
+ * The button is displayed in a medium size.
+ */
+ Medium = 'Medium',
+
+ /**
+ * The button is displayed in a larger size.
+ */
+ Large = 'Large'
+}
+
+/**
+ * Button component properties interface.
+ * Extends standard HTMLButtonElement attributes.
+ */
+export interface ButtonProps {
+ /**
+ * Specifies the position of the icon relative to the button text. Options include placing the icon at the left, right, top, or bottom of the button content.
+ *
+ * @default IconPosition.Left
+ */
+ iconPosition?: IconPosition;
+
+ /**
+ * Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering.
+ *
+ * @default -
+ */
+ icon?: string | React.ReactNode;
+
+ /**
+ * Indicates whether the button functions as a toggle button. If true, the button can switch between active and inactive states each time it is clicked.
+ *
+ * @default false
+ */
+ togglable?: boolean;
+
+ /**
+ * Sets the initial selected state for a toggle button. When true, the button is initially rendered in a 'selected' or 'active' state, otherwise it's inactive.
+ *
+ * @default false
+ */
+ selected?: boolean;
+
+ /**
+ * Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Danger', and 'Info'.
+ *
+ * @default Color.Primary
+ */
+ color?: Color;
+
+ /**
+ * Specifies the variant style of the button. Options include 'Outlined', 'Filled', and 'Flat'.
+ *
+ * @default Variant.Filled
+ */
+ variant?: Variant;
+
+ /**
+ * Specifies the size style of the button. Options include 'Small', 'Medium' and 'Large'.
+ *
+ * @default Size.Medium
+ */
+ size?: Size;
+
+ /**
+ * Styles the button to visually appear as a hyperlink. When true, the button text is underlined.
+ *
+ * @default false
+ */
+ isLink?: boolean;
+
+ /**
+ * Specifies the dropdown button icon.
+ *
+ * @default false
+ * @private
+ */
+ dropIcon?: boolean;
+}
+
+/**
+ * Interface representing the Button component methods.
+ */
+export interface IButton extends ButtonProps {
+
+ /**
+ * This is button component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLElement | null;
+
+}
+
+type IButtonProps = IButton & ButtonHTMLAttributes;
+
+/**
+ * The Button component is a versatile element for creating styled buttons with functionalities like toggling, icon positioning, and HTML attribute support, enhancing interaction based on its configuration and state.
+ *
+ * ```typescript
+ * Submit
+ * ```
+ */
+export const Button: React.ForwardRefExoticComponent> =
+ forwardRef((props: IButtonProps, ref: Ref) => {
+ const buttonRef: React.RefObject = useRef(null);
+ const {
+ disabled = false,
+ iconPosition = IconPosition.Left,
+ icon,
+ dropIcon = false,
+ className = '',
+ togglable = false,
+ selected,
+ color = Color.Primary,
+ variant = Variant.Filled,
+ size,
+ isLink = false,
+ onClick,
+ children,
+ ...domProps
+ } = props;
+
+ const [isActive, setIsActive] = useState(selected ?? false);
+ const { dir, ripple } = useProviderContext();
+ const { rippleMouseDown, Ripple} = useRippleEffect(ripple, { duration: 500 });
+ const caretIcon: string = 'M5 8.5L12 15.5L19 8.5';
+ const publicAPI: Partial = {
+ iconPosition,
+ icon,
+ togglable,
+ selected,
+ color,
+ variant,
+ size,
+ isLink
+ };
+
+ const handleButtonClick: React.MouseEventHandler = (event: React.MouseEvent) => {
+ if (togglable && selected === undefined) {
+ setIsActive((prevState: boolean) => !prevState);
+ }
+ onClick?.(event);
+ };
+
+ useEffect(() => {
+ if (selected !== undefined) {
+ setIsActive(selected);
+ }
+ }, [selected]);
+
+ useEffect(() => {
+ preRender('btn');
+ }, []);
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as IButton,
+ element: buttonRef.current
+ }), [publicAPI]);
+
+ const classNames: string = [
+ 'sf-btn',
+ className,
+ dir === 'rtl' ? 'sf-rtl' : '',
+ isActive ? 'sf-active' : '',
+ isLink ? 'sf-link' : '',
+ iconPosition && `sf-${iconPosition.toLowerCase()}`,
+ color && color.toLowerCase() !== 'secondary' ? `sf-${color.toLowerCase()}` : '',
+ variant && color.toLowerCase() !== 'secondary' ? `sf-${variant.toLowerCase() }` : '',
+ size && size.toLowerCase() !== 'medium' ? `sf-${size.toLowerCase()}` : ''
+ ].filter(Boolean).join(' ');
+
+ return (
+
+ {!children && icon && (
+
+ {typeof icon !== 'string' && icon}
+
+ )}
+ {children && icon && (iconPosition === 'Left' || iconPosition === 'Top') && (
+
+ {typeof icon !== 'string' && icon}
+
+ )}
+ {children}
+ {children && icon && (iconPosition === 'Right' || iconPosition === 'Bottom') && (
+
+ {typeof icon !== 'string' && icon}
+
+ )}
+ {dropIcon && (
+
+ )}
+ {ripple && }
+
+ );
+ });
+
+export default React.memo(Button);
diff --git a/components/buttons/src/button/index.ts b/components/buttons/src/button/index.ts
new file mode 100644
index 0000000..1c9f264
--- /dev/null
+++ b/components/buttons/src/button/index.ts
@@ -0,0 +1,4 @@
+/**
+ * Button modules
+ */
+export * from './button';
diff --git a/components/buttons/src/check-box/check-box.tsx b/components/buttons/src/check-box/check-box.tsx
new file mode 100644
index 0000000..3025058
--- /dev/null
+++ b/components/buttons/src/check-box/check-box.tsx
@@ -0,0 +1,300 @@
+import { useState, useEffect, useCallback, useImperativeHandle, useRef, forwardRef, Ref, JSX, InputHTMLAttributes, ChangeEvent } from 'react';
+import { preRender, useProviderContext, SvgIcon, useRippleEffect } from '@syncfusion/react-base';
+import {LabelPlacement} from '../button/button';
+
+const CHECK: string = 'sf-check';
+const DISABLED: string = 'sf-checkbox-disabled';
+const FRAME: string = 'sf-frame';
+const INDETERMINATE: string = 'sf-stop';
+const LABEL: string = 'sf-label';
+const WRAPPER: string = 'sf-checkbox-wrapper';
+const CheckBoxClass: string = 'sf-control sf-checkbox sf-lib';
+
+/**
+ * Properties interface for the CheckBox component
+ *
+ */
+export interface CheckBoxProps {
+
+ /**
+ * Specifies if the CheckBox is in an `indeterminate` state, which visually presents it as neither checked nor unchecked; setting this to `true` will make the CheckBox appear in an indeterminate state.
+ *
+ * @default false
+ */
+ indeterminate?: boolean;
+
+ /**
+ * Defines the text label for the Checkbox component, helping users understand its purpose.
+ *
+ * @default -
+ */
+ label?: string;
+
+ /**
+ * Specifies the position of the label relative to the CheckBox. It determines whether the label appears before or after the checkbox element in the UI.
+ *
+ * @default 'After'
+ */
+ labelPlacement?: LabelPlacement;
+
+ /**
+ * Specifies a value that indicates whether the CheckBox is `checked` or not. When set to `true`, the CheckBox will be in `checked` state.
+ *
+ * @default false
+ */
+ checked?: boolean;
+
+ /**
+ * Defines `value` attribute for the CheckBox. It is a form data passed to the server when submitting the form.
+ *
+ *
+ * @default -
+ */
+ value?: string;
+
+ /**
+ * Triggers when the CheckBox state has been changed by user interaction, allowing custom logic to be executed in response to the state change.
+ *
+ * @event change
+ */
+ onChange?: (args: ChangeEvent) => void;
+}
+
+/**
+ * Interface to define the structure of the CheckBox component reference instance
+ *
+ */
+export interface ICheckBox extends CheckBoxProps {
+ /**
+ * This is checkbox component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLElement | null;
+}
+
+type ICheckBoxProps = ICheckBox & InputHTMLAttributes;
+
+/**
+ * The CheckBox component allows users to select one or multiple options from a list, providing a visual representation of a binary choice with states like checked, unchecked, or indeterminate.
+ *
+ * ```typescript
+ *
+ * ```
+ */
+
+export const Checkbox: React.ForwardRefExoticComponent> =
+ forwardRef((props: ICheckBoxProps, ref: Ref) => {
+ const {
+ onChange,
+ checked,
+ className = '',
+ disabled = false,
+ indeterminate = false,
+ labelPlacement = 'After',
+ name = '',
+ value = '',
+ ...domProps
+ } = props;
+
+ const isControlled: boolean = checked !== undefined;
+ const [checkedState, setCheckedState] = useState(() => {
+ if (isControlled) {
+ return checked!;
+ }
+ return domProps.defaultChecked || false;
+ });
+
+ const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);
+ const [isFocused, setIsFocused] = useState(false);
+ const [storedLabel, setStoredLabel] = useState(props.label ?? '');
+ const [storedLabelPosition, setStoredLabelPosition] = useState(
+ labelPlacement ?? 'After'
+ );
+
+ const inputRef: React.RefObject = useRef(null);
+ const wrapperRef: React.RefObject = useRef(null);
+ const rippleContainerRef: React.RefObject = useRef(null);
+ const { dir, ripple } = useProviderContext();
+ const { rippleMouseDown, Ripple} = useRippleEffect(ripple, {isCenterRipple: true});
+ const checkIcon: string = 'M23.8284 3.75L8.5 19.0784L0.17157 10.75L3 7.92157L8.5 13.4216L21 0.92157L23.8284 3.75Z';
+ const indeterminateIcon: string = 'M0.5 0.5H17.5V3.5H0.5V0.5Z';
+
+ const publicAPI: Partial = {
+ checked,
+ indeterminate,
+ value
+ };
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as ICheckBox,
+ element: inputRef.current
+ }), [publicAPI]);
+
+ useEffect(() => {
+ if (isControlled) {
+ setCheckedState(!!checked);
+ }
+ }, [checked, isControlled]);
+
+ useEffect(() => {
+ setStoredLabel(props.label ?? '');
+ setStoredLabelPosition(labelPlacement ?? 'After');
+ }, [props.label, labelPlacement]);
+
+ useEffect(() => {
+ preRender('checkbox');
+ }, []);
+
+ useEffect(() => {
+ setIsIndeterminate(indeterminate);
+ }, [indeterminate]);
+
+ const handleStateChange: React.ChangeEventHandler = useCallback(
+ (event: React.ChangeEvent): void => {
+ const newChecked: boolean = event.target.checked;
+ setIsIndeterminate(false);
+ if (!isControlled) {
+ setCheckedState(newChecked);
+ }
+ onChange?.(event);
+ },
+ [onChange, isControlled]
+ );
+
+ const handleFocus: () => void = () => {
+ setIsFocused(true);
+ };
+
+ const handleBlur: () => void = () => {
+ setIsFocused(false);
+ };
+
+ const handleMouseDown: (e: React.MouseEvent) => void = useCallback((e: React.MouseEvent) => {
+ if (ripple && rippleContainerRef.current && rippleMouseDown) {
+ const syntheticEvent: React.MouseEvent = {
+ ...e,
+ currentTarget: rippleContainerRef.current,
+ target: rippleContainerRef.current,
+ preventDefault: e.preventDefault,
+ stopPropagation: e.stopPropagation
+ } as React.MouseEvent;
+ rippleMouseDown(syntheticEvent);
+ }
+ }, [ripple, rippleMouseDown]);
+
+ const wrapperClass: string = [
+ WRAPPER,
+ className,
+ disabled ? DISABLED : '',
+ isFocused ? 'sf-focus' : '',
+ !disabled && dir === 'rtl' ? 'sf-rtl' : ''
+ ].filter(Boolean).join(' ');
+
+ const renderIcons: () => JSX.Element = () => (
+
+ {isIndeterminate && (
+
+ )}
+ {checkedState && !isIndeterminate && (
+
+ )}
+
+ );
+
+ const renderRipple: () => JSX.Element = () => (
+
+ {ripple && }
+
+ );
+
+ const renderLabel: (label: string) => JSX.Element = (label: string) => (
+ {label}
+ );
+
+ return (
+
+
+
+ {storedLabelPosition === 'Before' && renderLabel(storedLabel)}
+ {storedLabelPosition === 'After' && renderRipple()}
+ {renderIcons()}
+ {storedLabelPosition === 'Before' && renderRipple()}
+ {storedLabelPosition === 'After' && renderLabel(storedLabel)}
+
+
+ );
+ });
+
+Checkbox.displayName = 'CheckBox';
+export default Checkbox;
+
+// Define the type for the component's props
+interface CSSCheckBoxProps {
+ className?: string;
+ checked?: boolean;
+ label?: string;
+}
+
+const createCSSCheckBox: (props: CSSCheckBoxProps) => JSX.Element = (props: CSSCheckBoxProps): JSX.Element => {
+ const {
+ className = '',
+ checked = false,
+ label = '',
+ ...domProps
+ } = props;
+ const { dir, ripple } = useProviderContext();
+ const checkIcon: string = 'M23.8284 3.75L8.5 19.0784L0.17157 10.75L3 7.92157L8.5 13.4216L21 0.92157L23.8284 3.75Z';
+ const rippleContainerRef: React.RefObject = useRef(null);
+ const { rippleMouseDown, Ripple} = useRippleEffect(ripple, {isCenterRipple: true});
+ const handleMouseDown: (e: React.MouseEvent) => void = useCallback((e: React.MouseEvent) => {
+ if (ripple && rippleContainerRef.current && rippleMouseDown) {
+ const syntheticEvent: React.MouseEvent = {
+ ...e,
+ currentTarget: rippleContainerRef.current,
+ target: rippleContainerRef.current,
+ preventDefault: e.preventDefault,
+ stopPropagation: e.stopPropagation
+ } as React.MouseEvent;
+ rippleMouseDown(syntheticEvent);
+ }
+ }, [ripple, rippleMouseDown]);
+ return (
+
+ {
+ {ripple && }
+ }
+
+ {checked && (
+
+ )}
+
+ {label && (
+ {label}
+ )}
+
+ );
+};
+
+// Component definition for CheckBox using create function
+export const CSSCheckbox: React.FC = (props: CSSCheckBoxProps): JSX.Element => {
+ return createCSSCheckBox(props);
+};
diff --git a/components/buttons/src/check-box/index.ts b/components/buttons/src/check-box/index.ts
new file mode 100644
index 0000000..5d25ea5
--- /dev/null
+++ b/components/buttons/src/check-box/index.ts
@@ -0,0 +1,4 @@
+/**
+ * CheckBox modules
+ */
+export * from './check-box';
diff --git a/components/buttons/src/chip/chip.tsx b/components/buttons/src/chip/chip.tsx
new file mode 100644
index 0000000..d446014
--- /dev/null
+++ b/components/buttons/src/chip/chip.tsx
@@ -0,0 +1,338 @@
+import { forwardRef, HTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { preRender, useProviderContext, SvgIcon, useRippleEffect } from '@syncfusion/react-base';
+import * as React from 'react';
+
+/**
+ * Represents the variant types for the Chip component.
+ */
+export type ChipVariant = 'filled' | 'outlined';
+
+/**
+ * Represents the color types for the Chip component.
+ */
+export type ChipColor = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+
+/**
+ * Represents the model for the Chip component.
+ *
+ */
+export interface ChipModel {
+ /**
+ * Specifies the text content for the Chip.
+ *
+ * @default -
+ */
+ text?: string;
+
+ /**
+ * Defines the value of the Chip.
+ *
+ * @default -
+ */
+ value?: string | number;
+
+ /**
+ * Specifies the icon CSS class or React node for the avatar in the Chip.
+ *
+ * @default -
+ */
+ avatar?: string | React.ReactNode;
+
+ /**
+ * Specifies the leading icon CSS class or React node for the Chip.
+ *
+ * @default -
+ */
+ leadingIcon?: string | React.ReactNode;
+
+ /**
+ * Specifies the trailing icon CSS or React node for the Chip.
+ *
+ * @default -
+ */
+ trailingIcon?: string | React.ReactNode;
+
+ /**
+ * Specifies whether the Chip component is disabled or not.
+ *
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specifies the leading icon url for the Chip.
+ *
+ * @default -
+ */
+ leadingIconUrl?: string;
+
+ /**
+ * Specifies the trailing icon url for the Chip.
+ *
+ * @default -
+ */
+ trailingIconUrl?: string;
+
+ /**
+ * Specifies whether the Chip is removable.
+ *
+ * @default false
+ */
+ removable?: boolean;
+
+ /**
+ * Specifies the variant of the Chip, either 'filled' or 'outlined'.
+ *
+ * @default -
+ */
+ variant?: ChipVariant;
+
+ /**
+ * Specifies the color of the Chip, one of 'primary', 'info', 'danger', 'success', or 'warning'.
+ *
+ * @default -
+ */
+ color?: ChipColor;
+}
+
+/**
+ * Represents the props for the Chip component.
+ *
+ * @ignore
+ */
+export interface ChipProps extends ChipModel {
+
+ /**
+ * Event handler for the delete action.
+ * @event onDelete
+ */
+ onDelete?: (event: DeleteEvent) => void;
+}
+
+/**
+ * Represents the arguments for the delete event of a Chip.
+ */
+export interface DeleteEvent {
+ /**
+ * Specifies the data associated with the deleted Chip.
+ */
+ data: ChipModel;
+
+ /**
+ * Specifies the event that triggered the delete action.
+ */
+ event: React.MouseEvent | React.KeyboardEvent;
+}
+
+/**
+ * Represents the interface for the Chip component.
+ */
+export interface IChip extends ChipProps {
+ /**
+ * Specifies the Chip component element.
+ *
+ * @private
+ */
+ element?: HTMLDivElement | null;
+}
+
+type ChipComponentProps = ChipProps & HTMLAttributes;
+
+/**
+ * The Chip component represents information in a compact form, such as entity attribute, text, or action.
+ *
+ * ```typescript
+ * Anne
+ * ```
+ */
+export const Chip: React.ForwardRefExoticComponent> =
+React.memo(forwardRef((props: ChipComponentProps, ref: React.Ref) => {
+ const {
+ value,
+ text,
+ avatar,
+ leadingIcon,
+ trailingIcon,
+ className,
+ disabled = false,
+ leadingIconUrl,
+ trailingIconUrl,
+ children,
+ removable,
+ variant,
+ color,
+ onDelete,
+ onClick,
+ ...otherProps
+ } = props;
+
+ const publicAPI: Partial = {
+ value,
+ text,
+ avatar,
+ leadingIcon,
+ trailingIcon,
+ disabled,
+ leadingIconUrl,
+ trailingIconUrl,
+ removable,
+ variant,
+ color
+ };
+
+ const chipRef: React.RefObject = useRef(null);
+ const [isFocused, setIsFocused] = useState(false);
+ const { dir, ripple } = useProviderContext();
+ const closeIcon: string = 'M10.5858 12.0001L2.58575 4.00003L3.99997 2.58582L12 10.5858L20 2.58582L21.4142 4.00003L13.4142 12.0001L21.4142 20L20 21.4142L12 13.4143L4.00003 21.4142L2.58581 20L10.5858 12.0001Z';
+ const selectIcon: string = 'M21.4142 6L9.00003 18.4142L2.58582 12L4.00003 10.5858L9.00003 15.5858L20 4.58578L21.4142 6Z';
+ const { rippleMouseDown, Ripple} = useRippleEffect(ripple);
+
+ useLayoutEffect(() => {
+ preRender('chip');
+ }, []);
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as IChip,
+ element: chipRef.current
+ }));
+
+ const handleDelete: (e: React.MouseEvent | React.KeyboardEvent) => void =
+ React.useCallback((e: React.MouseEvent | React.KeyboardEvent) => {
+ if (!removable) {return; }
+ e.stopPropagation();
+ const eventArgs: DeleteEvent = {
+ event: e,
+ data: props
+ };
+
+ if (onDelete) {
+ onDelete(eventArgs);
+ }
+ }, [onDelete, text, props]);
+
+ const handleSpanDelete: React.MouseEventHandler = React.useCallback((e: React.MouseEvent) => {
+ if (removable) {
+ handleDelete(e as unknown as React.MouseEvent);
+ }
+ }, [removable, handleDelete]);
+
+ const handleClick: React.MouseEventHandler =
+ React.useCallback((e: React.MouseEvent | React.KeyboardEvent) => {
+ if (onClick) {
+ onClick(e as React.MouseEvent);
+ }
+ }, [onClick, text, props]);
+
+ const handleKeyDown: React.KeyboardEventHandler = React.useCallback((e: React.KeyboardEvent) => {
+ switch (e.key) {
+ case 'Enter':
+ case ' ':
+ e.preventDefault();
+ handleClick(e as unknown as React.MouseEvent);
+ break;
+ case 'Delete':
+ case 'Backspace':
+ if (removable) {
+ e.preventDefault();
+ handleDelete(e);
+ }
+ break;
+ }
+ }, [removable, handleClick, handleDelete]);
+
+ const handleFocus: React.FocusEventHandler = React.useCallback(() => {
+ setIsFocused(true);
+ }, []);
+
+ const handleBlur: React.FocusEventHandler = React.useCallback(() => {
+ setIsFocused(false);
+ }, []);
+
+ const chipClassName: string = React.useMemo(() => {
+ if (className?.includes('sf-chip')) {
+ return className;
+ }
+ return [
+ 'sf-chip sf-control sf-lib sf-chip-list',
+ className,
+ disabled ? 'sf-disabled' : '',
+ dir === 'rtl' ? 'sf-rtl' : '',
+ avatar ? 'sf-chip-avatar-wrap' :
+ leadingIcon ? 'sf-chip-icon-wrap' : '',
+ isFocused ? 'sf-focused' : '',
+ variant === 'outlined' ? 'sf-outline' : '',
+ color ? `sf-${color}` : ''
+ ].filter(Boolean).join(' ');
+ }, [className, disabled, dir, avatar, leadingIcon, isFocused, variant, color]);
+
+ const avatarClasses: string = React.useMemo(() => {
+ return [
+ 'sf-chip-avatar',
+ typeof avatar === 'string' ? avatar : ''
+ ].filter(Boolean).join(' ');
+ }, [avatar]);
+
+ const trailingIconClasses: string = React.useMemo(() => {
+ return [
+ trailingIconUrl && !removable ? 'sf-trailing-icon-url' : 'sf-chip-delete',
+ removable ? 'sf-dlt-btn' : (typeof trailingIcon === 'string' ? trailingIcon : '')
+ ].filter(Boolean).join(' ');
+ }, [trailingIconUrl, removable, trailingIcon]);
+
+ return (
+
+ {chipClassName.includes('sf-selectable') && (
+
+
+
+ )}
+ {(avatar) && (
+
+ {typeof avatar !== 'string' && avatar}
+
+ )}
+ {(leadingIcon && !avatar) && (
+ typeof leadingIcon === 'string' ?
+
:
+
{leadingIcon}
+ )}
+ {(leadingIconUrl && !leadingIcon && !avatar) && (
+
+ {leadingIconUrl && ( )}
+
+ )}
+ {children ? (
{children}
) : text ? (
{text} ) : null}
+ {(trailingIcon || trailingIconUrl || removable) && (
+
+ {removable && (
+
+ )}
+ {!removable && typeof trailingIcon !== 'string' && trailingIcon}
+ {!removable && trailingIconUrl && (
+
+ )}
+
+ )}
+ {ripple &&
}
+
+ );
+}));
+
+export default Chip;
diff --git a/components/buttons/src/chip/index.ts b/components/buttons/src/chip/index.ts
new file mode 100644
index 0000000..8f133ba
--- /dev/null
+++ b/components/buttons/src/chip/index.ts
@@ -0,0 +1,4 @@
+/**
+ * Chip modules
+ */
+export * from './chip';
diff --git a/components/buttons/src/chipList/chip-list.tsx b/components/buttons/src/chipList/chip-list.tsx
new file mode 100644
index 0000000..c152e69
--- /dev/null
+++ b/components/buttons/src/chipList/chip-list.tsx
@@ -0,0 +1,509 @@
+import { forwardRef, HTMLAttributes, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ChipModel, Chip, DeleteEvent, IChip, ChipColor } from '../chip/chip';
+import { isNullOrUndefined, preRender, useProviderContext } from '@syncfusion/react-base';
+import * as React from 'react';
+
+/**
+ * Selection types for ChipList
+ */
+export type SelectionType = 'single' | 'multiple' | 'none';
+
+/**
+ * Defines the possible chip data types
+ */
+export type ChipData = string | number | ChipItemProps;
+
+/**
+ * @ignore
+ */
+export interface ChipListProps {
+ /**
+ * This chips property helps to render ChipList component.
+ * ```html
+ *
+ * ```
+ *
+ * @default []
+ */
+ chips?: ChipData[];
+
+ /**
+ * Specifies a value that indicates whether the ChipList component is disabled or not.
+ * ```html
+ *
+ * ```
+ *
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specifies the selected chip items in the ChipList.
+ * ```html
+ *
+ * ```
+ *
+ * @default []
+ */
+ selectedChips?: number[];
+
+ /**
+ * Defines the selection type of the ChipList. The available types are:
+ * 1. single
+ * 2. multiple
+ * 3. none
+ *
+ * @default 'none'
+ */
+ selection?: SelectionType;
+
+ /**
+ * Enables or disables the delete functionality of a ChipList.
+ * ```html
+ *
+ * ```
+ *
+ * @default false
+ */
+ removable?: boolean;
+
+ /**
+ * Triggers when the chip item is removed.
+ *
+ * @event onDelete
+ */
+ onDelete?: (args: ChipDeleteEvent) => void;
+
+ /**
+ * Triggers when the selected chips in the ChipList change.
+ * ```html
+ * console.log(args)} />
+ * ```
+ *
+ * @event onSelect
+ */
+ onSelect?: (args: ChipSelectEvent) => void;
+
+}
+
+/**
+ * Represents the properties of a Chip component.
+ */
+export interface ChipItemProps extends ChipModel {
+
+ /**
+ * Specifies the custom classes to be added to the chip element.
+ *
+ * @default -
+ */
+ className?: string;
+
+ /**
+ * Specifies the additional HTML attributes in a key-value pair format.
+ *
+ * @default -
+ */
+ htmlAttributes?: React.HTMLAttributes;
+
+ /**
+ * Specifies the children to be rendered for the chip item.
+ * This can be a React node, a function that returns a React node, or a string.
+ *
+ * @default -
+ */
+ children?: React.ReactNode;
+}
+
+/**
+ * Represents the arguments for the chip selection event.
+ */
+export interface ChipSelectEvent {
+ /**
+ * Specifies the indexes of the chips that are currently selected.
+ */
+ selectedChipIndexes: number[];
+
+ /**
+ * Specifies the event that triggered the select action.
+ */
+ event: React.MouseEvent | React.KeyboardEvent;
+}
+
+/**
+ * Represents the arguments for the chip deletion event.
+ */
+export interface ChipDeleteEvent {
+ /**
+ * Specifies the remaining chips after deletion.
+ */
+ chips: ChipData[];
+
+ /**
+ * Specifies the event that triggered the delete action.
+ */
+ event: React.MouseEvent | React.KeyboardEvent;
+}
+
+/**
+ * Represents the main properties and methods of the ChipList component.
+ */
+export interface IChipList extends ChipListProps {
+ /**
+ * Specifies the ChipList component element.
+ *
+ * @private
+ */
+ element: HTMLDivElement | null;
+
+ /**
+ * Gets the selected chips from the ChipList.
+ *
+ * @public
+ * @returns {ChipData[]}
+ */
+ getSelectedChips(): ChipData[];
+}
+
+type ChipListComponentProps = ChipListProps & Omit, | 'onSelect'>;
+
+/**
+ * The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form.
+ * It supports various selection modes, chip deletion, and customization options.
+ *
+ * ```typescript
+ *
+ * ```
+ */
+export const ChipList: React.ForwardRefExoticComponent> =
+forwardRef((props: ChipListComponentProps, ref: React.Ref) => {
+ const chipListRef: React.RefObject = useRef(null);
+ const [chipData, setChipData] = useState<(string | number | ChipItemProps)[]>([]);
+ const [selectedIndexes, setSelectedIndexes] = useState([]);
+ const [focusedIndex, setFocusedIndex] = useState(null);
+ const prevSelectedChipsRef: React.RefObject = useRef([]);
+ const { dir } = useProviderContext();
+
+ const {
+ chips = [],
+ className,
+ disabled = false,
+ selectedChips = [],
+ selection = 'none',
+ removable = false,
+ onClick,
+ onDelete,
+ onSelect,
+ ...otherProps
+ } = props;
+
+ useEffect(() => {
+ let newChipData: (number | string | ChipItemProps)[] | null = null;
+ if (chips.length > 0) {
+ newChipData = chips.map((chip: string | number | ChipItemProps) => chip);
+ }
+ if (newChipData !== null) {
+ setChipData(newChipData);
+ }
+ else {
+ setChipData(chips);
+ }
+ }, [chips, className, disabled]);
+
+ useEffect(() => {
+ if (selectedIndexes.length > 0) {
+ if (selection === 'single') {
+ setSelectedIndexes((prev: number[]) => [prev[prev.length - 1]]);
+ }
+ else if (selection === 'none') {
+ setSelectedIndexes([]);
+ }
+ }
+ }, [selection]);
+
+ useEffect(() => {
+ if ((selectedChips && chipData.length > 0 && JSON.stringify(prevSelectedChipsRef.current) !== JSON.stringify(selectedChips))) {
+ if (selection === 'none') { return; }
+ let finalSelectedIndexes: number[] = [];
+ if (selection === 'single') {
+ finalSelectedIndexes = selectedChips.slice(0, 1);
+ } else if (selection === 'multiple') {
+ finalSelectedIndexes = selectedChips;
+ }
+ setSelectedIndexes(finalSelectedIndexes);
+ (prevSelectedChipsRef.current as number[]) = selectedChips;
+ }
+ }, [selectedChips, chipData]);
+
+ useEffect(() => {
+ if (chips.length > 0) {
+ setChipData(chips as (string | number | ChipItemProps)[]);
+ }
+ }, [chips]);
+
+ useEffect(() => {
+ if (selectedChips.length > 0) {
+ setSelectedIndexes(selectedChips);
+ }
+ }, [selectedChips]);
+
+ useLayoutEffect(() => {
+ preRender('chipList');
+ }, []);
+
+ const refInstance: Partial = {
+ chips: chipData,
+ disabled,
+ selectedChips,
+ selection,
+ removable
+ };
+
+ refInstance.getSelectedChips = (): ChipData[] => {
+ if (selection === 'none' || selectedIndexes.length === 0) {
+ return [];
+ }
+ const data: ChipData[] = [];
+
+ selectedIndexes.forEach((index: number) => {
+ const chip: string | number | ChipItemProps = chipData[index as number];
+ (data).push(chip);
+ });
+
+ if (selection === 'single') {
+ return data[0] ? [data[0]] : [];
+ }
+ return data;
+ };
+
+ useImperativeHandle(ref, () => ({
+ ...refInstance as IChipList,
+ element: chipListRef.current
+ }));
+
+ const handleFocus: (index: number) => void = useCallback((index: number) => {
+ setFocusedIndex(index);
+ }, []);
+
+ const handleBlur: () => void = useCallback(() => {
+ setFocusedIndex(null);
+ }, []);
+
+ const handleClick: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void =
+ useCallback((e: React.MouseEvent | React.KeyboardEvent, index: number) => {
+ if (onClick) {
+ onClick(e as React.MouseEvent);
+ }
+ if (selection !== 'none') {
+ setFocusedIndex(null);
+ let newSelectedIndexes: number[] = [...selectedIndexes];
+ if (selection === 'single') {
+ newSelectedIndexes = [index];
+ } else if (selection === 'multiple') {
+ newSelectedIndexes = selectedIndexes.includes(index)
+ ? selectedIndexes.filter((i: number) => i !== index)
+ : [...selectedIndexes, index];
+ }
+ if (onSelect) {
+ onSelect({event: e as React.MouseEvent, selectedChipIndexes: newSelectedIndexes});
+ }
+ else {
+ setSelectedIndexes(newSelectedIndexes);
+ }
+ }
+ }, [onClick, selection, selectedIndexes, onSelect, refInstance]);
+
+ const handleDelete: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void =
+ useCallback((e: React.MouseEvent | React.KeyboardEvent, index: number) => {
+ e.stopPropagation();
+ if (onDelete) {
+ const updatedChips: (string | number | ChipItemProps)[] =
+ chipData.filter((_: string | number | ChipItemProps, i: number) => i !== index);
+ onDelete({event: e as React.MouseEvent, chips: updatedChips});
+ } else {
+ setChipData((prevChipData: ChipData[]) => prevChipData.filter((_: string | number | ChipItemProps, i: number) => i !== index));
+ if (chipData.length > 1) {
+ if (selection !== 'none') {
+ setSelectedIndexes((prevSelected: number[]) => prevSelected.filter((i: number) => i !== index)
+ .map((i: number) => i > index ? i - 1 : i));
+ }
+ const newFocusIndex: number = index !== 0 ? index - 1 : 0;
+ (chipListRef.current?.children[newFocusIndex as number] as HTMLElement)?.focus();
+ }
+ }
+ }, [onDelete, chipData]);
+
+ const handleKeyDown: (e: React.KeyboardEvent, index: number, chip: ChipItemProps) => void =
+ useCallback((e: React.KeyboardEvent, index: number, chip: ChipItemProps) => {
+ switch (e.key) {
+ case 'Enter':
+ case ' ':
+ e.preventDefault();
+ handleClick(e, index);
+ break;
+ case 'Delete':
+ case 'Backspace':
+ if (removable && chip.removable !== false) {
+ e.preventDefault();
+ handleDelete(e, index);
+ }
+ break;
+ }
+ }, [handleClick, handleDelete, removable]);
+
+ const memoizedOnClick: (index: number) => (e: React.MouseEvent) => void = useCallback((index: number) => {
+ return (e: React.MouseEvent) => handleClick(e, index);
+ }, [handleClick, selectedIndexes]);
+
+ const MemoizedOnDelete: (index: number) => (args: DeleteEvent) => void = useCallback((index: number) => {
+ return (args: DeleteEvent) => removable && handleDelete(args.event as React.MouseEvent, index);
+ }, [removable, handleDelete]);
+
+ const MemoizedOnFocus: (index: number) => () => void = useCallback((index: number) => {
+ return () => handleFocus(index);
+ }, [handleFocus]);
+
+ const MemoizedOnKeyDown: (index: number, chip: ChipItemProps) => (e: React.KeyboardEvent) =>
+ void = useCallback((index: number, chip: ChipItemProps) => {
+ return (e: React.KeyboardEvent) => handleKeyDown(e, index, chip);
+ }, [handleKeyDown]);
+
+ const memoizedChipData: (string | number | ChipItemProps)[] = useMemo(() => chipData, [chipData]);
+
+ const memoizedSelectedIndexes: number[] = useMemo(() => selectedIndexes, [selectedIndexes]);
+
+ const memoizedFocusedIndex: number | null = useMemo(() => focusedIndex, [focusedIndex]);
+
+ const renderChip: (chip: ChipItemProps | string | number, index: number, props: ChipListProps, selectedIndexes: number[],
+ focusedIndex: number | null, memoizedOnClick: (index: number) => (e: React.MouseEvent) => void,
+ MemoizedOnDelete: (index: number) => (args: DeleteEvent) => void, MemoizedOnFocus: (index: number) => () => void,
+ handleBlur: () => void, MemoizedOnKeyDown: (index: number, chip: ChipItemProps) => (e: React.KeyboardEvent) => void
+ ) => React.ReactNode = (
+ chip: ChipItemProps | string | number,
+ index: number,
+ props: ChipListComponentProps,
+ selectedIndexes: number[],
+ focusedIndex: number | null,
+ memoizedOnClick: (index: number) => (e: React.MouseEvent) => void,
+ MemoizedOnDelete: (index: number) => (args: DeleteEvent) => void,
+ MemoizedOnFocus: (index: number) => () => void,
+ handleBlur: () => void,
+ MemoizedOnKeyDown: (index: number, chip: ChipItemProps) => (e: React.KeyboardEvent) => void
+ ) => {
+ const chipProps: ChipItemProps = typeof chip === 'object' ? chip : { text: chip.toString() };
+ const { children, className, removable, htmlAttributes, color, ...restChipProps } = chipProps;
+ const isSelected: boolean = selectedIndexes.includes(index);
+ const isFocused: boolean = focusedIndex === index;
+ const isEnabled: boolean = chipProps.disabled !== true && props.disabled !== true;
+ const chipClassNames: string = [
+ 'sf-chip',
+ selection === 'multiple' ? 'sf-selectable' : '',
+ className ? className : props.className,
+ isEnabled ? '' : 'sf-disabled',
+ isSelected ? 'sf-active' : '',
+ isFocused ? 'sf-focused' : '',
+ chipProps.avatar ? 'sf-chip-avatar-wrap' :
+ chipProps.leadingIcon ? 'sf-chip-icon-wrap' : '',
+ chipProps.variant === 'outlined' ? 'sf-outline' : '',
+ chipProps.color ? `sf-${color}` : ''
+ ].filter(Boolean).join(' ');
+ const { onClick, ...otherHtmlAttributes }: React.HTMLAttributes = htmlAttributes || {};
+ return (
+
+ );
+ };
+
+ const renderContent: React.ReactNode = useMemo(() =>
+ memoizedChipData.map((chip: string | number | ChipItemProps, index: number) =>
+ renderChip(
+ chip,
+ index,
+ props,
+ memoizedSelectedIndexes,
+ memoizedFocusedIndex,
+ memoizedOnClick,
+ MemoizedOnDelete,
+ MemoizedOnFocus,
+ handleBlur,
+ MemoizedOnKeyDown
+ )
+ ), [memoizedChipData, props, memoizedSelectedIndexes, memoizedFocusedIndex,
+ memoizedOnClick, MemoizedOnDelete, MemoizedOnFocus, handleBlur, MemoizedOnKeyDown]);
+
+ const classes: string = React.useMemo(() => {
+ return [
+ 'sf-control',
+ 'sf-chip-list',
+ 'sf-chip-set',
+ selection === 'multiple' ? 'sf-multi-selection' : selection === 'single' ? 'sf-selection' : '',
+ 'sf-lib',
+ dir === 'rtl' ? 'sf-rtl' : '',
+ props.className,
+ !disabled ? '' : 'sf-disabled'
+ ].filter(Boolean).join(' ');
+ }, [selection, dir, props.className, disabled]);
+
+ return (
+
+ {renderContent}
+
+ );
+});
+
+export default React.memo(ChipList);
+
+interface MemoizedChipProps extends Omit, HTMLAttributes {
+ index: number;
+ isSelected: boolean;
+ isFocused: boolean;
+ className?: string;
+ chipColor?: ChipColor;
+}
+
+const MemoizedChip: React.FC = React.memo(
+ ({ isSelected, isFocused, chipColor, ...props }: MemoizedChipProps) => ,
+ (prevProps: MemoizedChipProps, nextProps: MemoizedChipProps) => {
+ return (prevProps.text === nextProps.text &&
+ prevProps.value === nextProps.value &&
+ prevProps.disabled === nextProps.disabled &&
+ prevProps.removable === nextProps.removable &&
+ prevProps.className === nextProps.className &&
+ prevProps.isSelected === nextProps.isSelected &&
+ prevProps.isFocused === nextProps.isFocused &&
+ prevProps.index === nextProps.index &&
+ prevProps.onClick?.toString() === nextProps.onClick?.toString() &&
+ prevProps.onDelete?.toString === nextProps.onDelete?.toString &&
+ prevProps.variant === nextProps.variant &&
+ prevProps.chipColor === nextProps.chipColor &&
+ prevProps.avatar === nextProps.avatar &&
+ prevProps.leadingIcon === nextProps.leadingIcon &&
+ prevProps.trailingIcon === nextProps.trailingIcon);
+ }
+);
diff --git a/components/buttons/src/chipList/index.ts b/components/buttons/src/chipList/index.ts
new file mode 100644
index 0000000..f5d00af
--- /dev/null
+++ b/components/buttons/src/chipList/index.ts
@@ -0,0 +1,4 @@
+/**
+ * ChipList modules
+ */
+export * from './chip-list';
diff --git a/components/buttons/src/floating-action-button/floating-action-button.tsx b/components/buttons/src/floating-action-button/floating-action-button.tsx
new file mode 100644
index 0000000..2e5b1e2
--- /dev/null
+++ b/components/buttons/src/floating-action-button/floating-action-button.tsx
@@ -0,0 +1,223 @@
+import { useRef, useImperativeHandle, forwardRef, ButtonHTMLAttributes, useEffect, Ref } from 'react';
+import { Button, IButton, IconPosition, Color, Size } from '../button/button';
+import { preRender, useProviderContext } from '@syncfusion/react-base';
+import * as React from 'react';
+
+/**
+ * Defines the position of FAB (Floating Action Button) in target.
+ */
+export enum FabPosition {
+ /**
+ * Positions the FAB at the target's top left corner.
+ */
+ TopLeft = 'TopLeft',
+
+ /**
+ * Places the FAB on the top-center position of the target.
+ */
+ TopCenter = 'TopCenter',
+
+ /**
+ * Positions the FAB at the target's top right corner.
+ */
+ TopRight = 'TopRight',
+
+ /**
+ * Positions the FAB in the middle of target's left side.
+ */
+ MiddleLeft = 'MiddleLeft',
+
+ /**
+ * Positions the FAB in the center of target.
+ */
+ MiddleCenter = 'MiddleCenter',
+
+ /**
+ * Positions the FAB in the middle of target's right side.
+ */
+ MiddleRight = 'MiddleRight',
+
+ /**
+ * Positions the FAB at the target's bottom left corner.
+ */
+ BottomLeft = 'BottomLeft',
+
+ /**
+ * Places the FAB on the bottom-center position of the target.
+ */
+ BottomCenter = 'BottomCenter',
+
+ /**
+ * Positions the FAB at the target's bottom right corner.
+ */
+ BottomRight = 'BottomRight'
+}
+
+export interface FabButtonProps {
+ /**
+ * Specifies the position of the Floating Action Button (FAB) relative to its target element. Options may include positions such as top-left, top-right, bottom-left, and bottom-right.
+ *
+ * @default FabPosition.BottomRight
+ */
+ position?: FabPosition;
+
+ /**
+ * Determines the visibility of the Floating Action Button. When `true`, the FAB is visible; when `false`, it is hidden.
+ *
+ * @default true
+ */
+ visible?: boolean;
+
+ /**
+ * Enables toggle behavior for the FAB. If `true`, the FAB will act as a toggle button, changing state on each click.
+ *
+ * @default false
+ */
+ togglable?: boolean;
+
+ /**
+ * Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering.
+ *
+ * @default -
+ */
+ icon?: string | React.ReactNode;
+
+ /**
+ * Defines the position of the icon relative to the text on the FAB. Options may include 'Left', 'Right', 'Top', or 'Bottom'.
+ *
+ * @default IconPosition.Left
+ */
+ iconPosition?: IconPosition;
+
+ /**
+ * Specifies the Color style of the FAB button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Danger', and 'Info'.
+ *
+ * @default Color.Primary
+ */
+ color?: Color;
+
+ /**
+ * Specifies the size style of the FAB button. Options include 'Small', 'Medium' and 'Large'.
+ *
+ * @default Size.Medium
+ */
+ size?: Size;
+}
+
+export interface IFabButton extends FabButtonProps {
+
+ /**
+ * This is button component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLElement | null;
+
+}
+
+type IFabProps = FabButtonProps & ButtonHTMLAttributes;
+
+/**
+ * The Floating Action Button (FAB) component offers a prominent primary action for an application interface, prominently positioned and styled to stand out with custom icon support.
+ *
+ * ```typescript
+ * FAB
+ * ```
+ */
+
+export const Fab: React.ForwardRefExoticComponent> =
+ forwardRef((props: IFabProps, ref: Ref) => {
+ const buttonRef: any = useRef(null);
+ const { dir } = useProviderContext();
+ const {
+ disabled = false,
+ position = FabPosition.BottomRight,
+ iconPosition = IconPosition.Left,
+ className = '',
+ togglable = false,
+ icon,
+ children,
+ color = Color.Primary,
+ size,
+ visible = true,
+ ...domProps
+ } = props;
+ const fabPositionClasses: string[] = getFabPositionClasses(position, dir);
+ const classNames: string = [
+ 'sf-control',
+ 'sf-fab',
+ 'sf-lib',
+ 'sf-btn',
+ className || '',
+ visible ? '' : 'sf-fab-hidden',
+ dir === 'rtl' ? 'sf-rtl' : '',
+ icon && !children ? 'sf-icon-btn' : '',
+ ...fabPositionClasses
+ ].filter(Boolean).join(' ');
+
+ const publicAPI: Partial = {
+ iconPosition,
+ icon,
+ togglable,
+ visible,
+ color,
+ size
+ };
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as IFabButton,
+ element: buttonRef.current?.element
+ }), [publicAPI]);
+
+ useEffect(() => {
+ preRender('fab');
+ }, []);
+
+ function getFabPositionClasses(position: FabPosition | string, dir: string): string[] {
+ const positions: any = {
+ vertical: '',
+ horizontal: '',
+ middle: '',
+ align: ''
+ };
+ if (['BottomLeft', 'BottomCenter', 'BottomRight'].indexOf(position) !== -1) {
+ positions.vertical = 'sf-fab-bottom';
+ } else {
+ positions.middle = 'sf-fab-top';
+ }
+ if (['MiddleLeft', 'MiddleRight', 'MiddleCenter'].indexOf(position) !== -1) {
+ positions.vertical = 'sf-fab-middle';
+ }
+ if (['TopCenter', 'BottomCenter', 'MiddleCenter'].indexOf(position) !== -1) {
+ positions.align = 'sf-fab-center';
+ }
+ const isRight: boolean = ['TopRight', 'MiddleRight', 'BottomRight'].indexOf(position) !== -1;
+ if (
+ (!((dir === 'rtl') || isRight) || ((dir === 'rtl') && isRight))
+ ) {
+ positions.horizontal = 'sf-fab-left';
+ } else {
+ positions.horizontal = 'sf-fab-right';
+ }
+ return Object.values(positions).filter(Boolean) as string[];
+ }
+
+ return (
+
+ {children}
+
+ );
+ });
+
+export default React.memo(Fab);
diff --git a/components/buttons/src/floating-action-button/index.ts b/components/buttons/src/floating-action-button/index.ts
new file mode 100644
index 0000000..702ad51
--- /dev/null
+++ b/components/buttons/src/floating-action-button/index.ts
@@ -0,0 +1,4 @@
+/**
+ * Floating Action Button modules
+ */
+export * from './floating-action-button';
diff --git a/components/buttons/src/index.ts b/components/buttons/src/index.ts
new file mode 100644
index 0000000..7f97ebe
--- /dev/null
+++ b/components/buttons/src/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Button all modules
+ */
+export * from './button/index';
+export * from './check-box/index';
+export * from './radio-button/index';
+export * from './floating-action-button/index';
+export * from './chip/index';
+export * from './chipList/index';
diff --git a/components/buttons/src/radio-button/index.ts b/components/buttons/src/radio-button/index.ts
new file mode 100644
index 0000000..c89029f
--- /dev/null
+++ b/components/buttons/src/radio-button/index.ts
@@ -0,0 +1,4 @@
+/**
+ * RadioButton modules
+ */
+export * from './radio-button';
diff --git a/components/buttons/src/radio-button/radio-button.tsx b/components/buttons/src/radio-button/radio-button.tsx
new file mode 100644
index 0000000..4a87e2e
--- /dev/null
+++ b/components/buttons/src/radio-button/radio-button.tsx
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { useRef, useImperativeHandle, useState, useEffect, forwardRef, Ref, ChangeEvent, InputHTMLAttributes } from 'react';
+import { preRender, useProviderContext, useRippleEffect } from '@syncfusion/react-base';
+import {LabelPlacement} from '../button/button';
+
+/**
+ * Defines the properties for the RadioButton component.
+ */
+export interface RadioButtonProps {
+ /**
+ * Specifies a value that indicates whether the RadioButton is `checked` or not. When set to `true`, the RadioButton will be in `checked` state.
+ *
+ * @default false
+ */
+ checked?: boolean;
+
+ /**
+ * Defines the caption for the RadioButton, that describes the purpose of the RadioButton.
+ *
+ * @default -
+ */
+ label?: string;
+
+ /**
+ * Specifies the position of the label relative to the RadioButton. It determines whether the label appears before or after the radio button element in the UI.
+ *
+ * @default LabelPlacement.After
+ */
+ labelPlacement?: LabelPlacement;
+
+ /**
+ * Defines `value` attribute for the RadioButton. It is a form data passed to the server when submitting the form.
+ *
+ * @default -
+ */
+ value?: string;
+
+ /**
+ * Event trigger when the RadioButton state has been changed by user interaction.
+ *
+ * @event change
+ */
+ onChange?: (event: ChangeEvent) => void;
+}
+
+export interface IRadioButton extends RadioButtonProps {
+ /**
+ * This is RadioButton component input element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLInputElement | null;
+}
+
+type IRadioButtonProps = IRadioButton & InputHTMLAttributes;
+
+/**
+ * The RadioButton component allows users to select a single option from a group, utilizing a circular input field that provides a clear user selection interface.
+ *
+ * ```typescript
+ *
+ * ```
+ */
+export const RadioButton: React.ForwardRefExoticComponent> =
+ forwardRef((props: IRadioButtonProps, ref: Ref) => {
+ const {
+ checked,
+ className = '',
+ disabled = false,
+ label = '',
+ labelPlacement = 'After',
+ name = '',
+ value = '',
+ onChange,
+ ...domProps
+ } = props;
+ const isControlled: boolean = checked !== undefined;
+ const [isChecked, setIsChecked] = useState(() => isControlled ? !!checked : !!domProps.defaultChecked);
+ const radioInputRef: React.RefObject = useRef(null);
+ const { dir, ripple } = useProviderContext();
+ const { rippleMouseDown, Ripple} = useRippleEffect(ripple, { duration: 400, isCenterRipple: true });
+
+ useEffect(() => {
+ if (isControlled) {
+ setIsChecked(!!checked);
+ }
+ }, [checked, isControlled]);
+
+ useEffect(() => {
+ preRender('radio');
+ }, []);
+
+ const publicAPI: Partial = {
+ checked: isChecked,
+ label,
+ labelPlacement,
+ value
+ };
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as IRadioButton,
+ element: radioInputRef.current
+ }), [publicAPI]);
+
+ const onRadioChange: React.ChangeEventHandler = (event: ChangeEvent): void => {
+ if (!isControlled) {
+ setIsChecked(event.target.checked);
+ }
+ if (onChange) {
+ onChange(event);
+ }
+ };
+
+ const classNames: string = [
+ 'sf-radio-wrapper',
+ 'sf-wrapper',
+ className
+ ].filter(Boolean).join(' ');
+
+ const rtlClass: string = (dir === 'rtl') ? 'sf-rtl' : '';
+ const labelBefore: boolean = labelPlacement === 'Before';
+
+ return (
+
+
+
+
+ {ripple && }
+
+ {label}
+
+
+ );
+ });
+
+export default React.memo(RadioButton);
diff --git a/components/buttons/styles/button/_all.scss b/components/buttons/styles/button/_all.scss
new file mode 100644
index 0000000..a0fe77d
--- /dev/null
+++ b/components/buttons/styles/button/_all.scss
@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';
diff --git a/components/buttons/styles/button/_layout.scss b/components/buttons/styles/button/_layout.scss
new file mode 100644
index 0000000..944d2fd
--- /dev/null
+++ b/components/buttons/styles/button/_layout.scss
@@ -0,0 +1,575 @@
+@mixin icon-top-bottom {
+ display: block;
+ margin-top: 0;
+ width: auto;
+}
+
+@mixin top-bottom-icon-btn {
+ line-height: 1;
+}
+
+@mixin mat3-border-radius {
+ @if $skin-name == 'Material3' {
+ border-radius: 4px;
+ }
+}
+
+@include export-module('button-layout') {
+ .sf-btn,
+ .sf-css.sf-btn {
+ /* stylelint-disable property-no-vendor-prefix */
+ position: relative;
+ align-items: center;
+ display: flex;
+ -webkit-font-smoothing: antialiased;
+ border: $btn-border;
+ border-radius: $btn-border-radius;
+ box-sizing: border-box;
+ cursor: pointer;
+ font-family: $font-family;
+ font-size: $btn-font-size;
+ font-weight: $btn-font-weight;
+ justify-content: center;
+ line-height: $btn-text-line-height;
+ outline: none;
+ padding: $btn-padding;
+ text-align: center;
+ text-decoration: none;
+ text-transform: $btn-text-transform;
+ user-select: none;
+ vertical-align: middle;
+ white-space: nowrap;
+ @if $skin-name == 'Material3' {
+ letter-spacing: .15px;
+ }
+ @at-root {
+ &:disabled {
+ cursor: default;
+ }
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+
+ & .sf-btn-icon {
+ display: inline-block;
+ font-size: $btn-icon-font-size;
+ margin-top: $btn-icon-margin-top;
+ vertical-align: middle;
+ width: $btn-icon-btn-width;
+ line-height: 1px;
+
+ &.sf-icon-left {
+ padding-right: 8px;
+ margin-left: $btn-icon-margin;
+ width: $btn-icon-width;
+ }
+
+ &.sf-icon-right {
+ width: $btn-icon-width;
+ margin-right: $btn-icon-margin;
+ }
+
+ &.sf-icon-top {
+ padding-bottom: $btn-icon-top-bottom-padding;
+ @include icon-top-bottom;
+ }
+
+ &.sf-icon-bottom {
+ padding-top: $btn-icon-top-bottom-padding;
+ @include icon-top-bottom;
+ }
+
+ path {
+ fill-rule: evenodd;
+ clip-rule: evenodd;
+ }
+ }
+
+ &.sf-icon-btn {
+ @if $skin-name != 'tailwind3' {
+ padding: $btn-icon-padding;
+ }
+ @if $skin-name == 'fluent2' {
+ line-height: 14px;
+ }
+ @include mat3-border-radius;
+ }
+
+ &.sf-top-icon-btn,
+ &.sf-bottom-icon-btn {
+ @include top-bottom-icon-btn;
+ padding: $btn-top-icon-padding;
+ }
+
+ &.sf-round {
+ border-radius: 50%;
+ height: $btn-round-height;
+ line-height: 1;
+ padding: 0;
+ width: $btn-round-width;
+
+ & .sf-btn-icon {
+ font-size: $btn-round-font-size;
+ line-height: $btn-round-icon-line-height;
+ margin-top: 0;
+ width: auto;
+ }
+ }
+
+ &.sf-rounded {
+ border-radius: 40px;
+ }
+
+ &.sf-round-corner {
+ @if $skin-name == 'Material3' {
+ border-radius: 25px;
+ padding: $btn-padding;
+ }
+ }
+
+ &.sf-rtl {
+ & .sf-icon-right {
+ margin-left: $btn-icon-margin;
+ margin-right: 0;
+ }
+
+ & .sf-icon-left {
+ margin-left: 0;
+ margin-right: $btn-icon-margin;
+ }
+ }
+
+ &.sf-flat {
+ border: $btn-flat-border;
+ }
+
+ &.sf-small {
+ font-size: $btn-small-font-size;
+ line-height: $btn-small-text-line-height;
+ padding: $btn-small-padding;
+ &.sf-round-corner {
+ @if $skin-name == 'Material3' {
+ border-radius: 25px;
+ padding: $btn-small-padding;
+ }
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-small-icon-font-size;
+ width: $btn-icon-small-width;
+
+ &.sf-icon-left {
+ margin-left: $btn-small-icon-margin;
+ width: $btn-small-icon-width;
+ }
+
+ &.sf-icon-right {
+ margin-right: $btn-small-icon-margin;
+ width: $btn-small-icon-width;
+ }
+
+ &.sf-icon-top {
+ padding-bottom: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+
+ &.sf-icon-bottom {
+ padding-top: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+ }
+
+ &.sf-icon-btn {
+ padding: $btn-small-icon-padding;
+ @include mat3-border-radius;
+ }
+
+ &.sf-top-icon-btn,
+ &.sf-bottom-icon-btn {
+ @include top-bottom-icon-btn;
+ padding: $btn-top-icon-padding;
+ }
+
+ &.sf-round {
+ height: $btn-round-small-height;
+ line-height: 1;
+ padding: 0;
+ width: $btn-round-small-width;
+ @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+ border-radius: 50%;
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-small-round-font-size;
+ line-height: $btn-small-round-icon-line-height;
+ width: auto;
+ }
+ }
+
+ &.sf-rtl {
+ & .sf-icon-right {
+ margin-left: $btn-small-icon-margin;
+ margin-right: 0;
+ }
+
+ & .sf-icon-left {
+ margin-left: 0;
+ margin-right: $btn-small-icon-margin;
+ }
+ }
+ }
+
+ &.sf-block {
+ display: block;
+ width: 100%;
+ }
+ }
+
+ &.sf-outlined.sf-link {
+ border-radius: 4px;
+ }
+ }
+
+ .sf-small .sf-btn,
+ .sf-small.sf-btn,
+ .sf-small .sf-css.sf-btn,
+ .sf-small.sf-css.sf-btn {
+ font-size: $btn-small-font-size;
+ line-height: $btn-small-text-line-height;
+ padding: $btn-small-padding;
+ &.sf-round-corner {
+ @if $skin-name == 'Material3' {
+ border-radius: 25px;
+ padding: $btn-small-padding;
+ }
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-small-icon-font-size;
+ width: $btn-icon-small-width;
+
+ &.sf-icon-left {
+ margin-left: $btn-small-icon-margin;
+ width: $btn-small-icon-width;
+ }
+
+ &.sf-icon-right {
+ margin-right: $btn-small-icon-margin;
+ width: $btn-small-icon-width;
+ }
+
+ &.sf-icon-top {
+ padding-bottom: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+
+ &.sf-icon-bottom {
+ padding-top: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+ }
+
+ &.sf-icon-btn {
+ padding: $btn-small-icon-padding;
+ @if $skin-name == 'fluent2' {
+ line-height: 14px;
+ }
+ @include mat3-border-radius;
+ }
+
+ &.sf-top-icon-btn,
+ &.sf-bottom-icon-btn {
+ @include top-bottom-icon-btn;
+ padding: $btn-top-icon-padding;
+ }
+
+ &.sf-round {
+ height: $btn-round-small-height;
+ line-height: 1;
+ padding: 0;
+ width: $btn-round-small-width;
+ @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+ border-radius: 50%;
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-small-round-font-size;
+ line-height: $btn-small-round-icon-line-height;
+ width: auto;
+ }
+ }
+
+ &.sf-rtl {
+ & .sf-icon-right {
+ margin-left: $btn-small-icon-margin;
+ margin-right: 0;
+ }
+
+ & .sf-icon-left {
+ margin-left: 0;
+ margin-right: $btn-small-icon-margin;
+ }
+ }
+ }
+
+ @if $skin-name == 'fluent2' {
+ .sf-btn.sf-icon-btn .sf-btn-icon,
+ .sf-small .sf-btn.sf-icon-btn .sf-btn-icon {
+ font-size: 14px;
+ line-height: 14px;
+ }
+ }
+}
+
+.sf-btn.sf-bottom,
+.sf-btn.sf-top {
+ flex-direction: column;
+}
+
+@include export-module('button-bigger') {
+ .sf-large.sf-small .sf-btn,
+ .sf-large .sf-small.sf-btn,
+ .sf-large.sf-small .sf-css.sf-btn,
+ .sf-large .sf-small.sf-css.sf-btn {
+ font-size: $btn-bigger-small-font-size;
+ line-height: $btn-bigger-small-text-line-height;
+ padding: $btn-bigger-small-padding;
+
+ &.sf-round-corner {
+ @if $skin-name == 'Material3' {
+ border-radius: 25px;
+ padding: $btn-bigger-small-padding;
+ }
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-bigger-small-icon-font-size;
+ width: $btn-icon-bigger-small-width;
+
+ &.sf-icon-left {
+ margin-left: $btn-bigger-small-icon-margin;
+ width: $btn-bigger-small-icon-width;
+ }
+
+ &.sf-icon-right {
+ margin-right: $btn-bigger-small-icon-margin;
+ width: $btn-bigger-small-icon-width;
+ }
+
+ &.sf-icon-top {
+ padding-bottom: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+
+ &.sf-icon-bottom {
+ padding-top: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+ }
+
+ &.sf-icon-btn {
+ padding: $btn-bigger-small-icon-padding;
+ @include mat3-border-radius;
+ }
+
+ &.sf-top-icon-btn,
+ &.sf-bottom-icon-btn {
+ @include top-bottom-icon-btn;
+ padding: $btn-top-icon-bigger-padding;
+ }
+
+ &.sf-round {
+ height: $btn-round-bigger-small-height;
+ line-height: 1;
+ padding: 0;
+ width: $btn-round-bigger-small-width;
+
+ & .sf-btn-icon {
+ font-size: $btn-bigger-small-round-font-size;
+ line-height: $btn-bigger-small-round-icon-line-height;
+ width: auto;
+ }
+ }
+
+ &.sf-rtl {
+ & .sf-icon-right {
+ margin-left: $btn-bigger-small-icon-margin;
+ margin-right: 0;
+ }
+
+ & .sf-icon-left {
+ margin-left: 0;
+ margin-right: $btn-bigger-small-icon-margin;
+ }
+ }
+ }
+
+ .sf-large .sf-btn,
+ .sf-large.sf-btn,
+ .sf-large .sf-css.sf-btn,
+ .sf-large.sf-css.sf-btn {
+ font-size: $btn-bigger-font-size;
+ line-height: $btn-bigger-text-line-height;
+ padding: $btn-bigger-padding;
+ &.sf-round-corner {
+ @if $skin-name == 'Material3' {
+ border-radius: 25px;
+ padding: $btn-bigger-padding;
+ }
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-bigger-icon-font-size;
+ width: $btn-icon-bigger-width;
+
+ &.sf-icon-left {
+ margin-left: $btn-bigger-icon-margin;
+ width: $btn-bigger-icon-width;
+ }
+
+ &.sf-icon-right {
+ margin-right: $btn-bigger-icon-margin;
+ width: $btn-bigger-icon-width;
+ }
+
+ &.sf-icon-top {
+ padding-bottom: $btn-bigger-icon-top-bottom-padding;
+ width: auto;
+ }
+
+ &.sf-icon-bottom {
+ padding-top: $btn-bigger-icon-top-bottom-padding;
+ width: auto;
+ }
+ }
+
+ &.sf-icon-btn {
+ @if $skin-name != 'tailwind3' {
+ padding: $btn-bigger-icon-padding;
+ }
+ @if $skin-name == 'fluent2' {
+ line-height: 16px;
+ }
+ @include mat3-border-radius;
+ }
+
+ &.sf-top-icon-btn,
+ &.sf-bottom-icon-btn {
+ @include top-bottom-icon-btn;
+ padding: $btn-top-icon-bigger-padding;
+ }
+
+ &.sf-round {
+ height: $btn-round-bigger-height;
+ line-height: 1;
+ padding: 0;
+ width: $btn-round-bigger-width;
+ @if $skin-name == 'Material3' {
+ border-radius: 50%;
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-bigger-round-font-size;
+ line-height: $btn-bigger-round-icon-line-height;
+ width: auto;
+ }
+ }
+
+ &.sf-rtl {
+ & .sf-icon-right {
+ margin-left: $btn-bigger-icon-margin;
+ margin-right: 0;
+ }
+
+ & .sf-icon-left {
+ margin-left: 0;
+ margin-right: $btn-bigger-icon-margin;
+ }
+ }
+
+ &.sf-small {
+ font-size: $btn-bigger-small-font-size;
+ line-height: $btn-bigger-small-text-line-height;
+ padding: $btn-bigger-small-padding;
+
+ &.sf-round-corner {
+ @if $skin-name == 'Material3' {
+ border-radius: 25px;
+ padding: $btn-bigger-small-padding;
+ }
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-bigger-small-icon-font-size;
+ width: $btn-icon-bigger-small-width;
+
+ &.sf-icon-left {
+ margin-left: $btn-bigger-small-icon-margin;
+ width: $btn-bigger-small-icon-width;
+ }
+
+ &.sf-icon-right {
+ margin-right: $btn-bigger-small-icon-margin;
+ width: $btn-bigger-small-icon-width;
+ }
+
+ &.sf-icon-top {
+ padding-bottom: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+
+ &.sf-icon-bottom {
+ padding-top: $btn-small-icon-top-bottom-padding;
+ width: auto;
+ }
+ }
+
+ &.sf-icon-btn {
+ padding: $btn-bigger-small-icon-padding;
+ @include mat3-border-radius;
+ }
+
+ &.sf-top-icon-btn,
+ &.sf-bottom-icon-btn {
+ @include top-bottom-icon-btn;
+ padding: $btn-top-icon-bigger-padding;
+ }
+
+ &.sf-round {
+ height: $btn-round-bigger-small-height;
+ line-height: 1;
+ padding: 0;
+ width: $btn-round-bigger-small-width;
+ @if $skin-name == 'Material3' {
+ border-radius: 50%;
+ }
+
+ & .sf-btn-icon {
+ font-size: $btn-bigger-small-round-font-size;
+ line-height: $btn-bigger-small-round-icon-line-height;
+ width: auto;
+ }
+ }
+
+ &.sf-rtl {
+ & .sf-icon-right {
+ margin-left: $btn-bigger-small-icon-margin;
+ margin-right: 0;
+ }
+
+ & .sf-icon-left {
+ margin-left: 0;
+ margin-right: $btn-bigger-small-icon-margin;
+ }
+ }
+ }
+ }
+}
+
diff --git a/components/buttons/styles/button/_material3-dark-definition.scss b/components/buttons/styles/button/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/buttons/styles/button/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/buttons/styles/button/_material3-definition.scss b/components/buttons/styles/button/_material3-definition.scss
new file mode 100644
index 0000000..fb9e32e
--- /dev/null
+++ b/components/buttons/styles/button/_material3-definition.scss
@@ -0,0 +1,375 @@
+//layout variables
+$btn-border: 1px solid !default;
+$btn-icon-margin-top: 0 !default;
+$btn-icon-btn-width: 1em !default;
+$btn-icon-top-bottom-padding: 8px !default;
+$btn-icon-small-width: 1em !default;
+$btn-icon-bigger-small-width: 1em !default;
+$btn-top-icon-padding: 12px 12px !default;
+$btn-top-icon-bigger-padding: 16px 16px !default;
+$btn-small-icon-top-bottom-padding: 6px !default;
+$btn-icon-bigger-width: 1em !default;
+$btn-focus-outline-offset: 0 !default;
+$btn-active-outline-offset: 0 !default;
+$btn-font-weight: 500 !default;
+$btn-font-size: $text-sm !default;
+$btn-small-font-size: 11px !default;
+$btn-border-radius: 4px !default;
+$btn-text-transform: none !default;
+$btn-icon-font-size: $text-lg !default;
+$btn-small-icon-font-size: $text-base !default;
+$btn-round-small-height: 24px !default;
+$btn-round-small-width: 24px !default;
+$btn-round-height: 32px !default;
+$btn-round-width: 32px !default;
+$btn-round-bigger-small-height: 36px !default;
+$btn-round-bigger-small-width: 36px !default;
+$btn-round-bigger-height: 40px !default;
+$btn-round-bigger-width: 40px !default;
+$btn-round-font-size: $text-lg !default;
+$btn-small-round-font-size: $text-base !default;
+$btn-icon-margin: -.5em !default;
+$btn-small-icon-margin: -.57143em !default;
+$btn-icon-width: 2em !default;
+$btn-small-icon-width: 2em !default;
+$btn-round-icon-line-height: 1.5em !default;
+$btn-small-round-icon-line-height: 1 !default;
+$btn-text-line-height: 1 !default;
+$btn-small-text-line-height: 1.092 !default;
+$btn-padding: 8px 16px !default;
+$btn-small-padding: 5px 12px !default;
+$btn-icon-padding: 7px 7px !default;
+$btn-small-icon-padding: 4px 4px !default;
+$btn-bigger-small-font-size: $text-sm !default;
+$btn-bigger-small-text-line-height: 1.476 !default;
+$btn-bigger-small-padding: 7px 20px !default;
+$btn-bigger-small-icon-font-size: $text-lg !default;
+$btn-bigger-small-icon-margin: -.5em !default;
+$btn-bigger-small-icon-width: 2em !default;
+$btn-bigger-small-round-icon-line-height: 0 !default;
+$btn-bigger-small-round-font-size: $text-lg !default;
+$btn-bigger-icon-margin: -.2em !default;
+$btn-bigger-icon-width: 2em !default;
+$btn-bigger-text-line-height: 1.286 !default;
+$btn-bigger-padding: 10px 24px !default;
+$btn-bigger-font-size: $text-sm !default;
+$btn-bigger-icon-font-size: 22px !default;
+$btn-bigger-icon-top-bottom-padding: 8px !default;
+$btn-bigger-icon-padding: 11px 11px !default;
+$btn-bigger-round-icon-line-height: 1.5em !default;
+$btn-bigger-round-font-size: $text-lg !default;
+$btn-bigger-small-icon-padding: 6px 13px !default;
+
+//normal
+$btn-color: rgba($secondary-text-color) !default;
+$btn-bgcolor: $secondary-bg-color !default;
+$btn-border-color: $btn-secondary-border-color;
+$btn-hover-bgcolor: $secondary-bg-color-hover !default;
+$btn-hover-border-color: $secondary-border-color-hover !default;
+$btn-hover-color: rgba($secondary-text-color-hover) !default;
+$btn-focus-bgcolor: $secondary-bg-color-focus !default;
+$btn-focus-border-color: $secondary-border-color-hover !default;
+$btn-focus-color: rgba($secondary-text-color-focus) !default;
+$btn-active-outline: $btn-bgcolor 0 solid !default;
+$btn-focus-outline: $btn-bgcolor 0 solid !default;
+$btn-focus-outline-round: rgba($white) 0 solid !default;
+$btn-active-border-color: $secondary-border-color-pressed !default;
+$btn-active-bgcolor: $secondary-bg-color-pressed !default;
+$btn-active-color: rgba($secondary-text-color-pressed) !default;
+$btn-disabled-color: $secondary-text-color-disabled !default;
+$btn-disabled-bgcolor: $secondary-bg-color-disabled !default;
+$btn-disabled-border-color: $secondary-border-color-disabled !default;
+$btn-active-box-shadow: $shadow-sm !default;
+$btn-ripple-bgcolor: rgba($secondary-text-color, .24) !default;
+$btn-link-bgcolor: transparent !default;
+$btn-link-border-color: transparent !default;
+$btn-link-color: rgba($info-dark) !default;
+$btn-link-hover-color: rgba($info-dark) !default;
+$btn-link-disabled-bgcolor: transparent !default;
+
+//primary
+$btn-primary-outline: $btn-bgcolor 0 solid !default;
+$btn-primary-color: rgba($primary-text) !default;
+$btn-primary-hover-color: rgba($primary-text-hover) !default;
+$btn-primary-focus-color: rgba($primary-text-focus) !default;
+$btn-primary-active-color: rgba($primary-text-pressed) !default;
+$btn-primary-bgcolor: rgba($primary-bg-color) !default;
+$btn-primary-hover-bgcolor: $primary-bg-color-hover !default;
+$btn-primary-active-bgcolor: $primary-bg-color-pressed !default;
+$btn-primary-border-color: rgba($primary-border-color) !default;
+$btn-primary-hover-border-color: $primary-border-color-hover !default;
+$btn-primary-focus-border-color: $btn-primary-border-color !default;
+$btn-primary-active-border-color: rgba($primary-bg-color) !default;
+$btn-primary-focus-bgcolor: $primary-bg-color-focus !default;
+$btn-primary-disabled-bgcolor: $primary-bg-color-disabled !default;
+$btn-primary-disabled-color: $primary-text-disabled !default;
+$btn-primary-disabled-border-color: $primary-border-color-disabled !default;
+$btn-ripple-primary-bgcolor: rgba($primary-text, .24) !default;
+
+//outline
+$btn-outline-color: rgba($secondary-outline) !default;
+$btn-outline-bgcolor: transparent !default;
+$btn-outline-hover-bgcolor: rgba($secondary-outline, .08) !default;
+$btn-outline-hover-color: rgba($secondary-outline) !default;
+$btn-outline-focus-bgcolor: $btn-focus-bgcolor !default;
+$btn-outline-focus-color: $btn-focus-color !default;
+$btn-outline-active-color: $btn-outline-color !default;
+$btn-outline-active-bgcolor: rgba($secondary-outline, .12) !default;
+$btn-outline-border-color: rgba($info-outline-border) !default;
+$btn-outline-hover-border-color: rgba($info-outline-border) !default;
+$btn-outline-focus-border-color: $btn-outline-border-color !default;
+$btn-outline-default-focus-border-color: $btn-outline-border-color !default;
+$btn-outline-active-border-color: $btn-outline-border-color !default;
+$btn-outline-active-box-shadow: none !default;
+$btn-outline-disabled-bgcolor: $secondary-bg-color-disabled !default;
+$btn-outline-disabled-border-color: $success-border-color-disabled !default;
+$btn-outline-disabled-color: $secondary-text-color-disabled !default;
+$btn-outline-primary-color: $primary-outline !default;
+$btn-outline-primary-focus-bgcolor: $btn-primary-bgcolor !default;
+$btn-outline-primary-focus-color: rgba($white) !default;
+$btn-outline-success-color: $success-outline !default;
+$btn-outline-warning-color: $warning-outline !default;
+$btn-outline-danger-color: $danger-outline !default;
+$btn-outline-info-color: $info-outline !default;
+$btn-outline-primary-hover-bgcolor: rgba($btn-outline-primary-color, .08) !default;
+$btn-outline-success-hover-bgcolor: rgba($btn-outline-success-color, .08) !default;
+$btn-outline-warning-hover-bgcolor: rgba($btn-outline-warning-color, .08) !default;
+$btn-outline-danger-hover-bgcolor: rgba($btn-outline-danger-color, .08) !default;
+$btn-outline-info-hover-bgcolor: rgba($btn-outline-info-color, .08) !default;
+$btn-outline-primary-active-bgcolor: rgba($btn-outline-primary-color, .12) !default;
+$btn-outline-success-active-bgcolor: rgba($btn-outline-success-color, .12) !default;
+$btn-outline-warning-active-bgcolor: rgba($btn-outline-warning-color, .12) !default;
+$btn-outline-danger-active-bgcolor: rgba($btn-outline-danger-color, .12) !default;
+$btn-outline-info-active-bgcolor: rgba($btn-outline-info-color, .12) !default;
+
+//flat
+$btn-flat-color: rgba($secondary-text-color) !default;
+$btn-flat-border: $btn-border !default;
+$btn-flat-border-color: $transparent !default;
+$btn-flat-hover-color: $btn-flat-color !default;
+$btn-flat-focus-color: $btn-focus-color !default;
+$btn-flat-active-color: $btn-active-color !default;
+$btn-flat-box-shadow: none !default;
+$btn-flat-active-bgcolor: $btn-active-bgcolor !default;
+$btn-flat-bgcolor: $transparent !default;
+$btn-flat-hover-bgcolor: rgba($secondary-text-color, .08) !default;
+$btn-flat-focus-bgcolor: $btn-flat-hover-bgcolor !default;
+$btn-flat-hover-border-color: none !default;
+$btn-flat-active-border-color: $btn-active-border-color !default;
+$btn-flat-focus-border-color: $btn-flat-hover-border-color !default;
+$btn-flat-active-box-shadow: none !default;
+$btn-flat-disabled-border-color: $transparent !default;
+$btn-flat-disabled-bgcolor: $transparent !default;
+$btn-flat-disabled-color: $btn-disabled-color !default;
+$btn-ripple-flat-bgcolor: rgba($secondary-text-color, .24) !default;
+$btn-ripple-flat-primary-bgcolor: rgba($primary-text, .24) !default;
+$btn-ripple-flat-success-bgcolor: rgba($success-text, .24) !default;
+$btn-ripple-flat-info-bgcolor: rgba($info-text, .24) !default;
+$btn-ripple-flat-warning-bgcolor: rgba($warning-text, .24) !default;
+$btn-ripple-flat-danger-bgcolor: rgba($danger-text, .24) !default;
+
+//success
+$btn-success-color: rgba($success-text) !default;
+$btn-success-bgcolor: rgba($success-bg-color) !default;
+$btn-success-hover-bgcolor: $success-bg-color-hover !default;
+$btn-success-focus-bgcolor: $success-bg-color-focus !default;
+$btn-success-active-bgcolor: $success-bg-color-pressed !default;
+$btn-success-border-color: rgba($success-border-color) !default;
+$btn-success-hover-border-color: $success-border-color-hover !default;
+$btn-success-focus-border-color: $btn-success-border-color !default;
+$btn-success-active-border-color: rgba($success-bg-color) !default;
+$btn-success-disabled-bgcolor: $success-bg-color-disabled !default;
+$btn-success-disabled-color: $success-text-disabled !default;
+$btn-success-disabled-border-color: $success-border-color-disabled !default;
+$btn-success-hover-color: rgba($success-text-hover) !default;
+$btn-success-focus-color: rgba($success-text-focus) !default;
+$btn-ripple-success-bgcolor: rgba($success-text, .24) !default;
+$btn-success-active-color: $btn-success-color !default;
+
+//warning
+$btn-warning-bgcolor: rgba($warning-bg-color) !default;
+$btn-warning-color: rgba($warning-text) !default;
+$btn-warning-hover-color: rgba($warning-text-hover) !default;
+$btn-warning-hover-bgcolor: $warning-bg-color-hover !default;
+$btn-warning-focus-bgcolor: $warning-bg-color-focus !default;
+$btn-warning-active-bgcolor: $warning-bg-color-pressed !default;
+$btn-warning-border-color: rgba($warning-border-color) !default;
+$btn-warning-hover-border-color: $warning-border-color-hover !default;
+$btn-warning-focus-border-color: $btn-warning-border-color !default;
+$btn-warning-focus-color: rgba($warning-text-focus) !default;
+$btn-warning-active-color: rgba($warning-text-pressed) !default;
+$btn-warning-active-border-color: rgba($warning-bg-color) !default;
+$btn-warning-disabled-bgcolor: $warning-bg-color-disabled !default;
+$btn-warning-disabled-color: $warning-text-disabled !default;
+$btn-warning-disabled-border-color: $warning-border-color-disabled !default;
+$btn-ripple-warning-bgcolor: rgba($warning-text, .24) !default;
+
+//danger
+$btn-danger-color: rgba($danger-text) !default;
+$btn-danger-bgcolor: rgba($danger-bg-color) !default;
+$btn-danger-hover-bgcolor: $danger-bg-color-hover !default;
+$btn-danger-focus-bgcolor: $danger-bg-color-focus !default;
+$btn-danger-active-bgcolor: $danger-bg-color-pressed !default;
+$btn-danger-active-color: rgba($danger-text-pressed) !default;
+$btn-danger-border-color: rgba($danger-border-color) !default;
+$btn-danger-hover-border-color: $danger-border-color-hover !default;
+$btn-danger-focus-border-color: $btn-danger-border-color !default;
+$btn-danger-active-border-color: rgba($danger-bg-color) !default;
+$btn-danger-disabled-bgcolor: $danger-bg-color-disabled !default;
+$btn-danger-disabled-color: $warning-text-disabled !default;
+$btn-danger-disabled-border-color: $danger-border-color-disabled !default;
+$btn-danger-hover-color: rgba($danger-text-hover) !default;
+$btn-ripple-danger-bgcolor: rgba($danger-text, .24) !default;
+
+//info
+$btn-info-bgcolor: rgba($info-bg-color) !default;
+$btn-info-color: rgba($info-text) !default;
+$btn-info-hover-bgcolor: $info-bg-color-hover !default;
+$btn-info-focus-bgcolor: $info-bg-color-focus !default;
+$btn-info-active-bgcolor: $info-bg-color-pressed !default;
+$btn-info-border-color: rgba($info-border-color) !default;
+$btn-info-hover-border-color: $info-border-color-hover !default;
+$btn-info-focus-border-color: $btn-info-border-color !default;
+$btn-info-active-border-color: rgba($info-bg-color) !default;
+$btn-info-disabled-bgcolor: $info-bg-color-disabled !default;
+$btn-info-disabled-color: $info-text-disabled !default;
+$btn-info-disabled-border-color: $info-border-color-disabled !default;
+$btn-info-active-color: rgba($info-text-pressed) !default;
+$btn-info-hover-color: rgba($info-text-hover) !default;
+$btn-ripple-info-bgcolor: rgba($info-text, .24) !default;
+
+//round
+$btn-round-focus-color: rgba($secondary-text-color) !default;
+$btn-round-active-color: rgba($secondary-text-color-pressed) !default;
+$btn-round-bgcolor: $btn-bgcolor !default;
+$btn-round-border-color: $btn-border-color !default;
+$btn-round-color: $btn-color !default;
+$btn-round-hover-bgcolor: $btn-hover-bgcolor !default;
+$btn-round-hover-border-color: $btn-hover-border-color !default;
+$btn-round-hover-color: $btn-hover-color !default;
+
+//flatprimary
+$btn-flat-primary-hover-bgcolor: rgba($primary-bg-color, .08) !default;
+$btn-flat-primary-border-color: $btn-flat-border-color !default;
+$btn-flat-primary-hover-border-color: none !default;
+$btn-flat-primary-active-border-color: $transparent !default;
+$btn-flat-primary-focus-border-color: $btn-flat-primary-border-color !default;
+$btn-flat-primary-disabled-border-color: $transparent !default;
+$btn-flat-primary-focus-bgcolor: rgba($primary-bg-color, .12) !default;
+$btn-flat-disabled-color: $secondary-text-color-disabled !default;
+$btn-flat-primary-disabled-color: $primary-text-disabled !default;
+$btn-flat-primary-bgcolor: $btn-flat-bgcolor !default;
+$btn-flat-primary-color: rgba($primary-bg-color) !default;
+$btn-flat-primary-hover-color: rgba($primary-bg-color) !default;
+$btn-flat-primary-focus-color: rgba($primary-bg-color) !default;
+$btn-flat-primary-active-color: rgba($primary-bg-color) !default;
+$btn-flat-primary-active-bgcolor: rgba($primary-bg-color, .12) !default;
+
+//flatsuccess
+$btn-flat-success-color: rgba($success-bg-color) !default;
+$btn-flat-success-hover-color: rgba($success-bg-color) !default;
+$btn-flat-success-focus-color: rgba($success-bg-color) !default;
+$btn-flat-success-active-color: rgba($success-bg-color) !default;
+$btn-flat-success-active-bgcolor: rgba($success-bg-color, .12) !default;
+$btn-flat-success-disabled-color: $btn-success-disabled-color !default;
+$btn-flat-success-bgcolor: $btn-flat-bgcolor !default;
+$btn-flat-success-hover-bgcolor: rgba($success-bg-color, .08) !default;
+$btn-flat-success-border-color: $transparent !default;
+$btn-flat-success-hover-border-color: $transparent !default;
+$btn-flat-success-active-border-color: $transparent !default;
+$btn-flat-success-focus-border-color: $transparent !default;
+$btn-flat-success-disabled-border-color: $transparent !default;
+$btn-flat-success-focus-bgcolor: rgba($success-bg-color, .12) !default;
+
+//flatinfo
+$btn-flat-info-bgcolor: $btn-flat-bgcolor !default;
+$btn-flat-info-hover-bgcolor: rgba($info-bg-color, .08) !default;
+$btn-flat-info-border-color: $btn-flat-border-color !default;
+$btn-flat-info-hover-border-color: $btn-flat-info-border-color !default;
+$btn-flat-info-active-border-color: $btn-flat-info-border-color !default;
+$btn-flat-info-focus-border-color: $btn-flat-info-border-color !default;
+$btn-flat-info-disabled-border-color: $transparent !default;
+$btn-flat-info-focus-bgcolor: rgba($info-bg-color, .12) !default;
+$btn-flat-info-color: rgba($info-bg-color) !default;
+$btn-flat-info-disabled-color: $btn-info-disabled-color !default;
+$btn-flat-info-hover-color: rgba($info-bg-color) !default;
+$btn-flat-info-focus-color: rgba($info-bg-color) !default;
+$btn-flat-info-active-color: rgba($info-bg-color) !default;
+$btn-flat-info-active-bgcolor: rgba($info-bg-color, .12) !default;
+
+//flatwarning
+$btn-flat-warning-bgcolor: $btn-flat-bgcolor !default;
+$btn-flat-warning-hover-bgcolor: rgba($warning-bg-color, .08) !default;
+$btn-flat-warning-border-color: $btn-flat-border-color !default;
+$btn-flat-warning-hover-border-color: $btn-flat-warning-border-color !default;
+$btn-flat-warning-active-border-color: $btn-flat-warning-border-color !default;
+$btn-flat-warning-focus-border-color: $btn-flat-warning-border-color !default;
+$btn-flat-warning-disabled-border-color: $transparent !default;
+$btn-flat-warning-focus-bgcolor: rgba($warning-bg-color, .12) !default;
+$btn-flat-warning-color: rgba($warning-bg-color) !default;
+$btn-flat-warning-disabled-color: $btn-warning-disabled-color !default;
+$btn-flat-warning-hover-color: rgba($warning-bg-color) !default;
+$btn-flat-warning-focus-color: rgba($warning-bg-color) !default;
+$btn-flat-warning-active-color: rgba($warning-bg-color) !default;
+$btn-flat-warning-active-bgcolor: rgba($warning-bg-color, .12) !default;
+
+//flatdanger
+$btn-flat-danger-bgcolor: $btn-flat-bgcolor !default;
+$btn-flat-danger-hover-bgcolor: rgba($danger-bg-color, .08) !default;
+$btn-flat-danger-border-color: $btn-flat-border-color !default;
+$btn-flat-danger-hover-border-color: $btn-flat-danger-border-color !default;
+$btn-flat-danger-active-border-color: $btn-flat-danger-border-color !default;
+$btn-flat-danger-focus-border-color: $btn-flat-danger-border-color !default;
+$btn-flat-danger-disabled-border-color: $transparent !default;
+$btn-flat-danger-focus-bgcolor: rgba($danger-bg-color, .12) !default;
+$btn-flat-danger-color: rgba($danger-bg-color) !default;
+$btn-flat-danger-hover-color: rgba($danger-bg-color) !default;
+$btn-flat-danger-focus-color: rgba($danger-bg-color) !default;
+$btn-flat-danger-active-color: rgba($danger-bg-color) !default;
+$btn-flat-danger-active-bgcolor: rgba($danger-bg-color, .12) !default;
+$btn-flat-danger-disabled-color: $btn-danger-disabled-color !default;
+
+//outlineprimary
+$btn-outline-primary-disabled-color: $primary-text-disabled !default;
+$btn-outline-primary-disabled-border-color: $success-border-color-disabled !default;
+$btn-outline-primary-hover-border-color: rgba($primary) !default;
+$btn-outline-primary-hover-bgcolor: $btn-primary-bgcolor !default;
+$btn-outline-primary-focus-border-color: rgba($primary) !default;
+$btn-outline-primary-active-border-color: rgba($primary) !default;
+
+//outlinesuccess
+$btn-outline-success-disabled-color: $success-text-disabled !default;
+$btn-outline-success-disabled-border-color: $success-border-color-disabled !default;
+$btn-outline-success-hover-bgcolor: $btn-success-bgcolor !default;
+
+//outlineinfo
+$btn-outline-info-disabled-color: $info-text-disabled !default;
+$btn-outline-info-disabled-border-color: $success-border-color-disabled !default;
+
+//outlinewarning
+$btn-outline-warning-disabled-color: $warning-text-disabled !default;
+$btn-outline-warning-disabled-border-color: $success-border-color-disabled !default;
+
+//outlinedanger
+$btn-outline-danger-disabled-color: $danger-text-disabled !default;
+$btn-outline-danger-disabled-border-color: $success-border-color-disabled !default;
+
+//size
+$btn-box-shadow: $shadow-sm !default;
+$btn-hover-focus-box-shadow: $shadow-md !default;
+$btn-flat-primary-disabled-bgcolor: $transparent !default;
+$btn-flat-success-disabled-bgcolor: $transparent !default;
+$btn-flat-info-disabled-bgcolor: $transparent !default;
+$btn-flat-warning-disabled-bgcolor: $transparent !default;
+$btn-flat-danger-disabled-bgcolor: $transparent !default;
+$btn-focus-box-shadow: none !default;
+
+// bootstrap5 theme variables
+$btn-primary-focus-box-shadow: $shadow-md !default;
+$btn-success-focus-box-shadow: $shadow-md !default;
+$btn-danger-focus-box-shadow: $shadow-md !default;
+$btn-info-focus-box-shadow: $shadow-md !default;
+$btn-warning-focus-box-shadow: $shadow-md !default;
+
+//Material 3
+$btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
diff --git a/components/buttons/styles/button/_mixin.scss b/components/buttons/styles/button/_mixin.scss
new file mode 100644
index 0000000..8619278
--- /dev/null
+++ b/components/buttons/styles/button/_mixin.scss
@@ -0,0 +1,480 @@
+@use 'sass:color';
+@mixin button-focus {
+ background: $btn-focus-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-focus-border-color;
+ }
+ @else {
+ border-color: $btn-focus-border-color;
+ }
+ color: $btn-focus-color;
+ outline: $btn-focus-outline;
+ outline-offset: $btn-focus-outline-offset;
+ @if $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+}
+
+@mixin button-active {
+ background: $btn-active-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-active-border-color;
+ }
+ @else {
+ border-color: $btn-active-border-color;
+ }
+ color: $btn-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+}
+
+@mixin primary-focus {
+ background: $btn-primary-focus-bgcolor;
+ border-color: $btn-primary-focus-border-color;
+ color: $btn-primary-focus-color;
+ outline: $btn-primary-outline;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @else {
+ @if $skin-name != 'tailwind3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ }
+}
+
+@mixin primary-active {
+ background: $btn-primary-active-bgcolor;
+ border-color: $btn-primary-active-border-color;
+ color: $btn-primary-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+}
+
+@mixin primary-disabled {
+ background: $btn-primary-disabled-bgcolor;
+ border-color: $btn-primary-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-primary-disabled-color;
+}
+
+@mixin outline-focus {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: $btn-outline-color;
+ }
+ @else if $skin-name == 'fluent2' {
+ color: $secondary-outline-button-text-color-hover;
+ }
+ @else if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ @else if $skin-name == 'tailwind3' {
+ background: $secondary-bg-color-focus;
+ border: 1px solid $secondary-border-color-focus;
+ color: $secondary-text-color-focus;
+ }
+}
+
+@mixin outline-active {
+
+ background: $btn-outline-active-bgcolor;
+ border-color: $btn-outline-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-outline-active-box-shadow;
+ }
+ color: $btn-outline-active-color;
+}
+
+@mixin outline-primary-focus {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-primary-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-primary-color);
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $primary-bg-color-focus;
+ border: 1px solid $primary-border-color-focus;
+ color: $primary-text-focus;
+ }
+}
+
+@mixin outline-primary-active {
+ @if ($skin-name == 'bootstrap5.3') {
+ background: $btn-primary-bgcolor;
+ }
+ @else {
+ background: $btn-primary-active-bgcolor;
+ border-color: $btn-outline-primary-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-outline-active-box-shadow;
+ }
+ }
+ color: $btn-primary-active-color;
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-primary-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-primary-color);
+ }
+}
+
+@mixin outline-success-focus {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-success-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-success-color);
+ }
+ @else if $skin-name == 'tailwind3' {
+ background: $success-bg-color-focus;
+ border: 1px solid $success-border-color-focus;
+ color: $success-text-focus;
+ }
+}
+
+@mixin outline-success-active {
+ background: $btn-success-active-bgcolor;
+ border-color: $btn-success-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-outline-active-box-shadow;
+ }
+ color: $btn-success-active-color;
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-success-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-success-color);
+ }
+}
+
+@mixin outline-info-focus {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-info-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-info-color);
+ }
+ @else if $skin-name == 'tailwind3' {
+ background: $info-bg-color-focus;
+ border: 1px solid $info-border-color-focus;
+ color: $info-text-focus;
+ }
+}
+
+@mixin outline-info-active {
+ @if ($skin-name == 'bootstrap5.3') {
+ background: $btn-info-bgcolor;
+ }
+ @else {
+ background: $btn-info-active-bgcolor;
+ border-color: $btn-info-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-outline-active-box-shadow;
+ }
+ }
+ color: $btn-info-active-color;
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-info-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-info-color);
+ }
+}
+
+@mixin outline-warning-focus {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-warning-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-warning-color);
+ }
+ @else if $skin-name == 'tailwind3' {
+ background: $warning-bg-color-focus;
+ border: 1px solid $warning-border-color-focus;
+ color: $warning-text-focus;
+ }
+}
+
+@mixin outline-warning-active {
+ background: $btn-warning-bgcolor;
+ border-color: transparent;
+ background: $btn-warning-active-bgcolor;
+ border-color: $btn-warning-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-outline-active-box-shadow;
+ }
+ color: $btn-warning-active-color;
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-warning-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-warning-color);
+ }
+}
+
+@mixin outline-danger-focus {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-danger-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-danger-color);
+ }
+ @else if $skin-name == 'tailwind3' {
+ background: $danger-bg-color-focus;
+ border: 1px solid $danger-border-color-focus;
+ color: $danger-text-focus;
+ }
+}
+
+@mixin outline-danger-active {
+ background: $btn-danger-active-bgcolor;
+ border-color: $btn-danger-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-outline-active-box-shadow;
+ }
+ color: $btn-danger-active-color;
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-danger-active-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-danger-color);
+ }
+}
+
+@mixin outline-disabled {
+ background: $btn-outline-bgcolor;
+ @if $skin-name == 'bootstrap5.3' {
+ border-color: $btn-outline-disabled-border-color;
+ color: $btn-outline-disabled-color;
+ }
+ @else if $skin-name == 'fluent2' {
+ background: $btn-outline-disabled-bgcolor !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-outline-disabled-border-color !important; /* stylelint-disable-line declaration-no-important */
+ color: $btn-outline-disabled-color !important; /* stylelint-disable-line declaration-no-important */
+ }
+ @else if $skin-name == 'tailwind3' {
+ border: 1px solid $secondary-border-color-disabled;
+ color: $secondary-text-color-disabled;
+ }
+ @else {
+ border-color: $btn-outline-primary-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-primary-disabled-color;
+ }
+}
+
+@mixin outline-primary-disabled {
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-outline-primary-disabled-border-color;
+ }
+ @else {
+ background: $btn-outline-bgcolor;
+ }
+ border-color: $btn-outline-primary-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-primary-disabled-color;
+}
+
+@mixin outline-success-disabled {
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-outline-success-disabled-border-color;
+ }
+ @else {
+ background: $btn-outline-bgcolor;
+ }
+ border-color: $btn-outline-success-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-success-disabled-color;
+}
+
+@mixin outline-info-disabled {
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-info-disabled-border-color;
+ }
+ @else {
+ background: $btn-outline-bgcolor;
+ }
+ border-color: $btn-outline-info-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-info-disabled-color;
+}
+
+@mixin outline-warning-disabled {
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-outline-warning-disabled-border-color;
+ }
+ @else {
+ background: $btn-outline-bgcolor;
+ }
+ border-color: $btn-outline-warning-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-warning-disabled-color;
+}
+
+@mixin outline-danger-disabled {
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-outline-danger-disabled-border-color;
+ }
+ @else {
+ background: $btn-outline-bgcolor;
+ }
+ border-color: $btn-outline-danger-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-danger-disabled-color;
+}
+
+@mixin success-focus {
+ background: $btn-success-focus-bgcolor;
+ border-color: $btn-success-focus-border-color;
+ color: $btn-success-hover-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-success-focus-box-shadow;
+ }
+ @else {
+ @if $skin-name != 'tailwind3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ }
+}
+
+@mixin success-active {
+ background: $btn-success-active-bgcolor;
+ border-color: $btn-success-active-border-color;
+ color: $btn-success-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+}
+
+@mixin info-focus {
+ background: $btn-info-focus-bgcolor;
+ border-color: $btn-info-focus-border-color;
+ color: $btn-info-hover-color;
+ @if $skin-name != 'tailwind3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+}
+
+@mixin info-active {
+ background: $btn-info-active-bgcolor;
+ color: $btn-info-active-color;
+ border-color: $btn-info-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+}
+
+@mixin warning-focus {
+ background: $btn-warning-focus-bgcolor;
+ border-color: $btn-warning-focus-border-color;
+ color: $btn-warning-hover-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-warning-focus-box-shadow;
+ }
+ @else {
+ @if $skin-name != 'tailwind3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ }
+}
+
+@mixin warning-active {
+ background: $btn-warning-active-bgcolor;
+ border-color: $btn-warning-active-border-color;
+ color: $btn-warning-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+}
+
+@mixin danger-focus {
+ background: $btn-danger-focus-bgcolor;
+ border-color: $btn-danger-focus-border-color;
+ color: $btn-danger-hover-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-danger-focus-box-shadow;
+ }
+ @else {
+ @if $skin-name != 'tailwind3' {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ }
+}
+
+@mixin danger-active {
+ background: $btn-danger-active-bgcolor;
+ border-color: $btn-danger-active-border-color;
+ color: $btn-danger-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+}
+
+@mixin link-focus {
+ border-radius: 4px;
+ text-decoration: underline;
+}
+
+@mixin link-hover {
+ border-radius: 4px;
+ text-decoration: underline;
+}
+
+@mixin success-disabled {
+ background: $btn-success-disabled-bgcolor;
+ @if $skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3' {
+ border-color: $success-border-color-disabled;
+ }
+ @else {
+ border-color: $btn-disabled-border-color;
+ }
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-success-disabled-color;
+}
+
+@mixin info-disabled {
+ background: $btn-info-disabled-bgcolor;
+ @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') {
+ border-color: $btn-info-disabled-border-color;
+ }
+ @else {
+ border-color: $btn-disabled-border-color;
+ }
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-info-disabled-color;
+}
+
+@mixin warning-disabled {
+ background: $btn-warning-disabled-bgcolor;
+ @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') {
+ border-color: $btn-warning-disabled-border-color;
+ }
+ @else {
+ border-color: $btn-disabled-border-color;
+ }
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-warning-disabled-color;
+}
+
+@mixin danger-disabled {
+ background: $btn-danger-disabled-bgcolor;
+ @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') {
+ border-color: $btn-danger-disabled-border-color;
+ }
+ @else {
+ border-color: $btn-disabled-border-color;
+ }
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-danger-disabled-color;
+}
+
+@mixin link-disabled {
+ @if $skin-name == 'bootstrap5.3' {
+ color: $secondary-border-color-disabled;
+ text-decoration: underline;
+ }
+ @else if $skin-name == 'tailwind3' {
+ color: $btn-link-disabled-color;
+ }
+ @else {
+ color: $btn-disabled-color;
+ }
+ background: $btn-link-disabled-bgcolor;
+ box-shadow: $btn-flat-box-shadow;
+ text-decoration: none;
+}
diff --git a/components/buttons/styles/button/_theme.scss b/components/buttons/styles/button/_theme.scss
new file mode 100644
index 0000000..d5f81d1
--- /dev/null
+++ b/components/buttons/styles/button/_theme.scss
@@ -0,0 +1,1677 @@
+@use 'sass:color';
+@import 'mixin.scss';
+@include export-module('button-theme') {
+
+ /* stylelint-disable property-no-vendor-prefix */
+ .sf-btn,
+ .sf-css.sf-btn {
+ -webkit-tap-highlight-color: transparent;
+ background: $btn-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-border-color;
+ }
+ @else {
+ border-color: $btn-border-color;
+ }
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-box-shadow;
+ }
+ color: $btn-color;
+ transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
+ @at-root {
+ &:hover {
+ background: $btn-hover-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-hover-border-color;
+ }
+ @else {
+ border-color: $btn-hover-border-color;
+ }
+ box-shadow: $btn-hover-focus-box-shadow;
+ color: $btn-hover-color;
+ }
+
+ &:focus { // both keyboard and focus
+ @include button-focus;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-bgcolor;
+ color: $btn-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active {
+ @include button-active;
+ }
+
+ &.sf-active {
+ background: $btn-active-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-active-border-color;
+ }
+ @else {
+ border-color: $btn-active-border-color;
+ }
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+ color: $btn-active-color;
+ @if $skin-name == 'fluent2' {
+ background: $secondary-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $secondary-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ color: $secondary-text-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-disabled-bgcolor;
+ border-color: $btn-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-disabled-color;
+ }
+
+ &.sf-disabled {
+ @if $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' {
+ opacity: 1;
+ }
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-bgcolor;
+ }
+
+ &.sf-round,
+ &.sf-round-edge {
+ background: $btn-round-bgcolor;
+ border-color: $btn-round-border-color;
+ color: $btn-round-color;
+
+ &:hover {
+ background: $btn-round-hover-bgcolor;
+ border-color: $btn-round-hover-border-color;
+ color: $btn-round-hover-color;
+ }
+
+ &:focus {
+ background: $btn-focus-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-focus-border-color;
+ }
+ @else {
+ border-color: $btn-focus-border-color;
+ }
+ box-shadow: $btn-box-shadow;
+ color: $btn-round-focus-color;
+ outline: $btn-focus-outline-round;
+ outline-offset: $btn-focus-outline-offset;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-bgcolor;
+ color: $btn-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active {
+ background: $btn-active-bgcolor;
+ @if $skin-name == 'Material3' {
+ border-image: $btn-active-border-color;
+ }
+ @else {
+ border-color: $btn-active-border-color;
+ }
+ box-shadow: $btn-active-box-shadow;
+ color: $btn-round-active-color;
+ outline: $btn-active-outline;
+ outline-offset: $btn-active-outline-offset;
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-disabled-bgcolor;
+ border-color: $btn-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-disabled-color;
+ }
+
+ &.sf-primary,
+ &.sf-filled {
+ &:hover {
+ @if $skin-name != 'fluent2' {
+ border-color: $btn-primary-bgcolor;
+ }
+ }
+
+ &:focus {
+ outline: $btn-focus-outline-round;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-primary-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-primary-bgcolor;
+ color: $btn-primary-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+ }
+
+ &.sf-success {
+ &:hover {
+ @if $skin-name != 'fluent2' {
+ border-color: $btn-success-bgcolor;
+ }
+ }
+
+ &:focus {
+ outline: $btn-focus-outline-round;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-success-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-success-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-success-bgcolor;
+ color: $btn-success-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+ }
+
+ &.sf-info {
+ &:hover {
+ @if $skin-name != 'fluent2' {
+ border-color: $btn-info-bgcolor;
+ }
+ }
+
+ &:focus {
+ outline: $btn-focus-outline-round;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-info-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-info-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-info-bgcolor;
+ color: $btn-info-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+ }
+
+ &.sf-warning {
+ &:hover {
+ @if $skin-name != 'fluent2' {
+ border-color: $btn-warning-bgcolor;
+ }
+ }
+
+ &:focus {
+ outline: $btn-focus-outline-round;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-warning-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-warning-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-warning-bgcolor;
+ color: $btn-warning-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+ }
+
+ &.sf-danger {
+ &:hover {
+ @if $skin-name != 'fluent2' {
+ border-color: $btn-danger-bgcolor;
+ }
+ }
+
+ &:focus {
+ outline: $btn-focus-outline-round;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-danger-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-danger-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-danger-bgcolor;
+ color: $btn-danger-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+ }
+ }
+
+ &.sf-filled {
+ background: $btn-primary-bgcolor;
+ border-color: $btn-primary-border-color;
+ color: $btn-primary-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:hover {
+ background: $btn-primary-hover-bgcolor;
+ @if $skin-name != 'Material3' {
+ border-color: $btn-primary-hover-border-color;
+ }
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @else {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ color: $btn-primary-hover-color;
+ }
+
+ &:focus {
+ @include primary-focus;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-primary-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ border-color: $btn-keyboard-focus-border-color;
+ background-color: $primary-bg-color-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-primary-bgcolor;
+ color: $btn-primary-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active {
+ @include primary-active;
+ }
+
+ &.sf-active {
+ background: $btn-primary-active-bgcolor;
+ border-color: $btn-primary-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+ color: $btn-primary-active-color;
+ @if $skin-name == 'fluent2' {
+ background: $primary-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $primary-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ color: $primary-text-selected !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include primary-disabled;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-primary-bgcolor;
+ }
+ }
+
+ &.sf-success {
+ background: $btn-success-bgcolor;
+ border-color: $btn-success-border-color;
+ color: $btn-success-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:hover {
+ background: $btn-success-hover-bgcolor;
+ @if $skin-name != 'Material3' {
+ border-color: $btn-success-hover-border-color;
+ }
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @else {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ color: $btn-success-hover-color;
+ }
+
+ &:focus {
+ @include success-focus;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-success-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-success-focus-box-shadow;
+ background-color: $success-bg-color-focus;
+ color: $success-text-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-success-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-success-bgcolor;
+ color: $btn-success-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include success-active;
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: $success-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $success-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ color: $success-text-pressed !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include success-disabled;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-success-bgcolor;
+ }
+ }
+
+ &.sf-info {
+ background: $btn-info-bgcolor;
+ border-color: $btn-info-border-color;
+ color: $btn-info-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:hover {
+ background: $btn-info-hover-bgcolor;
+ @if $skin-name != 'Material3' {
+ border-color: $btn-info-hover-border-color;
+ }
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @else {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ color: $btn-info-hover-color;
+ }
+
+ &:focus {
+ @include info-focus;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-info-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-info-focus-box-shadow;
+ background-color: $info-bg-color-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-info-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-info-bgcolor;
+ color: $btn-info-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include info-active;
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: $info-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $info-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ color: $btn-info-active-color !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include info-disabled;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-info-bgcolor;
+ }
+ }
+
+ &.sf-warning {
+ background: $btn-warning-bgcolor;
+ border-color: $btn-warning-border-color;
+ color: $btn-warning-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:hover {
+ background: $btn-warning-hover-bgcolor;
+ @if $skin-name != 'Material3' {
+ border-color: $btn-warning-hover-border-color;
+ }
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @else {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ color: $btn-warning-hover-color;
+ }
+
+ &:focus {
+ @include warning-focus;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-warning-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-warning-focus-box-shadow;
+ background-color: $warning-bg-color-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-warning-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-warning-bgcolor;
+ color: $btn-warning-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include warning-active;
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: $warning-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $warning-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ color: $btn-warning-active-color !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include warning-disabled;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-warning-bgcolor;
+ }
+ }
+
+ &.sf-danger {
+ background: $btn-danger-bgcolor;
+ border-color: $btn-danger-border-color;
+ color: $btn-danger-color;
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:hover {
+ background: $btn-danger-hover-bgcolor;
+ @if $skin-name != 'Material3' {
+ border-color: $btn-danger-hover-border-color;
+ }
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @else {
+ box-shadow: $btn-hover-focus-box-shadow;
+ }
+ color: $btn-danger-hover-color;
+ }
+
+ &:focus {
+ @include danger-focus;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-danger-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-danger-focus-box-shadow;
+ background-color: $danger-bg-color-focus;
+ color: $danger-text-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-danger-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-danger-bgcolor;
+ color: $btn-danger-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active {
+ @include danger-active;
+ }
+
+ &.sf-active {
+ background: $btn-danger-active-bgcolor;
+ border-color: $btn-danger-active-border-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-active-box-shadow;
+ }
+ color: $btn-danger-active-color;
+ @if $skin-name == 'fluent2' {
+ background: $danger-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $danger-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ color: $danger-text-pressed !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include danger-disabled;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-danger-bgcolor;
+ }
+ }
+
+ &.sf-flat {
+ background: $btn-flat-bgcolor;
+ border-color: $btn-flat-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-color;
+
+ &:hover {
+ background: $btn-flat-hover-bgcolor;
+ border-color: $btn-flat-hover-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-hover-color;
+ }
+
+ &:focus {
+ background: $btn-flat-focus-bgcolor;
+ border-color: $btn-flat-focus-border-color;
+ color: $btn-flat-focus-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-box-shadow;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-bgcolor;
+ color: $btn-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ background: $btn-flat-active-bgcolor;
+ border-color: $btn-flat-active-border-color;
+ color: $btn-flat-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-active-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-flat-disabled-bgcolor;
+ border-color: $btn-flat-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-disabled-color;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-flat-bgcolor;
+ }
+
+ &.sf-primary,
+ &.sf-filled {
+ background: $btn-flat-primary-bgcolor;
+ border-color: $btn-flat-primary-border-color;
+ color: $btn-flat-primary-color;
+
+ &:hover {
+ background: $btn-flat-primary-hover-bgcolor;
+ border-color: $btn-flat-primary-hover-border-color;
+ color: $btn-flat-primary-hover-color;
+ }
+
+ &:focus {
+ background: $btn-flat-primary-focus-bgcolor;
+ border-color: $btn-flat-primary-focus-border-color;
+ color: $btn-flat-primary-focus-color;
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-primary-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-primary-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-primary-focus-box-shadow;
+ background-color: $primary-bg-color-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-primary-bgcolor;
+ color: $btn-primary-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ background: $btn-flat-primary-active-bgcolor;
+ border-color: $btn-flat-primary-active-border-color;
+ color: $btn-flat-primary-active-color;
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-flat-primary-disabled-bgcolor;
+ border-color: $btn-flat-primary-disabled-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-primary-disabled-color;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-flat-primary-bgcolor;
+ }
+ }
+
+ &.sf-success {
+ background: $btn-flat-success-bgcolor;
+ border-color: $btn-flat-success-border-color;
+ color: $btn-flat-success-color;
+
+ &:hover {
+ background: $btn-flat-success-hover-bgcolor;
+ border-color: $btn-flat-success-hover-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-success-hover-color;
+ }
+
+ &:focus {
+ background: $btn-flat-success-focus-bgcolor;
+ border-color: $btn-flat-success-focus-border-color;
+ color: $btn-flat-success-focus-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-box-shadow;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-success-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-success-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-success-focus-box-shadow;
+ background-color: $success-bg-color-focus;
+ color: $success-text-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-success-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-success-bgcolor;
+ color: $btn-success-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ background: $btn-flat-success-active-bgcolor;
+ border-color: $btn-flat-success-active-border-color;
+ color: $btn-flat-success-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-active-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-flat-success-disabled-bgcolor;
+ border-color: $btn-flat-success-disabled-border-color;
+ color: $btn-flat-success-disabled-color;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-flat-success-bgcolor;
+ }
+ }
+
+ &.sf-info {
+ background: $btn-flat-info-bgcolor;
+ border-color: $btn-flat-info-border-color;
+ color: $btn-flat-info-color;
+
+ &:hover {
+ background: $btn-flat-info-hover-bgcolor;
+ border-color: $btn-flat-info-hover-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-info-hover-color;
+ }
+
+ &:focus {
+ background: $btn-flat-info-focus-bgcolor;
+ border-color: $btn-flat-info-focus-border-color;
+ color: $btn-flat-info-focus-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-box-shadow;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-info-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-info-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-info-focus-box-shadow;
+ background-color: $info-bg-color-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-info-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-info-bgcolor;
+ color: $btn-info-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ background: $btn-flat-info-active-bgcolor;
+ border-color: $btn-flat-info-active-border-color;
+ color: $btn-flat-info-active-color;
+ @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-active-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-flat-info-disabled-bgcolor;
+ border-color: $btn-flat-info-disabled-border-color;
+ color: $btn-flat-info-disabled-color;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-flat-info-bgcolor;
+ }
+ }
+
+ &.sf-warning {
+ background: $btn-flat-warning-bgcolor;
+ border-color: $btn-flat-warning-border-color;
+ color: $btn-flat-warning-color;
+
+ &:hover {
+ background: $btn-flat-warning-hover-bgcolor;
+ border-color: $btn-flat-warning-hover-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-warning-hover-color;
+ }
+
+ &:focus {
+ background: $btn-flat-warning-focus-bgcolor;
+ border-color: $btn-flat-warning-focus-border-color;
+ color: $btn-flat-warning-focus-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-box-shadow;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-warning-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-warning-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-warning-focus-box-shadow;
+ background-color: $warning-bg-color-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-warning-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-warning-bgcolor;
+ color: $btn-warning-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ background: $btn-flat-warning-active-bgcolor;
+ border-color: $btn-flat-warning-active-border-color;
+ color: $btn-flat-warning-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-active-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-flat-warning-disabled-bgcolor;
+ border-color: $btn-flat-warning-disabled-border-color;
+ color: $btn-flat-warning-disabled-color;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-flat-warning-bgcolor;
+ }
+ }
+
+ &.sf-danger {
+ background: $btn-flat-danger-bgcolor;
+ border-color: $btn-flat-danger-border-color;
+ color: $btn-flat-danger-color;
+
+ &:hover {
+ background: $btn-flat-danger-hover-bgcolor;
+ border-color: $btn-flat-danger-hover-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-flat-danger-hover-color;
+ }
+
+ &:focus {
+ background: $btn-flat-danger-focus-bgcolor;
+ border-color: $btn-flat-danger-focus-border-color;
+ color: $btn-flat-danger-focus-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-box-shadow;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ background: $btn-danger-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-danger-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-danger-focus-box-shadow;
+ background-color: $danger-bg-color-focus;
+ color: $danger-text-focus;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $btn-danger-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $btn-danger-bgcolor;
+ color: $btn-danger-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ background: $btn-flat-danger-active-bgcolor;
+ border-color: $btn-flat-danger-active-border-color;
+ color: $btn-flat-danger-active-color;
+ @if $skin-name != 'bootstrap5.3' {
+ box-shadow: $btn-flat-active-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ background: $btn-flat-danger-disabled-bgcolor;
+ border-color: $btn-flat-danger-disabled-border-color;
+ color: $btn-flat-danger-disabled-color;
+ }
+
+ & .sf-ripple-element {
+ background: $btn-ripple-flat-danger-bgcolor;
+ }
+ }
+ }
+
+ &.sf-outlined {
+ background: $btn-outline-bgcolor;
+ border-color: $btn-outline-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-color;
+ @if $skin-name == 'Material3' {
+ border: 1px solid;
+ }
+
+ &:hover {
+ background: $btn-outline-hover-bgcolor;
+ border-color: $btn-outline-hover-border-color;
+ box-shadow: $btn-flat-box-shadow;
+ color: $btn-outline-hover-color;
+ }
+
+ &:focus {
+ @include outline-focus;
+ }
+
+ &:focus:not(:focus-visible) { //mouse click
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ border-color: $secondary-border-color-hover;
+ color: $secondary-outline-button-text-color-pressed;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-outline-active-bgcolor;
+ color: $btn-outline-active-color;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'bootstrap5.3' {
+ background-color: $secondary-bg-color-focus;
+ color: $secondary-text-color-focus;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ @if $skin-name == 'Material3' {
+ background: $btn-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $transparent;
+ color: $btn-color;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include outline-active;
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ color: $secondary-outline-button-text-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-outline-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $secondary-outline-button-text-color-pressed;
+ }
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: transparent !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-outline-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $secondary-outline-button-text-color-pressed;
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include outline-disabled;
+ }
+
+ &.sf-primary,
+ &.sf-filled {
+ background: $btn-outline-bgcolor;
+ @if $skin-name == 'Material3' {
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-primary-color);
+ }
+ @else {
+ border-color: $btn-outline-primary-color;
+ color: $btn-outline-primary-color;
+ }
+
+ &:hover {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-primary-hover-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-primary-color);
+ }
+ @else if $skin-name == 'fluent2' {
+ background: $btn-outline-success-hover-bgcolor;
+ border-color: $btn-outline-primary-hover-border-color;
+ color: $btn-primary-hover-bgcolor;
+ }
+ @else {
+ background: $btn-primary-hover-bgcolor;
+ border-color: $btn-outline-primary-hover-border-color;
+ color: $btn-primary-hover-color;
+ }
+ }
+
+ &:focus {
+ @include outline-primary-focus;
+ }
+
+ &:focus:not(:focus-visible) { //mouse click
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ border-color: $primary-border-color-hover;
+ color: $primary-border-color-hover;
+ }
+
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-outline-primary-focus-bgcolor;
+ color: $btn-outline-active-color;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'bootstrap5.3' {
+ background-color: $primary-bg-color-focus;
+ color: $primary-text-color;
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @if $skin-name == 'Material3' {
+ background: $btn-primary-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-primary-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-primary-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $transparent;
+ color: $btn-primary-bgcolor;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include outline-primary-active;
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ color: $primary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-outline-primary-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $primary-bg-color-pressed;
+ }
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: transparent !important; /* stylelint-disable-line declaration-no-important */
+ color: $primary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-outline-primary-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include outline-primary-disabled;
+ }
+ }
+
+ &.sf-success {
+ background: $btn-outline-bgcolor;
+ @if $skin-name == 'bootstrap5.3' {
+ border-color: $success-outline;
+ color: $success-outline;
+ }
+ @if $skin-name == 'Material3' {
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-success-color);
+ }
+ @else {
+ border-color: $btn-success-bgcolor;
+ color: $btn-success-bgcolor;
+ }
+
+ &:hover {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-success-hover-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-success-color);
+ }
+ @else if $skin-name == 'fluent2' {
+ background: $btn-outline-success-hover-bgcolor;
+ border-color: $btn-success-hover-border-color;
+ color: $btn-success-hover-bgcolor;
+ }
+ @else {
+ background: $btn-success-hover-bgcolor;
+ border-color: $btn-success-hover-border-color;
+ color: $btn-success-color;
+ }
+ }
+
+ &:focus {
+ @include outline-success-focus;
+ }
+
+ &:focus:not(:focus-visible) { //mouse click
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ border-color: $success-border-color-hover;
+ color: $success-border-color-hover;
+ }
+
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-success-bgcolor;
+ color: $btn-success-color;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'bootstrap5.3' {
+ background-color: $success-bg-color-focus;
+ color: $success-text-focus;
+ box-shadow: $btn-success-focus-box-shadow;
+ }
+ @if $skin-name == 'Material3' {
+ background: $btn-success-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-success-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-success-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $transparent;
+ color: $btn-success-bgcolor;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include outline-success-active;
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ color: $success-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-success-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $success-bg-color-pressed;
+ }
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: transparent !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $success-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include outline-success-disabled;
+ }
+ }
+
+ &.sf-info {
+ background: $btn-outline-bgcolor;
+ @if $skin-name == 'bootstrap5.3' {
+ border-color: $info-outline;
+ color: $info-outline;
+ }
+ @if $skin-name == 'Material3' {
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-info-color);
+ }
+ @else {
+ border-color: $btn-info-bgcolor;
+ color: $btn-info-bgcolor;
+ }
+
+ &:hover {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-info-hover-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-info-color);
+ }
+ @else if $skin-name == 'fluent2' {
+ background: $btn-outline-info-hover-bgcolor;
+ border-color: $btn-info-hover-border-color;
+ color: $btn-info-hover-bgcolor;
+ }
+ @else {
+ background: $btn-info-hover-bgcolor;
+ border-color: $btn-info-hover-border-color;
+ color: $btn-info-color;
+ }
+ }
+
+ &:focus {
+ @include outline-info-focus;
+ }
+
+ &:focus:not(:focus-visible) { //mouse click
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ border-color: $info-bg-color-hover;
+ color: $info-bg-color-hover;
+ }
+
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-info-bgcolor;
+ color: $btn-info-color;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'bootstrap5.3' {
+ background-color: $info-bg-color-focus;
+ color: $info-text-focus;
+ box-shadow: $btn-info-focus-box-shadow;
+ }
+ @if $skin-name == 'Material3' {
+ background: $btn-info-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-info-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-info-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $transparent;
+ color: $btn-info-bgcolor;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include outline-info-active;
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ color: $info-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-info-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $info-bg-color-pressed;
+ }
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: transparent !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $info-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include outline-info-disabled;
+ }
+ }
+
+ &.sf-warning {
+ background: $btn-outline-bgcolor;
+ @if $skin-name == 'bootstrap5.3' {
+ border-color: $warning-outline;
+ color: $warning-outline;
+ }
+ @if $skin-name == 'Material3' {
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-warning-color);
+ }
+ @else {
+ border-color: $btn-warning-bgcolor;
+ color: $btn-warning-bgcolor;
+ }
+
+ &:hover {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-warning-hover-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-warning-color);
+ }
+ @else if $skin-name == 'fluent2' {
+ background: $btn-outline-warning-hover-bgcolor;
+ border-color: $btn-warning-hover-border-color;
+ color: $btn-warning-hover-bgcolor;
+ }
+ @else {
+ background: $btn-warning-hover-bgcolor;
+ border-color: $btn-warning-hover-border-color;
+ color: $btn-warning-color;
+ }
+ }
+
+ &:focus {
+ @include outline-warning-focus;
+ }
+
+ &:focus:not(:focus-visible) { //mouse click
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ border-color: $warning-border-color-hover;
+ color: $warning-border-color-hover;
+ }
+
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-warning-bgcolor;
+ color: $btn-warning-color;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'bootstrap5.3' {
+ background-color: $warning-bg-color-focus;
+ color: $warning-text-focus;
+ box-shadow: $btn-warning-focus-box-shadow;
+ }
+ @if $skin-name == 'Material3' {
+ background: $btn-warning-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-warning-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-warning-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $transparent;
+ color: $btn-warning-bgcolor;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include outline-warning-active;
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ color: $warning-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-warning-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $warning-bg-color-pressed;
+ }
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: transparent !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $warning-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include outline-warning-disabled;
+ }
+ }
+
+ &.sf-danger {
+ background: $btn-outline-bgcolor;
+ @if $skin-name == 'bootstrap5.3' {
+ border-color: $danger-outline;
+ color: $danger-outline;
+ }
+ @if $skin-name == 'Material3' {
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-danger-color);
+ }
+ @else {
+ border-color: $btn-danger-bgcolor;
+ color: $btn-danger-bgcolor;
+ }
+
+ &:hover {
+ @if $skin-name == 'Material3' {
+ background: $btn-outline-danger-hover-bgcolor;
+ border: 1px solid $btn-outline-border-color;
+ color: rgba($btn-outline-danger-color);
+ }
+ @if $skin-name == 'fluent2' {
+ background: $btn-outline-danger-hover-bgcolor;
+ border-color: $btn-danger-hover-border-color;
+ color: $btn-danger-hover-bgcolor;
+ }
+ @else {
+ background: $btn-danger-hover-bgcolor;
+ border-color: $btn-danger-hover-border-color;
+ color: $btn-danger-color;
+ }
+ }
+
+ &:focus {
+ @include outline-danger-focus;
+ }
+
+ &:focus:not(:focus-visible) { //mouse click
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ border-color: $danger-border-color-hover;
+ color: $danger-border-color-hover;
+ }
+
+ @if $skin-name == 'bootstrap5.3' {
+ background: $btn-danger-bgcolor;
+ color: $btn-danger-color;
+ }
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'bootstrap5.3' {
+ background-color: $danger-bg-color-focus;
+ color: $danger-text-focus;
+ box-shadow: $btn-danger-focus-box-shadow;
+ }
+ @if $skin-name == 'Material3' {
+ background: $btn-danger-active-bgcolor;
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ color: $btn-danger-color;
+ }
+ @if $skin-name == 'fluent2' {
+ border-color: $btn-keyboard-focus-border-color;
+ box-shadow: $btn-danger-focus-box-shadow;
+ }
+ @if $skin-name == 'tailwind3' {
+ background: $transparent;
+ color: $btn-danger-bgcolor;
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @include outline-danger-active;
+ @if $skin-name == 'fluent2' {
+ background: transparent;
+ color: $danger-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $btn-danger-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+ outline: 2px solid $danger-bg-color-pressed;
+ }
+ }
+
+ &.sf-active {
+ @if $skin-name == 'fluent2' {
+ background: transparent !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $danger-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+
+ &:disabled,
+ &.sf-disabled {
+ @include outline-danger-disabled;
+ }
+ }
+ }
+
+ &.sf-link {
+ background: $btn-link-bgcolor;
+ border-color: $btn-link-border-color;
+ border-radius: 0;
+ box-shadow: none;
+ color: $btn-link-color;
+
+ &:hover {
+ @include link-hover;
+ }
+
+ &:focus {
+ @include link-focus;
+ }
+
+ &:focus:not(:focus-visible) {
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
+ }
+
+ &:focus-visible { // only for keybord
+ @if $skin-name == 'Material3' {
+ box-shadow: $btn-keyboard-focus-box-shadow;
+ }
+ @if $skin-name == 'fluent2' {
+ text-decoration-color: $btn-link-focus-underline-color !important; /* stylelint-disable-line declaration-no-important */
+ text-decoration: underline;
+ text-decoration-style: double;
+ }
+ }
+
+ &:active,
+ &.sf-active {
+ @if $skin-name == 'tailwind3' {
+ color: $btn-link-active-color;
+ text-decoration: underline;
+ }
+ }
+
+ &:disabled {
+ @include link-disabled;
+ }
+ }
+
+ &.sf-inherit {
+ color: inherit;
+ background: inherit;
+ border-color: transparent;
+ box-shadow: none;
+
+ &:hover,
+ &:focus,
+ &:active,
+ &.sf-active {
+ background: rgba(transparent, .056);
+ border-color: transparent;
+ box-shadow: none;
+ color: inherit;
+ outline: none;
+ }
+
+ &:disabled {
+ background: inherit;
+ color: inherit;
+ border-color: transparent;
+ box-shadow: none;
+ opacity: .5;
+ }
+ }
+ }
+ }
+}
+
+@if $skin-name == 'bootstrap5.3' {
+ .sf-btn:not(.sf-outlined) {
+ &:disabled,
+ &.sf-disabled {
+ border-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+}
diff --git a/components/buttons/styles/button/material3-dark.scss b/components/buttons/styles/button/material3-dark.scss
new file mode 100644
index 0000000..bc1eba0
--- /dev/null
+++ b/components/buttons/styles/button/material3-dark.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/button/material3.scss b/components/buttons/styles/button/material3.scss
new file mode 100644
index 0000000..3130aa3
--- /dev/null
+++ b/components/buttons/styles/button/material3.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/check-box/_all.scss b/components/buttons/styles/check-box/_all.scss
new file mode 100644
index 0000000..f4d67e8
--- /dev/null
+++ b/components/buttons/styles/check-box/_all.scss
@@ -0,0 +1 @@
+@import 'layout.scss';
diff --git a/components/buttons/styles/check-box/_layout.scss b/components/buttons/styles/check-box/_layout.scss
new file mode 100644
index 0000000..493c058
--- /dev/null
+++ b/components/buttons/styles/check-box/_layout.scss
@@ -0,0 +1,460 @@
+@mixin ripple-container {
+ bottom: $cbox-ripple-small-size;
+ height: $cbox-ripple-small-height;
+ left: $cbox-ripple-small-size;
+ right: $cbox-ripple-small-size;
+ top: $cbox-ripple-small-size;
+ width: $cbox-ripple-small-width;
+}
+
+@include export-module('checkbox-layout') {
+ .sf-checkbox-wrapper,
+ .sf-css.sf-checkbox-wrapper {
+ cursor: pointer;
+ display: inline-block;
+ line-height: 1;
+ outline: none;
+ user-select: none;
+ @if $skin-name == 'fluent2' {
+ border-radius: 4px;
+ border: 1px solid transparent;
+ line-height: 0;
+ }
+ @at-root {
+ & label {
+ cursor: pointer;
+ display: inline-block;
+ line-height: 0;
+ margin: 0;
+ position: relative;
+ white-space: nowrap;
+ }
+
+ &:hover {
+ & .sf-ripple-container {
+ @if $skin-name == 'Material3' {
+ background: $cbox-ripple-bgcolor;
+ }
+ &.sf-ripple-check {
+ @if $skin-name == 'Material3' {
+ background: $cbox-checked-ripple-bgcolo;
+ }
+ }
+ }
+
+ & .sf-frame {
+ background-color: $cbox-hover-bgcolor;
+ border-color: $cbox-hover-border-color;
+
+ &.sf-check {
+ background-color: $cbox-checkmark-hover-bgcolor;
+ border-color: $cbox-checkmark-hover-border-color;
+ color: $cbox-checkmark-hover-color;
+ }
+
+ &.sf-stop {
+ @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+ background-color: $cbox-checkmark-hover-bgcolor;
+ border-color: $cbox-checkmark-hover-border-color;
+ }
+ @else if $skin-name == 'fluent2' {
+ border-color: $cbox-checkmark-hover-border-color;
+ }
+ @else {
+ color: $cbox-indeterminate-hover-color;
+ }
+ @if $skin-name == 'fluent2' {
+ color: $primary-bg-color-hover;
+ }
+ @if $skin-name == 'tailwind3' {
+ background-color: $cbox-focussed-checkmark-bgcolor;
+ border-color: $cbox-indeterminate-border-color;
+ }
+ }
+ }
+
+ & .sf-label {
+ color: $cbox-hover-color;
+ }
+ }
+
+
+ &:focus,
+ &.sf-focus {
+ & .sf-ripple-container {
+ background-color: $cbox-key-focussed-bgcolor;
+
+ &.sf-ripple-check {
+ background-color: $cbox-checked-ripple-bgcolo;
+ }
+ }
+
+ & .sf-frame,
+ & .sf-frame.sf-check {
+ outline: $cbox-focus-outline;
+ outline-offset: $cbox-focus-outline-offset;
+ }
+
+ & .sf-frame {
+ & {
+ box-shadow: $cbox-focussed-box-shadow;
+ }
+ @if $skin-name == 'bootstrap5.3' {
+ & {
+ border-color: $border-focus;
+ }
+ }
+ }
+ @if $skin-name == 'fluent2' {
+ & {
+ border-radius: 4px;
+ box-shadow: $shadow-focus-ring1;
+ }
+ }
+ }
+
+ &:active {
+ & .sf-frame {
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $cbox-focussed-box-shadow;
+ border-color: $border-focus !important; /* stylelint-disable-line declaration-no-important */
+ background-color: $content-bg-color-pressed;
+ }
+ @if $skin-name == 'tailwind3' {
+ box-shadow: $cbox-focussed-box-shadow;
+ }
+ }
+
+ & .sf-ripple-element {
+ background: $cbox-ripple-bgcolor;
+ }
+
+ & .sf-ripple-check {
+ & .sf-ripple-element {
+ background: $cbox-checked-ripple-bgcolo;
+ }
+ }
+ }
+
+ & .sf-ripple-check {
+ & .sf-ripple-element {
+ background: $cbox-ripple-bgcolor;
+ }
+ }
+
+ & .sf-ripple-container {
+ border-radius: 50%;
+ bottom: $cbox-ripple-size;
+ height: $cbox-ripple-height;
+ left: $cbox-ripple-size;
+ pointer-events: none;
+ position: absolute;
+ right: $cbox-ripple-size;
+ top: $cbox-ripple-size;
+ width: $cbox-ripple-width;
+ z-index: 1;
+
+ & .sf-ripple-element {
+ @if $skin-name == 'Material3' {
+ border-radius: 50%;
+ }
+ }
+ }
+
+ & .sf-ripple-element {
+ background: $cbox-checked-ripple-bgcolo;
+ }
+
+ & .sf-label {
+ color: $cbox-color;
+ cursor: pointer;
+ display: inline-block;
+ font-family: $font-family;
+ font-size: $cbox-font-size;
+ font-weight: normal;
+ line-height: $cbox-height;
+ user-select: none;
+ vertical-align: middle;
+ white-space: normal;
+ @if $skin-name == 'tailwind3' {
+ font-weight: $font-weight-medium;
+ }
+ }
+
+ & .sf-checkbox {
+ height: 1px;
+ opacity: 0;
+ position: absolute;
+ width: 1px;
+
+ +.sf-label {
+ @if $skin-name == 'fluent2' {
+ margin: 6px 4px 6px 8px;
+ }
+ @else {
+ margin-right: $cbox-margin;
+ }
+ }
+ }
+
+ & .sf-checkbox {
+ &:focus,
+ &:active {
+ +.sf-frame {
+ background-color: $cbox-focussed-bgcolor;
+ border-color: $cbox-focussed-border-color;
+ box-shadow: $cbox-focussed-box-shadow;
+
+ &.sf-check {
+ background-color: $cbox-focussed-checkmark-bgcolor;
+ border-color: $cbox-focussed-checkmark-border-color;
+ box-shadow: $cbox-focussed-box-shadow;
+ color: $cbox-focussed-checkmark-color;
+ }
+
+ &.sf-stop {
+ background-color: $cbox-focussed-checkmark-bgcolor;
+ border-color: $cbox-focussed-checkmark-border-color;
+ box-shadow: $cbox-focussed-box-shadow;
+ color: $cbox-indeterminate-hover-color;
+ }
+ }
+ }
+ }
+
+ & .sf-frame {
+ background-color: $cbox-bgcolor;
+ border-color: $cbox-border-color;
+ border: $cbox-border;
+ border-radius: $cbox-border-radius;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ font-family: 'e-icons';
+ height: $cbox-height;
+ padding: $cbox-padding;
+ text-align: center;
+ vertical-align: middle;
+ width: $cbox-width;
+ @if $skin-name == 'fluent2' {
+ margin: 7.2px 8px;
+ }
+
+ +.sf-label {
+ @if $skin-name == 'fluent2' {
+ margin: 6px 8px 6px 4px;
+ }
+ @else {
+ margin-left: $cbox-margin;
+ }
+ }
+
+ +.sf-ripple-container {
+ left: auto;
+ }
+
+ &.sf-check {
+ background-color: $cbox-checkmark-bgcolor;
+ border-color: $cbox-checkmark-border-color;
+ color: $cbox-checkmark-color;
+ }
+
+ &.sf-stop {
+ background-color: $cbox-indeterminate-bgcolor;
+ border-color: $cbox-indeterminate-border-color;
+ color: $cbox-indeterminate-color;
+ }
+ }
+
+ & .sf-check {
+ font-size: $cbox-check-fontsize;
+ }
+
+ & .sf-stop {
+ font-size: $cbox-indeterminate-fontsize;
+ }
+
+ &.sf-checkbox-disabled {
+ cursor: default;
+ pointer-events: none;
+ @if $skin-name == 'bootstrap5.3' {
+ opacity: .5;
+ }
+
+ & .sf-frame {
+ cursor: default;
+ background-color: $cbox-disabled-bgcolor;
+ @if $skin-name == 'Material3' {
+ border: $cbox-border $cbox-disabled-border-color;
+ }
+ @else {
+ border-color: $cbox-disabled-border-color;
+ }
+ color: $cbox-disabled-color;
+
+ &.sf-check {
+ background-color: $cbox-checkmark-disabled-bgcolor;
+ @if $skin-name == 'Material3' {
+ border: none;
+ border-color: $cbox-checkmark-disabled-border-color;
+ line-height: 14px;
+ }
+ @else {
+ border-color: $cbox-checkmark-disabled-border-color;
+ }
+ color: $cbox-checkmark-disabled-color;
+ }
+
+ &.sf-stop {
+ background-color: $cbox-indeterminate-disabled-bgcolor;
+ @if $skin-name == 'Material3' {
+ border: none;
+ border: $cbox-indeterminate-disabled-border-color;
+ line-height: 14px;
+ }
+ @else {
+ border-color: $cbox-indeterminate-disabled-border-color;
+ }
+ color: $cbox-indeterminate-disabled-color;
+ }
+ }
+
+ & .sf-label {
+ color: $cbox-disabled-color;
+ cursor: default;
+ }
+ }
+
+ &.sf-rtl {
+ .sf-ripple-container {
+ right: $cbox-ripple-size;
+ }
+
+ & .sf-frame {
+ @if $skin-name != 'fluent2' {
+ margin: 0;
+ }
+
+ &:hover {
+ background-color: $cbox-hover-bgcolor;
+ border-color: $cbox-hover-border-color;
+ }
+
+ + .sf-ripple-container {
+ left: $cbox-ripple-size;
+ right: auto;
+ }
+ }
+
+ & .sf-label {
+ @if $skin-name == 'fluent2' {
+ margin: 6px 4px 6px 8px;
+ }
+ @else {
+ margin-left: 0;
+ margin-right: $cbox-margin;
+ }
+
+ +.sf-frame {
+ @if $skin-name != 'fluent2' {
+ margin: 0;
+ }
+ }
+ }
+
+ & .sf-checkbox {
+ +.sf-label {
+ @if $skin-name == 'fluent2' {
+ margin: 6px 4px 6px 8px;
+ }
+ @else {
+ margin-left: $cbox-margin;
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ &.sf-small {
+ & .sf-frame {
+ height: $cbox-small-height;
+ line-height: $cbox-small-lineheight;
+ width: $cbox-small-width;
+ }
+
+ & .sf-check {
+ font-size: $cbox-small-check-fontsize;
+ }
+
+ & .sf-stop {
+ font-size: $cbox-small-indeterminate-fontsize;
+ line-height: $cbox-small-indeterminate-lineheight;
+ }
+
+ & .sf-label {
+ font-size: $cbox-small-font-size;
+ line-height: $cbox-small-height;
+ }
+
+ & .sf-ripple-container {
+ @include ripple-container;
+ }
+ }
+
+ &:hover .sf-checkbox:focus + .sf-frame.sf-check {
+ @if $theme-name == 'fluent2-highcontrast' {
+ background-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
+ border-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+ }
+ }
+
+ .sf-css.sf-checkbox-wrapper {
+ & .sf-ripple-container {
+ right: $cbox-ripple-size;
+ top: -4.5px;
+ }
+ }
+
+ .sf-checkbox-wrapper[readonly] {
+ pointer-events: none;
+ }
+
+ .sf-small .sf-checkbox-wrapper,
+ .sf-small.sf-checkbox-wrapper,
+ .sf-small .sf-css.sf-checkbox-wrapper,
+ .sf-small.sf-css.sf-checkbox-wrapper {
+ & .sf-frame {
+ height: $cbox-small-height;
+ line-height: $cbox-small-lineheight;
+ width: $cbox-small-width;
+ @if $skin-name == 'fluent2' {
+ margin: 6.2px 8px;
+ }
+
+ &:hover {
+ background-color: $cbox-hover-bgcolor;
+ border-color: $cbox-hover-border-color;
+ }
+ }
+
+ & .sf-check {
+ font-size: $cbox-small-check-fontsize;
+ }
+
+ & .sf-stop {
+ font-size: $cbox-small-indeterminate-fontsize;
+ line-height: $cbox-small-indeterminate-lineheight;
+ }
+
+ & .sf-label {
+ font-size: $cbox-small-font-size;
+ line-height: $cbox-small-height;
+ }
+
+ & .sf-ripple-container {
+ @include ripple-container;
+ }
+ }
+}
diff --git a/components/buttons/styles/check-box/_material3-dark-definition.scss b/components/buttons/styles/check-box/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/buttons/styles/check-box/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/buttons/styles/check-box/_material3-definition.scss b/components/buttons/styles/check-box/_material3-definition.scss
new file mode 100644
index 0000000..8a7ea46
--- /dev/null
+++ b/components/buttons/styles/check-box/_material3-definition.scss
@@ -0,0 +1,68 @@
+$cbox-border: 2px solid !default;
+$cbox-font-size: 14px !default;
+$cbox-height: 16px !default;
+$cbox-border-radius: 2px !default;
+$cbox-check-fontsize: 10px !default;
+$cbox-indeterminate-fontsize: 10px !default;
+$cbox-indeterminate-lineheight: 11px !default;
+$cbox-lineheight: 11px !default;
+$cbox-margin: 8px !default;
+$cbox-padding: 0 !default;
+$cbox-ripple-size: -9.5px !default;
+$cbox-ripple-height: 34px !default;
+$cbox-ripple-width: 34px !default;
+$cbox-ripple-small-size: -5px !default;
+$cbox-ripple-small-height: 24px !default;
+$cbox-ripple-small-width: 24px !default;
+$cbox-ripple-bigger-size: -11px !default;
+$cbox-ripple-bigger-height: 40px !default;
+$cbox-ripple-bigger-width: 40px !default;
+$cbox-ripple-bigger-small-size: -10px !default;
+$cbox-ripple-bigger-small-height: 36px !default;
+$cbox-ripple-bigger-small-width: 36px !default;
+$cbox-small-check-fontsize: 8px !default;
+$cbox-small-font-size: 10px !default;
+$cbox-small-height: $text-sm !default;
+$cbox-small-indeterminate-fontsize: 8px !default;
+$cbox-small-indeterminate-lineheight: 11px !default;
+$cbox-small-lineheight: 11px !default;
+$cbox-small-width: $text-sm !default;
+$cbox-width: 16px !default;
+$cbox-focus-outline-offset: 0 !default;
+$cbox-focus-outline: rgba($primary, .25) !default;
+$cbox-border-color: rgba($content-text-color) !default;
+$cbox-bgcolor: $transparent !default;
+$cbox-checkmark-bgcolor: rgba($primary) !default;
+$cbox-checkmark-border-color: rgba($primary) !default;
+$cbox-checkmark-color: rgba($primary-text-color) !default;
+$cbox-checked-ripple-bgcolo: rgba($primary, .08) !default;
+$cbox-checkmark-disabled-bgcolor: rgba($content-text-color, .38) !default;
+$cbox-checkmark-disabled-border-color: rgba($content-text-color, .38) !default;
+$cbox-checkmark-disabled-color: rgba($primary-text-color) !default;
+$cbox-checkmark-hover-bgcolor: rgba($primary) !default;
+$cbox-checkmark-hover-border-color: rgba($primary) !default;
+$cbox-checkmark-hover-color: rgba($primary-text-color) !default;
+$cbox-color: rgba($content-text-color) !default;
+$cbox-disabled-bgcolor: $transparent !default;
+$cbox-disabled-border-color: rgba($content-text-color, .38) !default;
+$cbox-disabled-color: $content-text-color-disabled !default;
+$cbox-focussed-box-shadow: none !default;
+$cbox-hover-bgcolor: $transparent !default;
+$cbox-hover-border-color: rgba($content-text-color) !default;
+$cbox-hover-color: rgba($content-text-color) !default;
+$cbox-indeterminate-bgcolor: rgba($primary) !default;
+$cbox-indeterminate-border-color: rgba($primary) !default;
+$cbox-indeterminate-color: rgba($primary-text-color) !default;
+$cbox-indeterminate-content: '\e7d6' !default;
+$cbox-indeterminate-disabled-bgcolor: rgba($content-text-color, .38) !default;
+$cbox-indeterminate-disabled-border-color: rgba($content-text-color, .38) !default;
+$cbox-indeterminate-disabled-color: rgba($primary-text-color) !default;
+$cbox-indeterminate-hover-color: rgba($primary-text-color) !default;
+$cbox-key-focussed-bgcolor: rgba($content-text-color, .12) !default;
+$cbox-ripple-bgcolor: rgba($content-text-color, .08) !default;
+$cbox-focussed-bgcolor: $cbox-hover-bgcolor !default;
+$cbox-focussed-border-color: $primary-border-color-pressed !default;
+$cbox-focussed-checkmark-bgcolor: rgba($primary-bg-color) !default;
+$cbox-focussed-checkmark-border-color: rgba($primary-bg-color) !default;
+$cbox-focussed-checkmark-color: rgba($primary-text-color) !default;
+$cbox-border-style: solid !default;
diff --git a/components/buttons/styles/check-box/material3-dark.scss b/components/buttons/styles/check-box/material3-dark.scss
new file mode 100644
index 0000000..bc1eba0
--- /dev/null
+++ b/components/buttons/styles/check-box/material3-dark.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/check-box/material3.scss b/components/buttons/styles/check-box/material3.scss
new file mode 100644
index 0000000..3130aa3
--- /dev/null
+++ b/components/buttons/styles/check-box/material3.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/chips/_all.scss b/components/buttons/styles/chips/_all.scss
new file mode 100644
index 0000000..a0fe77d
--- /dev/null
+++ b/components/buttons/styles/chips/_all.scss
@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';
diff --git a/components/buttons/styles/chips/_layout.scss b/components/buttons/styles/chips/_layout.scss
new file mode 100644
index 0000000..30e1e87
--- /dev/null
+++ b/components/buttons/styles/chips/_layout.scss
@@ -0,0 +1,192 @@
+@mixin align-chip($border-radius, $font-size, $margin, $line-height) {
+ border-radius: $border-radius;
+ font-size: $font-size;
+ margin: $margin;
+ align-items: center;
+ justify-content: center;
+ line-height: $line-height;
+}
+
+@mixin icon-style($height, $width) {
+ background-size: cover;
+ display: flex;
+ overflow: hidden;
+ height: $height;
+ width: $width;
+}
+
+@include export-module('chip-layout') {
+ .sf-chip-list {
+ display: flex;
+ padding: $chip-list-padding;
+
+ &.sf-chip,
+ .sf-chip {
+ -webkit-tap-highlight-color: transparent;
+ border: $chip-border-size solid;
+ @include align-chip($chip-border-radius, $chip-font-size, $chip-margin, $chip-line-height);
+ box-shadow: $chip-box-shadow;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-flex;
+ font-weight: $chip-font-weight;
+ height: $chip-height;
+ outline: none;
+ overflow: hidden;
+ padding: $chip-padding;
+ position: relative;
+ transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1);
+ user-select: none;
+
+ .sf-chip-avatar {
+ @include icon-style($chip-avatar-size, $chip-avatar-size);
+ @include align-chip($chip-avatar-border-radius, $chip-avatar-content-font-size, $chip-avatar-margin, $chip-icon-line-height);
+ }
+
+ .sf-chip-avatar-wrap,
+ &.sf-chip-avatar-wrap {
+ border-radius: $chip-avatar-wrapper-border-radius;
+ }
+
+ .sf-chip-icon {
+ @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
+ @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin, $chip-icon-line-height);
+ }
+
+ .sf-chip-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .sf-chip-delete {
+ @include icon-style($chip-delete-icon-size, $chip-delete-icon-width);
+ @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin, $chip-icon-line-height);
+ }
+
+ .sf-image-url {
+ @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
+ @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin, $chip-icon-line-height);
+
+ .sf-leading-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .sf-trailing-icon-url {
+ @include icon-style($chip-delete-icon-size, $chip-delete-icon-size);
+ @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin, $chip-icon-line-height);
+
+ .sf-trailing-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .sf-chip-template {
+ display: inline-flex;
+ }
+ }
+
+ &:not(.sf-chip) {
+ flex-wrap: wrap;
+ }
+
+ &.sf-multi-selection .sf-chip {
+ & .sf-selectable-icon {
+ align-items: center;
+ justify-content: center;
+ line-height: 1;
+ display: flex;
+ height: $chip-leading-icon-size;
+ width: $chip-leading-icon-size;
+ overflow: hidden;
+ transition: width 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
+ }
+
+ &:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) {
+ & .sf-selectable-icon {
+ width: 0;
+ }
+ }
+
+ &.sf-chip-icon-wrap,
+ &.sf-chip-avatar-wrap {
+ & .sf-selectable-icon {
+ display: none;
+ }
+ }
+
+ &.sf-chip-avatar-wrap {
+ & .sf-selectable-icon {
+ height: $chip-avatar-size;
+ width: $chip-avatar-size;
+ margin: $chip-avatar-margin;
+ margin-top: $chip-multi-selection-icon-margin-top;
+ }
+ }
+
+ &.sf-active {
+ & .sf-chip-icon,
+ & .sf-chip-avatar {
+ display: none;
+ }
+
+ & .sf-selectable-icon {
+ margin: $chip-multi-selection-icon-margin;
+ }
+
+ &.sf-chip-icon-wrap,
+ &.sf-chip-avatar-wrap {
+ & .sf-selectable-icon {
+ display: flex;
+ }
+ }
+
+ &:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) {
+ & .sf-selectable-icon {
+ width: $chip-leading-icon-size;
+ }
+ }
+ }
+ }
+
+ &.sf-rtl {
+ &.sf-chip,
+ & .sf-chip {
+ .sf-chip-avatar {
+ margin: $chip-rtl-avatar-margin;
+ }
+
+ .sf-chip-icon {
+ margin: $chip-rtl-leading-icon-margin;
+ }
+
+ .sf-chip-delete {
+ margin: $chip-rtl-delete-icon-margin;
+ }
+
+ .sf-trailing-icon-url {
+ margin: $chip-rtl-delete-icon-margin;
+ }
+ }
+
+ &.sf-multi-selection .sf-chip {
+ & .sf-selectable-icon {
+ margin: $chip-rtl-leading-icon-margin;
+ margin-top: $chip-multi-selection-icon-margin-top;
+ }
+
+ &.sf-chip-avatar-wrap {
+ & .sf-selectable-icon {
+ margin: $chip-rtl-avatar-margin;
+ margin-top: $chip-multi-selection-icon-margin-top;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/components/buttons/styles/chips/_material3-dark-definition.scss b/components/buttons/styles/chips/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/buttons/styles/chips/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/buttons/styles/chips/_material3-definition.scss b/components/buttons/styles/chips/_material3-definition.scss
new file mode 100644
index 0000000..df53974
--- /dev/null
+++ b/components/buttons/styles/chips/_material3-definition.scss
@@ -0,0 +1,564 @@
+$chip-list-padding: 0 !default;
+$chip-height: 24px !default;
+$chip-border-radius: 12px !default;
+$chip-box-shadow: none !default;
+$chip-padding: 0 8px !default;
+$chip-margin: 4px !default;
+$chip-border-size: 1px !default;
+
+$chip-font-size: 11px !default;
+$chip-line-height: 14px !default;
+$chip-font-weight: 500 !default;
+
+$chip-avatar-wrapper-border-radius: 12px !default;
+$chip-avatar-border-radius: 12px !default;
+$chip-avatar-size: 20px !default;
+$chip-avatar-margin: 0 4px 0 -6px !default;
+$chip-avatar-content-font-size: $text-xs !default;
+$chip-rtl-avatar-wrapper-border-radius: 12px !default;
+$chip-rtl-avatar-margin: 0 -6px 0 4px !default;
+
+$chip-leading-icon-border-radius: 50% !default;
+$chip-delete-icon-border-radius: 50% !default;
+$chip-leading-icon-font-size: 14px !default;
+$chip-leading-icon-size: 20px !default;
+$chip-leading-icon-margin: 0 4px 0 -6px !default;
+$chip-rtl-leading-icon-margin: 0 -6px 0 4px !default;
+$chip-multi-selection-icon-margin: 0 4px 0 -6px !default;
+$chip-multi-selection-icon-margin-top: 0 !default;
+$chip-delete-icon-font-size: 14px !default;
+$chip-delete-icon-size: 18px !default;
+$chip-delete-icon-margin: 0 -2px 0 8px !default;
+$chip-rtl-delete-icon-margin: 0 8px 0 -2px !default;
+$chip-delete-icon-width: $chip-delete-icon-font-size !default;
+$chip-icon-line-height: 1 !default;
+
+$chip-default-bg-color: $secondary-border-color !default;
+$chip-hover-bg-color: $content-bg-color-hover !default;
+$chip-focus-bg-color: $content-bg-color-pressed !default;
+$chip-active-bg-color: $content-bg-color-pressed !default;
+$chip-focus-active-bg-color: $secondary-border-color-pressed !default;
+$chip-pressed-bg-color: $content-bg-color-pressed !default;
+$chip-disabled-bg-color: $secondary-border-color-disabled !default;
+$chip-choice-active-bg-color: rgba($primary) !default;
+$chip-choice-focus-active-bg-color: rgba($primary) !default;
+$chip-pressed-active-bg-color: $primary-bg-color-pressed!default;
+
+$chip-avatar-bg-color: rgba($primary-light) !default;
+$chip-avatar-hover-bg-color: $secondary-bg-color !default;
+$chip-avatar-focus-bg-color: $secondary-bg-color !default;
+$chip-avatar-active-bg-color: $secondary-bg-color !default;
+$chip-avatar-focus-active-bg-color: $content-bg-color-alt4 !default;
+$chip-avatar-pressed-bg-color: $secondary-bg-color !default;
+$chip-avatar-pressed-active-bg-color: $secondary-bg-color !default;
+$chip-avatar-disabled-bg-color: $chip-disabled-bg-color !default;
+$chip-avatar-choice-active-bg-color: rgba($primary) !default;
+$chip-avatar-choice-focus-active-bg-color: $chip-choice-focus-active-bg-color !default;
+
+$chip-default-font-color: rgba($content-text-color-alt1) !default;
+$chip-hover-font-color: rgba($content-text-color-alt1) !default;
+$chip-focus-font-color: rgba($secondary-text-color) !default;
+$chip-active-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-focus-active-font-color: rgba($secondary-text-color-hover) !default;
+$chip-pressed-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-selection-pressed-font-color: rgba($primary-text) !default;
+$chip-disabled-font-color: $secondary-text-color-disabled !default;
+$chip-choice-active-font-color: rgba($primary-text) !default;
+
+$chip-close-icon-font-color: rgba($secondary-text-color) !default;
+$chip-close-icon-hover-font-color: rgba($secondary-text-color-hover) !default;
+$chip-close-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-icon-font-color: rgba($secondary-text-color) !default;
+$chip-icon-hover-font-color: rgba($secondary-text-color-hover) !default;
+$chip-icon-focus-font-color: rgba($secondary-text-color-hover) !default;
+$chip-icon-active-font-color: rgba($icon-color) !default;
+$chip-icon-focus-active-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-icon-selection-pressed-font-color: rgba($primary-text-color) !default;
+$chip-choice-icon-focus-active-font-color: rgba($primary-text-color) !default;
+
+$chip-avatar-font-color: rgba($secondary-text-color) !default;
+$chip-avatar-hover-font-color: rgba($secondary-text-color) !default;
+$chip-avatar-focus-font-color: rgba($secondary-text-color) !default;
+$chip-avatar-active-font-color: rgba($secondary-text-color) !default;
+$chip-avatar-focus-active-font-color: $chip-icon-focus-active-font-color !default;
+$chip-avatar-pressed-font-color: rgba($secondary-text-color) !default;
+$chip-avatar-pressed-active-font-color: rgba($secondary-text-color) !default;
+$chip-avatar-disabled-font-color: $chip-disabled-font-color !default;
+$chip-avatar-choice-active-font-color: rgba($primary-text-color) !default;
+$chip-avatar-choice-focus-active-font-color: $chip-choice-icon-focus-active-font-color !default;
+
+$chip-default-border-color: rgba($border) !default;
+$chip-hover-border-color: rgba($border) !default;
+$chip-focus-border-color: rgba($border) !default;
+$chip-active-border-color: rgba($border) !default;
+$chip-focus-active-border-color: $secondary-border-color-pressed !default;
+$chip-pressed-border-color: rgba($border) !default;
+$chip-disabled-border-color: $secondary-border-color-disabled !default;
+$chip-choice-active-border-color: $chip-choice-active-bg-color !default;
+$chip-choice-focus-active-border-color: rgba($primary) !default;
+$chip-choice-focus-active-font-color: rgba($primary-text-color) !default;
+$chip-focussed-box-shadow: none !default;
+$chip-focussed-active-box-shadow: none !default;
+$chip-pressed-box-shadow: none !default;
+
+$chip-outline-bg-color: transparent !default;
+$chip-outline-hover-bg-color: $content-bg-color-hover !default;
+$chip-outline-focus-bg-color: $secondary-bg-color !default;
+$chip-outline-active-bg-color: $secondary-border-color-pressed !default;
+$chip-outline-focus-active-bg-color: $chip-outline-active-bg-color !default;
+$chip-outline-pressed-bg-color: $content-bg-color-pressed !default;
+$chip-outline-pressed-active-bg-color: $content-bg-color-pressed !default;
+$chip-outline-disabled-bg-color: transparent !default;
+$chip-outline-choice-active-bg-color: rgba($primary) !default;
+$chip-outline-choice-focus-active-bg-color: rgba($primary) !default;
+
+$chip-outline-avatar-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-hover-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-focus-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-active-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-focus-active-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-pressed-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-pressed-active-bg-color: $secondary-bg-color !default;
+$chip-outline-avatar-disabled-bg-color: $chip-outline-disabled-bg-color !default;
+$chip-outline-avatar-choice-active-bg-color: rgba($primary) !default;
+$chip-outline-avatar-choice-focus-active-bg-color: rgba($primary) !default;
+
+$chip-outline-font-color: rgba($content-text-color-alt1) !default;
+$chip-outline-hover-font-color: rgba($secondary-text-color-hover) !default;
+$chip-outline-focus-font-color: rgba($secondary-text-color) !default;
+$chip-outline-active-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-outline-focus-active-font-color: $chip-outline-active-font-color !default;
+$chip-outline-pressed-font-color: rgba($content-text-color-alt1) !default;
+$chip-outline-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-choice-active-font-color: rgba($primary-text-color) !default;
+$chip-outline-choice-focus-active-font-color: $chip-outline-choice-active-font-color !default;
+
+$chip-outline-close-icon-font-color: $secondary-bg-color !default;
+$chip-outline-close-icon-hover-font-color: rgba($secondary-text-color-hover) !default;
+$chip-outline-close-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-outline-icon-font-color: $icon-color !default;
+$chip-outline-icon-hover-font-color: rgba($secondary-text-color-hover) !default;
+$chip-outline-icon-focus-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-outline-icon-active-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-outline-icon-focus-active-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-outline-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default;
+$chip-outline-choice-icon-focus-active-font-color: rgba($primary-text-color) !default;
+
+$chip-outline-avatar-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-hover-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-focus-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-active-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-focus-active-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-pressed-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-pressed-active-font-color: rgba($secondary-text-color) !default;
+$chip-outline-avatar-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-avatar-choice-active-font-color: $chip-outline-choice-active-font-color !default;
+$chip-outline-avatar-choice-focus-active-font-color: $chip-outline-choice-icon-focus-active-font-color !default;
+
+$chip-outline-border-color: rgba($border) !default;
+$chip-outline-hover-border-color: rgba($border) !default;
+$chip-outline-focus-border-color: rgba($border) !default;
+$chip-outline-active-border-color: $secondary-border-color-pressed !default;
+$chip-outline-focus-active-border-color: $secondary-border-color-pressed !default;
+$chip-outline-pressed-border-color: rgba($border) !default;
+$chip-outline-disabled-border-color: $content-bg-color-alt3 !default;
+$chip-outline-choice-active-border-color: rgba($primary) !default;
+$chip-outline-choice-focus-active-border-color: rgba($primary) !default;
+$chip-outline-active-border-width: 1px !default;
+$chip-outline-focus-active-box-shadow: $chip-focussed-active-box-shadow !default;
+
+$chip-primary-bg-color: rgba($primary) !default;
+$chip-primary-hover-bg-color: $primary-bg-color-hover !default;
+$chip-primary-focus-bg-color: $primary-bg-color-hover !default;
+$chip-primary-active-bg-color: $primary-bg-color-pressed !default;
+$chip-primary-focus-active-bg-color: $chip-primary-active-bg-color !default;
+$chip-primary-pressed-bg-color: $primary-bg-color-pressed !default;
+$chip-primary-disabled-bg-color: $primary-bg-color-disabled !default;
+$chip-primary-avatar-bg-color: $chip-primary-bg-color !default;
+$chip-primary-avatar-hover-bg-color: $chip-primary-hover-bg-color !default;
+$chip-primary-avatar-focus-bg-color: $chip-primary-focus-bg-color !default;
+$chip-primary-avatar-active-bg-color: $chip-primary-active-bg-color !default;
+$chip-primary-avatar-focus-active-bg-color: $chip-primary-focus-active-bg-color !default;
+$chip-primary-avatar-pressed-bg-color: $chip-primary-pressed-bg-color !default;
+$chip-primary-avatar-disabled-bg-color: $chip-primary-disabled-bg-color !default;
+$chip-primary-font-color: rgba($primary-text-color) !default;
+$chip-primary-hover-font-color: rgba($primary-text-color) !default;
+$chip-primary-focus-font-color: rgba($primary-text-color) !default;
+$chip-primary-active-font-color: rgba($primary-text-color) !default;
+$chip-primary-focus-active-font-color: rgba($primary-text-color) !default;
+$chip-primary-pressed-font-color: rgba($primary-text-color) !default;
+$chip-primary-disabled-font-color: $primary-text-disabled !default;
+$chip-primary-close-icon-font-color: rgba($primary-text-color) !default;
+$chip-primary-close-icon-hover-font-color: rgba($primary-text-color) !default;
+$chip-primary-close-icon-pressed-font-color: rgba($primary-text-color) !default;
+$chip-primary-avatar-font-color: $chip-primary-font-color !default;
+$chip-primary-avatar-hover-font-color: $chip-primary-hover-font-color !default;
+$chip-primary-avatar-focus-font-color: $chip-primary-focus-font-color !default;
+$chip-primary-avatar-active-font-color: $chip-primary-active-font-color !default;
+$chip-primary-avatar-focus-active-font-color: $chip-primary-focus-active-font-color !default;
+$chip-primary-avatar-pressed-font-color: $chip-primary-pressed-font-color !default;
+$chip-primary-avatar-disabled-font-color: $chip-primary-disabled-font-color !default;
+$chip-primary-border-color: rgba($primary) !default;
+$chip-primary-hover-border-color: $primary-border-color-hover !default;
+$chip-primary-focus-border-color: $primary-border-color-hover !default;
+$chip-primary-active-border-color: $primary-border-color-pressed !default;
+$chip-primary-focus-active-border-color: $primary-border-color-pressed !default;
+$chip-primary-pressed-border-color: $primary-border-color-pressed !default;
+$chip-primary-disabled-border-color: $primary-border-color-disabled !default;
+$chip-primary-focus-active-box-shadow: none !default;
+
+$chip-success-bg-color: rgba($success-bg-color) !default;
+$chip-success-hover-bg-color: $success-bg-color-hover !default;
+$chip-success-focus-bg-color: $success-bg-color-hover !default;
+$chip-success-active-bg-color: $success-bg-color-pressed !default;
+$chip-success-focus-active-bg-color: $success-bg-color-pressed !default;
+$chip-success-pressed-bg-color: $success-bg-color-pressed !default;
+$chip-success-disabled-bg-color: $success-bg-color-disabled !default;
+$chip-success-avatar-bg-color: $chip-success-bg-color !default;
+$chip-success-avatar-hover-bg-color: $chip-success-hover-bg-color !default;
+$chip-success-avatar-focus-bg-color: $chip-success-focus-bg-color !default;
+$chip-success-avatar-active-bg-color: $chip-success-active-bg-color !default;
+$chip-success-avatar-focus-active-bg-color: $chip-success-focus-active-bg-color !default;
+$chip-success-avatar-pressed-bg-color: $chip-success-pressed-bg-color !default;
+$chip-success-avatar-disabled-bg-color: $chip-success-disabled-bg-color !default;
+$chip-success-font-color: rgba($success-text) !default;
+$chip-success-hover-font-color: rgba($success-text-hover) !default;
+$chip-success-focus-font-color: rgba($success-text-hover) !default;
+$chip-success-active-font-color: rgba($success-text-pressed) !default;
+$chip-success-focus-active-font-color: rgba($success-text-pressed) !default;
+$chip-success-pressed-font-color: rgba($success-text-pressed) !default;
+$chip-success-disabled-font-color: $success-text-disabled !default;
+$chip-success-close-icon-font-color: rgba($success-text) !default;
+$chip-success-close-icon-hover-font-color: $chip-success-hover-font-color !default;
+$chip-success-close-icon-pressed-font-color: $chip-success-pressed-font-color !default;
+$chip-success-avatar-font-color: $chip-success-font-color !default;
+$chip-success-avatar-hover-font-color: $chip-success-hover-font-color !default;
+$chip-success-avatar-focus-font-color: $chip-success-focus-font-color !default;
+$chip-success-avatar-active-font-color: $chip-success-active-font-color !default;
+$chip-success-avatar-focus-active-font-color: $chip-success-focus-active-font-color !default;
+$chip-success-avatar-pressed-font-color: $chip-success-pressed-font-color !default;
+$chip-success-avatar-disabled-font-color: $chip-success-disabled-font-color !default;
+$chip-success-border-color: rgba($success-bg-color) !default;
+$chip-success-hover-border-color: $success-border-color-hover !default;
+$chip-success-focus-border-color: $success-border-color-pressed !default;
+$chip-success-active-border-color: $success-border-color-pressed !default;
+$chip-success-focus-active-border-color: $success-border-color-pressed !default;
+$chip-success-pressed-border-color: $success-border-color-pressed !default;
+$chip-success-disabled-border-color: $success-border-color-disabled !default;
+$chip-success-focus-active-box-shadow: none !default;
+
+$chip-info-bg-color: rgba($info-bg-color) !default;
+$chip-info-hover-bg-color: $info-bg-color-hover !default;
+$chip-info-focus-bg-color: $info-bg-color-hover !default;
+$chip-info-active-bg-color: $info-bg-color-pressed !default;
+$chip-info-focus-active-bg-color: $info-bg-color-pressed !default;
+$chip-info-pressed-bg-color: $info-bg-color-pressed !default;
+$chip-info-disabled-bg-color: $info-bg-color-disabled !default;
+$chip-info-avatar-bg-color: $chip-info-bg-color !default;
+$chip-info-avatar-hover-bg-color: $chip-info-hover-bg-color !default;
+$chip-info-avatar-focus-bg-color: $chip-info-focus-bg-color !default;
+$chip-info-avatar-active-bg-color: $chip-info-active-bg-color !default;
+$chip-info-avatar-focus-active-bg-color: $chip-info-focus-active-bg-color !default;
+$chip-info-avatar-pressed-bg-color: $chip-info-pressed-bg-color !default;
+$chip-info-avatar-disabled-bg-color: $chip-info-disabled-bg-color !default;
+$chip-info-font-color: rgba($info-text) !default;
+$chip-info-hover-font-color: rgba($info-text) !default;
+$chip-info-focus-font-color: rgba($info-text) !default;
+$chip-info-active-font-color: rgba($info-text-pressed) !default;
+$chip-info-focus-active-font-color: rgba($info-text-pressed) !default;
+$chip-info-pressed-font-color: rgba($info-text-pressed) !default;
+$chip-info-disabled-font-color: $info-text-disabled !default;
+$chip-info-close-icon-font-color: rgba($info-text) !default;
+$chip-info-close-icon-hover-font-color: $chip-info-hover-font-color !default;
+$chip-info-close-icon-pressed-font-color: $chip-info-pressed-font-color !default;
+$chip-info-avatar-font-color: $chip-info-font-color !default;
+$chip-info-avatar-hover-font-color: $chip-info-hover-font-color !default;
+$chip-info-avatar-focus-font-color: $chip-info-focus-font-color !default;
+$chip-info-avatar-active-font-color: $chip-info-active-font-color !default;
+$chip-info-avatar-focus-active-font-color: $chip-info-focus-active-font-color !default;
+$chip-info-avatar-pressed-font-color: $chip-info-pressed-font-color !default;
+$chip-info-avatar-disabled-font-color: $chip-info-disabled-font-color !default;
+$chip-info-border-color: rgba($info-bg-color) !default;
+$chip-info-hover-border-color: $info-border-color-hover !default;
+$chip-info-focus-border-color: $info-border-color-hover !default;
+$chip-info-active-border-color: $info-border-color-pressed !default;
+$chip-info-focus-active-border-color: $info-border-color-pressed !default;
+$chip-info-pressed-border-color: $info-border-color-pressed !default;
+$chip-info-disabled-border-color: $info-border-color-disabled !default;
+$chip-info-focus-active-box-shadow: none !default;
+
+$chip-warning-bg-color: rgba($warning-bg-color) !default;
+$chip-warning-hover-bg-color: $warning-bg-color-hover !default;
+$chip-warning-focus-bg-color: $warning-bg-color-hover !default;
+$chip-warning-active-bg-color: $warning-bg-color-pressed !default;
+$chip-warning-focus-active-bg-color: $warning-bg-color-pressed !default;
+$chip-warning-pressed-bg-color: $warning-bg-color-pressed !default;
+$chip-warning-disabled-bg-color: $warning-bg-color-disabled !default;
+$chip-warning-avatar-bg-color: $chip-warning-bg-color !default;
+$chip-warning-avatar-hover-bg-color: $chip-warning-hover-bg-color !default;
+$chip-warning-avatar-focus-bg-color: $chip-warning-focus-bg-color !default;
+$chip-warning-avatar-active-bg-color: $chip-warning-active-bg-color !default;
+$chip-warning-avatar-focus-active-bg-color: $chip-warning-focus-active-bg-color !default;
+$chip-warning-avatar-pressed-bg-color: $chip-warning-pressed-bg-color !default;
+$chip-warning-avatar-disabled-bg-color: $chip-warning-disabled-bg-color !default;
+$chip-warning-font-color: rgba($warning-text) !default;
+$chip-warning-hover-font-color: rgba($warning-text) !default;
+$chip-warning-focus-font-color: rgba($warning-text) !default;
+$chip-warning-active-font-color: rgba($warning-text-pressed) !default;
+$chip-warning-focus-active-font-color: rgba($warning-text-pressed) !default;
+$chip-warning-pressed-font-color: rgba($warning-text-pressed) !default;
+$chip-warning-disabled-font-color: $warning-text-disabled !default;
+$chip-warning-close-icon-font-color: rgba($warning-text) !default;
+$chip-warning-close-icon-hover-font-color: $chip-warning-hover-font-color !default;
+$chip-warning-close-icon-pressed-font-color: $chip-warning-pressed-font-color !default;
+$chip-warning-avatar-font-color: $chip-warning-font-color !default;
+$chip-warning-avatar-hover-font-color: $chip-warning-hover-font-color !default;
+$chip-warning-avatar-focus-font-color: $chip-warning-focus-font-color !default;
+$chip-warning-avatar-active-font-color: $chip-warning-active-font-color !default;
+$chip-warning-avatar-focus-active-font-color: $chip-warning-focus-active-font-color !default;
+$chip-warning-avatar-pressed-font-color: $chip-warning-pressed-font-color !default;
+$chip-warning-avatar-disabled-font-color: $chip-warning-disabled-font-color !default;
+$chip-warning-border-color: rgba($warning-bg-color) !default;
+$chip-warning-hover-border-color: $warning-border-color-hover !default;
+$chip-warning-focus-border-color: $warning-border-color-hover !default;
+$chip-warning-active-border-color: $warning-border-color-pressed !default;
+$chip-warning-focus-active-border-color: $warning-border-color-pressed !default;
+$chip-warning-pressed-border-color: $warning-border-color-pressed !default;
+$chip-warning-disabled-border-color: $warning-border-color-disabled !default;
+$chip-warning-focus-active-box-shadow: none !default;
+
+$chip-danger-bg-color: rgba($danger-bg-color) !default;
+$chip-danger-hover-bg-color: $danger-bg-color-hover !default;
+$chip-danger-focus-bg-color: $danger-bg-color-hover !default;
+$chip-danger-active-bg-color: $danger-bg-color-pressed !default;
+$chip-danger-focus-active-bg-color: $danger-bg-color-pressed !default;
+$chip-danger-pressed-bg-color: $danger-bg-color-pressed !default;
+$chip-danger-disabled-bg-color: $danger-border-color-disabled !default;
+$chip-danger-avatar-bg-color: rgba($danger-bg-color) !default;
+$chip-danger-avatar-hover-bg-color: $chip-danger-hover-bg-color !default;
+$chip-danger-avatar-focus-bg-color: $chip-danger-focus-bg-color !default;
+$chip-danger-avatar-active-bg-color: $chip-danger-active-bg-color !default;
+$chip-danger-avatar-focus-active-bg-color: $chip-danger-focus-active-bg-color !default;
+$chip-danger-avatar-pressed-bg-color: $chip-danger-pressed-bg-color !default;
+$chip-danger-avatar-disabled-bg-color: $chip-danger-disabled-bg-color !default;
+$chip-danger-font-color: rgba($success-text) !default;
+$chip-danger-hover-font-color: rgba($success-text) !default;
+$chip-danger-focus-font-color: rgba($success-text) !default;
+$chip-danger-active-font-color: rgba($danger-text-pressed) !default;
+$chip-danger-focus-active-font-color: rgba($danger-text-pressed) !default;
+$chip-danger-pressed-font-color: rgba($danger-text-pressed) !default;
+$chip-danger-disabled-font-color: $warning-text-disabled !default;
+$chip-danger-close-icon-font-color: rgba($success-text) !default;
+$chip-danger-close-icon-hover-font-color: $chip-danger-hover-font-color !default;
+$chip-danger-close-icon-pressed-font-color: $chip-danger-pressed-font-color !default;
+$chip-danger-avatar-font-color: $chip-danger-font-color !default;
+$chip-danger-avatar-hover-font-color: $chip-danger-hover-font-color !default;
+$chip-danger-avatar-focus-font-color: $chip-danger-focus-font-color !default;
+$chip-danger-avatar-active-font-color: $chip-danger-active-font-color !default;
+$chip-danger-avatar-focus-active-font-color: $chip-danger-focus-active-font-color !default;
+$chip-danger-avatar-pressed-font-color: $chip-danger-pressed-font-color !default;
+$chip-danger-avatar-disabled-font-color: $chip-danger-disabled-font-color !default;
+$chip-danger-border-color: rgba($danger-bg-color) !default;
+$chip-danger-hover-border-color: $danger-border-color-hover !default;
+$chip-danger-focus-border-color: $danger-border-color-hover !default;
+$chip-danger-active-border-color: $danger-border-color-pressed !default;
+$chip-danger-focus-active-border-color: $danger-border-color-pressed !default;
+$chip-danger-pressed-border-color: $danger-border-color-pressed !default;
+$chip-danger-disabled-border-color: $danger-border-color-disabled !default;
+$chip-danger-focus-active-box-shadow: none !default;
+
+$chip-outline-primary-bg-color: transparent !default;
+$chip-outline-primary-hover-bg-color: rgba($primary, $opacity8) !default;
+$chip-outline-primary-focus-bg-color: rgba($primary, $opacity12) !default;
+$chip-outline-primary-active-bg-color: rgba($primary, $opacity16) !default;
+$chip-outline-primary-focus-active-bg-color: rgba($primary, $opacity16) !default;
+$chip-outline-primary-pressed-bg-color: rgba($primary, $opacity16) !default;
+$chip-outline-primary-disabled-bg-color: transparent !default;
+$chip-outline-primary-avatar-bg-color: rgba($primary) !default;
+$chip-outline-primary-avatar-hover-bg-color: $chip-outline-primary-avatar-bg-color !default;
+$chip-outline-primary-avatar-focus-bg-color: $chip-outline-primary-avatar-bg-color !default;
+$chip-outline-primary-avatar-active-bg-color: $chip-outline-primary-avatar-bg-color !default;
+$chip-outline-primary-avatar-focus-active-bg-color: $chip-outline-primary-avatar-bg-color !default;
+$chip-outline-primary-avatar-pressed-bg-color: $chip-outline-primary-avatar-bg-color !default;
+$chip-outline-primary-avatar-disabled-bg-color: $chip-outline-primary-disabled-bg-color !default;
+$chip-outline-primary-font-color: rgba($primary) !default;
+$chip-outline-primary-hover-font-color: rgba($primary) !default;
+$chip-outline-primary-focus-font-color: rgba($primary) !default;
+$chip-outline-primary-active-font-color: rgba($primary) !default;
+$chip-outline-primary-focus-active-font-color: rgba($primary) !default;
+$chip-outline-primary-pressed-font-color: rgba($primary) !default;
+$chip-outline-primary-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-primary-close-icon-font-color: rgba($primary) !default;
+$chip-outline-primary-close-icon-hover-font-color: $chip-outline-primary-hover-font-color !default;
+$chip-outline-primary-close-icon-pressed-font-color: $chip-outline-primary-pressed-font-color !default;
+$chip-outline-primary-avatar-font-color: rgba($primary-text-color) !default;
+$chip-outline-primary-avatar-hover-font-color: $chip-outline-primary-avatar-font-color !default;
+$chip-outline-primary-avatar-focus-font-color: $chip-outline-primary-avatar-font-color !default;
+$chip-outline-primary-avatar-active-font-color: $chip-outline-primary-avatar-font-color !default;
+$chip-outline-primary-avatar-focus-active-font-color: $chip-outline-primary-avatar-font-color !default;
+$chip-outline-primary-avatar-pressed-font-color: $chip-outline-primary-avatar-font-color !default;
+$chip-outline-primary-avatar-disabled-font-color: $chip-outline-primary-disabled-font-color !default;
+$chip-outline-primary-border-color: rgba($primary) !default;
+$chip-outline-primary-hover-border-color: rgba($primary) !default;
+$chip-outline-primary-focus-border-color: rgba($primary) !default;
+$chip-outline-primary-focus-active-border-color: rgba($primary) !default;
+$chip-outline-primary-active-border-color: rgba($primary) !default;
+$chip-outline-primary-pressed-border-color: rgba($primary) !default;
+$chip-outline-primary-disabled-border-color: rgba($content-text-color) !default;
+
+$chip-outline-success-bg-color: transparent !default;
+$chip-outline-success-hover-bg-color: rgba($success-bg-color, $opacity8) !default;
+$chip-outline-success-focus-bg-color: rgba($success-bg-color, $opacity12) !default;
+$chip-outline-success-active-bg-color: rgba($success-bg-color, $opacity16) !default;
+$chip-outline-success-focus-active-bg-color: rgba($success-bg-color, $opacity16) !default;
+$chip-outline-success-pressed-bg-color: rgba($success-bg-color, $opacity16) !default;
+$chip-outline-success-disabled-bg-color: transparent !default;
+$chip-outline-success-avatar-bg-color: rgba($success) !default;
+$chip-outline-success-avatar-hover-bg-color: $chip-outline-success-avatar-bg-color !default;
+$chip-outline-success-avatar-focus-bg-color: $chip-outline-success-avatar-bg-color !default;
+$chip-outline-success-avatar-active-bg-color: $chip-outline-success-avatar-bg-color !default;
+$chip-outline-success-avatar-focus-active-bg-color: $chip-outline-success-avatar-bg-color !default;
+$chip-outline-success-avatar-pressed-bg-color: $chip-outline-success-avatar-bg-color !default;
+$chip-outline-success-avatar-disabled-bg-color: $chip-outline-success-disabled-bg-color !default;
+$chip-outline-success-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-hover-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-focus-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-active-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-focus-active-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-pressed-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-success-close-icon-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-close-icon-hover-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-close-icon-pressed-font-color: rgba($success-bg-color) !default;
+$chip-outline-success-avatar-font-color: rgba($success-text) !default;
+$chip-outline-success-avatar-hover-font-color: $chip-outline-success-avatar-font-color !default;
+$chip-outline-success-avatar-focus-font-color: $chip-outline-success-avatar-font-color !default;
+$chip-outline-success-avatar-active-font-color: $chip-outline-success-avatar-font-color !default;
+$chip-outline-success-avatar-focus-active-font-color: $chip-outline-success-avatar-font-color !default;
+$chip-outline-success-avatar-pressed-font-color: $chip-outline-success-avatar-font-color !default;
+$chip-outline-success-avatar-disabled-font-color: $chip-outline-success-disabled-font-color !default;
+$chip-outline-success-border-color: rgba($success) !default;
+$chip-outline-success-hover-border-color: rgba($success-bg-color) !default;
+$chip-outline-success-focus-border-color: rgba($success-bg-color) !default;
+$chip-outline-success-active-border-color: rgba($success-bg-color) !default;
+$chip-outline-success-focus-active-border-color: rgba($success-bg-color) !default;
+$chip-outline-success-pressed-border-color: rgba($success-bg-color) !default;
+$chip-outline-success-disabled-border-color: $content-bg-color-alt3 !default;
+
+$chip-outline-info-bg-color: transparent !default;
+$chip-outline-info-hover-bg-color: rgba($info-bg-color, $opacity8) !default;
+$chip-outline-info-focus-bg-color: rgba($info-bg-color, $opacity12) !default;
+$chip-outline-info-active-bg-color: rgba($info-bg-color, $opacity16) !default;
+$chip-outline-info-focus-active-bg-color: rgba($info-bg-color, $opacity16) !default;
+$chip-outline-info-pressed-bg-color: rgba($info-bg-color, $opacity12) !default;
+$chip-outline-info-disabled-bg-color: transparent !default;
+$chip-outline-info-avatar-bg-color: rgba($info) !default;
+$chip-outline-info-avatar-hover-bg-color: $chip-outline-info-avatar-bg-color !default;
+$chip-outline-info-avatar-focus-bg-color: $chip-outline-info-avatar-bg-color !default;
+$chip-outline-info-avatar-active-bg-color: $chip-outline-info-avatar-bg-color !default;
+$chip-outline-info-avatar-focus-active-bg-color: $chip-outline-info-avatar-bg-color !default;
+$chip-outline-info-avatar-pressed-bg-color: $chip-outline-info-avatar-bg-color !default;
+$chip-outline-info-avatar-disabled-bg-color: $chip-outline-info-disabled-bg-color !default;
+$chip-outline-info-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-hover-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-focus-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-active-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-focus-active-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-pressed-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-disabled-font-color: rgba($content-text-color) !default;
+$chip-outline-info-close-icon-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-close-icon-hover-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-close-icon-pressed-font-color: rgba($info-bg-color) !default;
+$chip-outline-info-avatar-font-color: rgba($info-text) !default;
+$chip-outline-info-avatar-hover-font-color: $chip-outline-info-avatar-font-color !default;
+$chip-outline-info-avatar-focus-font-color: $chip-outline-info-avatar-font-color !default;
+$chip-outline-info-avatar-active-font-color: $chip-outline-info-avatar-font-color !default;
+$chip-outline-info-avatar-focus-active-font-color: $chip-outline-info-avatar-font-color !default;
+$chip-outline-info-avatar-pressed-font-color: $chip-outline-info-avatar-font-color !default;
+$chip-outline-info-avatar-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-info-border-color: rgba($info-bg-color) !default;
+$chip-outline-info-hover-border-color: rgba($info-bg-color) !default;
+$chip-outline-info-focus-border-color: rgba($info-bg-color) !default;
+$chip-outline-info-active-border-color: rgba($info-bg-color) !default;
+$chip-outline-info-focus-active-border-color: rgba($info-bg-color) !default;
+$chip-outline-info-pressed-border-color: rgba($info-bg-color) !default;
+$chip-outline-info-disabled-border-color: rgba($content-text-color) !default;
+
+$chip-outline-warning-bg-color: transparent !default;
+$chip-outline-warning-hover-bg-color: rgba($warning-bg-color, $opacity8) !default;
+$chip-outline-warning-focus-bg-color: rgba($warning-bg-color, $opacity12) !default;
+$chip-outline-warning-active-bg-color: rgba($warning-bg-color, $opacity16) !default;
+$chip-outline-warning-focus-active-bg-color: rgba($warning-bg-color, $opacity16) !default;
+$chip-outline-warning-pressed-bg-color: rgba($warning-bg-color, $opacity16) !default;
+$chip-outline-warning-disabled-bg-color: transparent !default;
+$chip-outline-warning-avatar-bg-color: rgba($warning) !default;
+$chip-outline-warning-avatar-hover-bg-color: $chip-outline-warning-avatar-bg-color !default;
+$chip-outline-warning-avatar-focus-bg-color: $chip-outline-warning-avatar-bg-color !default;
+$chip-outline-warning-avatar-active-bg-color: $chip-outline-warning-avatar-bg-color !default;
+$chip-outline-warning-avatar-focus-active-bg-color: $chip-outline-warning-avatar-bg-color !default;
+$chip-outline-warning-avatar-pressed-bg-color: $chip-outline-warning-avatar-bg-color !default;
+$chip-outline-warning-avatar-disabled-bg-color: $chip-outline-warning-disabled-bg-color !default;
+$chip-outline-warning-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-hover-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-focus-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-active-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-focus-active-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-pressed-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-warning-close-icon-font-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-close-icon-hover-font-color: $chip-outline-warning-hover-font-color !default;
+$chip-outline-warning-close-icon-pressed-font-color: $chip-outline-warning-pressed-font-color !default;
+$chip-outline-warning-avatar-font-color: rgba($warning-text) !default;
+$chip-outline-warning-avatar-hover-font-color: $chip-outline-warning-avatar-font-color !default;
+$chip-outline-warning-avatar-focus-font-color: $chip-outline-warning-avatar-font-color !default;
+$chip-outline-warning-avatar-active-font-color: $chip-outline-warning-avatar-font-color !default;
+$chip-outline-warning-avatar-focus-active-font-color: $chip-outline-warning-avatar-font-color !default;
+$chip-outline-warning-avatar-pressed-font-color: $chip-outline-warning-avatar-font-color !default;
+$chip-outline-warning-avatar-disabled-font-color: $chip-outline-warning-disabled-font-color !default;
+$chip-outline-warning-border-color: rgba($warning) !default;
+$chip-outline-warning-hover-border-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-focus-border-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-active-border-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-focus-active-border-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-pressed-border-color: rgba($warning-bg-color) !default;
+$chip-outline-warning-disabled-border-color: $content-bg-color-alt3 !default;
+
+$chip-outline-danger-bg-color: transparent !default;
+$chip-outline-danger-hover-bg-color: rgba($danger-bg-color, $opacity8) !default;
+$chip-outline-danger-focus-bg-color: rgba($danger-bg-color, $opacity12) !default;
+$chip-outline-danger-active-bg-color: rgba($danger-bg-color, $opacity16) !default;
+$chip-outline-danger-focus-active-bg-color: rgba($danger-bg-color, $opacity16) !default;
+$chip-outline-danger-pressed-bg-color: rgba($danger-bg-color, $opacity16) !default;
+$chip-outline-danger-disabled-bg-color: transparent !default;
+$chip-outline-danger-avatar-bg-color: rgba($danger) !default;
+$chip-outline-danger-avatar-hover-bg-color: $chip-outline-danger-avatar-bg-color !default;
+$chip-outline-danger-avatar-focus-bg-color: $chip-outline-danger-avatar-bg-color !default;
+$chip-outline-danger-avatar-active-bg-color: $chip-outline-danger-avatar-bg-color !default;
+$chip-outline-danger-avatar-focus-active-bg-color: $chip-outline-danger-avatar-bg-color !default;
+$chip-outline-danger-avatar-pressed-bg-color: $chip-outline-danger-avatar-bg-color !default;
+$chip-outline-danger-avatar-disabled-bg-color: $chip-outline-danger-disabled-bg-color !default;
+$chip-outline-danger-font-color: rgba($danger) !default;
+$chip-outline-danger-hover-font-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-focus-font-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-active-font-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-focus-active-font-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-pressed-font-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-disabled-font-color: $content-text-color-disabled !default;
+$chip-outline-danger-close-icon-font-color: rgba($danger) !default;
+$chip-outline-danger-close-icon-hover-font-color: $chip-outline-danger-hover-font-color !default;
+$chip-outline-danger-close-icon-pressed-font-color: $chip-outline-danger-pressed-font-color !default;
+$chip-outline-danger-avatar-font-color: rgba($danger-text) !default;
+$chip-outline-danger-avatar-hover-font-color: $chip-outline-danger-avatar-font-color !default;
+$chip-outline-danger-avatar-focus-font-color: $chip-outline-danger-avatar-font-color !default;
+$chip-outline-danger-avatar-active-font-color: $chip-outline-danger-avatar-font-color !default;
+$chip-outline-danger-avatar-focus-active-font-color: $chip-outline-danger-avatar-font-color !default;
+$chip-outline-danger-avatar-pressed-font-color: $chip-outline-danger-avatar-font-color !default;
+$chip-outline-danger-avatar-disabled-font-color: $chip-outline-danger-disabled-font-color !default;
+$chip-outline-danger-border-color: rgba($danger) !default;
+$chip-outline-danger-hover-border-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-focus-border-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-active-border-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-focus-active-border-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-pressed-border-color: rgba($danger-bg-color) !default;
+$chip-outline-danger-disabled-border-color: rgba($danger-bg-color) !default;
\ No newline at end of file
diff --git a/components/buttons/styles/chips/_theme.scss b/components/buttons/styles/chips/_theme.scss
new file mode 100644
index 0000000..12b9452
--- /dev/null
+++ b/components/buttons/styles/chips/_theme.scss
@@ -0,0 +1,451 @@
+@mixin chip-color($bg-color, $border-color, $color, $icon-color, $avatar-bg-color, $avatar-font-color, $delete-icon-color: null) {
+ background: $bg-color;
+ @if $skin-name != 'Material3' {
+ border-color: $border-color;
+ }
+ @else {
+ border-image: $border-color;
+ }
+ color: $color;
+
+ .sf-selectable-icon path {
+ fill: $color;
+ }
+
+ .sf-chip-icon,
+ .sf-chip-delete {
+ color: $icon-color;
+
+ path {
+ fill: $icon-color;
+ }
+ }
+
+ .sf-chip-delete.sf-dlt-btn path {
+ fill: $delete-icon-color;
+ }
+
+ .sf-chip-avatar {
+ background-color: $avatar-bg-color;
+ color: $avatar-font-color;
+ }
+}
+
+@mixin chip-dlt-btn-color($hover-color, $pressed-color) {
+ &:not(.sf-active) {
+ .sf-chip-delete.sf-dlt-btn {
+ &:hover path {
+ fill: $hover-color;
+ }
+
+ &:active path {
+ fill: $pressed-color;
+ }
+ }
+ }
+}
+
+@include export-module('chip-theme') {
+ .sf-chip-list {
+ &.sf-selection .sf-chip {
+ &.sf-active {
+ @include chip-color($chip-choice-active-bg-color, $chip-choice-active-border-color, $chip-choice-active-font-color, $chip-choice-active-font-color, $chip-avatar-choice-active-bg-color, $chip-avatar-choice-active-font-color);
+
+ &.sf-focused {
+ @include chip-color($chip-choice-focus-active-bg-color, $chip-choice-focus-active-border-color, $chip-choice-focus-active-font-color, $chip-choice-icon-focus-active-font-color, $chip-avatar-choice-focus-active-bg-color, $chip-avatar-choice-focus-active-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-disabled-bg-color, $chip-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-avatar-disabled-bg-color, $chip-avatar-disabled-font-color);
+ }
+
+ &.sf-outline {
+ @include chip-color($chip-outline-choice-active-bg-color, $chip-outline-choice-active-border-color, $chip-outline-choice-active-font-color, $chip-outline-choice-active-font-color, $chip-outline-avatar-choice-active-bg-color, $chip-outline-avatar-choice-active-font-color);
+ border-width: $chip-outline-active-border-width;
+ &.sf-focused {
+ @include chip-color($chip-outline-choice-focus-active-bg-color, $chip-outline-choice-focus-active-border-color, $chip-outline-choice-focus-active-font-color, $chip-outline-choice-icon-focus-active-font-color, $chip-outline-avatar-choice-focus-active-bg-color, $chip-outline-avatar-choice-focus-active-font-color);
+ box-shadow: $chip-outline-focus-active-box-shadow;
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color);
+ }
+ }
+ }
+
+ &:active {
+ @include chip-color($chip-pressed-active-bg-color, $chip-pressed-border-color, $chip-selection-pressed-font-color, $chip-icon-selection-pressed-font-color, $chip-avatar-pressed-active-bg-color, $chip-avatar-pressed-active-font-color);
+
+ &.sf-outline {
+ @include chip-color($chip-outline-pressed-active-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-active-bg-color, $chip-outline-avatar-pressed-active-font-color);
+ }
+ }
+ }
+
+ &.sf-chip,
+ & .sf-chip {
+ @include chip-color($chip-default-bg-color, $chip-default-border-color, $chip-default-font-color, $chip-icon-font-color, $chip-avatar-bg-color, $chip-avatar-font-color, $chip-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-close-icon-hover-font-color, $chip-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-hover-bg-color, $chip-hover-border-color, $chip-hover-font-color, $chip-icon-hover-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ box-shadow: $chip-focussed-box-shadow;
+ @include chip-color($chip-focus-bg-color, $chip-focus-border-color, $chip-focus-font-color, $chip-icon-focus-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color);
+ &.sf-active {
+ @include chip-color($chip-focus-active-bg-color, $chip-focus-active-border-color, $chip-focus-active-font-color, $chip-icon-focus-active-font-color, $chip-avatar-focus-active-bg-color, $chip-avatar-focus-active-font-color);
+ box-shadow: $chip-focussed-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color);
+ box-shadow: none;
+ }
+
+ &:active {
+ @include chip-color($chip-pressed-bg-color, $chip-pressed-border-color, $chip-pressed-font-color, $chip-icon-pressed-font-color, $chip-avatar-pressed-bg-color, $chip-avatar-pressed-font-color);
+ box-shadow: $chip-pressed-box-shadow;
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-disabled-bg-color, $chip-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-avatar-disabled-bg-color, $chip-avatar-disabled-font-color);
+ opacity: 1;
+ pointer-events: none;
+ }
+
+ &.sf-outline {
+ @include chip-color(transparent, $chip-outline-border-color, $chip-outline-font-color, $chip-outline-icon-font-color, $chip-outline-avatar-bg-color, $chip-outline-avatar-font-color, $chip-outline-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-outline-close-icon-hover-font-color, $chip-outline-close-icon-pressed-font-color);
+ border-width: 1px;
+
+ &:hover {
+ @include chip-color($chip-outline-hover-bg-color, $chip-outline-hover-border-color, $chip-outline-hover-font-color, $chip-outline-icon-hover-font-color, $chip-outline-avatar-hover-bg-color, $chip-outline-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-outline-focus-bg-color, $chip-outline-focus-border-color, $chip-outline-focus-font-color, $chip-outline-icon-focus-font-color, $chip-outline-avatar-focus-bg-color, $chip-outline-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-outline-focus-active-bg-color, $chip-outline-focus-active-border-color, $chip-outline-focus-active-font-color, $chip-outline-icon-focus-active-font-color, $chip-outline-avatar-focus-active-bg-color, $chip-outline-avatar-focus-active-font-color);
+ box-shadow: $chip-outline-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-outline-active-bg-color, $chip-outline-active-border-color, $chip-outline-active-font-color, $chip-outline-icon-active-font-color, $chip-outline-avatar-active-bg-color, $chip-outline-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-outline-pressed-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-bg-color, $chip-outline-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color);
+ }
+ }
+
+ &.sf-primary {
+ @include chip-color($chip-primary-bg-color, $chip-primary-border-color, $chip-primary-font-color, $chip-primary-font-color, $chip-primary-avatar-bg-color, $chip-primary-avatar-font-color, $chip-primary-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-primary-close-icon-hover-font-color, $chip-primary-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-primary-hover-bg-color, $chip-primary-hover-border-color, $chip-primary-hover-font-color, $chip-primary-hover-font-color, $chip-primary-avatar-hover-bg-color, $chip-primary-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-primary-focus-bg-color, $chip-primary-focus-border-color, $chip-primary-focus-font-color, $chip-primary-focus-font-color, $chip-primary-avatar-focus-bg-color, $chip-primary-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-primary-focus-active-bg-color, $chip-primary-focus-active-border-color, $chip-primary-focus-active-font-color, $chip-primary-focus-active-font-color, $chip-primary-avatar-focus-active-bg-color, $chip-primary-avatar-focus-active-font-color);
+ box-shadow: $chip-primary-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-primary-active-bg-color, $chip-primary-active-border-color, $chip-primary-active-font-color, $chip-primary-active-font-color, $chip-primary-avatar-active-bg-color, $chip-primary-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-primary-pressed-bg-color, $chip-primary-pressed-border-color, $chip-primary-pressed-font-color, $chip-primary-pressed-font-color, $chip-primary-avatar-pressed-bg-color, $chip-primary-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-primary-disabled-bg-color, $chip-primary-disabled-border-color, $chip-primary-disabled-font-color, $chip-primary-disabled-font-color, $chip-primary-avatar-disabled-bg-color, $chip-primary-avatar-disabled-font-color);
+ }
+
+ &.sf-outline {
+ @include chip-color($chip-outline-primary-bg-color, $chip-outline-primary-border-color, $chip-outline-primary-font-color, $chip-outline-primary-font-color, $chip-outline-primary-avatar-bg-color, $chip-outline-primary-avatar-font-color, $chip-outline-primary-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-outline-primary-close-icon-hover-font-color, $chip-outline-primary-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-outline-primary-hover-bg-color, $chip-outline-primary-hover-border-color, $chip-outline-primary-hover-font-color, $chip-outline-primary-hover-font-color, $chip-outline-primary-avatar-hover-bg-color, $chip-outline-primary-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-outline-primary-focus-bg-color, $chip-outline-primary-focus-border-color, $chip-outline-primary-focus-font-color, $chip-outline-primary-focus-font-color, $chip-outline-primary-avatar-focus-bg-color, $chip-outline-primary-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-outline-primary-focus-active-bg-color, $chip-outline-primary-focus-active-border-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-avatar-focus-active-bg-color, $chip-outline-primary-avatar-focus-active-font-color);
+ box-shadow: $chip-primary-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-outline-primary-active-bg-color, $chip-outline-primary-active-border-color, $chip-outline-primary-active-font-color, $chip-outline-primary-active-font-color, $chip-outline-primary-avatar-active-bg-color, $chip-outline-primary-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-outline-primary-pressed-bg-color, $chip-outline-primary-pressed-border-color, $chip-outline-primary-pressed-font-color, $chip-outline-primary-pressed-font-color, $chip-outline-primary-avatar-pressed-bg-color, $chip-outline-primary-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-primary-disabled-bg-color, $chip-outline-primary-disabled-border-color, $chip-outline-primary-disabled-font-color, $chip-outline-primary-disabled-font-color, $chip-outline-primary-avatar-disabled-bg-color, $chip-outline-primary-avatar-disabled-font-color);
+ }
+ }
+ }
+
+ &.sf-success {
+ @include chip-color($chip-success-bg-color, $chip-success-border-color, $chip-success-font-color, $chip-success-font-color, $chip-success-avatar-bg-color, $chip-success-avatar-font-color, $chip-success-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-success-close-icon-hover-font-color, $chip-success-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-success-hover-bg-color, $chip-success-hover-border-color, $chip-success-hover-font-color, $chip-success-hover-font-color, $chip-success-avatar-hover-bg-color, $chip-success-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-success-focus-bg-color, $chip-success-focus-border-color, $chip-success-focus-font-color, $chip-success-focus-font-color, $chip-success-avatar-focus-bg-color, $chip-success-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-success-focus-active-bg-color, $chip-success-focus-active-border-color, $chip-success-focus-active-font-color, $chip-success-focus-active-font-color, $chip-success-avatar-focus-active-bg-color, $chip-success-avatar-focus-active-font-color);
+ box-shadow: $chip-success-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-success-active-bg-color, $chip-success-active-border-color, $chip-success-active-font-color, $chip-success-active-font-color, $chip-success-avatar-active-bg-color, $chip-success-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-success-pressed-bg-color, $chip-success-pressed-border-color, $chip-success-pressed-font-color, $chip-success-pressed-font-color, $chip-success-avatar-pressed-bg-color, $chip-success-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-success-disabled-bg-color, $chip-success-disabled-border-color, $chip-success-disabled-font-color, $chip-success-disabled-font-color, $chip-success-avatar-disabled-bg-color, $chip-success-avatar-disabled-font-color);
+ }
+
+ &.sf-outline {
+ @include chip-color($chip-outline-success-bg-color, $chip-outline-success-border-color, $chip-outline-success-font-color, $chip-outline-success-font-color, $chip-outline-success-avatar-bg-color, $chip-outline-success-avatar-font-color, $chip-outline-success-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-outline-success-close-icon-hover-font-color, $chip-outline-success-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-outline-success-hover-bg-color, $chip-outline-success-hover-border-color, $chip-outline-success-hover-font-color, $chip-outline-success-hover-font-color, $chip-outline-success-avatar-hover-bg-color, $chip-outline-success-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-outline-success-focus-bg-color, $chip-outline-success-focus-border-color, $chip-outline-success-focus-font-color, $chip-outline-success-focus-font-color, $chip-outline-success-avatar-focus-bg-color, $chip-outline-success-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-outline-success-focus-active-bg-color, $chip-outline-success-focus-active-border-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-avatar-focus-active-bg-color, $chip-outline-success-avatar-focus-active-font-color);
+ box-shadow: $chip-success-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-outline-success-active-bg-color, $chip-outline-success-active-border-color, $chip-outline-success-active-font-color, $chip-outline-success-active-font-color, $chip-outline-success-avatar-active-bg-color, $chip-outline-success-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-outline-success-pressed-bg-color, $chip-outline-success-pressed-border-color, $chip-outline-success-pressed-font-color, $chip-outline-success-pressed-font-color, $chip-outline-success-avatar-pressed-bg-color, $chip-outline-success-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-success-disabled-bg-color, $chip-outline-success-disabled-border-color, $chip-outline-success-disabled-font-color, $chip-outline-success-disabled-font-color, $chip-outline-success-avatar-disabled-bg-color, $chip-outline-success-avatar-disabled-font-color);
+ }
+ }
+ }
+
+ &.sf-info {
+ @include chip-color($chip-info-bg-color, $chip-info-border-color, $chip-info-font-color, $chip-info-font-color, $chip-info-avatar-bg-color, $chip-info-avatar-font-color, $chip-info-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-info-close-icon-hover-font-color, $chip-info-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-info-hover-bg-color, $chip-info-hover-border-color, $chip-info-hover-font-color, $chip-info-hover-font-color, $chip-info-avatar-hover-bg-color, $chip-info-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-info-focus-bg-color, $chip-info-focus-border-color, $chip-info-focus-font-color, $chip-info-focus-font-color, $chip-info-avatar-focus-bg-color, $chip-info-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-info-focus-active-bg-color, $chip-info-focus-active-border-color, $chip-info-focus-active-font-color, $chip-info-focus-active-font-color, $chip-info-avatar-focus-active-bg-color, $chip-info-avatar-focus-active-font-color);
+ box-shadow: $chip-info-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-info-active-bg-color, $chip-info-active-border-color, $chip-info-active-font-color, $chip-info-active-font-color, $chip-info-avatar-active-bg-color, $chip-info-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-info-pressed-bg-color, $chip-info-pressed-border-color, $chip-info-pressed-font-color, $chip-info-pressed-font-color, $chip-info-avatar-pressed-bg-color, $chip-info-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-info-disabled-bg-color, $chip-info-disabled-border-color, $chip-info-disabled-font-color, $chip-info-disabled-font-color, $chip-info-avatar-disabled-bg-color, $chip-info-avatar-disabled-font-color);
+ }
+
+ &.sf-outline {
+ @include chip-color($chip-outline-info-bg-color, $chip-outline-info-border-color, $chip-outline-info-font-color, $chip-outline-info-font-color, $chip-outline-info-avatar-bg-color, $chip-outline-info-avatar-font-color, $chip-outline-info-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-outline-info-close-icon-hover-font-color, $chip-outline-info-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-outline-info-hover-bg-color, $chip-outline-info-hover-border-color, $chip-outline-info-hover-font-color, $chip-outline-info-hover-font-color, $chip-outline-info-avatar-hover-bg-color, $chip-outline-info-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-outline-info-focus-bg-color, $chip-outline-info-focus-border-color, $chip-outline-info-focus-font-color, $chip-outline-info-focus-font-color, $chip-outline-info-avatar-focus-bg-color, $chip-outline-info-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-outline-info-focus-active-bg-color, $chip-outline-info-focus-active-border-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-avatar-focus-active-bg-color, $chip-outline-info-avatar-focus-active-font-color);
+ box-shadow: $chip-info-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-outline-info-active-bg-color, $chip-outline-info-active-border-color, $chip-outline-info-active-font-color, $chip-outline-info-active-font-color, $chip-outline-info-avatar-active-bg-color, $chip-outline-info-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-outline-info-pressed-bg-color, $chip-outline-info-pressed-border-color, $chip-outline-info-pressed-font-color, $chip-outline-info-pressed-font-color, $chip-outline-info-avatar-pressed-bg-color, $chip-outline-info-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-info-disabled-bg-color, $chip-outline-info-disabled-border-color, $chip-outline-info-disabled-font-color, $chip-outline-info-disabled-font-color, $chip-outline-info-avatar-disabled-bg-color, $chip-outline-info-avatar-disabled-font-color);
+ }
+ }
+ }
+
+ &.sf-warning {
+ @include chip-color($chip-warning-bg-color, $chip-warning-border-color, $chip-warning-font-color, $chip-warning-font-color, $chip-warning-avatar-bg-color, $chip-warning-avatar-font-color, $chip-warning-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-warning-close-icon-hover-font-color, $chip-warning-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-warning-hover-bg-color, $chip-warning-hover-border-color, $chip-warning-hover-font-color, $chip-warning-hover-font-color, $chip-warning-avatar-hover-bg-color, $chip-warning-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-warning-focus-bg-color, $chip-warning-focus-border-color, $chip-warning-focus-font-color, $chip-warning-focus-font-color, $chip-warning-avatar-focus-bg-color, $chip-warning-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-warning-focus-active-bg-color, $chip-warning-focus-active-border-color, $chip-warning-focus-active-font-color, $chip-warning-focus-active-font-color, $chip-warning-avatar-focus-active-bg-color, $chip-warning-avatar-focus-active-font-color);
+ box-shadow: $chip-warning-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-warning-active-bg-color, $chip-warning-active-border-color, $chip-warning-active-font-color, $chip-warning-active-font-color, $chip-warning-avatar-active-bg-color, $chip-warning-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-warning-pressed-bg-color, $chip-warning-pressed-border-color, $chip-warning-pressed-font-color, $chip-warning-pressed-font-color, $chip-warning-avatar-pressed-bg-color, $chip-warning-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-warning-disabled-bg-color, $chip-warning-disabled-border-color, $chip-warning-disabled-font-color, $chip-warning-disabled-font-color, $chip-warning-avatar-disabled-bg-color, $chip-warning-avatar-disabled-font-color);
+ }
+
+ &.sf-outline {
+ @include chip-color($chip-outline-warning-bg-color, $chip-outline-warning-border-color, $chip-outline-warning-font-color, $chip-outline-warning-font-color, $chip-outline-warning-avatar-bg-color, $chip-outline-warning-avatar-font-color, $chip-outline-warning-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-outline-warning-close-icon-hover-font-color, $chip-outline-warning-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-outline-warning-hover-bg-color, $chip-outline-warning-hover-border-color, $chip-outline-warning-hover-font-color, $chip-outline-warning-hover-font-color, $chip-outline-warning-avatar-hover-bg-color, $chip-outline-warning-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-outline-warning-focus-bg-color, $chip-outline-warning-focus-border-color, $chip-outline-warning-focus-font-color, $chip-outline-warning-focus-font-color, $chip-outline-warning-avatar-focus-bg-color, $chip-outline-warning-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-outline-warning-focus-active-bg-color, $chip-outline-warning-focus-active-border-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-avatar-focus-active-bg-color, $chip-outline-warning-avatar-focus-active-font-color);
+ box-shadow: $chip-warning-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-outline-warning-active-bg-color, $chip-outline-warning-active-border-color, $chip-outline-warning-active-font-color, $chip-outline-warning-active-font-color, $chip-outline-warning-avatar-active-bg-color, $chip-outline-warning-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-outline-warning-pressed-bg-color, $chip-outline-warning-pressed-border-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-avatar-pressed-bg-color, $chip-outline-warning-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-warning-disabled-bg-color, $chip-outline-warning-disabled-border-color, $chip-outline-warning-disabled-font-color, $chip-outline-warning-disabled-font-color, $chip-outline-warning-avatar-disabled-bg-color, $chip-outline-warning-avatar-disabled-font-color);
+ }
+ }
+ }
+
+ &.sf-danger {
+ @include chip-color($chip-danger-bg-color, $chip-danger-border-color, $chip-danger-font-color, $chip-danger-font-color, $chip-danger-avatar-bg-color, $chip-danger-avatar-font-color, $chip-danger-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-danger-close-icon-hover-font-color, $chip-danger-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-danger-hover-bg-color, $chip-danger-hover-border-color, $chip-danger-hover-font-color, $chip-danger-hover-font-color, $chip-danger-avatar-hover-bg-color, $chip-danger-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-danger-focus-bg-color, $chip-danger-focus-border-color, $chip-danger-focus-font-color, $chip-danger-focus-font-color, $chip-danger-avatar-focus-bg-color, $chip-danger-avatar-focus-font-color);
+
+ &.sf-active {
+ @include chip-color($chip-danger-focus-active-bg-color, $chip-danger-focus-active-border-color, $chip-danger-focus-active-font-color, $chip-danger-focus-active-font-color, $chip-danger-avatar-focus-active-bg-color, $chip-danger-avatar-focus-active-font-color);
+ box-shadow: $chip-danger-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-danger-active-bg-color, $chip-danger-active-border-color, $chip-danger-active-font-color, $chip-danger-active-font-color, $chip-danger-avatar-active-bg-color, $chip-danger-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-danger-pressed-bg-color, $chip-danger-pressed-border-color, $chip-danger-pressed-font-color, $chip-danger-pressed-font-color, $chip-danger-avatar-pressed-bg-color, $chip-danger-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-danger-disabled-bg-color, $chip-danger-disabled-border-color, $chip-danger-disabled-font-color, $chip-danger-disabled-font-color, $chip-danger-avatar-disabled-bg-color, $chip-danger-avatar-disabled-font-color);
+ }
+
+ &.sf-outline {
+ @include chip-color($chip-outline-danger-bg-color, $chip-outline-danger-border-color, $chip-outline-danger-font-color, $chip-outline-danger-font-color, $chip-outline-danger-avatar-bg-color, $chip-outline-danger-avatar-font-color, $chip-outline-danger-close-icon-font-color);
+ @include chip-dlt-btn-color($chip-outline-danger-close-icon-hover-font-color, $chip-outline-danger-close-icon-pressed-font-color);
+
+ &:hover {
+ @include chip-color($chip-outline-danger-hover-bg-color, $chip-outline-danger-hover-border-color, $chip-outline-danger-hover-font-color, $chip-outline-danger-hover-font-color, $chip-outline-danger-avatar-hover-bg-color, $chip-outline-danger-avatar-hover-font-color);
+ }
+
+ &.sf-focused {
+ @include chip-color($chip-outline-danger-focus-bg-color, $chip-outline-danger-focus-border-color, $chip-outline-danger-focus-font-color, $chip-outline-danger-focus-font-color, $chip-outline-danger-avatar-focus-bg-color, $chip-outline-danger-avatar-focus-font-color);
+
+ &.sf-focused.sf-active {
+ @include chip-color($chip-outline-danger-focus-active-bg-color, $chip-outline-danger-focus-active-border-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-avatar-focus-active-bg-color, $chip-outline-danger-avatar-focus-active-font-color);
+ box-shadow: $chip-danger-focus-active-box-shadow;
+ }
+ }
+
+ &.sf-active {
+ @include chip-color($chip-outline-danger-active-bg-color, $chip-outline-danger-active-border-color, $chip-outline-danger-active-font-color, $chip-outline-danger-active-font-color, $chip-outline-danger-avatar-active-bg-color, $chip-outline-danger-avatar-active-font-color);
+ }
+
+ &:active {
+ @include chip-color($chip-outline-danger-pressed-bg-color, $chip-outline-danger-pressed-border-color, $chip-outline-danger-pressed-font-color, $chip-outline-danger-pressed-font-color, $chip-outline-danger-avatar-pressed-bg-color, $chip-outline-danger-avatar-pressed-font-color);
+ }
+
+ &.sf-disabled {
+ @include chip-color($chip-outline-danger-disabled-bg-color, $chip-outline-danger-disabled-border-color, $chip-outline-danger-disabled-font-color, $chip-outline-danger-disabled-font-color, $chip-outline-danger-avatar-disabled-bg-color, $chip-outline-danger-avatar-disabled-font-color);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/components/buttons/styles/chips/material3-dark.scss b/components/buttons/styles/chips/material3-dark.scss
new file mode 100644
index 0000000..bc1eba0
--- /dev/null
+++ b/components/buttons/styles/chips/material3-dark.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/chips/material3.scss b/components/buttons/styles/chips/material3.scss
new file mode 100644
index 0000000..3130aa3
--- /dev/null
+++ b/components/buttons/styles/chips/material3.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/floating-action-button/_all.scss b/components/buttons/styles/floating-action-button/_all.scss
new file mode 100644
index 0000000..a0fe77d
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/_all.scss
@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';
diff --git a/components/buttons/styles/floating-action-button/_layout.scss b/components/buttons/styles/floating-action-button/_layout.scss
new file mode 100644
index 0000000..92a0668
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/_layout.scss
@@ -0,0 +1,140 @@
+@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
+ border-radius: $border-radius;
+ min-height: $min-height;
+ min-width: $min-width;
+ padding: $padding;
+
+ &.sf-icon-btn {
+ padding: 0;
+ }
+
+ .sf-btn-icon {
+ font-size: $icon-font-size;
+ }
+}
+
+@include export-module('floating-action-button-layout') {
+ .sf-fab.sf-btn {
+ align-items: center;
+ border-radius: $fab-border-radius;
+ display: inline-flex;
+ min-height: $fab-min-height;
+ min-width: $fab-min-width;
+ padding: $fab-padding;
+ position: absolute;
+ z-index: 100000;
+
+ .sf-btn-icon {
+ margin-top: 0;
+ font-size: $fab-icon-font-size;
+ }
+
+ &.sf-icon-btn {
+ padding: 0;
+ }
+
+ &.sf-fab-fixed {
+ position: fixed;
+ }
+
+ &.sf-fab-top {
+ top: $fab-offset;
+ &.sf-fab-middle {
+ top: 50%;
+ transform: translateY(-50%);
+ &.sf-fab-left.sf-fab-center {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+
+ &.sf-fab-bottom {
+ bottom: $fab-offset;
+ }
+
+ &.sf-fab-left {
+ left: $fab-offset;
+ &.sf-fab-center {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+
+ &.sf-fab-right {
+ right: $fab-offset;
+ }
+ }
+
+ .sf-rtl {
+ &.sf-fab.sf-btn {
+ &.sf-fab-top {
+ top: $fab-offset;
+ &.sf-fab-middle {
+ top: 50%;
+ transform: translateY(-50%);
+ &.sf-fab-right.sf-fab-center {
+ right: 50%;
+ top: 50%;
+ transform: translate(50%, -50%);
+ }
+ }
+ }
+
+ &.sf-fab-bottom {
+ bottom: $fab-offset;
+ }
+
+ &.sf-fab-right {
+ right: $fab-offset;
+ &.sf-fab-center {
+ right: 50%;
+ transform: translateX(50%);
+ }
+ }
+
+ &.sf-fab-left {
+ left: $fab-offset;
+ }
+ }
+ }
+
+ .sf-fab-hidden {
+ visibility: hidden;
+ }
+
+ .sf-small.sf-fab.sf-btn,
+ .sf-small .sf-fab.sf-btn {
+ @include fab-button-styles($fab-small-border-radius, $fab-small-min-height, $fab-small-min-width, $fab-small-padding, $fab-small-icon-font-size);
+ }
+}
+
+
+@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
+ border-radius: $border-radius;
+ min-height: $min-height;
+ min-width: $min-width;
+ padding: $padding;
+
+ &.sf-icon-btn {
+ padding: 0;
+ }
+
+ .sf-btn-icon {
+ font-size: $icon-font-size;
+ }
+}
+
+@include export-module('floating-action-button-bigger') {
+ .sf-large.sf-fab.sf-btn,
+ .sf-large .sf-fab.sf-btn {
+ @include fab-button-styles($fab-bigger-border-radius, $fab-bigger-min-height, $fab-bigger-min-width, $fab-bigger-padding, $fab-bigger-icon-font-size);
+ }
+ .sf-large.sf-small.sf-fab.sf-btn,
+ .sf-large.sf-small .sf-fab.sf-btn,
+ .sf-large .sf-small.sf-fab.sf-btn,
+ .sf-small .sf-large.sf-fab.sf-btn {
+ @include fab-button-styles($fab-bigger-small-border-radius, $fab-bigger-small-min-height, $fab-bigger-small-min-width, $fab-bigger-small-padding, $fab-bigger-small-icon-font-size);
+ }
+}
diff --git a/components/buttons/styles/floating-action-button/_material3-dark-definition.scss b/components/buttons/styles/floating-action-button/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/buttons/styles/floating-action-button/_material3-definition.scss b/components/buttons/styles/floating-action-button/_material3-definition.scss
new file mode 100644
index 0000000..101e88b
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/_material3-definition.scss
@@ -0,0 +1,27 @@
+$fab-offset: 16px !default;
+
+$fab-border-radius: 12px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-padding: 0 16px !default;
+$fab-icon-font-size: 14px !default;
+
+$fab-small-border-radius: 8px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+$fab-small-padding: 0 12px !default;
+$fab-small-icon-font-size: 12px !default;
+
+$fab-bigger-border-radius: 16px !default;
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-padding: 0 19px !default;
+$fab-bigger-icon-font-size: 14px !default;
+
+$fab-bigger-small-border-radius: $fab-bigger-border-radius !default;
+$fab-bigger-small-min-height: 48px !default;
+$fab-bigger-small-min-width: 48px !default;
+$fab-bigger-small-padding: 0 19px !default;
+$fab-bigger-small-icon-font-size: 14px !default;
+
+$fab-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12) !default;
diff --git a/components/buttons/styles/floating-action-button/_theme.scss b/components/buttons/styles/floating-action-button/_theme.scss
new file mode 100644
index 0000000..4af4f67
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/_theme.scss
@@ -0,0 +1,24 @@
+@include export-module('floating-action-button-theme') {
+ .sf-fab.sf-btn {
+ box-shadow: $fab-box-shadow;
+
+ &:hover:not(:focus),
+ &:active,
+ &.sf-active,
+ &:disabled {
+ box-shadow: $fab-box-shadow;
+ }
+
+ &:focus {
+ @if ($skin-name != 'tailwind3' and $skin-name != 'bootstrap5.3') {
+ box-shadow: $fab-box-shadow;
+ }
+ }
+ }
+}
+
+@if $skin-name == 'tailwind3' {
+ .sf-fab.sf-btn:focus-visible {
+ box-shadow: $fab-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
+ }
+}
diff --git a/components/buttons/styles/floating-action-button/material3-dark.scss b/components/buttons/styles/floating-action-button/material3-dark.scss
new file mode 100644
index 0000000..c9c5037
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/material3-dark.scss
@@ -0,0 +1,4 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import '../button/material3-dark-definition.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/floating-action-button/material3.scss b/components/buttons/styles/floating-action-button/material3.scss
new file mode 100644
index 0000000..5d7deb4
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/material3.scss
@@ -0,0 +1,4 @@
+@import 'react-base/styles/definition/material3.scss';
+@import '../button/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/material3-dark.scss b/components/buttons/styles/material3-dark.scss
new file mode 100644
index 0000000..4b2b9c5
--- /dev/null
+++ b/components/buttons/styles/material3-dark.scss
@@ -0,0 +1,11 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'button/material3-dark-definition.scss';
+@import 'button/all.scss';
+@import 'check-box/material3-dark-definition.scss';
+@import 'check-box/all.scss';
+@import 'radio-button/material3-dark-definition.scss';
+@import 'radio-button/all.scss';
+@import 'chips/material3-dark-definition.scss';
+@import 'chips/all.scss';
+@import 'floating-action-button/material3-dark-definition.scss';
+@import 'floating-action-button/all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/material3.scss b/components/buttons/styles/material3.scss
new file mode 100644
index 0000000..62ce0b8
--- /dev/null
+++ b/components/buttons/styles/material3.scss
@@ -0,0 +1,11 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'button/material3-definition.scss';
+@import 'button/all.scss';
+@import 'check-box/material3-definition.scss';
+@import 'check-box/all.scss';
+@import 'radio-button/material3-definition.scss';
+@import 'radio-button/all.scss';
+@import 'chips/material3-definition.scss';
+@import 'chips/all.scss';
+@import 'floating-action-button/material3-definition.scss';
+@import 'floating-action-button/all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/radio-button/_all.scss b/components/buttons/styles/radio-button/_all.scss
new file mode 100644
index 0000000..f4d67e8
--- /dev/null
+++ b/components/buttons/styles/radio-button/_all.scss
@@ -0,0 +1 @@
+@import 'layout.scss';
diff --git a/components/buttons/styles/radio-button/_layout.scss b/components/buttons/styles/radio-button/_layout.scss
new file mode 100644
index 0000000..ce3f379
--- /dev/null
+++ b/components/buttons/styles/radio-button/_layout.scss
@@ -0,0 +1,486 @@
+
+@include export-module('radiobutton-layout') {
+ .sf-radio-wrapper {
+ display: inline-block;
+ line-height: 1;
+ position: relative;
+ }
+
+ /* stylelint-disable property-no-vendor-prefix */
+ .sf-radio {
+ -webkit-appearance: none;
+ height: 1px;
+ opacity: 0;
+ position: absolute;
+ width: 1px;
+
+ &:not(:checked):not(:disabled):hover {
+ +label.sf-rtl,
+ +label.sf-right {
+ &::after {
+ left: auto;
+ }
+ }
+ }
+
+ &:focus-visible {
+ +label {
+ @if $skin-name == 'fluent2' {
+ box-shadow: $switch-box-shadow;
+ border-radius: 1px;
+ }
+ }
+ }
+
+ +label {
+ -webkit-tap-highlight-color: transparent;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ position: relative;
+ user-select: none;
+ vertical-align: middle;
+ white-space: nowrap;
+ @if $skin-name == 'fluent2' {
+ margin: 7.6px;
+ }
+
+ & .sf-label {
+ color: $radio-btn-font-color;
+ display: inline-block;
+ font-family: $font-family;
+ font-size: $radio-btn-font-size;
+ font-weight: normal;
+ line-height: $radio-btn-line-height;
+ padding-left: $radio-btn-padding-left;
+ vertical-align: text-top;
+ white-space: normal;
+ @if $skin-name == 'tailwind3' {
+ font-weight: $font-weight-medium;
+ }
+ }
+
+ &:focus,
+ &.sf-focus {
+ & .sf-ripple-container {
+ background-color: $radio-btn-focus-ripple-bgcolor;
+ }
+ }
+
+ & .sf-ripple-element {
+ background-color: $radio-btn-checked-ripple-bgcolor;
+ }
+
+ &::before {
+ border: $radio-btn-border;
+ border-radius: 50%;
+ box-sizing: border-box;
+ content: '';
+ height: $radio-btn-height;
+ left: 0;
+ position: absolute;
+ width: $radio-btn-width;
+ background-color: $radio-btn-background-color;
+ border-color: $radio-btn-border-color;
+ }
+
+ &:focus {
+ &::before {
+ box-shadow: $radio-btn-focussed-box-shadow;
+ @if $skin-name == 'bootstrap5.3' {
+ border-color: $border-selected;
+ }
+ }
+ }
+
+ &:active {
+ &::before {
+ @if $skin-name == 'bootstrap5.3' {
+ box-shadow: $radio-btn-focussed-box-shadow;
+ border-color: $border-selected !important; /* stylelint-disable-line declaration-no-important */
+ background-color: $content-bg-color-pressed;
+ }
+ @if $skin-name == 'tailwind3' {
+ box-shadow: $radio-btn-focussed-box-shadow;
+ }
+ }
+
+ & .sf-ripple-element {
+ background-color: $radio-btn-ripple-bgcolor;
+ }
+ }
+
+ &::after {
+ border: 1px solid;
+ border-radius: 50%;
+ box-sizing: border-box;
+ content: '';
+ height: $radio-btn-icon-height;
+ left: $radio-btn-icon-left;
+ position: absolute;
+ top: $radio-btn-icon-top;
+ transform: scale(0);
+ width: $radio-btn-icon-width;
+ }
+
+ & .sf-ripple-container {
+ border-radius: 50%;
+ height: $radio-btn-ripple-size;
+ left: $radio-btn-ripple-position;
+ position: absolute;
+ top: $radio-btn-ripple-position;
+ width: $radio-btn-ripple-size;
+ z-index: 1;
+
+ & .sf-ripple-element {
+ @if $skin-name == 'Material3' {
+ border-radius: 50%;
+ }
+ }
+ }
+
+ &.sf-right,
+ &.sf-rtl {
+ & .sf-label {
+ padding-left: 0;
+ padding-right: $radio-btn-padding-left;
+ }
+
+ &::before {
+ left: auto;
+ right: 0;
+ }
+
+ &::after {
+ left: auto;
+ right: $radio-btn-icon-right;
+ }
+
+ & .sf-ripple-container {
+ left: auto;
+ right: $radio-btn-ripple-position;
+ }
+ }
+
+ &.sf-right {
+ &.sf-rtl {
+ & .sf-label {
+ padding-left: $radio-btn-padding-left;
+ padding-right: 0;
+ }
+
+ &::before {
+ left: 0;
+ right: auto;
+ }
+
+ &::after {
+ left: $radio-btn-icon-right;
+ right: auto;
+ }
+
+ & .sf-ripple-container {
+ left: -8px;
+ right: auto;
+ }
+ }
+ }
+
+ &.sf-small {
+
+ & .sf-label {
+ line-height: $radio-btn-small-line-height;
+ padding-left: $radio-btn-small-padding;
+ }
+
+ &::before {
+ height: $radio-btn-small-height;
+ width: $radio-btn-small-width;
+ }
+
+ &::after {
+ height: $radio-btn-small-icon-height;
+ left: $radio-btn-small-icon-left;
+ top: $radio-btn-small-icon-top;
+ width: $radio-btn-small-icon-width;
+ }
+
+ & .sf-ripple-container {
+ left: $radio-btn-small-ripple-position;
+ top: $radio-btn-small-ripple-position;
+ }
+
+ &.sf-right,
+ &.sf-rtl {
+ & .sf-label {
+ padding-left: 0;
+ padding-right: $radio-btn-small-padding;
+ }
+
+ &::after {
+ left: auto;
+ right: $radio-btn-small-icon-right;
+ }
+
+ & .sf-ripple-container {
+ left: auto;
+ right: $radio-btn-small-ripple-position;
+ }
+ }
+
+ &.sf-right {
+ &.sf-rtl {
+ & .sf-label {
+ padding-left: $radio-btn-small-padding;
+ padding-right: 0;
+ }
+
+ &::after {
+ left: $radio-btn-small-icon-right;
+ right: auto;
+ }
+
+ & .sf-ripple-container {
+ left: -10px;
+ right: auto;
+ }
+ }
+ }
+ }
+ }
+
+
+ &:focus {
+ +label {
+ &::before {
+ border-color: $radio-btn-focus-check-border-color;
+ box-shadow: $radio-btn-focussed-box-shadow;
+ }
+ }
+ }
+
+ &:focus {
+ +label {
+ &::before {
+ border-color: $radio-btn-hover-border-color;
+ box-shadow: $radio-btn-focussed-box-shadow;
+ }
+ }
+ }
+
+ &:checked {
+ +label {
+ &::after {
+ transform: scale(1);
+ transition: $radio-btn-check-transition;
+ }
+ }
+ }
+
+ &:hover {
+ +label {
+ & .sf-ripple-container {
+ @if $skin-name == 'Material3' {
+ background: $radio-btn-ripple-bgcolor;
+ }
+ }
+ }
+
+ +label {
+ &::before {
+ border-color: $radio-btn-hover-border-color;
+ }
+ }
+ }
+
+ &:checked {
+ +label {
+ &::before {
+ background-color: $radio-btn-checked-background-color;
+ border-color: $radio-btn-checked-border-color;
+ }
+
+ &::after {
+ background-color: $radio-btn-checked-color;
+ color: $radio-btn-checked-color;
+ }
+
+ &:active {
+ & .sf-ripple-element {
+ background-color: $radio-btn-checked-ripple-bgcolor;
+ }
+ }
+ }
+
+ +.sf-focus {
+ & .sf-ripple-container {
+ background-color: $radio-btn-checked-ripple-bgcolor;
+ }
+
+ &::before {
+ outline: $radio-btn-focus-outline;
+ outline-offset: $radio-btn-focus-outline-offset;
+ }
+ }
+ }
+
+ &:checked {
+ &:focus {
+ +label {
+ &::before {
+ border-color: $radio-btn-focus-check-border-color;
+ }
+
+ &::after {
+ background-color: $radio-btn-focus-check-bg-color;
+ @if $skin-name == 'fluent2' {
+ color: $radio-btn-focus-check-bg-color;
+ }
+ }
+ }
+ }
+
+ +label {
+ &:hover {
+ & .sf-ripple-container {
+ @if $skin-name == 'Material3' {
+ background: $radio-btn-checked-ripple-bgcolor;
+ }
+ }
+ &::before {
+ border-color: $radio-btn-hover-check-border-color;
+ }
+
+ &::after {
+ background-color: $radio-btn-hover-check-bg-color;
+ @if $skin-name == 'fluent2' {
+ color: $radio-btn-hover-check-bg-color;
+ }
+ }
+ }
+ }
+ }
+
+ &:disabled {
+ +label {
+ cursor: default;
+ pointer-events: none;
+ @if $skin-name == 'bootstrap5.3' {
+ opacity: .5;
+ }
+
+ &::before {
+ @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
+ background-color: $radio-btn-disabled-not-checked-bg-color;
+ }
+ @else {
+ background-color: $radio-btn-disabled-background-color;
+ }
+ border-color: $radio-btn-disabled-border-color;
+ cursor: default;
+ }
+
+ & .sf-ripple-container {
+ background-color: transparent;
+
+ &::after {
+ background-color: transparent;
+ cursor: default;
+ }
+ }
+
+ & .sf-label {
+ color: $radio-btn-disabled-color;
+ }
+ }
+
+ &:checked {
+ +label {
+ &::before {
+ background-color: $radio-btn-disabled-background-color;
+ border-color: $radio-btn-disabled-checked-border-color;
+ }
+
+ &::after {
+ background-color: $radio-btn-disabled-checked-color;
+ border-color: $radio-btn-disabled-checked-color;
+ cursor: default;
+ }
+
+ & .sf-ripple-container,
+ & .sf-ripple-container::after {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+
+ .sf-small .sf-radio + label,
+ .sf-radio + label.sf-small {
+ @if $skin-name == 'fluent2' {
+ margin: 5.6px;
+ }
+ & .sf-label {
+ line-height: $radio-btn-small-line-height;
+ padding-left: $radio-btn-small-padding;
+ @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
+ font-size: 12px;
+ }
+ }
+
+ &::before {
+ height: $radio-btn-small-height;
+ width: $radio-btn-small-width;
+ }
+
+ &::after {
+ height: $radio-btn-small-icon-height;
+ left: $radio-btn-small-icon-left;
+ top: $radio-btn-small-icon-top;
+ width: $radio-btn-small-icon-width;
+ }
+
+ & .sf-ripple-container {
+ left: $radio-btn-small-ripple-position;
+ top: $radio-btn-small-ripple-position;
+ }
+
+ &.sf-right,
+ &.sf-rtl {
+ & .sf-label {
+ padding-left: 0;
+ padding-right: $radio-btn-small-padding;
+ }
+
+ &::after {
+ left: auto;
+ right: $radio-btn-small-icon-right;
+ }
+
+ & .sf-ripple-container {
+ left: auto;
+ right: $radio-btn-small-ripple-position;
+ }
+ }
+
+ &.sf-right {
+ &.sf-rtl {
+ & .sf-label {
+ padding-left: $radio-btn-small-padding;
+ padding-right: 0;
+ }
+
+ &::after {
+ left: $radio-btn-small-icon-right;
+ right: auto;
+ }
+
+ & .sf-ripple-container {
+ left: -10px;
+ right: auto;
+ }
+ }
+ }
+ }
+}
diff --git a/components/buttons/styles/radio-button/_material3-dark-definition.scss b/components/buttons/styles/radio-button/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/buttons/styles/radio-button/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/buttons/styles/radio-button/_material3-definition.scss b/components/buttons/styles/radio-button/_material3-definition.scss
new file mode 100644
index 0000000..d703853
--- /dev/null
+++ b/components/buttons/styles/radio-button/_material3-definition.scss
@@ -0,0 +1,47 @@
+$radio-btn-border: 1px solid !default;
+$radio-btn-height: 14px !default;
+$radio-btn-width: 14px !default;
+$radio-btn-small-height: 14px !default;
+$radio-btn-small-width: 14px !default;
+$radio-btn-icon-left: 4px !default;
+$radio-btn-icon-top: 4px !default;
+$radio-btn-icon-right: 4px !default;
+$radio-btn-ripple-position: -8px !default;
+$radio-btn-ripple-size: 30px !default;
+$radio-btn-small-icon-left: 4px !default;
+$radio-btn-small-icon-top: 4px !default;
+$radio-btn-small-icon-right: 4px !default;
+$radio-btn-small-ripple-position: -9px !default;
+$radio-btn-icon-height: 6px !default;
+$radio-btn-icon-width: 6px !default;
+$radio-btn-small-icon-height: 6px !default;
+$radio-btn-small-icon-width: 6px !default;
+$radio-btn-line-height: 1 !default;
+$radio-btn-padding-left: 22px !default;
+$radio-btn-small-line-height: 1 !default;
+$radio-btn-small-padding: 22px !default;
+$radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-font-size: 14px !default;
+$radio-btn-background-color: $transparent !default;
+$radio-btn-border-color: rgba($content-text-color-alt1) !default;
+$radio-btn-checked-border-color: rgba($primary) !default;
+$radio-btn-checked-color: rgba($primary) !default;
+$radio-btn-checked-background-color: $transparent !default;
+$radio-btn-checked-ripple-bgcolor: rgba($primary, .08) !default;
+$radio-btn-check-transition: none !default;
+$radio-btn-disabled-border-color: rgba($content-text-color, .38) !default;
+$radio-btn-disabled-checked-border-color: rgba($content-text-color, .38) !default;
+$radio-btn-disabled-background-color: transparent !default;
+$radio-btn-disabled-color: $content-text-color-disabled !default;
+$radio-btn-disabled-checked-color: rgba($content-text-color, .38) !default;
+$radio-btn-font-color: rgba($content-text-color) !default;
+$radio-btn-focus-ripple-bgcolor: rgba($content-text-color, .12) !default;
+$radio-btn-focussed-box-shadow: none !default;
+$radio-btn-hover-bgcolor: $transparent !default;
+$radio-btn-hover-border-color: rgba($content-text-color) !default;
+$radio-btn-hover-check-bg-color: rgba($primary) !default;
+$radio-btn-hover-check-border-color: rgba($primary) !default;
+$radio-btn-ripple-bgcolor: rgba($content-text-color, .08) !default;
+$radio-btn-focus-check-bg-color: rgba($primary) !default;
+$radio-btn-focus-check-border-color: rgba($primary) !default;
+$radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
diff --git a/components/buttons/styles/radio-button/material3-dark.scss b/components/buttons/styles/radio-button/material3-dark.scss
new file mode 100644
index 0000000..bc1eba0
--- /dev/null
+++ b/components/buttons/styles/radio-button/material3-dark.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/styles/radio-button/material3.scss b/components/buttons/styles/radio-button/material3.scss
new file mode 100644
index 0000000..3130aa3
--- /dev/null
+++ b/components/buttons/styles/radio-button/material3.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/buttons/tsconfig.json b/components/buttons/tsconfig.json
new file mode 100644
index 0000000..3ab8c23
--- /dev/null
+++ b/components/buttons/tsconfig.json
@@ -0,0 +1,42 @@
+{
+ "compilerOptions": {
+ "allowUnreachableCode": false, // Disable unreachable code warnings.
+ "allowUnusedLabels": false, // Disable unused label warnings.
+ "declaration": true, // Generate .d.ts files.
+ "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing.
+ "jsx": "react-jsx", // Enable JSX syntax support.
+ "module": "ESNext", // Use ESNext module system.
+ "moduleResolution": "Node", // Resolve modules using Node-style resolution.
+ "noEmitOnError": true, // Prevent emitting JS files if there are errors.
+ "noFallthroughCasesInSwitch": true, // Prevent fallthrough in switch cases.
+ "noImplicitAny": true, // Disallow implicit any types.
+ "noImplicitReturns": true, // Ensure functions return a value.
+ "noUnusedLocals": true, // Warn on unused local variables.
+ "noUnusedParameters": true, // Warn on unused function parameters.
+ "strict": true, // Enable all strict checks.
+ "strictBindCallApply": true, // Enable strict checking of bind, call, and apply methods.
+ "strictFunctionTypes": true, // Enable strict checking of function types.
+ "strictNullChecks": true, // Enable strict null checks.
+ "skipLibCheck": true, // Skip checking of declaration files.
+ "sourceMap": true, // Generate source maps.
+ "target": "ES2020", // Set ECMAScript version to ES2020.
+ "types": [
+ "node",
+ "react",
+ "react-dom"
+ ], // Include type declarations.
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ] // Include libraries for ES2020 and DOM.
+ },
+ "exclude": [
+ "node_modules",
+ "dist",
+ "public",
+ "coverage",
+ "test-report"
+ ], // Exclude these directories from compilation.
+ "compileOnSave": false // Disable Compile-on-Save.
+}
diff --git a/components/inputs/CHANGELOG.md b/components/inputs/CHANGELOG.md
new file mode 100644
index 0000000..234d855
--- /dev/null
+++ b/components/inputs/CHANGELOG.md
@@ -0,0 +1,63 @@
+# Changelog
+
+## [Unreleased]
+
+## 29.2.4 (2025-05-14)
+
+### NumericTextBox
+
+The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns.
+
+Explore the demo here
+
+**Key features**
+
+- **Value constraints:** Set minimum and maximum allowed values to restrict user input within specific numeric ranges.
+
+- **Step configuration:** Define increment/decrement step size for precise value adjustments using spin buttons or keyboard controls.
+
+- **Spin buttons:** Optional increment and decrement buttons that allow users to adjust values without typing.
+
+- **Number formatting:** Comprehensive formatting options including decimal places, currency symbols, and percentage formatting.
+
+- **LabelMode** Implements floating label functionality with configurable behavior modes to enhance form usability.
+
+- **Keyboard navigation:** Enhanced keyboard support for incrementing/decrementing values using arrow keys.
+
+### TextArea
+
+The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems.
+
+Explore the demo here
+
+**Key features**
+
+- **Resizing options:** Supports multiple resize modes including Both, Horizontal, and Vertical to control how users can resize the input area.
+
+- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability.
+
+- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.
+
+- **Customizable dimensions:** Supports setting specific dimensions through rows and cols properties or through width styling.
+
+- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches.
+
+### TextBox
+
+The TextBox component provides a feature-rich input field for collecting user text input with enhanced styling options and validation states. It supports both controlled and uncontrolled input modes to fit various application requirements.
+
+Explore the demo here
+
+**Key features**
+
+- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.
+
+- **Sizes:** Provides size options (Small and Medium) to control the component's dimensions for different UI contexts.
+
+- **Color:** Supports different color schemes including Success, Warning, and Error to visually communicate validation states.
+
+- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability.
+
+- **Prefix and suffix:** Supports adding custom icons at the beginning or end of the input field for enhanced visual cues.
+
+- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches.
\ No newline at end of file
diff --git a/components/inputs/README.md b/components/inputs/README.md
new file mode 100644
index 0000000..aeb0027
--- /dev/null
+++ b/components/inputs/README.md
@@ -0,0 +1,99 @@
+# React Inputs Components
+
+## What's Included in the React Inputs Package
+
+The React Inputs package includes the following list of components.
+
+### React Numeric TextBox
+
+The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns.
+
+Explore the demo [here](https://react.syncfusion.com/numeric-textbox).
+
+**Key features**
+
+- **Value constraints:** Set minimum and maximum allowed values to restrict user input within specific numeric ranges.
+
+- **Step configuration:** Define increment/decrement step size for precise value adjustments using spin buttons or keyboard controls.
+
+- **Spin buttons:** Optional increment and decrement buttons that allow users to adjust values without typing.
+
+- **Number formatting:** Comprehensive formatting options including decimal places, currency symbols, and percentage formatting.
+
+- **LabelMode** Implements floating label functionality with configurable behavior modes to enhance form usability.
+
+- **Keyboard navigation:** Enhanced keyboard support for incrementing/decrementing values using arrow keys.
+
+### React TextArea
+
+The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems.
+
+Explore the demo [here](https://react.syncfusion.com/textarea).
+
+**Key features**
+
+- **Resizing options:** Supports multiple resize modes including Both, Horizontal, and Vertical to control how users can resize the input area.
+
+- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability.
+
+- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.
+
+- **Customizable dimensions:** Supports setting specific dimensions through rows and cols properties or through width styling.
+
+- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches.
+
+### React TextBox
+
+The TextBox component provides a feature-rich input field for collecting user text input with enhanced styling options and validation states. It supports both controlled and uncontrolled input modes to fit various application requirements.
+
+Explore the demo [here](https://react.syncfusion.com/textbox).
+
+**Key features**
+
+- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.
+
+- **Sizes:** Provides size options (Small and Medium) to control the component's dimensions for different UI contexts.
+
+- **Color:** Supports different color schemes including Success, Warning, and Error to visually communicate validation states.
+
+- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability.
+
+- **Prefix and suffix:** Supports adding custom icons at the beginning or end of the input field for enhanced visual cues.
+
+- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches.
+
+
+Trusted by the world's leading companies
+
+
+
+
+
+## Setup
+
+To install `inputs` and its dependent packages, use the following command,
+
+```sh
+npm install @syncfusion/react-inputs
+```
+
+## Support
+
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* Live chat
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/inputs/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
+
+© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
diff --git a/components/inputs/gulpfile.js b/components/inputs/gulpfile.js
new file mode 100644
index 0000000..b1bf280
--- /dev/null
+++ b/components/inputs/gulpfile.js
@@ -0,0 +1,52 @@
+var gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+
+/**
+ * Compile ts files
+ */
+gulp.task('scripts', function(done) {
+ var ts = require('gulp-typescript');
+ var tsProject = ts.createProject('./tsconfig.json', {
+ typescript: require('typescript'),
+ declaration: true
+ });
+ var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' })
+ .pipe(tsProject());
+ tsResult.js.pipe(gulp.dest('./'))
+ .on('end', function() {
+ tsResult.dts.pipe(gulp.dest('./'))
+ .on('end', function() {
+ done();
+ });
+ });
+});
+
+/**
+ * Compile styles
+ */
+let isCompiled = true;
+gulp.task('styles', function (done) {
+ var styles = './styles/**/*.scss';
+ return gulp.src(styles, { base: './' })
+ .pipe(sass({
+ outputStyle: 'expanded',
+ includePaths: "./node_modules/@syncfusion/"
+ }).on('error', function (error) {
+ isCompiled = false;
+ console.log(error);
+ this.emit('end');
+ }))
+ .pipe(gulp.dest('.'))
+ .on('end', function () {
+ if (!isCompiled) {
+ process.exit(1);
+ }
+ done();
+ });
+});
+
+/**
+ * Build ts and scss files
+ */
+gulp.task('build', gulp.series('scripts', 'styles'));
+
diff --git a/components/inputs/license b/components/inputs/license
new file mode 100644
index 0000000..af45e1a
--- /dev/null
+++ b/components/inputs/license
@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/components/inputs/package.json b/components/inputs/package.json
new file mode 100644
index 0000000..0fbc3cd
--- /dev/null
+++ b/components/inputs/package.json
@@ -0,0 +1,91 @@
+{
+ "name": "@syncfusion/react-inputs",
+ "version": "29.2.4",
+ "description": "A package of Pure react input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "keywords": [
+ "syncfusion",
+ "web-components",
+ "react",
+ "syncfusion-react",
+ "react-inputs",
+ "input box",
+ "textbox",
+ "html5 textbox",
+ "floating input",
+ "floating label",
+ "form controls",
+ "input controls",
+ "color",
+ "color picker",
+ "colorpicker",
+ "picker",
+ "palette",
+ "hsv colorpicker",
+ "alpha colorpicker",
+ "color palette",
+ "custom palette",
+ "react colorpicker",
+ "color chooser",
+ "validator",
+ "form",
+ "form validator",
+ "masked textbox",
+ "masked input",
+ "input mask",
+ "date mask",
+ "mask format",
+ "numeric textbox",
+ "percent textbox",
+ "percentage textbox",
+ "currency textbox",
+ "numeric spinner",
+ "numeric up-down",
+ "number input",
+ "slider",
+ "range slider",
+ "minrange",
+ "slider limits",
+ "localization slider",
+ "format slider",
+ "slider with tooltip",
+ "vertical slider",
+ "mobile slider",
+ "upload",
+ "upload-box",
+ "input-file",
+ "floating-label",
+ "chunk-upload"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/react-ui-components.git"
+ },
+ "homepage": "https://www.syncfusion.com/react-ui-components",
+ "module": "./index.js",
+ "readme": "README.md",
+ "dependencies": {
+ "@syncfusion/react-base": "~29.2.4",
+ "@syncfusion/react-buttons": "~29.2.4",
+ "@syncfusion/react-popups": "~29.2.4",
+ "@syncfusion/react-splitbuttons": "~29.2.4"
+ },
+ "devDependencies": {
+ "gulp": "4.0.2",
+ "gulp-typescript": "5.0.1",
+ "typescript": "5.7.2",
+ "gulp-sass": "5.1.0",
+ "sass": "1.83.1",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
+ "@types/react": "19.0.1",
+ "@types/react-dom": "19.0.1",
+ "@types/node": "^22.15.17"
+ },
+ "scripts": {
+ "build": "gulp build"
+ },
+ "typings": "index.d.ts",
+ "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/inputs/src/common/index.ts b/components/inputs/src/common/index.ts
new file mode 100644
index 0000000..23adac8
--- /dev/null
+++ b/components/inputs/src/common/index.ts
@@ -0,0 +1,4 @@
+/**
+ * input base modules
+ */
+export * from './inputbase';
diff --git a/components/inputs/src/common/inputbase.tsx b/components/inputs/src/common/inputbase.tsx
new file mode 100644
index 0000000..4cde470
--- /dev/null
+++ b/components/inputs/src/common/inputbase.tsx
@@ -0,0 +1,204 @@
+import { ChangeEvent, useCallback, JSX, FocusEvent, KeyboardEvent as ReactKeyboardEvent, forwardRef } from 'react';
+import { SvgIcon } from '@syncfusion/react-base';
+
+/**
+ * Constant object containing CSS class names used throughout the component.
+ */
+
+export const CLASS_NAMES: {
+ RTL: string;
+ DISABLE: string;
+ WRAPPER: string;
+ INPUT: string;
+ INPUTGROUP: string;
+ FLOATINPUT: string;
+ FLOATLINE: string;
+ FLOATTEXT: string;
+ CLEARICON: string;
+ CLEARICONHIDE: string;
+ LABELTOP: string;
+ LABELBOTTOM: string;
+ VALIDINPUT: string;
+ TEXTBOX_FOCUS: string;
+} = {
+ RTL: 'sf-rtl',
+ DISABLE: 'sf-disabled',
+ WRAPPER: 'sf-control-wrapper',
+ INPUT: 'sf-input',
+ INPUTGROUP: 'sf-input-group',
+ FLOATINPUT: 'sf-float-input',
+ FLOATLINE: 'sf-float-line',
+ FLOATTEXT: 'sf-float-text',
+ CLEARICON: 'sf-clear-icon',
+ CLEARICONHIDE: 'sf-clear-icon-hide',
+ LABELTOP: 'sf-label-top',
+ LABELBOTTOM: 'sf-label-bottom',
+ VALIDINPUT: 'sf-valid-input',
+ TEXTBOX_FOCUS: 'sf-input-focus'
+};
+
+export interface IInput {
+ placeholder: string;
+ className: string;
+ disabled?: boolean;
+ readOnly?: boolean;
+ floatLabelType?: FloatLabelType;
+ onChange: (event: ChangeEvent) => void;
+}
+
+/**
+ * Represents the behavior options for floating labels in form fields.
+ *
+ * @enum {string}
+ */
+export enum FloatLabel {
+ /**
+ * Label never floats, remains in its default position regardless of field state.
+ */
+ Never = 'Never',
+
+ /**
+ * Label always appears in the floating position, regardless of field state.
+ */
+ Always = 'Always',
+
+ /**
+ * Label automatically floats when the field has content or is focused,
+ * and returns to default position when empty and not focused.
+ */
+ Auto = 'Auto'
+}
+
+/**
+ * Type definition for float label type.
+ */
+export type FloatLabelType = FloatLabel | string;
+
+/**
+ * Interface for input arguments.
+ */
+export interface IInputArgs {
+ customTag?: string;
+ floatLabelType?: FloatLabelType;
+ placeholder?: string;
+ width?: number | string;
+ value?: string;
+ defaultValue?: string;
+ type?: string;
+ role?: string;
+ name?: string;
+ tabIndex?: number;
+ onChange?: (event: ChangeEvent) => void;
+ onFocus?: any;
+ onBlur?: any;
+ onKeyDown?: any;
+}
+
+export type InputArgs = IInputArgs & Omit, keyof IInputArgs>;
+
+export const InputBase: React.ForwardRefExoticComponent> =
+ forwardRef(({
+ type, readOnly = false, disabled = false, floatLabelType = 'Never', onFocus, className = '',
+ onBlur, placeholder, onKeyDown, value, defaultValue, onChange, ...rest
+ }: InputArgs, ref: React.ForwardedRef) => {
+ const inputClassNames: () => string = () => {
+ return classArray.join(' ');
+ };
+
+ const classArray: string[] = [CLASS_NAMES.INPUT, className];
+
+ const handleFocus: (event: FocusEvent) => void = useCallback((event: FocusEvent) => {
+ if (onFocus) {
+ onFocus(event);
+ }
+ }, [onFocus]);
+
+ const handleBlur: (event: FocusEvent) => void = useCallback((event: FocusEvent) => {
+ if (onBlur) {
+ onBlur(event);
+ }
+ }, [onBlur]);
+
+ const handleKeyDown: (event: ReactKeyboardEvent) => void = (event: ReactKeyboardEvent) => {
+ if (onKeyDown) {
+ onKeyDown(event);
+ }
+ };
+
+ const handleChange: (event: ChangeEvent) => void = useCallback((event: ChangeEvent) => {
+ if (onChange) {
+ onChange(event);
+ }
+ }, [onChange]);
+
+ const isControlled: boolean = value !== undefined;
+ const inputValue: {
+ value: string | undefined;
+ defaultValue?: undefined;
+ } | {
+ defaultValue: string | undefined;
+ value?: undefined;
+ } = isControlled ? { value } : { defaultValue };
+
+ return (
+
+ );
+ });
+
+/**
+ * Renders the float label element.
+ *
+ * @param {FloatLabelType} floatLabelType - The type of float label.
+ * @param {boolean} isFocused - Whether the input is focused.
+ * @param {string} inputValue - The current input value.
+ * @param {string} placeholder - The placeholder text.
+ * @param {any} id - The reference to the input element.
+ * @returns {React.ReactElement | null} A React element representing the float label, or null if not applicable.
+ */
+export const renderFloatLabelElement: (floatLabelType: FloatLabelType,
+ isFocused: boolean, inputValue: string | number, placeholder: string | undefined,
+ id: string) => React.ReactElement | null = (
+ floatLabelType: FloatLabelType,
+ isFocused: boolean,
+ inputValue: string | number,
+ placeholder: string = '',
+ id: string
+): React.ReactElement | null => {
+ if (floatLabelType === 'Never') {return null; }
+ return (
+ <>
+
+
+ {placeholder}
+
+ >
+ );
+};
+
+export const renderClearButton: (inputValue: string, clearInput: () => void) => JSX.Element =
+(inputValue: string, clearInput: () => void) => (
+
+
+
+);
diff --git a/components/inputs/src/index.ts b/components/inputs/src/index.ts
new file mode 100644
index 0000000..adc54f2
--- /dev/null
+++ b/components/inputs/src/index.ts
@@ -0,0 +1,7 @@
+/**
+ * NumericTextBox all modules
+ */
+export * from './numerictextbox/index';
+export * from './textbox/index';
+export * from './textarea/index';
+export * from './common/index';
diff --git a/components/inputs/src/numerictextbox/index.ts b/components/inputs/src/numerictextbox/index.ts
new file mode 100644
index 0000000..f3b3034
--- /dev/null
+++ b/components/inputs/src/numerictextbox/index.ts
@@ -0,0 +1,4 @@
+/**
+ * NumericTextBox modules
+ */
+export * from './numerictextbox';
diff --git a/components/inputs/src/numerictextbox/numerictextbox.tsx b/components/inputs/src/numerictextbox/numerictextbox.tsx
new file mode 100644
index 0000000..c3f4f87
--- /dev/null
+++ b/components/inputs/src/numerictextbox/numerictextbox.tsx
@@ -0,0 +1,571 @@
+import { useRef, useState, useCallback, useEffect, forwardRef, Ref, useImperativeHandle, useMemo } from 'react';
+import { InputBase, renderFloatLabelElement, renderClearButton, FloatLabelType, CLASS_NAMES } from '../common/inputbase';
+import { IL10n, isNullOrUndefined, L10n, preRender, RippleEffect, SvgIcon, useProviderContext, useRippleEffect } from '@syncfusion/react-base';
+import { formatUnit } from '@syncfusion/react-base';
+import { getNumberFormat, getNumberParser } from '@syncfusion/react-base';
+import { getUniqueID } from '@syncfusion/react-base';
+import { Size } from '../textbox/textbox';
+
+
+const ROOT: string = 'sf-numeric';
+const SPINICON: string = 'sf-input-group-icon';
+const SPINUP: string = 'sf-spin-up';
+const SPINDOWN: string = 'sf-spin-down';
+
+export interface NumericTextBoxProps {
+
+ /**
+ * Sets the value of the NumericTextBox. When provided, component becomes controlled.
+ *
+ * @default null
+ */
+ value?: number | null;
+
+ /**
+ * Sets the default value of the NumericTextBox for uncontrolled mode.
+ *
+ * @default -
+ */
+ defaultValue?: number | null;
+
+ /**
+ * Specifies a minimum value that is allowed a user can enter.
+ *
+ * @default -
+ */
+ min?: number;
+
+ /**
+ * Specifies a maximum value that is allowed a user can enter.
+ *
+ * @default -
+ */
+ max?: number;
+
+ /**
+ * Specifies the incremental or decremental step size for the NumericTextBox.
+ *
+ * @default 1
+ */
+ step?: number;
+
+ /**
+ * Gets or sets the string shown as a hint/placeholder when the NumericTextBox is empty.
+ *
+ * @default -
+ */
+ placeholder?: string;
+
+ /**
+ * Determines whether to show increment and decrement buttons (spin buttons) within the input field.
+ * When enabled, up/down buttons appear that allow users to increment or decrement
+ * the numeric value in the input by a predefined step
+ *
+ * @default true
+ */
+ spinButton?: boolean;
+
+ /**
+ * Determines whether to show a clear button within the input field.
+ * When enabled, a clear button (×) appears when the field has a value,
+ * allowing users to quickly clear the input with a single click.
+ *
+ * @default false
+ */
+ clearButton?: boolean;
+
+ /**
+ * Specifies the number format that indicates the display format for the value of the NumericTextBox.
+ *
+ * @default 'n2'
+ */
+ format?: string;
+
+ /**
+ * Specifies the number precision applied to the textbox value when the NumericTextBox is focused.
+ *
+ * @default -
+ */
+ decimals?: number;
+
+ /**
+ * Specifies the currency code to use in currency formatting.
+ * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro.
+ *
+ * @default -
+ */
+ currency?: string;
+
+ /**
+ * Specifies the currency code to use in currency formatting.
+ * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro.
+ *
+ * @default -
+ * @private
+ */
+ currencyCode?: string;
+
+ /**
+ * Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range.
+ * If it is true, the input value will be restricted between the min and max range.
+ * The typed value gets modified to fit the range on focused out state.
+ * Else, it allows any value even out of range value,
+ *
+ * @default true
+ */
+ strictMode?: boolean;
+
+ /**
+ * Specifies whether the decimals length should be restricted during typing.
+ *
+ * @default false
+ */
+ validateOnType?: boolean;
+
+ /**
+ * Defines the floating label type for the component.
+ *
+ * @default 'Never'
+ */
+ labelMode?: FloatLabelType;
+
+ /**
+ * Triggers when the value of the NumericTextBox changes.
+ * The change event of the NumericTextBox component will be triggered in the following scenarios:
+ * * Changing the previous value using keyboard interaction and then focusing out of the component.
+ * * Focusing on the component and scrolling within the input.
+ * * Changing the value using the spin buttons.
+ * * Programmatically changing the value using the value property.
+ *
+ * @event onChange
+ */
+ onChange?: (args : React.ChangeEvent, value: number | null) => void;
+
+ /**
+ * The size configuration of the component.
+ *
+ * @default Size.Medium
+ */
+ size?: Size;
+}
+
+export interface INumericTextBox extends NumericTextBoxProps{
+
+ /**
+ * This is NumericTextBox component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLInputElement | null;
+}
+
+type INumericTextBoxProps = NumericTextBoxProps & Omit, keyof NumericTextBoxProps>;
+
+/**
+ * NumericTextBox component that provides a specialized input for numeric values with validation,
+ * formatting, and increment/decrement capabilities. Supports both controlled and uncontrolled modes.
+ *
+ * ```typescript
+ *
+ * ```
+ */
+export const NumericTextBox: React.ForwardRefExoticComponent> =
+forwardRef((props: INumericTextBoxProps, ref: Ref) => {
+ const {
+ min = -(Number.MAX_VALUE),
+ max = Number.MAX_VALUE,
+ step = 1,
+ value,
+ defaultValue = null,
+ id = getUniqueID('numeric_'),
+ placeholder = '',
+ spinButton = true,
+ clearButton = false,
+ format = 'n2',
+ decimals = null,
+ strictMode = true,
+ validateOnType = false,
+ labelMode = 'Never',
+ disabled = false,
+ readOnly = false,
+ currency = null,
+ width = null,
+ className = '',
+ size,
+ onChange,
+ onFocus,
+ onBlur,
+ ...otherProps
+ } = props;
+
+ const isControlled: boolean = value !== undefined;
+ const uniqueId: string = useRef(id).current;
+ const currentValueRef: React.RefObject = useRef(defaultValue);
+ const [inputValue, setInputValue] = useState(
+ isControlled ? (value ?? null) : (defaultValue ?? null)
+ );
+ const [isFocused, setIsFocused] = useState(false);
+ const [previousValue, setPreviousValue] = useState(isControlled ? (value ?? null) : (defaultValue ?? null));
+
+ const { locale, dir, ripple } = useProviderContext();
+ const rippleRef1: RippleEffect = useRippleEffect(ripple, { duration: 500, isCenterRipple: true });
+ const rippleRef2: RippleEffect = useRippleEffect(ripple, { duration: 500, isCenterRipple: true });
+ const inputRef: React.RefObject = useRef(null);
+
+ const publicAPI: Partial = {
+ min,
+ max,
+ step,
+ clearButton,
+ spinButton,
+ format,
+ strictMode,
+ validateOnType,
+ labelMode,
+ disabled,
+ readOnly
+ };
+ const spinUp: string = 'M20.7929 17H3.20712C2.76167 17 2.53858 16.4615 2.85356 16.1465L11.6465 7.3536C11.8417 7.15834 12.1583 7.15834 12.3536 7.3536L21.1465 16.1465C21.4614 16.4615 21.2384 17 20.7929 17Z';
+ const spinDown: string = 'M20.7929 7H3.20712C2.76167 7 2.53858 7.53857 2.85356 7.85355L11.6465 16.6464C11.8417 16.8417 12.1583 16.8417 12.3536 16.6464L21.1465 7.85355C21.4614 7.53857 21.2384 7 20.7929 7Z';
+ const getContainerClassNames: () => string = () => {
+ return classNames(
+ ROOT,
+ CLASS_NAMES.INPUTGROUP,
+ CLASS_NAMES.WRAPPER,
+ labelMode !== 'Never' ? CLASS_NAMES.FLOATINPUT : '',
+ className,
+ (dir === 'rtl') ? CLASS_NAMES.RTL : '',
+ disabled ? CLASS_NAMES.DISABLE : '',
+ isFocused ? CLASS_NAMES.TEXTBOX_FOCUS : '',
+ (!isNullOrUndefined(currentValueRef.current) && labelMode !== 'Always') ? CLASS_NAMES.VALIDINPUT : '',
+ size && size.toLowerCase() !== 'medium' ? `sf-${size.toLowerCase()}` : ''
+ );
+ };
+
+ const spinSize: string = size?.toLocaleLowerCase() === 'small' ? '12' : '14';
+
+ const setPlaceholder: string = useMemo(() => {
+ const l10n: IL10n = L10n('numerictextbox', { placeholder: placeholder }, locale);
+ l10n.setLocale(locale);
+ return l10n.getConstant('placeholder');
+ }, [locale, placeholder]);
+
+ useEffect(() => {
+ preRender('numerictextbox');
+ }, []);
+
+ useEffect(() => {
+ if (isControlled) {
+ setInputValue(value as number | null);
+ setPreviousValue(inputValue);
+ currentValueRef.current = value as number | null;
+ }
+ }, [value, isControlled, inputValue]);
+
+ useEffect(() => {
+ if (!isControlled && defaultValue !== null) {
+ currentValueRef.current = defaultValue;
+ }
+ }, [isControlled, defaultValue]);
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as INumericTextBox,
+ element: inputRef.current
+ }), [publicAPI]);
+
+ const trimValue: (value: number) => number = useCallback((value: number): number => {
+ if (value > max) {
+ return max;
+ }
+ if (value < min) {
+ return min;
+ }
+ return value;
+ }, [min, max]);
+
+ const roundNumber: (value: number, precision: number) => number = useCallback((value: number, precision: number): number => {
+ const multiplier: number = Math.pow(10, precision || 0);
+ return Math.round(value * multiplier) / multiplier;
+ }, []);
+
+ const classNames: (...classes: string[]) => string = (...classes: string[]) => {
+ return classes.filter(Boolean).join(' ');
+ };
+
+ const containerClassNames: string = getContainerClassNames();
+
+ const getNumberOfDecimals: (value: number) => number = useCallback((value: number): number => {
+ if (decimals !== null) {
+ return decimals;
+ }
+ let numberOfDecimals: number;
+ const EXPREGEXP: RegExp = new RegExp('[eE][\\-+]?([0-9]+)');
+ let valueString: string = value.toString();
+ if (EXPREGEXP.test(valueString)) {
+ const result: RegExpExecArray | null = EXPREGEXP.exec(valueString);
+ if (result) {
+ valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));
+ }
+ }
+ const decimalPart: string | undefined = valueString.split('.')[1];
+ numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;
+ if (decimals !== null) {
+ numberOfDecimals = Math.min(numberOfDecimals, decimals);
+ }
+ return Math.min(numberOfDecimals, 20);
+ }, [decimals]);
+
+ const formatNumber: (value: number | null) => string = useCallback((value: number | null): string => {
+ if (value === null || value === undefined) { return ''; }
+ try {
+ if (isFocused && format.toLowerCase().includes('p')) {
+ const percentValue: number = Math.round((value * 100) * 1e12) / 1e12;
+ const numberOfDecimals: number = getNumberOfDecimals(percentValue);
+ return percentValue.toFixed(numberOfDecimals);
+ }
+ else if (isFocused) {
+ if (typeof value === 'number') {
+ if (Number.isInteger(value)) {
+ return value.toString();
+ }
+ const strValue: string = value.toString();
+ return strValue.replace(/\.?0+$/, '');
+ }
+ return String(value);
+ }
+
+ const numberOfDecimals: number = getNumberOfDecimals(value);
+ return getNumberFormat(locale, {
+ format: format,
+ maximumFractionDigits: numberOfDecimals,
+ minimumFractionDigits: numberOfDecimals,
+ useGrouping: format.toLowerCase().includes('n'),
+ currency: currency
+ })(value);
+ } catch (error) {
+ return value.toFixed(2);
+ }
+ }, [format, currency, isFocused, getNumberOfDecimals]);
+
+ const updateValue: (newValue: number | null, e?: React.ChangeEvent | Event) => void =
+ useCallback((newValue: number | null, e?: React.ChangeEvent | Event) => {
+ currentValueRef.current = newValue;
+ if (!isControlled) {
+ setInputValue(newValue);
+ }
+ if (previousValue !== newValue) {
+ setPreviousValue(inputValue);
+ }
+
+ if (onChange) {
+ onChange(e as React.ChangeEvent, newValue);
+ }
+
+ }, [inputValue, onChange, isControlled, formatNumber]);
+
+ const handleChange: (e: React.ChangeEvent) => void =
+ useCallback((e: React.ChangeEvent) => {
+ const parsedValue: number | null = getNumberParser(locale, { format: format })(e.target.value);
+ let newValue: number | null | undefined = Number.isNaN(parsedValue) ? 0 : parsedValue;
+ if (strictMode && newValue !== null) {
+ newValue = trimValue(newValue as number);
+ }
+ if (validateOnType && decimals !== null && newValue !== null) {
+ newValue = roundNumber(newValue as number, decimals);
+ }
+ updateValue(newValue as number, e);
+ }, [strictMode, validateOnType, decimals, format, trimValue, roundNumber, inputValue, updateValue]);
+
+ const handleSpinClick: (increments: boolean) => void = (increments: boolean) => {
+ if (disabled || readOnly) {
+ return;
+ }
+ if (increments) {
+ increment();
+ } else {
+ decrement();
+ }
+ };
+
+ const handleFocus: (e: React.FocusEvent) => void = useCallback((e: React.FocusEvent) => {
+ setIsFocused(true);
+ if (onFocus) {
+ onFocus(e);
+ }
+ }, [onFocus, formatNumber]);
+
+ const handleBlur: (e: React.FocusEvent) => void = useCallback((e: React.FocusEvent) => {
+ setIsFocused(false);
+ let newValue: number | null | undefined;
+ if (e.currentTarget.value === '') {
+ newValue = null;
+ } else {
+ newValue = getNumberParser(locale, { format: format })(e.currentTarget.value);
+ if (isNaN(newValue as number)) {
+ newValue = currentValueRef.current;
+ }
+ if (validateOnType && decimals !== null && newValue !== null) {
+ newValue = roundNumber(newValue as number, decimals);
+ }
+ if (strictMode && newValue !== null) {
+ newValue = trimValue(newValue as number);
+ }
+ }
+
+ updateValue(newValue as number, e);
+
+ if (onBlur) {
+ onBlur(e);
+ }
+ }, [format, decimals, validateOnType, strictMode, roundNumber, updateValue, onBlur]);
+
+ const adjustValue: (isIncrement: boolean) => void = useCallback((isIncrement: boolean) => {
+ const adjustment: number = isIncrement ? step : -step;
+ let newValue: number = ((currentValueRef.current === null ||
+ currentValueRef.current === undefined) ? 0 : currentValueRef.current) + adjustment;
+ let precision: number = 10;
+ if (format.toLowerCase().includes('p')) {
+ const match: RegExpMatchArray | null = format.match(/p(\d+)/i);
+ if (match && match[1]) {
+ precision = parseInt(match[1], 10) + 2;
+ }
+ } else {
+ const stepStr: string = step.toString();
+ const decimalIndex: number = stepStr.indexOf('.');
+ if (decimalIndex !== -1) {
+ precision = stepStr.length - decimalIndex - 1;
+ }
+ }
+ newValue = parseFloat(newValue.toFixed(precision));
+ if (strictMode) {
+ if (isIncrement) {
+ newValue = Math.min(newValue, max);
+ newValue = newValue > min ? newValue : min;
+ } else {
+ newValue = Math.max(newValue, min);
+ }
+ }
+ updateValue(newValue);
+ }, [step, max, min, strictMode, updateValue, format]);
+
+ const increment: () => void = useCallback(() => {
+ adjustValue(true);
+ }, [adjustValue]);
+
+ const decrement: () => void = useCallback(() => {
+ adjustValue(false);
+ }, [adjustValue]);
+
+ const handleKeyDown: (e: React.KeyboardEvent) => void = useCallback((e: React.KeyboardEvent) => {
+ if (
+ !/[0-9.-]/.test(e.key) &&
+ !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown'].includes(e.key)
+ ) {
+ e.preventDefault();
+ }
+
+ if (!readOnly) {
+ switch (e.key) {
+ case 'ArrowUp':
+ e.preventDefault();
+ increment();
+ break;
+ case 'ArrowDown':
+ e.preventDefault();
+ decrement();
+ break;
+ case 'Enter': {
+ e.preventDefault();
+ const parsedValue: number = getNumberParser(locale, { format: format })(e.currentTarget.value);
+ let newValue: number | null = Number.isNaN(parsedValue) ? currentValueRef.current : parsedValue;
+
+ if (strictMode && newValue !== null) {
+ newValue = trimValue(newValue);
+ }
+
+ updateValue(newValue);
+ }
+ break;
+ default: break;
+ }
+ }
+ }, [increment, decrement, strictMode, trimValue, updateValue, readOnly, format]);
+
+ const clearValue: () => void = useCallback(() => {
+ updateValue(null);
+ }, [updateValue]);
+
+ const displayValue: string = formatNumber(
+ isControlled ? value as number : inputValue
+ );
+
+ return (
+
+ }
+ className={'sf-control sf-numerictextbox sf-lib sf-input'}
+ onChange={handleChange}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ {...otherProps}
+ role="spinbutton"
+ aria-label="numerictextbox"
+ onKeyDown={handleKeyDown}
+ floatLabelType={labelMode}
+ placeholder={setPlaceholder}
+ aria-valuemin={min}
+ aria-valuemax={max}
+ value={displayValue}
+ aria-valuenow={currentValueRef.current || undefined}
+ tabIndex={0}
+ disabled={disabled}
+ readOnly={readOnly}
+ />
+ {renderFloatLabelElement(
+ labelMode,
+ isFocused,
+ displayValue || '',
+ setPlaceholder,
+ uniqueId
+ )}
+ {clearButton && renderClearButton(
+ currentValueRef.current ? currentValueRef.current.toString() : '',
+ clearValue
+ )}
+ {spinButton && (
+ <>
+ ) => {
+ rippleRef1.rippleMouseDown(e);
+ e.preventDefault();
+ }}
+ onClick={() => handleSpinClick(false)}
+ title="Decrement value"
+ >
+
+ {ripple && }
+
+ ) => {
+ rippleRef2.rippleMouseDown(e);
+ e.preventDefault();
+ }}
+ onClick={() => handleSpinClick(true)}
+ title="Increment value"
+ >
+
+ {ripple && }
+
+ >
+ )}
+
+ );
+});
+
+export default NumericTextBox;
diff --git a/components/inputs/src/textarea/index.ts b/components/inputs/src/textarea/index.ts
new file mode 100644
index 0000000..f80acf7
--- /dev/null
+++ b/components/inputs/src/textarea/index.ts
@@ -0,0 +1,4 @@
+/**
+ * textarea modules
+ */
+export * from './textarea';
diff --git a/components/inputs/src/textarea/textarea.tsx b/components/inputs/src/textarea/textarea.tsx
new file mode 100644
index 0000000..ed3a588
--- /dev/null
+++ b/components/inputs/src/textarea/textarea.tsx
@@ -0,0 +1,330 @@
+import * as React from 'react';
+import { forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { CLASS_NAMES, FloatLabelType, renderClearButton, renderFloatLabelElement } from '../common/inputbase';
+import { getUniqueID, IL10n, L10n, preRender, useProviderContext } from '@syncfusion/react-base';
+import { Variant } from '../textbox/textbox';
+
+
+/**
+ * Constant for horizontal resize mode
+ */
+const RESIZE_X: string = 'sf-resize-x';
+
+/**
+ * Constant for vertical resize mode
+ */
+const RESIZE_Y: string = 'sf-resize-y';
+
+/**
+ * Constant for both horizontal and vertical resize mode
+ */
+const RESIZE_XY: string = 'sf-resize-xy';
+
+/**
+ * Constant for no resize mode
+ */
+const RESIZE_NONE: string = 'sf-resize-none';
+
+/**
+ * Constant for multi-line input class
+ */
+const MULTILINE: string = 'sf-multi-line-input';
+
+/**
+ * Constant for auto-width class
+ */
+const AUTOWIDTH: string = 'sf-auto-width';
+
+/**
+ * Defines the available resize modes for components that support resizing.
+ *
+ * @enum {string}
+ */
+export enum ResizeMode {
+ /**
+ * Disables resizing functionality.
+ */
+ None = 'None',
+
+ /**
+ * Enables resizing in both horizontal and vertical directions.
+ */
+ Both = 'Both',
+
+ /**
+ * Enables resizing only in the horizontal direction.
+ */
+ Horizontal = 'Horizontal',
+
+ /**
+ * Enables resizing only in the vertical direction.
+ */
+ Vertical = 'Vertical'
+}
+
+
+export interface TextAreaProps {
+ /**
+ * Sets the value of the component. When provided, the component will be controlled.
+ *
+ * @default -
+ */
+ value?: string;
+
+ /**
+ * Sets the default value of the component. Used for uncontrolled mode.
+ *
+ * @default -
+ */
+ defaultValue?: string;
+
+ /**
+ * Defines the floating label type for the component.
+ *
+ * @default 'Never'
+ */
+ labelMode?: FloatLabelType;
+
+ /**
+ * Sets the placeholder text for the component.
+ *
+ * @default -
+ */
+ placeholder?: string;
+
+ /**
+ * Resize mode for the textarea
+ *
+ * @default 'Both'
+ */
+ resizeMode?: ResizeMode;
+
+ /**
+ * Number of columns for the textarea
+ *
+ * @default -
+ */
+ cols?: number;
+
+ /**
+ * Determines whether to show a clear button within the input field.
+ * When enabled, a clear button (×) appears when the field has a value,
+ * allowing users to quickly clear the input with a single click.
+ *
+ * @default false
+ */
+ clearButton?: boolean;
+
+ /**
+ * Number of rows for the textarea
+ *
+ * @default 2
+ */
+ rows?: number;
+
+ /**
+ * Callback fired when the input value is changed.
+ *
+ * @event onChange
+ * @param {React.ChangeEvent} event - The change event object containing the new value.
+ * @returns {void}
+ */
+ onChange?: (event: React.ChangeEvent) => void;
+
+ /**
+ * The visual style variant of the component.
+ *
+ * @default Variant.Standard
+ */
+ variant?: Variant;
+}
+
+export interface ITextArea extends TextAreaProps {
+ /**
+ * This is TextArea component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLTextAreaElement | null;
+}
+
+type ITextAreaProps = TextAreaProps & Omit, keyof TextAreaProps>;
+
+/**
+ * TextArea component that provides a multi-line text input field with enhanced functionality.
+ * Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop.
+ *
+ * ```typescript
+ *
+ * ```
+ */
+export const TextArea: React.ForwardRefExoticComponent> =
+forwardRef((props: ITextAreaProps, ref: Ref) => {
+ const {
+ readOnly = false,
+ value,
+ defaultValue,
+ labelMode = 'Never',
+ placeholder = '',
+ disabled = false,
+ width,
+ resizeMode = ResizeMode.Both,
+ maxLength,
+ cols = null,
+ rows = null,
+ clearButton = false,
+ className = '',
+ variant,
+ onChange,
+ onBlur,
+ onFocus,
+ ...rest
+ } = props;
+
+ const isControlled: boolean = value !== undefined;
+
+ const [uncontrolledValue, setUncontrolledValue] = useState(
+ defaultValue || ''
+ );
+
+ const displayValue: string | undefined = isControlled ? value : uncontrolledValue;
+
+ const [isFocused, setIsFocused] = useState(false);
+ const id: string = useMemo(() => rest.id || getUniqueID('textArea_'), [rest.id]);
+ const elementRef: React.RefObject = useRef(null);
+ const { locale, dir } = useProviderContext();
+
+ const publicAPI: Partial = {
+ clearButton,
+ labelMode,
+ disabled,
+ readOnly,
+ resizeMode
+ };
+
+ useEffect(() => {
+ preRender('textarea');
+ }, []);
+
+ useEffect(() => {
+ if (isControlled) {
+ setUncontrolledValue(value || '');
+ }
+ }, [isControlled, value]);
+
+ const getContainerClassNames: () => string = () => {
+ return classNames(
+ CLASS_NAMES.INPUTGROUP,
+ CLASS_NAMES.WRAPPER,
+ labelMode !== 'Never' ? CLASS_NAMES.FLOATINPUT : '',
+ MULTILINE,
+ className,
+ (dir === 'rtl') ? CLASS_NAMES.RTL : '',
+ disabled ? CLASS_NAMES.DISABLE : '',
+ isFocused ? CLASS_NAMES.TEXTBOX_FOCUS : '',
+ ((displayValue) !== '') ? CLASS_NAMES.VALIDINPUT : '',
+ variant && variant.toLowerCase() !== 'standard' ? variant.toLowerCase() === 'outlined' ? 'sf-outline' : `sf-${variant.toLowerCase()}` : '',
+ AUTOWIDTH
+ );
+ };
+
+ const setPlaceholder: string = useMemo(() => {
+ const l10n: IL10n = L10n('textarea', { placeholder: placeholder }, locale);
+ l10n.setLocale(locale);
+ return l10n.getConstant('placeholder');
+ }, [locale, placeholder]);
+
+ const classNames: (...classes: string[]) => string = (...classes: string[]) => {
+ return classes.filter(Boolean).join(' ');
+ };
+
+ const containerClassNames: string = getContainerClassNames();
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as ITextArea,
+ element: elementRef.current
+ }));
+
+ const handleChange: (event: React.ChangeEvent) => void =
+ useCallback((event: React.ChangeEvent) => {
+ const newValue: string = event.target.value;
+ if (!isControlled) {
+ setUncontrolledValue(newValue);
+ }
+ if (onChange) {
+ onChange(event as React.ChangeEvent);
+ }
+ }, [isControlled, onChange, uncontrolledValue, value]);
+
+ const handleFocus: (event: React.FocusEvent) => void =
+ useCallback((event: React.FocusEvent) => {
+ setIsFocused(true);
+ if (onFocus) {
+ onFocus(event);
+ }
+ }, [onFocus]);
+
+ const handleBlur: (event: React.FocusEvent) => void =
+ useCallback((event: React.FocusEvent) => {
+ setIsFocused(false);
+ if (onBlur) {
+ onBlur(event);
+ }
+ }, [onBlur]);
+
+ const clearValue: () => void = useCallback(() => {
+ if (!isControlled) {
+ setUncontrolledValue('');
+ }
+
+ if (onChange) {
+ onChange(event as unknown as React.ChangeEvent);
+ }
+ }, [onChange, isControlled, uncontrolledValue, value]);
+
+ const getCurrentResizeClass: (resizeMode: string) => string = (resizeMode: string) => {
+ return resizeMode === 'None' ? RESIZE_NONE : (resizeMode === 'Both' ? RESIZE_XY : resizeMode === 'Horizontal' ? RESIZE_X : RESIZE_Y );
+ };
+
+ return (
+
+
+ {renderFloatLabelElement(
+ labelMode,
+ isFocused || (displayValue) !== '',
+ (displayValue as string),
+ setPlaceholder,
+ id
+ )}
+ {clearButton && renderClearButton(
+ (displayValue) ? (displayValue).toString() : '',
+ clearValue
+ )}
+
+ );
+});
+
+export default TextArea;
diff --git a/components/inputs/src/textbox/index.ts b/components/inputs/src/textbox/index.ts
new file mode 100644
index 0000000..dcdbf04
--- /dev/null
+++ b/components/inputs/src/textbox/index.ts
@@ -0,0 +1,4 @@
+/**
+ * textbox modules
+ */
+export * from './textbox';
diff --git a/components/inputs/src/textbox/textbox.tsx b/components/inputs/src/textbox/textbox.tsx
new file mode 100644
index 0000000..f1e7610
--- /dev/null
+++ b/components/inputs/src/textbox/textbox.tsx
@@ -0,0 +1,323 @@
+
+import { useState, useCallback, useEffect, forwardRef, useImperativeHandle, useRef, ReactNode, useMemo} from 'react';
+import { getUniqueID, IL10n, L10n, preRender, useProviderContext } from '@syncfusion/react-base';
+import { CLASS_NAMES, FloatLabelType, InputBase, renderClearButton, renderFloatLabelElement } from '../common/inputbase';
+import * as React from 'react';
+
+
+/**
+ * Represents the available size options for the textbox component.
+ *
+ * @enum {string}
+ */
+export enum Size {
+ /** Small-sized textbox with reduced dimensions */
+ Small = 'Small',
+ /** Medium-sized textbox with reduced dimensions */
+ Medium = 'Medium',
+}
+
+/**
+ * Represents the available visual variants for the component.
+ *
+ * @enum {string}
+ */
+export enum Variant {
+ /** Outlined appearance with border and transparent background */
+ Outlined = 'Outlined',
+ /** Filled appearance with solid background color */
+ Filled = 'Filled',
+ /** Standard appearance without border and background color */
+ Standard = 'Standard'
+}
+
+/**
+ * Represents the available color schemes for the component.
+ *
+ * @enum {string}
+ */
+export enum Color {
+ /** Success color scheme (typically green) for positive actions or status */
+ Success = 'Success',
+ /** Warning color scheme (typically yellow/amber) for cautionary actions or status */
+ Warning = 'Warning',
+ /** Error color scheme (typically red) for negative actions or status */
+ Error = 'Error'
+}
+
+export interface TextBoxProps {
+ /**
+ * Sets the value of the component. When provided, the component will be controlled.
+ *
+ * @default -
+ */
+ value?: string;
+
+ /**
+ * Sets the default value of the component. Used for uncontrolled mode.
+ *
+ * @default -
+ */
+ defaultValue?: string;
+
+ /**
+ * Defines the floating label type for the component.
+ *
+ * @default 'Never'
+ */
+ labelMode?: FloatLabelType;
+
+ /**
+ * Sets the placeholder text for the component.
+ *
+ * @default -
+ */
+ placeholder?: string;
+
+ /**
+ * Specifies whether to display a clear button within the textbox.
+ * When enabled, a clear icon appears in the textbox that allows users
+ * to clear the input value with a single click.
+ *
+ * @default false
+ */
+ clearButton?: boolean;
+
+ /**
+ * Callback fired when the input value is changed.
+ *
+ * @event onChange
+ * @param {React.ChangeEvent} event - The change event object containing the new value.
+ * @returns {void}
+ */
+ onChange?: (event: React.ChangeEvent) => void;
+
+ /**
+ * The visual style variant of the component.
+ *
+ * @default Variant.Standard
+ */
+ variant?: Variant;
+
+ /**
+ * Specifies the size style of the textbox. Options include 'Small' and 'Medium'.
+ *
+ * @default Size.Medium
+ */
+ size?: Size;
+
+ /**
+ * Specifies the Color style of the textbox. Options include 'Warning', 'Success' and 'Error'.
+ *
+ * @default -
+ */
+ color?: Color;
+
+ /**
+ * Use this to add an icon at the beginning of the input.
+ *
+ * @default -
+ */
+ prefix?: string | ReactNode;
+
+ /**
+ * Use this to add an icon at the end of the input.
+ *
+ * @default -
+ */
+ suffix?: string | ReactNode;
+}
+
+export interface ITextBox extends TextBoxProps {
+ /**
+ * This is Textbox component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLInputElement | null;
+}
+
+type ITextBoxProps = TextBoxProps & Omit, keyof TextBoxProps>;
+
+/**
+ * TextBox component that provides a standard text input with extended functionality.
+ * Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop.
+ *
+ * ```typescript
+ *
+ * ```
+ */
+export const TextBox: React.ForwardRefExoticComponent> =
+forwardRef((props: ITextBoxProps, ref: React.ForwardedRef) => {
+ const {
+ disabled = false,
+ onChange,
+ onBlur,
+ onFocus,
+ clearButton = false,
+ labelMode = 'Never',
+ className = '',
+ id,
+ readOnly = false,
+ value,
+ defaultValue,
+ width,
+ placeholder = '',
+ variant,
+ size,
+ color,
+ prefix,
+ suffix,
+ ...rest
+ } = props;
+ const stableIdRef: React.RefObject = useRef(id || getUniqueID('default_'));
+ const stableId: string = stableIdRef.current;
+ const isControlled: boolean = value !== undefined;
+ const [inputValue, setValue] = useState(
+ isControlled ? value : (defaultValue || '')
+ );
+
+ const [isFocused, setIsFocused] = useState(false);
+ const [previousValue, setPreviousValue] = useState(
+ isControlled ? value : (defaultValue || '')
+ );
+
+ const inputRef: React.RefObject = useRef(null);
+ const { locale, dir } = useProviderContext();
+ const publicAPI: Partial = {
+ clearButton,
+ labelMode,
+ disabled,
+ readOnly,
+ variant,
+ size,
+ color,
+ value
+ };
+
+ const getContainerClassNames: () => string = () => {
+ return classNames(
+ CLASS_NAMES.INPUTGROUP,
+ CLASS_NAMES.WRAPPER,
+ labelMode !== 'Never' ? CLASS_NAMES.FLOATINPUT : '',
+ className,
+ (dir === 'rtl') ? CLASS_NAMES.RTL : '',
+ disabled ? CLASS_NAMES.DISABLE : '',
+ isFocused ? CLASS_NAMES.TEXTBOX_FOCUS : '',
+ ((inputValue) !== '') ? CLASS_NAMES.VALIDINPUT : '',
+ variant && variant.toLowerCase() !== 'standard' ? variant.toLowerCase() === 'outlined' ? 'sf-outline' : `sf-${variant.toLowerCase()}` : '',
+ size && size.toLowerCase() !== 'medium' ? `sf-${size.toLowerCase()}` : '',
+ color ? `sf-${color.toLowerCase()}` : ''
+ );
+ };
+
+ const classNames: (...classes: string[]) => string = (...classes: string[]) => {
+ return classes.filter(Boolean).join(' ');
+ };
+
+ const containerClassNames: string = getContainerClassNames();
+
+ const setPlaceholder: string = useMemo(() => {
+ const l10n: IL10n = L10n('textbox', { placeholder: placeholder }, locale);
+ l10n.setLocale(locale);
+ return l10n.getConstant('placeholder');
+ }, [locale, placeholder]);
+
+ useEffect(() => {
+ preRender('textbox');
+ }, []);
+
+ useEffect(() => {
+ if (isControlled) {
+ setValue(value || '');
+ }
+ }, [value, isControlled]);
+
+ useImperativeHandle(ref, () => ({
+ ...publicAPI as ITextBox,
+ element: inputRef.current
+ }));
+
+ const updateValue: (newValue: string, event?: React.ChangeEvent) => void =
+ useCallback((newValue: string, event?: React.ChangeEvent) => {
+ if (!isControlled) {
+ setValue(newValue);
+ setPreviousValue(newValue);
+ }
+ if (onChange) {
+ onChange(event as React.ChangeEvent);
+ }
+ }, [previousValue, onChange, isControlled]);
+
+ const changeHandler: (event: React.ChangeEvent) => void =
+ useCallback((event: React.ChangeEvent) => {
+ const newValue: string = event.target.value;
+ if (previousValue !== newValue) {
+ updateValue(newValue, event);
+ }
+ setPreviousValue(newValue);
+ }, [previousValue, updateValue]);
+
+ const handleFocus: (event: React.FocusEvent) => void =
+ useCallback((event: React.FocusEvent) => {
+ setIsFocused(true);
+ if (onFocus) {
+ onFocus(event);
+ }
+ }, [onFocus]);
+
+ const clearInput: () => void = useCallback(() => {
+ if (!isControlled) {
+ setValue('');
+ }
+ if (onChange) {
+ onChange(event as unknown as React.ChangeEvent);
+ }
+ }, [isControlled, onChange, inputValue]);
+
+ const handleBlur: (event: React.FocusEvent) => void =
+ useCallback((event: React.FocusEvent) => {
+ setIsFocused(false);
+ if (onBlur) {
+ onBlur(event);
+ }
+ }, [onBlur]);
+
+ const displayValue: string | undefined = isControlled ? value : inputValue;
+ const defaultInputValue: string | undefined = !isControlled ? defaultValue : undefined;
+
+ return (
+
+ {prefix}
+ }
+ {...rest}
+ readOnly={readOnly}
+ value={isControlled ? (displayValue) : undefined}
+ defaultValue={!isControlled ? (defaultInputValue) : undefined}
+ disabled={disabled}
+ placeholder={labelMode === 'Never' ? setPlaceholder : undefined}
+ className={'sf-control sf-textbox sf-lib sf-input'}
+ onChange={changeHandler}
+ aria-label={labelMode === 'Never' ? 'textbox' : undefined}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ />
+ {renderFloatLabelElement(
+ labelMode || 'Never',
+ isFocused || (displayValue) !== '',
+ (displayValue as string),
+ setPlaceholder,
+ stableId
+ )}
+ {clearButton && renderClearButton((displayValue as string), clearInput)}
+ {suffix}
+
+ );
+});
diff --git a/components/inputs/styles/input/_all.scss b/components/inputs/styles/input/_all.scss
new file mode 100644
index 0000000..749e8a4
--- /dev/null
+++ b/components/inputs/styles/input/_all.scss
@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'responsive.scss';
\ No newline at end of file
diff --git a/components/inputs/styles/input/_layout.scss b/components/inputs/styles/input/_layout.scss
new file mode 100644
index 0000000..e309ed7
--- /dev/null
+++ b/components/inputs/styles/input/_layout.scss
@@ -0,0 +1,5780 @@
+@include export-module('input-layout-and-theme') {
+
+ /*! input layout */
+ .sf-input-group,
+ .sf-input-group.sf-control-wrapper {
+ display: table;
+ line-height: 1.4;
+ margin-bottom: $input-margin-bottom;
+ }
+
+ input.sf-input#{$css},
+ .sf-input-group input.sf-input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ textarea.sf-input#{$css},
+ .sf-input-group textarea.sf-input,
+ .sf-input-group.sf-control-wrapper textarea.sf-input {
+ border: $input-border;
+ border-width: $input-box-border-width;
+ height: auto;
+ line-height: inherit;
+ margin: $zero-value;
+ margin-bottom: $input-margin-bottom;
+ outline: none;
+ padding: $input-padding;
+ text-indent: $input-text-indent;
+ width: 100%;
+ }
+
+ input.sf-input#{$css},
+ textarea.sf-input#{$css},
+ .sf-input-group,
+ .sf-input-group.sf-control-wrapper,
+ .sf-input-group.sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-disabled {
+ font-family: $input-font-family;
+ font-size: $input-font-size;
+ font-weight: normal;
+ @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
+ font-feature-settings: 'calt' 0;
+ }
+ }
+
+ .sf-input-group input.sf-input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group textarea.sf-input,
+ .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-input-group.sf-small .sf-input,
+ .sf-input-group.sf-small.sf-control-wrapper .sf-input,
+ .sf-small .sf-input-group .sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper .sf-input {
+ font: inherit;
+ }
+
+ input.sf-input#{$css},
+ .sf-input-group input.sf-input,
+ .sf-input-group input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group.sf-control-wrapper input,
+ .sf-float-input input,
+ .sf-float-input.sf-input-group input,
+ .sf-float-input.sf-control-wrapper input,
+ .sf-float-input.sf-control-wrapper.sf-input-group input,
+ input.sf-input#{$css}:focus,
+ .sf-input-group input.sf-input:focus,
+ .sf-input-group input:focus,
+ .sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-input-group.sf-control-wrapper input:focus,
+ .sf-float-input input:focus,
+ .sf-float-input.sf-input-group input:focus,
+ .sf-float-input.sf-control-wrapper input:focus,
+ .sf-float-input.sf-control-wrapper.sf-input-group input:focus,
+ .sf-input-group.sf-input-focus input.sf-input,
+ .sf-input-group.sf-input-focus input,
+ .sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-input-focus input,
+ .sf-float-input.sf-input-focus input,
+ .sf-float-input.sf-input-group.sf-input-focus input,
+ .sf-float-input.sf-control-wrapper.sf-input-focus input,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus input {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ input.sf-input#{$css},
+ .sf-input-group input.sf-input,
+ .sf-input-group input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group.sf-control-wrapper input,
+ .sf-float-input input,
+ .sf-float-input.sf-input-group input,
+ .sf-float-input.sf-control-wrapper input,
+ .sf-float-input.sf-control-wrapper.sf-input-group input,
+ .sf-input-group,
+ .sf-input-group.sf-control-wrapper,
+ .sf-float-input,
+ .sf-float-input.sf-control-wrapper,
+ .sf-input#{$css}.sf-corner,
+ .sf-input-group.sf-corner.sf-rtl input.sf-input:only-child,
+ .sf-input-group.sf-control-wrapper.sf-corner.sf-rtl input.sf-input:only-child,
+ .sf-input-group.sf-input-focus.sf-corner,
+ .sf-input-group.sf-control-wrapper.sf-input-focus.sf-corner,
+ textarea.sf-input#{$css},
+ .sf-input-group textarea.sf-input,
+ .sf-input-group textarea,
+ .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-input-group.sf-control-wrapper textarea,
+ .sf-float-input textarea,
+ .sf-float-input.sf-input-group textarea,
+ .sf-float-input.sf-control-wrapper textarea,
+ .sf-float-input.sf-control-wrapper.sf-input-group textarea {
+ @if $skin-name == 'fluent2' {
+ border-radius: 4px;
+ }
+ @else {
+ border-radius: $input-box-border-radius;
+ }
+ }
+
+ .sf-input.sf-small,
+ .sf-input-group.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-small,
+ .sf-input-group.sf-small .sf-input,
+ .sf-input-group.sf-small input,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small input,
+ .sf-float-input.sf-small input,
+ .sf-float-input.sf-input-group.sf-small input,
+ .sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+ .sf-float-input.sf-small,
+ .sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small .sf-input-group,
+ .sf-small .sf-input-group.sf-control-wrapper,
+ .sf-small .sf-input-group .sf-input,
+ .sf-small .sf-input-group input,
+ .sf-small .sf-input-group.sf-control-wrapper .sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper input,
+ .sf-small .sf-float-input input,
+ .sf-small .sf-float-input.sf-input-group input,
+ .sf-small .sf-float-input.sf-control-wrapper input,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-input-group input,
+ .sf-small .sf-float-input,
+ .sf-small .sf-float-input.sf-control-wrapper {
+ @if ($input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5.3') {
+ border-radius: $input-small-border-radius;
+ }
+ }
+
+ .sf-input#{$css}:focus {
+ border-width: $input-focus-border-width;
+ padding-bottom: $input-padding-bottom;
+ }
+
+ .sf-input.sf-small#{$css}:focus {
+ border-width: $input-focus-border-width;
+ padding-bottom: $input-small-padding-bottom;
+ }
+
+ .sf-input#{$css}:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ padding-bottom: $input-focus-padding-bottom;
+ }
+ }
+
+ .sf-input.sf-small#{$css}:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ padding-bottom: $input-focus-small-padding-bottom;
+ }
+ }
+
+ .sf-input-group input.sf-input:focus,
+ .sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-input-group textarea.sf-input:focus,
+ .sf-input-group.sf-control-wrapper textarea.sf-input:focus,
+ .sf-input-group.sf-input-focus input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input {
+ padding: $input-padding;
+ }
+
+ .sf-input-group textarea.sf-input:focus,
+ .sf-input-group.sf-control-wrapper textarea.sf-input:focus {
+ padding: $textarea-padding;
+ }
+
+ .sf-input-group .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ align-items: center;
+ border: $input-border;
+ border-width: $input-group-child-border-width;
+ box-sizing: content-box;
+ cursor: pointer;
+ flex-direction: column;
+ font-size: $input-icon-font-size;
+ justify-content: center;
+ line-height: 1;
+ min-height: $input-child-min-height;
+ min-width: $input-child-min-width;
+ padding: $input-child-padding;
+ text-align: center;
+ @if ($input-skin-name == 'bootstrap5.3') {
+ border: 1px solid;
+ border-bottom: $zero-value;
+ border-collapse: collapse;
+ border-top: $zero-value;
+ }
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ border-radius: $input-child-icon-border-radius;
+ }
+ }
+
+ .sf-input-group .sf-input-group-icon:first-child,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon:first-child {
+ @if ($input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3') {
+ border-left-width: $zero-value;
+ }
+ }
+
+ .sf-input-group .sf-input-group-icon:last-child,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon:last-child {
+ @if ($input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3') {
+ border-bottom-right-radius: $input-group-icon-border-radius;
+ border-top-right-radius: $input-group-icon-border-radius;
+ }
+ }
+
+ .sf-input-group .sf-input-group-icon:first-child,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon:first-child {
+ @if ($input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3') {
+ border-bottom-left-radius: $input-group-icon-border-radius;
+ border-top-left-radius: $input-group-icon-border-radius;
+ }
+ }
+
+ .sf-input-group.sf-rtl .sf-input-group-icon:last-child,
+ .sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon:last-child,
+ .sf-rtl .sf-input-group .sf-input-group-icon:last-child,
+ .sf-rtl .sf-input-group.sf-control-wrapper .sf-input-group-icon:last-child {
+ @if ($input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3') {
+ border-bottom-left-radius: $input-group-icon-border-radius;
+ border-bottom-right-radius: $zero-value;
+ border-top-left-radius: $input-group-icon-border-radius;
+ border-top-right-radius: $zero-value;
+ }
+ }
+
+ .sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+ .sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ font-size: $input-left-icon-font-size;
+ margin: $zero-value;
+ min-height: $input-left-child-min-height;
+ min-width: $input-left-child-min-width;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+ .sf-float-input.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ font-size: $input-small-left-icon-font-size;
+ margin: $zero-value;
+ min-height: $input-small-left-child-min-height;
+ min-width: $input-small-left-child-min-width;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-input-group.sf-float-icon-left:not(.sf-disabled) > .sf-input-group-icon:active,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled) > .sf-input-group-icon:active {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ background: transparent;
+ }
+ }
+
+ .sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ cursor: auto;
+ }
+ }
+
+ .sf-input#{$css}[disabled],
+ .sf-input-group .sf-input[disabled],
+ .sf-input-group.sf-control-wrapper .sf-input#{$css}[disabled],
+ .sf-input-group.sf-disabled,
+ .sf-input-group.sf-disabled input,
+ .sf-input-group.sf-disabled input.sf-input,
+ .sf-input-group.sf-disabled textarea,
+ .sf-input-group.sf-disabled textarea.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-disabled input,
+ .sf-input-group.sf-control-wrapper.sf-disabled input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-disabled textarea,
+ .sf-input-group.sf-control-wrapper.sf-disabled textarea.sf-input,
+ .sf-float-input.sf-disabled input,
+ .sf-float-input.sf-disabled textarea,
+ .sf-float-input input[disabled],
+ .sf-float-input input.sf-disabled,
+ .sf-float-input textarea[disabled],
+ .sf-float-input textarea.sf-disabled,
+ .sf-float-input.sf-control-wrapper.sf-disabled input,
+ .sf-float-input.sf-control-wrapper.sf-disabled textarea,
+ .sf-float-input.sf-control-wrapper input[disabled],
+ .sf-float-input.sf-control-wrapper input.sf-disabled,
+ .sf-float-input.sf-control-wrapper textarea[disabled],
+ .sf-float-input.sf-control-wrapper textarea.sf-disabled,
+ .sf-input-group.sf-disabled span,
+ .sf-input-group.sf-control-wrapper.sf-disabled span,
+ .sf-input-group.sf-disabled input.sf-input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper.sf-disabled input.sf-input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-disabled input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-input-group.sf-disabled input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-control-wrapper.sf-disabled input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-input-group.sf-disabled .sf-clear-icon.sf-clear-icon-hide,
+ .sf-input-group.sf-control-wrapper.sf-disabled .sf-clear-icon.sf-clear-icon-hide {
+ cursor: not-allowed;
+ }
+
+ .sf-input#{$css}[disabled],
+ .sf-input-group.sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-disabled,
+ .sf-float-input input[disabled],
+ .sf-float-input input.sf-disabled,
+ .sf-float-input.sf-control-wrapper input[disabled],
+ .sf-float-input.sf-control-wrapper input.sf-disabled {
+ @if $input-skin-name != 'Material3' {
+ border-color: $input-disable-border-color;
+ border-style: $input-disable-border-type;
+ }
+ }
+
+ .sf-input-group.sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-disabled {
+ @if $input-skin-name != 'Material3' {
+ border-bottom-style: $input-disable-border-type;
+ border-width: $input-disable-group-border-width;
+ }
+ }
+
+ .sf-input#{$css}[disabled],
+ .sf-input-group.sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-disabled,
+ .sf-float-input.sf-disabled,
+ .sf-float-input input[disabled],
+ .sf-float-input input.sf-disabled,
+ .sf-float-input.sf-disabled input,
+ .sf-float-input.sf-control-wrapper.sf-disabled,
+ .sf-float-input.sf-control-wrapper input[disabled],
+ .sf-float-input.sf-control-wrapper input.sf-disabled,
+ .sf-float-input.sf-control-wrapper.sf-disabled input,
+ .sf-float-input textarea[disabled],
+ .sf-float-input textarea.sf-disabled,
+ .sf-float-input.sf-disabled textarea,
+ .sf-float-input.sf-control-wrapper textarea[disabled],
+ .sf-float-input.sf-control-wrapper textarea.sf-disabled,
+ .sf-float-input.sf-control-wrapper.sf-disabled textarea {
+ filter: alpha(opacity=$input-opacity-filter);
+ opacity: $input-opacity;
+ }
+
+ .sf-input#{$css}.sf-rtl,
+ .sf-input-group.sf-rtl,
+ .sf-input-group.sf-control-wrapper.sf-rtl,
+ .sf-float-input.sf-rtl,
+ .sf-float-input.sf-control-wrapper.sf-rtl {
+ direction: rtl;
+ }
+
+ .sf-input-group,
+ .sf-input-group.sf-control-wrapper,
+ .sf-float-custom-tag.sf-input-group,
+ .sf-float-custom-tag.sf-input-group.sf-control-wrapper,
+ .sf-input-custom-tag,
+ .sf-input-custom-tag.sf-input-group,
+ .sf-input-custom-tag.sf-input-group.sf-control-wrapper {
+ display: inline-flex;
+ vertical-align: middle;
+ }
+
+ .sf-float-input:not(.sf-input-group),
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group),
+ .sf-float-custom-tag,
+ .sf-float-custom-tag.sf-control-wrapper {
+ display: inline-block;
+ }
+
+ .sf-input-group .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ display: flex;
+ }
+
+ .sf-input-group .sf-input-group-icon:first-child,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon:first-child {
+ @if ($input-skin-name != 'tailwind3' and $input-skin-name != 'bootstrap5.3') {
+ border-left-width: $input-border-left-width;
+ }
+ }
+
+ .sf-input-group .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ white-space: nowrap;
+ }
+
+ .sf-input-group .sf-input-group-icon:not(:last-child),
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon:not(:last-child) {
+ @if ($input-skin-name != 'bootstrap5.3') {
+ border-right-width: $zero-value;
+ }
+ }
+
+ .sf-input + .sf-input-group-icon,
+ .sf-input-group .sf-input + .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper .sf-input + .sf-input-group-icon {
+ @if ($input-skin-name != 'bootstrap5.3') {
+ border-left-width: $zero-value;
+ }
+ }
+
+ .sf-input-group.sf-corner .sf-input:first-child,
+ .sf-input-group.sf-corner .sf-input-group-icon:first-child,
+ .sf-input-group.sf-control-wrapper.sf-corner .sf-input:first-child,
+ .sf-input-group.sf-control-wrapper.sf-corner .sf-input-group-icon:first-child {
+ border-bottom-left-radius: $input-box-border-radius;
+ border-top-left-radius: $input-box-border-radius;
+ }
+
+ .sf-input-group.sf-corner .sf-input:last-child,
+ .sf-input-group.sf-corner .sf-input-group-icon:last-child,
+ .sf-input-group.sf-control-wrapper.sf-corner .sf-input:last-child,
+ .sf-input-group.sf-control-wrapper.sf-corner .sf-input-group-icon:last-child {
+ border-bottom-right-radius: $input-box-border-radius;
+ border-top-right-radius: $input-box-border-radius;
+ }
+
+ .sf-input-group.sf-rtl .sf-input-group-icon:first-child,
+ .sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon:first-child {
+ @if ($input-skin-name != 'bootstrap5.3') {
+ border-left-width: $zero-value;
+ border-right-width: $input-border-left-width;
+ }
+ }
+
+ .sf-input-group.sf-rtl .sf-input-group-icon:last-child,
+ .sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon:last-child {
+ @if $input-skin-name != 'tailwind3' and $input-skin-name != 'bootstrap5.3' {
+ border-left-width: $input-border-left-width;
+ border-right-width: $zero-value;
+ }
+ }
+
+ .sf-input-group.sf-rtl .sf-input-group-icon:not(:last-child),
+ .sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon:not(:last-child) {
+ @if ( $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3') {
+ border-left-width: $input-border-left-width;
+ }
+ }
+
+ .sf-input-group.sf-rtl .sf-input-group-icon + .sf-input,
+ .sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon + .sf-input {
+ @if ( $input-skin-name != 'bootstrap5.3') {
+ border-right-width: $zero-value;
+ }
+ }
+
+ input.sf-input.sf-small#{$css},
+ textarea.sf-input.sf-small#{$css},
+ .sf-small input.sf-input#{$css},
+ .sf-small textarea.sf-input#{$css},
+ .sf-input-group.sf-small,
+ .sf-small .sf-input-group,
+ .sf-input-group.sf-control-wrapper.sf-small,
+ .sf-small .sf-input-group.sf-control-wrapper,
+ .sf-input-group.sf-small.sf-disabled,
+ .sf-small .sf-input-group.sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-small.sf-disabled,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-disabled {
+ font-size: $input-small-font-size;
+ }
+
+ .sf-input#{$css}.sf-small,
+ .sf-input-group.sf-small .sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-input {
+ line-height: inherit;
+ padding: $input-small-padding;
+ }
+
+ .sf-input-group.sf-small .sf-input:focus,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-input:focus,
+ .sf-input-group.sf-small.sf-input-focus .sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small.sf-input-focus .sf-input {
+ padding: $input-small-padding;
+ }
+
+ .sf-input-group.sf-small .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-input-group .sf-input-group-icon,
+ .sf-small .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ font-size: $input-small-icon-font-size;
+ min-height: $input-small-child-min-height;
+ min-width: $input-small-child-min-width;
+ padding: $input-small-child-padding;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ border-radius: $input-small-child-border-radius;
+ }
+ }
+
+ label.sf-float-text,
+ .sf-float-input label.sf-float-text,
+ .sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-placeholder-font-size;
+ font-style: $input-font-style;
+ font-weight: normal;
+ left: 0;
+ overflow: hidden;
+ padding-left: $float-label-padding;
+ pointer-events: none;
+ position: absolute;
+ text-overflow: ellipsis;
+ top: -11px;
+ transform: translate3d(0, 16px, 0) scale(1);
+ transform-origin: left top;
+ transition: .25s cubic-bezier(.25, .8, .25, 1);
+ user-select: none;
+ white-space: nowrap;
+ width: 100%;
+ }
+
+ label.sf-float-text,
+ .sf-float-input label.sf-float-text,
+ .sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ top: -11px;
+ }
+
+ label.sf-float-text,
+ .sf-float-input label.sf-float-text,
+ .sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @include float-label-alignment;
+ font-style: $input-font-style;
+ }
+
+ .sf-float-input.sf-small label.sf-float-text,
+ .sf-float-input.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-small label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-placeholder-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -11px;
+ }
+ }
+
+ .sf-float-input .sf-input-in-wrap label.sf-float-text,
+ .sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -11px;
+ }
+ }
+
+ .sf-float-input input:focus ~ label.sf-float-text,
+ .sf-float-input input:valid ~ label.sf-float-text,
+ .sf-float-input input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input input label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper input label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper.sf-input-focus input ~ label.sf-float-text,
+ .sf-float-input.sf-input-focus input ~ label.sf-float-text {
+ font-size: $float-label-font-size;
+ @if $input-skin-name == 'Material3' {
+ top: -9px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ @else if $input-skin-name == 'fluent2' {
+ padding: 0;
+ top: -15px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ @else if ($input-skin-name == 'tailwind3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -35px, 0) scale(1);
+ padding-left: 0;
+ left: 12px;
+ top: 40%;
+ }
+ @else if ($input-skin-name == 'bootstrap5.3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -36px, 0) scale(1);
+ }
+ }
+
+ .sf-float-input.sf-small input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-small input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small input label.sf-float-text.sf-label-top,
+ .sf-small .sf-float-input input:focus ~ label.sf-float-text,
+ .sf-small .sf-float-input input:valid ~ label.sf-float-text,
+ .sf-small .sf-float-input input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input input label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper.sf-small input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input label.sf-float-text.sf-label-top,
+ .sf-small .sf-float-input.sf-control-wrapper input:focus ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper input:valid ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper input label.sf-float-text.sf-label-top {
+ font-size: $float-label-font-size;
+ @if $input-skin-name == 'fluent2' {
+ top: -9px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ @else if $input-skin-name == 'Material3' {
+ top: -7px;
+ transform: translate3d(0, 0, 0) scale(1);
+ }
+ @else if ( $input-skin-name == 'tailwind3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -34px, 0) scale(1);
+ }
+ @else if ( $input-skin-name == 'bootstrap5.3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -35px, 0) scale(1);
+ }
+ }
+
+ .sf-float-input .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-float-input .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-float-input .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input .sf-input-in-wrap input label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input label.sf-float-text.sf-label-top {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -9px;
+ }
+ }
+
+ .sf-float-input.sf-small.sf-outline input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-small.sf-outline input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small.sf-outline input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input.sf-outline ~ label.sf-label-top.sf-float-text {
+ font-size: $float-label-small-font-size;
+ @if $input-skin-name == 'Material3' {
+ top: -6px;
+ }
+ }
+
+ .sf-float-input.sf-small input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-small input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small.sf-input-focus input-group-animation ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small.sf-input-focus input ~ label.sf-float-text {
+ font-size: $float-label-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -12px;
+ }
+ @if $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3' {
+ padding-right: 0;
+ top: 17px;
+ }
+ }
+
+ .sf-float-input.sf-small .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-small .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-small .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ top: -7px;
+ }
+ }
+
+ .sf-float-input,
+ .sf-float-input.sf-control-wrapper {
+ line-height: 1.4;
+ margin-bottom: $input-margin-bottom;
+ margin-top: $input-margin-top;
+ padding-top: $float-input-wrap-padding-top;
+ position: relative;
+ width: 100%;
+ }
+
+ .sf-float-input.sf-small,
+ .sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small .sf-float-input.sf-control-wrapper {
+ line-height: 1.35;
+ margin-bottom: $input-small-margin-bottom;
+ margin-top: $input-small-margin-top;
+ padding-top: $float-input-small-wrap-padding-top;
+ }
+
+ .sf-input-group.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-small,
+ .sf-small .sf-input-group,
+ .sf-small .sf-input-group.sf-control-wrapper {
+ line-height: normal;
+ }
+
+ .sf-float-input.sf-no-float-label,
+ .sf-float-input.sf-small.sf-no-float-label,
+ .sf-small .sf-float-input.sf-no-float-label,
+ .sf-float-input.sf-control-wrapper.sf-no-float-label,
+ .sf-float-input.sf-control-wrapper.sf-small.sf-no-float-label,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-no-float-label {
+ margin-top: $zero-value;
+ }
+
+ .sf-float-input,
+ .sf-float-input.sf-control-wrapper,
+ .sf-float-input.sf-disabled,
+ .sf-float-input.sf-control-wrapper.sf-disabled,
+ .sf-float-input.sf-input-group.sf-disabled,
+ .sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled {
+ font-family: $input-font-family;
+ font-size: $input-font-size;
+ font-weight: normal;
+ }
+
+ .sf-float-input input,
+ .sf-float-input textarea,
+ .sf-float-input.sf-control-wrapper input,
+ .sf-float-input.sf-control-wrapper textarea {
+ border: $float-input-border;
+ border-width: $float-input-border-width;
+ display: block;
+ font: inherit;
+ width: 100%;
+ }
+
+ .sf-float-input input,
+ .sf-float-input.sf-control-wrapper input {
+ min-width: 0;
+ padding: $float-input-padding;
+ }
+
+ .sf-float-input input,
+ .sf-input-group input,
+ .sf-float-input.sf-control-wrapper input,
+ .sf-input-group.sf-control-wrapper input,
+ .sf-float-input textarea,
+ .sf-input-group textarea,
+ .sf-float-input.sf-control-wrapper textarea,
+ .sf-input-group.sf-control-wrapper textarea {
+ text-indent: $input-text-indent;
+ }
+
+ .sf-float-input.sf-small.sf-disabled,
+ .sf-small .sf-float-input.sf-disabled,
+ .sf-float-input.sf-control-wrapper.sf-small.sf-disabled,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-disabled,
+ .sf-float-input.sf-input-group.sf-small.sf-disabled,
+ .sf-small .sf-float-input.sf-input-group.sf-disabled,
+ .sf-float-input.sf-input-group.sf-control-wrapper.sf-small.sf-disabled,
+ .sf-small .sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled,
+ .sf-float-input.sf-small,
+ .sf-small .sf-float-input,
+ .sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small .sf-float-input.sf-control-wrapper {
+ font-size: $input-small-font-size;
+ }
+
+ .sf-float-input.sf-small input,
+ .sf-float-input.sf-control-wrapper.sf-small input {
+ font: inherit;
+ line-height: inherit;
+ padding: $float-input-small-padding;
+ }
+
+ .sf-float-input input:focus,
+ .sf-float-input.sf-control-wrapper input:focus,
+ .sf-float-input textarea:focus,
+ .sf-float-input.sf-control-wrapper textarea:focus,
+ .sf-float-input.sf-input-focus input,
+ .sf-float-input.sf-control-wrapper.sf-input-focus input,
+ .sf-input-group.sf-control-container.valid.modified,
+ .sf-input-group.sf-control-container.invalid,
+ .sf-float-input.sf-control-container.valid.modified,
+ .sf-float-input.sf-control-container.invalid {
+ outline: none;
+ }
+
+ label.sf-float-text,
+ .sf-float-input label.sf-float-text,
+ .sf-float-input.sf-control-wrapper label.sf-float-text {
+ font-family: inherit;
+ }
+
+ .sf-float-input input:valid ~ label.sf-float-text,
+ .sf-float-input input:focus ~ label.sf-float-text,
+ .sf-float-input input:valid ~ label.sf-float-text.sf-label-top,
+ .sf-float-input input ~ label.sf-float-text.sf-label-top,
+ .sf-float-input .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-float-input .sf-input-in-wrap input:valid ~ label.sf-float-text.sf-label-top,
+ .sf-float-input .sf-input-in-wrap input ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper input:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper input:valid ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper input ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input:valid ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap input ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-input-focus input ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-input-focus input ~ label.sf-float-text,
+ .sf-float-input textarea:valid ~ label.sf-float-text,
+ .sf-float-input textarea:focus ~ label.sf-float-text,
+ .sf-float-input textarea:valid ~ label.sf-float-text.sf-label-top,
+ .sf-float-input textarea ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text.sf-label-top {
+ @if ($input-skin-name == 'bootstrap5.3') {
+ font-weight: $input-float-font-weight;
+ }
+ user-select: text;
+ }
+
+ label.sf-float-text,
+ .sf-float-input label.sf-float-text,
+ .sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-small:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-small:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-small:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ font-weight: normal;
+ }
+
+ .sf-float-input:not(.sf-input-group) .sf-float-line::before,
+ .sf-float-input:not(.sf-input-group) .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::after {
+ bottom: 0;
+ content: '';
+ height: 2px;
+ position: absolute;
+ transition: .2s ease;
+ width: 0;
+ }
+
+ .sf-float-input:not(.sf-input-group) .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::before {
+ left: 50%;
+ }
+
+ .sf-float-input:not(.sf-input-group) .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::after {
+ right: 50%;
+ }
+
+ .sf-float-input:not(.sf-input-group) input:focus ~ .sf-float-line::before,
+ .sf-float-input:not(.sf-input-group) textarea:focus ~ .sf-float-line::before,
+ .sf-float-input:not(.sf-input-group) input:focus ~ .sf-float-line::after,
+ .sf-float-input:not(.sf-input-group) textarea:focus ~ .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) input:focus ~ .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) textarea:focus ~ .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) input:focus ~ .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) textarea:focus ~ .sf-float-line::after,
+ .sf-float-input:not(.sf-input-group).sf-input-focus input ~ .sf-float-line::before,
+ .sf-float-input:not(.sf-input-group).sf-input-focus input ~ .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group).sf-input-focus input ~ .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group).sf-input-focus input ~ .sf-float-line::after {
+ width: 50%;
+ }
+
+ .sf-float-input .sf-float-line,
+ .sf-float-input.sf-control-wrapper .sf-float-line {
+ display: block;
+ position: relative;
+ width: 100%;
+ }
+
+ .sf-float-input.sf-rtl label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-rtl label.sf-float-text,
+ .sf-rtl .sf-float-input label.sf-float-text,
+ .sf-rtl .sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-rtl label.sf-float-text,
+ .sf-rtl .sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-rtl.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ right: 0;
+ transform-origin: right top;
+ @if $input-skin-name == 'fluent2' {
+ padding-right: 8px;
+ }
+ }
+
+ .sf-float-input.sf-rtl:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-rtl.sf-control-wrapper:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-control-wrapper:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-rtl input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-float-input.sf-rtl input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-rtl .sf-float-input input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-rtl input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-rtl .sf-float-input.sf-control-wrapper input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-float-input.sf-rtl.sf-control-wrapper input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-control-wrapper input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-rtl.sf-small:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-rtl.sf-control-wrapper.sf-small:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-small:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-rtl:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-rtl.sf-control-wrapper:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-rtl .sf-float-input:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-rtl .sf-float-input.sf-control-wrapper:not(.sf-input-focus) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-small.sf-rtl input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-float-input.sf-rtl.sf-small input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-small input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-rtl .sf-float-input.sf-small input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-rtl input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-small .sf-float-input.sf-rtl input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-rtl .sf-float-input input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-small.sf-rtl .sf-float-input input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-small.sf-rtl input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-rtl.sf-small input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-float-input.sf-control-wrapper.sf-small input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-rtl .sf-float-input.sf-control-wrapper.sf-small input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-rtl input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-rtl input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-rtl .sf-float-input.sf-control-wrapper input:not(:focus):not(:valid) label.sf-float-text,
+ .sf-small.sf-rtl .sf-float-input.sf-control-wrapper input:not(:focus):not(:valid) label.sf-float-text.sf-label-bottom {
+ padding-right: $float-label-padding;
+ }
+
+ .sf-input-group.sf-corner.sf-rtl .sf-input:first-child,
+ .sf-input-group.sf-corner.sf-rtl .sf-input-group-icon:first-child,
+ .sf-input-group.sf-control-wrapper.sf-corner.sf-rtl .sf-input:first-child,
+ .sf-input-group.sf-control-wrapper.sf-corner.sf-rtl .sf-input-group-icon:first-child {
+ border-bottom-left-radius: $zero-value;
+ border-bottom-right-radius: $input-box-border-radius;
+ border-top-left-radius: $zero-value;
+ border-top-right-radius: $input-box-border-radius;
+ }
+
+ .sf-input-group.sf-corner.sf-rtl .sf-input:last-child,
+ .sf-input-group.sf-corner.sf-rtl .sf-input-group-icon:last-child,
+ .sf-input-group.sf-control-wrapper.sf-corner.sf-rtl .sf-input:last-child,
+ .sf-input-group.sf-control-wrapper.sf-corner.sf-rtl .sf-input-group-icon:last-child {
+ border-bottom-left-radius: $input-box-border-radius;
+ border-bottom-right-radius: $zero-value;
+ border-top-left-radius: $input-box-border-radius;
+ border-top-right-radius: $zero-value;
+ }
+
+ .sf-input-group.sf-warning::before,
+ .sf-input-group.sf-control-wrapper.sf-warning::before {
+ content: '';
+ }
+
+ .sf-float-input input[disabled],
+ .sf-float-input input.sf-disabled,
+ .sf-float-input.sf-control-wrapper input[disabled],
+ .sf-float-input.sf-control-wrapper input.sf-disabled {
+ background: transparent;
+ background-image: none;
+ cursor: not-allowed;
+ }
+
+ .sf-input-group.sf-rtl .sf-input:not(:first-child):focus,
+ .sf-input-group.sf-control-wrapper.sf-rtl .sf-input:not(:first-child):focus {
+ border-right-width: $input-right-border-width;
+ }
+
+ .sf-input-group input.sf-input,
+ .sf-input-group.sf-control-wrapper input.sf-input {
+ min-width: 0;
+ width: 100%;
+ }
+
+ .sf-input-group input.sf-input,
+ .sf-input-group textarea.sf-input,
+ .sf-input-group input.sf-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not([disabled]):not(:focus),
+ .sf-input-group textarea.sf-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not([disabled]),
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-input-group.sf-control-wrapper input.sf-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not([disabled]):not(:focus),
+ .sf-input-group.sf-control-wrapper textarea.sf-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not([disabled]) {
+ border: $input-border;
+ border-width: $input-group-border-width;
+ }
+
+ .sf-input-group input.sf-input,
+ .sf-input-group textarea.sf-input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-float-input input.sf-input,
+ .sf-float-input.sf-control-wrapper input.sf-input {
+ margin-bottom: $zero-value;
+ }
+
+ .sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::before,
+ .sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::after,
+ .sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::before,
+ .sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::before,
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::after,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::before,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+ .sf-float-input.sf-input-group:not(.sf-float-icon-left) .sf-float-line::before,
+ .sf-float-input.sf-input-group:not(.sf-float-icon-left) .sf-float-line::after,
+ .sf-float-input.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::before,
+ .sf-float-input.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left) .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left) .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::after,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left .sf-float-line::before,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left .sf-float-line::after,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-float-line::before,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-group-animation;
+ }
+ }
+
+ .sf-input-group::before,
+ .sf-input-group::after,
+ .sf-input-group.sf-control-wrapper::before,
+ .sf-input-group.sf-control-wrapper::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-animation;
+ }
+ }
+
+ .sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::before,
+ .sf-input-group.sf-float-icon-left .sf-input-in-wrap:not(.sf-float-input)::before,
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::before,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap:not(.sf-float-input)::before,
+ .sf-float-input.sf-input-group:not(.sf-float-icon-left) .sf-float-line::before,
+ .sf-float-input.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left) .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::before,
+ .sf-filled.sf-input-group.sf-float-icon-left::before,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left::before,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left .sf-float-line::before,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-float-line::before {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-group-animation-left;
+ }
+ }
+
+ .sf-input-group::before,
+ .sf-input-group.sf-control-wrapper::before {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-animation-left;
+ }
+ }
+
+ .sf-input-group:not(.sf-float-icon-left):not(.sf-float-input).sf-input-focus::before,
+ .sf-input-group:not(.sf-float-icon-left):not(.sf-float-input).sf-input-focus::after,
+ .sf-input-group.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::before,
+ .sf-input-group.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::after,
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input).sf-input-focus::before,
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input).sf-input-focus::after,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::before,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::after,
+ .sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::before,
+ .sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::after,
+ .sf-float-input.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::before,
+ .sf-float-input.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::before,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::after,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left.sf-input-focus .sf-float-line::before,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left.sf-input-focus .sf-float-line::after,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-input-focus .sf-float-line::before,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-input-focus .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-group-animation-width;
+ }
+ }
+
+ .sf-input-group.sf-input-focus::before,
+ .sf-input-group.sf-input-focus::after,
+ .sf-input-group.sf-control-wrapper.sf-input-focus::before,
+ .sf-input-group.sf-control-wrapper.sf-input-focus::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-animation-width;
+ }
+ }
+
+ .sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::after,
+ .sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::after,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+ .sf-float-input.sf-input-group:not(.sf-float-icon-left) .sf-float-line::after,
+ .sf-float-input.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left) .sf-float-line::after,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::after,
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input)::after,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input)::after,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left .sf-float-line::after,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-group-animation-right;
+ }
+ }
+
+ .sf-input-group::after,
+ .sf-input-group.sf-control-wrapper::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-animation-right;
+ }
+ }
+
+ .sf-input-group,
+ .sf-input-group.sf-control-wrapper {
+ position: relative;
+ width: 100%;
+ }
+
+ .sf-input-group .sf-input-group-icon:hover,
+ .sf-input-group.sf-rtl.sf-corner .sf-input-group-icon:hover,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon:hover,
+ .sf-input-group.sf-control-wrapper.sf-rtl.sf-corner .sf-input-group-icon:hover {
+ @if ( $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'Material3') {
+ border-radius: $input-group-border-radius;
+ }
+ }
+
+ .sf-input#{$css}.sf-small,
+ .sf-input-group.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-small {
+ margin-bottom: $input-small-margin-bottom;
+ }
+
+ .sf-input-group .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ margin-bottom: $input-child-margin-bottom;
+ margin-right: $input-child-margin-right;
+ margin-top: $input-child-margin-top;
+ }
+
+ .sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ @if $input-skin-name != 'Material3' {
+ margin-top: $float-input-child-margin-top;
+ }
+ }
+
+ .sf-input-group.sf-small .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-input-group .sf-input-group-icon,
+ .sf-small .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ @if ($input-skin-name != 'Material3') {
+ margin-bottom: $input-child-small-margin-bottom;
+ margin-right: $input-child-small-margin-right;
+ margin-top: $input-child-small-margin-top;
+ }
+ @else {
+ margin: $input-child-small-margin;
+ }
+ }
+
+ .sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+ margin-top: $float-input-child-small-margin-top;
+ }
+ }
+
+ .sf-input-group,
+ .sf-input-group.sf-control-wrapper {
+ @if $input-skin-name != 'Material3' {
+ border-bottom: $input-group-border;
+ }
+ }
+
+ .sf-input-group:not(.sf-float-icon-left),
+ .sf-input-group.sf-control-wrapper:not(.sf-float-icon-left),
+ .sf-filled.sf-input-group.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-bottom: $input-group-border;
+ }
+ }
+
+ .sf-underline.sf-input-group:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-success:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-warning:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-error:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper.sf-success:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper.sf-error:not(.sf-float-icon-left) {
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border: $input-group-full-border;
+ border-width: $input-group-full-border-width;
+ padding-top: 1px;
+ border-radius: 0;
+ }
+ }
+
+ .sf-input-group,
+ .sf-input-group.sf-success,
+ .sf-input-group.sf-warning,
+ .sf-input-group.sf-error,
+ .sf-input-group.sf-control-wrapper,
+ .sf-input-group.sf-control-wrapper.sf-success,
+ .sf-input-group.sf-control-wrapper.sf-warning,
+ .sf-input-group.sf-control-wrapper.sf-error {
+ @if $input-skin-name != 'Material3' {
+ border: $input-group-full-border;
+ border-width: $input-group-full-border-width;
+ }
+ }
+
+ .sf-input-group.sf-rtl.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:not(:first-child):focus,
+ .sf-input-group.sf-control-wrapper.sf-rtl.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:not(:first-child):focus {
+ border-right-width: $zero-value;
+ }
+
+ .sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left).sf-disabled,
+ .sf-input-group.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled .sf-input-in-wrap,
+ .sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left).sf-disabled,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled .sf-input-in-wrap {
+ @if ($input-skin-name == 'tailwind3')
+ {
+ background: $input-readonly-bg-color;
+ }
+ @if $input-skin-name != 'tailwind3'
+ {
+ background: $input-disable-bg-color;
+ }
+ color: $input-disable-font-color;
+ @if $input-skin-name == 'Material3' {
+ background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
+ background-position: bottom -1px left 0;
+ background-repeat: repeat-x;
+ background-size: 4px 1px;
+ border-bottom-color: transparent;
+ color: $input-disable-font-color;
+ }
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-color: $input-disable-border-color;
+ }
+ }
+
+ .sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled,
+ .sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled {
+ @if $input-skin-name != 'Material3' {
+ border-style: $input-disable-border-type;
+ }
+ }
+
+ .sf-input-group .sf-input-group-icon,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ @if $input-skin-name != 'fluent2' {
+ @include input-ripple-parent;
+ }
+ }
+
+ .sf-input-group:not(.sf-filled) .sf-input-group-icon::after,
+ .sf-input-group.sf-control-wrapper:not(.sf-filled) .sf-input-group-icon::after {
+ @if $input-skin-name != 'fluent2' {
+ @include input-ripple-style;
+ }
+ }
+
+ .sf-input-group .sf-input-group-icon.sf-input-btn-ripple::after,
+ .sf-input-group.sf-control-wrapper .sf-input-group-icon.sf-input-btn-ripple::after {
+ @if $input-skin-name != 'fluent2' {
+ @include input-ripple-animation;
+ }
+ }
+
+ input.sf-input#{$css}::-ms-clear,
+ .sf-float-input input::-ms-clear,
+ .sf-float-input.sf-control-wrapper input::-ms-clear,
+ .sf-input:not(:valid):not(.sf-control):first-child ~ .sf-clear-icon,
+ .sf-input-group input:not(.sf-control).sf-input:not(:valid):first-child ~ .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper input.sf-input:not(:valid):not(.sf-control):first-child ~ .sf-clear-icon,
+ .sf-float-input input:not(:valid):not(.sf-control):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-control-wrapper input:not(:valid):not(.sf-control):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-input-group input:not(:valid):not(.sf-control):first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-input-group.sf-control-wrapper input:not(:valid):not(.sf-control):first-child ~ .sf-clear-icon {
+ display: none;
+ }
+
+ .sf-input-group .sf-clear-icon.sf-clear-icon-hide,
+ .sf-input-group.sf-control-wrapper .sf-clear-icon.sf-clear-icon-hide,
+ .sf-float-input.sf-control-wrapper.sf-hidden,
+ .sf-input-group.sf-control-wrapper.sf-hidden {
+ display: none;
+ }
+
+ input.sf-input[type = 'search']::-webkit-search-decoration,
+ input.sf-input[type = 'search']::-webkit-search-cancel-button,
+ input.sf-input[type = 'search']::-webkit-search-results-button,
+ input.sf-input[type = 'search']::-webkit-search-results-decoration,
+ .sf-float-input input[type = 'search']::-webkit-search-decoration,
+ .sf-float-input input[type = 'search']::-webkit-search-cancel-button,
+ .sf-float-input input[type = 'search']::-webkit-search-results-button,
+ .sf-float-input input[type = 'search']::-webkit-search-results-decoration,
+ .sf-float-input.sf-control-wrapper input[type = 'search']::-webkit-search-decoration,
+ .sf-float-input.sf-control-wrapper input[type = 'search']::-webkit-search-cancel-button,
+ .sf-float-input.sf-control-wrapper input[type = 'search']::-webkit-search-results-button,
+ .sf-float-input.sf-control-wrapper input[type = 'search']::-webkit-search-results-decoration {
+ -webkit-appearance: none;
+ }
+
+ .sf-float-input.sf-input-group .sf-float-line,
+ .sf-float-input.sf-input-group.sf-control-wrapper .sf-float-line,
+ .sf-float-input.sf-control-wrapper.sf-input-group .sf-float-line,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-control-wrapper .sf-float-line {
+ @if $input-skin-name == 'fluent2' {
+ bottom: -.1px;
+ position: absolute;
+ }
+ @else {
+ bottom: -1px;
+ position: absolute;
+ }
+ }
+
+ .sf-float-input.sf-input-group input,
+ .sf-float-input.sf-input-group textarea,
+ .sf-float-input.sf-input-group.sf-control-wrapper input,
+ .sf-float-input.sf-input-group.sf-control-wrapper textarea {
+ border: $zero-value;
+ }
+
+ .sf-float-input.sf-input-group .sf-float-line,
+ .sf-float-input.sf-input-group .sf-float-text,
+ .sf-float-input.sf-input-group.sf-control-wrapper .sf-float-line,
+ .sf-float-input.sf-input-group.sf-control-wrapper .sf-float-text {
+ right: $zero-value;
+ }
+
+
+ input.sf-input#{$css}::-webkit-input-placeholder,
+ input.sf-input#{$css}:-moz-placeholder,
+ input.sf-input#{$css}:-ms-input-placeholder,
+ input.sf-input#{$css}::-moz-placeholder,
+ textarea.sf-input#{$css}::-webkit-input-placeholder,
+ textarea.sf-input#{$css}:-moz-placeholder,
+ textarea.sf-input#{$css}:-ms-input-placeholder,
+ textarea.sf-input#{$css}::-moz-placeholder,
+ textarea.sf-input#{$css}::-webkit-textarea-placeholder,
+ textarea.sf-input#{$css}:-moz-placeholder,
+ textarea.sf-input#{$css}:-ms-textarea-placeholder,
+ textarea.sf-input#{$css}::-moz-placeholder {
+ font-size: $input-font-size;
+ font-style: $input-font-style;
+ }
+
+ .sf-small input.sf-input#{$css}::-webkit-input-placeholder,
+ input.sf-small.sf-input#{$css}::-webkit-input-placeholder,
+ .sf-small input.sf-input#{$css}:-moz-placeholder,
+ input.sf-small.sf-input#{$css}:-moz-placeholder,
+ .sf-small input.sf-input#{$css}:-ms-input-placeholder,
+ input.sf-small.sf-input#{$css}:-ms-input-placeholder,
+ .sf-small input.sf-input#{$css}::-moz-placeholder,
+ input.sf-small.sf-input#{$css}::-moz-placeholder,
+ .sf-small textarea.sf-input#{$css}::-webkit-input-placeholder,
+ textarea.sf-small.sf-input#{$css}::-webkit-input-placeholder,
+ .sf-small textarea.sf-input#{$css}:-moz-placeholder,
+ textarea.sf-small.sf-input#{$css}:-moz-placeholder,
+ .sf-small textarea.sf-input#{$css}:-ms-input-placeholder,
+ textarea.sf-small.sf-input#{$css}:-ms-input-placeholder,
+ .sf-small textarea.sf-input#{$css}::-moz-placeholder,
+ textarea.sf-small.sf-input#{$css}::-moz-placeholder,
+ .sf-small textarea.sf-input#{$css}::-webkit-textarea-placeholder,
+ textarea.sf-small.sf-input#{$css}::-webkit-textarea-placeholder,
+ .sf-small textarea.sf-input#{$css}:-moz-placeholder,
+ textarea.sf-small.sf-input#{$css}:-moz-placeholder,
+ .sf-small textarea.sf-input#{$css}:-ms-input-placeholder,
+ textarea.sf-small.sf-input#{$css}:-ms-input-placeholder,
+ .sf-small textarea.sf-input#{$css}::-moz-placeholder,
+ textarea.sf-small.sf-input#{$css}::-moz-placeholder {
+ font-size: $input-small-font-size;
+ font-style: $input-font-style;
+ }
+
+ input.sf-input#{$css}:-moz-placeholder,
+ textarea.sf-input#{$css}:-moz-placeholder,
+ .sf-input-group input.sf-input:-moz-placeholder,
+ .sf-input-group textarea.sf-input:-moz-placeholder,
+ .sf-input-group.sf-control-wrapper input.sf-input:-moz-placeholder,
+ .sf-input-group.sf-control-wrapper textarea.sf-input:-moz-placeholder,
+ input.sf-input#{$css}:-moz-placeholder,
+ .sf-input-group input.sf-input:-moz-placeholder,
+ .sf-input-group.sf-control-wrapper input.sf-input:-moz-placeholder,
+ textarea.sf-input#{$css}:-moz-placeholder,
+ input.sf-input#{$css}::-moz-placeholder,
+ textarea.sf-input#{$css}::-moz-placeholder,
+ input.sf-input#{$css}::-webkit-input-placeholder,
+ textarea.sf-input#{$css}::-webkit-input-placeholder {
+ font-style: $input-font-style;
+ user-select: none;
+ }
+
+ input.sf-input#{$css}:-ms-input-placeholder,
+ textarea.sf-input#{$css}:-ms-input-placeholder {
+ font-style: $input-font-style;
+ }
+
+ input.sf-input#{$css},
+ .sf-input-group input,
+ .sf-input-group.sf-control-wrapper input,
+ .sf-input-group input.sf-input,
+ .sf-input-group.sf-control-wrapper input.sf-input {
+ @include input-sizing;
+ @include input-height ($input-normal-height);
+ }
+
+ .sf-float-input:not(.sf-input-group) input,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-group) input {
+ @include input-sizing;
+ @include input-height ($float-input-normal-height);
+ }
+
+ .sf-control input.sf-input,
+ .sf-control .sf-input-group input,
+ .sf-control .sf-input-group input.sf-input,
+ .sf-control .sf-input-group.sf-control-wrapper input,
+ .sf-control .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-control .sf-float-input input,
+ .sf-control .sf-float-input.sf-control-wrapper input,
+ .sf-control.sf-input-group input,
+ .sf-control.sf-input-group input.sf-input,
+ .sf-control.sf-input-group.sf-control-wrapper input,
+ .sf-control.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-control.sf-float-input input,
+ .sf-control.sf-float-input.sf-control-wrapper input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-sizing;
+ }
+ }
+
+ input.sf-input.sf-small#{$css},
+ .sf-input-group.sf-small input,
+ .sf-input-group.sf-small input.sf-input,
+ .sf-small .sf-input-group input,
+ .sf-small .sf-input-group input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small input,
+ .sf-input-group.sf-control-wrapper.sf-small input.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper input,
+ .sf-small .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-float-input.sf-small input,
+ .sf-float-input.sf-small input.sf-input,
+ .sf-small .sf-float-input input,
+ .sf-small .sf-float-input input.sf-input,
+ .sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-float-input.sf-control-wrapper.sf-small input.sf-input,
+ .sf-small .sf-float-input.sf-control-wrapper input,
+ .sf-small .sf-float-input.sf-control-wrapper input.sf-input {
+ @include input-sizing;
+ @include input-height ($input-small-height);
+ }
+
+ .sf-float-input.sf-small:not(.sf-input-group) input,
+ .sf-float-input.sf-small:not(.sf-input-group) input.sf-input,
+ .sf-small .sf-float-input:not(.sf-input-group) input,
+ .sf-small .sf-float-input:not(.sf-input-group) input.sf-input .sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-group) input,
+ .sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-group) input.sf-input,
+ .sf-small .sf-float-input.sf-control-wrapper:not(.sf-input-group) input,
+ .sf-small .sf-float-input.sf-control-wrapper:not(.sf-input-group) input.sf-input {
+ @include input-sizing;
+ @include input-height ($float-input-small-height);
+ }
+
+ textarea.sf-input#{$css},
+ .sf-input-group textarea,
+ .sf-input-group.sf-control-wrapper textarea,
+ .sf-float-input textarea,
+ .sf-float-input.sf-control-wrapper textarea {
+ @include input-sizing;
+ @include input-height ($textarea-normal-height);
+ }
+
+ textarea.sf-input.sf-small#{$css},
+ .sf-input-group.sf-small textarea,
+ .sf-input-group.sf-small textarea.sf-input,
+ .sf-small .sf-input-group textarea,
+ .sf-small .sf-input-group textarea.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small textarea,
+ .sf-input-group.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper textarea,
+ .sf-small .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-float-input.sf-small textarea,
+ .sf-float-input.sf-small textarea.sf-input,
+ .sf-small .sf-float-input textarea,
+ .sf-small .sf-float-input textarea.sf-input,
+ .sf-float-input.sf-control-wrapper.sf-small textarea,
+ .sf-float-input.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-small .sf-float-input.sf-control-wrapper textarea,
+ .sf-small .sf-float-input.sf-control-wrapper textarea.sf-input {
+ @include input-sizing;
+ @include input-height ($textarea-small-height);
+ }
+
+ input.sf-input#{$css}.sf-small,
+ .sf-input-group input.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper input.sf-input.sf-small,
+ .sf-input-group.sf-small .sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-input,
+ .sf-small input.sf-input#{$css},
+ .sf-small .sf-input-group .sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper .sf-input,
+ .sf-float-input.sf-small input,
+ .sf-float-input input.sf-small,
+ .sf-small .sf-float-input input,
+ .sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-float-input.sf-control-wrapper input.sf-small,
+ .sf-small .sf-float-input.sf-control-wrapper input,
+ textarea.sf-input#{$css}.sf-small,
+ .sf-input-group textarea.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper input.sf-input-group textarea.sf-input.sf-small,
+ .sf-small input.sf-input#{$css},
+ .sf-float-input.sf-small textarea,
+ .sf-float-input textarea.sf-small,
+ .sf-small .sf-float-input textarea,
+ .sf-float-input.sf-control-wrapper.sf-small textarea,
+ .sf-float-input.sf-control-wrapper textarea.sf-small,
+ .sf-small .sf-float-input.sf-control-wrapper textarea {
+ text-indent: $input-small-text-indent;
+ }
+
+ input.sf-input#{$css},
+ .sf-input-group input.sf-input,
+ .sf-input-group input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group.sf-control-wrapper input,
+ .sf-float-input input.sf-input,
+ .sf-float-input input,
+ .sf-float-input.sf-control-wrapper input.sf-input,
+ .sf-float-input.sf-control-wrapper input,
+ .sf-input-group input.sf-input:focus,
+ .sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-float-input.sf-control-wrapper input:focus,
+ .sf-float-input input:focus,
+ .sf-input-group.sf-input-focus input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+ .sf-float-input.sf-control-wrapper.sf-input-focus input,
+ .sf-float-input.sf-input-focus input {
+ padding-left: $input-text-indent;
+ text-indent: 0;
+ }
+
+ textarea.sf-input#{$css},
+ .sf-input-group textarea.sf-input,
+ .sf-input-group textarea,
+ .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-input-group.sf-control-wrapper textarea,
+ .sf-float-input textarea.sf-input,
+ .sf-float-input textarea,
+ .sf-float-input.sf-control-wrapper textarea.sf-input,
+ .sf-float-input.sf-control-wrapper textarea,
+ .sf-input-group textarea.sf-input:focus,
+ .sf-input-group.sf-control-wrapper textarea.sf-input:focus,
+ .sf-float-input.sf-control-wrapper textarea:focus,
+ .sf-float-input textarea:focus {
+ @if $input-skin-name == 'fluent2' {
+ padding-left: 12px;
+ }
+ @else {
+ padding-left: $input-text-indent;
+ }
+ text-indent: 0;
+ }
+
+ input.sf-input.sf-rtl#{$css},
+ .sf-input-group.sf-rtl input.sf-input,
+ .sf-input-group.sf-control-container.sf-rtl input.sf-control,
+ .sf-input-group.sf-control-wrapper.sf-rtl input.sf-input,
+ .sf-float-input.sf-rtl input,
+ .sf-float-input.sf-control-wrapper.sf-rtl input,
+ .sf-rtl .sf-input-group input.sf-input,
+ .sf-rtl .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-rtl .sf-float-input input,
+ .sf-rtl .sf-float-input.sf-control-wrapper input,
+ .sf-input-group.sf-rtl input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-rtl input.sf-input,
+ .sf-float-input.sf-rtl input,
+ .sf-float-input.sf-control-wrapper.sf-rtl input,
+ .sf-rtl .sf-input-group input.sf-input,
+ .sf-rtl .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-rtl .sf-float-input input,
+ .sf-rtl .sf-float-input.sf-control-wrapper input,
+ .sf-input-group.sf-rtl input.sf-input:focus,
+ .sf-input-group.sf-control-wrapper.sf-rtl input.sf-input:focus,
+ .sf-float-input.sf-rtl input:focus,
+ .sf-float-input.sf-control-wrapper.sf-rtl input:focus,
+ .sf-rtl .sf-input-group input.sf-input:focus,
+ .sf-rtl .sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-rtl .sf-float-input input:focus,
+ .sf-rtl .sf-float-input.sf-control-wrapper input:focus,
+ .sf-input-group.sf-rtl.sf-input-focus input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-rtl.sf-input-focus input.sf-input,
+ .sf-rtl .sf-input-group.sf-input-focus input.sf-input,
+ .sf-rtl .sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+ .sf-float-input.sf-rtl.sf-input-focus input,
+ .sf-float-input.sf-control-wrapper.sf-rtl.sf-input-focus input,
+ .sf-rtl .sf-float-input.sf-input-focus input,
+ .sf-rtl .sf-float-input.sf-control-wrapper.sf-input-focus input {
+ padding-left: 0;
+ padding-right: $input-text-indent;
+ text-indent: 0;
+ }
+
+ textarea.sf-input.sf-rtl#{$css},
+ .sf-input-group:not(.sf-outline).sf-rtl textarea.sf-input,
+ .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-input,
+ .sf-float-input:not(.sf-outline).sf-rtl textarea,
+ .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-rtl textarea,
+ .sf-rtl .sf-input-group:not(.sf-outline) textarea.sf-input,
+ .sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper textarea.sf-input,
+ .sf-rtl .sf-float-input:not(.sf-outline) textarea,
+ .sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper textarea,
+ .sf-input-group:not(.sf-outline).sf-rtl textarea.sf-input,
+ .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-input,
+ .sf-float-input:not(.sf-outline).sf-rtl textarea,
+ .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-rtl textarea,
+ .sf-rtl .sf-input-group:not(.sf-outline) textarea.sf-input,
+ .sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper textarea.sf-input,
+ .sf-rtl .sf-float-input:not(.sf-outline) textarea,
+ .sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper textarea,
+ .sf-input-group:not(.sf-outline).sf-rtl textarea.sf-input:focus,
+ .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-input:focus,
+ .sf-float-input:not(.sf-outline).sf-rtl textarea:focus,
+ .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-rtl textarea:focus,
+ .sf-rtl .sf-input-group:not(.sf-outline) textarea.sf-input:focus,
+ .sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper textarea.sf-input:focus,
+ .sf-rtl .sf-float-input:not(.sf-outline) textarea:focus,
+ .sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper textarea:focus {
+ padding-right: $input-text-indent;
+ text-indent: 0;
+ }
+
+ input.sf-input.sf-small#{$css},
+ .sf-small input.sf-input#{$css},
+ .sf-input-group.sf-small input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small input.sf-input,
+ .sf-float-input.sf-small input,
+ .sf-float-input.sf-control-wrapper input.sf-small,
+ .sf-float-input.sf-small input,
+ .sf-float-input.sf-control-wrapper input.sf-small,
+ .sf-input-group input.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper input.sf-input.sf-small,
+ .sf-small .sf-float-input input,
+ .sf-small .sf-float-input.sf-control-wrapper input,
+ .sf-small .sf-input-group input.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-input-group.sf-small input.sf-input:focus,
+ .sf-input-group.sf-control-wrapper.sf-small input.sf-input:focus,
+ .sf-float-input.sf-small input:focus,
+ .sf-float-input.sf-control-wrapper.sf-small input:focus,
+ .sf-small .sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-small .sf-input-group input.sf-input:focus,
+ .sf-small .sf-float-input input:focus,
+ .sf-small .sf-float-input.sf-control-wrapper input:focus,
+ .sf-input-group.sf-small.sf-input-focus input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small.sf-input-focus input.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+ .sf-small .sf-input-group.sf-input-focus input.sf-input,
+ .sf-float-input.sf-small.sf-input-focus input,
+ .sf-float-input.sf-control-wrapper.sf-input-focus.sf-small input,
+ .sf-small .sf-float-input.sf-input-focus input,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-input-focus input,
+ textarea.sf-input.sf-small#{$css},
+ .sf-small textarea.sf-input#{$css},
+ .sf-input-group.sf-small textarea.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-float-input.sf-control-wrapper.sf-small textarea,
+ .sf-float-input.sf-control-wrapper textarea.sf-small,
+ .sf-float-input.sf-small textarea,
+ .sf-float-input textarea.sf-small,
+ .sf-input-group textarea.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper textarea.sf-input.sf-small,
+ .sf-small .sf-float-input.sf-control-wrapper textarea,
+ .sf-small .sf-float-input textarea,
+ .sf-small .sf-input-group textarea.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-input-group.sf-small textarea.sf-input:focus,
+ .sf-input-group.sf-control-wrapper.sf-small textarea.sf-input:focus,
+ .sf-float-input.sf-small textarea:focus,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:focus,
+ .sf-small .sf-input-group textarea.sf-input:focus,
+ .sf-small .sf-input-group.sf-control-wrapper textarea.sf-input:focus,
+ .sf-small .sf-float-input.sf-control-wrapper textarea:focus,
+ .sf-small .sf-float-input textarea:focus {
+ padding-left: $input-small-text-indent;
+ text-indent: 0;
+ }
+
+ .sf-rtl input.sf-input.sf-small#{$css},
+ input.sf-input#{$css}.sf-small.sf-rtl,
+ .sf-small.sf-rtl input.sf-input#{$css},
+ .sf-small input.sf-input.sf-rtl#{$css},
+ .sf-float-input.sf-control-wrapper.sf-small.sf-rtl input,
+ .sf-float-input.sf-small.sf-rtl input,
+ .sf-input-group.sf-small.sf-rtl input.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small.sf-rtl input.sf-input,
+ .sf-rtl .sf-float-input.sf-small input,
+ .sf-rtl .sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-rtl .sf-input-group.sf-small input.sf-input,
+ .sf-rtl .sf-input-group.sf-control-wrapper.sf-small input.sf-input,
+ .sf-float-input.sf-rtl input.sf-small,
+ .sf-float-input.sf-control-wrapper.sf-rtl input.sf-small,
+ .sf-input-group.sf-rtl input.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-rtl input.sf-input.sf-small,
+ .sf-rtl .sf-float-input input.sf-small,
+ .sf-rtl .sf-float-input.sf-control-wrapper input.sf-small,
+ .sf-rtl .sf-input-group input.sf-input.sf-small,
+ .sf-rtl .sf-input-group.sf-control-wrapper input.sf-input.sf-small,
+ .sf-small .sf-float-input.sf-rtl input,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-rtl input,
+ .sf-small .sf-input-group.sf-rtl input.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-rtl input.sf-input,
+ .sf-small.sf-rtl .sf-float-input.sf-control-wrapper input,
+ .sf-small.sf-rtl .sf-float-input input,
+ .sf-small.sf-rtl .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-small.sf-rtl .sf-input-group input.sf-input,
+ .sf-small.sf-rtl .sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-small.sf-rtl .sf-input-group input.sf-input:focus,
+ .sf-small.sf-rtl .sf-float-input.sf-control-wrapper input:focus,
+ .sf-small.sf-rtl .sf-float-input input:focus,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-rtl input.sf-input:focus,
+ .sf-small .sf-input-group.sf-rtl input.sf-input:focus,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-rtl input:focus,
+ .sf-small .sf-float-input.sf-rtl input:focus,
+ .sf-small.sf-rtl .sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+ .sf-small.sf-rtl .sf-input-group.sf-input-focus input.sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-rtl.sf-input-focus input.sf-input,
+ .sf-small .sf-input-group.sf-rtl.sf-input-focus input.sf-input,
+ .sf-small.sf-rtl .sf-float-input.sf-control-wrapper.sf-input-focus input,
+ .sf-small.sf-rtl .sf-float-input.sf-input-focus input,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-rtl.sf-input-focus input,
+ .sf-small .sf-float-input.sf-rtl.sf-input-focus input {
+ padding-left: 0;
+ padding-right: $input-small-text-indent;
+ text-indent: 0;
+ }
+
+ .sf-rtl textarea.sf-input.sf-small#{$css},
+ textarea.sf-input.sf-small.sf-rtl#{$css},
+ .sf-small.sf-rtl textarea.sf-input#{$css},
+ .sf-small textarea.sf-input.sf-rtl#{$css},
+ .sf-float-input:not(.sf-outline).sf-small.sf-rtl textarea,
+ .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-small.sf-rtl textarea,
+ .sf-input-group:not(.sf-outline).sf-small.sf-rtl textarea.sf-input,
+ .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-small.sf-rtl textarea.sf-input,
+ .sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-small textarea,
+ .sf-rtl .sf-float-input:not(.sf-outline).sf-small textarea,
+ .sf-rtl .sf-input-group:not(.sf-outline).sf-small textarea.sf-input,
+ .sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-small,
+ .sf-float-input:not(.sf-outline).sf-rtl textarea.sf-small,
+ .sf-input-group:not(.sf-outline).sf-rtl textarea.sf-input.sf-small,
+ .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-input.sf-small,
+ .sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper textarea.sf-small,
+ .sf-rtl .sf-float-input:not(.sf-outline) textarea.sf-small,
+ .sf-rtl .sf-input-group:not(.sf-outline) textarea.sf-input.sf-small,
+ .sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper textarea.sf-input.sf-small,
+ .sf-small .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-rtl textarea,
+ .sf-small .sf-float-input:not(.sf-outline).sf-rtl textarea,
+ .sf-small .sf-input-group:not(.sf-outline).sf-rtl textarea.sf-input,
+ .sf-small .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-input,
+ .sf-small.sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper textarea,
+ .sf-small.sf-rtl .sf-float-input:not(.sf-outline) textarea,
+ .sf-small.sf-rtl .sf-input-group:not(.sf-outline) textarea.sf-input,
+ .sf-small.sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper textarea.sf-input,
+ .sf-small.sf-rtl .sf-input-group:not(.sf-outline) textarea.sf-input:focus,
+ .sf-small.sf-rtl .sf-input-group:not(.sf-outline).sf-control-wrapper textarea.sf-input:focus,
+ .sf-small.sf-rtl .sf-float-input:not(.sf-outline).sf-control-wrapper textarea:focus,
+ .sf-small.sf-rtl .sf-float-input:not(.sf-outline) textarea:focus,
+ .sf-small .sf-input-group:not(.sf-outline).sf-rtl textarea.sf-input:focus,
+ .sf-small .sf-input-group:not(.sf-outline).sf-control-wrapper.sf-rtl textarea.sf-input:focus,
+ .sf-small .sf-float-input:not(.sf-outline).sf-control-wrapper.sf-rtl textarea:focus,
+ .sf-small .sf-float-input:not(.sf-outline).sf-rtl textarea:focus {
+ padding-right: $input-small-text-indent;
+ text-indent: 0;
+ }
+
+ .sf-float-input .sf-clear-icon,
+ .sf-float-input.sf-control-wrapper .sf-clear-icon,
+ .sf-input-group .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper .sf-clear-icon {
+ background: transparent;
+ border: $zero-value;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ justify-content: $input-clear-icon-position;
+ line-height: 1;
+ min-width: 24px;
+ outline: none;
+ padding: $input-clear-icon-padding;
+ text-align: center;
+ }
+
+ .sf-float-input.sf-static-clear .sf-clear-icon.sf-clear-icon-hide,
+ .sf-float-input.sf-control-wrapper.sf-static-clear .sf-clear-icon.sf-clear-icon-hide,
+ .sf-input-group.sf-static-clear .sf-clear-icon.sf-clear-icon-hide,
+ .sf-input-group.sf-control-wrapper.sf-static-clear .sf-clear-icon.sf-clear-icon-hide {
+ cursor: pointer;
+ display: flex;
+ }
+
+ .sf-input-group.sf-static-clear .sf-clear-icon.sf-clear-icon-hide,
+ .sf-input-group.sf-control-wrapper.sf-static-clear .sf-clear-icon.sf-clear-icon-hide {
+ cursor: pointer;
+ }
+
+ .sf-float-input.sf-control-wrapper input[readonly]:first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-control-wrapper.sf-input-group input[readonly]:first-child ~ .sf-clear-icon,
+ .sf-float-input input[readonly]:first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-input-group input[readonly]:first-child ~ .sf-clear-icon,
+ .sf-input-group input[readonly]:first-child ~ .sf-clear-icon.sf-clear-icon-hide,
+ .sf-float-input.sf-control-wrapper.sf-input-group input[readonly]:first-child ~ .sf-clear-icon,
+ .sf-float-input.sf-input-group.sf-control-wrapper input[readonly]:first-child ~ .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper input[readonly]:first-child .sf-clear-icon.sf-clear-icon-hide {
+ cursor: auto;
+ }
+
+ .sf-input-group .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper .sf-clear-icon {
+ min-height: $input-clear-icon-min-height;
+ min-width: $input-clear-icon-min-width;
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+ padding-bottom: $input-clear-icon-padding-bottom;
+ padding-left: $input-clear-icon-padding-left;
+ padding-right: $input-clear-icon-padding-right;
+ padding-top: $input-clear-icon-padding-top;
+ }
+ @else {
+ padding: $input-clear-icon-padding;
+ margin: $input-clear-icon-margin;
+ border-radius: $input-clear-icon-hover-border-radius;
+ }
+ }
+
+ .sf-float-input.sf-input-group .sf-clear-icon,
+ .sf-float-input.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
+ padding-right: $input-clear-icon-padding-right;
+ padding-top: $float-input-clear-icon-padding-top;
+ }
+ }
+
+ .sf-input-group.sf-small .sf-clear-icon,
+ .sf-input-group .sf-clear-icon.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper .sf-clear-icon.sf-small {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+ min-height: $input-bigger-clear-icon-min-height;
+ min-width: $input-bigger-clear-icon-min-width;
+ padding-bottom: $input-clear-icon-bigger-padding-bottom;
+ padding-right: $input-clear-icon-bigger-padding-right;
+ padding-top: $input-clear-icon-bigger-padding-top;
+ }
+ @else {
+ min-height: $input-bigger-small-clear-icon-min-height;
+ min-width: $input-bigger-small-clear-icon-min-width;
+ padding: $input-clear-icon-padding;
+ margin: $input-clear-icon-margin;
+ border-radius: $input-bigger-clear-icon-border-radius;
+ }
+ }
+
+ .sf-input-group.sf-small .sf-clear-icon,
+ .sf-input-group .sf-clear-icon.sf-small,
+ .sf-small .sf-input-group .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper .sf-clear-icon.sf-small,
+ .sf-small .sf-input-group.sf-control-wrapper .sf-clear-icon {
+ min-height: $input-small-clear-icon-min-height;
+ min-width: $input-small-clear-icon-min-width;
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+ padding-bottom: $input-clear-icon-small-padding-bottom;
+ padding-right: $input-clear-icon-small-padding-right;
+ padding-top: $input-clear-icon-small-padding-top;
+ }
+ @else {
+ padding: $input-clear-icon-padding;
+ margin: $input-clear-icon-margin;
+ border-radius: $input-small-clear-icon-border-radius;
+ }
+ }
+
+ .sf-input-group.sf-float-input.sf-small .sf-clear-icon,
+ .sf-input-group.sf-float-input .sf-clear-icon.sf-small,
+ .sf-small .sf-input-group.sf-float-input .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-input.sf-small .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon.sf-small,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon,
+ .sf-input-group.sf-float-input.sf-control-wrapper.sf-small .sf-clear-icon,
+ .sf-input-group.sf-float-input.sf-control-wrapper .sf-clear-icon.sf-small,
+ .sf-small .sf-input-group.sf-float-input.sf-control-wrapper .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-input.sf-small .sf-clear-icon,
+ .sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon.sf-small,
+ .sf-small .sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
+ padding-right: $input-clear-icon-small-padding-right;
+ padding-top: $float-input-clear-icon-small-padding-top;
+ }
+ }
+
+ .sf-input#{$css}:not(:valid),
+ .sf-input#{$css}:valid,
+ .sf-float-input.sf-control-wrapper input:not(:valid),
+ .sf-float-input.sf-control-wrapper input:valid,
+ .sf-float-input input:not(:valid),
+ .sf-float-input input:valid,
+ .sf-input-group input:not(:valid),
+ .sf-input-group input:valid,
+ .sf-input-group.sf-control-wrapper input:not(:valid),
+ .sf-input-group.sf-control-wrapper input:valid,
+ .sf-float-input.sf-control-wrapper textarea:not(:valid),
+ .sf-float-input.sf-control-wrapper textarea:valid,
+ .sf-float-input textarea:not(:valid),
+ .sf-float-input textarea:valid,
+ .sf-input-group.sf-control-wrapper textarea:not(:valid),
+ .sf-input-group.sf-control-wrapper textarea:valid,
+ .sf-input-group textarea:not(:valid),
+ .sf-input-group textarea:valid {
+ box-shadow: none;
+ }
+
+ .sf-input-group .sf-input-in-wrap,
+ .sf-input-group.sf-control-wrapper .sf-input-in-wrap,
+ .sf-float-input .sf-input-in-wrap,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap {
+ width: 100%;
+ @if $input-skin-name == 'bootstrap5.3' $input-skin-name == 'tailwind3' {
+ display: flex;
+ position: relative;
+ }
+ }
+
+ .sf-float-input .sf-input-in-wrap label.sf-float-text,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text {
+ right: 0;
+ @if $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3' {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+ }
+ }
+
+ .sf-input-group .sf-input-in-wrap,
+ .sf-input-group.sf-control-wrapper .sf-input-in-wrap,
+ .sf-float-input .sf-input-in-wrap,
+ .sf-float-input.sf-control-wrapper .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ display: flex;
+ position: relative;
+ width: 100%;
+ }
+ }
+
+ .sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' {
+ border: $input-group-full-border;
+ border-width: $input-group-full-border-width;
+ margin-left: $input-inner-wrap-margin-left;
+ }
+ @if $input-skin-name == 'fluent2' {
+ border-width: $input-group-full-border-width;
+ margin-left: $input-inner-wrap-margin-left;
+ }
+ }
+
+ .sf-rtl .sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap .sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-float-input.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-input-group.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ margin-left: $zero-value;
+ margin-right: $input-inner-wrap-margin-left;
+ }
+ }
+
+ .sf-float-input label.sf-float-text.sf-label-bottom,
+ .sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' {
+ transform: translate3d(0, 16px, 0) scale(1);
+ }
+ @if $input-skin-name == 'fluent2' {
+ transform: translate3d(0, 16px, 0) scale(1);
+ padding-left: 7px;
+ }
+ }
+
+ .sf-float-input textarea:focus ~ label.sf-float-text,
+ .sf-float-input textarea:valid ~ label.sf-float-text,
+ .sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-float-input textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input textarea label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper textarea:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea label.sf-float-text.sf-label-top {
+ font-size: $float-label-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ top: $textarea-float-top;
+ transform: translate3d(0, 6px, 0) scale(.92);
+ @if $input-skin-name == 'tailwind3' {
+ left: 2px;
+ }
+ }
+ @else if ($input-skin-name == 'bootstrap5.3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -36px, 0) scale(1);
+ }
+ }
+
+ .sf-float-input.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-float-input.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-float-input.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text {
+ font-size: $float-label-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -21px;
+ }
+ @if $input-skin-name == 'tailwind3' {
+ top: -21px;
+ left: 2px;
+ }
+ @else if $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3' {
+ top: 16px;
+ }
+ }
+
+ .sf-float-input textarea ~ .sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea ~ .sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -11px;
+ }
+ @else if $input-skin-name == 'bootstrap5.3' {
+ top: 15px;
+ }
+ @else if $input-skin-name == 'tailwind3' {
+ top: 13px;
+ }
+ }
+
+ .sf-float-input.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-placeholder-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -11px;
+ }
+ }
+
+ .sf-float-input.sf-small textarea ~ label.sf-float-text,
+ .sf-float-input textarea ~ label.sf-float-text.sf-small,
+ .sf-float-input textarea.sf-small ~ label.sf-float-text,
+ .sf-small .sf-float-input textarea ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text.sf-small,
+ .sf-float-input.sf-control-wrapper textarea.sf-small ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text {
+ font-size: $float-placeholder-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -11px;
+ }
+ @else if $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind3' {
+ top: 15px;
+ }
+ }
+
+ .sf-input-group.sf-small:not(.sf-float-input) .sf-input,
+ .sf-small .sf-input-group:not(.sf-float-input) .sf-input,
+ .sf-input-group.sf-control-wrapper.sf-small:not(.sf-float-input) .sf-input,
+ .sf-small .sf-input-group.sf-control-wrapper:not(.sf-float-input) .sf-input,
+ .sf-float-input.sf-small input,
+ .sf-small .sf-float-input input,
+ .sf-float-input.sf-input-group.sf-small input,
+ .sf-small .sf-float-input.sf-input-group input,
+ .sf-float-input.sf-input-group.sf-control-wrapper.sf-small input,
+ .sf-small .sf-float-input.sf-input-group.sf-control-wrapper input,
+ .sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-small .sf-float-input.sf-control-wrapper input,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-input-group input,
+ .sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-input-group input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ min-height: 18px;
+ }
+ }
+
+ .sf-input-group input.sf-input,
+ .sf-float-input.sf-input-group input,
+ .sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-float-input.sf-input-group.sf-control-wrapper input,
+ .sf-float-input input,
+ .sf-float-input.sf-control-wrapper input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ min-height: 22px;
+ }
+ }
+
+ .sf-input-group:hover:not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+ .sf-input-group.sf-control-wrapper:hover:not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+ .sf-float-input:hover:not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) input:not([disabled]),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea:not([disabled]),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) input:not([disabled]),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) input:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) input:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea:not([disabled]) {
+ @if $input-skin-name == 'Material3' {
+ border-bottom-width: $input-group-border-width-hover;
+ }
+ @else if $input-skin-name == 'fluent2' {
+ border-bottom-width: $input-group-border-width-hover;
+ border-color: $input-group-border-color-hover;
+ }
+ }
+
+ .sf-input-group:hover:not(.sf-disabled),
+ .sf-input-group.sf-control-wrapper:hover:not(.sf-disabled),
+ .sf-float-input:hover:not(.sf-disabled),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-disabled),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]) {
+ @if $input-skin-name != 'Material3' {
+ border-bottom-width: $input-group-border-width-hover;
+ }
+ }
+
+ .sf-input-group.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover,
+ .sf-float-input.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover,
+ .sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ border-bottom-width: $input-group-border-width-hover;
+ }
+ }
+
+ .sf-input-group:not(.sf-disabled):not(.sf-float-icon-left)::before,
+ .sf-input-group:not(.sf-disabled):not(.sf-float-icon-left)::after,
+ .sf-input-group.sf-float-icon-left:not(.sf-disabled) .sf-input-in-wrap::before,
+ .sf-input-group.sf-float-icon-left:not(.sf-disabled) .sf-input-in-wrap::after,
+ .sf-input-group.sf-control-wrapper:not(.sf-disabled):not(.sf-float-icon-left)::before,
+ .sf-input-group.sf-control-wrapper:not(.sf-disabled):not(.sf-float-icon-left)::after,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled) .sf-input-in-wrap::before,
+ .sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled) .sf-input-in-wrap::after {
+ @if $input-skin-name == 'Material3' {
+ bottom: -2px;
+ }
+ @else if $input-skin-name == 'fluent2' {
+ bottom: -.3px;
+ }
+ }
+
+ .sf-float-input:not(.sf-outline) input:-webkit-autofill ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-outline) input:-webkit-autofill ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus):not(.sf-outline) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-label-font-size;
+ @if $input-skin-name == 'Material3' {
+ top: -9px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ @else if $input-skin-name == 'bootstrap5.3' {
+ font-weight: bold;
+ padding-right: 0;
+ transform: translate3d(-10px, -39px, 0) scale(1);
+ }
+ user-select: text;
+ }
+
+ .sf-small .sf-float-input:not(.sf-outline) input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-float-input:not(.sf-outline) input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-outline) input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-outline) input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus):not(.sf-outline) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus):not(.sf-outline) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-label-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -8px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ @else if $input-skin-name == 'bootstrap5.3' {
+ font-weight: bold;
+ padding-right: 0;
+ top: 17px;
+ transform: translate3d(-10px, -39px, 0) scale(1);
+ }
+ user-select: text;
+ }
+
+ .sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ transform: translate3d(0, 16px, 0) scale(1);
+ }
+ }
+
+ .sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-placeholder-font-size;
+ font-style: $input-font-style;
+ font-weight: normal;
+ left: 0;
+ overflow: hidden;
+ padding-left: $float-label-padding;
+ pointer-events: none;
+ position: absolute;
+ text-overflow: ellipsis;
+ top: -11px;
+ transform: translate3d(0, 16px, 0) scale(1);
+ transform-origin: left top;
+ transition: .25s cubic-bezier(.25, .8, .25, 1);
+ user-select: none;
+ white-space: nowrap;
+ width: 100%;
+ }
+
+ .sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-label-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -9px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ @else if ($input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5.3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -40px, 0) scale(1);
+ }
+ user-select: text;
+ }
+
+ .sf-small .sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ font-size: $float-label-small-font-size;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ top: -8px;
+ transform: translate3d(0, -6px, 0) scale(.92);
+ }
+ user-select: text;
+ }
+
+ .sf-float-input.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-float-input.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-float-input.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-small textarea label.sf-float-text.sf-label-top,
+ .sf-small .sf-float-input textarea:focus ~ label.sf-float-text,
+ .sf-small .sf-float-input textarea:valid ~ label.sf-float-text,
+ .sf-small .sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input textarea label.sf-float-text.sf-label-top,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-float-input.sf-control-wrapper.sf-small textarea label.sf-float-text.sf-label-top,
+ .sf-small .sf-float-input.sf-control-wrapper textarea:focus ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-float-input.sf-control-wrapper textarea label.sf-float-text.sf-label-top {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ transform: translate3d(0, 6px, 0) scale(.86);
+ }
+ @else if ( $input-skin-name == 'bootstrap5.3') {
+ font-weight: 500;
+ padding-right: 0;
+ transform: translate3d(-10px, -35px, 0) scale(1);
+ }
+ }
+
+ .sf-float-input textarea[disabled],
+ .sf-float-input textarea.sf-disabled,
+ .sf-float-input.sf-control-wrapper textarea[disabled],
+ .sf-float-input.sf-control-wrapper textarea.sf-disabled {
+ @if $input-skin-name != 'Material3' {
+ border-color: $input-disable-border-color;
+ border-style: $input-disable-border-type;
+ }
+ }
+
+ .sf-float-input textarea[disabled],
+ .sf-float-input textarea.sf-disabled,
+ .sf-float-input.sf-control-wrapper textarea[disabled],
+ .sf-float-input.sf-control-wrapper textarea.sf-disabled {
+ background: transparent;
+ background-image: none;
+ cursor: not-allowed;
+ }
+
+ textarea.sf-input#{$css},
+ .sf-input-group textarea,
+ .sf-input-group textarea.sf-input,
+ .sf-input-group.sf-input-focus textarea,
+ .sf-input-group.sf-input-focus textarea.sf-input,
+ .sf-input-group.sf-control-wrapper textarea,
+ .sf-input-group.sf-control-wrapper.sf-input-focus textarea,
+ .sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-input-group.sf-control-wrapper.sf-input-focus textarea.sf-input,
+ .sf-float-input textarea,
+ .sf-float-input.sf-control-wrapper textarea {
+ line-height: 1.5;
+ min-height: $textarea-min-height;
+ min-width: 0;
+ padding: $textarea-padding;
+ }
+
+ .sf-input-group.sf-small textarea,
+ .sf-input-group.sf-small textarea.sf-input,
+ .sf-input-group textarea.sf-small,
+ .sf-input-group textarea.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-small textarea,
+ .sf-input-group.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-small .sf-input-group textarea,
+ .sf-small .sf-input-group textarea.sf-input,
+ .sf-float-input.sf-small textarea,
+ .sf-float-input textarea.sf-small,
+ .sf-float-input.sf-control-wrapper.sf-small textarea,
+ .sf-float-input.sf-control-wrapper textarea.sf-small,
+ .sf-small .sf-float-input textarea,
+ .sf-small .sf-float-input.sf-control-wrapper textarea {
+ font: inherit;
+ min-height: $textarea-small-min-height;
+ padding: $textarea-small-padding;
+ }
+
+ .sf-input-group.sf-input-focus.sf-small textarea,
+ .sf-input-group.sf-input-focus.sf-small textarea.sf-input,
+ .sf-input-group.sf-input-focus textarea.sf-small,
+ .sf-input-group.sf-input-focus textarea.sf-input.sf-small,
+ .sf-input-group.sf-input-focus textarea.sf-input.sf-small,
+ .sf-input-group.sf-control-wrapper.sf-input-focus.sf-small textarea,
+ .sf-input-group.sf-control-wrapper.sf-input-focus.sf-small textarea.sf-input,
+ .sf-small .sf-input-group.sf-input-focus textarea,
+ .sf-small .sf-input-group.sf-input-focus textarea.sf-input {
+ font: inherit;
+ min-height: $textarea-small-min-height;
+ padding: $textarea-small-padding;
+ }
+
+ .sf-input-group.sf-small textarea:focus,
+ .sf-input-group.sf-small textarea.sf-input:focus,
+ .sf-input-group textarea.sf-small:focus,
+ .sf-input-group textarea.sf-input.sf-small:focus,
+ .sf-input-group.sf-control-wrapper.sf-small textarea:focus,
+ .sf-input-group.sf-control-wrapper.sf-small textarea.sf-input:focus,
+ .sf-small .sf-input-group textarea:focus,
+ .sf-small .sf-input-group textarea.sf-input:focus,
+ .sf-float-input.sf-small textarea:focus,
+ .sf-float-input textarea.sf-small:focus,
+ .sf-float-input.sf-control-wrapper.sf-small textarea:focus,
+ .sf-float-input.sf-control-wrapper textarea.sf-small:focus,
+ .sf-small .sf-float-input textarea:focus,
+ .sf-small .sf-float-input.sf-control-wrapper textarea:focus {
+ padding: $textarea-small-padding;
+ }
+
+ input.sf-input.sf-small#{$css},
+ textarea.sf-input.sf-small#{$css},
+ .sf-small input.sf-input#{$css},
+ .sf-small textarea.sf-input #{$css} {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ min-height: $input-smaller-min-height;
+ }
+ }
+
+ input.sf-input#{$css},
+ textarea.sf-input#{$css} {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ min-height: $input-min-height;
+ }
+ }
+
+ .sf-underline.sf-input-group.sf-control-wrapper,
+ .sf-underline.sf-input-group,
+ .sf-underline.sf-input-group:not(.sf-float-icon-left),
+ .sf-underline.sf-float-input,
+ .sf-underline.sf-float-input.sf-control-wrapper,
+ .sf-underline.sf-input-group:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-success:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-warning:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-error:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper.sf-success:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-float-icon-left),
+ .sf-underline.sf-input-group.sf-control-wrapper.sf-error:not(.sf-float-icon-left) {
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border: 1px solid $underline-border-color;
+ border-width: $input-group-full-border-width;
+ padding-top: 1px;
+ border-radius: 0;
+ }
+ }
+
+ textarea.sf-outline.sf-input,
+ .sf-outline.sf-input-group textarea.sf-input,
+ .sf-outline.sf-input-group textarea,
+ .sf-outline.sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-outline.sf-input-group.sf-control-wrapper textarea,
+ .sf-outline.sf-float-input textarea.sf-input,
+ .sf-outline.sf-float-input textarea,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea.sf-input,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea,
+ .sf-outline.sf-input-group:not(.sf-float-icon-left) textarea.sf-input:focus,
+ .sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left) textarea.sf-input:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
+ box-sizing: border-box;
+ margin: $outline-textarea-margin-top;
+ padding: $zero-value $outline-input-padding-left $outline-input-padding-left;
+ }
+ }
+
+ .sf-outline.sf-float-input.sf-small input:focus ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-small input:valid ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-outline.sf-float-input input ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small input:focus ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small input:valid ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-outline.sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-outline.sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-small textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-small textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-small.sf-input-focus input ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
+ font-size: $outline-small-label-font-size;
+ }
+ }
+
+ .sf-outline.sf-float-input textarea:focus ~ label.sf-float-text,
+ .sf-outline.sf-float-input textarea:valid ~ label.sf-float-text,
+ .sf-outline.sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input textarea label.sf-float-text.sf-label-top,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea:focus ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-outline.sf-float-input.sf-control-wrapper textarea label.sf-float-text.sf-label-top {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
+ top: $outline-float-label-top;
+ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
+ }
+ @if $input-skin-name == 'tailwind3' {
+ left: 2px;
+ }
+ }
+
+ .sf-filled.sf-input-group,
+ .sf-filled.sf-input-group.sf-control-wrapper,
+ .sf-filled.sf-float-input,
+ .sf-filled.sf-float-input.sf-control-wrapper {
+ line-height: 1;
+ }
+
+ .sf-filled input.sf-input#{$css},
+ .sf-filled.sf-input-group input,
+ .sf-filled.sf-input-group.sf-control-wrapper input,
+ .sf-filled.sf-input-group input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-filled.sf-float-input:not(.sf-input-group) input,
+ .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-group) input,
+ .sf-control .sf-filled input.sf-input,
+ .sf-control .sf-filled.sf-input-group input,
+ .sf-control .sf-filled.sf-input-group input.sf-input,
+ .sf-control .sf-filled.sf-input-group.sf-control-wrapper input,
+ .sf-control .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-control .sf-filled.sf-float-input input,
+ .sf-control .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-control.sf-filled.sf-input-group input,
+ .sf-control.sf-filled.sf-input-group input.sf-input,
+ .sf-control.sf-filled.sf-input-group.sf-control-wrapper input,
+ .sf-control.sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-control.sf-filled.sf-float-input input,
+ .sf-control.sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-filled input.sf-input.sf-small#{$css},
+ .sf-filled.sf-input-group.sf-small input,
+ .sf-filled.sf-input-group.sf-small input.sf-input,
+ .sf-small .sf-filled.sf-input-group input,
+ .sf-small .sf-filled.sf-input-group input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small input.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-filled.sf-float-input.sf-small input,
+ .sf-filled.sf-float-input.sf-small input.sf-input,
+ .sf-small .sf-filled.sf-float-input input,
+ .sf-small .sf-filled.sf-float-input input.sf-input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input.sf-input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper input.sf-input,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-group) input,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-group) input.sf-input,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-group) input,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-group) input.sf-input .sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-group) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-group) input.sf-input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-group) input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-group) input.sf-input,
+ .sf-filled textarea.sf-input#{$css},
+ .sf-filled.sf-input-group textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper textarea,
+ .sf-filled.sf-float-input textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea,
+ .sf-filled textarea.sf-input.sf-small#{$css},
+ .sf-filled.sf-input-group.sf-small textarea,
+ .sf-filled.sf-input-group.sf-small textarea.sf-input,
+ .sf-small .sf-filled.sf-input-group textarea,
+ .sf-small .sf-filled.sf-input-group textarea.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper textarea,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-filled.sf-float-input.sf-small textarea,
+ .sf-filled.sf-float-input.sf-small textarea.sf-input,
+ .sf-small .sf-filled.sf-float-input textarea,
+ .sf-small .sf-filled.sf-float-input textarea.sf-input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper textarea,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper textarea.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ box-sizing: border-box;
+ }
+ }
+
+ .sf-filled.sf-float-input input,
+ .sf-filled.sf-float-input textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border: $float-input-border;
+ border-width: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-filled.sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-filled.sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-filled.sf-float-input:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) input:not([disabled]),
+ .sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-disabled) textarea:not([disabled]),
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover,
+ .sf-filled.sf-float-input.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-disabled):not(.sf-input-focus) .sf-input-in-wrap:hover {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-bottom-width: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error) textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error) textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error textarea,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error) textarea,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error) textarea,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error textarea,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error) input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-width: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group,
+ .sf-filled.sf-input-group.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-radius: 4px 4px $zero-value $zero-value;
+ padding: $filled-wrapper-padding;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-top: $filled-wrapper-margin;
+ padding: $small-filled-wrapper-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input,
+ .sf-filled.sf-float-input.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border: $input-group-full-border;
+ border-radius: 4px 4px $zero-value $zero-value;
+ border-width: $input-group-full-border-width;
+ margin-top: $filled-wrapper-margin;
+ padding: $filled-float-input-wrapper-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-top: $filled-wrapper-margin;
+ padding: $small-filled-float-input-wrapper-padding;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-input-group,
+ .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper,
+ .sf-rtl .sf-filled.sf-input-group,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-wrapper-rtl-padding;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-input-group.sf-small,
+ .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper.sf-small,
+ .sf-small .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper,
+ .sf-rtl .sf-filled.sf-input-group.sf-small,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $small-filled-wrapper-rtl-padding;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-float-input,
+ .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper,
+ .sf-rtl .sf-filled.sf-float-input,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-float-input-wrapper-rtl-padding;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-float-input.sf-small,
+ .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper,
+ .sf-rtl .sf-filled.sf-float-input.sf-small,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $small-filled-float-input-wrapper-rtl-padding;
+ }
+ }
+
+ .sf-filled input.sf-input#{$css},
+ .sf-filled.sf-input-group input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-filled textarea.sf-input#{$css},
+ .sf-filled.sf-input-group textarea.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-filled.sf-input-group input.sf-input:focus,
+ .sf-filled.sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-filled.sf-input-group textarea.sf-input:focus,
+ .sf-filled.sf-input-group.sf-control-wrapper textarea.sf-input:focus,
+ .sf-filled.sf-input-group.sf-input-focus input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-input-padding;
+ }
+ }
+
+ .sf-filled .sf-input#{$css}:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding-bottom: $filled-input-padding-bottom;
+ }
+ }
+
+ .sf-filled .sf-input.sf-small#{$css}:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding-bottom: $filled-small-input-padding-bottom;
+ }
+ }
+
+ .sf-filled .sf-input#{$css}.sf-small,
+ .sf-filled.sf-input-group.sf-small .sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input,
+ .sf-filled.sf-input-group.sf-small .sf-input:focus,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input:focus,
+ .sf-filled.sf-input-group.sf-small.sf-input-focus .sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small.sf-input-focus .sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-input-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input input,
+ .sf-filled.sf-float-input.sf-control-wrapper input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-float-input-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-float-input-padding;
+ }
+ }
+
+ .sf-filled input.sf-input.sf-rtl#{$css},
+ .sf-filled.sf-input-group.sf-rtl input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-filled.sf-input-group.sf-rtl input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-filled.sf-input-group.sf-rtl input.sf-input:focus,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl input.sf-input:focus,
+ .sf-rtl .sf-filled.sf-input-group input.sf-input:focus,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-filled.sf-input-group.sf-rtl.sf-input-focus input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl.sf-input-focus input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-input-focus input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-input-rtl-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-rtl input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl input,
+ .sf-rtl .sf-filled.sf-float-input input,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-filled.sf-float-input.sf-rtl input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl input,
+ .sf-rtl .sf-filled.sf-float-input input,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-filled.sf-float-input.sf-rtl input:focus,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl input:focus,
+ .sf-rtl .sf-filled.sf-float-input input:focus,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper input:focus,
+ .sf-filled.sf-float-input.sf-rtl.sf-input-focus input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl.sf-input-focus input,
+ .sf-rtl .sf-filled.sf-float-input.sf-input-focus input,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-float-input-rtl-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-rtl .sf-filled input.sf-input.sf-small#{$css},
+ .sf-filled input.sf-input#{$css}.sf-small.sf-rtl,
+ .sf-small.sf-rtl .sf-filled input.sf-input#{$css},
+ .sf-small .sf-filled input.sf-input.sf-rtl#{$css},
+ .sf-filled.sf-input-group.sf-small.sf-rtl input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small.sf-rtl input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-small input.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small input.sf-input,
+ .sf-filled.sf-input-group.sf-rtl input.sf-input.sf-small,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl input.sf-input.sf-small,
+ .sf-rtl .sf-filled.sf-input-group input.sf-input.sf-small,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper input.sf-input.sf-small,
+ .sf-small .sf-filled.sf-input-group.sf-rtl input.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl input.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group input.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper input.sf-input:focus,
+ .sf-small.sf-rtl .sf-filled.sf-input-group input.sf-input:focus,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl input.sf-input:focus,
+ .sf-small .sf-filled.sf-input-group.sf-rtl input.sf-input:focus,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-input-focus input.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl.sf-input-focus input.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-rtl.sf-input-focus input.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-input-rtl-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-rtl input,
+ .sf-filled.sf-float-input.sf-small.sf-rtl input,
+ .sf-rtl .sf-filled.sf-float-input.sf-small input,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-filled.sf-float-input.sf-rtl input.sf-small,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl input.sf-small,
+ .sf-rtl .sf-filled.sf-float-input input.sf-small,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper input.sf-small,
+ .sf-small .sf-filled.sf-float-input.sf-rtl input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl input,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-small.sf-rtl .sf-filled.sf-float-input input,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper input:focus,
+ .sf-small.sf-rtl .sf-filled.sf-float-input input:focus,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl input:focus,
+ .sf-small .sf-filled.sf-float-input.sf-rtl input:focus,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus input,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-input-focus input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl.sf-input-focus input,
+ .sf-small .sf-filled.sf-float-input.sf-rtl.sf-input-focus input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-float-input-rtl-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-filled.sf-float-input,
+ .sf-filled.sf-float-input.sf-control-wrapper,
+ .sf-filled.sf-float-input.sf-disabled,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-disabled,
+ .sf-filled.sf-float-input.sf-input-group.sf-disabled,
+ .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-input-font-size;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small,
+ .sf-small .sf-filled.sf-float-input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper,
+ .sf-filled.sf-float-input.sf-small.sf-disabled,
+ .sf-small .sf-filled.sf-float-input.sf-disabled,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-disabled,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-disabled,
+ .sf-filled.sf-float-input.sf-input-group.sf-small.sf-disabled,
+ .sf-small .sf-filled.sf-float-input.sf-input-group.sf-disabled,
+ .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-small.sf-disabled,
+ .sf-small .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-input-font-size;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small:not(.sf-float-input) .sf-input,
+ .sf-small .sf-filled.sf-input-group:not(.sf-float-input) .sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small:not(.sf-float-input) .sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper:not(.sf-float-input) .sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ min-height: $small-filled-default-input-min-height;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small input,
+ .sf-small .sf-filled.sf-float-input input,
+ .sf-filled.sf-float-input.sf-input-group.sf-small input,
+ .sf-small .sf-filled.sf-float-input.sf-input-group input,
+ .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-small input,
+ .sf-small .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ min-height: $small-filled-input-min-height;
+ }
+ }
+
+ .sf-filled.sf-input-group input.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper input.sf-input,
+ .sf-filled.sf-input-group:not(.sf-float-input) input.sf-input,
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-control-wrapper input.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ min-height: $filled-default-input-min-height;
+ }
+ }
+
+ .sf-float-input.sf-filled.sf-input-group.sf-control-wrapper input,
+ .sf-float-input.sf-filled input,
+ .sf-float-input.sf-filled.sf-control-wrapper input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ min-height: $filled-input-min-height;
+ }
+ }
+
+ .sf-filled label.sf-float-text,
+ .sf-filled.sf-float-input label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-float-label-font-size;
+ left: $filled-input-label-left;
+ letter-spacing: .009375em;
+ line-height: 1.15;
+ padding-left: $float-label-padding;
+ pointer-events: none;
+ right: auto;
+ top: $filled-input-label-top;
+ transform: none;
+ transition: transform 150ms cubic-bezier(.4, $zero-value, .2, 1), color 150ms cubic-bezier(.4, $zero-value, .2, 1);
+ width: 100%;
+ }
+ }
+
+ .sf-filled.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-float-label-font-size;
+ padding-left: $float-label-padding;
+ top: $filled-input-label-top;
+ transform: none;
+ width: 100%;
+ }
+ }
+
+ .sf-filled.sf-float-input input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input input label.sf-float-text.sf-label-top,
+ .sf-filled.sf-float-input.sf-control-wrapper input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper input label.sf-float-text.sf-label-top,
+ .sf-filled.sf-float-input.sf-input-focus input ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-float-label-font-size;
+ top: $filled-input-label-top-after-floating;
+ transform: translateY(-50%) scale(.75);
+ }
+ @if $input-skin-name == 'Material3' {
+ font-size: 16px;
+ top: 14px;
+ transform: translateY(-50%) scale(.75);
+ }
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ left: 1px;
+ }
+ }
+
+ .sf-filled.sf-float-input textarea:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input textarea:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input textarea label.sf-float-text.sf-label-top,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea label.sf-float-text.sf-label-top {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-float-label-font-size;
+ top: $filled-input-label-top-after-floating;
+ transform: translateY(-50%) scale(.75);
+ }
+ }
+
+ .sf-filled.sf-float-input input:-webkit-autofill ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill input:-webkit-autofill ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-float-label-font-size;
+ top: $filled-input-label-top-after-floating;
+ transform: translateY(-50%) scale(.75);
+ user-select: text;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-filled.sf-float-input input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-small.sf-input-focus input ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-input-focus input ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-filled.sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-float-label-font-size;
+ top: $small-filled-input-label-top-after-floating;
+ }
+ }
+
+ .sf-small .sf-filled.sf-float-input input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-filled.sf-float-input input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill input:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-filled.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-float-label-font-size;
+ top: $small-filled-input-label-top-after-floating;
+ transform: translateY(-50%) scale(.75);
+ user-select: text;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small textarea ~ label.sf-float-text,
+ .sf-filled.sf-float-input textarea ~ label.sf-float-text.sf-small,
+ .sf-filled.sf-float-input textarea.sf-small ~ label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input textarea ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text.sf-small,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea.sf-small ~ label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-float-label-font-size;
+ top: $small-filled-input-label-top;
+ }
+ }
+
+ .sf-filled.sf-float-input label.sf-float-text,
+ .sf-filled.sf-float-input label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ left: $filled-input-label-left;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-rtl label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input label.sf-float-text .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl.sf-control-wrapper label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ right: $filled-input-label-left;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ left: $small-filled-input-label-left;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small.sf-rtl label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl.sf-small label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-small label.sf-float-text .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl.sf-small label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl.sf-control-wrapper.sf-small label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-small label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-rtl label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-rtl label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input label.sf-float-text .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-rtl.sf-control-wrapper label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-control-wrapper label.sf-float-text,
+ .sf-small.sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-small.sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-small.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-small.sf-filled.sf-float-input:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-small.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ right: $small-filled-input-label-left;
+ }
+ }
+
+ .sf-filled.sf-float-input .sf-float-line,
+ .sf-float-input.sf-filled.sf-control-wrapper .sf-float-line {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ bottom: -1px;
+ position: absolute;
+ }
+ }
+
+ .sf-float-input.sf-filled .sf-float-line,
+ .sf-float-input.sf-filled .sf-float-text,
+ .sf-float-input.sf-filled.sf-control-wrapper .sf-float-line,
+ .sf-float-input.sf-filled.sf-control-wrapper .sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl.sf-control-wrapper .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small.sf-rtl .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl.sf-small .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-small .sf-input-in-wrap label.sf-float-text .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl.sf-small .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-rtl.sf-control-wrapper.sf-small .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-rtl .sf-input-in-wrap label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-rtl .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl .sf-input-in-wrap label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-rtl.sf-control-wrapper .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-small.sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-small.sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl .sf-small.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-rtl:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-rtl:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ right: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group:not(.sf-disabled):not(.sf-float-icon-left)::before,
+ .sf-filled.sf-filled.sf-input-group:not(.sf-disabled):not(.sf-float-icon-left)::after,
+ .sf-filled.sf-input-group.sf-control-wrapper:not(.sf-disabled):not(.sf-float-icon-left)::before,
+ .sf-filled.sf-input-group.sf-control-wrapper:not(.sf-disabled):not(.sf-float-icon-left)::after {
+ @if $input-skin-name == 'Material3' {
+ bottom: -1px;
+ }
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ bottom: -.1px;
+ }
+ }
+
+ .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-input-icon-size;
+ margin-bottom: $zero-value;
+ margin-top: $zero-value;
+ min-height: $filled-input-icon-min-height;
+ min-width: $filled-input-icon-min-height;
+ padding: $zero-value $zero-value $zero-value 8px;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $zero-value 8px $zero-value $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-input-icon-size;
+ min-height: $small-filled-input-icon-min-height;
+ min-width: $small-filled-input-icon-min-height;
+ padding: $zero-value $zero-value $zero-value 4px;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $zero-value 4px $zero-value $zero-value;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-input-icon-size;
+ margin-bottom: $zero-value;
+ margin-top: $zero-value;
+ padding: 8px;
+ margin: 9px 12px 9px 0;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-float-input.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-input-icon-size;
+ padding: $zero-value $zero-value $zero-value 4px;
+ }
+ }
+
+ .sf-filled.sf-float-input .sf-clear-icon,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-clear-icon,
+ .sf-filled.sf-input-group .sf-clear-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ @if $input-skin-name == 'Material3' {
+ font-size: $filled-input-clear-icon-size;
+ padding: $zero-value $zero-value $zero-value 8px;
+ }
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-input-clear-icon-size;
+ padding: $input-clear-icon-padding;
+ }
+ }
+
+ .sf-filled.sf-input-group .sf-clear-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ @if $input-skin-name == 'Material3' {
+ min-height: $filled-input-icon-min-height;
+ min-width: $filled-input-icon-min-height;
+ padding: $zero-value $zero-value $zero-value 8px;
+ }
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ min-height: $filled-input-icon-min-height;
+ min-width: $filled-input-icon-min-height;
+ padding: $input-clear-icon-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+ .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $zero-value;
+ margin: 2px;
+ height: 32px;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small .sf-clear-icon,
+ .sf-filled.sf-input-group .sf-clear-icon.sf-small,
+ .sf-small .sf-filled.sf-input-group .sf-clear-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon.sf-small,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-input-clear-icon-size;
+ min-height: $small-filled-input-icon-min-height;
+ min-width: $small-filled-input-icon-min-height;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-rtl.sf-filled.sf-float-input.sf-input-group.sf-small .sf-clear-icon,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+ .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-clear-icon,
+ .sf-small .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-clear-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-input-group.sf-small .sf-clear-icon,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-clear-icon,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-clear-icon {
+ @if $input-skin-name == 'Material3' {
+ padding: $zero-value 4px $zero-value $zero-value;
+ }
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-float-input .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input .sf-input-in-wrap input label.sf-float-text.sf-label-top,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input label.sf-float-text.sf-label-top {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ top: $filled-input-label-top-after-floating;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-filled.sf-float-input .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input:focus ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input:valid ~ label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap input ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input[readonly] ~ label.sf-label-top.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap input[disabled] ~ label.sf-label-top.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ top: $small-filled-input-label-top-after-floating;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-float-icon-left.sf-input-focus.sf-success:not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-float-icon-left.sf-input-focus.sf-warning:not(.sf-success):not(.sf-error) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-float-icon-left.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus.sf-success:not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus.sf-warning:not(.sf-success):not(.sf-error) .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning) .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-style: none;
+ border-width: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ top: $filled-input-label-top;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ top: $small-filled-input-label-top;
+ }
+ }
+
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $filled-input-icon-size;
+ margin: $zero-value;
+ min-height: $filled-input-left-icon-min-height;
+ min-width: $filled-input-left-icon-min-width;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-control-wrapper.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-input-group:not(.sf-float-input).sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-filled.sf-input-group:not(.sf-float-input).sf-float-icon-left > .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group:not(.sf-float-input).sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ font-size: $small-filled-input-icon-size;
+ margin: $zero-value;
+ min-height: $small-filled-input-left-icon-min-height;
+ min-width: $small-filled-input-left-icon-min-width;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin: $zero-value;
+ min-height: $filled-input-left-icon-min-height;
+ min-width: $filled-input-left-icon-min-width;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-filled.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-filled.sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left > .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin: $zero-value;
+ min-height: $small-filled-input-left-icon-min-height;
+ min-width: $small-filled-input-left-icon-min-width;
+ padding: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-small .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap label.sf-float-text,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-filled.sf-float-input.sf-small:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper .sf-input-in-wrap label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus) .sf-input-in-wrap input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ left: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group.sf-small .sf-input-group-icon:last-child,
+ .sf-small .sf-filled.sf-input-group .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group.sf-small.sf-control-wrapper .sf-input-group-icon:last-child,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-right: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-rtl .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group.sf-small.sf-rtl .sf-input-group-icon:last-child,
+ .sf-small .sf-filled.sf-input-group.sf-rtl .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon:last-child,
+ .sf-filled.sf-input-group.sf-small.sf-control-wrapper.sf-rtl .sf-input-group-icon:last-child,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon:last-child,
+ .sf-rtl .sf-filled.sf-input-group .sf-input-group-icon:last-child,
+ .sf-rtl .sf-filled.sf-input-group.sf-small .sf-input-group-icon:last-child,
+ .sf-rtl.sf-small .sf-filled.sf-input-group .sf-input-group-icon:last-child,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon:last-child,
+ .sf-rtl .sf-filled.sf-input-group.sf-small.sf-control-wrapper .sf-input-group-icon:last-child,
+ .sf-rtl.sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon:last-child {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-left: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-rtl.sf-input-group .sf-input-group-icon,
+ .sf-filled.sf-rtl.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-small.sf-rtl .sf-input-group-icon,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small.sf-rtl .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group.sf-rtl .sf-input-group-icon,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-rtl .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-small .sf-input-group-icon,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+ .sf-rtl.sf-small .sf-filled.sf-input-group .sf-input-group-icon,
+ .sf-rtl.sf-small .sf-filled.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-left: $zero-value;
+ margin-right: $zero-value;
+ }
+ }
+
+ .sf-filled textarea.sf-input#{$css},
+ .sf-filled.sf-input-group.sf-multi-line-input textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-multi-line-input textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-multi-line-input textarea {
+ box-sizing: border-box;
+ }
+
+ .sf-filled textarea.sf-input#{$css},
+ .sf-filled.sf-input-group textarea,
+ .sf-filled.sf-input-group textarea.sf-input,
+ .sf-filled.sf-input-group.sf-input-focus textarea,
+ .sf-filled.sf-input-group.sf-input-focus textarea.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper textarea.sf-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus textarea.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-textarea-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-float-textarea-padding;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small textarea,
+ .sf-filled.sf-input-group.sf-small textarea.sf-input,
+ .sf-filled.sf-input-group textarea.sf-small,
+ .sf-filled.sf-input-group textarea.sf-input.sf-small,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-small .sf-filled.sf-input-group textarea,
+ .sf-small .sf-filled.sf-input-group textarea.sf-input,
+ .sf-filled.sf-input-group.sf-input-focus.sf-small textarea,
+ .sf-filled.sf-input-group.sf-input-focus.sf-small textarea.sf-input,
+ .sf-filled.sf-input-group.sf-input-focus textarea.sf-small,
+ .sf-filled.sf-input-group.sf-input-focus textarea.sf-input.sf-small,
+ .sf-filled.sf-input-group.sf-input-focus textarea.sf-input.sf-small,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus.sf-small textarea,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus.sf-small textarea.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-input-focus textarea,
+ .sf-small .sf-filled.sf-input-group.sf-input-focus textarea.sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-textarea-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small textarea,
+ .sf-filled.sf-float-input textarea.sf-small,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small textarea,
+ .sf-filled.sf-float-input.sf-control-wrapper textarea.sf-small,
+ .sf-small .sf-filled.sf-float-input textarea,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper textarea {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-float-textarea-padding;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-multi-line-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-multi-line-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-textarea-wrapper-padding;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-small.sf-multi-line-input,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-small.sf-multi-line-input,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-multi-line-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $small-filled-textarea-wrapper-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-multi-line-input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-multi-line-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-float-textarea-wrapper-padding;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-small.sf-multi-line-input,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-multi-line-input,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-multi-line-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $small-filled-float-textarea-wrapper-padding;
+ }
+ }
+
+ .sf-filled textarea.sf-input.sf-rtl#{$css},
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-rtl textarea.sf-input,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input textarea.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper textarea.sf-input,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-rtl textarea.sf-input,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input textarea.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper textarea.sf-input,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-rtl textarea.sf-input:focus,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-input:focus,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input textarea.sf-input:focus,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper textarea.sf-input:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-textarea-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-rtl textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input textarea,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-rtl textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input textarea,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-rtl textarea:focus,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea:focus,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input textarea:focus,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper textarea:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-float-textarea-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-rtl .sf-filled textarea.sf-input.sf-small#{$css},
+ .sf-filled textarea.sf-input#{$css}.sf-small.sf-rtl,
+ .sf-small.sf-rtl .sf-filled textarea.sf-input#{$css},
+ .sf-small .sf-filled textarea.sf-input.sf-rtl#{$css},
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-small.sf-rtl textarea.sf-input,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-small.sf-rtl textarea.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-small textarea.sf-input,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-small textarea.sf-input,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-rtl textarea.sf-input.sf-small,
+ .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-input.sf-small,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input textarea.sf-input.sf-small,
+ .sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper textarea.sf-input.sf-small,
+ .sf-small .sf-filled.sf-input-group.sf-multi-line-input.sf-rtl textarea.sf-input,
+ .sf-small .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper textarea.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-multi-line-input textarea.sf-input,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper textarea.sf-input:focus,
+ .sf-small.sf-rtl .sf-filled.sf-input-group.sf-multi-line-input textarea.sf-input:focus,
+ .sf-small .sf-filled.sf-input-group.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-input:focus,
+ .sf-small .sf-filled.sf-input-group.sf-multi-line-input.sf-rtl textarea.sf-input:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-textarea-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-small.sf-rtl textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-small.sf-rtl textarea,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-small textarea,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-small textarea,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-rtl textarea.sf-small,
+ .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea.sf-small,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input textarea.sf-small,
+ .sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper textarea.sf-small,
+ .sf-small .sf-filled.sf-float-input.sf-multi-line-input.sf-rtl textarea,
+ .sf-small .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper textarea,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-multi-line-input textarea,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper textarea:focus,
+ .sf-small.sf-rtl .sf-filled.sf-float-input.sf-multi-line-input textarea:focus,
+ .sf-small .sf-filled.sf-float-input.sf-multi-line-input.sf-control-wrapper.sf-rtl textarea:focus,
+ .sf-small .sf-filled.sf-float-input.sf-multi-line-input.sf-rtl textarea:focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ padding: $filled-small-float-textarea-padding;
+ text-indent: 0;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border: $input-group-full-border;
+ border-width: $zero-value;
+ margin-left: 8px;
+ }
+ }
+
+ .sf-rtl .sf-filled.sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-filled.sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-filled.sf-float-input.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-left: $zero-value;
+ margin-right: 8px;
+ }
+ }
+
+ .sf-filled.sf-float-input.sf-float-icon-left.sf-small .sf-input-in-wrap,
+ .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-small .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-float-icon-left.sf-small .sf-input-in-wrap,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-small .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-left: 4px;
+ }
+ }
+
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl.sf-small .sf-filled.sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl.sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-small.sf-filled.sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-small.sf-filled.sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+ .sf-rtl .sf-small.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+ .sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small.sf-filled.sf-float-input.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small.sf-filled.sf-input-group.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-float-input.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-input-group.sf-float-icon-left.sf-rtl .sf-input-in-wrap,
+ .sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-rtl .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ margin-left: $zero-value;
+ margin-right: 4px;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input)::before,
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input)::after,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input)::before,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input)::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-group-animation;
+ bottom: -1px;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input).sf-input-focus::before,
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input).sf-input-focus::after,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input).sf-input-focus::before,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input).sf-input-focus::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-group-animation-width;
+ bottom: -1px;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::before,
+ .sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::after,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::before,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input).sf-input-focus .sf-input-in-wrap::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ width: $zero-value;
+ }
+ }
+
+ .sf-filled.sf-input-group.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-success.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-warning.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-error.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-success.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-warning.sf-float-icon-left,
+ .sf-filled.sf-input-group.sf-control-wrapper.sf-error.sf-float-icon-left {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border: $input-group-full-border;
+ border-width: $input-group-full-border-width;
+ }
+ }
+}
+
+input.sf-input#{$css},
+.sf-input-group input.sf-input,
+.sf-input-group.sf-control-wrapper input.sf-input,
+.sf-input-group textarea.sf-input,
+.sf-input-group.sf-control-wrapper textarea.sf-input,
+textarea.sf-input#{$css},
+.sf-float-input input,
+.sf-float-input.sf-control-wrapper input,
+.sf-float-input textarea,
+.sf-float-input.sf-control-wrapper textarea {
+ background: $input-bg-color;
+ border-color: $input-box-border-color;
+ color: $input-font-color;
+}
+
+.sf-input-group,
+.sf-input-group.sf-control-wrapper,
+.sf-float-input,
+.sf-float-input.sf-input-group,
+.sf-float-input.sf-control-wrapper,
+.sf-float-input.sf-input-group.sf-control-wrapper {
+ background: $input-bg-color;
+ color: $input-font-color;
+ @if $input-skin-name == 'fluent2' {
+ border-bottom-color: $input-border-bottom-color;
+ }
+}
+
+.sf-input-group .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ background: transparent;
+ border-color: $input-box-border-color;
+ color: $input-icon-font-color;
+ @if ($input-skin-name == 'Material3' or $input-skin-name == 'fluent2') {
+ margin: 0;
+ }
+}
+
+.sf-input-group.sf-disabled .sf-input-group-icon path,
+.sf-input-group.sf-control-wrapper.sf-disabled .sf-input-group-icon path,
+.sf-float-input.sf-disabled .sf-clear-icon path,
+.sf-float-input.sf-control-wrapper.sf-disabled .sf-clear-icon path,
+.sf-input-group.sf-disabled .sf-clear-icon path,
+.sf-input-group.sf-control-wrapper.sf-disabled .sf-clear-icon path {
+ fill: $input-group-disabled-color;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable selector-no-vendor-prefix */
+.sf-input#{$css}[disabled],
+.sf-input-group .sf-input[disabled],
+.sf-input-group.sf-control-wrapper .sf-input[disabled],
+.sf-input-group.sf-disabled,
+.sf-input-group.sf-control-wrapper.sf-disabled,
+.sf-float-input input[disabled],
+.sf-float-input.sf-control-wrapper input[disabled],
+.sf-float-input textarea[disabled],
+.sf-float-input.sf-control-wrapper textarea[disabled],
+.sf-float-input.sf-disabled,
+.sf-float-input.sf-control-wrapper.sf-disabled {
+ @if ($input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3') {
+ -webkit-text-fill-color: $input-disable-font-color;
+ }
+ @if $input-skin-name == 'tailwind3'
+ {
+ -webkit-text-fill-color: $content-text-color-disabled;
+ }
+ background: $input-disable-bg-color;
+ color: $input-disable-font-color;
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
+ background-position: bottom -1px left 0;
+ background-repeat: repeat-x;
+ background-size: 4px 1px;
+ border-bottom-color: transparent;
+ }
+ @else {
+ border-color: $input-disable-border-color;
+ }
+}
+
+.sf-input-group input.sf-input,
+.sf-input-group.sf-control-wrapper input.sf-input,
+.sf-float-input input,
+.sf-float-input.sf-control-wrapper input,
+.sf-input-group textarea.sf-input,
+.sf-input-group.sf-control-wrapper textarea.sf-input,
+.sf-float-input textarea,
+.sf-float-input.sf-control-wrapper textarea,
+.sf-input-group .sf-input[disabled],
+.sf-input-group.sf-control-wrapper .sf-input[disabled],
+.sf-input-group.sf-disabled input.sf-input,
+.sf-input-group.sf-control-wrapper.sf-disabled input.sf-input,
+.sf-input-group.sf-disabled textarea.sf-input,
+.sf-input-group.sf-control-wrapper.sf-disabled textarea.sf-input {
+ background: none;
+ color: inherit;
+}
+
+.sf-input-group .sf-input[readonly],
+.sf-input-group.sf-control-wrapper .sf-input[readonly],
+.sf-float-input input[readonly],
+.sf-float-input.sf-control-wrapper input[readonly],
+.sf-float-input textarea[readonly],
+.sf-float-input.sf-control-wrapper textarea[readonly] {
+ background: $input-readonly-bg-color;
+ @if $input-skin-name == 'bootstrap5.3' {
+ color: $input-readonly-color;
+ }
+ @if $input-skin-name != 'bootstrap5.3' {
+ color: inherit;
+ }
+}
+
+.sf-float-input.sf-disabled input,
+.sf-float-input.sf-control-wrapper.sf-disabled input,
+.sf-float-input.sf-disabled textarea,
+.sf-float-input.sf-control-wrapper.sf-disabled textarea,
+.sf-float-input input[disabled],
+.sf-float-input.sf-control-wrapper input[disabled],
+.sf-float-input textarea[disabled],
+.sf-float-input.sf-control-wrapper textarea[disabled] {
+ color: inherit;
+}
+
+/*! Added color to textbox for disbaled state */
+.sf-float-input:not(.sf-disabled) input[disabled],
+.sf-float-input.sf-control-wrapper:not(.sf-disabled) input[disabled],
+.sf-float-input:not(.sf-disabled) textarea[disabled],
+.sf-float-input.sf-control-wrapper:not(.sf-disabled) textarea[disabled] {
+ -webkit-text-fill-color: $input-disable-font-color;
+ color: $input-disable-font-color;
+}
+
+.sf-input-group.sf-disabled .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-disabled .sf-input-group-icon {
+ background: $input-disabled-group-bg-color;
+ border-color: $input-disable-border-color;
+}
+
+.sf-input-group:not(.sf-disabled) .sf-input-group-icon:hover,
+.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-input-group-icon:hover {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ border: $input-icon-hover-border;
+ background: $input-icon-hover-bg-color;
+ }
+ color: $input-group-hovered-color;
+}
+
+.sf-input-group.sf-disabled .sf-input-group-icon:hover,
+.sf-input-group.sf-control-wrapper.sf-disabled .sf-input-group-icon:hover {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ background: transparent;
+ }
+}
+
+.sf-input#{$css}.sf-success,
+.sf-input#{$css}.sf-success:focus,
+.sf-input-group.sf-success input.sf-input,
+.sf-input-group.sf-control-wrapper.sf-success input.sf-input,
+.sf-input-group.sf-success .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-success .sf-input-group-icon,
+.sf-input-group.sf-success textarea.sf-input,
+.sf-input-group.sf-control-wrapper.sf-success textarea.sf-input {
+ border-color: $input-success-color;
+}
+
+.sf-input#{$css}.sf-warning,
+.sf-input#{$css}.sf-warning:focus,
+.sf-input-group.sf-warning input.sf-input,
+.sf-input-group.sf-control-wrapper.sf-warning input.sf-input,
+.sf-input-group.sf-warning .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-warning .sf-input-group-icon,
+.sf-input-group.sf-warning textarea.sf-input,
+.sf-input-group.sf-control-wrapper.sf-warning textarea.sf-input {
+ border-color: $input-warning-color;
+}
+
+.sf-input#{$css}.sf-error,
+.sf-input#{$css}.sf-error:focus,
+.sf-input-group.sf-error input.sf-input,
+.sf-input-group.sf-control-wrapper.sf-error input.sf-input,
+.sf-input-group.sf-control-wrapper.sf-error .sf-input-group-icon,
+.sf-input-group.sf-error .sf-input-group-icon,
+.sf-input-group.sf-error textarea.sf-input,
+.sf-input-group.sf-control-wrapper.sf-error textarea.sf-input {
+ border-color: $input-error-color;
+}
+
+label.sf-float-text,
+.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-float-input.sf-small:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ color: $input-header-font-color;
+}
+
+.sf-float-input.sf-error label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-error label.sf-float-text,
+.sf-float-input.sf-error input:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-error input:focus ~ label.sf-float-text,
+.sf-float-input.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-error textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-error textarea:focus ~ label.sf-float-text {
+ color: $input-error-color;
+}
+
+.sf-float-input input,
+.sf-float-input textarea,
+.sf-float-input.sf-control-wrapper input,
+.sf-float-input.sf-control-wrapper textarea,
+.sf-input-group,
+.sf-input-group.sf-control-wrapper {
+ border-bottom-color: $input-box-border-color;
+}
+
+.sf-float-input.sf-success input,
+.sf-float-input.sf-success textarea,
+.sf-float-input.sf-control-wrapper.sf-success input,
+.sf-float-input.sf-control-wrapper.sf-success textarea {
+ @include input-state-color ($input-success-color);
+}
+
+.sf-float-input.sf-warning input,
+.sf-float-input.sf-control-wrapper.sf-warning input,
+.sf-float-input.sf-warning textarea,
+.sf-float-input.sf-control-wrapper.sf-warning textarea {
+ @include input-state-color ($input-warning-color);
+}
+
+.sf-float-input.sf-error input,
+.sf-float-input.sf-control-wrapper.sf-error input,
+.sf-float-input.sf-error textarea,
+.sf-float-input.sf-control-wrapper.sf-error textarea {
+ @include input-state-color ($input-error-color);
+}
+
+.sf-float-input:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ background: $input-active-accent-color;
+ }
+}
+
+.sf-float-input.sf-success:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-success:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-success:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-success:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-success:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-success:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-success:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-success:not(.sf-input-group) .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ background: $input-success-color;
+ }
+}
+
+.sf-float-input.sf-warning:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-warning:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-warning:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-warning:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-warning:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-warning:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-warning:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-warning:not(.sf-input-group) .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ background: $input-warning-color;
+ }
+}
+
+input.sf-input#{$css}:-moz-placeholder,
+input.sf-input#{$css}:-moz-placeholder,
+textarea.sf-input#{$css}:-moz-placeholder,
+input.sf-input#{$css}::-moz-placeholder,
+textarea.sf-input#{$css}::-moz-placeholder,
+.sf-input-group input.sf-input:-moz-placeholder,
+.sf-input-group input.sf-input:-moz-placeholder,
+.sf-input-group.sf-control-wrapper input.sf-input:-moz-placeholder,
+.sf-input-group input.sf-input:-moz-placeholder,
+.sf-input-group.sf-control-wrapper input.sf-input:-moz-placeholder,
+.sf-input-group textarea.sf-input:-moz-placeholder,
+.sf-input-group.sf-control-wrapper textarea.sf-input:-moz-placeholder,
+.sf-input-group input.sf-input::-moz-placeholder,
+.sf-input-group.sf-control-wrapper input.sf-input::-moz-placeholder,
+.sf-input-group textarea.sf-input::-moz-placeholder,
+.sf-input-group.sf-control-wrapper textarea.sf-input::-moz-placeholder {
+ color: $input-placeholder;
+}
+
+input.sf-input#{$css}::-webkit-input-placeholder,
+textarea.sf-input#{$css}::-webkit-input-placeholder,
+.sf-input-group input.sf-input::-webkit-input-placeholder,
+.sf-input-group textarea.sf-input::-webkit-input-placeholder,
+.sf-input-group.sf-control-wrapper input.sf-input::-webkit-input-placeholder,
+.sf-input-group.sf-control-wrapper textarea.sf-input::-webkit-input-placeholder {
+ color: $input-placeholder;
+}
+
+input.sf-input#{$css}:-ms-input-placeholder,
+textarea.sf-input#{$css}:-ms-input-placeholder,
+.sf-input-group input.sf-input:-ms-input-placeholder,
+.sf-input-group.sf-control-wrapper input.sf-input:-ms-input-placeholder,
+.sf-input-group.sf-control-wrapper textarea.sf-input:-ms-input-placeholder,
+.sf-input-group textarea.sf-input:-ms-input-placeholder {
+ color: $input-placeholder;
+}
+
+.sf-float-input:not(.sf-error):not(.sf-input-focus):not(.sf-disabled) input:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-float-input:not(.sf-error):not(.sf-input-focus) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus):not(.sf-disabled) input:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-float-input:not(.sf-input-focus):not(.sf-disabled) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-float-input:not(.sf-input-focus) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-float-input.sf-control-wrapper:not(.sf-input-focus):not(.sf-disabled) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top) {
+ color: $input-placeholder;
+}
+
+.sf-float-input.sf-error:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-error:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-error:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-error:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-error:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-error:not(.sf-input-group) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-error:not(.sf-input-group) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-error:not(.sf-input-group) .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ background: $input-error-color;
+ }
+}
+
+.sf-input-group:not(.sf-disabled) .sf-input-group-icon:active,
+.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-input-group-icon:active {
+ @if $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
+ background: $input-group-pressed-bg;
+ }
+ color: $input-group-pressed-color;
+}
+
+input.sf-input#{$css}::selection,
+textarea.sf-input#{$css}::selection,
+.sf-input-group input.sf-input::selection,
+.sf-input-group.sf-control-wrapper input.sf-input::selection,
+.sf-float-input input::selection,
+.sf-float-input.sf-control-wrapper input::selection,
+.sf-input-group textarea.sf-input::selection,
+.sf-input-group.sf-control-wrapper textarea.sf-input::selection,
+.sf-float-input textarea::selection,
+.sf-float-input.sf-control-wrapper textarea::selection,
+.sf-float-input.sf-small textarea::selection,
+.sf-float-input textarea::selection {
+ @include input-selection;
+}
+
+.sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::before,
+.sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::after,
+.sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::before,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::after,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left) .sf-float-line::before,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left) .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left) .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left) .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-input-in-wrap .sf-float-line::after,
+.sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-float-icon-left:not(.sf-float-input)::after,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input)::after,
+.sf-filled.sf-float-input.sf-input-group.sf-float-icon-left .sf-float-line::before,
+.sf-filled.sf-float-input.sf-input-group.sf-float-icon-left .sf-float-line::after,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-float-line::before,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-group-animation-bg;
+ }
+}
+
+.sf-input-group::before,
+.sf-input-group::after,
+.sf-input-group.sf-control-wrapper::before,
+.sf-input-group.sf-control-wrapper::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-animation-bg;
+ }
+}
+
+.sf-input-group:not(.sf-float-icon-left):not(.sf-float-input).sf-success::before,
+.sf-input-group:not(.sf-float-icon-left):not(.sf-float-input).sf-success::after,
+.sf-input-group.sf-float-icon-left.sf-success:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-float-icon-left.sf-success:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input).sf-success::before,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input).sf-success::after,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-success .sf-float-line::before,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-success .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-float-icon-left.sf-success .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-float-icon-left.sf-success .sf-input-in-wrap .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left).sf-success .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left).sf-success .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-success .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-success .sf-input-in-wrap .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-success .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-success .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success .sf-input-in-wrap .sf-float-line::after,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-success:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-success:not(.sf-float-input)::after,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success:not(.sf-float-input)::after,
+.sf-filled.sf-float-input.sf-input-group.sf-float-icon-left.sf-success .sf-float-line::before,
+.sf-filled.sf-float-input.sf-input-group.sf-float-icon-left.sf-success .sf-float-line::after,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-success .sf-float-line::before,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-success .sf-float-line::after,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success .sf-float-line::before,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-group-success-animation-bg;
+ }
+}
+
+.sf-input-group.sf-success::before,
+.sf-input-group.sf-success::after,
+.sf-input-group.sf-control-wrapper.sf-success::before,
+.sf-input-group.sf-control-wrapper.sf-success::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-success-animation-bg;
+ }
+}
+
+.sf-input-group:not(.sf-float-icon-left).sf-warning:not(.sf-float-input)::before,
+.sf-input-group:not(.sf-float-icon-left).sf-warning:not(.sf-float-input)::after,
+.sf-input-group.sf-float-icon-left.sf-warning:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-float-icon-left.sf-warning:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-warning:not(.sf-float-input)::before,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-warning:not(.sf-float-input)::after,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-warning:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-warning:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-warning .sf-float-line::before,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-warning .sf-float-line::after,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-warning .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-warning .sf-input-in-wrap .sf-float-line::after,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-warning:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-warning:not(.sf-float-input)::after,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-warning:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-warning:not(.sf-float-input)::after,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-warning .sf-float-line::before,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-warning .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-group-warning-animation-bg;
+ }
+}
+
+.sf-input-group.sf-warning::before,
+.sf-input-group.sf-warning::after,
+.sf-input-group.sf-control-wrapper.sf-warning::before,
+.sf-input-group.sf-control-wrapper.sf-warning::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-warning-animation-bg;
+ }
+}
+
+.sf-input-group:not(.sf-float-icon-left).sf-error:not(.sf-float-input)::before,
+.sf-input-group:not(.sf-float-icon-left).sf-error:not(.sf-float-input)::after,
+.sf-input-group.sf-float-icon-left.sf-error:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-float-icon-left.sf-error:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-error:not(.sf-float-input)::before,
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-error:not(.sf-float-input)::after,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-error .sf-float-line::before,
+.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-error .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-float-icon-left.sf-error .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-float-icon-left.sf-error .sf-input-in-wrap .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-error .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-error .sf-float-line::after,
+.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error .sf-input-in-wrap .sf-float-line::before,
+.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error .sf-input-in-wrap .sf-float-line::after,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-error:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-error:not(.sf-float-input)::after,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error:not(.sf-float-input)::before,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error:not(.sf-float-input)::after,
+.sf-filled.sf-float-input.sf-input-group.sf-float-icon-left.sf-error .sf-float-line::before,
+.sf-filled.sf-float-input.sf-input-group.sf-float-icon-left.sf-error .sf-float-line::after,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error .sf-float-line::before,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error .sf-float-line::after {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-group-error-animation-bg;
+ }
+}
+
+.sf-input-group.sf-error::before,
+.sf-input-group.sf-error::after,
+.sf-input-group.sf-control-wrapper.sf-error::before,
+.sf-input-group.sf-control-wrapper.sf-error::after {
+ @if $input-skin-name != 'Material3' {
+ @include input-group-error-animation-bg;
+ }
+}
+
+.sf-input-group.sf-success .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-success .sf-input-group-icon,
+.sf-input-group.sf-warning .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-warning .sf-input-group-icon,
+.sf-input-group.sf-error .sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-error .sf-input-group-icon {
+ color: $input-icon-font-color;
+}
+
+.sf-input-group.sf-success:not(.sf-disabled):not(:active) .sf-input-group-icon:hover,
+.sf-input-group.sf-control-wrapper.sf-success:not(.sf-disabled):not(:active) .sf-input-group-icon:hover,
+.sf-input-group.sf-warning:not(.sf-disabled):not(:active) .sf-input-group-icon:hover,
+.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-disabled):not(:active) .sf-input-group-icon:hover,
+.sf-input-group.sf-error:not(.sf-disabled):not(:active) .sf-input-group-icon:hover,
+.sf-input-group.sf-control-wrapper.sf-error:not(.sf-disabled):not(:active) .sf-input-group-icon:hover {
+ color: $input-icon-font-color;
+ @if $input-skin-name == 'bootstrap5.3' {
+ color: $input-group-hovered-color;
+ }
+}
+
+.sf-input-group.sf-success:not(.sf-disabled) .sf-input-group-icon:active,
+.sf-input-group.sf-control-wrapper.sf-success:not(.sf-disabled) .sf-input-group-icon:active,
+.sf-input-group.sf-warning:not(.sf-disabled) .sf-input-group-icon:active,
+.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-disabled) .sf-input-group-icon:active,
+.sf-input-group.sf-error:not(.sf-disabled) .sf-input-group-icon:active,
+.sf-input-group.sf-control-wrapper.sf-error:not(.sf-disabled) .sf-input-group-icon:active {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-icon-font-color;
+ }
+}
+
+.sf-input-group input.sf-input,
+.sf-input-group.sf-control-wrapper input.sf-input,
+.sf-input-group textarea.sf-input,
+.sf-input-group.sf-control-wrapper textarea.sf-input,
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:focus,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:focus,
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input {
+ border-color: $input-box-border-color;
+}
+
+.sf-input#{$css}:focus:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) input:focus,
+.sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) textarea:focus,
+.sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) input:focus,
+.sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) textarea:focus,
+.sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group).sf-input-focus input,
+.sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group).sf-input-focus input {
+ @if $input-skin-name != 'fluent2' {
+ border-color: $input-active-border-color;
+ }
+ @if $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5.3' {
+ border-radius: $input-groupo-focus-border-radius;
+ box-shadow: $input-group-focus-box-shadow;
+ }
+ @if $input-skin-name == 'fluent2' {
+ border-bottom-color: $input-active-border-color;
+ padding-bottom: 2px;
+ border-bottom-width: 2px;
+ }
+}
+
+.sf-input-group .sf-input#{$css}:focus:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group .sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) input:focus,
+.sf-input-group .sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) textarea:focus,
+.sf-input-group .sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) input:focus,
+.sf-input-group .sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group) textarea:focus,
+.sf-input-group .sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group).sf-input-focus input,
+.sf-input-group .sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-group).sf-input-focus input {
+ @if $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5.3' {
+ box-shadow: none;
+ }
+}
+
+.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error) input.sf-input:focus,
+.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error) input.sf-input:focus,
+.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error).sf-input-focus input.sf-input,
+.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error).sf-input-focus input.sf-input,
+.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error) textarea.sf-input:focus,
+.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error) textarea.sf-input:focus {
+ border-color: $input-group-active-border-color;
+}
+
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-input-group.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-input-group.sf-control-wrapper.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]) {
+ @if $input-skin-name == 'Material3' {
+ border-color: $input-group-border-color-focus;
+ }
+}
+
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
+ border-color: $input-group-border-color-focus;
+ }
+ @if $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5.3' {
+ border-color: $input-group-border-color-focus;
+ border-radius: $input-groupo-focus-border-radius;
+ box-shadow: $input-group-focus-box-shadow;
+ }
+}
+
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:first-child:focus,
+.sf-input-group.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) span:last-child.sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:first-child:focus,
+.sf-input-group.sf-control-wrapper.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) span:last-child.sf-input-group-icon {
+ @if ($input-skin-name != 'bootstrap5.3') {
+ border-color: $input-group-border-right-focus;
+ }
+}
+
+.sf-input-group.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) span.sf-input-group-icon,
+.sf-input-group.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) span:first-child.sf-input-group-icon,
+.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:first-child:focus,
+.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:last-child:focus,
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) span.sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) span.sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) span:first-child.sf-input-group-icon,
+.sf-input-focus.sf-control-wrapper.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:first-child:focus,
+.sf-input-focus.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:last-child:focus,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) span.sf-input-group-icon {
+ @if ($input-skin-name != 'bootstrap5.3') {
+ border-color: $input-group-border-left-focus;
+ }
+}
+
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) span:first-child.sf-input-group-icon,
+.sf-input-group.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:last-child:focus,
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) span:first-child.sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) span:first-child.sf-input-group-icon,
+.sf-input-group.sf-control-wrapper.sf-input-focus.sf-rtl:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:last-child:focus,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) span:first-child.sf-input-group-icon {
+ @if ($input-skin-name != 'bootstrap5.3') {
+ border-color: transparent;
+ }
+}
+
+.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+.sf-input-group.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-float-input.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' {
+ border-color: $input-group-full-border-color;
+ }
+ @else if $input-skin-name == 'fluent2' {
+ border-bottom-color: $input-group-full-border-bottom-color;
+ }
+}
+
+.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error) {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+ border-color: $input-group-full-border-color;
+ }
+ @if $input-skin-name == 'tailwind3' {
+ box-shadow: $input-group-border-shadow;
+ }
+}
+
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left) .sf-input:focus,
+.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:focus,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left) .sf-input:focus,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:focus,
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left) .sf-input,
+.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left) .sf-input,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ border-bottom-color: transparent;
+ border-top-color: transparent;
+ }
+}
+
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:focus,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input:focus,
+.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input {
+ @if $input-skin-name != 'Material3' {
+ border-bottom-color: transparent;
+ border-top-color: transparent;
+ }
+}
+
+.sf-input-group.sf-success,
+.sf-input-group.sf-control-wrapper.sf-success,
+.sf-float-icon-left.sf-input-group.sf-success,
+.sf-float-icon-left.sf-control-wrapper.sf-input-group.sf-success,
+.sf-input-group.sf-warning,
+.sf-input-group.sf-control-wrapper.sf-warning,
+.sf-float-icon-left.sf-input-group.sf-warning,
+.sf-float-icon-left.sf-input-group.sf-control-wrapper.sf-warning,
+.sf-input-group.sf-error,
+.sf-input-group.sf-control-wrapper.sf-error,
+.sf-float-icon-left.sf-input-group.sf-error,
+.sf-float-icon-left.sf-input-group.sf-control-wrapper.sf-error,
+.sf-input-group.sf-float-icon-left,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left {
+ @if $input-skin-name == 'Material3' {
+ border-color: transparent;
+ }
+}
+
+.sf-input-group.sf-success,
+.sf-input-group.sf-control-wrapper.sf-success,
+.sf-input-group.sf-success:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-success:not(.sf-float-icon-left) {
+ @include input-state-color ($input-group-success-color);
+}
+
+.sf-input-group.sf-float-icon-left.sf-success .sf-input-in-wrap,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-success .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-state-color ($input-group-success-color);
+ }
+}
+
+.sf-input-group.sf-warning,
+.sf-input-group.sf-control-wrapper.sf-warning,
+.sf-input-group.sf-warning:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-float-icon-left) {
+ @include input-state-color ($input-group-warning-color);
+}
+
+.sf-input-group.sf-float-icon-left.sf-warning .sf-input-in-wrap,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-warning .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-state-color ($input-group-warning-color);
+ }
+}
+
+.sf-input-group.sf-error,
+.sf-input-group.sf-control-wrapper.sf-error,
+.sf-input-group.sf-error:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-error:not(.sf-float-icon-left) {
+ @include input-state-color ($input-group-error-color);
+}
+
+.sf-input-group.sf-float-icon-left.sf-error .sf-input-in-wrap,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-error .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ @include input-state-color ($input-group-error-color);
+ }
+}
+
+.sf-float-input .sf-clear-icon path,
+.sf-float-input.sf-control-wrapper .sf-clear-icon path,
+.sf-input-group .sf-clear-icon path,
+.sf-input-group.sf-control-wrapper .sf-clear-icon path {
+ fill: $input-clear-icon-color;
+}
+
+.sf-float-input .sf-clear-icon:hover,
+.sf-float-input.sf-control-wrapper .sf-clear-icon:hover,
+.sf-input-group .sf-clear-icon:hover,
+.sf-input-group.sf-control-wrapper .sf-clear-icon:hover {
+ path {
+ fill: $input-clear-icon-hover-color;
+ }
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+ border: $input-clear-icon-hover-border;
+ background: $input-clear-icon-hover-bg-color;
+ }
+}
+
+.sf-float-input.sf-input-focus .sf-input:focus,
+.sf-float-input.sf-control-wrapper.sf-input-focus .sf-input:focus {
+ border-bottom-color: transparent;
+ border-top-color: transparent;
+}
+
+.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) input label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input[readonly] ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-float-input:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[readonly] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) textarea label.sf-float-text.sf-label-top,
+.sf-float-input.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea[readonly] ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-float-input:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text {
+ color: $float-label-font-color;
+}
+
+.sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input .sf-control-wrapper:not(.sf-error) input label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea label.sf-float-text.sf-label-top {
+ @if $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
+ color: $float-label-font-color;
+ }
+ @else {
+ color: $float-label-top-font-color;
+ }
+}
+
+.sf-float-input:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-float-input.sf-small:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-float-input:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ color: $input-header-font-color;
+}
+
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[readonly] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top {
+ color: $float-label-font-color;
+}
+
+.sf-float-input.sf-input-group.sf-disabled .sf-float-text,
+.sf-float-input.sf-input-group.sf-disabled .sf-float-text.sf-label-top,
+.sf-float-input input[disabled] ~ label.sf-float-text,
+.sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-disabled label.sf-float-text,
+.sf-float-input.sf-disabled label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input textarea[disabled] ~ label.sf-float-text,
+.sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-disabled .sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-disabled .sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-disabled input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-disabled textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top {
+ color: $float-label-disbale-font-color;
+}
+
+.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input:not(.sf-error) input[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) input[readonly]:focus ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) input[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[readonly]:focus ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error) textarea[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea[readonly]:focus ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-active-accent-color;
+ }
+}
+
+.sf-input-group:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-float-input.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-float-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-input-group.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]),
+.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover {
+ @if $input-skin-name == 'Material3' {
+ border-color: $input-group-border-color-hover;
+ }
+ @else if $input-skin-name == 'fluent2' {
+ border-bottom-color: $input-group-full-border-bottom-color;
+ }
+}
+
+.sf-input-group:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-input-group.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-float-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-float-input:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]),
+.sf-float-input.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]) {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'fluent2' {
+ border-color: $input-group-border-color-hover;
+ }
+}
+
+.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]) {
+ @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+ border-color: $input-group-border-color-focus;
+ }
+}
+
+.sf-underline.sf-input-group:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-input-group.sf-control-wrapper:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input.sf-control-wrapper:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-input-group.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-input-group.sf-control-wrapper.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-input-focus):hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input:hover:not(.sf-input-focus):not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) {
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-color: $outline-hover-border-color;
+ color: $outline-hover-font-color;
+ }
+}
+
+.sf-underline.sf-input-group:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-input-group.sf-control-wrapper:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input.sf-control-wrapper:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-input-group.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-input-group.sf-control-wrapper.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-input-focus):hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-underline.sf-float-input:hover:not(.sf-input-focus):not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) {
+ @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-bottom-color: $underline-hover-border-color;
+ color: $outline-hover-font-color;
+ }
+}
+
+.sf-filled.sf-input-group,
+.sf-filled.sf-input-group.sf-control-wrapper,
+.sf-filled.sf-float-input,
+.sf-filled.sf-float-input.sf-input-group,
+.sf-filled.sf-float-input.sf-control-wrapper,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ background: $filled-input-bg-color;
+ transition: $background-color-transition;
+ }
+}
+
+.sf-filled.sf-input-group:hover,
+.sf-filled.sf-input-group.sf-control-wrapper:hover,
+.sf-filled.sf-float-input:hover,
+.sf-filled.sf-float-input.sf-input-group:hover,
+.sf-filled.sf-float-input.sf-control-wrapper:hover,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper:hover {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ background: $filled-input-overlay-focused-bg-color;
+ transition: $background-color-transition;
+ }
+}
+
+.sf-filled.sf-input-group.sf-input-focus,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus,
+.sf-filled.sf-float-input.sf-input-focus,
+.sf-filled.sf-float-input.sf-input-group.sf-input-focus,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus,
+.sf-filled.sf-float-input.sf-input-group.sf-control-wrapper.sf-input-focus,
+.sf-filled.sf-input-group:hover.sf-input-focus,
+.sf-filled.sf-input-group:hover.sf-control-wrapper.sf-input-focus,
+.sf-filled.sf-float-input:hover.sf-input-focus,
+.sf-filled.sf-float-input:hover.sf-input-group.sf-input-focus,
+.sf-filled.sf-float-input:hover.sf-control-wrapper.sf-input-focus,
+.sf-filled.sf-float-input:hover.sf-input-group.sf-control-wrapper.sf-input-focus {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ background: $filled-input-overlay-activated-bg-color;
+ transition: $background-color-transition;
+ }
+}
+
+.sf-filled.sf-input-group:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-input-group.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-filled.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-filled.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-filled.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-filled.sf-input-group:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-input-group.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-float-input.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-float-input:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled).sf-float-icon-left {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-color: $filled-input-hover-border-color;
+ }
+}
+
+.sf-filled.sf-input-group.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-filled.sf-float-input:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error) {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-color: $input-group-full-border-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-success,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-success,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-control-wrapper.sf-success {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-state-color ($input-success-color);
+ }
+}
+
+.sf-filled.sf-float-input.sf-warning,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-warning,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-control-wrapper.sf-warning {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-state-color ($input-warning-color);
+ }
+}
+
+.sf-filled.sf-float-input.sf-error,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-error,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-error,
+.sf-filled.sf-input-group.sf-float-icon-left.sf-control-wrapper.sf-error {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ @include input-state-color ($input-error-color);
+ }
+}
+
+.sf-filled label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-small:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-input-group.sf-filled textarea.sf-input:-ms-input-placeholder,
+input.sf-filled.sf-input#{$css}::-webkit-input-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper input.sf-input::-webkit-input-placeholder,
+.sf-input-group.sf-filled input.sf-input::-webkit-input-placeholder,
+textarea.sf-filled.sf-input#{$css}::-webkit-input-placeholder,
+.sf-input-group.sf-filled textarea.sf-input::-webkit-input-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper textarea.sf-input::-webkit-input-placeholder,
+.sf-filled.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error):not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-error) textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+input.sf-filled.sf-input#{$css}:-moz-placeholder,
+.sf-input-group.sf-filled input.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled input.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper input.sf-input:-moz-placeholder,
+input.sf-filled.sf-input#{$css}:-moz-placeholder,
+.sf-input-group.sf-filled input.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper input.sf-input:-moz-placeholder,
+textarea.sf-filled.sf-input#{$css}:-moz-placeholder,
+.sf-input-group.sf-filled textarea.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper textarea.sf-input:-moz-placeholder,
+input.sf-filled.sf-input#{$css}::-moz-placeholder,
+.sf-input-group.sf-filled input.sf-input::-moz-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper input.sf-input::-moz-placeholder,
+textarea.sf-filled.sf-input#{$css}::-moz-placeholder,
+.sf-input-group.sf-filled textarea.sf-input::-moz-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper textarea.sf-input::-moz-placeholder,
+input.sf-filled.sf-input#{$css}:-ms-input-placeholder,
+.sf-input-group.sf-filled input.sf-input:-ms-input-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper input.sf-input:-ms-input-placeholder,
+textarea.sf-filled.sf-input#{$css}:-ms-input-placeholder,
+.sf-input-group.sf-filled.sf-control-wrapper textarea.sf-input:-ms-input-placeholder {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $filled-input-float-label-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-error label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-error label.sf-float-text,
+.sf-filled.sf-float-input.sf-error input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-error input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-error textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-error textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-error-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-success label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input .sf-control-wrapper.sf-success input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success input[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success input[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success input:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-success input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-small.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success input[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success input[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success input:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-success-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-warning label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input .sf-control-wrapper.sf-warning input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning input[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning input[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning input:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-warning input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-small.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-warning-color;
+ }
+}
+
+.sf-filled.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input .sf-control-wrapper:not(.sf-error) input label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input:not(.sf-input-focus):not(.sf-disabled) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-filled.sf-float-input:not(.sf-input-focus) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-input-focus):not(.sf-disabled) textarea:not(:focus):not(:valid) ~ label.sf-float-text:not(.sf-label-top),
+.sf-filled.sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $filled-input-float-label-color;
+ }
+}
+
+.sf-filled.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input[readonly]:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) input[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[readonly]:focus ~ label.sf-float-text,
+.sf-small .sf-float-input.sf-control-wrapper:not(.sf-error) input[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error) textarea[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly]:focus ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea[readonly]:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[readonly]:focus ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error).sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error).sf-input-focus input ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-active-accent-color;
+ }
+}
+
+.sf-input-group textarea.sf-input:-ms-input-placeholder,
+.sf-input-group textarea.sf-input:-moz-placeholder,
+.sf-input-group .sf-input:-ms-input-placeholder,
+input.sf-input#{$css}::-webkit-input-placeholder {
+ @if $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5.3' {
+ color: $input-placeholder-color;
+ }
+}
+
+.sf-filled.sf-float-input:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-filled.sf-input-group:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-filled.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:hover {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ path {
+ fill: $filled-input-clear-icon-hover-color;
+ }
+ }
+}
+
+.sf-filled.sf-float-input:not(.sf-disabled) .sf-clear-icon:active,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:active,
+.sf-filled.sf-input-group:not(.sf-disabled) .sf-clear-icon:active,
+.sf-filled.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:active {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ path {
+ fill: $filled-input-clear-icon-active-color;
+ }
+ }
+}
+
+.sf-filled.sf-input#{$css}[disabled],
+.sf-input-group.sf-filled .sf-input[disabled],
+.sf-input-group.sf-filled.sf-control-wrapper .sf-input[disabled],
+.sf-input-group.sf-filled.sf-disabled,
+.sf-input-group.sf-filled.sf-control-wrapper.sf-disabled,
+.sf-filled.sf-float-input input[disabled],
+.sf-filled.sf-float-input.sf-control-wrapper input[disabled],
+.sf-filled.sf-float-input textarea[disabled],
+.sf-filled.sf-float-input.sf-control-wrapper textarea[disabled],
+.sf-filled.sf-float-input.sf-disabled,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ background-image: none;
+ background-position: initial;
+ background-repeat: no-repeat;
+ background-size: $zero-value;
+ border-color: $filled-input-disabled-border-color;
+ color: $filled-input-disabled-font-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-disabled:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-success):not(.sf-warning):not(.sf-error) {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ border-color: $filled-input-disabled-border-color;
+ }
+}
+
+.sf-filled.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left).sf-disabled,
+.sf-filled.sf-input-group.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled .sf-input-in-wrap,
+.sf-filled.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left).sf-disabled,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled .sf-input-in-wrap {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ background: $filled-input-disabled-bg-color;
+ background-image: none;
+ background-position: initial;
+ background-repeat: no-repeat;
+ background-size: $zero-value;
+ border-color: $filled-input-disabled-border-color;
+ color: $filled-input-disabled-font-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-input-group.sf-disabled .sf-float-text,
+.sf-filled.sf-float-input.sf-input-group.sf-disabled .sf-float-text.sf-label-top,
+.sf-filled.sf-float-input input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-disabled label.sf-float-text,
+.sf-filled.sf-float-input.sf-disabled label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-disabled .sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-disabled .sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+input.sf-filled.sf-disabled.sf-input#{$css}:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled input.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled input.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper input.sf-input:-moz-placeholder,
+input.sf-filled.sf-disabled.sf-input#{$css}:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled input.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper input.sf-input:-moz-placeholder,
+textarea.sf-filled.sf-disabled.sf-input#{$css}:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled textarea.sf-input:-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper textarea.sf-input:-moz-placeholder,
+input.sf-filled.sf-disabled.sf-input#{$css}::-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled input.sf-input::-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper input.sf-input::-moz-placeholder,
+textarea.sf-filled.sf-disabled.sf-input#{$css}::-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled textarea.sf-input::-moz-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper textarea.sf-input::-moz-placeholder,
+input.sf-filled.sf-disabled.sf-input#{$css}:-ms-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled input.sf-input:-ms-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper input.sf-input:-ms-input-placeholder,
+textarea.sf-filled.sf-disabled.sf-input#{$css}:-ms-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper textarea.sf-input:-ms-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled textarea.sf-input:-ms-input-placeholder,
+input.sf-filled.sf-disabled.sf-input#{$css}::-webkit-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper input.sf-input::-webkit-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled input.sf-input::-webkit-input-placeholder,
+textarea.sf-filled.sf-disabled.sf-input#{$css}::-webkit-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled textarea.sf-input::-webkit-input-placeholder,
+.sf-input-group.sf-filled.sf-disabled.sf-control-wrapper textarea.sf-input::-webkit-input-placeholder,
+.sf-filled.sf-float-input.sf-disabled .sf-clear-icon,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled .sf-clear-icon,
+.sf-input-group.sf-filled.sf-disabled .sf-clear-icon,
+.sf-input-group.sf-filled.sf-control-wrapper.sf-disabled .sf-clear-icon,
+.sf-input-group.sf-filled.sf-control-wrapper.sf-disabled .sf-input-group-icon,
+.sf-filled.sf-float-input:not(.sf-disabled) input[disabled],
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-disabled) input[disabled],
+.sf-filled.sf-float-input:not(.sf-disabled) textarea[disabled],
+.sf-filled.sf-float-input.sf-control-wrapper:not(.sf-disabled) textarea[disabled] {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $filled-input-disabled-font-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-success textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-small.sf-success textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input.sf-success textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-small.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success textarea[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success textarea:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-success textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-success:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-success:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-success:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-success:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-success textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-success textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-success textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-success textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-success textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-success textarea:not(:focus):-webkit-autofill ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-success-color;
+ }
+}
+
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning input:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning input[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning input[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning input ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning input[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-filled.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea:valid ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea ~ label.sf-label-top.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea[readonly] ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea[disabled] ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:valid ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea ~ label.sf-label-top.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea[readonly] ~ label.sf-float-text.sf-label-top,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-filled.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning input:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-small.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus inputs ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-small.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-warning:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-warning:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-warning:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-warning:not(.sf-input-focus) input:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-warning textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-warning textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-warning textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-warning textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-warning textarea:not(:focus):-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-filled.sf-float-input.sf-control-wrapper.sf-autofill.sf-warning textarea:not(:focus):-webkit-autofill ~ label.sf-float-text {
+ @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+ color: $input-warning-color;
+ }
+}
diff --git a/components/inputs/styles/input/_material3-dark-definition.scss b/components/inputs/styles/input/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/inputs/styles/input/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/inputs/styles/input/_material3-definition.scss b/components/inputs/styles/input/_material3-definition.scss
new file mode 100644
index 0000000..d620f84
--- /dev/null
+++ b/components/inputs/styles/input/_material3-definition.scss
@@ -0,0 +1,1982 @@
+$input-skin-name: 'Material3' !default;
+$zero-value: 0 !default;
+$one-value: 1px !default;
+$border-type: solid !default;
+$border-size: 1px !default;
+$input-child-padding-bottom: $zero-value !default;
+$input-child-small-bigger-padding-bottom: $zero-value !default;
+$input-child-small-padding-bottom: $zero-value !default;
+$input-child-bigger-padding-bottom: $zero-value !default;
+$input-group-full-border: $border-size $border-type !default;
+$input-child-small-bigger-padding-top: $zero-value !default;
+$input-child-small-padding-top: $zero-value !default;
+$input-child-padding-top: $zero-value !default;
+$input-child-bigger-padding-top: $zero-value !default;
+$input-success-color: rgba($success-font-color) !default;
+$input-warning-color: rgba($warning-font-color) !default;
+$input-error-color: rgba($error-font-color) !default;
+$input-disable-bg-color: $transparent !default;
+$input-active-bg-color: $flyout-bg-color !default;
+$input-active-font-color: rgba($content-text-color) !default;
+$input-press-font-color: rgba($primary-text-color) !default;
+$input-box-border-radius: $zero-value !default;
+$input-group-child-border-width: $zero-value !default;
+$input-bg-color: transparent !default;
+$input-font-size: $text-sm !default;
+$input-small-font-size: $text-xs !default;
+$input-padding: 4px $zero-value 4px !default;
+$textarea-padding: 4px $zero-value 4px !default;
+$textarea-bigger-padding: 5px $zero-value 5px !default;
+$textarea-small-padding: 4px $zero-value 4px !default;
+$textarea-bigger-small-padding: 4px $zero-value 4px !default;
+$textarea-min-height: 15px !default;
+$textarea-bigger-min-height: 17px !default;
+$textarea-bigger-small-min-height: 15px !default;
+$textarea-small-min-height: 14px !default;
+$float-input-padding: 4px $zero-value 4px !default;
+$float-label-padding: $zero-value !default;
+$float-input-wrap-padding-top: $zero-value !default;
+$input-padding-bottom: 4px !default;
+$input-focus-padding-bottom: 3px !default;
+$input-clear-icon: 16px !default;
+$input-small-clear-icon: $font-icon-16 !default;
+$input-clear-icon-padding: $zero-value !default;
+$input-clear-icon-margin: 0 !default;
+$input-small-clear-icon-border-radius: 16px !default;
+$input-clear-icon-position: center !default;
+$float-input-bigger-padding: 5px $zero-value 5px !default;
+$float-input-bigger-wrap-padding-top: 1px !default;
+$input-focus-bigger-padding-bottom: 4px !default;
+$input-child-padding: $zero-value !default;
+$input-child-min-height: 30px !default;
+$input-child-min-width: 30px !default;
+$input-child-icon-border-radius: 16px !default;
+$input-margin-bottom: 0 !default;
+$input-small-margin-bottom: 4px !default;
+$input-small-bigger-margin-bottom: 4px !default;
+$input-margin-top: 16px !default;
+$input-small-margin-top: 16px !default;
+$input-small-bigger-margin-top: 17px !default;
+$input-small-padding: 3px $zero-value 3px !default;
+$float-input-small-padding: 4px $zero-value 4px !default;
+$float-input-small-wrap-padding-top: $zero-value !default;
+$input-small-padding-bottom: 4px !default;
+$input-focus-small-padding-bottom: 3px !default;
+$float-input-bigger-small-padding: 4px $zero-value 4px !default;
+$float-input-bigger-small-wrap-padding-top: 1px !default;
+$input-focus-bigger-small-padding-bottom: 3px !default;
+$input-small-child-padding: $zero-value !default;
+$input-small-child-min-height: 22px !default;
+$input-small-child-min-width: 24px !default;
+$input-small-child-border-radius: 14px !default;
+$input-font-family: $font-family !default;
+$input-font-style: normal !default;
+$input-font-normal: normal !default;
+$input-border: $zero-value $border-type !default;
+$float-input-border: $zero-value $border-type !default;
+$input-box-border-width: $zero-value $zero-value $one-value $zero-value !default;
+$float-input-border-width: $zero-value $zero-value $one-value $zero-value !default;
+$input-focus-border-width: $zero-value $zero-value 2px $zero-value !default;
+$input-box-border-color: rgba($border) !default;
+$input-font-color: rgba($content-text-color) !default;
+$input-icon-font-color: rgba($icon-color) !default;
+$input-clear-icon-color: rgba($icon-color) !default;
+$input-clear-icon-hover-color: rgba($icon-color-hover) !default;
+$input-error-color: rgba($error-font-color) !default;
+$input-accent: rgba($primary) !default;
+$input-placeholder: rgba($placeholder-text-color) !default;
+$input-active-border-color: rgba($primary) !default;
+$input-group-active-border-color: $transparent !default;
+$input-disable-border-type: dashed !default;
+$input-disable-border-color: $input-box-border-color !default;
+$input-disabled-group-bg-color: $transparent !default;
+$input-border-left-width: $zero-value !default;
+$input-group-active-border: $transparent !default;
+$input-group-border: 1px $border-type !default;
+$input-group-border-width: $zero-value !default;
+$input-group-border-radius: 2px !default;
+$input-group-pressed-bg: rgba($content-text-color, .12) !default;
+$input-hover-bg-color: rgba($secondary) !default;
+$input-active-accent-color: rgba($primary) !default;
+$input-valid-group-border-width: 2px !default;
+$input-header-font-color: rgba($placeholder-text-color) !default;
+$input-child-margin-bottom: 4px !default;
+$input-child-margin-right: 4px !default;
+$input-child-margin-top: 4px !default;
+$float-input-child-margin-top: 2px !default;
+$input-child-small-bigger-margin-bottom: 4px !default;
+$input-child-small-bigger-margin-right: 4px !default;
+$input-child-small-bigger-margin-top: 4px !default;
+$float-input-child-small-bigger-margin-top: 4px !default;
+$input-child-small-margin-bottom: 4px !default;
+$input-child-small-margin-right: 4px !default;
+$input-child-small-margin-top: 4px !default;
+$float-input-child-small-margin-top: 4px !default;
+$input-child-bigger-margin-bottom: 5px !default;
+$input-child-bigger-margin-right: 8px !default;
+$input-child-bigger-margin-top: 6px !default;
+$input-child-bigger-margin: 0 !default;
+$float-input-child-bigger-margin-top: 6px !default;
+$input-disable-group-border-width: $zero-value $zero-value $one-value $zero-value !default;
+$input-opacity: 1 !default;
+$input-opacity-filter: 100 !default;
+$input-group-border-width-focus: $zero-value $zero-value $one-value $zero-value !default;
+$input-group-border-type-focus: $border-type !default;
+$input-group-border-color-focus: $input-box-border-color !default;
+$input-group-border-color-hover: rgba($content-text-color) !default;
+$input-group-border-width-hover: 1px !default;
+$input-group-border-right-focus: $transparent !default;
+$input-group-border-left-focus: $transparent !default;
+$input-group-full-border-color: $input-box-border-color !default;
+$input-group-full-border-width: $zero-value $zero-value $one-value $zero-value !default;
+$input-group-success-color: $input-success-color !default;
+$input-group-warning-color: $input-warning-color !default;
+$input-group-error-color: $input-error-color !default;
+$input-valid-border-bottom-width: 2px !default;
+$input-group-pressed-color: rgba($content-text-color) !default;
+$input-select-font-color: rgba($primary-text-color) !default;
+$input-right-border-width: $zero-value !default;
+$input-text-indent: $zero-value !default;
+$input-small-text-indent: $zero-value !default;
+$input-small-bigger-text-indent: $zero-value !default;
+$input-disable-font-color: rgba($content-text-color, .38) !default;
+$float-label-font-color: rgba($placeholder-text-color) !default;
+$float-label-disbale-font-color: $input-disable-font-color !default;
+$float-label-font-size: 12px !default;
+$float-label-bigger-font-size: 12px !default;
+$float-label-small-font-size: 12px !default;
+$float-label-bigger-small-font-size: 12px !default;
+$float-placeholder-font-size: 13px !default;
+$float-placeholder-bigger-font-size: 14px !default;
+$float-placeholder-small-font-size: 12px !default;
+$float-placeholder-bigger-small-font-size: 13px !default;
+$input-border-size: 1px !default;
+$input-normal-height: 32px - $input-border-size !default;
+$input-small-height: 26px - $input-border-size !default;
+$float-input-normal-height: 32px !default;
+$float-input-bigger-height: 40px !default;
+$float-input-small-height: 26px !default;
+$float-input-bigger-small-height: 36px !default;
+$input-full-height: 100% !default;
+$textarea-normal-height: auto !default;
+$textarea-bigger-height: auto !default;
+$textarea-small-height: auto !default;
+$textarea-bigger-small-height: auto !default;
+$textarea-full-height: 100% !default;
+$input-group-disabled-color: rgba($content-text-color, .38) !default;
+$input-group-hovered-color: $input-icon-font-color !default;
+$input-icon-font-size: $font-icon-16 !default;
+$input-small-icon-font-size: $font-icon-16 !default;
+$input-inner-wrap-margin-left: 8px !default;
+$input-clear-icon-padding-bottom: 4px !default;
+$input-clear-icon-padding-right: 8px !default;
+$input-clear-icon-padding-left: $input-clear-icon-padding-right !default;
+$input-clear-icon-padding-top: 4px !default;
+$float-input-clear-icon-padding-top: 4px !default;
+$input-clear-icon-small-bigger-padding-bottom: 4px !default;
+$input-clear-icon-small-bigger-padding-right: 4px !default;
+$input-clear-icon-small-bigger-padding-top: 4px !default;
+$float-input-clear-icon-small-bigger-padding-top: 4px !default;
+$input-clear-icon-small-padding-bottom: 4px !default;
+$input-clear-icon-small-padding-right: 4px !default;
+$input-clear-icon-small-padding-top: 4px !default;
+$float-input-clear-icon-small-padding-top: 4px !default;
+$input-clear-icon-bigger-padding-bottom: 5px !default;
+$input-clear-icon-bigger-padding-right: 8px !default;
+$input-clear-icon-bigger-padding-top: 6px !default;
+$float-input-clear-icon-bigger-padding-top: 6px !default;
+$input-clear-icon-min-height: 30px !default;
+$input-clear-icon-min-width: 30px !default;
+$input-bigger-clear-icon-min-height: 38px !default;
+$input-bigger-clear-icon-min-width: 38px !default;
+$input-bigger-small-clear-icon-min-height: 34px !default;
+$input-bigger-small-clear-icon-min-width: 34px !default;
+$input-bigger-clear-icon-border-radius: 20px !default;
+$input-small-clear-icon-min-height: 22px !default;
+$input-small-clear-icon-min-width: 22px !default;
+$input-smaller-min-height: 15px !default;
+$textarea-smaller-min-height: 18px !default;
+$input-min-height: 23px !default;
+$textarea-min-height: 23px !default;
+$float-label-rtl-value: -7px !default;
+$input-left-icon-font-size: 20px !default;
+$input-small-left-icon-font-size: 20px !default;
+$input-left-child-min-height: 30px !default;
+$input-left-child-min-width: 30px !default;
+$input-small-left-child-min-height: 28px !default;
+$input-small-left-child-min-width: 28px !default;
+$input-icon-inner-width: 10px !default;
+$input-icon-inner-height: 10px !default;
+$input-readonly-bg-color: none !default;
+$input-child-small-margin: 0 !default;
+$input-icon-hover-border: 1px !default;
+$input-icon-hover-border-radius: 16px !default;
+$input-icon-hover-bg-color: rgba($content-text-color, .08) !default;
+$input-clear-icon-hover-border: 1px !default;
+$input-clear-icon-hover-border-radius: 16px !default;
+$input-clear-icon-hover-bg-color: rgba($content-text-color, .08) !default;
+$outline-border-color: rgba($border) !default;
+$outline-input-font-color: rgba($content-text-color) !default;
+$outline-input-label-font-color: rgba($placeholder-text-color) !default;
+$outline-input-font-size: 14px !default;
+$outline-hover-border-color: rgba($content-text-color) !default;
+$outline-hover-font-color: rgba($content-text-color) !default;
+$outline-active-input-border: 1px !default;
+$outline-input-padding-left: 12px !default;
+$outline-input-padding-top: 10px !default;
+$outline-input-padding-bottom: 9px !default;
+$outline-input-min-height: 40px !default;
+$outline-input-icon-margin-left: $zero-value !default;
+$outline-input-icon-margin-right: 12px !default;
+$outline-small-input-min-height: 32px !default;
+$outline-small-input-padding-left: 10px !default;
+$outline-small-input-padding-top: 7px !default;
+$outline-small-input-icon-margin-left: 10px !default;
+$outline-small-input-icon-margin-right: 6px !default;
+$outline-bigger-input-min-height: 56px !default;
+$outline-bigger-input-icon-margin-left: 16px !default;
+$outline-bigger-input-icon-margin-right: 8px !default;
+$outline-bigger-input-padding-left: 16px !default;
+$outline-bigger-input-padding-top: 15px !default;
+$outline-small-bigger-input-min-height: 48px !default;
+$outline-small-bigger-input-margin-top: 10px !default;
+$outline-small-bigger-input-margin-bottom: 9px !default;
+$outline-small-bigger-input-margin-left: 12px !default;
+$outline-small-bigger-icon-margin-left: 12px !default;
+$outline-small-bigger-icon-margin-right: 8px !default;
+$outline-input-border: $zero-value !default;
+$outline-input-group-border-width: $zero-value !default;
+$outline-disabled-border-color: rgba($border, .38) !default;
+$outline-float-label-top: -6px !default;
+$outline-label-before-element-margin-top: 6px !default;
+$outline-wrapper-border-infocused: 2px !default;
+$outline-label-min-width: 9px !default;
+$outline-small-label-min-width: 7px !default;
+$outline-bigger-label-min-width: 13px !default;
+$outline-bigger-small-label-min-width: 9px !default;
+$outline-label-height: 8px !default;
+$outline-label-margin: 4px !default;
+$outline-label-border-radius: 5px !default;
+$outline-label-before-left: -1px !default;
+$outline-label-after-left: 2px !default;
+$outline-input-icon-padding-top-bottom: 9px !default;
+$outline-input-icon-font-size: 16px !default;
+$outline-input-clear-icon-font-size: 16px !default;
+$outline-floating-label-font-size: 12px !default;
+$outline-bigger-input-font-size: 16px !default;
+$outline-bigger-input-icon-padding: 15px !default;
+$outline-bigger-input-icon-font-size: 20px !default;
+$outline-bigger-clear-icon-font-size: 20px !default;
+$outline-small-bigger-input-label-font-size: 12px !default;
+$outline-small-bigger-input-icon-font-size: 18px !default;
+$outline-small-bigger-clear-icon-font-size: 18px !default;
+$outline-label-font-color-with-value: rgba($placeholder-text-color) !default;
+$outline-valid-input-font-size: 14px !default;
+$outline-label-default-line-height: 13px !default;
+$outline-label-before-left-rtl: 5px !default;
+$outline-label-after-left-rtl: -6px !default;
+$outline-label-line-height: 54px !default;
+$outline-bigger-label-line-height: 70px !default;
+$outline-small-bigger-label-line-height: 53px !default;
+$outline-small-label-line-height: 46px !default;
+$outline-textarea-label-line-height: 50px !default;
+$outline-valid-textarea-font-size: 14px !default;
+$outline-textarea-small-label-line-height: 60px !default;
+$outline-textarea-bigger-label-line-height: 66px !default;
+$outline-textarea-small-bigger-label-line-height: 60px !default;
+$outline-textarea-margin-top: 8px $zero-value 1px !default;
+$outline-small-textarea-margin-top: 8px $zero-value 1px !default;
+$outline-bigger-textarea-maring-top: 8px $zero-value 1px !default;
+$outline-small-input-font-size: 13px !default;
+$outline-small-input-icon-font-size: 16px !default;
+$outline-small-clear-icon-font-size: 16px !default;
+$outline-small-label-font-size: 11px !default;
+$outline-bigger-label-font-size: 12px !default;
+$outline-small-bigger-input-font-size: 14px !default;
+$outline-small-bigger-label-font-size: 12px !default;
+$outline-bigger-small-group-icon-top: 9px !default;
+$outline-bigger-small-group-icon-bottom: 9px !default;
+$outline-input-small-clear-icon: 14px !default;
+$outline-input-clear-icon: 16px !default;
+$outline-input-bigger-clear-icon: 20px !default;
+$outline-input-bigger-small-clear-icon: 18px !default;
+$outline-input-clear-icon-hover-color: rgba($icon-color-hover) !default;
+$outline-input-clear-icon-active-color: rgba($icon-color) !default;
+$outline-float-label-font-size: 14px !default;
+$bigger-outline-float-label-font-size: 16px !default;
+$bigger-small-outline-float-label-font-size: 14px !default;
+$small-outline-float-label-font-size: 13px !default;
+$outline-float-label-disbale-font-color: rgba($content-text-color-alt1, .38) !default;
+$outline-disabled-input-font-color: rgba($content-text-color, .38) !default;
+$outline-input-group-disabled-color: rgba($content-text-color) !default;
+$textarea-float-top: -22px !default;
+@mixin input-sizing {
+ box-sizing: content-box;
+}
+@mixin input-height ($height) {
+ content: '';
+}
+@mixin input-state-color ($color) {
+ border-bottom-color: $color;
+}
+@mixin input-selection {
+ background: $input-accent;
+ color: rgba($primary-text-color);
+}
+@mixin float-label-alignment {
+ content: '';
+}
+/* stylelint-disable property-no-vendor-prefix */
+@mixin input-group-animation {
+ -moz-transition: .2s cubic-bezier(.4, 0, .4, 1);
+ bottom: 0;
+ content: '';
+ height: 2px;
+ position: absolute;
+ transition: .2s cubic-bezier(.4, 0, .4, 1);
+ width: 0;
+}
+@mixin input-group-animation-left {
+ left: 50%;
+}
+@mixin input-group-animation-width {
+ width: 50%;
+}
+@mixin input-group-animation-right {
+ right: 50%;
+}
+@mixin input-group-animation-bg {
+ background: $input-active-border-color;
+}
+@mixin input-group-hover-bg {
+ background: $input-group-border-color-hover;
+}
+@mixin input-group-success-animation-bg {
+ background: $input-success-color;
+}
+@mixin input-group-warning-animation-bg {
+ background: $input-warning-color;
+}
+
+@mixin input-group-error-animation-bg {
+ background: $input-error-color;
+}
+@mixin input-ripple-parent {
+ position: relative;
+}
+@mixin input-ripple-style {
+ background: $grey-400;
+ border-radius: 100%;
+ content: '';
+ display: block;
+ height: 40%;
+ opacity: .75;
+ position: absolute;
+ transform: scale(0);
+ width: 40%;
+}
+@mixin input-ripple-animation {
+ animation: e-input-ripple .45s linear;
+}
+@keyframes e-input-ripple {
+ 100% {
+ opacity: 0;
+ transform: scale(4);
+ }
+}
+@keyframes slideTopUp {
+ from{ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1); }
+ to{ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1); }
+}
+$filled-input-font-size: 14px !default;
+$bigger-filled-input-font-size: 16px !default;
+$bigger-small-filled-input-font-size: 14px !default;
+$small-filled-input-font-size: 13px !default;
+$filled-float-label-font-size: 14px !default;
+$bigger-filled-float-label-font-size: 16px !default;
+$bigger-small-filled-float-label-font-size: 14px !default;
+$small-filled-float-label-font-size: 13px !default;
+$filled-input-clear-icon-size: 16px !default;
+$bigger-filled-input-clear-icon-size: 20px !default;
+$bigger-small-filled-input-clear-icon-size: 18px !default;
+$small-filled-input-clear-icon-size: 14px !default;
+$filled-input-icon-size: 16px !default;
+$bigger-filled-input-icon-size: 20px !default;
+$bigger-small-filled-input-icon-size: 18px !default;
+$small-filled-input-icon-size: 14px !default;
+$filled-float-input-wrapper-padding: 3px 10px $zero-value 12px !default;
+$bigger-filled-float-input-wrapper-padding: $zero-value 12px $zero-value 16px !default;
+$bigger-small-filled-float-input-wrapper-padding: $zero-value 10px $zero-value 12px !default;
+$small-filled-float-input-wrapper-padding: $zero-value 6px $zero-value 8px !default;
+$filled-float-input-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
+$bigger-filled-float-input-wrapper-rtl-padding: $zero-value 16px $zero-value 12px !default;
+$bigger-small-filled-float-input-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
+$small-filled-float-input-wrapper-rtl-padding: $zero-value 8px $zero-value 6px !default;
+$filled-wrapper-padding: $zero-value 10px $zero-value 12px !default;
+$bigger-filled-wrapper-padding: $zero-value 12px $zero-value 16px !default;
+$bigger-small-filled-wrapper-padding: $zero-value 10px $zero-value 12px !default;
+$small-filled-wrapper-padding: $zero-value 6px $zero-value 8px !default;
+$filled-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
+$bigger-filled-wrapper-rtl-padding: $zero-value 16px $zero-value 12px !default;
+$bigger-small-filled-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
+$small-filled-wrapper-rtl-padding: $zero-value 8px $zero-value 6px !default;
+$filled-wrapper-margin: $zero-value !default;
+$filled-input-padding: 10px 2px 2px $zero-value !default;
+$filled-bigger-input-padding: 16px 4px 16px $zero-value !default;
+$filled-bigger-small-input-padding: 10px 2px 10px $zero-value !default;
+$filled-small-input-padding: 10px 2px 2px $zero-value !default;
+$filled-input-rtl-padding: 10px $zero-value 10px 2px !default;
+$filled-bigger-input-rtl-padding: 16px $zero-value 16px 4px !default;
+$filled-bigger-small-input-rtl-padding: 10px $zero-value 10px 2px !default;
+$filled-small-input-rtl-padding: 7px $zero-value 7px 2px !default;
+$filled-input-padding-bottom: 10px !default;
+$filled-bigger-input-padding-bottom: 16px !default;
+$filled-bigger-small-input-padding-bottom: 10px !default;
+$filled-small-input-padding-bottom: 7px !default;
+$filled-float-input-padding: 14px 2px 5px $zero-value !default;
+$filled-bigger-float-input-padding: 20px 4px 6px $zero-value !default;
+$filled-bigger-small-float-input-padding: 14px 2px 5px $zero-value !default;
+$filled-small-float-input-padding: 12px 2px 4px $zero-value !default;
+$filled-float-input-rtl-padding: 14px $zero-value 5px 2px !default;
+$filled-bigger-float-input-rtl-padding: 20px $zero-value 6px 4px !default;
+$filled-bigger-small-float-input-rtl-padding: 14px $zero-value 5px 2px !default;
+$filled-small-float-input-rtl-padding: 12px $zero-value 4px 2px !default;
+$filled-textarea-padding: $zero-value 12px 9px !default;
+$filled-bigger-textarea-padding: $zero-value 16px 8px !default;
+$filled-bigger-small-textarea-padding: $zero-value 12px 10px !default;
+$filled-small-textarea-padding: $zero-value 8px 7px !default;
+$filled-float-textarea-padding: 4px 12px 5px !default;
+$filled-bigger-float-textarea-padding: $zero-value 16px 8px !default;
+$filled-bigger-small-float-textarea-padding: $zero-value 12px 5px !default;
+$filled-small-float-textarea-padding: $zero-value 8px 4px !default;
+$filled-textarea-wrapper-padding: 10px $zero-value $zero-value !default;
+$bigger-filled-textarea-wrapper-padding: 16px $zero-value $zero-value !default;
+$bigger-small-filled-textarea-wrapper-padding: 10px $zero-value $zero-value !default;
+$small-filled-textarea-wrapper-padding: 7px $zero-value $zero-value !default;
+$filled-float-textarea-wrapper-padding: 14px $zero-value $zero-value !default;
+$bigger-filled-float-textarea-wrapper-padding: 20px $zero-value $zero-value !default;
+$bigger-small-filled-float-textarea-wrapper-padding: 14px $zero-value $zero-value !default;
+$small-filled-float-textarea-wrapper-padding: 12px $zero-value $zero-value !default;
+$filled-input-label-top: 13px !default;
+$bigger-filled-input-label-top: 18px !default;
+$bigger-small-filled-input-label-top: 12px !default;
+$small-filled-input-label-top: 10px !default;
+$filled-input-label-top-after-floating: 10px !default;
+$bigger-filled-input-label-top-after-floating: 18px !default;
+$bigger-small-filled-input-label-top-after-floating: 12px !default;
+$small-filled-input-label-top-after-floating: 10px !default;
+$filled-input-label-left: 12px !default;
+$bigger-filled-input-label-left: 16px !default;
+$bigger-small-filled-input-label-left: 12px !default;
+$small-filled-input-label-left: 8px !default;
+$filled-input-label-initial-transform: none !default;
+$filled-input-label-line-height: 1.2 !default;
+$bigger-filled-input-label-line-height: 1.25 !default;
+$small-filled-input-label-line-height: 1.2 !default;
+$bigger-small-filled-input-label-line-height: 1.25 !default;
+$filled-input-label-width: auto !default;
+$filled-default-input-min-height: 39px !default;
+$bigger-filled-default-input-min-height: 55px !default;
+$bigger-small-filled-default-input-min-height: 39px !default;
+$small-filled-default-input-min-height: 35px !default;
+$filled-input-min-height: 40px !default;
+$bigger-filled-input-min-height: 56px !default;
+$bigger-small-filled-input-min-height: 39px !default;
+$small-filled-input-min-height: 32px !default;
+$filled-input-icon-min-height: 32px !default;
+$bigger-filled-input-icon-min-height: 40px !default;
+$bigger-small-filled-input-icon-min-height: 20px !default;
+$small-filled-input-icon-min-height: 32px !default;
+$filled-input-left-icon-min-height: 16px !default;
+$bigger-filled-input-left-icon-min-height: 20px !default;
+$bigger-small-filled-input-left-icon-min-height: 20px !default;
+$small-filled-input-left-icon-min-height: 16px !default;
+$filled-input-left-icon-min-width: 16px !default;
+$bigger-filled-input-left-icon-min-width: 20px !default;
+$bigger-small-filled-input-left-icon-min-width: 20px !default;
+$small-filled-input-left-icon-min-width: 16px !default;
+$filled-input-bg-color: rgba($series-1) !default;
+$filled-input-overlay-bg-color: rgba($series-1) !default;
+$filled-input-overlay-focused-bg-color: rgba($series-1) !default;
+$filled-input-overlay-activated-bg-color: rgba($series-1) !default;
+$background-color-transition: opacity 15ms linear,
+ background-color 15ms linear !default;
+$filled-input-hover-border-color: rgba($content-text-color) !default;
+$filled-input-float-label-color: rgba($placeholder-text-color) !default;
+$filled-input-disabled-font-color: rgba($content-text-color) !default;
+$filled-input-disabled-bg-color: rgba($series-1, .38) !default;
+$filled-input-disabled-border-color: rgba($border) !default;
+$filled-input-clear-icon-hover-color: rgba($icon-color-hover) !default;
+$filled-input-clear-icon-active-color: rgba($icon-color) !default;
+
+.sf-float-input.sf-outline.sf-float-icon-left:not(.sf-rtl) .sf-input-in-wrap input ~ label.sf-float-text.sf-label-top {
+ left: -34px;
+ width: auto;
+}
+
+.sf-float-input.sf-outline.sf-float-icon-left.sf-rtl .sf-input-in-wrap input ~ label.sf-float-text.sf-label-top {
+ right: -34px;
+ width: auto;
+}
+
+.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) {
+ border-style: $input-group-border-type-focus;
+ border-width: $input-group-border-width-focus;
+}
+
+.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-warning:not(.sf-success):not(.sf-error),
+.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-error:not(.sf-success):not(.sf-warning),
+.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error),
+.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error,
+.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error) input,
+.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error) input,
+.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error input,
+.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left).sf-warning:not(.sf-success):not(.sf-error),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left).sf-error:not(.sf-success):not(.sf-warning),
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error),
+.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error,
+.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error) input,
+.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error) input,
+.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error input,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap {
+ border-style: $input-group-border-type-focus;
+ border-width: $input-group-border-width-focus;
+}
+
+.sf-input-group:not(.sf-float-icon-left),
+.sf-input-group.sf-success:not(.sf-float-icon-left),
+.sf-input-group.sf-warning:not(.sf-float-icon-left),
+.sf-input-group.sf-error:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-success:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-error:not(.sf-float-icon-left) {
+ border: $input-group-full-border;
+ border-width: $input-group-full-border-width;
+ padding-top: 1px;
+}
+
+[class*="e-input-focus"] {
+ &.sf-input-group,
+ &.sf-input-group.sf-control-wrapper,
+ &.sf-float-input.sf-input-group,
+ &.sf-float-input.sf-control-wrapper.sf-input-group,
+ &.sf-float-input:not(.sf-input-group):not(.sf-disabled),
+ &.sf-float-input.sf-control-wrapper:not(.sf-input-group):not(.sf-disabled) {
+ &:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+ &:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+ &:not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error),
+ &:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error,
+ &:not(.sf-float-icon-left).sf-warning:not(.sf-success):not(.sf-error),
+ &:not(.sf-float-icon-left).sf-error:not(.sf-success):not(.sf-warning) {
+ border-style: $input-group-border-type-focus;
+ border-width: $zero-value $zero-value 1px;
+ }
+ }
+
+ &.sf-float-input.sf-control-wrapper:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled),
+ &.sf-float-input:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled) {
+ &:not(.sf-success):not(.sf-warning):not(.sf-error),
+ &.sf-success:not(.sf-warning):not(.sf-error),
+ &:not(.sf-success).sf-warning:not(.sf-error),
+ &:not(.sf-success):not(.sf-warning).sf-error {
+ input, textarea {
+ border-style: $input-group-border-type-focus;
+ border-width: $zero-value $zero-value 1px;
+ }
+ }
+ }
+
+ &.sf-input-group.sf-float-icon-left {
+ &:not(.sf-success):not(.sf-warning):not(.sf-error),
+ &.sf-success:not(.sf-warning):not(.sf-error),
+ &.sf-warning:not(.sf-success):not(.sf-error),
+ &.sf-error:not(.sf-success):not(.sf-warning) {
+ .sf-input-in-wrap {
+ border-style: $input-group-border-type-focus;
+ border-width: $zero-value $zero-value 1px;
+ }
+ }
+ }
+}
+
+textarea.sf-outline.sf-input,
+.sf-outline.sf-input-group textarea.sf-input,
+.sf-outline.sf-input-group textarea,
+.sf-outline.sf-input-group.sf-control-wrapper textarea.sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper textarea,
+.sf-outline.sf-float-input textarea.sf-input,
+.sf-outline.sf-float-input textarea,
+.sf-outline.sf-float-input.sf-control-wrapper textarea.sf-input,
+.sf-outline.sf-float-input.sf-control-wrapper textarea {
+ width: calc(100% - 1px);
+}
+
+.sf-outline.sf-float-input.sf-control-wrapper.sf-numeric label.sf-float-text.sf-label-bottom span.sf-float-text-content.sf-float-text-overflow {
+ width: calc(100% - 80px);
+}
+
+.sf-outline.sf-float-input.sf-control-wrapper.sf-numeric label.sf-float-text.sf-label-top span.sf-float-text-content.sf-float-text-overflow,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text.sf-label-top span.sf-float-text-content.sf-float-text-overflow,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text.sf-label-bottom span.sf-float-text-content.sf-float-text-overflow,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-static-clear label.sf-float-text.sf-label-top span.sf-float-text-content.sf-float-text-overflow,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-numeric.sf-static-clear label.sf-float-text.sf-label-top span.sf-float-text-content.sf-float-text-overflow {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+}
+
+.sf-outline.sf-float-input.sf-control-wrapper.sf-static-clear label.sf-float-text.sf-label-bottom span.sf-float-text-content.sf-float-text-overflow,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text.sf-label-bottom span.sf-float-text-content.sf-float-text-overflow.sf-icon {
+ width: calc(100% - 45px);
+}
+
+.sf-outline.sf-float-input.sf-control-wrapper.sf-static-clear label.sf-float-text.sf-label-bottom span.sf-float-text-content.sf-float-text-overflow.sf-icon {
+ width: calc(100% - 75px);
+}
+
+.sf-outline.sf-float-input.sf-control-wrapper.sf-numeric.sf-static-clear label.sf-float-text.sf-label-bottom span.sf-float-text-content.sf-float-text-overflow {
+ width: calc(100% - 110px);
+}
+
+.sf-outline.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::before,
+.sf-outline.sf-float-input.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::after,
+.sf-outline.sf-float-input.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::before,
+.sf-outline.sf-float-input.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group:not(.sf-float-icon-left).sf-input-focus .sf-float-line::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left.sf-input-focus .sf-input-in-wrap .sf-float-line::after {
+ width: 0%;
+}
+
+.sf-outline.sf-input-group.sf-control-wrapper,
+.sf-outline.sf-input-group,
+.sf-outline.sf-input-group:not(.sf-float-icon-left),
+.sf-outline.sf-float-input,
+.sf-outline.sf-float-input.sf-control-wrapper,
+.sf-outline.sf-input-group:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-success:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-warning:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-error:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-success:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-error:not(.sf-float-icon-left) {
+ border: 1px solid $outline-border-color;
+ border-radius: 4px;
+ border-width: 1px;
+ fill: transparent;
+ transition: border .2s, box-shadow .2s;
+}
+
+.sf-outline.sf-float-input,
+.sf-outline.sf-float-input.sf-control-wrapper {
+ margin-top: $zero-value;
+}
+
+.sf-outline.sf-float-input.sf-valid-input:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input:hover:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-control-wrapper:hover:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-control-wrapper:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-control-wrapper:hover:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-valid-input.sf-control-wrapper:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input:hover:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-valid-input:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-valid-input:hover:not(.sf-success):not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-success:hover:not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-success:hover:not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-success:hover:not(.sf-error):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-error:hover:not(.sf-success):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-error:hover:not(.sf-success):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-error:hover:not(.sf-success):not(.sf-warning):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-valid-input.sf-warning:hover:not(.sf-success):not(.sf-error):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-warning:hover:not(.sf-success):not(.sf-error):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-warning:hover:not(.sf-success):not(.sf-error):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-control-wrapper.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-valid-input.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-valid-input.sf-control-wrapper.sf-float-icon-left:not(.sf-input-focus):hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-float-icon-left:not(.sf-warning):not(.sf-success):not(.sf-error) {
+ border-top-color: transparent;
+}
+
+.sf-outline.sf-input-group,
+.sf-outline .sf-input-group,
+.sf-outline .sf-input-group.sf-control-wrapper,
+.sf-outline.sf-float-input,
+.sf-outline.sf-float-input.sf-control-wrapper {
+ font-size: $outline-input-font-size;
+}
+
+.sf-outline.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error),
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error,
+.sf-outline.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-warning:not(.sf-success):not(.sf-error),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left).sf-warning:not(.sf-success):not(.sf-error),
+.sf-outline.sf-input-group.sf-input-focus:not(.sf-float-icon-left).sf-error:not(.sf-success):not(.sf-warning),
+.sf-outline.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-input-group.sf-float-icon-left.sf-input-focus.sf-success:not(.sf-warning):not(.sf-error),
+.sf-outline.sf-input-group.sf-float-icon-left.sf-input-focus.sf-warning:not(.sf-success):not(.sf-error),
+.sf-outline.sf-input-group.sf-float-icon-left.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning) {
+ border-width: $outline-active-input-border;
+}
+
+input.sf-outline.sf-input,
+.sf-outline.sf-input-group input.sf-input,
+.sf-outline.sf-input-group input,
+.sf-outline.sf-input-group.sf-control-wrapper input.sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper input,
+.sf-outline.sf-float-input input.sf-input,
+.sf-outline.sf-float-input input,
+.sf-outline.sf-float-input.sf-control-wrapper input.sf-input,
+.sf-outline.sf-float-input.sf-control-wrapper input,
+.sf-outline.sf-input-group:not(.sf-float-icon-left) input.sf-input:focus,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left) input.sf-input:focus,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-float-icon-left) input:focus,
+.sf-outline.sf-float-input:not(.sf-float-icon-left) input:focus,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-float-icon-left).sf-input-focus input,
+.sf-outline.sf-float-input:not(.sf-float-icon-left).sf-input-focus input,
+.sf-outline.sf-input-group:not(.sf-float-icon-left).sf-input-focus input.sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left).sf-input-focus input.sf-input {
+ box-sizing: border-box;
+ padding: $outline-input-padding-top $outline-input-padding-left $outline-input-padding-bottom;
+}
+
+.sf-outline.sf-input-group input.sf-input,
+.sf-outline.sf-float-input.sf-input-group input,
+.sf-outline.sf-input-group.sf-control-wrapper input.sf-input,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper input,
+.sf-outline.sf-float-input input,
+.sf-outline.sf-float-input.sf-control-wrapper input {
+ box-sizing: border-box;
+ min-height: $outline-input-min-height;
+}
+
+.sf-outline.sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::before,
+.sf-outline.sf-input-group:not(.sf-float-icon-left):not(.sf-float-input)::after,
+.sf-outline.sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-outline.sf-input-group.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::before,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-icon-left):not(.sf-float-input)::after,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::before,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-float-input) .sf-input-in-wrap::after,
+.sf-outline.sf-float-input:not(.sf-input-group) .sf-float-line::before,
+.sf-outline.sf-float-input:not(.sf-input-group) .sf-float-line::after,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::before,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-group) .sf-float-line::after {
+ content: none;
+}
+
+.sf-outline.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-input-focus.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-focus.sf-control-wrapper:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-focus.sf-control-wrapper:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) {
+ border-color: $input-active-border-color;
+ box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
+}
+
+.sf-outline.sf-float-input.sf-float-icon-left .sf-input-in-wrap,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+.sf-outline.sf-input-group.sf-float-icon-left .sf-input-in-wrap,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap {
+ border: $input-group-border-width;
+ border-width: $input-group-border-width;
+ margin-left: $zero-value;
+}
+
+.sf-outline.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ margin-left: 4px;
+ margin-right: $zero-value;
+}
+
+.sf-outline.sf-input-group.sf-rtl.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-rtl.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-rtl.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-input-group.sf-rtl.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon {
+ margin-right: 4px;
+ margin-left: $zero-value;
+}
+
+.sf-outline.sf-float-input .sf-clear-icon,
+.sf-outline.sf-float-input.sf-control-wrapper .sf-clear-icon,
+.sf-outline.sf-input-group .sf-clear-icon,
+.sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ font-size: $outline-input-clear-icon-font-size;
+ padding: $zero-value;
+ height: 32px;
+ margin: 4px;
+}
+
+.sf-outline.sf-input-group.sf-float-icon-left .sf-input,
+.sf-outline.sf-float-input.sf-input-group.sf-float-icon-left .sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-float-icon-left .sf-input {
+ padding-left: $zero-value;
+}
+
+.sf-outline.sf-input-group .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ font-size: $outline-input-icon-font-size;
+ margin: 9px $outline-input-icon-margin-right 9px $zero-value;
+}
+
+.sf-outline.sf-input-group.sf-prepend .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-prepend.sf-control-wrapper .sf-input-group-icon {
+ font-size: $outline-input-icon-font-size;
+ margin: 9px $zero-value 9px $outline-input-icon-margin-right;
+}
+
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error) input,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error) input,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error input,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning):not(.sf-error) textarea,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled).sf-success:not(.sf-warning):not(.sf-error) textarea,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success).sf-warning:not(.sf-error) textarea,
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-disabled):not(.sf-success):not(.sf-warning).sf-error textarea,
+.sf-outline.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error) input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left).sf-success:not(.sf-warning):not(.sf-error) input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success).sf-warning:not(.sf-error) input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-input-group):not(.sf-float-icon-left):not(.sf-success):not(.sf-warning).sf-error input,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap {
+ border: $zero-value;
+}
+
+.sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-outline.sf-input-group.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child {
+ margin-left: $zero-value;
+}
+
+.sf-outline.sf-input-group.sf-small:not(.sf-float-input) .sf-input,
+.sf-small .sf-outline.sf-input-group:not(.sf-float-input) .sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small:not(.sf-float-input) .sf-input,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper:not(.sf-float-input) .sf-input,
+.sf-outline.sf-float-input.sf-small input,
+.sf-small .sf-outline.sf-float-input input,
+.sf-outline.sf-float-input.sf-input-group.sf-small input,
+.sf-small .sf-outline.sf-float-input.sf-input-group input,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-small input,
+.sf-small .sf-outline.sf-float-input.sf-input-group.sf-control-wrapper input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small input,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-small input,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-input-group input {
+ box-sizing: border-box;
+ min-height: $outline-small-input-min-height;
+}
+
+.sf-outline.sf-input-group,
+.sf-outline.sf-input-group.sf-control-wrapper,
+.sf-outline.sf-float-input,
+.sf-outline.sf-float-input.sf-control-wrapper {
+ font-size: $outline-valid-input-font-size;
+}
+
+.sf-outline.sf-input-group.sf-small,
+.sf-small .sf-outline.sf-input-group,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper,
+.sf-outline.sf-float-input.sf-small,
+.sf-small .sf-outline.sf-float-input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper {
+ font-size: $outline-small-input-font-size;
+}
+
+input.sf-input.sf-small.sf-outline,
+.sf-small input.sf-input.sf-outline,
+.sf-input-group.sf-small.sf-outline input.sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small input.sf-input,
+.sf-outline.sf-float-input.sf-small input,
+.sf-outline.sf-float-input.sf-control-wrapper input.sf-small,
+.sf-outline.sf-float-input.sf-small input,
+.sf-outline.sf-float-input.sf-control-wrapper input.sf-small,
+.sf-outline.sf-input-group input.sf-input.sf-small,
+.sf-outline.sf-input-group.sf-control-wrapper input.sf-input.sf-small,
+.sf-small .sf-outline.sf-float-input input,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper input,
+.sf-small .sf-outline.sf-input-group input.sf-input,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper input.sf-input,
+.sf-outline.sf-input-group.sf-small input.sf-input:focus,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small input.sf-input:focus,
+.sf-outline.sf-float-input.sf-small input:focus,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small input:focus,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper input.sf-input:focus,
+.sf-small .sf-outline.sf-input-group input.sf-input:focus,
+.sf-small .sf-outline.sf-float-input input:focus,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper input:focus,
+.sf-outline.sf-float-input.sf-small.sf-input-focus input,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-input-focus input,
+.sf-small .sf-outline.sf-float-input.sf-input-focus input,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus input,
+.sf-outline.sf-input-group.sf-small.sf-input-focus input.sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small.sf-input-focus input.sf-input,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus input.sf-input,
+.sf-small .sf-outline.sf-input-group.sf-input-focus input.sf-input {
+ padding: $outline-small-input-padding-top $outline-small-input-padding-left;
+}
+
+textarea.sf-input.sf-small.sf-outline,
+.sf-small textarea.sf-input.sf-outline,
+.sf-input-group.sf-small.sf-outline textarea.sf-input,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small textarea.sf-input,
+.sf-outline.sf-float-input.sf-control-wrapper textarea.sf-small,
+.sf-outline.sf-float-input.sf-small textarea,
+.sf-outline.sf-input-group textarea.sf-input.sf-small,
+.sf-outline.sf-input-group.sf-control-wrapper textarea.sf-input.sf-small,
+.sf-small .sf-outline.sf-float-input textarea,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea,
+.sf-small .sf-outline.sf-input-group textarea.sf-input,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper textarea.sf-input,
+.sf-outline.sf-input-group.sf-small textarea.sf-input:focus,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small textarea.sf-input:focus,
+.sf-outline.sf-float-input.sf-small textarea:focus,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea:focus,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper textarea.sf-input:focus,
+.sf-small .sf-outline.sf-input-group textarea.sf-input:focus,
+.sf-small .sf-outline.sf-float-input textarea:focus,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea:focus {
+ box-sizing: border-box;
+ margin: $outline-small-textarea-margin-top;
+ padding: $zero-value $outline-small-input-padding-left $outline-small-input-padding-left;
+}
+
+.sf-outline.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon.sf-small,
+.sf-small .sf-outline.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+.sf-small .sf-outline.sf-float-input.sf-input-group.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-small.sf-float-icon-left > .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left > .sf-input-group-icon.sf-small,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-float-icon-left > .sf-input-group-icon {
+ margin-left: $zero-value;
+ margin-right: $outline-small-input-icon-margin-right;
+}
+
+.sf-outline.sf-input-group.sf-small .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+.sf-small .sf-outline.sf-input-group .sf-input-group-icon,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ margin-left: $zero-value;
+ margin-right: $outline-small-input-icon-margin-left;
+}
+
+.sf-outline.sf-input-group.sf-prepend.sf-small .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-prepend.sf-control-wrapper.sf-small .sf-input-group-icon,
+.sf-small .sf-outline.sf-input-group.sf-prepend .sf-input-group-icon,
+.sf-small .sf-outline.sf-input-group.sf-prepend.sf-control-wrapper .sf-input-group-icon,
+.sf-rtl.sf-outline.sf-input-group.sf-small .sf-input-group-icon,
+.sf-rtl .sf-outline.sf-input-group.sf-small .sf-input-group-icon,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon,
+.sf-small .sf-rtl.sf-outline.sf-input-group .sf-input-group-icon,
+.sf-rtl.sf-small .sf-outline.sf-input-group .sf-input-group-icon,
+.sf-small .sf-rtl.sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon .sf-rtl.sf-small .sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon,
+.sf-rtl.sf-outline.sf-input-group.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl .sf-outline.sf-input-group.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child {
+ margin-left: $outline-small-input-icon-margin-left;
+ margin-right: $zero-value;
+}
+
+.sf-outline.sf-input-group.sf-small .sf-clear-icon,
+.sf-outline.sf-input-group .sf-clear-icon.sf-small,
+.sf-small .sf-outline.sf-input-group .sf-clear-icon,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon.sf-small,
+.sf-small .sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ font-size: $outline-small-clear-icon-font-size;
+}
+
+.sf-outline.sf-float-input.sf-input-group.sf-small .sf-input-group-icon,
+.sf-small .sf-outline.sf-float-input.sf-input-group .sf-input-group-icon,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-input-group-icon,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-input-group .sf-input-group-icon {
+ margin-top: $outline-bigger-small-group-icon-top;
+}
+
+.sf-outline.sf-float-input input,
+.sf-outline.sf-float-input textarea,
+.sf-outline.sf-float-input.sf-control-wrapper input,
+.sf-outline.sf-float-input.sf-control-wrapper textarea {
+ border: $outline-input-border;
+ border-width: $outline-input-group-border-width;
+}
+
+.sf-outline label.sf-float-text,
+.sf-outline.sf-float-input label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom {
+ box-sizing: border-box;
+ display: flex;
+ left: $zero-value;
+ line-height: $outline-label-default-line-height;
+ position: absolute;
+ top: $outline-float-label-top;
+ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
+ transition: color .2s, font-size .2s, line-height .2s;
+}
+
+.sf-outline.sf-float-input.sf-small:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline:not(.sf-valid-input):not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):not(:valid) ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text {
+ line-height: $outline-small-label-line-height;
+}
+
+.sf-outline.sf-float-input.sf-small:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline:not(.sf-valid-input):not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):not(:valid) ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small:not(.sf-error):not(.sf-valid-input) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-error):not(.sf-valid-input) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error):not(.sf-valid-input) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-valid-input) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline:not(.sf-valid-input):not(.sf-valid-input) textarea:not(:focus):not(:valid) ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input:not(.sf-valid-input) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text {
+ line-height: $outline-textarea-small-label-line-height;
+}
+
+.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) input:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) input:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline:not(.sf-valid-input):not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):not(:valid) ~ label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) input:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text {
+ line-height: $outline-label-line-height;
+}
+
+.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline:not(.sf-valid-input):not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):not(:valid) ~ label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input):not(.sf-input-focus) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-error):not(.sf-valid-input) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error):not(.sf-valid-input) textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline:not(.sf-valid-input):not(.sf-valid-input) textarea:not(:focus):not(:valid) ~ label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-valid-input) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-valid-input) textarea:not(:focus):not(:valid):not(.sf-valid-input) ~ label.sf-float-text {
+ line-height: $outline-textarea-label-line-height;
+}
+
+.sf-outline label.sf-float-text::before,
+.sf-outline label.sf-float-text::after,
+.sf-outline.sf-float-input label.sf-float-text::before,
+.sf-outline.sf-float-input label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::after {
+ border-top: solid $outline-wrapper-border-infocused;
+ border-top-color: transparent;
+ box-shadow: inset $zero-value 1px transparent;
+ box-sizing: border-box;
+ content: ' ';
+ display: block;
+ height: $outline-label-height;
+ margin-top: $outline-label-before-element-margin-top;
+ min-width: $outline-label-min-width;
+ pointer-events: none;
+ position: relative;
+ transition: border-color .1s, box-shadow .2s;
+}
+
+.sf-outline.sf-float-icon-left label.sf-float-text::before,
+.sf-outline.sf-float-icon-left label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-float-icon-left label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-float-icon-left label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-float-icon-left label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-float-icon-left label.sf-float-text::after {
+ transition: none;
+}
+
+.sf-small.sf-outline label.sf-float-text::before,
+.sf-small.sf-outline label.sf-float-text::after,
+.sf-small.sf-outline.sf-float-input label.sf-float-text::before,
+.sf-small.sf-outline.sf-float-input label.sf-float-text::after,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::before,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::after,
+.sf-small .sf-outline label.sf-float-text::before,
+.sf-small .sf-outline label.sf-float-text::after,
+.sf-small .sf-outline.sf-float-input label.sf-float-text::before,
+.sf-small .sf-outline.sf-float-input label.sf-float-text::after,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::before,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::after {
+ min-width: $outline-small-label-min-width;
+}
+
+.sf-outline.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after {
+ border-top-color: $outline-border-color;
+ border-width: 1px;
+}
+
+.sf-outline.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-success:not(.sf-error):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::after {
+ border-top-color: $input-success-color;
+}
+
+.sf-outline.sf-success.sf-input-focus:not(.sf-error):not(.sf-warning) label.sf-float-text::before,
+.sf-outline.sf-success.sf-input-focus:not(.sf-error):not(.sf-warning) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-success.sf-input-focus:not(.sf-error):not(.sf-warning) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-success.sf-input-focus:not(.sf-error):not(.sf-warning) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus:not(.sf-error):not(.sf-warning) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus:not(.sf-error):not(.sf-warning) label.sf-float-text::after {
+ border-color: $input-success-color;
+}
+
+.sf-outline.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-error:not(.sf-success):not(.sf-warning):not(.sf-input-focus) label.sf-float-text::after {
+ border-top-color: $input-error-color;
+}
+
+.sf-outline.sf-error.sf-input-focus:not(.sf-success):not(.sf-warning) label.sf-float-text::before,
+.sf-outline.sf-error.sf-input-focus:not(.sf-success):not(.sf-warning) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-error.sf-input-focus:not(.sf-success):not(.sf-warning) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-error.sf-input-focus:not(.sf-success):not(.sf-warning) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus:not(.sf-success):not(.sf-warning) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus:not(.sf-success):not(.sf-warning) label.sf-float-text::after {
+ border-color: $input-error-color;
+}
+
+.sf-outline.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-warning:not(.sf-success):not(.sf-error):not(.sf-input-focus) label.sf-float-text::after {
+ border-top-color: $input-warning-color;
+}
+
+.sf-outline.sf-warning.sf-input-focus:not(.sf-success):not(.sf-error) label.sf-float-text::before,
+.sf-outline.sf-warning.sf-input-focus:not(.sf-success):not(.sf-error) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-warning.sf-input-focus:not(.sf-success):not(.sf-error) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-warning.sf-input-focus:not(.sf-success):not(.sf-error) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus:not(.sf-success):not(.sf-error) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus:not(.sf-success):not(.sf-error) label.sf-float-text::after {
+ border-color: $input-warning-color;
+}
+
+.sf-outline label.sf-float-text::before,
+.sf-outline.sf-float-input label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::before {
+ border-left: solid 1px transparent;
+ border-radius: $outline-label-margin $zero-value;
+ left: $outline-label-before-left;
+ margin-right: $outline-label-margin;
+}
+
+.sf-rtl.sf-outline label.sf-float-text::before,
+.sf-rtl.sf-outline.sf-float-input label.sf-float-text::before,
+.sf-rtl.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::before {
+ border-left: $zero-value;
+ border-radius: $zero-value $outline-label-margin;
+ left: $outline-label-before-left-rtl;
+}
+
+.sf-rtl.sf-outline label.sf-float-text::after,
+.sf-rtl.sf-outline.sf-float-input label.sf-float-text::after,
+.sf-rtl.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::after {
+ border-radius: $outline-label-border-radius $zero-value;
+ border-right: $zero-value;
+ left: $outline-label-after-left-rtl;
+}
+
+.sf-outline label.sf-float-text::after,
+.sf-outline.sf-float-input label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text::after {
+ border-radius: $zero-value $outline-label-border-radius;
+ border-right: solid 1px transparent;
+ flex-grow: 1;
+ left: $outline-label-after-left;
+ margin-left: $outline-label-margin;
+}
+
+.sf-outline.sf-input-focus label.sf-float-text::before,
+.sf-outline.sf-input-focus label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-input-focus label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-input-focus label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus label.sf-float-text::after {
+ border-top-color: $input-active-border-color;
+}
+
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-focus:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-focus:hover:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:hover:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-input-focus:hover:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus:hover:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-error):not(.sf-success):not(.sf-warning):not(.sf-disabled):not(.sf-float-icon-left) {
+ border-top-color: transparent;
+ box-shadow: inset 1px $zero-value $input-active-border-color, inset -1px $zero-value $input-active-border-color, inset $zero-value -1px $input-active-border-color;
+}
+
+.sf-outline.sf-float-input input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input input:valid ~ label.sf-float-text,
+.sf-outline.sf-float-input input ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input input label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input:valid ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input textarea:valid ~ label.sf-float-text,
+.sf-outline.sf-float-input textarea ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input textarea label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea:valid ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea[readonly] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus input ~ label.sf-float-text {
+ font-size: $outline-floating-label-font-size;
+ top: $outline-float-label-top;
+ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
+}
+
+.sf-outline.sf-float-input.sf-rtl .sf-clear-icon,
+.sf-rtl .sf-outline.sf-float-input .sf-clear-icon,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-rtl .sf-clear-icon,
+e-rtl .sf-outline.sf-float-input.sf-control-wrapper .sf-clear-icon,
+.sf-outline.sf-input-group.sf-rtl .sf-clear-icon,
+.sf-rtl .sf-outline.sf-input-group .sf-clear-icon,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-rtl .sf-clear-icon,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper.sf-rtl .sf-clear-icon {
+ padding-left: $outline-input-icon-margin-right;
+ padding-right: $outline-input-icon-margin-left;
+}
+
+.sf-rtl .sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl .sf-outline.sf-input-group.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-outline.sf-float-input.sf-rtl.sf-float-icon-left .sf-input-in-wrap,
+.sf-outline.sf-float-input.sf-rtl.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap,
+.sf-outline.sf-input-group.sf-rtl.sf-float-icon-left .sf-input-in-wrap,
+.sf-outline.sf-input-group.sf-rtl.sf-control-wrapper.sf-float-icon-left .sf-input-in-wrap {
+ margin-right: $zero-value;
+}
+
+.sf-rtl .sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child {
+ margin-left: $outline-input-icon-margin-right;
+}
+
+.sf-rtl.sf-outline.sf-input-group .sf-input-group-icon,
+.sf-rtl .sf-outline.sf-input-group .sf-input-group-icon,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon .sf-rtl .sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon {
+ margin-left: $outline-input-icon-margin-right;
+ margin-right: $outline-input-icon-margin-left;
+}
+
+.sf-rtl.sf-outline.sf-input-group.sf-small .sf-clear-icon,
+.sf-rtl .sf-outline.sf-input-group.sf-small .sf-clear-icon,
+.sf-rtl.sf-outline.sf-input-group .sf-clear-icon.sf-small,
+.sf-rtl .sf-outline.sf-input-group .sf-clear-icon.sf-small,
+.sf-rtl.sf-small .sf-outline.sf-input-group .sf-clear-icon,
+.sf-small .sf-rtl.sf-outline.sf-input-group .sf-clear-icon,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon.sf-small,
+.sf-small .sf-rtl.sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon .sf-rtl.sf-small .sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ padding-left: $outline-small-input-icon-margin-left;
+ padding-right: $zero-value;
+
+}
+
+.sf-rtl .sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl .sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon + .sf-input-group-icon:last-child,
+.sf-rtl.sf-outline.sf-input-group.sf-control-wrapper .sf-input-group-icon + .sf-input-group-icon:last-child {
+ margin-left: $outline-input-icon-margin-right;
+ margin-right: $zero-value;
+}
+
+.sf-outline textarea,
+textarea.sf-outline,
+.sf-outline.sf-float-input textarea,
+.sf-outline.sf-float-input.sf-control-wrapper textarea,
+.sf-outline.sf-float-input.sf-input-group textarea {
+ box-sizing: border-box;
+}
+
+.sf-outline.sf-float-input.sf-valid-input:not(.sf-input-focus) input:valid ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input:not(.sf-input-focus) input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-valid-input:not(.sf-input-focus) textarea:valid ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input:not(.sf-input-focus) textarea:focus ~ label.sf-float-text {
+ color: $outline-label-font-color-with-value;
+}
+
+.sf-rtl.sf-outline.sf-float-input.sf-small textarea ~ label.sf-float-text,
+.sf-rtl.sf-outline.sf-float-input textarea ~ label.sf-float-text.sf-small,
+.sf-rtl.sf-outline.sf-float-input textarea.sf-small ~ label.sf-float-text,
+.sf-small .sf-rtl.sf-outline.sf-float-input textarea ~ label.sf-float-text,
+.sf-rtl.sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-float-text,
+.sf-rtl.sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text.sf-small,
+.sf-rtl.sf-outline.sf-float-input.sf-control-wrapper textarea.sf-small ~ label.sf-float-text,
+.sf-small .sf-rtl.sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text {
+ top: $outline-float-label-top;
+}
+
+.sf-outline.sf-float-input.sf-small .sf-clear-icon::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small .sf-clear-icon::before,
+.sf-outline.sf-input-group.sf-small .sf-clear-icon::before,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon::before,
+.sf-outline.sf-float-input.sf-control-wrapper input.sf-small:first-child ~ .sf-clear-icon::before,
+.sf-outline.sf-small .sf-float-input.sf-control-wrapper .sf-clear-icon::before,
+.sf-outline.sf-float-input input.sf-small:first-child ~ .sf-clear-icon::before,
+.sf-outline.sf-small .sf-float-input .sf-clear-icon::before,
+.sf-outline.sf-small .sf-input-group .sf-clear-icon::before,
+.sf-outline.sf-small .sf-input-group.sf-control-wrapper .sf-clear-icon::before {
+ font-size: $outline-input-small-clear-icon;
+}
+
+.sf-outline.sf-float-input .sf-clear-icon::before,
+.sf-outline.sf-float-input.sf-control-wrapper .sf-clear-icon::before,
+.sf-outline.sf-input-group .sf-clear-icon::before,
+.sf-outline.sf-input-group.sf-control-wrapper .sf-clear-icon::before {
+ font-size: $outline-input-clear-icon;
+}
+
+.sf-outline.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline label.sf-float-text,
+.sf-outline.sf-float-input label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ font-size: $outline-float-label-font-size;
+}
+
+.sf-outline.sf-float-input.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input textarea:-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill textarea:-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-small label.sf-float-text,
+.sf-outline.sf-float-input.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper:not(.sf-input-focus) input:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea:not(:focus):valid ~ label.sf-float-text.sf-label-bottom,
+.sf-outline.sf-float-input.sf-small textarea ~ label.sf-float-text,
+.sf-outline.sf-float-input textarea ~ label.sf-float-text.sf-small,
+.sf-outline.sf-float-input textarea.sf-small ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input textarea ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small textarea ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text.sf-small,
+.sf-outline.sf-float-input.sf-control-wrapper textarea.sf-small ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper textarea ~ label.sf-float-text {
+ font-size: $small-outline-float-label-font-size;
+}
+
+.sf-outline.sf-float-input input:-webkit-autofill ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill input:-webkit-autofill ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
+}
+
+.sf-small .sf-outline.sf-float-input input:-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input input:-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-autofill input:-webkit-autofill ~ label.sf-float-text,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill input:-webkit-autofill ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom,
+.sf-small.sf-outline.sf-float-input.sf-control-wrapper.sf-autofill:not(.sf-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.sf-float-text.sf-label-bottom {
+ animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
+}
+
+.sf-filled.sf-input-group.sf-float-input.sf-small .sf-clear-icon,
+.sf-filled.sf-input-group.sf-float-input .sf-clear-icon.sf-small,
+.sf-small .sf-filled.sf-input-group.sf-float-input .sf-clear-icon,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-input.sf-small .sf-clear-icon,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon.sf-small,
+.sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon,
+.sf-filled.sf-input-group.sf-float-input.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-filled.sf-input-group.sf-float-input.sf-control-wrapper .sf-clear-icon.sf-small,
+.sf-small .sf-filled.sf-input-group.sf-float-input.sf-control-wrapper .sf-clear-icon,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-input.sf-small .sf-clear-icon,
+.sf-filled.sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon.sf-small,
+.sf-small .sf-filled.sf-input-group.sf-control-wrapper.sf-float-input .sf-clear-icon {
+ padding: $zero-value $zero-value $zero-value 4px;
+}
+
+.sf-rtl.sf-filled.sf-input-group .sf-clear-icon,
+.sf-rtl.sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon,
+.sf-rtl.sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-small .sf-rtl.sf-filled.sf-input-group .sf-clear-icon,
+.sf-small .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon,
+.sf-rtl .sf-filled.sf-input-group .sf-clear-icon,
+.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon,
+.sf-rtl .sf-filled.sf-input-group.sf-small .sf-clear-icon,
+.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-small.sf-rtl .sf-filled.sf-input-group .sf-clear-icon,
+.sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon,
+.sf-rtl.sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+.sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-clear-icon,
+.sf-rtl.sf-filled.sf-float-input.sf-input-group.sf-small .sf-clear-icon,
+.sf-small .sf-rtl.sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+.sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-clear-icon,
+.sf-small .sf-rtl.sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-clear-icon,
+.sf-rtl .sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-clear-icon,
+.sf-rtl .sf-filled.sf-float-input.sf-input-group.sf-small .sf-clear-icon,
+.sf-small.sf-rtl .sf-filled.sf-float-input.sf-input-group .sf-clear-icon,
+.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group.sf-small .sf-clear-icon,
+.sf-small.sf-rtl .sf-filled.sf-float-input.sf-control-wrapper.sf-input-group .sf-clear-icon {
+ padding: $zero-value 8px $zero-value $zero-value;
+}
+
+.sf-rtl.sf-filled.sf-input-group.sf-small .sf-clear-icon,
+.sf-rtl.sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-small .sf-rtl.sf-filled.sf-input-group .sf-clear-icon,
+.sf-small .sf-rtl.sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon,
+.sf-rtl .sf-filled.sf-input-group.sf-small .sf-clear-icon,
+.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper.sf-small .sf-clear-icon,
+.sf-small.sf-rtl .sf-filled.sf-input-group .sf-clear-icon,
+.sf-small.sf-rtl .sf-filled.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ padding: $zero-value 4px $zero-value $zero-value;
+}
+
+.sf-filled.sf-float-input.sf-control-container.sf-append:not(.sf-prepend) {
+ padding: 0;
+
+ input {
+ padding: 14px 2px 5px 12px;
+ }
+
+ label.sf-float-text {
+ padding-left: 12px;
+ }
+
+ .sf-input-in-wrap .sf-input-group-icon {
+ @if $input-skin-name == 'material' {
+ padding-right: 17px;
+ }
+ @else {
+ margin-right: 10px;
+ }
+ }
+}
+
+.sf-input-group.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-float-input.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-float-input.sf-control-wrapper.sf-input-focus:not(.sf-float-icon-left):not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-input-group.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) .sf-input-in-wrap,
+.sf-input-group.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-input-group.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-float-input.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled):not(.sf-float-icon-left),
+.sf-input-group.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-input-group.sf-control-wrapper.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-input-focus.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) .sf-input-in-wrap:hover,
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) input:not([disabled]),
+.sf-float-input.sf-control-wrapper.sf-input-focus:hover:not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) textarea:not([disabled]) {
+ border-color: $input-group-border-color-hover;
+}
+
+.sf-outline.sf-input-group,
+.sf-outline.sf-input-group.sf-control-wrapper,
+.sf-outline.sf-float-input,
+.sf-outline.sf-float-input.sf-input-group,
+.sf-outline.sf-float-input.sf-control-wrapper,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper {
+ color: $outline-input-font-color;
+}
+
+.sf-outline.sf-input-group.sf-disabled,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-disabled,
+.sf-outline.sf-float-input.sf-disabled,
+.sf-outline.sf-float-input.sf-input-group.sf-disabled,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled {
+ color: $outline-disabled-input-font-color;
+}
+
+.sf-outline.sf-input-group:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-input-group.sf-control-wrapper:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-control-wrapper:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-input-group.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-float-icon-left:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-float-icon-left:not(.sf-input-focus):hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled),
+.sf-outline.sf-float-input:hover:not(.sf-input-focus):not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) {
+ border-color: $outline-hover-border-color;
+ color: $outline-hover-font-color;
+}
+
+.sf-outline.sf-input-group.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-input-group.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-input-group.sf-float-icon-left.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-input-group.sf-float-icon-left.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left.sf-valid-input:hover:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-float-icon-left:hover.sf-valid-input:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-float-icon-left:hover.sf-valid-input:not(.sf-input-focus):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-valid-input:not(.sf-input-focus):hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-float-icon-left.sf-valid-input:not(.sf-input-focus):hover:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after,
+.sf-outline.sf-float-input:hover.sf-valid-input:not(.sf-input-focus):not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::before,
+.sf-outline.sf-float-input:hover.sf-valid-input:not(.sf-input-focus):not(.sf-input-group):not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-disabled) label.sf-float-text::after {
+ border-color: $outline-hover-border-color;
+}
+
+.sf-outline.sf-input-group.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus:not(.sf-success):not(.sf-warning):not(.sf-error) {
+ border-color: $input-active-border-color;
+ box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
+}
+
+.sf-outline.sf-input-group:not(.sf-input-focus),
+.sf-outline.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-float-icon-left:not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-input-focus) {
+ border-color: $outline-border-color;
+}
+
+.sf-outline.sf-input-group.sf-error,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-error,
+.sf-outline.sf-input-group.sf-error:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-error:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-error,
+.sf-outline.sf-float-input.sf-input-group.sf-error,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-error {
+ border-color: $input-error-color;
+}
+
+.sf-outline.sf-float-input.sf-success.sf-input-focus,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-success.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-success.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-success.sf-input-focus:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-success.sf-input-focus:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-warning.sf-input-focus,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-warning.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-warning.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-warning.sf-input-focus:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-warning.sf-input-focus:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-error.sf-input-focus,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-error.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-error.sf-input-focus,
+.sf-outline.sf-float-input.sf-input-group.sf-error.sf-input-focus:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-error.sf-input-focus:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-input-group.sf-disabled.sf-valid-input:not(.sf-input-focus),
+.sf-outline.sf-float-input.sf-input-group.sf-disabled.sf-valid-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled.sf-valid-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus) {
+ border-top-color: transparent;
+}
+
+.sf-outline.sf-input-group.sf-success,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-success,
+.sf-outline.sf-input-group.sf-success:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-success:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-success,
+.sf-outline.sf-float-input.sf-input-group.sf-success,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-success {
+ border-color: $input-success-color;
+}
+
+.sf-outline.sf-input-group.sf-warning,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-warning,
+.sf-outline.sf-input-group.sf-warning:not(.sf-float-icon-left),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-warning:not(.sf-float-icon-left),
+.sf-outline.sf-float-input.sf-warning,
+.sf-outline.sf-float-input.sf-input-group.sf-warning,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-warning {
+ border-color: $input-warning-color;
+}
+
+.sf-outline.sf-input-group.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning) {
+ box-shadow: inset 1px 1px $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
+}
+
+.sf-outline.sf-input-group.sf-input-focus.sf-success:not(.sf-error):not(.sf-warning),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus.sf-success:not(.sf-error):not(.sf-warning) {
+ box-shadow: inset 1px 1px $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
+}
+
+.sf-outline.sf-input-group.sf-input-focus.sf-warning:not(.sf-error):not(.sf-success),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-input-focus.sf-warning:not(.sf-error):not(.sf-success) {
+ box-shadow: inset 1px 1px $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
+}
+
+.sf-outline.sf-float-input.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-input-focus.sf-error:not(.sf-success):not(.sf-warning) {
+ box-shadow: inset 1px $zero-value $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
+}
+
+.sf-outline.sf-float-input.sf-input-focus.sf-success:not(.sf-error):not(.sf-warning),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus.sf-success:not(.sf-error):not(.sf-warning),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus.sf-success:not(.sf-error):not(.sf-warning),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-input-focus.sf-success:not(.sf-error):not(.sf-warning) {
+ box-shadow: inset 1px $zero-value $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
+}
+
+.sf-outline.sf-float-input.sf-input-focus.sf-warning:not(.sf-error):not(.sf-success),
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-focus.sf-warning:not(.sf-error):not(.sf-success),
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus.sf-warning:not(.sf-error):not(.sf-success),
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-input-focus.sf-warning:not(.sf-error):not(.sf-success) {
+ box-shadow: inset 1px $zero-value $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
+}
+
+.sf-outline.sf-input-group.sf-disabled:not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-disabled:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-control-wrapper.sf-disabled:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-disabled.sf-float-icon-left:not(.sf-input-focus),
+.sf-outline.sf-input-group.sf-disabled.sf-control-wrapper.sf-float-icon-left:not(.sf-input-focus),
+.sf-outline.sf-float-input.sf-input-group.sf-disabled.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-input-group.sf-disabled.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-input-group.sf-disabled.sf-valid-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-input-group.sf-disabled.sf-valid-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled.sf-valid-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-float-input.sf-input-group.sf-control-wrapper.sf-disabled.sf-valid-input:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left):not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-disabled.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-disabled.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-disabled.sf-float-input.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-disabled.sf-float-input.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after,
+.sf-outline.sf-disabled.sf-float-input.sf-control-wrapper.sf-valid-input:not(.sf-input-focus) label.sf-float-text::before,
+.sf-outline.sf-disabled.sf-float-input.sf-control-wrapper.sf-valid-input:not(.sf-input-focus) label.sf-float-text::after {
+ border-color: $outline-disabled-border-color;
+}
+
+.sf-outline.sf-float-input.sf-success.sf-input-focus input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-input-group.sf-success.sf-valid-input label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-small.sf-success.sf-input-focus input:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-success input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-success textarea:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-success textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-success input:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-success input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-success textarea:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-success textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-success label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-input-group.sf-success label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-valid-input.sf-success:not(.sf-input-focus) input:valid ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-success:not(.sf-input-focus) input:focus ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-valid-input.sf-success:not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-success:not(.sf-input-focus) textarea:focus ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-success.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-success.sf-input-focus input ~ label.sf-float-text {
+ color: $input-success-color;
+}
+
+.sf-outline.sf-float-input.sf-error.sf-input-focus input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-input-group.sf-error.sf-valid-input label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-error.sf-input-focus input:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-error input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-error textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-error textarea:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-error textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-error input:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-error input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-error textarea:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-error textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-error label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-input-group.sf-error label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-valid-input.sf-error:not(.sf-input-focus) input:valid ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-error:not(.sf-input-focus) input:focus ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-valid-input.sf-error:not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-error:not(.sf-input-focus) textarea:focus ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-error.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-error.sf-input-focus input ~ label.sf-float-text {
+ color: $input-error-color;
+}
+
+.sf-outline.sf-float-input.sf-warning.sf-input-focus input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-input-group.sf-warning.sf-valid-input label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-warning.sf-input-focus input:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-warning input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-warning input:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-warning input:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-warning textarea:focus ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-warning label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-input-group.sf-warning label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-valid-input.sf-warning:not(.sf-input-focus) input:valid ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-warning:not(.sf-input-focus) input:focus ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-valid-input.sf-warning:not(.sf-input-focus) textarea:valid ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-valid-input.sf-warning:not(.sf-input-focus) textarea:focus ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small.sf-warning.sf-input-focus input ~ label.sf-float-text,
+.sf-small .sf-outline.sf-float-input.sf-control-wrapper.sf-warning.sf-input-focus input ~ label.sf-float-text {
+ color: $input-warning-color;
+}
+
+.sf-outline.sf-float-input.sf-input-group.sf-valid-input.sf-input-focus label.sf-label-top,
+.sf-outline.sf-float-input.sf-input-group.sf-input-focus label.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-valid-input.sf-input-focus label.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-input-focus label.sf-label-top {
+ color: $input-active-border-color;
+}
+
+.sf-outline.sf-input[disabled],
+.sf-outline.sf-input-group .sf-input[disabled],
+.sf-outline.sf-input-group.sf-control-wrapper .sf-input[disabled],
+.sf-outline.sf-input-group.sf-disabled,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-disabled,
+.sf-outline.sf-float-input input[disabled],
+.sf-outline.sf-float-input.sf-control-wrapper input[disabled],
+.sf-outline.sf-float-input textarea[disabled],
+.sf-outline.sf-float-input.sf-control-wrapper textarea[disabled],
+.sf-outline.sf-float-input.sf-disabled,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled,
+.sf-outline.sf-input-group:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left).sf-disabled,
+.sf-outline.sf-input-group.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled .sf-input-in-wrap,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-float-icon-left).sf-disabled,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-float-icon-left:not(.sf-success):not(.sf-warning):not(.sf-error).sf-disabled .sf-input-in-wrap {
+ background-image: none;
+ border-bottom-color: $outline-disabled-border-color;
+ border-color: $outline-disabled-border-color;
+}
+
+.sf-outline.sf-float-input.sf-input-group.sf-disabled .sf-float-text,
+.sf-outline.sf-float-input.sf-input-group.sf-disabled .sf-float-text.sf-label-top,
+.sf-outline.sf-float-input input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-disabled label.sf-float-text,
+.sf-outline.sf-float-input.sf-disabled label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-disabled .sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-input-group.sf-disabled .sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) input[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) input[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled:not(.sf-error) textarea[disabled] ~ label.sf-label-top.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text,
+.sf-outline.sf-float-input.sf-control-wrapper.sf-disabled.sf-small:not(.sf-error) textarea[disabled] ~ label.sf-float-text.sf-label-top {
+ color: $outline-float-label-disbale-font-color;
+}
+
+.sf-outline.sf-input-group.sf-disabled .sf-input-group-icon,
+.sf-outline.sf-input-group.sf-control-wrapper.sf-disabled .sf-input-group-icon {
+ color: $outline-input-group-disabled-color;
+}
+
+.sf-outline.sf-float-input:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-outline.sf-input-group:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:hover {
+ color: $outline-input-clear-icon-hover-color;
+}
+
+.sf-outline.sf-float-input:not(.sf-disabled) .sf-clear-icon:active,
+.sf-outline.sf-float-input.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:active,
+.sf-outline.sf-input-group:not(.sf-disabled) .sf-clear-icon:active,
+.sf-outline.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:active {
+ color: $outline-input-clear-icon-active-color;
+}
+
+.sf-float-input .sf-clear-icon,
+.sf-float-input.sf-control-wrapper .sf-clear-icon,
+.sf-input-group .sf-clear-icon,
+.sf-input-group.sf-control-wrapper .sf-clear-icon {
+ align-content: center;
+ flex-wrap: wrap;
+}
+
+.sf-filled.sf-float-input.sf-disabled .sf-clear-icon,
+.sf-filled.sf-float-input.sf-control-wrapper.sf-disabled .sf-clear-icon,
+.sf-input-group.sf-filled.sf-disabled .sf-clear-icon,
+.sf-input-group.sf-filled.sf-control-wrapper.sf-disabled .sf-clear-icon {
+ path {
+ fill: $filled-input-disabled-font-color;
+ }
+}
\ No newline at end of file
diff --git a/components/inputs/styles/input/_responsive.scss b/components/inputs/styles/input/_responsive.scss
new file mode 100644
index 0000000..2d4700e
--- /dev/null
+++ b/components/inputs/styles/input/_responsive.scss
@@ -0,0 +1 @@
+/* stylelint-disable-line no-empty-source */
diff --git a/components/inputs/styles/input/material3-dark.scss b/components/inputs/styles/input/material3-dark.scss
new file mode 100644
index 0000000..bc1eba0
--- /dev/null
+++ b/components/inputs/styles/input/material3-dark.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/inputs/styles/input/material3.scss b/components/inputs/styles/input/material3.scss
new file mode 100644
index 0000000..3130aa3
--- /dev/null
+++ b/components/inputs/styles/input/material3.scss
@@ -0,0 +1,3 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/inputs/styles/material3-dark.scss b/components/inputs/styles/material3-dark.scss
new file mode 100644
index 0000000..acb900d
--- /dev/null
+++ b/components/inputs/styles/material3-dark.scss
@@ -0,0 +1,11 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import 'numerictextbox/material3-dark-definition.scss';
+@import 'numerictextbox/icons/material3-dark.scss';
+@import 'numerictextbox/all.scss';
+@import 'react-popups/styles/tooltip/material3-dark-definition.scss';
+@import 'textbox/material3-dark-definition.scss';
+@import 'textbox/all.scss';
+@import 'textarea/material3-dark-definition.scss';
+@import 'textarea/all.scss';
+@import 'react-buttons/styles/button/material3-dark-definition.scss';
+@import 'react-splitbuttons/styles/split-button/material3-dark-definition.scss';
diff --git a/components/inputs/styles/material3.scss b/components/inputs/styles/material3.scss
new file mode 100644
index 0000000..791129b
--- /dev/null
+++ b/components/inputs/styles/material3.scss
@@ -0,0 +1,12 @@
+@import 'react-base/styles/definition/material3.scss';
+@import 'numerictextbox/_material3-definition.scss';
+@import 'numerictextbox/_all.scss';
+@import 'react-popups/styles/tooltip/material3-definition.scss';
+@import 'textbox/_material3-definition.scss';
+@import 'textbox/_all.scss';
+@import 'textarea/_material3-definition.scss';
+@import 'textarea/_all.scss';
+@import 'react-buttons/styles/button/material3-definition.scss';
+@import 'react-splitbuttons/styles/split-button/material3-definition.scss';
+@import 'input/_material3-definition.scss';
+@import 'input/_all.scss';
diff --git a/components/inputs/styles/numerictextbox/_all.scss b/components/inputs/styles/numerictextbox/_all.scss
new file mode 100644
index 0000000..f4d67e8
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/_all.scss
@@ -0,0 +1 @@
+@import 'layout.scss';
diff --git a/components/inputs/styles/numerictextbox/_layout.scss b/components/inputs/styles/numerictextbox/_layout.scss
new file mode 100644
index 0000000..0f276f7
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/_layout.scss
@@ -0,0 +1,37 @@
+.sf-numeric-container {
+ width: 100%;
+}
+
+.sf-content-placeholder.sf-numeric.sf-placeholder-numeric {
+ background-size: 300px 33px;
+ min-height: 33px;
+}
+
+// Hidden element styles
+.sf-float-input.sf-input-group.sf-control-wrapper.sf-numeric .sf-numeric-hidden,
+.sf-input-group.sf-control-wrapper.sf-numeric .sf-numeric-hidden,
+.sf-float-input.sf-control-wrapper.sf-numeric .sf-numeric-hidden,
+.sf-float-input.sf-input-group.sf-control-wrapper.sf-numeric.sf-input-focus .sf-numeric-hidden,
+.sf-input-group.sf-control-wrapper.sf-numeric.sf-input-focus .sf-numeric-hidden,
+.sf-float-input.sf-control-wrapper.sf-numeric.sf-input-focus .sf-numeric-hidden {
+ border: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ text-indent: 0;
+ visibility: hidden;
+ width: 0;
+}
+
+.sf-numeric.sf-control-wrapper {
+ #{if(&, '&', '*')}.sf-input-group:not(.sf-disabled):active:not(.sf-success):not(.sf-warning):not(.sf-error):not(.sf-input-focus) {
+ @if $numeric-skin-name == 'bootstrap' {
+ border-color: $input-group-full-border-color;
+ box-shadow: none;
+ }
+ }
+
+ #{if(&, '&', '*')}.sf-input-group .sf-input-group-icon {
+ font-size: $numeric-input-icon-size;
+ }
+}
diff --git a/components/inputs/styles/numerictextbox/_material3-dark-definition.scss b/components/inputs/styles/numerictextbox/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/inputs/styles/numerictextbox/_material3-definition.scss b/components/inputs/styles/numerictextbox/_material3-definition.scss
new file mode 100644
index 0000000..223636c
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/_material3-definition.scss
@@ -0,0 +1,8 @@
+$numeric-skin-name: 'Material3' !default;
+$numeric-input-icon-size: 16px !default;
+$numeric-input-icon-padding: 8px !default;
+
+.sf-numeric .sf-input-group-icon.sf-spin-down path,
+.sf-numeric .sf-input-group-icon.sf-spin-up path {
+ fill: rgba($icon-color);
+}
\ No newline at end of file
diff --git a/components/inputs/styles/numerictextbox/icons/_material3-dark.scss b/components/inputs/styles/numerictextbox/icons/_material3-dark.scss
new file mode 100644
index 0000000..2bc48b5
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/icons/_material3-dark.scss
@@ -0,0 +1 @@
+@import './material3.scss';
diff --git a/components/inputs/styles/numerictextbox/material3-dark.scss b/components/inputs/styles/numerictextbox/material3-dark.scss
new file mode 100644
index 0000000..899379b
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/material3-dark.scss
@@ -0,0 +1,5 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import '../input/material3-dark-definition.scss';
+@import 'material3-dark-definition.scss';
+@import 'icons/material3-dark.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/inputs/styles/numerictextbox/material3.scss b/components/inputs/styles/numerictextbox/material3.scss
new file mode 100644
index 0000000..5b78198
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/material3.scss
@@ -0,0 +1,4 @@
+@import 'react-base/styles/definition/material3.scss';
+@import '../input/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/inputs/styles/textarea/_all.scss b/components/inputs/styles/textarea/_all.scss
new file mode 100644
index 0000000..f4d67e8
--- /dev/null
+++ b/components/inputs/styles/textarea/_all.scss
@@ -0,0 +1 @@
+@import 'layout.scss';
diff --git a/components/inputs/styles/textarea/_layout.scss b/components/inputs/styles/textarea/_layout.scss
new file mode 100644
index 0000000..cbd73f3
--- /dev/null
+++ b/components/inputs/styles/textarea/_layout.scss
@@ -0,0 +1,36 @@
+.sf-input-group.sf-multi-line-input.sf-auto-width {
+ width: auto;
+}
+
+.sf-input-group.sf-multi-line-input {
+ textarea.sf-resize-x {
+ resize: horizontal;
+ }
+
+ textarea.sf-resize-y {
+ resize: vertical;
+ }
+
+ textarea.sf-resize-xy {
+ resize: both;
+ }
+
+ textarea.sf-textarea.sf-resize-none {
+ resize: none;
+ }
+}
+
+.sf-float-input .sf-clear-icon:hover,
+.sf-float-input.sf-control-wrapper .sf-clear-icon:hover,
+.sf-input-group .sf-clear-icon:hover,
+.sf-input-group.sf-control-wrapper .sf-clear-icon:hover {
+ background: none;
+ border: none;
+}
+
+.sf-float-input:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-float-input.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-input-group:not(.sf-disabled) .sf-clear-icon:hover,
+.sf-input-group.sf-control-wrapper:not(.sf-disabled) .sf-clear-icon:hover {
+ background: none;
+}
diff --git a/components/inputs/styles/textarea/_material3-dark-definition.scss b/components/inputs/styles/textarea/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/inputs/styles/textarea/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/inputs/styles/textarea/_material3-definition.scss b/components/inputs/styles/textarea/_material3-definition.scss
new file mode 100644
index 0000000..2d4700e
--- /dev/null
+++ b/components/inputs/styles/textarea/_material3-definition.scss
@@ -0,0 +1 @@
+/* stylelint-disable-line no-empty-source */
diff --git a/components/inputs/styles/textarea/material3-dark.scss b/components/inputs/styles/textarea/material3-dark.scss
new file mode 100644
index 0000000..cd4263e
--- /dev/null
+++ b/components/inputs/styles/textarea/material3-dark.scss
@@ -0,0 +1,5 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import '../input/material3-dark-definition.scss';
+@import '../textbox/material3-dark-definition.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
diff --git a/components/inputs/styles/textarea/material3.scss b/components/inputs/styles/textarea/material3.scss
new file mode 100644
index 0000000..100639b
--- /dev/null
+++ b/components/inputs/styles/textarea/material3.scss
@@ -0,0 +1,5 @@
+@import 'react-base/styles/definition/material3.scss';
+@import '../input/material3-definition.scss';
+@import '../textbox/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
diff --git a/components/inputs/styles/textbox/_all.scss b/components/inputs/styles/textbox/_all.scss
new file mode 100644
index 0000000..f4d67e8
--- /dev/null
+++ b/components/inputs/styles/textbox/_all.scss
@@ -0,0 +1 @@
+@import 'layout.scss';
diff --git a/components/inputs/styles/textbox/_layout.scss b/components/inputs/styles/textbox/_layout.scss
new file mode 100644
index 0000000..ef7010c
--- /dev/null
+++ b/components/inputs/styles/textbox/_layout.scss
@@ -0,0 +1,12 @@
+.sf-content-placeholder.sf-textbox.sf-placeholder-textbox {
+ background-size: 300px 33px;
+ min-height: 33px;
+}
+
+.sf-input-group.sf-input-focus.sf-multi-line-input textarea.sf-textbox {
+ padding-right: 30px;
+}
+
+.sf-input-group.sf-input-focus.sf-rtl.sf-multi-line-input textarea.sf-textbox {
+ padding-left: 30px;
+}
diff --git a/components/inputs/styles/textbox/_material3-dark-definition.scss b/components/inputs/styles/textbox/_material3-dark-definition.scss
new file mode 100644
index 0000000..356e259
--- /dev/null
+++ b/components/inputs/styles/textbox/_material3-dark-definition.scss
@@ -0,0 +1 @@
+@import './material3-definition.scss';
diff --git a/components/inputs/styles/textbox/_material3-definition.scss b/components/inputs/styles/textbox/_material3-definition.scss
new file mode 100644
index 0000000..b363e4c
--- /dev/null
+++ b/components/inputs/styles/textbox/_material3-definition.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable-line no-empty-source */
+$multiline-clear-icon-right-position: 10px;
+$multiline-clear-icon-top-position: 10px;
+$multiline-clear-icon-left-position: 10px;
diff --git a/components/inputs/styles/textbox/material3-dark.scss b/components/inputs/styles/textbox/material3-dark.scss
new file mode 100644
index 0000000..ccf7adb
--- /dev/null
+++ b/components/inputs/styles/textbox/material3-dark.scss
@@ -0,0 +1,4 @@
+@import 'react-base/styles/definition/material3-dark.scss';
+@import '../input/material3-dark-definition.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/inputs/styles/textbox/material3.scss b/components/inputs/styles/textbox/material3.scss
new file mode 100644
index 0000000..5b78198
--- /dev/null
+++ b/components/inputs/styles/textbox/material3.scss
@@ -0,0 +1,4 @@
+@import 'react-base/styles/definition/material3.scss';
+@import '../input/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';
\ No newline at end of file
diff --git a/components/inputs/tsconfig.json b/components/inputs/tsconfig.json
new file mode 100644
index 0000000..3ab8c23
--- /dev/null
+++ b/components/inputs/tsconfig.json
@@ -0,0 +1,42 @@
+{
+ "compilerOptions": {
+ "allowUnreachableCode": false, // Disable unreachable code warnings.
+ "allowUnusedLabels": false, // Disable unused label warnings.
+ "declaration": true, // Generate .d.ts files.
+ "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing.
+ "jsx": "react-jsx", // Enable JSX syntax support.
+ "module": "ESNext", // Use ESNext module system.
+ "moduleResolution": "Node", // Resolve modules using Node-style resolution.
+ "noEmitOnError": true, // Prevent emitting JS files if there are errors.
+ "noFallthroughCasesInSwitch": true, // Prevent fallthrough in switch cases.
+ "noImplicitAny": true, // Disallow implicit any types.
+ "noImplicitReturns": true, // Ensure functions return a value.
+ "noUnusedLocals": true, // Warn on unused local variables.
+ "noUnusedParameters": true, // Warn on unused function parameters.
+ "strict": true, // Enable all strict checks.
+ "strictBindCallApply": true, // Enable strict checking of bind, call, and apply methods.
+ "strictFunctionTypes": true, // Enable strict checking of function types.
+ "strictNullChecks": true, // Enable strict null checks.
+ "skipLibCheck": true, // Skip checking of declaration files.
+ "sourceMap": true, // Generate source maps.
+ "target": "ES2020", // Set ECMAScript version to ES2020.
+ "types": [
+ "node",
+ "react",
+ "react-dom"
+ ], // Include type declarations.
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ] // Include libraries for ES2020 and DOM.
+ },
+ "exclude": [
+ "node_modules",
+ "dist",
+ "public",
+ "coverage",
+ "test-report"
+ ], // Exclude these directories from compilation.
+ "compileOnSave": false // Disable Compile-on-Save.
+}
diff --git a/components/notifications/CHANGELOG.md b/components/notifications/CHANGELOG.md
new file mode 100644
index 0000000..d0f3f90
--- /dev/null
+++ b/components/notifications/CHANGELOG.md
@@ -0,0 +1,53 @@
+# Changelog
+
+## [Unreleased]
+
+## 29.2.4 (2025-05-14)
+
+### Message
+
+The Message component has an option to display the messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user. The following key features are available in the Message component.
+
+Explore the demo here
+
+**Key features**
+
+- **Severity:** Provides an option to display the message with distinctive icons and colors based on the severity type. The available severity types such as Normal, Success, Info, Warning, and Error.
+
+- **Variants:** Provides an option to display the message with predefined appearance variants. The available variants such as Text, Outlined, and Filled.
+
+- **Visibility:** Provides an option to show or hide the message.
+
+- **Template:** Provides an option to customize the content of the message.
+
+### Skeleton
+
+The Skeleton component provides a visual placeholder that simulates the layout of content while it's being loaded, improving the perceived performance of your application. It offers various shapes and animation effects to match your UI design needs.
+
+Explore the demo here
+
+**Key features**
+
+- **Variants:** Choose from multiple placeholder shapes including Text, Circle, Square, and Rectangle to match the content being loaded.
+
+- **Animation:** Apply different loading animations such as Wave, Fade or Pulse to provide visual feedback during loading states.
+
+- **Customizable Dimensions:** Easily configure the width and height of skeleton elements using CSS units or pixel values.
+
+### Toast
+
+The Toast component provides a non-intrusive way to display temporary notifications to users. It offers a flexible system for showing messages that automatically dismiss after a configurable timeout period.
+
+Explore the demo here
+
+**Key features**
+
+- **Multiple Positions:** Position toasts at different locations on the screen (top-left, top-right, bottom-left, bottom-right, etc.) to suit your application's design.
+
+- **Severity:** Display toasts with different severity levels (Success, Info, Warning, Error) with appropriate icons and colors to convey message importance.
+
+- **Customizable Timeout:** Configure how long toasts remain visible before automatically dismissing.
+
+- **Animation Effects:** Apply entrance and exit animations to enhance the user experience.
+
+- **Global Toast Service:** Use the ToastUtility or useToast hook to display toasts from anywhere in your application without needing to include the component in your JSX.
\ No newline at end of file
diff --git a/components/notifications/README.md b/components/notifications/README.md
new file mode 100644
index 0000000..44e29e2
--- /dev/null
+++ b/components/notifications/README.md
@@ -0,0 +1,89 @@
+# React Notifications Components
+
+## What's Included in the React Notification Package
+
+The React Notification package includes the following list of components.
+
+### React Message
+
+The Message component has an option to display the messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user. The following key features are available in the Message component.
+
+Explore the demo [here](https://react.syncfusion.com/message)
+
+**Key features**
+
+- **Severity:** Provides an option to display the message with distinctive icons and colors based on the severity type. The available severity types such as Normal, Success, Info, Warning, and Error.
+
+- **Variants:** Provides an option to display the message with predefined appearance variants. The available variants such as Text, Outlined, and Filled.
+
+- **Visibility:** Provides an option to show or hide the message.
+
+- **Template:** Provides an option to customize the content of the message.
+
+### React Toast
+
+The Toast component provides a non-intrusive way to display temporary notifications to users. It offers a flexible system for showing messages that automatically dismiss after a configurable timeout period.
+
+Explore the demo [here](https://react.syncfusion.com/toast)
+
+**Key features**
+
+- **Multiple Positions:** Position toasts at different locations on the screen (top-left, top-right, bottom-left, bottom-right, etc.) to suit your application's design.
+
+- **Severity:** Display toasts with different severity levels (Success, Info, Warning, Error) with appropriate icons and colors to convey message importance.
+
+- **Customizable Timeout:** Configure how long toasts remain visible before automatically dismissing.
+
+- **Animation Effects:** Apply entrance and exit animations to enhance the user experience.
+
+- **Global Toast Service:** Use the ToastUtility or useToast hook to display toasts from anywhere in your application without needing to include the component in your JSX.
+
+### React Skeleton
+
+The Skeleton component provides a visual placeholder that simulates the layout of content while it's being loaded, improving the perceived performance of your application. It offers various shapes and animation effects to match your UI design needs.
+
+Explore the demo [here](https://react.syncfusion.com/skeleton)
+
+**Key features**
+
+- **Variants:** Choose from multiple placeholder shapes including Text, Circle, Square, and Rectangle to match the content being loaded.
+
+- **Animation:** Apply different loading animations such as Wave, Fade or Pulse to provide visual feedback during loading states.
+
+- **Customizable Dimensions:** Easily configure the width and height of skeleton elements using CSS units or pixel values.
+
+
+Trusted by the world's leading companies
+
+
+
+
+
+## Setup
+
+To install `notifications` and its dependent packages, use the following command,
+
+```sh
+npm install @syncfusion/react-notifications
+```
+
+## Support
+
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* Live chat
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/notifications/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
+
+© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
diff --git a/components/notifications/gulpfile.js b/components/notifications/gulpfile.js
new file mode 100644
index 0000000..b1bf280
--- /dev/null
+++ b/components/notifications/gulpfile.js
@@ -0,0 +1,52 @@
+var gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+
+/**
+ * Compile ts files
+ */
+gulp.task('scripts', function(done) {
+ var ts = require('gulp-typescript');
+ var tsProject = ts.createProject('./tsconfig.json', {
+ typescript: require('typescript'),
+ declaration: true
+ });
+ var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' })
+ .pipe(tsProject());
+ tsResult.js.pipe(gulp.dest('./'))
+ .on('end', function() {
+ tsResult.dts.pipe(gulp.dest('./'))
+ .on('end', function() {
+ done();
+ });
+ });
+});
+
+/**
+ * Compile styles
+ */
+let isCompiled = true;
+gulp.task('styles', function (done) {
+ var styles = './styles/**/*.scss';
+ return gulp.src(styles, { base: './' })
+ .pipe(sass({
+ outputStyle: 'expanded',
+ includePaths: "./node_modules/@syncfusion/"
+ }).on('error', function (error) {
+ isCompiled = false;
+ console.log(error);
+ this.emit('end');
+ }))
+ .pipe(gulp.dest('.'))
+ .on('end', function () {
+ if (!isCompiled) {
+ process.exit(1);
+ }
+ done();
+ });
+});
+
+/**
+ * Build ts and scss files
+ */
+gulp.task('build', gulp.series('scripts', 'styles'));
+
diff --git a/components/notifications/license b/components/notifications/license
new file mode 100644
index 0000000..af45e1a
--- /dev/null
+++ b/components/notifications/license
@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/components/notifications/package.json b/components/notifications/package.json
new file mode 100644
index 0000000..57bd2a1
--- /dev/null
+++ b/components/notifications/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "@syncfusion/react-notifications",
+ "version": "29.2.4",
+ "description": "A package of Pure React notification components such as Toast and Message which used to notify important information to end-users.",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "keywords": [
+ "syncfusion",
+ "web-components",
+ "react",
+ "syncfusion-react",
+ "react-notifications"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/react-ui-components.git"
+ },
+ "homepage": "https://www.syncfusion.com/react-ui-components",
+ "module": "./index.js",
+ "readme": "README.md",
+ "dependencies": {
+ "@syncfusion/react-base": "~29.2.4",
+ "@syncfusion/react-buttons": "~29.2.4"
+ },
+ "devDependencies": {
+ "gulp": "4.0.2",
+ "gulp-typescript": "5.0.1",
+ "typescript": "5.7.2",
+ "gulp-sass": "5.1.0",
+ "sass": "1.83.1",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
+ "@types/react": "19.0.1",
+ "@types/react-dom": "19.0.1",
+ "@types/node": "^22.15.17"
+ },
+ "scripts": {
+ "build": "gulp build"
+ },
+ "typings": "index.d.ts",
+ "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/notifications/src/index.ts b/components/notifications/src/index.ts
new file mode 100644
index 0000000..d2c8720
--- /dev/null
+++ b/components/notifications/src/index.ts
@@ -0,0 +1,7 @@
+
+/**
+ * Notification Components
+ */
+export * from './message/index';
+export * from './skeleton/index';
+export * from './toast/index';
diff --git a/components/notifications/src/message/index.ts b/components/notifications/src/message/index.ts
new file mode 100644
index 0000000..a9af4fa
--- /dev/null
+++ b/components/notifications/src/message/index.ts
@@ -0,0 +1,4 @@
+/**
+ * Message modules
+ */
+export * from './message';
diff --git a/components/notifications/src/message/message.tsx b/components/notifications/src/message/message.tsx
new file mode 100644
index 0000000..ffbc683
--- /dev/null
+++ b/components/notifications/src/message/message.tsx
@@ -0,0 +1,258 @@
+import * as React from 'react';
+import { useEffect, useRef, useState, forwardRef, HTMLAttributes, useImperativeHandle, useMemo, useCallback, Ref } from 'react';
+import { IL10n, L10n, preRender, useProviderContext, SvgIcon } from '@syncfusion/react-base';
+
+/**
+ * Specifies the type of severity to display the message with distinctive icons and colors.
+ */
+export enum Severity {
+ /**
+ * The message is displayed with icons and colors that indicate it is a normal message.
+ */
+ Normal = 'Normal',
+ /**
+ * The message is displayed with icons and colors that indicate it is a success message.
+ */
+ Success = 'Success',
+ /**
+ * The message is displayed with icons and colors that indicate it contains information.
+ */
+ Info = 'Info',
+ /**
+ * The message is displayed with icons and colors that indicate it is a warning message.
+ */
+ Warning = 'Warning',
+ /**
+ * The message is displayed with icons and colors that indicate it is an error message.
+ */
+ Error = 'Error'
+}
+
+/**
+ * Specifies the predefined appearance variants for the component to display.
+ */
+export enum Variant {
+ /**
+ * Denotes that severity is differentiated using text color and light background color.
+ */
+ Text = 'Text',
+ /**
+ * Denotes that severity is differentiated using text color and border without background.
+ */
+ Outlined = 'Outlined',
+ /**
+ * Denotes that severity is differentiated using text color and dark background color.
+ */
+ Filled = 'Filled'
+}
+
+export interface MessageProps {
+ /**
+ * Shows or hides the severity icon in the Message component. This icon will be distinctive based on the severity property.
+ *
+ * When set to `true` (default), displays a severity-specific icon at the left edge of the Message.
+ * When set to `false`, no icon is displayed.
+ * When a React node is provided, displays the custom element instead of the default severity icon.
+ *
+ * @default true
+ */
+ icon?: boolean | React.ReactNode;
+
+ /**
+ * Shows or hides the close icon in the Message component. An end user can click the close icon to hide the message, and the onClose event will be triggered.
+ *
+ * When set to `false` (default), the close icon is not rendered.
+ * When set to `true`, a default close icon (SVG) is displayed on the right side of the message.
+ * When a React node is provided, it will be rendered as a custom close icon, replacing the default one.
+ *
+ * @default false
+ */
+ closeIcon?: boolean | React.ReactNode;
+
+ /**
+ * Specifies the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Success, Info, Warning, and Error.
+ *
+ * @default Severity.Normal
+ */
+ severity?: Severity;
+
+ /**
+ * Specifies the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined, and Filled.
+ *
+ * @default Variant.Text
+ */
+ variant?: Variant;
+
+ /**
+ * Shows or hides the visibility of the Message component. When set to false, the Message component will be hidden.
+ *
+ * @default true
+ */
+ visible?: boolean;
+
+ /**
+ * Triggers when the Message component is closed successfully.
+ *
+ * @event closed
+ */
+ onClose?: (event: React.SyntheticEvent) => void;
+}
+export interface IMessage extends MessageProps {
+ /**
+ * This is message component element.
+ *
+ * @private
+ * @default null
+ */
+ element?: HTMLDivElement | null;
+}
+
+type MsgProps = IMessage & HTMLAttributes;
+
+/**
+ * The Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.
+ *
+ * ```typescript
+ * Editing is restricted
+ * ```
+ */
+export const Message: React.ForwardRefExoticComponent> =
+ forwardRef((props: MsgProps, ref: Ref) => {
+ const {
+ children,
+ icon = true,
+ closeIcon = false,
+ severity = Severity.Normal,
+ variant = Variant.Text,
+ visible,
+ onClose,
+ className = '',
+ ...eleAttr
+ } = props;
+ const [isVisible, setIsVisible] = useState(true);
+ const eleRef: React.RefObject = useRef(null);
+ const { locale, dir } = useProviderContext();
+ const msgCloseIcon: string = 'M10.5858 12.0001L2.58575 4.00003L3.99997 2.58582L12 10.5858L20 2.58582L21.4142 4.00003L13.4142 12.0001L21.4142 20L20 21.4142L12 13.4143L4.00003 21.4142L2.58581 20L10.5858 12.0001Z';
+ const infoIcon: string = 'M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM13 11V17H11V11H13ZM13 9V7H11V9H13Z';
+ const successIcon: string = 'M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM10.5 16.4142L17.9142 9L16.5 7.58578L10.5 13.5858L7.50003 10.5858L6.08582 12L10.5 16.4142Z';
+ const warningIcon: string = 'M10.2691 2.99378C11.0395 1.66321 12.9605 1.6632 13.7308 2.99378L22.9964 18.9979C23.7683 20.3312 22.8062 22 21.2655 22H2.73444C1.19378 22 0.231653 20.3313 1.00358 18.9979L10.2691 2.99378ZM21.2655 20L12 3.99585L2.73444 20L21.2655 20ZM13 14V9H11V14H13ZM13 16H11V18.5H13V16Z';
+ const errorIcon: string = 'M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM12 10.5858L8.50003 7.08582L7.08582 8.50003L10.5858 12L7.08582 15.5L8.50003 16.9142L12 13.4142L15.5 16.9142L16.9142 15.5L13.4142 12L16.9142 8.50003L15.5 7.08582L12 10.5858Z';
+ const [msgIcon, setMsgIcon] = useState(infoIcon);
+
+ const closeIconTitle: string = useMemo(() => {
+ const l10n: IL10n = L10n('message', { close: 'Close' }, locale);
+ l10n.setLocale(locale);
+ return l10n.getConstant('close');
+ }, [locale]);
+
+ const classArray: string[] = ['sf-control sf-message sf-lib', className];
+ const hasWrap: boolean = useMemo(() => classArray.join(' ').split(' ').includes('sf-content-center'), [className]);
+
+ const classes: string = useMemo(() => {
+ if (dir === 'rtl') { classArray.push('sf-rtl'); }
+ if ((visible === undefined && !isVisible) || (visible !== undefined && !visible)) { classArray.push('sf-hidden'); }
+
+ switch (severity) {
+ case Severity.Success: classArray.push('sf-success'); setMsgIcon(successIcon); break;
+ case Severity.Warning: classArray.push('sf-warning'); setMsgIcon(warningIcon); break;
+ case Severity.Error: classArray.push('sf-error'); setMsgIcon(errorIcon); break;
+ case Severity.Info: classArray.push('sf-info'); setMsgIcon(infoIcon); break;
+ default: setMsgIcon(infoIcon); break;
+ }
+
+ switch (variant) {
+ case Variant.Outlined: classArray.push('sf-outlined'); break;
+ case Variant.Filled: classArray.push('sf-filled'); break;
+ default: break;
+ }
+
+ return classArray.join(' ');
+ }, [className, dir, isVisible, visible, severity, variant]);
+
+ useEffect(() => {
+ preRender('message');
+ }, []);
+
+ /**
+ * Function to perform message close action.
+ *
+ * @private
+ * @param {React.SyntheticEvent} event - The original mouse or keyboard event arguments.
+ * @returns {void}
+ */
+ function closeMessage(event: React.SyntheticEvent): void {
+ setIsVisible(false);
+ onClose?.(event);
+ }
+
+ /**
+ * Function to perform key down action.
+ *
+ * @private
+ * @param {React.KeyboardEvent} event - The original keyboard event arguments.
+ * @returns {void}
+ */
+ function handleKeyDown(event: React.KeyboardEvent): void {
+ if (event.key === 'Enter' || event.key === ' ') {
+ closeMessage(event);
+ }
+ }
+
+ /**
+ * Gets the content of the message component.
+ *
+ * @private
+ * @returns {React.JSX.Element} - The content of the message component.
+ */
+ const getContent: () => React.JSX.Element = useCallback((): React.JSX.Element => (
+ <>
+ {icon && (
+