npm - igniteui-webcomponents - Versions diffs - 4.1.0-alpha.1 → 4.1.1 - Mend

igniteui-webcomponents 4.1.0-alpha.1 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/components/input/input-base.js CHANGED Viewed

@@ -122,7 +122,7 @@ __decorate([
     blazorSuppress()
 ], IgcInputBaseComponent.prototype, "value", void 0);
 __decorate([
-    query('input', true)
+    query('input')
 ], IgcInputBaseComponent.prototype, "input", void 0);
 __decorate([
     queryAssignedElements({ slot: 'prefix' })

package/components/input/input-base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-base.js","sourceRoot":"","sources":["../../../src/components/input/input-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport type { ReactiveTheme, ThemeController } from '../../theming/types.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { Direction } from '../common/types.js';\nimport { createCounter, partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/input.base.css.js';\nimport { styles as bootstrap } from './themes/light/input.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/input.fluent.css.js';\nimport { styles as indigo } from './themes/light/input.indigo.css.js';\nimport { styles as material } from './themes/light/input.material.css.js';\n\nexport interface IgcInputEventMap {\n /* alternateName: inputOcurred /\n igcInput: CustomEvent<string>;\n / blazorSuppress /\n igcChange: CustomEvent<string>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n}\n\n@themes({ bootstrap, material, fluent, indigo })\n@blazorDeepImport\nexport abstract class IgcInputBaseComponent\n extends SizableMixin(\n EventEmitterMixin<IgcInputEventMap, Constructor<LitElement>>(LitElement)\n )\n implements ReactiveTheme\n{\n protected static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n public static styles = styles;\n private static readonly increment = createCounter();\n\n protected inputId = `input-${IgcInputBaseComponent.increment()}`;\n\n /* The value attribute of the control. /\n @blazorSuppress()\n public abstract value: string \| Date \| null;\n\n @query('input', true)\n protected input!: HTMLInputElement;\n\n @queryAssignedElements({ slot: 'prefix' })\n protected prefixes!: Array<HTMLElement>;\n\n @queryAssignedElements({ slot: 'suffix' })\n protected suffixes!: Array<HTMLElement>;\n\n @queryAssignedElements({ slot: 'helper-text' })\n protected helperText!: Array<HTMLElement>;\n\n protected themeController!: ThemeController;\n\n /\n The direction attribute of the control.\n * @attr\n /\n @property({ reflect: true })\n @blazorSuppress()\n public override dir: Direction = 'auto';\n\n /\n The name attribute of the control.\n * @attr\n /\n @property()\n public name!: string;\n\n /\n Whether the control will have outlined appearance.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public outlined = false;\n\n /\n Makes the control a required field.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public required = false;\n\n /\n Makes the control a disabled field.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public disabled = false;\n\n /\n Makes the control a readonly field.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public readonly = false;\n\n /\n The placeholder attribute of the control.\n * @attr\n /\n @property({ type: String })\n public placeholder!: string;\n\n /\n The label for the control.\n * @attr\n /\n @property({ type: String })\n public label!: string;\n\n constructor() {\n super();\n this.size = 'medium';\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.shadowRoot!.addEventListener('slotchange', () => this.requestUpdate());\n }\n\n public themeAdopted(controller: ThemeController): void {\n this.themeController = controller;\n }\n\n /* Sets focus on the control. /\n @alternateName('focusComponent')\n public override focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the control. /\n @alternateName('blurComponent')\n public override blur() {\n this.input.blur();\n }\n\n protected abstract renderInput(): TemplateResult;\n\n protected resolvePartNames(base: string) {\n return {\n [base]: true,\n prefixed: this.prefixes.length > 0,\n suffixed: this.suffixes.length > 0,\n filled: !!this.value,\n };\n }\n\n protected handleFocus() {\n this.emitEvent('igcFocus');\n }\n\n protected handleBlur() {\n this.emitEvent('igcBlur');\n }\n\n /* Sets the text selection range of the control /\n public setSelectionRange(\n start: number,\n end: number,\n direction: 'backward' \| 'forward' \| 'none' = 'none'\n ) {\n this.input.setSelectionRange(start, end, direction);\n }\n\n /* Replaces the selected text in the input. */\n public setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n this.input.setRangeText(replacement, start, end, selectMode);\n }\n\n private renderPrefix() {\n return html`<div part=\"prefix\">\n <slot name=\"prefix\"></slot>\n </div>`;\n }\n\n private renderSuffix() {\n return html`<div part=\"suffix\">\n <slot name=\"suffix\"></slot>\n </div>`;\n }\n\n private renderLabel() {\n return this.label\n ? html`<label part=\"label\" for=\"${this.inputId}\"> ${this.label} </label>`\n : nothing;\n }\n\n private renderMaterial() {\n return html`\n <div\n part=\"${partNameMap({\n ...this.resolvePartNames('container'),\n labelled: this.label,\n })}\"\n >\n <div part=\"start\">${this.renderPrefix()}</div>\n ${this.renderInput()}\n <div part=\"notch\">${this.renderLabel()}</div>\n <div part=\"filler\"></div>\n <div part=\"end\">${this.renderSuffix()}</div>\n </div>\n <div part=\"helper-text\" .hidden=\"${this.helperText.length == 0}\">\n <slot name=\"helper-text\"></slot>\n </div>\n `;\n }\n\n private renderStandard() {\n return html`${this.renderLabel()}\n <div part=\"${partNameMap(this.resolvePartNames('container'))}\">\n ${this.renderPrefix()} ${this.renderInput()} ${this.renderSuffix()}\n </div>\n <div part=\"helper-text\" .hidden=\"${this.helperText.length == 0}\">\n <slot name=\"helper-text\"></slot>\n </div>`;\n }\n\n protected override render() {\n return html`${this.themeController.theme === 'material'\n ? this.renderMaterial()\n : this.renderStandard()}`;\n }\n}\n"]}
1	+ {"version":3,"file":"input-base.js","sourceRoot":"","sources":["../../../src/components/input/input-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport type { ReactiveTheme, ThemeController } from '../../theming/types.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { Direction } from '../common/types.js';\nimport { createCounter, partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/input.base.css.js';\nimport { styles as bootstrap } from './themes/light/input.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/input.fluent.css.js';\nimport { styles as indigo } from './themes/light/input.indigo.css.js';\nimport { styles as material } from './themes/light/input.material.css.js';\n\nexport interface IgcInputEventMap {\n /* alternateName: inputOcurred /\n igcInput: CustomEvent<string>;\n / blazorSuppress /\n igcChange: CustomEvent<string>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n}\n\n@themes({ bootstrap, material, fluent, indigo })\n@blazorDeepImport\nexport abstract class IgcInputBaseComponent\n extends SizableMixin(\n EventEmitterMixin<IgcInputEventMap, Constructor<LitElement>>(LitElement)\n )\n implements ReactiveTheme\n{\n protected static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n public static styles = styles;\n private static readonly increment = createCounter();\n\n protected inputId = `input-${IgcInputBaseComponent.increment()}`;\n\n /* The value attribute of the control. /\n @blazorSuppress()\n public abstract value: string \| Date \| null;\n\n @query('input')\n protected input!: HTMLInputElement;\n\n @queryAssignedElements({ slot: 'prefix' })\n protected prefixes!: Array<HTMLElement>;\n\n @queryAssignedElements({ slot: 'suffix' })\n protected suffixes!: Array<HTMLElement>;\n\n @queryAssignedElements({ slot: 'helper-text' })\n protected helperText!: Array<HTMLElement>;\n\n protected themeController!: ThemeController;\n\n /\n The direction attribute of the control.\n * @attr\n /\n @property({ reflect: true })\n @blazorSuppress()\n public override dir: Direction = 'auto';\n\n /\n The name attribute of the control.\n * @attr\n /\n @property()\n public name!: string;\n\n /\n Whether the control will have outlined appearance.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public outlined = false;\n\n /\n Makes the control a required field.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public required = false;\n\n /\n Makes the control a disabled field.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public disabled = false;\n\n /\n Makes the control a readonly field.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public readonly = false;\n\n /\n The placeholder attribute of the control.\n * @attr\n /\n @property({ type: String })\n public placeholder!: string;\n\n /\n The label for the control.\n * @attr\n /\n @property({ type: String })\n public label!: string;\n\n constructor() {\n super();\n this.size = 'medium';\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.shadowRoot!.addEventListener('slotchange', () => this.requestUpdate());\n }\n\n public themeAdopted(controller: ThemeController): void {\n this.themeController = controller;\n }\n\n /* Sets focus on the control. /\n @alternateName('focusComponent')\n public override focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the control. /\n @alternateName('blurComponent')\n public override blur() {\n this.input.blur();\n }\n\n protected abstract renderInput(): TemplateResult;\n\n protected resolvePartNames(base: string) {\n return {\n [base]: true,\n prefixed: this.prefixes.length > 0,\n suffixed: this.suffixes.length > 0,\n filled: !!this.value,\n };\n }\n\n protected handleFocus() {\n this.emitEvent('igcFocus');\n }\n\n protected handleBlur() {\n this.emitEvent('igcBlur');\n }\n\n /* Sets the text selection range of the control /\n public setSelectionRange(\n start: number,\n end: number,\n direction: 'backward' \| 'forward' \| 'none' = 'none'\n ) {\n this.input.setSelectionRange(start, end, direction);\n }\n\n /* Replaces the selected text in the input. */\n public setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n this.input.setRangeText(replacement, start, end, selectMode);\n }\n\n private renderPrefix() {\n return html`<div part=\"prefix\">\n <slot name=\"prefix\"></slot>\n </div>`;\n }\n\n private renderSuffix() {\n return html`<div part=\"suffix\">\n <slot name=\"suffix\"></slot>\n </div>`;\n }\n\n private renderLabel() {\n return this.label\n ? html`<label part=\"label\" for=\"${this.inputId}\"> ${this.label} </label>`\n : nothing;\n }\n\n private renderMaterial() {\n return html`\n <div\n part=\"${partNameMap({\n ...this.resolvePartNames('container'),\n labelled: this.label,\n })}\"\n >\n <div part=\"start\">${this.renderPrefix()}</div>\n ${this.renderInput()}\n <div part=\"notch\">${this.renderLabel()}</div>\n <div part=\"filler\"></div>\n <div part=\"end\">${this.renderSuffix()}</div>\n </div>\n <div part=\"helper-text\" .hidden=\"${this.helperText.length == 0}\">\n <slot name=\"helper-text\"></slot>\n </div>\n `;\n }\n\n private renderStandard() {\n return html`${this.renderLabel()}\n <div part=\"${partNameMap(this.resolvePartNames('container'))}\">\n ${this.renderPrefix()} ${this.renderInput()} ${this.renderSuffix()}\n </div>\n <div part=\"helper-text\" .hidden=\"${this.helperText.length == 0}\">\n <slot name=\"helper-text\"></slot>\n </div>`;\n }\n\n protected override render() {\n return html`${this.themeController.theme === 'material'\n ? this.renderMaterial()\n : this.renderStandard()}`;\n }\n}\n"]}

package/components/input/themes/light/input.base.css.js CHANGED Viewed

@@ -51,6 +51,10 @@ export const styles = css `:host {
   outline-style: none;
 }
+:host([invalid]) [part=helper-text] {
+  color: hsla(var(--ig-error-500), var(--ig-error-a));
+}
 :host([size=large]) {
   --component-size: var(--ig-size, var(--ig-size-large));
 }
@@ -66,6 +70,9 @@ export const styles = css `:host {
 [part=label] {
   display: inline-block;
   white-space: nowrap;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  overflow: hidden;
 }
 [part~=input] {

package/components/input/themes/light/input.base.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.base.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n[part~=suffixed] [part=suffix], [part~=prefixed] [part=prefix] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3.5rem, var(--is-medium, 1) * 3rem, var(--is-small, 1) * 2.5rem);\n position: relative;\n display: block;\n font-family: var(--ig-font-family);\n outline-style: none;\n}\n\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=label] {\n display: inline-block;\n white-space: nowrap;\n}\n\n[part~=input] {\n width: 100%;\n height: var(--size);\n border: none;\n outline-style: none;\n color: inherit;\n font-family: var(--ig-font-family);\n z-index: 1;\n}\n\n[part^=container] {\n position: relative;\n display: grid;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n height: var(--size);\n}\n\n[part=prefix],\n[part=suffix] {\n display: none;\n overflow: hidden;\n}\n\n:host([required]) [part=label]::after {\n content: \"*\";\n}\n\n[part=helper-text] {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n}`;\n"]}
1	+ {"version":3,"file":"input.base.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n[part~=suffixed] [part=suffix], [part~=prefixed] [part=prefix] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3.5rem, var(--is-medium, 1) * 3rem, var(--is-small, 1) * 2.5rem);\n position: relative;\n display: block;\n font-family: var(--ig-font-family);\n outline-style: none;\n}\n\n:host([invalid]) [part=helper-text] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=label] {\n display: inline-block;\n white-space: nowrap;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n[part~=input] {\n width: 100%;\n height: var(--size);\n border: none;\n outline-style: none;\n color: inherit;\n font-family: var(--ig-font-family);\n z-index: 1;\n}\n\n[part^=container] {\n position: relative;\n display: grid;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n height: var(--size);\n}\n\n[part=prefix],\n[part=suffix] {\n display: none;\n overflow: hidden;\n}\n\n:host([required]) [part=label]::after {\n content: \"*\";\n}\n\n[part=helper-text] {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n}`;\n"]}

package/components/input/themes/light/input.bootstrap.css.js CHANGED Viewed

@@ -142,7 +142,8 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
-:host([invalid]:focus-within) [part~=input] {
+:host(:not([disabled])[invalid]) [part~=input],
+:host(:not([disabled])[invalid]:focus-within) [part~=input] {
   -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);
           box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);
   border-color: hsla(var(--ig-error-500), var(--ig-error-a));

package/components/input/themes/light/input.bootstrap.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2LvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3rem, var(--is-medium, 1) * 2.375rem, var(--is-small, 1) * 1.9375rem);\n --font: max(var(--is-large, 1) * 1.25rem, var(--is-medium, 1) * 1rem, var(--is-small, 1) * 0.875rem);\n --input-font: max(var(--is-large, 1) * 1.25rem, var(--is-medium, 1) * 1rem, var(--is-small, 1) * 1rem);\n}\n:host::after {\n background: none;\n}\n:host [part~=container] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n border-style: none;\n grid-template-columns: auto 1fr auto;\n background: var(--input-background, #fff);\n height: var(--size);\n}\n:host [part~=container]::after {\n display: none;\n}\n:host [part~=input] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n height: var(--size);\n font-size: var(--input-font);\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 8px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 6px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 4px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n background: inherit;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n z-index: 1;\n border: 1px solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n -webkit-transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n -o-transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n grid-area: 1/2;\n}\n:host [part=\"input prefixed\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n:host [part=\"input suffixed\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n:host [part=\"input prefixed suffixed\"] {\n border-radius: 0;\n}\n:host label {\n line-height: 1.5rem;\n margin-bottom: 0.25rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n:host label:empty {\n display: none;\n}\n:host [part=prefix],\n:host [part=suffix] {\n position: relative;\n border-radius: none;\n min-width: auto;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n -webkit-transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n -o-transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n font-size: var(--font);\n}\n:host [part=prefix]:focus-within,\n:host [part=suffix]:focus-within {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.38);\n}\n:host [part=prefix] {\n grid-area: 1/1;\n border-style: solid;\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-inline-start-width: 1px;\n border-inline-end-width: 0;\n border-block-start-width: 1px;\n border-block-end-width: 1px;\n border-start-start-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n:host [name=prefix]::slotted(),\n:host [name=suffix]::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n:host [part=suffix] {\n grid-area: 1/3;\n border-style: solid;\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-inline-start-width: 0;\n border-inline-end-width: 1px;\n border-block-start-width: 1px;\n border-block-end-width: 1px;\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n:host [part=helper-text] {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n margin-top: 0.25rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part~=input] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([invalid]:focus-within) [part~=input] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part~=container],\n:host([readonly]) [part=prefix],\n:host([readonly]) [part=suffix],\n:host([readonly]) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-block-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([readonly]) [part=prefix] {\n border-inline-start-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=suffix],\n:host([readonly]) [part=suffix] {\n border-inline-end-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input],\n:host([readonly]) [part~=input] {\n border-block-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-inline-color: transparent;\n}\n\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([readonly]) [part=prefix],\n:host([readonly]) [part=suffix],\n:host([readonly]) [part~=container] {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:focus-within[readonly]) [part~=input] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-400), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-400), 0.38);\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}
1	+ {"version":3,"file":"input.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4LvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3rem, var(--is-medium, 1) * 2.375rem, var(--is-small, 1) * 1.9375rem);\n --font: max(var(--is-large, 1) * 1.25rem, var(--is-medium, 1) * 1rem, var(--is-small, 1) * 0.875rem);\n --input-font: max(var(--is-large, 1) * 1.25rem, var(--is-medium, 1) * 1rem, var(--is-small, 1) * 1rem);\n}\n:host::after {\n background: none;\n}\n:host [part~=container] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n border-style: none;\n grid-template-columns: auto 1fr auto;\n background: var(--input-background, #fff);\n height: var(--size);\n}\n:host [part~=container]::after {\n display: none;\n}\n:host [part~=input] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n height: var(--size);\n font-size: var(--input-font);\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 8px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 6px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 4px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n background: inherit;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n z-index: 1;\n border: 1px solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n -webkit-transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n -o-transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n grid-area: 1/2;\n}\n:host [part=\"input prefixed\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n:host [part=\"input suffixed\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n:host [part=\"input prefixed suffixed\"] {\n border-radius: 0;\n}\n:host label {\n line-height: 1.5rem;\n margin-bottom: 0.25rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n:host label:empty {\n display: none;\n}\n:host [part=prefix],\n:host [part=suffix] {\n position: relative;\n border-radius: none;\n min-width: auto;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n -webkit-transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n transition: border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n -o-transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out;\n transition: box-shadow 0.15s ease-out, border 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n font-size: var(--font);\n}\n:host [part=prefix]:focus-within,\n:host [part=suffix]:focus-within {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.38);\n}\n:host [part=prefix] {\n grid-area: 1/1;\n border-style: solid;\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-inline-start-width: 1px;\n border-inline-end-width: 0;\n border-block-start-width: 1px;\n border-block-end-width: 1px;\n border-start-start-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n:host [name=prefix]::slotted(),\n:host [name=suffix]::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n:host [part=suffix] {\n grid-area: 1/3;\n border-style: solid;\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-inline-start-width: 0;\n border-inline-end-width: 1px;\n border-block-start-width: 1px;\n border-block-end-width: 1px;\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n:host [part=helper-text] {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n margin-top: 0.25rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part~=input] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host(:not([disabled])[invalid]) [part~=input],\n:host(:not([disabled])[invalid]:focus-within) [part~=input] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part~=container],\n:host([readonly]) [part=prefix],\n:host([readonly]) [part=suffix],\n:host([readonly]) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-block-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([readonly]) [part=prefix] {\n border-inline-start-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=suffix],\n:host([readonly]) [part=suffix] {\n border-inline-end-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input],\n:host([readonly]) [part~=input] {\n border-block-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-inline-color: transparent;\n}\n\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([readonly]) [part=prefix],\n:host([readonly]) [part=suffix],\n:host([readonly]) [part~=container] {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:focus-within[readonly]) [part~=input] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-400), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-400), 0.38);\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}

package/components/input/themes/light/input.fluent.css.js CHANGED Viewed

@@ -119,10 +119,6 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host([outlined][invalid]) [part^=container] {
   border-color: hsla(var(--ig-error-500), var(--ig-error-a));
 }
-:host([invalid]) [part=helper-text],
-:host([outlined][invalid]) [part=helper-text] {
-  color: hsla(var(--ig-error-500), var(--ig-error-a));
-}
 :host([disabled][outlined][invalid]) [part^=container] {
   border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));

package/components/input/themes/light/input.fluent.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkJvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n:host [part=prefix],\n:host [part=suffix] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n font-size: 0.875rem;\n cursor: default;\n}\n:host [name=prefix]::slotted(),\n:host [name=suffix]::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n:host [part=prefix] {\n grid-area: 1/1;\n}\n:host [part=suffix] {\n grid-area: 1/3;\n}\n:host [part=label] {\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n:host [part^=container] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 2px), 2px);\n border: 0.0625rem solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n -webkit-transition: none;\n -o-transition: none;\n transition: none;\n background: var(--container-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n cursor: text;\n grid-template-columns: auto 1fr auto;\n overflow: hidden;\n height: var(--size);\n}\n:host [part^=container]::after {\n background: transparent;\n -webkit-transform: none;\n -ms-transform: none;\n transform: none;\n height: initial;\n}\n:host [part~=input] {\n height: calc(var(--size) - 0.125rem);\n background: initial;\n font-size: 0.875rem;\n padding: 0.5rem;\n max-height: 100%;\n border: none;\n grid-area: 1/2;\n}\n:host [part=helper-text] {\n padding: 0;\n margin-top: 0.5rem;\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host(:not([invalid]):hover) [part^=container] {\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part^=container] {\n border-width: 0.125rem;\n}\n:host(:focus-within) [part~=input] {\n height: calc(var(--size) - 0.25rem);\n}\n:host(:focus-within) [part=prefix] {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host(:focus-within) [part=suffix] {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host(:focus-within) [name=prefix]::slotted(),\n:host(:focus-within) [name=suffix]::slotted() {\n padding-block: max(var(--is-large, 1) * 10px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 6px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([invalid]):focus-within) [part^=container],\n:host(:not([invalid]):focus-within:hover) [part^=container] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([required]) [part=label]::after,\n:host([outlined][required]) [part=label]::after {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([invalid]) [part^=container],\n:host([outlined][invalid]) [part^=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n~~:host([invalid]) [part=helper-text],\n:host([outlined][invalid]) [part=helper-text] {~~\n ~~color~~: ~~hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:~~host([disabled][outlined][invalid]) [part^=container] {\n border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part^=container] {\n border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part^=container],\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=label],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}
1	+ {"version":3,"file":"input.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8IvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n:host [part=prefix],\n:host [part=suffix] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n font-size: 0.875rem;\n cursor: default;\n}\n:host [name=prefix]::slotted(),\n:host [name=suffix]::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n:host [part=prefix] {\n grid-area: 1/1;\n}\n:host [part=suffix] {\n grid-area: 1/3;\n}\n:host [part=label] {\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n:host [part^=container] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 2px), 2px);\n border: 0.0625rem solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n -webkit-transition: none;\n -o-transition: none;\n transition: none;\n background: var(--container-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n cursor: text;\n grid-template-columns: auto 1fr auto;\n overflow: hidden;\n height: var(--size);\n}\n:host [part^=container]::after {\n background: transparent;\n -webkit-transform: none;\n -ms-transform: none;\n transform: none;\n height: initial;\n}\n:host [part~=input] {\n height: calc(var(--size) - 0.125rem);\n background: initial;\n font-size: 0.875rem;\n padding: 0.5rem;\n max-height: 100%;\n border: none;\n grid-area: 1/2;\n}\n:host [part=helper-text] {\n padding: 0;\n margin-top: 0.5rem;\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host(:not([invalid]):hover) [part^=container] {\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part^=container] {\n border-width: 0.125rem;\n}\n:host(:focus-within) [part~=input] {\n height: calc(var(--size) - 0.25rem);\n}\n:host(:focus-within) [part=prefix] {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host(:focus-within) [part=suffix] {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host(:focus-within) [name=prefix]::slotted(),\n:host(:focus-within) [name=suffix]::slotted() {\n padding-block: max(var(--is-large, 1) * 10px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 6px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([invalid]):focus-within) [part^=container],\n:host(:not([invalid]):focus-within:hover) [part^=container] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([required]) [part=label]::after,\n:host([outlined][required]) [part=label]::after {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([invalid]) [part^=container],\n:host([outlined][invalid]) [part^=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled][outlined][invalid]) [part^=container] {\n border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part^=container] {\n border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part^=container],\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=label],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}

package/components/input/themes/light/input.indigo.css.js CHANGED Viewed

@@ -96,8 +96,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host([invalid]) [part^=container]::after {
   background: hsla(var(--ig-error-500), var(--ig-error-a));
 }
-:host([invalid]) [part=label],
-:host([invalid]) [part^=helper-text] {
+:host([invalid]) [part=label] {
   color: hsla(var(--ig-error-500), var(--ig-error-a));
 }

package/components/input/themes/light/input.indigo.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkHvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host [part=suffix] ::slotted(), :host [part=prefix] ::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: calc(100% - 0.125rem);\n padding-inline: max(var(--is-large, 1) 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host [part=prefix],\n:host [part=suffix] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n:host [part=prefix] {\n grid-area: 1/1;\n}\n:host [part=suffix] {\n grid-area: 1/3;\n}\n:host [part=label] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n margin-bottom: 0.25rem;\n font-size: initial;\n}\n:host [part^=container] {\n background: transparent;\n border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n -webkit-transition: background 0.25s ease-out;\n -o-transition: background 0.25s ease-out;\n transition: background 0.25s ease-out;\n grid-template-columns: auto 1fr auto;\n}\n:host [part^=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n -webkit-transform: scaleY(0);\n -ms-transform: scaleY(0);\n transform: scaleY(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transform-origin: bottom center;\n -ms-transform-origin: bottom center;\n transform-origin: bottom center;\n}\n:host [part~=input] {\n font-size: 1rem;\n background: initial;\n padding: 0.5rem;\n border: none;\n grid-area: 1/2;\n}\n:host [part=helper-text] {\n padding: 0;\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host(:hover) [part^=container],\n:host([outlined]:hover) [part^=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part^=container],\n:host([outlined]:focus-within) [part^=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host(:focus-within) [part^=container]::after,\n:host([outlined]:focus-within) [part^=container]::after {\n -webkit-transform: scaleY(1);\n -ms-transform: scaleY(1);\n transform: scaleY(1);\n}\n:host(:focus-within) [part=label],\n:host([outlined]:focus-within) [part=label] {\n color: var(--label-focus-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n:host([invalid]) [part^=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part^=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label]~~,\n:host([invalid])~~ ~~[part^=helper-text]~~ {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part^=container] {\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=label],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}
1	+ {"version":3,"file":"input.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host [part=suffix] ::slotted(), :host [part=prefix] ::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: calc(100% - 0.125rem);\n padding-inline: max(var(--is-large, 1) 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host [part=prefix],\n:host [part=suffix] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n:host [part=prefix] {\n grid-area: 1/1;\n}\n:host [part=suffix] {\n grid-area: 1/3;\n}\n:host [part=label] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n margin-bottom: 0.25rem;\n font-size: initial;\n}\n:host [part^=container] {\n background: transparent;\n border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n -webkit-transition: background 0.25s ease-out;\n -o-transition: background 0.25s ease-out;\n transition: background 0.25s ease-out;\n grid-template-columns: auto 1fr auto;\n}\n:host [part^=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n -webkit-transform: scaleY(0);\n -ms-transform: scaleY(0);\n transform: scaleY(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transform-origin: bottom center;\n -ms-transform-origin: bottom center;\n transform-origin: bottom center;\n}\n:host [part~=input] {\n font-size: 1rem;\n background: initial;\n padding: 0.5rem;\n border: none;\n grid-area: 1/2;\n}\n:host [part=helper-text] {\n padding: 0;\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host(:hover) [part^=container],\n:host([outlined]:hover) [part^=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part^=container],\n:host([outlined]:focus-within) [part^=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host(:focus-within) [part^=container]::after,\n:host([outlined]:focus-within) [part^=container]::after {\n -webkit-transform: scaleY(1);\n -ms-transform: scaleY(1);\n transform: scaleY(1);\n}\n:host(:focus-within) [part=label],\n:host([outlined]:focus-within) [part=label] {\n color: var(--label-focus-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n:host([invalid]) [part^=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part^=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part^=container] {\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=label],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}

package/components/input/themes/light/input.material.css.js CHANGED Viewed

@@ -1,57 +1,22 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host([size=large]) input:-moz-placeholder-shown + [part=notch] [part=label] {
-  transform: translateY(-26px);
+input:-moz-placeholder-shown + [part=notch] [part=label] {
+  --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);
+  transform: translateY(calc(var(--label-position) * -1));
   font-size: 0.75rem;
 }
-:host([size=large]) input:-ms-input-placeholder + [part=notch] [part=label] {
-  -ms-transform: translateY(-26px);
-      transform: translateY(-26px);
+input:-ms-input-placeholder + [part=notch] [part=label] {
+  --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);
+  -ms-transform: translateY(calc(var(--label-position) * -1));
+      transform: translateY(calc(var(--label-position) * -1));
   font-size: 0.75rem;
 }
-:host([size=large]:focus-within) [part=label], :host([size=large]) input:placeholder-shown + [part=notch] [part=label],
-:host([size=large]) [part~=filled] + [part=notch] [part=label] {
-  -webkit-transform: translateY(-26px);
-      -ms-transform: translateY(-26px);
-          transform: translateY(-26px);
-  font-size: 0.75rem;
-}
-:host([size=medium]) input:-moz-placeholder-shown + [part=notch] [part=label] {
-  transform: translateY(-22px);
-  font-size: 0.75rem;
-}
-:host([size=medium]) input:-ms-input-placeholder + [part=notch] [part=label] {
-  -ms-transform: translateY(-22px);
-      transform: translateY(-22px);
-  font-size: 0.75rem;
-}
-:host([size=medium]:focus-within) [part=label], :host([size=medium]) input:placeholder-shown + [part=notch] [part=label],
-:host([size=medium]) [part~=filled] + [part=notch] [part=label] {
-  -webkit-transform: translateY(-22px);
-      -ms-transform: translateY(-22px);
-          transform: translateY(-22px);
-  font-size: 0.75rem;
-}
-:host([size=small]) input:-moz-placeholder-shown + [part=notch] [part=label] {
-  transform: translateY(-18px);
-  font-size: 0.75rem;
-}
-:host([size=small]) input:-ms-input-placeholder + [part=notch] [part=label] {
-  -ms-transform: translateY(-18px);
-      transform: translateY(-18px);
-  font-size: 0.75rem;
-}
-:host([size=small]:focus-within) [part=label], :host([size=small]) input:placeholder-shown + [part=notch] [part=label],
-:host([size=small]) [part~=filled] + [part=notch] [part=label] {
-  -webkit-transform: translateY(-18px);
-      -ms-transform: translateY(-18px);
-          transform: translateY(-18px);
+:host(:focus-within) [part=label], input:placeholder-shown + [part=notch] [part=label],
+[part~=filled] + [part=notch] [part=label] {
+  --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);
+  -webkit-transform: translateY(calc(var(--label-position) * -1));
+      -ms-transform: translateY(calc(var(--label-position) * -1));
+          transform: translateY(calc(var(--label-position) * -1));
   font-size: 0.75rem;
 }
@@ -83,6 +48,26 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
 }
+:host input::-webkit-input-placeholder {
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+:host input::-moz-placeholder {
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+:host input:-ms-input-placeholder {
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+:host input::-ms-input-placeholder {
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+:host input::placeholder {
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
 [part~=input] {
   background: transparent;
   padding: 0 0.25rem;
@@ -91,15 +76,16 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 }
 [part=label] {
-  color: hsla(var(--ig-gray-600), var(--ig-gray-a));
-  /* stylelint-disable */
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
   -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   -o-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  /* stylelint-enable */
   line-height: 1;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  overflow: hidden;
   will-change: font-size, color, transform;
 }
@@ -127,6 +113,15 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host(:focus-within) [part=label] {
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
+:host(:focus-within) [part~=prefix],
+:host(:focus-within) [part~=suffix] {
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
+[part~=filled] [part~=prefix],
+[part~=filled] [part~=suffix] {
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
 [part^=container] {
   grid-template-columns: auto auto 1fr auto;
@@ -138,7 +133,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
           justify-content: flex-start;
   grid-area: 1/1;
   border-style: solid;
-  border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   border-inline-start-width: 0.0625rem;
   border-inline-end-width: 0;
   border-block-start-width: 0.0625rem;
@@ -154,12 +149,13 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
       -ms-flex-align: center;
           align-items: center;
   width: auto;
+  min-width: 0;
   height: 100%;
   grid-area: 1/2;
   padding: 0 0.25rem;
   border-width: 0.0625rem;
   border-style: solid;
-  border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   border-left: none;
   border-right: none;
   overflow: visible;
@@ -172,7 +168,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   grid-area: 1/3;
   border-width: 0.0625rem;
   border-style: solid;
-  border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   border-left: none;
   border-right: none;
 }
@@ -183,7 +179,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
           justify-content: flex-end;
   grid-area: 1/4;
   border-style: solid;
-  border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   border-inline-start-width: 0;
   border-inline-end-width: 0.0625rem;
   border-block-start-width: 0.0625rem;
@@ -213,7 +209,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   margin-bottom: var(--ig-caption-margin-bottom);
   padding: 0 0.5rem;
   margin-top: 0.25rem;
-  color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
 }
 :host([invalid]) [part=start],
@@ -227,9 +223,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   border-color: hsla(var(--ig-error-500), var(--ig-error-a));
 }
 :host([invalid]) [part=label],
-:host([invalid]) [part=helper-text],
-:host([invalid]:focus-within) [part=label],
-:host([invalid]:focus-within) [part=helper-text] {
+:host([invalid]:focus-within) [part=label] {
   color: hsla(var(--ig-error-500), var(--ig-error-a));
 }
 :host([invalid]:focus-within) [part=notch] {
@@ -239,34 +233,37 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host([disabled]) {
   pointer-events: none;
 }
+:host([disabled]) [part~=container] {
+  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
 :host([disabled]) [part~=input],
 :host([disabled]) [part=label],
 :host([disabled]) [part=prefix],
 :host([disabled]) [part=suffix],
 :host([disabled]) [part=helper-text] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([disabled]) [part=start],
 :host([disabled]) [part=filler],
 :host([disabled]) [part=notch],
 :host([disabled]) [part=end] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([disabled]) input::-webkit-input-placeholder {
-  color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([disabled]) input::-moz-placeholder {
-  color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([disabled]) input:-ms-input-placeholder {
-  color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([disabled]) input::-ms-input-placeholder {
-  color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([disabled]) input::placeholder {
-  color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([outlined]:active) [part=suffix],
 :host([outlined]:focus) [part=suffix],
@@ -310,8 +307,8 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   inset-inline-start: 0.125rem;
 }
 :host(:not([outlined])) [part~=container] {
-  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  border-bottom: 1px solid hsla(var(--ig-gray-600), var(--ig-gray-a));
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+  border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));
   border-start-end-radius: 0.25rem;
   border-start-start-radius: 0.25rem;
   -webkit-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -399,9 +396,10 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host(:not([outlined])[disabled]) [part=prefix],
 :host(:not([outlined])[disabled]) [part=suffix],
 :host(:not([outlined])[disabled]) [part=helper-text] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host(:not([outlined])[disabled]) [part~=container] {
-  border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }`;
 //# sourceMappingURL=input.material.css.js.map

package/components/input/themes/light/input.material.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.material.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoZvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host([size=large]) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-26px);\n font-size: 0.75rem;\n}\n:host([size=large]) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-26px);\n transform: translateY(-26px);\n font-size: 0.75rem;\n}\n:host([size=large]:focus-within) [part=label], :host([size=large]) input:placeholder-shown + [part=notch] [part=label],\n:host([size=large]) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-26px);\n -ms-transform: translateY(-26px);\n transform: translateY(-26px);\n font-size: 0.75rem;\n}\n\n:host([size=medium]) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-22px);\n font-size: 0.75rem;\n}\n\n:host([size=medium]) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-22px);\n transform: translateY(-22px);\n font-size: 0.75rem;\n}\n\n:host([size=medium]:focus-within) [part=label], :host([size=medium]) input:placeholder-shown + [part=notch] [part=label],\n:host([size=medium]) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-22px);\n -ms-transform: translateY(-22px);\n transform: translateY(-22px);\n font-size: 0.75rem;\n}\n\n:host([size=small]) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-18px);\n font-size: 0.75rem;\n}\n\n:host([size=small]) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-18px);\n transform: translateY(-18px);\n font-size: 0.75rem;\n}\n\n:host([size=small]:focus-within) [part=label], :host([size=small]) input:placeholder-shown + [part=notch] [part=label],\n:host([size=small]) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-18px);\n -ms-transform: translateY(-18px);\n transform: translateY(-18px);\n font-size: 0.75rem;\n}\n\n:host input:-moz-placeholder-shown + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host input:-ms-input-placeholder + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) [part~=filled] + [part=notch], :host([invalid]) [part~=filled] + [part=notch],\n:host([invalid]:focus-within) [part~=filled] + [part=notch], :host input:placeholder-shown + [part=notch],\n:host [part~=filled] + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n[part=end] > [part=suffix] ::slotted(), [part=start] > [part=prefix] ::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n[part~=input] {\n background: transparent;\n padding: 0 0.25rem;\n font-size: 1rem;\n grid-area: 1/2/span 1/span 2;\n}\n\n[part=label] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n /* stylelint-disable /\n -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n / stylelint-enable /\n line-height: 1;\n will-change: font-size, color, transform;\n}\n\n:host(:focus-within) [part=start] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-start-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=notch] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-top: 0.0625rem solid transparent;\n}\n:host(:focus-within) [part=filler] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:focus-within) [part=end] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-end-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=label] {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part^=container] {\n grid-template-columns: auto auto 1fr auto;\n}\n\n[part=start] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n grid-area: 1/1;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-inline-start-width: 0.0625rem;\n border-inline-end-width: 0;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-start-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n[part=notch] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: auto;\n height: 100%;\n grid-area: 1/2;\n padding: 0 0.25rem;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n overflow: visible;\n}\n[part=notch]:empty {\n display: none;\n}\n\n[part=filler] {\n grid-area: 1/3;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n}\n\n[part=end] {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n grid-area: 1/4;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-inline-start-width: 0;\n border-inline-end-width: 0.0625rem;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n[part=start],\n[part=end] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: 0.75rem;\n height: var(--size);\n overflow: hidden;\n}\n\n[part=helper-text] {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n padding: 0 0.5rem;\n margin-top: 0.25rem;\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host([invalid]) [part=start],\n:host([invalid]) [part=notch],\n:host([invalid]) [part=filler],\n:host([invalid]) [part=end],\n:host([invalid]:focus-within) [part=start],\n:host([invalid]:focus-within) [part=notch],\n:host([invalid]:focus-within) [part=filler],\n:host([invalid]:focus-within) [part=end] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label],\n:host([invalid]) [part=helper-text],\n:host([invalid]:focus-within) [part=label],\n:host([invalid]:focus-within) [part=helper-text] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]:focus-within) [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part~=input],\n:host([disabled]) [part=label],\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part=start],\n:host([disabled]) [part=filler],\n:host([disabled]) [part=notch],\n:host([disabled]) [part=end] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) input::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input::-moz-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input:-ms-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input::-ms-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input::placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([outlined]:active) [part=suffix],\n:host([outlined]:focus) [part=suffix],\n:host([outlined]:focus-within) [part=suffix] {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host([outlined]:active) [part=prefix],\n:host([outlined]:focus) [part=prefix],\n:host([outlined]:focus-within) [part=prefix] {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host([outlined]:active) [part=suffix] ::slotted(),\n:host([outlined]:active) [part=prefix] ::slotted(),\n:host([outlined]:focus) [part=suffix] ::slotted(),\n:host([outlined]:focus) [part=prefix] ::slotted(),\n:host([outlined]:focus-within) [part=suffix] ::slotted(),\n:host([outlined]:focus-within) [part=prefix] ::slotted() {\n padding-block: max(var(--is-large, 1) 14px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 10px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([outlined])) [part=start],\n:host(:not([outlined])) [part=end] {\n border-color: transparent;\n border-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=start] {\n border-end-start-radius: 0;\n}\n:host(:not([outlined])) [part=end] {\n border-end-end-radius: 0;\n}\n:host(:not([outlined])) [part=notch],\n:host(:not([outlined])) [part=filler] {\n border-top: 1px solid transparent;\n border-bottom: transparent;\n border-bottom-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=label] {\n inset-inline-start: 0.125rem;\n}\n:host(:not([outlined])) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-start-end-radius: 0.25rem;\n border-start-start-radius: 0.25rem;\n -webkit-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n -webkit-transform: scaleX(0);\n -ms-transform: scaleX(0);\n transform: scaleX(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=labelled] [part~=input] {\n padding-top: 1.25rem;\n padding-bottom: 0.375rem;\n}\n:host(:not([outlined])) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:placeholder-shown + [part=notch] [part=label],\n:host(:not([outlined])) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined]):hover) [part~=container] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:not([outlined]):focus-within) [part~=container] {\n background: var(--focus-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n border-bottom: 1px solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([outlined]):focus-within) [part~=container]::after {\n -webkit-transform: scaleX(1);\n -ms-transform: scaleX(1);\n transform: scaleX(1);\n opacity: 1;\n}\n:host(:not([outlined]):focus-within) [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined])[invalid]) [part=start],\n:host(:not([outlined])[invalid]) [part=notch],\n:host(:not([outlined])[invalid]) [part=filler],\n:host(:not([outlined])[invalid]) [part=end],\n:host(:not([outlined])[invalid]:focus-within) [part=start],\n:host(:not([outlined])[invalid]:focus-within) [part=notch],\n:host(:not([outlined])[invalid]:focus-within) [part=filler],\n:host(:not([outlined])[invalid]:focus-within) [part=end] {\n border-color: transparent;\n}\n:host(:not([outlined])[invalid]) [part~=container],\n:host(:not([outlined])[invalid]:focus-within) [part~=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host(:not([outlined])[invalid]) [part~=container]::after,\n:host(:not([outlined])[invalid]:focus-within) [part~=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host(:not([outlined])[disabled]) [part~=input],\n:host(:not([outlined])[disabled]) [part=label],\n:host(:not([outlined])[disabled]) [part=prefix],\n:host(:not([outlined])[disabled]) [part=suffix],\n:host(:not([outlined])[disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host(:not([outlined])[disabled]) [part~=container] {\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}
1	+ {"version":3,"file":"input.material.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkZvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\ninput:-moz-placeholder-shown + [part=notch] [part=label] {\n --label-position: max(var(--is-large, 1) 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);\n transform: translateY(calc(var(--label-position) * -1));\n font-size: 0.75rem;\n}\ninput:-ms-input-placeholder + [part=notch] [part=label] {\n --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);\n -ms-transform: translateY(calc(var(--label-position) * -1));\n transform: translateY(calc(var(--label-position) * -1));\n font-size: 0.75rem;\n}\n:host(:focus-within) [part=label], input:placeholder-shown + [part=notch] [part=label],\n[part~=filled] + [part=notch] [part=label] {\n --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);\n -webkit-transform: translateY(calc(var(--label-position) * -1));\n -ms-transform: translateY(calc(var(--label-position) * -1));\n transform: translateY(calc(var(--label-position) * -1));\n font-size: 0.75rem;\n}\n\n:host input:-moz-placeholder-shown + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host input:-ms-input-placeholder + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) [part~=filled] + [part=notch], :host([invalid]) [part~=filled] + [part=notch],\n:host([invalid]:focus-within) [part~=filled] + [part=notch], :host input:placeholder-shown + [part=notch],\n:host [part~=filled] + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n[part=end] > [part=suffix] ::slotted(), [part=start] > [part=prefix] ::slotted() {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host input::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input::-moz-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input:-ms-input-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input::-ms-input-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input::placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=input] {\n background: transparent;\n padding: 0 0.25rem;\n font-size: 1rem;\n grid-area: 1/2/span 1/span 2;\n}\n\n[part=label] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n line-height: 1;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n will-change: font-size, color, transform;\n}\n\n:host(:focus-within) [part=start] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-start-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=notch] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-top: 0.0625rem solid transparent;\n}\n:host(:focus-within) [part=filler] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:focus-within) [part=end] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-end-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=label] {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:focus-within) [part~=prefix],\n:host(:focus-within) [part~=suffix] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=filled] [part~=prefix],\n[part~=filled] [part~=suffix] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part^=container] {\n grid-template-columns: auto auto 1fr auto;\n}\n\n[part=start] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n grid-area: 1/1;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-inline-start-width: 0.0625rem;\n border-inline-end-width: 0;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-start-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n[part=notch] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: auto;\n min-width: 0;\n height: 100%;\n grid-area: 1/2;\n padding: 0 0.25rem;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n overflow: visible;\n}\n[part=notch]:empty {\n display: none;\n}\n\n[part=filler] {\n grid-area: 1/3;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n}\n\n[part=end] {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n grid-area: 1/4;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-inline-start-width: 0;\n border-inline-end-width: 0.0625rem;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n[part=start],\n[part=end] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: 0.75rem;\n height: var(--size);\n overflow: hidden;\n}\n\n[part=helper-text] {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n padding: 0 0.5rem;\n margin-top: 0.25rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([invalid]) [part=start],\n:host([invalid]) [part=notch],\n:host([invalid]) [part=filler],\n:host([invalid]) [part=end],\n:host([invalid]:focus-within) [part=start],\n:host([invalid]:focus-within) [part=notch],\n:host([invalid]:focus-within) [part=filler],\n:host([invalid]:focus-within) [part=end] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label],\n:host([invalid]:focus-within) [part=label] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]:focus-within) [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input],\n:host([disabled]) [part=label],\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part=start],\n:host([disabled]) [part=filler],\n:host([disabled]) [part=notch],\n:host([disabled]) [part=end] {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::-moz-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input:-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([outlined]:active) [part=suffix],\n:host([outlined]:focus) [part=suffix],\n:host([outlined]:focus-within) [part=suffix] {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host([outlined]:active) [part=prefix],\n:host([outlined]:focus) [part=prefix],\n:host([outlined]:focus-within) [part=prefix] {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host([outlined]:active) [part=suffix] ::slotted(),\n:host([outlined]:active) [part=prefix] ::slotted(),\n:host([outlined]:focus) [part=suffix] ::slotted(),\n:host([outlined]:focus) [part=prefix] ::slotted(),\n:host([outlined]:focus-within) [part=suffix] ::slotted(),\n:host([outlined]:focus-within) [part=prefix] ::slotted() {\n padding-block: max(var(--is-large, 1) * 14px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 10px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([outlined])) [part=start],\n:host(:not([outlined])) [part=end] {\n border-color: transparent;\n border-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=start] {\n border-end-start-radius: 0;\n}\n:host(:not([outlined])) [part=end] {\n border-end-end-radius: 0;\n}\n:host(:not([outlined])) [part=notch],\n:host(:not([outlined])) [part=filler] {\n border-top: 1px solid transparent;\n border-bottom: transparent;\n border-bottom-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=label] {\n inset-inline-start: 0.125rem;\n}\n:host(:not([outlined])) [part~=container] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-start-end-radius: 0.25rem;\n border-start-start-radius: 0.25rem;\n -webkit-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n -webkit-transform: scaleX(0);\n -ms-transform: scaleX(0);\n transform: scaleX(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=labelled] [part~=input] {\n padding-top: 1.25rem;\n padding-bottom: 0.375rem;\n}\n:host(:not([outlined])) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:placeholder-shown + [part=notch] [part=label],\n:host(:not([outlined])) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined]):hover) [part~=container] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:not([outlined]):focus-within) [part~=container] {\n background: var(--focus-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n border-bottom: 1px solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([outlined]):focus-within) [part~=container]::after {\n -webkit-transform: scaleX(1);\n -ms-transform: scaleX(1);\n transform: scaleX(1);\n opacity: 1;\n}\n:host(:not([outlined]):focus-within) [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined])[invalid]) [part=start],\n:host(:not([outlined])[invalid]) [part=notch],\n:host(:not([outlined])[invalid]) [part=filler],\n:host(:not([outlined])[invalid]) [part=end],\n:host(:not([outlined])[invalid]:focus-within) [part=start],\n:host(:not([outlined])[invalid]:focus-within) [part=notch],\n:host(:not([outlined])[invalid]:focus-within) [part=filler],\n:host(:not([outlined])[invalid]:focus-within) [part=end] {\n border-color: transparent;\n}\n:host(:not([outlined])[invalid]) [part~=container],\n:host(:not([outlined])[invalid]:focus-within) [part~=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host(:not([outlined])[invalid]) [part~=container]::after,\n:host(:not([outlined])[invalid]:focus-within) [part~=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host(:not([outlined])[disabled]) [part~=input],\n:host(:not([outlined])[disabled]) [part=label],\n:host(:not([outlined])[disabled]) [part=prefix],\n:host(:not([outlined])[disabled]) [part=suffix],\n:host(:not([outlined])[disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host(:not([outlined])[disabled]) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}`;\n"]}