npm - igniteui-webcomponents - Versions diffs - 4.1.0 → 4.2.0 - Mend

igniteui-webcomponents 4.1.0 → 4.2.0

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 (139) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combo.material.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFvB~~,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([outlined]:focus-within) igc-input[readonly]:not([disabled])::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([outlined]:focus-within) igc-input[readonly]:not([disabled])::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([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::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([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n border-color: hsla(var(--ig-error-500), var(--ig-error-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([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n border-top: 0.0625rem solid transparent;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n border-color: hsla(var(--ig-error-500), var(--ig-error-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([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=toggle-icon] {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\nigc-input:not([outlined]):focus-within [part~=toggle-icon] {\n background: hsla(var(--ig-gray-400), 0.3);\n}\n\n:host([outlined]:focus-within) igc-input::part(suffix) {\n -webkit-margin-end: -1px;\n margin-inline-end: -1px;\n}\n:host([outlined]:focus-within) igc-input::part(prefix) {\n -webkit-margin-start: -1px;\n margin-inline-start: -1px;\n}\n\n:host ::slotted([slot=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"]}
1	+ {"version":3,"file":"combo.material.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6HvB,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([outlined]:focus-within) igc-input[readonly]:not([disabled])::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([outlined]:focus-within) igc-input[readonly]:not([disabled])::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([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::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([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n border-color: hsla(var(--ig-error-500), var(--ig-error-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([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n border-top: 0.0625rem solid transparent;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n border-color: hsla(var(--ig-error-500), var(--ig-error-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([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=toggle-icon] {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part=helper-text] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n margin-top: 0.3125rem;\n padding-inline: max(var(--is-large, 1) 1.125rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 1rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.875rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host([disabled]) [part~=toggle-icon],\n:host([disabled]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part~=toggle-icon] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\nigc-input:not([outlined]):focus-within [part~=toggle-icon] {\n background: hsla(var(--ig-gray-400), 0.3);\n}\n\n[part=helper-text] {\n margin-top: 0.3125rem;\n padding-inline: max(var(--is-large, 1) * 1.125rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 1rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.875rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host([disabled]) igc-input::part(input)::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-moz-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input):-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(label),\n:host([disabled]) igc-input::part(input)::placeholder,\n:host([disabled]) [part~=toggle-icon],\n:host([disabled]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part~=toggle-icon] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host([outlined]:focus-within) igc-input::part(suffix) {\n -webkit-margin-end: -1px;\n margin-inline-end: -1px;\n}\n:host([outlined]:focus-within) igc-input::part(prefix) {\n -webkit-margin-start: -1px;\n margin-inline-start: -1px;\n}\n\n:host ::slotted([slot=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 color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n line-height: 1;\n}`;\n"]}

package/components/combo/types.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export type Values<T> = T[keyof T];
 export interface ComboRecordMeta {
     header: boolean;
 }
+export type Item<T extends object> = T | Values<T>;
 export type ComboRecord<T extends object> = T & ComboRecordMeta;
 export type ComboHost<T extends object> = ReactiveControllerHost & IgcComboComponent<T>;
 export type GroupingDirection = 'asc' | 'desc';

package/components/combo/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/combo/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactiveControllerHost, TemplateResult } from 'lit';\nimport IgcComboComponent from './combo.js';\n\nexport type Keys<T> = keyof T;\nexport type Values<T> = T[keyof T];\n\nexport interface ComboRecordMeta {\n header: boolean;\n}\n\nexport type ComboRecord<T extends object> = T & ComboRecordMeta;\n\nexport type ComboHost<T extends object> = ReactiveControllerHost &\n IgcComboComponent<T>;\n\nexport type GroupingDirection = 'asc' \| 'desc';\nexport type ComboChangeType = 'selection' \| 'deselection' \| 'addition';\n\nexport interface FilteringOptions<T extends object> {\n filterKey: Keys<T> \| undefined;\n caseSensitive?: boolean;\n}\n\nexport interface GroupingOptions<T extends object> {\n groupKey?: Keys<T>;\n valueKey?: Keys<T>;\n displayKey?: Keys<T>;\n direction: GroupingDirection;\n}\n\nexport interface IgcComboChangeEventArgs {\n newValue: string;\n items: object;\n type: ComboChangeType;\n}\n\nexport interface IgcComboEventMap {\n /* blazorSuppress */\n igcChange: CustomEvent<IgcComboChangeEventArgs>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport type ComboItemTemplate<T extends object> = (\n props: ComboTemplateProps<T>\n) => TemplateResult;\nexport interface ComboTemplateProps<T extends object> {\n item: T;\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/combo/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactiveControllerHost, TemplateResult } from 'lit';\nimport IgcComboComponent from './combo.js';\n\nexport type Keys<T> = keyof T;\nexport type Values<T> = T[keyof T];\n\nexport interface ComboRecordMeta {\n header: boolean;\n}\n\nexport type Item<T extends object> = T \| Values<T>;\n\nexport type ComboRecord<T extends object> = T & ComboRecordMeta;\n\nexport type ComboHost<T extends object> = ReactiveControllerHost &\n IgcComboComponent<T>;\n\nexport type GroupingDirection = 'asc' \| 'desc';\nexport type ComboChangeType = 'selection' \| 'deselection' \| 'addition';\n\nexport interface FilteringOptions<T extends object> {\n filterKey: Keys<T> \| undefined;\n caseSensitive?: boolean;\n}\n\nexport interface GroupingOptions<T extends object> {\n groupKey?: Keys<T>;\n valueKey?: Keys<T>;\n displayKey?: Keys<T>;\n direction: GroupingDirection;\n}\n\nexport interface IgcComboChangeEventArgs {\n newValue: string;\n items: object;\n type: ComboChangeType;\n}\n\nexport interface IgcComboEventMap {\n /* blazorSuppress */\n igcChange: CustomEvent<IgcComboChangeEventArgs>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport type ComboItemTemplate<T extends object> = (\n props: ComboTemplateProps<T>\n) => TemplateResult;\nexport interface ComboTemplateProps<T extends object> {\n item: T;\n}\n"]}

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

@@ -49,8 +49,8 @@ export const styles = css `:host {
   border: inherit;
   border-radius: inherit;
   min-width: inherit;
-  -webkit-box-shadow: var(--igc-elevation-24);
-          box-shadow: var(--igc-elevation-24);
+  -webkit-box-shadow: var(--ig-elevation-24);
+          box-shadow: var(--ig-elevation-24);
 }
 [part=content] {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HvB,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:host {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) 2px), 2px);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n border-style: none;\n padding: unset;\n}\n\n[part=base] {\n background: inherit;\n color: inherit;\n border-style: inherit;\n padding: inherit;\n border: inherit;\n border-radius: inherit;\n min-width: inherit;\n -webkit-box-shadow: var(--~~igc~~-elevation-24);\n box-shadow: var(--~~igc~~-elevation-24);\n}\n\n[part=content] {\n color: var(--content-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n margin: 0;\n}\n\n[part=title],\n[part=footer] {\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-900), var(--ig-gray-a));\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n margin: 0;\n}\n\n[part=footer] {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n::slotted(*) {\n font: inherit;\n letter-spacing: inherit;\n line-height: inherit;\n text-transform: inherit;\n margin: 0;\n}\n\nslot[name=title]::slotted(:not(:last-child)),\nslot[name=footer]::slotted(:not(:last-child)) {\n -webkit-margin-end: 0.5rem;\n margin-inline-end: 0.5rem;\n}\n\ndialog::-webkit-backdrop {\n background: none;\n}\n\ndialog::backdrop {\n background: none;\n}\n\n[part=backdrop] {\n position: fixed;\n inset: 0;\n background: hsla(var(--ig-gray-500), 0.54);\n}`;\n"]}
1	+ {"version":3,"file":"dialog.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HvB,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:host {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) 2px), 2px);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n border-style: none;\n padding: unset;\n}\n\n[part=base] {\n background: inherit;\n color: inherit;\n border-style: inherit;\n padding: inherit;\n border: inherit;\n border-radius: inherit;\n min-width: inherit;\n -webkit-box-shadow: var(--ig-elevation-24);\n box-shadow: var(--ig-elevation-24);\n}\n\n[part=content] {\n color: var(--content-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n margin: 0;\n}\n\n[part=title],\n[part=footer] {\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-900), var(--ig-gray-a));\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n margin: 0;\n}\n\n[part=footer] {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n::slotted(*) {\n font: inherit;\n letter-spacing: inherit;\n line-height: inherit;\n text-transform: inherit;\n margin: 0;\n}\n\nslot[name=title]::slotted(:not(:last-child)),\nslot[name=footer]::slotted(:not(:last-child)) {\n -webkit-margin-end: 0.5rem;\n margin-inline-end: 0.5rem;\n}\n\ndialog::-webkit-backdrop {\n background: none;\n}\n\ndialog::backdrop {\n background: none;\n}\n\n[part=backdrop] {\n position: fixed;\n inset: 0;\n background: hsla(var(--ig-gray-500), 0.54);\n}`;\n"]}

package/components/expansion-panel/expansion-panel.d.ts CHANGED Viewed

@@ -33,6 +33,7 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
     static readonly tagName = "igc-expansion-panel";
     static styles: import("lit").CSSResult;
     private static readonly increment;
+    private animationPlayer;
     /**
      * Indicates whether the contents of the control should be visible.
      * @attr
@@ -49,10 +50,13 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
      */
     indicatorPosition: 'start' | 'end' | 'none';
     protected panelHeader: HTMLElement;
+    protected panelContent: HTMLElement;
     private panelId;
     connectedCallback(): void;
+    firstUpdated(): void;
     private handleClicked;
     private handleKeydown;
+    private toggleAnimation;
     /**
      * @private
      * Opens the panel.

package/components/expansion-panel/expansion-panel.js CHANGED Viewed

@@ -16,6 +16,7 @@ import { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';
 import { createCounter } from '../common/util.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import IgcIconComponent from '../icon/icon.js';
+import { AnimationPlayer, growVerIn, growVerOut, } from '../../animations/index.js';
 defineComponents(IgcIconComponent);
 let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
     constructor() {
@@ -30,6 +31,9 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
             this.getAttribute('id') ||
                 `igc-expansion-panel-${IgcExpansionPanelComponent_1.increment()}`;
     }
+    firstUpdated() {
+        this.animationPlayer = new AnimationPlayer(this.panelContent);
+    }
     handleClicked() {
         this.panelHeader.focus();
         if (this.open) {
@@ -62,7 +66,15 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
                 break;
         }
     }
-    openWithEvent() {
+    async toggleAnimation(dir) {
+        const animation = dir === 'open' ? growVerIn : growVerOut;
+        const [_, event] = await Promise.all([
+            this.animationPlayer.stopAll(),
+            this.animationPlayer.play(animation),
+        ]);
+        return event.type === 'finish';
+    }
+    async openWithEvent() {
         if (this.open) {
             return;
         }
@@ -75,9 +87,11 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
             return;
         }
         this.open = true;
-        this.emitEvent('igcOpened', { detail: this });
+        if (await this.toggleAnimation('open')) {
+            this.emitEvent('igcOpened', { detail: this });
+        }
     }
-    closeWithEvent() {
+    async closeWithEvent() {
         if (!this.open) {
             return;
         }
@@ -90,15 +104,23 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
             return;
         }
         this.open = false;
-        this.emitEvent('igcClosed', { detail: this });
+        if (await this.toggleAnimation('close')) {
+            this.emitEvent('igcClosed', { detail: this });
+        }
     }
     toggle() {
-        this.open = !this.open;
+        this.open ? this.hide() : this.show();
     }
     hide() {
+        if (this.open) {
+            this.toggleAnimation('close');
+        }
         this.open = false;
     }
     show() {
+        if (!this.open) {
+            this.toggleAnimation('open');
+        }
         this.open = true;
     }
     indicatorTemplate() {
@@ -142,8 +164,9 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
         role="region"
         id="${this.panelId}-content"
         aria-labelledby="${this.panelId}-header"
+        aria-hidden=${!this.open}
       >
-        <slot ?hidden=${!this.open}></slot>
+        <slot></slot>
       </div>
     `;
     }
@@ -166,6 +189,9 @@ __decorate([
 __decorate([
     query('[part~="header"]', true)
 ], IgcExpansionPanelComponent.prototype, "panelHeader", void 0);
+__decorate([
+    query('[part~="content"]', true)
+], IgcExpansionPanelComponent.prototype, "panelContent", void 0);
 IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = __decorate([
     themes({ bootstrap, fluent, indigo })
 ], IgcExpansionPanelComponent);

package/components/expansion-panel/expansion-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/*\n The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n \n @element igc-expansion-panel\n \n @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n \n @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n \n @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title - The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n /\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n IgcExpansionPanelComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-expansion-panel';\n public static styles = styles;\n private static readonly increment = createCounter();\n\n /\n Indicates whether the contents of the control should be visible.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public open = false;\n\n /\n Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public disabled = false;\n\n /\n The indicator position of the expansion panel.\n * @attr indicator-position\n /\n @property({ reflect: true, attribute: 'indicator-position' })\n public indicatorPosition: 'start' \| 'end' \| 'none' = 'start';\n\n @query('[part~=\"header\"]', true)\n protected panelHeader!: HTMLElement;\n\n private panelId!: string;\n\n public override connectedCallback() {\n super.connectedCallback();\n this.panelId =\n this.getAttribute('id') \|\|\n `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n }\n\n private handleClicked() {\n this.panelHeader!.focus();\n\n if (this.open) {\n this.closeWithEvent();\n } else {\n this.openWithEvent();\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n switch (event.key.toLowerCase()) {\n case 'arrowdown':\n case 'down':\n if (event.altKey) {\n this.openWithEvent();\n }\n break;\n case 'arrowup':\n case 'up':\n if (event.altKey) {\n this.closeWithEvent();\n }\n break;\n case 'enter':\n case ' ':\n this.open ? this.closeWithEvent() : this.openWithEvent();\n break;\n }\n }\n\n /\n @private\n * Opens the panel.\n /\n private openWithEvent() {\n if (this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcOpening', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = true;\n this.emitEvent('igcOpened', { detail: this });\n }\n\n /\n @private\n * Closes the panel.\n /\n private closeWithEvent() {\n if (!this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcClosing', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = false;\n this.emitEvent('igcClosed', { detail: this });\n }\n\n /* Toggles panel open state. /\n public toggle(): void {\n this.open = !this.open;\n }\n\n /* Hides the panel content. /\n public hide(): void {\n this.open = false;\n }\n\n /* Shows the panel content. */\n public show(): void {\n this.open = true;\n }\n\n private indicatorTemplate() {\n return html`\n <div part=\"indicator\" aria-hidden=\"true\">\n <slot name=\"indicator\">\n <igc-icon\n name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n collection=\"internal\"\n >\n </igc-icon>\n </slot>\n </div>\n `;\n }\n\n private headerTemplate() {\n return html`\n <div\n part=\"header\"\n id=\"${this.panelId!}-header\"\n role=\"button\"\n aria-expanded=\"${this.open}\"\n aria-disabled=\"${this.disabled}\"\n aria-controls=\"${this.panelId!}-content\"\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClicked}\n @keydown=${this.handleKeydown}\n >\n ${this.indicatorTemplate()}\n <div>\n <slot name=\"title\" part=\"title\"></slot>\n <slot name=\"subtitle\" part=\"subtitle\"></slot>\n </div>\n </div>\n `;\n }\n\n private contentTemplate() {\n return html`\n <div\n part=\"content\"\n role=\"region\"\n id=\"${this.panelId!}-content\"\n aria-labelledby=\"${this.panelId!}-header\"\n >\n <slot ?hidden=${!this.open}></slot>\n </div>\n `;\n }\n\n protected override render() {\n return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-expansion-panel': IgcExpansionPanelComponent;\n }\n}\n"]}
1	+ {"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n AnimationPlayer,\n growVerIn,\n growVerOut,\n} from '../../animations/index.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/*\n The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n \n @element igc-expansion-panel\n \n @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n \n @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n \n @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title - The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n /\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n IgcExpansionPanelComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-expansion-panel';\n public static styles = styles;\n private static readonly increment = createCounter();\n private animationPlayer!: AnimationPlayer;\n\n /\n Indicates whether the contents of the control should be visible.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public open = false;\n\n /\n Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n * @attr\n /\n @property({ reflect: true, type: Boolean })\n public disabled = false;\n\n /\n The indicator position of the expansion panel.\n * @attr indicator-position\n /\n @property({ reflect: true, attribute: 'indicator-position' })\n public indicatorPosition: 'start' \| 'end' \| 'none' = 'start';\n\n @query('[part~=\"header\"]', true)\n protected panelHeader!: HTMLElement;\n\n @query('[part~=\"content\"]', true)\n protected panelContent!: HTMLElement;\n\n private panelId!: string;\n\n public override connectedCallback() {\n super.connectedCallback();\n this.panelId =\n this.getAttribute('id') \|\|\n `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n }\n\n public override firstUpdated() {\n this.animationPlayer = new AnimationPlayer(this.panelContent);\n }\n\n private handleClicked() {\n this.panelHeader!.focus();\n\n if (this.open) {\n this.closeWithEvent();\n } else {\n this.openWithEvent();\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n switch (event.key.toLowerCase()) {\n case 'arrowdown':\n case 'down':\n if (event.altKey) {\n this.openWithEvent();\n }\n break;\n case 'arrowup':\n case 'up':\n if (event.altKey) {\n this.closeWithEvent();\n }\n break;\n case 'enter':\n case ' ':\n this.open ? this.closeWithEvent() : this.openWithEvent();\n break;\n }\n }\n\n private async toggleAnimation(dir: 'open' \| 'close') {\n const animation = dir === 'open' ? growVerIn : growVerOut;\n\n const [_, event] = await Promise.all([\n this.animationPlayer.stopAll(),\n this.animationPlayer.play(animation),\n ]);\n\n return event.type === 'finish';\n }\n\n /\n @private\n * Opens the panel.\n /\n private async openWithEvent() {\n if (this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcOpening', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = true;\n\n if (await this.toggleAnimation('open')) {\n this.emitEvent('igcOpened', { detail: this });\n }\n }\n\n /\n @private\n * Closes the panel.\n /\n private async closeWithEvent() {\n if (!this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcClosing', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = false;\n\n if (await this.toggleAnimation('close')) {\n this.emitEvent('igcClosed', { detail: this });\n }\n }\n\n /* Toggles panel open state. /\n public toggle(): void {\n this.open ? this.hide() : this.show();\n }\n\n /* Hides the panel content. /\n public hide(): void {\n if (this.open) {\n this.toggleAnimation('close');\n }\n\n this.open = false;\n }\n\n /* Shows the panel content. */\n public show(): void {\n if (!this.open) {\n this.toggleAnimation('open');\n }\n\n this.open = true;\n }\n\n private indicatorTemplate() {\n return html`\n <div part=\"indicator\" aria-hidden=\"true\">\n <slot name=\"indicator\">\n <igc-icon\n name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n collection=\"internal\"\n >\n </igc-icon>\n </slot>\n </div>\n `;\n }\n\n private headerTemplate() {\n return html`\n <div\n part=\"header\"\n id=\"${this.panelId!}-header\"\n role=\"button\"\n aria-expanded=\"${this.open}\"\n aria-disabled=\"${this.disabled}\"\n aria-controls=\"${this.panelId!}-content\"\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClicked}\n @keydown=${this.handleKeydown}\n >\n ${this.indicatorTemplate()}\n <div>\n <slot name=\"title\" part=\"title\"></slot>\n <slot name=\"subtitle\" part=\"subtitle\"></slot>\n </div>\n </div>\n `;\n }\n\n private contentTemplate() {\n return html`\n <div\n part=\"content\"\n role=\"region\"\n id=\"${this.panelId!}-content\"\n aria-labelledby=\"${this.panelId!}-header\"\n aria-hidden=${!this.open}\n >\n <slot></slot>\n </div>\n `;\n }\n\n protected override render() {\n return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-expansion-panel': IgcExpansionPanelComponent;\n }\n}\n"]}

package/components/expansion-panel/themes/light/expansion-panel.base.css.js CHANGED Viewed

@@ -1,5 +1,38 @@
 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 */
+export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--ig-scrollbar-thumb-background);
+}
+[hidden] {
+  display: none !important;
+}
+/* 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 {
   --lines-clamped: 1;
   color: hsla(var(--ig-gray-900), var(--ig-gray-a));
@@ -87,7 +120,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   overflow: hidden;
 }
-:host([open]) [part~=content] {
+[part=content] ::slotted(*) {
   font-family: var(--ig-body-2-font-family);
   font-size: var(--ig-body-2-font-size);
   font-weight: var(--ig-body-2-font-weight);
@@ -97,11 +130,25 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   text-transform: var(--ig-body-2-text-transform);
   margin-top: var(--ig-body-2-margin-top);
   margin-bottom: var(--ig-body-2-margin-bottom);
+}
+[part~=content] {
   overflow: hidden;
+}
+[part~=content] > slot {
+  display: block;
   padding-inline: max(var(--is-large, 1) * 24px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 24px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 24px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
   padding-block: max(var(--is-large, 1) * 16px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
 }
+:host(:not([open])) [part~=content] {
+  height: 0;
+}
+:host([open]) [part~=content] {
+  height: auto;
+}
 [part~=indicator] {
   color: hsla(var(--ig-gray-800), var(--ig-gray-a));
 }

package/components/expansion-panel/themes/light/expansion-panel.base.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expansion-panel.base.css.js","sourceRoot":"","sources":["../../../../../src/components/expansion-panel/themes/light/expansion-panel.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuIvB~~,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 {\n --lines-clamped: 1;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n width: auto;\n overflow: hidden;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=header] {\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 cursor: pointer;\n padding-inline: max(var(--is-large, 1) 24px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 24px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 24px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 16px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n[part=header]:focus, [part=header]:active {\n outline: transparent;\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n[part=header] :not([part~=indicator]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-flex: 1;\n -ms-flex: 1 0 0%;\n flex: 1 0 0%;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=title]::slotted() {\n font-family: var(--ig-h5-font-family);\n font-size: var(--ig-h5-font-size);\n font-weight: var(--ig-h5-font-weight);\n font-style: var(--ig-h5-font-style);\n line-height: var(--ig-h5-line-height);\n letter-spacing: var(--ig-h5-letter-spacing);\n text-transform: var(--ig-h5-text-transform);\n margin-top: var(--ig-h5-margin-top);\n margin-bottom: var(--ig-h5-margin-bottom);\n display: -webkit-inline-box;\n -webkit-line-clamp: var(--lines-clamped);\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n}\n\n[part=subtitle] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part=subtitle]::slotted() {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n white-space: nowrap;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n~~:host(~~[~~open]) [~~part~=content] {\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 overflow: hidden;\n padding-inline: max(var(--is-large, 1) 24px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 24px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 24px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 16px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n[part~=indicator] {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n[part~=indicator] igc-icon {\n --size: 1.5rem;\n}\n\n:host([indicator-position=start]) [part~=indicator] {\n -webkit-margin-end: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n margin-inline-end: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([indicator-position=end]) [part~=indicator] {\n -webkit-box-ordinal-group: 3;\n -ms-flex-order: 2;\n order: 2;\n -webkit-margin-start: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n margin-inline-start: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([indicator-position=none]) [part~=indicator] {\n display: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part=title],\n:host([disabled]) [part=subtitle],\n:host([disabled]) [part~=indicator] {\n color: var(--disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}`;\n"]}
1	+ {"version":3,"file":"expansion-panel.base.css.js","sourceRoot":"","sources":["../../../../../src/components/expansion-panel/themes/light/expansion-panel.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsLvB,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:host {\n --lines-clamped: 1;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n width: auto;\n overflow: hidden;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=header] {\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 cursor: pointer;\n padding-inline: max(var(--is-large, 1) 24px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 24px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 24px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 16px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n[part=header]:focus, [part=header]:active {\n outline: transparent;\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n[part=header] :not([part~=indicator]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-flex: 1;\n -ms-flex: 1 0 0%;\n flex: 1 0 0%;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=title]::slotted() {\n font-family: var(--ig-h5-font-family);\n font-size: var(--ig-h5-font-size);\n font-weight: var(--ig-h5-font-weight);\n font-style: var(--ig-h5-font-style);\n line-height: var(--ig-h5-line-height);\n letter-spacing: var(--ig-h5-letter-spacing);\n text-transform: var(--ig-h5-text-transform);\n margin-top: var(--ig-h5-margin-top);\n margin-bottom: var(--ig-h5-margin-bottom);\n display: -webkit-inline-box;\n -webkit-line-clamp: var(--lines-clamped);\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n}\n\n[part=subtitle] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part=subtitle]::slotted() {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n white-space: nowrap;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n[part=content] ::slotted() {\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}\n\n[part~=content] {\n overflow: hidden;\n}\n[part~=content] > slot {\n display: block;\n padding-inline: max(var(--is-large, 1) * 24px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 24px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 24px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 16px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([open])) [part~=content] {\n height: 0;\n}\n\n:host([open]) [part~=content] {\n height: auto;\n}\n\n[part~=indicator] {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n[part~=indicator] igc-icon {\n --size: 1.5rem;\n}\n\n:host([indicator-position=start]) [part~=indicator] {\n -webkit-margin-end: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n margin-inline-end: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([indicator-position=end]) [part~=indicator] {\n -webkit-box-ordinal-group: 3;\n -ms-flex-order: 2;\n order: 2;\n -webkit-margin-start: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n margin-inline-start: max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 16px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([indicator-position=none]) [part~=indicator] {\n display: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part=title],\n:host([disabled]) [part=subtitle],\n:host([disabled]) [part~=indicator] {\n color: var(--disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}`;\n"]}

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.bootstrap.css.js CHANGED Viewed

@@ -169,11 +169,28 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 }
 :host([disabled]) [part~=input],
 :host([readonly]) [part~=input] {
-  border-block-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
-  border-inline-color: transparent;
+  border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]::-webkit-input-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]::-moz-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]:-ms-input-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]::-ms-input-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
-:host([disabled]) [part=helper-text] {
+:host([disabled]) [part=label],
+:host([disabled]) [part=helper-text],
+:host([disabled]) [part~=input]::placeholder {
   color: hsla(var(--ig-gray-400), var(--ig-gray-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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6MvB,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-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host([disabled]) [part~=input]::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) [part~=input]::-moz-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) [part~=input]:-ms-input-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) [part~=input]::-ms-input-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=label],\n:host([disabled]) [part=helper-text],\n:host([disabled]) [part~=input]::placeholder {\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

@@ -43,7 +43,6 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   grid-area: 1/3;
 }
 :host [part=label] {
-  margin-bottom: 0.5rem;
   font-size: 0.875rem;
   font-weight: 600;
   color: hsla(var(--ig-gray-900), var(--ig-gray-a));
@@ -78,8 +77,8 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 }
 :host [part=helper-text] {
   padding: 0;
-  margin-top: 0.5rem;
-  color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  margin-top: 0.3125rem;
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
 }
 :host(:not([invalid]):hover) [part^=container] {
@@ -136,10 +135,25 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host([disabled]) [part=suffix] {
   background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
+:host([disabled]) [part~=input]::-webkit-input-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]::-moz-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]:-ms-input-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) [part~=input]::-ms-input-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
 :host([disabled]) [part=prefix],
 :host([disabled]) [part=suffix],
 :host([disabled]) [part=label],
-:host([disabled]) [part=helper-text] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+:host([disabled]) [part=label]::after,
+:host([disabled]) [part=helper-text],
+:host([disabled]) [part~=input],
+:host([disabled]) [part~=input]::placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }`;
 //# sourceMappingURL=input.fluent.css.js.map

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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4JvB,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 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.3125rem;\n color: hsla(var(--ig-gray-700), 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~=input]::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]::-moz-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]:-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]::-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=label],\n:host([disabled]) [part=label]::after,\n:host([disabled]) [part=helper-text],\n:host([disabled]) [part~=input],\n:host([disabled]) [part~=input]::placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}`;\n"]}