igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

package/components/combo/themes/light/combo.material.css.js

@@ -77,8 +77,8 @@ export const styles = css `:host {
   --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
   --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --box-border-radius: var(--ig-input-box-border-radius, 0.25rem, 0rem, 1.25rem);
-  --border-border-radius: var(--ig-input-border-border-radius, 0.25rem, 0rem, 1.25rem);
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
   --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 0rem, 1.25rem);
   --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));
   --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));
@@ -100,27 +100,27 @@ export const styles = css `:host {
   --clear-button-foreground-focus: var(--ig-combo-clear-button-foreground-focus, var(--ig-gray-100-contrast));
   --toggle-button-background-disabled: var(--ig-combo-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));
   --toggle-button-foreground-disabled: var(--ig-combo-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));
-  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
-  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));
-  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));
-  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
-  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));
-  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
-  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
-  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
-  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));
-  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
-  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
-  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --border-width: var(--ig-dropdown-border-width, 0);
-  --border-radius: var(--ig-dropdown-border-radius, 0.25rem, 0rem, 1.25rem);
-  --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
-  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-8));
+  --background-color: var(--ig-drop-down-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-drop-down-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-secondary-100-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-secondary-200-contrast));
+  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-drop-down-border-width, 0);
+  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
 }
 :host [part=helper-text] {
   margin-top: 0.3125rem;
@@ -156,6 +156,9 @@ export const styles = css `:host {
   background: transparent;
 }
 
+[part=list-wrapper] {
+  border-radius: var(--border-radius);
+}
 [part=list-wrapper] igc-input::part(container) {
   background: transparent;
   border-inline-end-color: transparent;
@@ -268,5 +271,11 @@ export const styles = css `:host {
 :host(:disabled) [part~=toggle-icon] igc-icon,
 :host([disabled]) [part~=toggle-icon] igc-icon {
   color: inherit;
+}
+
+:host(:disabled[outlined]) igc-input::part(filled) + igc-input::part(notch),
+:host([outlined][disabled]) igc-input::part(filled) + igc-input::part(notch),
+:host([outlined][invalid]) igc-input::part(filled) + igc-input::part(notch) {
+  border-top-color: transparent;
 }`;
 //# sourceMappingURL=combo.material.css.js.map

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6QvB,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: 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:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));\n  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-2));\n  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));\n  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);\n  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);\n  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);\n  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);\n  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);\n  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);\n  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));\n  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --border-background: var(--ig-input-border-background, transparent);\n  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);\n  --search-background: var(--ig-input-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --box-border-radius: var(--ig-input-box-border-radius, 0.25rem, 0rem, 1.25rem);\n  --border-border-radius: var(--ig-input-border-border-radius, 0.25rem, 0rem, 1.25rem);\n  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 0rem, 1.25rem);\n  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));\n  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));\n  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n  --toggle-button-background-focus--border: var(--ig-combo-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --case-icon-color: var(--ig-combo-case-icon-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --case-icon-color--active: var(--ig-combo-case-icon-color--active, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --empty-list-background: var(--ig-combo-empty-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --search-separator-border-color: var(--ig-combo-search-separator-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --empty-list-placeholder-color: var(--ig-combo-empty-list-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-background: var(--ig-combo-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --toggle-button-background-focus: var(--ig-combo-toggle-button-background-focus, hsla(var(--ig-gray-400), 0.3));\n  --toggle-button-foreground: var(--ig-combo-toggle-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-foreground-focus: var(--ig-combo-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-foreground-filled: var(--ig-combo-toggle-button-foreground-filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --clear-button-background: var(--ig-combo-clear-button-background, transparent);\n  --clear-button-background-focus: var(--ig-combo-clear-button-background-focus, transparent);\n  --clear-button-foreground: var(--ig-combo-clear-button-foreground, var(--ig-gray-100-contrast));\n  --clear-button-foreground-focus: var(--ig-combo-clear-button-foreground-focus, var(--ig-gray-100-contrast));\n  --toggle-button-background-disabled: var(--ig-combo-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --toggle-button-foreground-disabled: var(--ig-combo-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, 0.25rem, 0rem, 1.25rem);\n  --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host [part=helper-text] {\n  margin-top: 0.3125rem;\n  padding-inline: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n:host ::slotted([slot=helper-text]) {\n  font-family: var(--ig-caption-font-family, var(--ig-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: var(--helper-text-color);\n  line-height: 1;\n}\n:host ::slotted([slot=prefix]),\n:host ::slotted([slot=suffix]) {\n  color: inherit;\n}\n\n[part=empty] {\n  color: var(--empty-list-placeholder-color);\n}\n\n:host(:not([single-select])) > igc-input::part(input)::-moz-selection {\n  background: transparent;\n}\n\n:host(:not([single-select])) > igc-input::part(input)::selection {\n  background: transparent;\n}\n\n[part=list-wrapper] igc-input::part(container) {\n  background: transparent;\n  border-inline-end-color: transparent;\n}\n[part=list-wrapper] igc-input::part(input) {\n  border-inline-end-color: transparent;\n}\n[part=list-wrapper] igc-input::part(input)::-moz-selection {\n  background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] igc-input::part(input)::selection {\n  background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] [part=case-icon] {\n  color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n[part=list-wrapper] [part=\"case-icon active\"] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part~=toggle-icon] {\n  background: var(--toggle-button-background);\n  color: var(--toggle-button-foreground);\n}\n[part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n\n[part=\"toggle-icon filled\"] {\n  color: var(--toggle-button-foreground-filled);\n}\n\n[part~=clear-icon] {\n  background: var(--clear-button-background);\n  color: var(--clear-button-foreground);\n}\n[part~=clear-icon] igc-icon {\n  color: inherit;\n}\n\n:host(:focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus);\n  color: var(--toggle-button-foreground-focus);\n}\n:host(:focus-within) [part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n:host(:focus-within) [part~=clear-icon] {\n  background: var(--clear-button-background-focus);\n  color: var(--clear-button-foreground-focus);\n}\n:host(:focus-within) [part~=clear-icon] igc-icon {\n  color: inherit;\n}\n\n:host(:not([outlined]):focus-within) > igc-input::part(container) {\n  background: var(--box-background-focus);\n}\n\n:host([outlined]:focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus--border);\n}\n\n:host([invalid]) ::slotted([slot=helper-text]) {\n  color: var(--error-secondary-color);\n}\n\n:host(:disabled) igc-input::part(input)::-webkit-input-placeholder, :host([disabled]) igc-input::part(input)::-webkit-input-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) igc-input::part(input)::-moz-placeholder, :host([disabled]) igc-input::part(input)::-moz-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) igc-input::part(input):-ms-input-placeholder, :host([disabled]) igc-input::part(input):-ms-input-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) igc-input::part(input)::-ms-input-placeholder, :host([disabled]) igc-input::part(input)::-ms-input-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) ::slotted([slot=prefix]),\n:host(:disabled) ::slotted([slot=suffix]),\n:host(:disabled) igc-input::part(label),\n:host(:disabled) igc-input::part(input)::placeholder,\n:host(:disabled) ::slotted([slot=helper-text]),\n:host([disabled]) ::slotted([slot=prefix]),\n:host([disabled]) ::slotted([slot=suffix]),\n:host([disabled]) igc-input::part(label),\n:host([disabled]) igc-input::part(input)::placeholder,\n:host([disabled]) ::slotted([slot=helper-text]) {\n  color: var(--disabled-text-color);\n}\n:host(:disabled) [part~=clear-icon],\n:host([disabled]) [part~=clear-icon] {\n  background: inherit;\n  color: var(--disabled-text-color);\n}\n:host(:disabled) [part~=clear-icon] igc-icon,\n:host([disabled]) [part~=clear-icon] igc-icon {\n  color: inherit;\n}\n:host(:disabled) [part~=toggle-icon],\n:host([disabled]) [part~=toggle-icon] {\n  background: var(--toggle-button-background-disabled);\n  color: var(--toggle-button-foreground-disabled);\n}\n:host(:disabled) [part~=toggle-icon] igc-icon,\n:host([disabled]) [part~=toggle-icon] igc-icon {\n  color: inherit;\n}`;\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsRvB,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: 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:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));\n  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-2));\n  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));\n  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);\n  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);\n  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);\n  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);\n  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);\n  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);\n  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));\n  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --border-background: var(--ig-input-border-background, transparent);\n  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);\n  --search-background: var(--ig-input-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 0rem, 1.25rem);\n  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));\n  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));\n  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n  --toggle-button-background-focus--border: var(--ig-combo-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --case-icon-color: var(--ig-combo-case-icon-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --case-icon-color--active: var(--ig-combo-case-icon-color--active, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --empty-list-background: var(--ig-combo-empty-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --search-separator-border-color: var(--ig-combo-search-separator-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --empty-list-placeholder-color: var(--ig-combo-empty-list-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-background: var(--ig-combo-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --toggle-button-background-focus: var(--ig-combo-toggle-button-background-focus, hsla(var(--ig-gray-400), 0.3));\n  --toggle-button-foreground: var(--ig-combo-toggle-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-foreground-focus: var(--ig-combo-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-foreground-filled: var(--ig-combo-toggle-button-foreground-filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --clear-button-background: var(--ig-combo-clear-button-background, transparent);\n  --clear-button-background-focus: var(--ig-combo-clear-button-background-focus, transparent);\n  --clear-button-foreground: var(--ig-combo-clear-button-foreground, var(--ig-gray-100-contrast));\n  --clear-button-foreground-focus: var(--ig-combo-clear-button-foreground-focus, var(--ig-gray-100-contrast));\n  --toggle-button-background-disabled: var(--ig-combo-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --toggle-button-foreground-disabled: var(--ig-combo-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-8));\n  --background-color: var(--ig-drop-down-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-drop-down-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-secondary-100-contrast));\n  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-drop-down-border-width, 0);\n  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host [part=helper-text] {\n  margin-top: 0.3125rem;\n  padding-inline: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n:host ::slotted([slot=helper-text]) {\n  font-family: var(--ig-caption-font-family, var(--ig-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: var(--helper-text-color);\n  line-height: 1;\n}\n:host ::slotted([slot=prefix]),\n:host ::slotted([slot=suffix]) {\n  color: inherit;\n}\n\n[part=empty] {\n  color: var(--empty-list-placeholder-color);\n}\n\n:host(:not([single-select])) > igc-input::part(input)::-moz-selection {\n  background: transparent;\n}\n\n:host(:not([single-select])) > igc-input::part(input)::selection {\n  background: transparent;\n}\n\n[part=list-wrapper] {\n  border-radius: var(--border-radius);\n}\n[part=list-wrapper] igc-input::part(container) {\n  background: transparent;\n  border-inline-end-color: transparent;\n}\n[part=list-wrapper] igc-input::part(input) {\n  border-inline-end-color: transparent;\n}\n[part=list-wrapper] igc-input::part(input)::-moz-selection {\n  background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] igc-input::part(input)::selection {\n  background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] [part=case-icon] {\n  color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n[part=list-wrapper] [part=\"case-icon active\"] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part~=toggle-icon] {\n  background: var(--toggle-button-background);\n  color: var(--toggle-button-foreground);\n}\n[part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n\n[part=\"toggle-icon filled\"] {\n  color: var(--toggle-button-foreground-filled);\n}\n\n[part~=clear-icon] {\n  background: var(--clear-button-background);\n  color: var(--clear-button-foreground);\n}\n[part~=clear-icon] igc-icon {\n  color: inherit;\n}\n\n:host(:focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus);\n  color: var(--toggle-button-foreground-focus);\n}\n:host(:focus-within) [part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n:host(:focus-within) [part~=clear-icon] {\n  background: var(--clear-button-background-focus);\n  color: var(--clear-button-foreground-focus);\n}\n:host(:focus-within) [part~=clear-icon] igc-icon {\n  color: inherit;\n}\n\n:host(:not([outlined]):focus-within) > igc-input::part(container) {\n  background: var(--box-background-focus);\n}\n\n:host([outlined]:focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus--border);\n}\n\n:host([invalid]) ::slotted([slot=helper-text]) {\n  color: var(--error-secondary-color);\n}\n\n:host(:disabled) igc-input::part(input)::-webkit-input-placeholder, :host([disabled]) igc-input::part(input)::-webkit-input-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) igc-input::part(input)::-moz-placeholder, :host([disabled]) igc-input::part(input)::-moz-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) igc-input::part(input):-ms-input-placeholder, :host([disabled]) igc-input::part(input):-ms-input-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) igc-input::part(input)::-ms-input-placeholder, :host([disabled]) igc-input::part(input)::-ms-input-placeholder {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled) ::slotted([slot=prefix]),\n:host(:disabled) ::slotted([slot=suffix]),\n:host(:disabled) igc-input::part(label),\n:host(:disabled) igc-input::part(input)::placeholder,\n:host(:disabled) ::slotted([slot=helper-text]),\n:host([disabled]) ::slotted([slot=prefix]),\n:host([disabled]) ::slotted([slot=suffix]),\n:host([disabled]) igc-input::part(label),\n:host([disabled]) igc-input::part(input)::placeholder,\n:host([disabled]) ::slotted([slot=helper-text]) {\n  color: var(--disabled-text-color);\n}\n:host(:disabled) [part~=clear-icon],\n:host([disabled]) [part~=clear-icon] {\n  background: inherit;\n  color: var(--disabled-text-color);\n}\n:host(:disabled) [part~=clear-icon] igc-icon,\n:host([disabled]) [part~=clear-icon] igc-icon {\n  color: inherit;\n}\n:host(:disabled) [part~=toggle-icon],\n:host([disabled]) [part~=toggle-icon] {\n  background: var(--toggle-button-background-disabled);\n  color: var(--toggle-button-foreground-disabled);\n}\n:host(:disabled) [part~=toggle-icon] igc-icon,\n:host([disabled]) [part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n\n:host(:disabled[outlined]) igc-input::part(filled) + igc-input::part(notch),\n:host([outlined][disabled]) igc-input::part(filled) + igc-input::part(notch),\n:host([outlined][invalid]) igc-input::part(filled) + igc-input::part(notch) {\n  border-top-color: transparent;\n}`;\n"]}

package/components/combo/themes/light/item/combo-item.base.css.js

@@ -106,7 +106,6 @@ export const styles = css `:host {
 :host {
   --component-size: var(--ig-size, var(--ig-size-medium));
   gap: 0.5rem;
-  border-radius: 0 !important;
 }
 
 igc-checkbox {

package/components/combo/themes/light/item/combo-item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/combo/themes/light/item/combo-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgHvB,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: 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:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  font-family: var(--ig-body-2-font-family, var(--ig-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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: 100%;\n  white-space: nowrap;\n  position: relative;\n  cursor: pointer;\n  outline-style: none;\n  padding-inline: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host([disabled]) {\n  cursor: default;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  font: inherit;\n}\n\n[part=content] {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  width: 100%;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=prefix],\n[part=suffix] {\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  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[name=prefix]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n  gap: 0.5rem;\n  border-radius: 0 !important;\n}\n\nigc-checkbox {\n  pointer-events: none;\n}`;\n"]}
+{"version":3,"file":"combo-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/combo/themes/light/item/combo-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GvB,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: 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:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  font-family: var(--ig-body-2-font-family, var(--ig-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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: 100%;\n  white-space: nowrap;\n  position: relative;\n  cursor: pointer;\n  outline-style: none;\n  padding-inline: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host([disabled]) {\n  cursor: default;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  font: inherit;\n}\n\n[part=content] {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  width: 100%;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=prefix],\n[part=suffix] {\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  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[name=prefix]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n  gap: 0.5rem;\n}\n\nigc-checkbox {\n  pointer-events: none;\n}`;\n"]}

package/components/common/localization/validation-en.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    readonly minLength: "Entry should be at least {0} character(s) long";
+    readonly maxLength: "Entry should be no more than {0} character(s) long";
+    readonly required: "This field is required";
+    readonly pattern: "Entry does not match the required pattern";
+    readonly mask: "All required positions should be filled";
+    readonly min: "A value of at least {0} should be entered";
+    readonly max: "A value no more than {0} should be entered";
+};
+export default _default;

package/components/common/localization/validation-en.js

@@ -0,0 +1,10 @@
+export default {
+    minLength: 'Entry should be at least {0} character(s) long',
+    maxLength: 'Entry should be no more than {0} character(s) long',
+    required: 'This field is required',
+    pattern: 'Entry does not match the required pattern',
+    mask: 'All required positions should be filled',
+    min: 'A value of at least {0} should be entered',
+    max: 'A value no more than {0} should be entered',
+};
+//# sourceMappingURL=validation-en.js.map

package/components/common/localization/validation-en.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-en.js","sourceRoot":"","sources":["../../../../src/components/common/localization/validation-en.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,SAAS,EAAE,gDAAgD;IAC3D,SAAS,EAAE,oDAAoD;IAC/D,QAAQ,EAAE,wBAAwB;IAClC,OAAO,EAAE,2CAA2C;IACpD,IAAI,EAAE,yCAAyC;IAC/C,GAAG,EAAE,2CAA2C;IAChD,GAAG,EAAE,4CAA4C;CACzC,CAAC","sourcesContent":["export default {\n  minLength: 'Entry should be at least {0} character(s) long',\n  maxLength: 'Entry should be no more than {0} character(s) long',\n  required: 'This field is required',\n  pattern: 'Entry does not match the required pattern',\n  mask: 'All required positions should be filled',\n  min: 'A value of at least {0} should be entered',\n  max: 'A value no more than {0} should be entered',\n} as const;\n"]}

package/components/common/mixins/form-associated-required.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './constructor.js';
+import { FormAssociatedElementInterface } from './form-associated.js';
+export declare class FormRequiredInterface {
+    protected requiredChange(): void;
+    /**
+     * Makes the control a required field in a form context.
+     * @attr
+     */
+    required: boolean;
+}
+/**
+ * Turns the passed class element into a Form Associated Custom Element with
+ * additional `required` attribute.
+ */
+export declare function FormAssociatedRequiredMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FormRequiredInterface & FormAssociatedElementInterface> & T;

package/components/common/mixins/form-associated-required.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { watch } from '../decorators/watch.js';
+import { FormAssociatedMixin, } from './form-associated.js';
+export function FormAssociatedRequiredMixin(superClass) {
+    class FormAssociatedRequiredElement extends FormAssociatedMixin(superClass) {
+        constructor() {
+            super(...arguments);
+            this.required = false;
+        }
+        requiredChange() {
+            this.updateValidity();
+            this.invalid = !this.checkValidity();
+        }
+    }
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormAssociatedRequiredElement.prototype, "required", void 0);
+    __decorate([
+        watch('required', { waitUntilFirstUpdate: true })
+    ], FormAssociatedRequiredElement.prototype, "requiredChange", null);
+    return FormAssociatedRequiredElement;
+}
+//# sourceMappingURL=form-associated-required.js.map

package/components/common/mixins/form-associated-required.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-required.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated-required.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAgB9B,MAAM,UAAU,2BAA2B,CACzC,UAAa;IAEb,MAAM,6BAA8B,SAAQ,mBAAmB,CAAC,UAAU,CAAC;QAA3E;;YAMS,aAAQ,GAAG,KAAK,CAAC;QAO1B,CAAC;QAJW,cAAc;YACtB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvC,CAAC;KACF;IAPQ;QADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mEACnB;IAGd;QADT,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;uEAIjD;IAGH,OAAO,6BAGJ,CAAC;AACN,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../decorators/watch.js';\nimport type { Constructor } from './constructor.js';\nimport {\n  FormAssociatedElementInterface,\n  FormAssociatedMixin,\n} from './form-associated.js';\n\nexport declare class FormRequiredInterface {\n  protected requiredChange(): void;\n\n  /**\n   * Makes the control a required field in a form context.\n   * @attr\n   */\n  public required: boolean;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element with\n * additional `required` attribute.\n */\nexport function FormAssociatedRequiredMixin<T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class FormAssociatedRequiredElement extends FormAssociatedMixin(superClass) {\n    /**\n     * Makes the control a required field in a form context.\n     * @attr\n     */\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    @watch('required', { waitUntilFirstUpdate: true })\n    protected requiredChange() {\n      this.updateValidity();\n      this.invalid = !this.checkValidity();\n    }\n  }\n\n  return FormAssociatedRequiredElement as unknown as Constructor<\n    FormRequiredInterface & FormAssociatedElementInterface\n  > &\n    T;\n}\n"]}

package/components/common/mixins/form-associated.d.ts

@@ -0,0 +1,92 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './constructor';
+import type { Validator } from '../validators.js';
+export declare class FormAssociatedElementInterface {
+    #private;
+    static readonly formAssociated: boolean;
+    protected validators: Validator[];
+    protected _disabled: boolean;
+    protected _invalid: boolean;
+    protected _dirty: boolean;
+    /**
+     * The default value of the control at "creation" time.
+     *
+     * @remarks
+     * This is set by default on `connectedCallback` through the `setDefaultValue` call.
+     * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the
+     * respective property.
+     *
+     * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.
+     */
+    protected _defaultValue: unknown;
+    /**
+     * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles
+     * if the element has completed the first update cycle or it has been interacted with by the user.
+     *
+     * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}
+     */
+    protected setInvalidState(): void;
+    /**
+     * Executes the component validators and updates the internal validity state.
+     */
+    protected updateValidity(message?: string): void;
+    /**
+     * Saves the initial value/checked state of the control.
+     *
+     * Called on connectedCallback.
+     */
+    protected setDefaultValue(): void;
+    /**
+     * Called when the parent form is reset.
+     *
+     * Restores the initially bound value/checked state of the control.
+     */
+    protected restoreDefaultValue(): void;
+    protected setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    protected setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined, anchor?: HTMLElement | undefined): void;
+    protected formResetCallback(): void;
+    protected formDisabledCallback(state: boolean): void;
+    protected formStateRestoreCallback(state: string | FormData | File, mode: 'autocomplete' | 'restore'): void;
+    /**
+     * The disabled state of the component
+     * @attr [disabled=false]
+     */
+    disabled: boolean;
+    /**
+     * Control the validity of the control.
+     * @attr
+     */
+    invalid: boolean;
+    /**
+     * The name attribute of the control.
+     * @attr
+     */
+    name: string;
+    /** Returns the HTMLFormElement associated with this element. */
+    get form(): HTMLFormElement | null;
+    /**
+     * Returns a ValidityState object which represents the different validity states
+     * the element can be in, with respect to constraint validation.
+     */
+    get validity(): ValidityState;
+    /** A string containing the validation message of this element. */
+    get validationMessage(): string;
+    /**
+     * A boolean value which returns true if the element is a submittable element
+     * that is a candidate for constraint validation.
+     */
+    get willValidate(): boolean;
+    /** Checks for validity of the control and emits the invalid event if it invalid. */
+    checkValidity(): boolean;
+    /** Checks for validity of the control and shows the browser message if it invalid. */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validation message for the control.
+     * As long as `message` is not empty, the control is considered invalid.
+     */
+    setCustomValidity(message: string): void;
+}
+/**
+ * Turns the passed class element into a Form Associated Custom Element.
+ */
+export declare function FormAssociatedMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FormAssociatedElementInterface> & T;

package/components/common/mixins/form-associated.js

@@ -0,0 +1,151 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+import { property } from 'lit/decorators.js';
+export function FormAssociatedMixin(superClass) {
+    var _FormAssociatedElement_internals;
+    class FormAssociatedElement extends superClass {
+        get form() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").form;
+        }
+        get validity() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").validity;
+        }
+        get validationMessage() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").validationMessage;
+        }
+        get willValidate() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").willValidate;
+        }
+        get disabled() {
+            return this._disabled;
+        }
+        set disabled(value) {
+            const prev = this._disabled;
+            this._disabled = value;
+            this.toggleAttribute('disabled', Boolean(this._disabled));
+            this.requestUpdate('disabled', prev);
+        }
+        get invalid() {
+            return this._invalid;
+        }
+        set invalid(value) {
+            const prev = this._invalid;
+            this._invalid = value;
+            this.toggleAttribute('invalid', Boolean(this._invalid));
+            this.requestUpdate('invalid', prev);
+        }
+        constructor(...args) {
+            super(args);
+            _FormAssociatedElement_internals.set(this, void 0);
+            this.validators = [];
+            this._disabled = false;
+            this._invalid = false;
+            this._dirty = false;
+            this.handleInvalid = (event) => {
+                event.preventDefault();
+                this.invalid = true;
+            };
+            __classPrivateFieldSet(this, _FormAssociatedElement_internals, this.attachInternals(), "f");
+            this.addEventListener('invalid', this.handleInvalid);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this._dirty = false;
+            this.setDefaultValue();
+        }
+        setDefaultValue() {
+            if ('checked' in this) {
+                this._defaultValue = this.checked;
+            }
+            else if ('value' in this) {
+                this._defaultValue = this.value;
+            }
+        }
+        restoreDefaultValue() {
+            if ('checked' in this) {
+                this.checked = this._defaultValue;
+            }
+            else if ('value' in this) {
+                this.value = this._defaultValue;
+            }
+        }
+        setFormValue(value, state) {
+            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setFormValue(value, state || value);
+        }
+        setValidity(flags, message, anchor) {
+            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setValidity(flags, message, anchor);
+        }
+        formResetCallback() {
+            this.restoreDefaultValue();
+            this._dirty = false;
+            this.performUpdate();
+            this.invalid = false;
+        }
+        formDisabledCallback(state) {
+            this._disabled = state;
+            this.requestUpdate();
+        }
+        updateValidity(message) {
+            const validity = {};
+            let validationMessage = '';
+            for (const validator of this.validators) {
+                const isValid = validator.isValid(this);
+                validity[validator.key] = !isValid;
+                if (!isValid) {
+                    validationMessage =
+                        typeof validator.message === 'function'
+                            ? validator.message(this)
+                            : validator.message;
+                }
+            }
+            if (message) {
+                validity.customError = true;
+                validationMessage = message;
+            }
+            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setValidity(validity, validationMessage);
+        }
+        setInvalidState() {
+            if (this.hasUpdated || this._dirty) {
+                this.invalid = !this.checkValidity();
+            }
+        }
+        reportValidity() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").reportValidity();
+        }
+        checkValidity() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").checkValidity();
+        }
+        setCustomValidity(message) {
+            this.updateValidity(message);
+            this.invalid = !this.checkValidity();
+        }
+    }
+    _FormAssociatedElement_internals = new WeakMap();
+    FormAssociatedElement.formAssociated = true;
+    __decorate([
+        property({ reflect: true })
+    ], FormAssociatedElement.prototype, "name", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormAssociatedElement.prototype, "disabled", null);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormAssociatedElement.prototype, "invalid", null);
+    return FormAssociatedElement;
+}
+//# sourceMappingURL=form-associated.js.map

package/components/common/mixins/form-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Constructor } from './constructor';\nimport type { Validator } from '../validators.js';\n\nexport declare class FormAssociatedElementInterface {\n  public static readonly formAssociated: boolean;\n\n  #internals: ElementInternals;\n  protected validators: Validator[];\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n  protected _dirty: boolean;\n\n  /**\n   * The default value of the control at \"creation\" time.\n   *\n   * @remarks\n   * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n   * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n   * respective property.\n   *\n   * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n   */\n  protected _defaultValue: unknown;\n\n  /**\n   * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n   * if the element has completed the first update cycle or it has been interacted with by the user.\n   *\n   * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n   */\n  protected setInvalidState(): void;\n\n  /**\n   * Executes the component validators and updates the internal validity state.\n   */\n  protected updateValidity(message?: string): void;\n\n  /**\n   * Saves the initial value/checked state of the control.\n   *\n   * Called on connectedCallback.\n   */\n  protected setDefaultValue(): void;\n\n  /**\n   * Called when the parent form is reset.\n   *\n   * Restores the initially bound value/checked state of the control.\n   */\n  protected restoreDefaultValue(): void;\n\n  protected setFormValue(\n    value: string | File | FormData | null,\n    state?: string | File | FormData | null | undefined\n  ): void;\n  protected setValidity(\n    flags?: ValidityStateFlags | undefined,\n    message?: string | undefined,\n    anchor?: HTMLElement | undefined\n  ): void;\n\n  protected formResetCallback(): void;\n  protected formDisabledCallback(state: boolean): void;\n  protected formStateRestoreCallback(\n    state: string | FormData | File,\n    mode: 'autocomplete' | 'restore'\n  ): void;\n\n  /**\n   * The disabled state of the component\n   * @attr [disabled=false]\n   */\n  public disabled: boolean;\n\n  /**\n   * Control the validity of the control.\n   * @attr\n   */\n  public invalid: boolean;\n\n  /**\n   * The name attribute of the control.\n   * @attr\n   */\n  public name: string;\n\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null;\n\n  /**\n   * Returns a ValidityState object which represents the different validity states\n   * the element can be in, with respect to constraint validation.\n   */\n  public get validity(): ValidityState;\n\n  /** A string containing the validation message of this element. */\n  public get validationMessage(): string;\n\n  /**\n   * A boolean value which returns true if the element is a submittable element\n   * that is a candidate for constraint validation.\n   */\n  public get willValidate(): boolean;\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity(): boolean;\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string): void;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class FormAssociatedElement extends superClass {\n    public static readonly formAssociated = true;\n\n    #internals: ElementInternals;\n    protected validators: Validator[] = [];\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _dirty = false;\n\n    /**\n     * The default value of the control at \"creation\" time.\n     *\n     * @remarks\n     * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n     * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n     * respective property.\n     *\n     * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n     */\n    protected _defaultValue: unknown;\n\n    /**\n     * The name attribute of the control.\n     * @attr\n     */\n    @property({ reflect: true })\n    public name!: string;\n\n    /** Returns the HTMLFormElement associated with this element. */\n    public get form() {\n      return this.#internals.form;\n    }\n\n    /**\n     * Returns a ValidityState object which represents the different validity states\n     * the element can be in, with respect to constraint validation.\n     */\n    public get validity() {\n      return this.#internals.validity;\n    }\n\n    /** A string containing the validation message of this element. */\n    public get validationMessage() {\n      return this.#internals.validationMessage;\n    }\n\n    /**\n     * A boolean value which returns true if the element is a submittable element\n     * that is a candidate for constraint validation.\n     */\n    public get willValidate() {\n      return this.#internals.willValidate;\n    }\n\n    /**\n     * The disabled state of the component\n     * @attr [disabled=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get disabled() {\n      return this._disabled;\n    }\n\n    public set disabled(value: boolean) {\n      const prev = this._disabled;\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\n      this.requestUpdate('disabled', prev);\n    }\n\n    /**\n     * Control the validity of the control.\n     * @attr [invalid=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get invalid() {\n      return this._invalid;\n    }\n\n    public set invalid(value: boolean) {\n      const prev = this._invalid;\n      this._invalid = value;\n      this.toggleAttribute('invalid', Boolean(this._invalid));\n      this.requestUpdate('invalid', prev);\n    }\n\n    constructor(...args: any[]) {\n      super(args);\n      this.#internals = this.attachInternals();\n      this.addEventListener('invalid', this.handleInvalid);\n    }\n\n    public override connectedCallback(): void {\n      super.connectedCallback();\n      this._dirty = false;\n      this.setDefaultValue();\n    }\n\n    /**\n     * Saves the initial value/checked state of the control.\n     *\n     * Called on connectedCallback.\n     */\n    protected setDefaultValue() {\n      if ('checked' in this) {\n        this._defaultValue = this.checked;\n      } else if ('value' in this) {\n        this._defaultValue = this.value;\n      }\n    }\n\n    /**\n     * Called when the parent form is reset.\n     *\n     * Restores the initially bound value/checked state of the control.\n     */\n    protected restoreDefaultValue() {\n      if ('checked' in this) {\n        this.checked = this._defaultValue;\n      } else if ('value' in this) {\n        this.value = this._defaultValue;\n      }\n    }\n\n    protected handleInvalid = (event: Event) => {\n      event.preventDefault();\n      this.invalid = true;\n    };\n\n    protected setFormValue(\n      value: string | File | FormData | null,\n      state?: string | File | FormData | null | undefined\n    ) {\n      this.#internals.setFormValue(value, state || value);\n    }\n\n    protected setValidity(\n      flags?: ValidityStateFlags | undefined,\n      message?: string | undefined,\n      anchor?: HTMLElement | undefined\n    ) {\n      this.#internals.setValidity(flags, message, anchor);\n    }\n\n    protected formResetCallback() {\n      this.restoreDefaultValue();\n      this._dirty = false;\n\n      // Apply any changes happening during form reset synchronously\n      this.performUpdate();\n\n      this.invalid = false;\n    }\n\n    protected formDisabledCallback(state: boolean) {\n      this._disabled = state;\n      this.requestUpdate();\n    }\n\n    /**\n     * Executes the component validators and updates the internal validity state.\n     */\n    protected updateValidity(message?: string) {\n      const validity: ValidityStateFlags = {};\n      let validationMessage = '';\n\n      for (const validator of this.validators) {\n        const isValid = validator.isValid(this);\n\n        validity[validator.key] = !isValid;\n\n        if (!isValid) {\n          validationMessage =\n            typeof validator.message === 'function'\n              ? validator.message(this)\n              : validator.message;\n        }\n      }\n\n      if (message) {\n        validity.customError = true;\n        validationMessage = message;\n      }\n\n      this.#internals.setValidity(validity, validationMessage);\n    }\n\n    /**\n     * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n     * if the element has completed the first update cycle or it has been interacted with by the user.\n     *\n     * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n     */\n    protected setInvalidState() {\n      if (this.hasUpdated || this._dirty) {\n        this.invalid = !this.checkValidity();\n      }\n    }\n\n    /** Checks for validity of the control and shows the browser message if it invalid. */\n    public reportValidity() {\n      return this.#internals.reportValidity();\n    }\n\n    /** Checks for validity of the control and emits the invalid event if it invalid. */\n    public checkValidity() {\n      return this.#internals.checkValidity();\n    }\n\n    /**\n     * Sets a custom validation message for the control.\n     * As long as `message` is not empty, the control is considered invalid.\n     */\n    public setCustomValidity(message: string) {\n      this.updateValidity(message);\n      this.invalid = !this.checkValidity();\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n    T;\n}\n"]}

package/components/common/mixins/sizable.d.ts

@@ -3,7 +3,10 @@ import type { Constructor } from './constructor';
 export declare class SizableInterface {
     /**
      * Determines the size of the component.
+     * @attr
      * @type {"small" | "medium" | "large"}
+     *
+     * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.
      */
     size: 'small' | 'medium' | 'large';
 }

package/components/common/mixins/sizable.js

@@ -5,16 +5,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
+import { watch } from '../decorators/watch.js';
 export const SizableMixin = (superClass) => {
     class SizableElement extends superClass {
         constructor() {
             super(...arguments);
             this.size = 'large';
         }
+        updateSize() {
+            this.style.setProperty('--component-size', `var(--ig-size, var(--ig-size-${this.size}))`);
+        }
     }
     __decorate([
         property({ reflect: true })
     ], SizableElement.prototype, "size", void 0);
+    __decorate([
+        watch('size')
+    ], SizableElement.prototype, "updateSize", null);
     return SizableElement;
 };
 //# sourceMappingURL=sizable.js.map

package/components/common/mixins/sizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizable.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/sizable.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAW7C,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,UAAa,EACb,EAAE;IACF,MAAM,cAAe,SAAQ,UAAU;QAAvC;;YAOS,SAAI,GAAiC,OAAO,CAAC;QACtD,CAAC;KAAA;IADQ;QADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACwB;IAEtD,OAAO,cAAmD,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Constructor } from './constructor';\n\nexport declare class SizableInterface {\n  /**\n   * Determines the size of the component.\n   * @type {\"small\" | \"medium\" | \"large\"}\n   */\n  public size: 'small' | 'medium' | 'large';\n}\n\nexport const SizableMixin = <T extends Constructor<LitElement>>(\n  superClass: T\n) => {\n  class SizableElement extends superClass {\n    /**\n     * Determines the size of the component.\n     * @attr\n     * @type {\"small\" | \"medium\" | \"large\"}\n     */\n    @property({ reflect: true })\n    public size: 'small' | 'medium' | 'large' = 'large';\n  }\n  return SizableElement as Constructor<SizableInterface> & T;\n};\n"]}
+{"version":3,"file":"sizable.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/sizable.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAa/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,UAAa,EACb,EAAE;IACF,MAAM,cAAe,SAAQ,UAAU;QAAvC;;YASS,SAAI,GAAiC,OAAO,CAAC;QAStD,CAAC;QANW,UAAU;YAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,kBAAkB,EAClB,gCAAgC,IAAI,CAAC,IAAI,IAAI,CAC9C,CAAC;QACJ,CAAC;KACF;IATQ;QADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACwB;IAG1C;QADT,KAAK,CAAC,MAAM,CAAC;oDAMb;IAEH,OAAO,cAAmD,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Constructor } from './constructor';\nimport { watch } from '../decorators/watch.js';\n\nexport declare class SizableInterface {\n  /**\n   * Determines the size of the component.\n   * @attr\n   * @type {\"small\" | \"medium\" | \"large\"}\n   *\n   * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.\n   */\n  public size: 'small' | 'medium' | 'large';\n}\n\nexport const SizableMixin = <T extends Constructor<LitElement>>(\n  superClass: T\n) => {\n  class SizableElement extends superClass {\n    /**\n     * Determines the size of the component.\n     * @attr\n     * @type {\"small\" | \"medium\" | \"large\"}\n     *\n     * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.\n     */\n    @property({ reflect: true })\n    public size: 'small' | 'medium' | 'large' = 'large';\n\n    @watch('size')\n    protected updateSize() {\n      this.style.setProperty(\n        '--component-size',\n        `var(--ig-size, var(--ig-size-${this.size}))`\n      );\n    }\n  }\n  return SizableElement as Constructor<SizableInterface> & T;\n};\n"]}