ids-enterprise-wc 1.0.0-beta.12 → 1.0.0-beta.13

package/chunks/{ids-chunk-4KKY3I27.js → ids-chunk-SV7K7WJP.js}

@@ -1,4 +1,4 @@
-import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGFEAN.js";import{a as k}from"./ids-chunk-WWN6C3DG.js";import{b as E}from"./ids-chunk-UXOESE2B.js";import{a as A}from"./ids-chunk-CA7WSO53.js";import{a as w}from"./ids-chunk-J6DDVFGW.js";import{a as m}from"./ids-chunk-X5HHVE4J.js";import{a as x}from"./ids-chunk-YS37TBDI.js";import{a as g,b as f}from"./ids-chunk-XE4WFW5M.js";import{a as y}from"./ids-chunk-GTV4PSEA.js";import{e as n}from"./ids-chunk-VGRUIA4C.js";import{a as i}from"./ids-chunk-2NN3ZJ6Q.js";import{a as v}from"./ids-chunk-U7OOVFXE.js";var S=`
+import{a as b}from"./ids-chunk-ODC5DL7H.js";import{a as I}from"./ids-chunk-GUNX4KFT.js";import{a as k}from"./ids-chunk-OHTSFY5B.js";import{b as E}from"./ids-chunk-NZGHOKVC.js";import{a as A}from"./ids-chunk-SEZJIM5Z.js";import{a as w}from"./ids-chunk-J6DDVFGW.js";import{a as m}from"./ids-chunk-N7RNTKMO.js";import{a as x}from"./ids-chunk-AKCO43TX.js";import{a as f,b as g}from"./ids-chunk-XE4WFW5M.js";import{a as y}from"./ids-chunk-GFV2Z7F5.js";import{e as n}from"./ids-chunk-QPDOZZIG.js";import{a as i}from"./ids-chunk-EQJWBFQ2.js";import{a as v}from"./ids-chunk-U7OOVFXE.js";var S=`
 @charset "UTF-8";
 /**
  * Css for clearable mixin
@@ -105,44 +105,44 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex;
-  font-family: var(--ids-font-family);
-  margin-top: var(--ids-spacing-md);
+  font-family: var(--ids-font-family-default);
+  margin-top: var(--ids-space-30);
 }
 .validation-message.has-custom-icon {
-  color: var(--ids-icon-color);
+  color: var(--ids-icon-color-default);
 }
 .validation-message.disabled {
-  color: var(--ids-input-disabled-text-color);
+  color: var(--ids-input-color-text-disabled);
 }
 .validation-message .ids-icon {
-  margin-inline-end: var(--ids-spacing-md);
+  margin-inline-end: var(--ids-space-30);
 }
 .validation-message.alert {
-  color: var(--ids-color-caution);
+  color: var(--ids-color-caution-default);
 }
 .validation-message.alert.disabled {
   color: var(--ids-color-caution-30);
 }
 .validation-message.warning {
-  color: var(--ids-color-warning);
+  color: var(--ids-color-warning-default);
 }
 .validation-message.warning.disabled {
   color: var(--ids-color-warning-30);
 }
 .validation-message.error {
-  color: var(--ids-color-error);
+  color: var(--ids-color-error-default);
 }
 .validation-message.error.disabled {
   color: var(--ids-color-error-30);
 }
 .validation-message.info {
-  color: var(--ids-color-info);
+  color: var(--ids-color-info-default);
 }
 .validation-message.info.disabled {
   color: var(--ids-color-info-30);
 }
 .validation-message.success {
-  color: var(--ids-color-success);
+  color: var(--ids-color-success-default);
 }
 .validation-message.success.disabled {
   color: var(--ids-color-success-30);
@@ -154,8 +154,8 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-label-text {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: var(--ids-font-family);
-  color: var(--ids-input-label-text-color);
+  font-family: var(--ids-font-family-default);
+  color: var(--ids-input-label-color-text-default);
   display: flex;
   margin-block-end: var(--ids-input-margin-bottom);
   align-items: baseline;
@@ -166,11 +166,11 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 }
 .ids-label-text.required::after {
   position: relative;
-  font-family: var(--ids-font-family);
-  margin-inline-start: var(--ids-spacing-sm);
-  margin-inline-end: var(--ids-spacing-sm);
-  font-size: var(--ids-font-size-lg);
-  color: var(--ids-required-background-color);
+  font-family: var(--ids-font-family-default);
+  margin-inline-start: var(--ids-space-20);
+  margin-inline-end: var(--ids-space-20);
+  font-size: var(--ids-font-size-50);
+  color: var(--ids-input-required-indicator-color-text-default);
   content: "*";
   margin-top: -10px;
   top: 1px;
@@ -185,10 +185,10 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 }
 
 .disabled .ids-label-text {
-  color: var(--ids-text-color-disabled);
+  color: var(--ids-color-text-disabled);
 }
 .disabled .ids-label-text.required::after {
-  color: var(--ids-required-disabled-background-color);
+  color: var(--ids-input-required-indicator-color-text-disabled);
 }
 
 :host {
@@ -233,38 +233,38 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   top: -8px;
 }
 :host([label-wrap=ellipsis-no-stretch]) .xs .ids-label-text {
-  max-width: calc(var(--ids-input-width-xs) - 2px);
+  max-width: calc(var(--ids-input-width-10) - 2px);
 }
 :host([label-wrap=ellipsis-no-stretch]) .sm .ids-label-text {
-  max-width: calc(var(--ids-input-width-sm) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-20) - 2px - 8px);
 }
 :host([label-wrap=ellipsis-no-stretch]) .mm .ids-label-text {
-  max-width: calc(var(--ids-input-width-mm) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-30) - 2px - 8px);
 }
 :host([label-wrap=ellipsis-no-stretch]) .md .ids-label-text {
-  max-width: calc(var(--ids-input-width-md) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-40) - 2px - 8px);
 }
 :host([label-wrap=ellipsis-no-stretch]) .lg .ids-label-text {
-  max-width: calc(var(--ids-input-width-lg) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-50) - 2px - 8px);
 }
 :host([label-wrap=ellipsis-no-stretch]) .full .ids-label-text {
   max-width: calc(100% - 8px);
 }
 
 :host([label-wrap=wrap-no-stretch]) .xs .ids-label-text {
-  max-width: calc(var(--ids-input-width-xs) - 2px);
+  max-width: calc(var(--ids-input-width-10) - 2px);
 }
 :host([label-wrap=wrap-no-stretch]) .sm .ids-label-text {
-  max-width: calc(var(--ids-input-width-sm) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-20) - 2px - 8px);
 }
 :host([label-wrap=wrap-no-stretch]) .mm .ids-label-text {
-  max-width: calc(var(--ids-input-width-mm) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-30) - 2px - 8px);
 }
 :host([label-wrap=wrap-no-stretch]) .md .ids-label-text {
-  max-width: calc(var(--ids-input-width-md) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-40) - 2px - 8px);
 }
 :host([label-wrap=wrap-no-stretch]) .lg .ids-label-text {
-  max-width: calc(var(--ids-input-width-lg) - 2px - 8px);
+  max-width: calc(var(--ids-input-width-50) - 2px - 8px);
 }
 :host([label-wrap=wrap-no-stretch]) .full .ids-label-text {
   max-width: calc(100% - 8px);
@@ -273,13 +273,13 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-input {
   position: relative;
   display: block;
-  margin-block-end: var(--ids-spacing-xxl);
+  margin-block-end: var(--ids-space-60);
   max-width: var(--ids-input-width-full);
 }
 .ids-input .field-container {
-  transition: border var(--ids-transition-length) var(--ids-transition-ease);
-  margin: var(--ids-spacing-none);
-  padding: var(--ids-spacing-none);
+  transition: border var(--ids-motion-duration) var(--ids-motion-ease);
+  margin: var(--ids-space-none);
+  padding: var(--ids-space-none);
   position: relative;
   border: 1px solid;
   align-items: center;
@@ -296,14 +296,14 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   outline-color: transparent;
 }
 .ids-input:focus-within .field-container, .ids-input.readonly:focus-within .field-container, .ids-input.is-active .field-container {
-  border-color: var(--ids-input-focus-border-color) !important;
-  box-shadow: var(--ids-focus-box-shadow);
+  border-color: var(--ids-input-color-border-focus) !important;
+  box-shadow: var(--ids-shadow-focus);
 }
 .ids-input .ids-icon.starting-icon {
-  margin-inline-start: var(--ids-spacing-lg);
+  margin-inline-start: var(--ids-space-40);
 }
 .ids-input .ids-icon.ending-icon {
-  margin-inline-end: var(--ids-spacing-lg);
+  margin-inline-end: var(--ids-space-40);
 }
 .ids-input .ids-input-field {
   -webkit-font-smoothing: antialiased;
@@ -311,11 +311,11 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   box-sizing: border-box;
   background-color: transparent;
   border: none;
-  font-family: var(--ids-font-family);
-  padding-block-start: var(--ids-spacing-md);
-  padding-block-end: var(--ids-spacing-md);
-  padding-inline-start: var(--ids-spacing-lg);
-  padding-inline-end: var(--ids-spacing-lg);
+  font-family: var(--ids-font-family-default);
+  padding-block-start: var(--ids-space-30);
+  padding-block-end: var(--ids-space-30);
+  padding-inline-start: var(--ids-space-40);
+  padding-inline-end: var(--ids-space-40);
   font-size: var(--ids-input-font-size);
   width: 100%;
   appearance: none;
@@ -341,7 +341,7 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   text-align: end;
 }
 .ids-input .validation-message {
-  margin-block-start: var(--ids-spacing-md);
+  margin-block-start: var(--ids-space-30);
   margin-bottom: 0;
 }
 .ids-input.no-margins, .ids-input.no-margins.compact {
@@ -358,7 +358,7 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 }
 .ids-input.no-margins .validation-message, .ids-input.no-margins.compact .validation-message {
   margin-bottom: 0;
-  margin-block-start: var(--ids-spacing-md);
+  margin-block-start: var(--ids-space-30);
 }
 .ids-input.no-margins .ids-label-text.empty, .ids-input.no-margins.compact .ids-label-text.empty {
   margin: 0;
@@ -366,19 +366,19 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   height: 0;
 }
 .ids-input.xs .field-container {
-  width: calc(var(--ids-input-width-xs) - 2px);
+  width: calc(var(--ids-input-width-10) - 2px);
 }
 .ids-input.sm .field-container {
-  width: calc(var(--ids-input-width-sm) - 2px);
+  width: calc(var(--ids-input-width-20) - 2px);
 }
 .ids-input.mm .field-container {
-  width: calc(var(--ids-input-width-mm) - 2px);
+  width: calc(var(--ids-input-width-30) - 2px);
 }
 .ids-input.md .field-container {
-  width: calc(var(--ids-input-width-md) - 2px);
+  width: calc(var(--ids-input-width-40) - 2px);
 }
 .ids-input.lg .field-container {
-  width: calc(var(--ids-input-width-lg) - 2px);
+  width: calc(var(--ids-input-width-50) - 2px);
 }
 .ids-input.full {
   display: block;
@@ -388,22 +388,22 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 }
 @media (max-width: 360px) {
   .ids-input .field-container {
-    max-width: calc(var(--ids-input-width-mm) - 2px);
+    max-width: calc(var(--ids-input-width-30) - 2px);
   }
 }
 .ids-input.field-height-xs {
-  margin-block-end: var(--ids-font-size-xs);
+  margin-block-end: var(--ids-font-size-20);
 }
 .ids-input.field-height-xs .ids-label-text {
   font-size: var(--ids-input-label-font-size);
 }
 .ids-input.field-height-xs .ids-input-field {
-  padding-inline-start: var(--ids-spacing-md);
-  padding-inline-end: var(--ids-spacing-md);
+  padding-inline-start: var(--ids-space-30);
+  padding-inline-end: var(--ids-space-30);
   padding-top: 0;
   padding-bottom: 0;
   font-size: var(--ids-input-font-size-sm);
-  height: calc(var(--ids-input-height-xs) - 2px);
+  height: calc(var(--ids-input-height-10) - 2px);
 }
 .ids-input.field-height-xs.no-margin-bottom {
   margin-bottom: 0;
@@ -413,27 +413,27 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   margin-bottom: 0;
 }
 .ids-input.field-height-sm .ids-input-field {
-  height: calc(var(--ids-input-height-sm) - 2px);
+  height: calc(var(--ids-input-height-20) - 2px);
 }
 .ids-input.field-height-md .ids-input-field {
-  height: calc(var(--ids-input-height-md) - 2px);
+  height: calc(var(--ids-input-height-30) - 2px);
 }
 .ids-input.field-height-lg .ids-input-field {
-  height: calc(var(--ids-input-height-lg) - 2px);
+  height: calc(var(--ids-input-height-40) - 2px);
 }
 .ids-input.compact {
-  margin-block-end: var(--ids-font-size-xs);
+  margin-block-end: var(--ids-font-size-20);
 }
 .ids-input.compact .ids-label-text {
   font-size: var(--ids-input-label-font-size);
 }
 .ids-input.compact .ids-input-field {
-  padding-inline-start: var(--ids-spacing-md);
-  padding-inline-end: var(--ids-spacing-md);
+  padding-inline-start: var(--ids-space-30);
+  padding-inline-end: var(--ids-space-30);
   padding-top: 0;
   padding-bottom: 0;
   font-size: var(--ids-input-font-size-sm);
-  height: calc(var(--ids-input-height-xs) - 2px);
+  height: calc(var(--ids-input-height-10) - 2px);
 }
 .ids-input.compact.no-margin-bottom {
   margin-bottom: 0;
@@ -441,15 +441,15 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-input.compact.no-margin-bottom .field-container,
 .ids-input.compact.no-margin-bottom .ids-input-field {
   margin-bottom: 0;
-  height: calc(var(--ids-input-height-xs) - 2px);
+  height: calc(var(--ids-input-height-10) - 2px);
 }
 .ids-input.color-variant-borderless {
-  --ids-input-focus-border-color: transparent;
+  --ids-input-color-border-focus: transparent;
   margin: 1px;
   border-radius: 0;
 }
 .ids-input.color-variant-borderless input {
-  font-size: var(--ids-font-size-md);
+  font-size: var(--ids-font-size-40);
 }
 .ids-input.color-variant-borderless .icon-dirty {
   display: none;
@@ -465,27 +465,27 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   box-shadow: none;
 }
 .ids-input.color-variant-borderless.ids-input.field-height-lg .ids-input-field {
-  padding-inline: calc(var(--ids-spacing-xxl) - 2px);
+  padding-inline: calc(var(--ids-space-60) - 2px);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-md .ids-input-field {
-  padding-inline: calc(var(--ids-spacing-xl) - 2px);
+  padding-inline: calc(var(--ids-space-50) - 2px);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-sm .ids-input-field {
-  padding-inline: calc(var(--ids-spacing-lg) - 2px);
+  padding-inline: calc(var(--ids-space-40) - 2px);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-xs .ids-input-field {
   font-size: var(--ids-data-grid-font-size-sm);
-  padding-inline: var(--ids-spacing-sm);
+  padding-inline: var(--ids-space-20);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-xxs .ids-input-field {
   font-size: var(--ids-data-grid-font-size-sm);
-  padding-inline: var(--ids-spacing-xs);
+  padding-inline: var(--ids-space-10);
 }
 .ids-input.color-variant-in-cell {
   margin: 1px;
 }
 .ids-input.color-variant-in-cell input {
-  font-size: var(--ids-font-size-md);
+  font-size: var(--ids-font-size-40);
 }
 .ids-input.color-variant-in-cell.ids-input.field-height-lg .ids-input-field {
   padding-inline: 11px;
@@ -524,25 +524,25 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
 .ids-input .field-container {
-  background-color: var(--ids-input-background-color);
-  border-color: var(--ids-input-border-color);
-  color: var(--ids-input-text-color);
+  background-color: var(--ids-input-color-background-default);
+  border-color: var(--ids-input-color-border-default);
+  color: var(--ids-input-color-text);
 }
 .ids-input.readonly .field-container, .ids-input.readonly.hover .field-container, .ids-input.readonly.focus-within .field-container {
-  border-color: var(--ids-input-readonly-border-color);
-  color: var(--ids-input-readonly-text-color);
+  border-color: var(--ids-input-color-border-readonly);
+  color: var(--ids-input-color-text-readonly);
 }
 .ids-input.readonly .field-container.error, .ids-input.readonly .field-container.error:hover, .ids-input.readonly.hover .field-container.error, .ids-input.readonly.hover .field-container.error:hover, .ids-input.readonly.focus-within .field-container.error, .ids-input.readonly.focus-within .field-container.error:hover {
-  border-color: var(--ids-color-error);
-  color: var(--ids-color-error);
+  border-color: var(--ids-color-error-default);
+  color: var(--ids-color-error-default);
 }
 .ids-input.readonly:not(.readonly-background):not(.bg-transparent) .field-container, .ids-input.readonly:not(.readonly-background):not(.bg-transparent).hover .field-container, .ids-input.readonly:not(.readonly-background):not(.bg-transparent).focus-within .field-container {
-  background-color: var(--ids-input-readonly-background-color);
+  background-color: var(--ids-input-color-background-readonly);
 }
 .ids-input.disabled .field-container, .ids-input.disabled:hover .field-container, .ids-input.disabled:focus-within .field-container {
-  border-color: var(--ids-input-disabled-border-color);
-  color: var(--ids-input-disabled-text-color);
-  -webkit-text-fill-color: var(--ids-input-disabled-text-color);
+  border-color: var(--ids-input-color-border-disabled);
+  color: var(--ids-input-color-text-disabled);
+  -webkit-text-fill-color: var(--ids-input-color-text-disabled);
 }
 .ids-input.bg-transparent .field-container, .ids-input.bg-transparent.readonly .field-container, .ids-input.bg-transparent.disabled .field-container {
   background-color: transparent;
@@ -551,7 +551,7 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   background-color: transparent;
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .field-container, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .field-container {
-  border-color: var(--ids-input-hover-border-color);
+  border-color: var(--ids-input-color-border-hover);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover,
@@ -560,8 +560,8 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover {
-  border-color: var(--ids-input-alert-border-color);
-  color: var(--ids-input-alert-text-color);
+  border-color: var(--ids-input-color-border-alert-default);
+  color: var(--ids-input-color-text-alert-default);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert.is-active,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover:focus-within,
@@ -576,8 +576,8 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning.is-active,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover:focus-within,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover.is-active {
-  border-color: var(--ids-input-alert-border-color);
-  box-shadow: var(--ids-input-alert-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-alert-default);
+  box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert[disabled],
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover[disabled],
@@ -586,78 +586,78 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover[disabled],
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning[disabled],
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover[disabled] {
-  border-color: var(--ids-input-alert-disabled-border-color);
-  color: var(--ids-input-alert-disabled-text-color);
+  border-color: var(--ids-input-color-border-alert-disabled);
+  color: var(--ids-input-color-text-alert-disabled);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover {
-  border-color: var(--ids-input-error-border-color);
-  color: var(--ids-input-error-text-color);
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error.is-active,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover:focus-within,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error.is-active,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover:focus-within,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover.is-active {
-  border-color: var(--ids-input-error-border-color);
-  box-shadow: var(--ids-input-error-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-error-default);
+  box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error[disabled],
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error[disabled],
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover[disabled] {
-  border-color: var(--ids-input-error-disabled-border-color);
-  color: var(--ids-input-error-disabled-border-color);
+  border-color: var(--ids-input-color-border-error-disabled);
+  color: var(--ids-input-color-border-error-disabled);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover {
-  border-color: var(--ids-input-info-border-color);
-  color: var(--ids-input-info-text-color);
+  border-color: var(--ids-input-color-border-info-default);
+  color: var(--ids-input-color-text-info-default);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info.is-active,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover:focus-within,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info.is-active,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover:focus-within,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover.is-active {
-  border-color: var(--ids-input-info-border-color);
-  box-shadow: var(--ids-input-info-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-info-default);
+  box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info[disabled],
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info[disabled],
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover[disabled] {
-  border-color: var(--ids-input-info-disabled-border-color);
-  color: var(--ids-input-info-disabled-text-color);
+  border-color: var(--ids-input-color-border-info-disabled);
+  color: var(--ids-input-color-text-info-disabled);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover {
-  border-color: var(--ids-input-success-border-color);
-  color: var(--ids-input-success-text-color);
+  border-color: var(--ids-input-color-border-success-default);
+  color: var(--ids-input-color-text-success-default);
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success.is-active,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover:focus-within,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success.is-active,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover:focus-within,
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover.is-active {
-  border-color: var(--ids-input-success-border-color);
-  box-shadow: var(--ids-input-success-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-success-default);
+  box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
 }
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success[disabled],
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success[disabled],
 .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover[disabled] {
-  border-color: var(--ids-input-success-disabled-border-color);
-  color: var(--ids-input-success-disabled-text-color);
+  border-color: var(--ids-input-color-border-success-disabled);
+  color: var(--ids-input-color-text-success-disabled);
 }
 .ids-input:hover:not(.disabled).readonly.readonly-background.color-variant-alternate-formatter .field-container {
-  border-color: var(--ids-data-grid-filter-input-hover-color);
+  border-color: var(--ids-data-grid-filter-input-color-background-hover);
 }
 .ids-input .alert,
 .ids-input .alert:hover,
 .ids-input .warning,
 .ids-input .warning:hover {
-  border-color: var(--ids-input-alert-border-color);
-  color: var(--ids-input-alert-text-color);
+  border-color: var(--ids-input-color-border-alert-default);
+  color: var(--ids-input-color-text-alert-default);
 }
 .ids-input .alert:focus-within, .ids-input .alert.is-active,
 .ids-input .alert:hover:focus-within,
@@ -666,102 +666,102 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 .ids-input .warning.is-active,
 .ids-input .warning:hover:focus-within,
 .ids-input .warning:hover.is-active {
-  border-color: var(--ids-input-alert-border-color);
-  box-shadow: var(--ids-input-alert-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-alert-default);
+  box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
 }
 .ids-input .alert[disabled],
 .ids-input .alert:hover[disabled],
 .ids-input .warning[disabled],
 .ids-input .warning:hover[disabled] {
-  border-color: var(--ids-input-alert-disabled-border-color);
-  color: var(--ids-input-alert-disabled-text-color);
+  border-color: var(--ids-input-color-border-alert-disabled);
+  color: var(--ids-input-color-text-alert-disabled);
 }
 .ids-input .error,
 .ids-input .error:hover {
-  border-color: var(--ids-input-error-border-color);
-  color: var(--ids-input-error-text-color);
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
 }
 .ids-input .error:focus-within, .ids-input .error.is-active,
 .ids-input .error:hover:focus-within,
 .ids-input .error:hover.is-active {
-  border-color: var(--ids-input-error-border-color);
-  box-shadow: var(--ids-input-error-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-error-default);
+  box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
 }
 .ids-input .error[disabled],
 .ids-input .error:hover[disabled] {
-  border-color: var(--ids-input-error-disabled-border-color);
-  color: var(--ids-input-error-disabled-border-color);
+  border-color: var(--ids-input-color-border-error-disabled);
+  color: var(--ids-input-color-border-error-disabled);
 }
 .ids-input .info,
 .ids-input .info:hover {
-  border-color: var(--ids-input-info-border-color);
-  color: var(--ids-input-info-text-color);
+  border-color: var(--ids-input-color-border-info-default);
+  color: var(--ids-input-color-text-info-default);
 }
 .ids-input .info:focus-within, .ids-input .info.is-active,
 .ids-input .info:hover:focus-within,
 .ids-input .info:hover.is-active {
-  border-color: var(--ids-input-info-border-color);
-  box-shadow: var(--ids-input-info-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-info-default);
+  box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
 }
 .ids-input .info[disabled],
 .ids-input .info:hover[disabled] {
-  border-color: var(--ids-input-info-disabled-border-color);
-  color: var(--ids-input-info-disabled-text-color);
+  border-color: var(--ids-input-color-border-info-disabled);
+  color: var(--ids-input-color-text-info-disabled);
 }
 .ids-input .success,
 .ids-input .success:hover {
-  border-color: var(--ids-input-success-border-color);
-  color: var(--ids-input-success-text-color);
+  border-color: var(--ids-input-color-border-success-default);
+  color: var(--ids-input-color-text-success-default);
 }
 .ids-input .success:focus-within, .ids-input .success.is-active,
 .ids-input .success:hover:focus-within,
 .ids-input .success:hover.is-active {
-  border-color: var(--ids-input-success-border-color);
-  box-shadow: var(--ids-input-success-focus-box-shadow) 0 0 3px 2px;
+  border-color: var(--ids-input-color-border-success-default);
+  box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
 }
 .ids-input .success[disabled],
 .ids-input .success:hover[disabled] {
-  border-color: var(--ids-input-success-disabled-border-color);
-  color: var(--ids-input-success-disabled-text-color);
+  border-color: var(--ids-input-color-border-success-disabled);
+  color: var(--ids-input-color-text-success-disabled);
 }
 .ids-input.color-variant-alternate .field-container {
   border-color: transparent;
-  color: var(--ids-input-header-text-color);
-  background-color: var(--ids-input-header-background-color);
-  border-bottom: 1px solid var(--ids-input-header-border-color);
+  color: var(--ids-input-header-color-text-default);
+  background-color: var(--ids-input-header-color-background);
+  border-bottom: 1px solid var(--ids-input-header-color-border);
   box-shadow: none;
 }
 .ids-input.color-variant-alternate .ids-input-field::placeholder {
-  color: var(--ids-input-header-placeholder-text-color);
+  color: var(--ids-input-header-color-text-placeholder);
 }
 .ids-input.color-variant-alternate-formatter .field-container {
-  background-color: var(--ids-data-grid-filter-input-background-color);
-  border-color: var(--ids-data-grid-filter-input-border-color);
-  color: var(--ids-data-grid-filter-input-text-color);
+  background-color: var(--ids-data-grid-filter-input-color-background);
+  border-color: var(--ids-data-grid-filter-input-color-border-default);
+  color: var(--ids-data-grid-filter-input-color-text-default);
 }
 .ids-input.color-variant-alternate-formatter:hover.readonly.readonly-background .field-container, .ids-input.color-variant-alternate-formatter:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .field-container, .ids-input.color-variant-alternate-formatter.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless):hover .field-container {
-  border-color: var(--ids-data-grid-filter-input-hover-color);
+  border-color: var(--ids-data-grid-filter-input-color-background-hover);
 }
 .ids-input.color-variant-alternate-formatter:focus-within .field-container, .ids-input.color-variant-alternate-formatter:focus-within:hover .field-container {
-  border-color: var(--ids-data-grid-filter-input-focus-color);
+  border-color: var(--ids-data-grid-filter-input-color-border-focus);
 }
 .ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
-  box-shadow: 0 0 3px 1px var(--ids-focus-box-shadow);
+  box-shadow: 0 0 3px 1px var(--ids-shadow-focus);
 }
 .ids-input.color-variant-alternate-formatter.disabled .field-container, .ids-input.color-variant-alternate-formatter.disabled:hover .field-container {
-  border-color: var(--ids-data-grid-filter-input-disabled-border-color);
-  color: var(--ids-data-grid-filter-input-disabled-text-color);
+  border-color: var(--ids-data-grid-filter-input-color-border-disabled);
+  color: var(--ids-data-grid-filter-input-color-text-disabled);
 }
 .ids-input.color-variant-alternate-formatter.readonly:not(.readonly-background):not(.bg-transparent) .field-container {
-  background-color: var(--ids-data-grid-filter-input-readonly-background-color);
-  border-color: var(--ids-data-grid-filter-input-readonly-border-color);
-  color: var(--ids-data-grid-filter-input-readonly-text-color);
+  background-color: var(--ids-data-grid-filter-input-color-background-readonly);
+  border-color: var(--ids-data-grid-filter-input-color-border-readonly);
+  color: var(--ids-data-grid-filter-input-color-text-readonly);
 }
 .ids-input.color-variant-alternate-formatter .ids-input-field::placeholder {
-  color: var(--ids-data-grid-filter-input-placeholder-text-color);
+  color: var(--ids-data-grid-filter-input-color-text-placeholder);
 }
 .ids-input.color-variant-alternate .field-container, .ids-input.color-variant-app-menu .field-container {
-  color: var(--ids-input-app-menu-text-color);
+  color: var(--ids-input-color-text-default);
 }
 .ids-input.color-variant-list-builder .field-container {
   background-color: transparent;
@@ -784,27 +784,27 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
 
 :host ids-popup[type=dropdown] {
   width: 100%;
-  max-width: var(--ids-input-width-md);
+  max-width: var(--ids-input-width-40);
 }
 
 :host([size=xs]) ids-popup[type=dropdown] {
-  max-width: var(--ids-input-width-xs);
+  max-width: var(--ids-input-width-10);
 }
 
 :host([size=sm]) ids-popup[type=dropdown] {
-  max-width: var(--ids-input-width-sm);
+  max-width: var(--ids-input-width-20);
 }
 
 :host([size=mm]) ids-popup[type=dropdown] {
-  max-width: var(--ids-input-width-mm);
+  max-width: var(--ids-input-width-30);
 }
 
 :host([size=md]) ids-popup[type=dropdown] {
-  max-width: var(--ids-input-width-md);
+  max-width: var(--ids-input-width-40);
 }
 
 :host([size=lg]) ids-popup[type=dropdown] {
-  max-width: var(--ids-input-width-lg);
+  max-width: var(--ids-input-width-50);
 }
 
 :host([size=full]) ids-popup[type=dropdown] {
@@ -855,7 +855,7 @@ import{a as b}from"./ids-chunk-6CC2YTLI.js";import{a as I}from"./ids-chunk-R5YGF
   margin-bottom: 16px;
   display: block;
   position: relative;
-  max-width: var(--ids-input-width-sm);
+  max-width: var(--ids-input-width-20);
 }
 .ids-color-picker .color-preview {
   margin-inline-start: 0;
@@ -892,7 +892,7 @@ ids-input::part(container) {
   display: grid;
   grid-template-columns: repeat(10, 20px);
   overflow: visible;
-  padding: var(--ids-spacing-lg);
+  padding: var(--ids-space-40);
   align-items: center;
   align-content: center;
   justify-content: center;
@@ -905,13 +905,13 @@ ids-input::part(container) {
 
 .advanced-color-picker {
   position: absolute;
-  bottom: var(--ids-spacing-xxl);
+  bottom: var(--ids-space-60);
   visibility: hidden;
   opacity: 0;
-}`;var T=w(k(E(A(m(I(x(y))))))),l=class extends T{colorInput;colorPreview;triggerBtn;textInput;isFormComponent=!0;useDefaultSwatches=!0;initialized=!1;constructor(){super()}connectedCallback(){super.connectedCallback(),this.swatches.length||(this.useDefaultSwatches=!0,this.append(...this.defaultSwatches)),this.clearable&&this.appendClearableButton(),this.textInput=this.container?.querySelector("ids-trigger-field"),this.colorInput=this.container?.querySelector(".advanced-color-picker"),this.colorPreview=this.container?.querySelector(".color-preview"),this.triggerBtn=this.container?.querySelector("ids-trigger-button"),this.#r(this.value),this.#t(),this.#l(),this.initialized=!0}disconnectedCallback(){super.disconnectedCallback(),this.#n()}static get attributes(){return[...super.attributes,i.ADVANCED,i.CHECKED,i.COMPACT,i.DISABLED,i.LABEL,i.PLACEHOLDER,i.SUPPRESS_LABELS,i.READONLY,i.TABBABLE,i.TABINDEX,i.SIZE,i.SUPPRESS_TOOLTIPS,i.TOOLTIP,i.VALIDATE,i.VALUE]}template(){let t=this.#o(),r=this.readonly?"readonly":"",e=this.disabled?"disabled":"",o=this.dirtyTracker?"dirty-tracker":"";return`<div class="ids-color-picker">
+}`;var T=w(k(E(A(m(I(x(y))))))),l=class extends T{colorInput;colorPreview;triggerBtn;textInput;isFormComponent=!0;useDefaultSwatches=!0;initialized=!1;constructor(){super()}connectedCallback(){super.connectedCallback(),this.swatches.length||(this.useDefaultSwatches=!0,this.append(...this.defaultSwatches)),this.clearable&&this.appendClearableButton(),this.textInput=this.container?.querySelector("ids-trigger-field"),this.colorInput=this.container?.querySelector(".advanced-color-picker"),this.colorPreview=this.container?.querySelector(".color-preview"),this.triggerBtn=this.container?.querySelector("ids-trigger-button"),this.#e(this.value),this.#t(),this.#l(),this.initialized=!0}disconnectedCallback(){super.disconnectedCallback(),this.#n()}static get attributes(){return[...super.attributes,i.ADVANCED,i.CHECKED,i.COMPACT,i.DISABLED,i.LABEL,i.PLACEHOLDER,i.SUPPRESS_LABELS,i.READONLY,i.TABBABLE,i.TABINDEX,i.SIZE,i.SUPPRESS_TOOLTIPS,i.TOOLTIP,i.VALIDATE,i.VALUE]}template(){let t=this.#o(),e=this.readonly?"readonly":"",r=this.disabled?"disabled":"",o=this.dirtyTracker?"dirty-tracker":"";return`<div class="ids-color-picker">
       ${this.advanced?this.colorPickerAdvancedHtml:""}
-      <ids-trigger-field label="${this.label}" ${r} ${e} ${o}>
-        <ids-color ${e} size="${t}" tabindex="-1" class="color-preview" slot="trigger-start"></ids-color>
+      <ids-trigger-field label="${this.label}" ${e} ${r} ${o}>
+        <ids-color ${r} size="${t}" tabindex="-1" class="color-preview" slot="trigger-start"></ids-color>
         <ids-trigger-button slot="trigger-end" class="color-picker-trigger-btn" tabindex="-1">
           <ids-text audible="true" translate-text="true"></ids-text>
           <ids-icon icon="dropdown"></ids-icon>
@@ -920,4 +920,4 @@ ids-input::part(container) {
       <ids-popup id="color-picker-popup" type="menu">
         <slot slot="content" class="color-popup"></slot>
       </ids-popup>
-    </ids-color-picker>`}get colorPreviewHtml(){return`<ids-color${this.disabled?" disabled":""} tabindex="-1" class="color-preview" size="${this.#o()}"></ids-color>`}get popup(){return this.container?.querySelector("#color-picker-popup")}get colorPickerAdvancedHtml(){return this.advanced?'<input class="advanced-color-picker" tabindex="-1" type="color"/>':""}get swatches(){return[...this.querySelectorAll("ids-color")]}get defaultSwatches(){let t=/^--ids-color-(([^0-9]+)-([0-9]+))$/,r=o=>{let s=new b,[c,p,u,a]=o.match(t)||[];return s.label=p,s.tooltip=`${u} ${a}`,s.hex=getComputedStyle(this.parentElement).getPropertyValue(String(c))||`var(${c})`,s.classList.add(Number(a)<40?"light":"dark"),s};return[...Object.values(["--ids-color-ruby-10","--ids-color-ruby-20","--ids-color-ruby-30","--ids-color-ruby-40","--ids-color-ruby-50","--ids-color-ruby-60","--ids-color-ruby-70","--ids-color-ruby-80","--ids-color-ruby-90","--ids-color-ruby-100"]),...Object.values(["--ids-color-amber-10","--ids-color-amber-20","--ids-color-amber-30","--ids-color-amber-40","--ids-color-amber-50","--ids-color-amber-60","--ids-color-amber-70","--ids-color-amber-80","--ids-color-amber-90","--ids-color-amber-100"]),...Object.values(["--ids-color-emerald-10","--ids-color-emerald-20","--ids-color-emerald-30","--ids-color-emerald-40","--ids-color-emerald-50","--ids-color-emerald-60","--ids-color-emerald-70","--ids-color-emerald-80","--ids-color-emerald-90","--ids-color-emerald-100"]),...Object.values(["--ids-color-azure-10","--ids-color-azure-20","--ids-color-azure-30","--ids-color-azure-40","--ids-color-azure-50","--ids-color-azure-60","--ids-color-azure-70","--ids-color-azure-80","--ids-color-azure-90","--ids-color-azure-100"]),...Object.values(["--ids-color-turquoise-10","--ids-color-turquoise-20","--ids-color-turquoise-30","--ids-color-turquoise-40","--ids-color-turquoise-50","--ids-color-turquoise-60","--ids-color-turquoise-70","--ids-color-turquoise-80","--ids-color-turquoise-90","--ids-color-turquoise-100"]),...Object.values(["--ids-color-amethyst-10","--ids-color-amethyst-20","--ids-color-amethyst-30","--ids-color-amethyst-40","--ids-color-amethyst-50","--ids-color-amethyst-60","--ids-color-amethyst-70","--ids-color-amethyst-80","--ids-color-amethyst-90","--ids-color-amethyst-100"]),...Object.values(["--ids-color-neutral-10","--ids-color-neutral-20","--ids-color-neutral-30","--ids-color-neutral-40","--ids-color-neutral-50","--ids-color-neutral-60","--ids-color-neutral-70","--ids-color-neutral-80","--ids-color-neutral-90","--ids-color-neutral-100"])].map(r)}set value(t){t=t?.trim()??"",t?this.setAttribute(i.VALUE,t):this.removeAttribute(i.VALUE),this.#d(t),this.#u(this.#i(t))}get value(){return this.getAttribute(i.VALUE)??""}set placeholder(t){t?(this.setAttribute(i.PLACEHOLDER,t),this.textInput?.setAttribute(i.PLACEHOLDER,t)):(this.removeAttribute(i.PLACEHOLDER),this.textInput?.removeAttribute(i.PLACEHOLDER))}get placeholder(){return this.getAttribute(i.PLACEHOLDER)??""}set size(t){t?(this.setAttribute(i.SIZE,t),this.textInput?.setAttribute(i.SIZE,t)):(this.removeAttribute(i.SIZE),this.textInput?.removeAttribute(i.SIZE))}get size(){return this.getAttribute(i.SIZE)}set validate(t){t?(this.setAttribute(i.VALIDATE,t),this.textInput?.setAttribute(i.VALIDATE,t)):(this.removeAttribute(i.VALIDATE),this.textInput?.removeAttribute(i.VALIDATE))}get validate(){return this.getAttribute(i.VALIDATE)}set tabbable(t){n(t)?(this.setAttribute(i.TABBABLE,""),this.textInput?.setAttribute(i.TABBABLE,"")):(this.removeAttribute(i.TABBABLE),this.textInput?.removeAttribute(i.TABBABLE))}get tabbable(){return n(this.getAttribute(i.TABBABLE))}set tooltip(t){t?(this.setAttribute(i.TOOLTIP,t),this.textInput?.setAttribute(i.TOOLTIP,t)):(this.removeAttribute(i.TOOLTIP),this.textInput?.removeAttribute(i.TOOLTIP))}get tooltip(){return this.getAttribute(i.TOOLTIP)}set advanced(t){let r=["#",/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/];n(t)?(this.setAttribute(i.ADVANCED,"true"),this.colorInput||this.container?.insertAdjacentHTML("afterbegin",this.colorPickerAdvancedHtml),this.colorInput=this.container?.querySelector(".advanced-color-picker"),this.#s(),this.#d(this.value),this.textInput&&(this.textInput.mask=r)):(this.removeAttribute(i.ADVANCED),this.#a(),this.container?.querySelector(".advanced-color-picker")?.remove(),this.colorInput=null,this.textInput&&(this.textInput.mask=void 0))}get advanced(){return n(this.getAttribute(i.ADVANCED))||!1}set disabled(t){n(t)?(this.setAttribute(i.DISABLED,""),this.textInput?.setAttribute(i.DISABLED,""),this.triggerBtn?.setAttribute(i.DISABLED,""),this.triggerBtn?.setAttribute(i.TABBABLE,"false")):(this.removeAttribute(i.DISABLED),this.textInput?.removeAttribute(i.DISABLED),this.triggerBtn?.removeAttribute(i.DISABLED),this.triggerBtn?.setAttribute(i.TABBABLE,String(this.tabbable)))}get disabled(){return n(this.getAttribute(i.DISABLED))}set readonly(t){n(t)?(this.setAttribute(i.READONLY,""),this.textInput?.setAttribute(i.READONLY,""),this.triggerBtn?.setAttribute(i.DISABLED,"")):(this.removeAttribute(i.READONLY),this.textInput?.removeAttribute(i.READONLY),this.triggerBtn?.removeAttribute(i.DISABLED))}get readonly(){return n(this.getAttribute(i.READONLY))}set suppressLabels(t){n(t)?this.setAttribute(i.SUPPRESS_LABELS,"true"):this.removeAttribute(i.SUPPRESS_LABELS),this.#t()}get suppressLabels(){return this.advanced?!0:n(this.getAttribute(i.SUPPRESS_LABELS))||!1}set suppressTooltips(t){n(t)?this.setAttribute(i.SUPPRESS_TOOLTIPS,"true"):this.removeAttribute(i.SUPPRESS_TOOLTIPS),this.#t()}get suppressTooltips(){return this.advanced?!0:n(this.getAttribute(i.SUPPRESS_TOOLTIPS))||!1}set compact(t){n(t)?(this.setAttribute(i.COMPACT,""),this.textInput?.setAttribute(i.COMPACT,"")):(this.removeAttribute(i.COMPACT),this.textInput?.removeAttribute(i.COMPACT))}get compact(){return n(this.getAttribute(i.COMPACT))}close(){this.popup?.setAttribute(i.VISIBLE,"false"),this.removeOpenEvents(),this.#t()}open(){if(this.advanced||this.disabled||this.readonly||!this.popup)return;if(this.useDefaultSwatches){let r=this.swatches;for(let e=0;e<r.length;e++)r[e].remove();this.append(...this.defaultSwatches)}let t=this.localeAPI.isRTL();this.popup.align=`bottom, ${t?"right":"left"}`,this.popup.arrow="bottom",this.popup.arrowTarget=this.triggerBtn,this.popup.alignTarget=this.textInput,this.popup.visible=!0,this.popup.show(),this.addOpenEvents(),this.#t()}onOutsideClick(){this.close()}#l(){this.#n(),this.textInput?.onEvent("change",this.textInput,t=>{t.stopPropagation(),this.#r(t.detail.value),this.triggerEvent("change",this,{bubbles:!0,detail:{...t.detail,elem:this}})}),this.textInput?.onEvent("input",this.textInput,t=>{t.stopPropagation();let r=t.target;this.#e(r.value),this.triggerEvent("input",this,{bubbles:!0,detail:{elem:this,value:r?.value}})}),this.onEvent("click.color-picker-container",this.container,t=>{let r=t.target;if(!this.readonly&&!this.disabled){if(r.closest(".color-picker-trigger-btn, .color-preview")){this.#p();return}r.name?.toLowerCase()==="ids-color"&&!r.classList.contains("color-preview")&&(this.#r(r?.hex),this.close())}}),this.advanced&&this.#s(),this.onEvent("keydown.color-picker",this,t=>{if(t.target.name==="id-color-picker"&&t.preventDefault(),t.key==="Escape")this.close();else if(["Enter","Space"," "].includes(t.key))if(this.popup?.visible){let e=String(t.target.name).toLowerCase()==="ids-color"?t.target:document.activeElement;this.#r(e?.hex),this.close()}else t.key==="Enter"&&this.open();else t.key==="ArrowDown"&&(t.preventDefault(),this.popup?.visible||this.open())}),this.onEvent("keydown.color-picker-popup",this.popup,t=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Space"," "].includes(t.key)){t.preventDefault();let e=10,o=this.swatches,s=o[0],c=o[o.length-1],p=document.activeElement?.closest("ids-color")||s,u=t.target.name.toLowerCase()==="ids-color"?t.target:p,a=o.indexOf(u),L=o[a-1]||c,C=o[a+1]||s;if(t.key==="ArrowRight")C.swatch?.focus();else if(t.key==="ArrowLeft")L.swatch?.focus();else if(t.key==="ArrowUp"){let d=a-e;if(d>=0){let[h]=o.splice(d,1);h?.swatch?.focus()}}else if(t.key==="ArrowDown"){let d=a+e;if(d<o.length){let[h]=o.splice(d,1);h?.swatch?.focus()}}}})}#e(t){this.colorPreview?.setAttribute(i.HEX,this.#i(t)?.hex||t||"")}#n(){this.offEvent("click.color-picker-container",this.container),this.offEvent("change.color-picer-text",this.textInput),this.offEvent("input.color-picker-text",this.textInput),this.offEvent("keydown.color-picker",this),this.onEvent("keydown.color-picker-popup",this.popup),this.#a()}#s(){this.offEvent("change.color-picker-input",this.colorInput),this.onEvent("change.color-picker-input",this.colorInput,t=>{this.#r(t.target.value)}),this.offEvent("input.color-picker-input",this.colorInput),this.onEvent("input.color-picker-input",this.colorInput,t=>{t.stopPropagation(),this.#e(t.target.value)})}#a(){this.offEvent("change.color-picker-input",this.colorInput),this.offEvent("input.color-picker-input",this.colorInput)}#t(){this.swatches.forEach(t=>{t.classList.add("outlined"),t.tooltip=this.suppressLabels?this.tooltip||t.hex:this.tooltip||t.label,this.suppressTooltips&&(t.tooltip=""),this.popup?.visible?t.removeAttribute(i.TABINDEX):t.setAttribute(i.TABINDEX,"-1")}),(this.#i(this.value)||this.swatches[0])?.swatch?.focus()}#i(t){return this.swatches.find(e=>{if(!t)return!e.hex;let o=String(e.hex).trim().toLowerCase(),s=String(e.label).trim().toLowerCase();return[o,s].includes(String(t).trim().toLowerCase())})}appendClearableButton(){!this.swatches.find(r=>!r.getAttribute(i.HEX))&&this.initialized&&(this.append(new b),this.#t())}removeClearableButton(){this.swatches.find(r=>!r.getAttribute(i.HEX))?.remove()}#c(){if(this.advanced)return this.colorInput?this.colorInput.value:null;let t=this.querySelectorAll("ids-color[checked]")?.[0];return t?t.hex:null}#p(){if(this.advanced){this.colorInput?.click();return}this.popup?.visible?this.close():this.open()}#r(t){if(t){let r=this.#i(t);this.value=r?.hex||t}else this.value=""}#u(t){let r=this.querySelector("[checked]");r&&r.removeAttribute(i.CHECKED),t&&t.setAttribute(i.CHECKED,"")}#o(){let t=this.compact?"mm":this.fieldHeight;return{compact:"xs",xs:"mm",sm:"mm",mm:"mm",md:"md",lg:"lg"}[t]||"md"}onFieldHeightChange(t){this.textInput?.setAttribute(i.FIELD_HEIGHT,t),this.colorPreview?.setAttribute(i.SIZE,this.#o())}onDirtyTrackerChange(t){this.textInput?.setAttribute(i.DIRTY_TRACKER,String(t))}onLabelChange(t){this.textInput?.setAttribute(i.LABEL,t)}onLabelStateChange(t){t?this.textInput?.setAttribute(i.LABEL_STATE,t):this.textInput?.removeAttribute(i.LABEL_STATE)}#d(t){if(!this.colorPreview)return;let r=t??this.#c(),e=this.#i(r),o=e?.hex||r;if(this.#e(o??""),this.advanced&&this.colorInput&&(this.colorInput.value=o?.length!==7?"#ffffff":o),o&&this.textInput){let s=!this.suppressLabels&&e?.label||e?.hex||o;this.textInput.value=s}else this.textInput&&(this.textInput.value="")}};l=v([g("ids-color-picker"),f(S)],l);export{l as a};
+    </ids-color-picker>`}get colorPreviewHtml(){return`<ids-color${this.disabled?" disabled":""} tabindex="-1" class="color-preview" size="${this.#o()}"></ids-color>`}get popup(){return this.container?.querySelector("#color-picker-popup")}get colorPickerAdvancedHtml(){return this.advanced?'<input class="advanced-color-picker" tabindex="-1" type="color"/>':""}get swatches(){return[...this.querySelectorAll("ids-color")]}get defaultSwatches(){let t=/^--ids-color-(([^0-9]+)-([0-9]+))$/,e=o=>{let a=new b,[c,p,u,s]=o.match(t)||[];return a.label=p,a.tooltip=`${u} ${s}`,a.hex=getComputedStyle(this.parentElement).getPropertyValue(String(c))||`var(${c})`,a.classList.add(Number(s)<40?"light":"dark"),a};return[...Object.values(["--ids-color-ruby-10","--ids-color-ruby-20","--ids-color-ruby-30","--ids-color-ruby-40","--ids-color-ruby-50","--ids-color-ruby-60","--ids-color-ruby-70","--ids-color-ruby-80","--ids-color-ruby-90","--ids-color-ruby-100"]),...Object.values(["--ids-color-amber-10","--ids-color-amber-20","--ids-color-amber-30","--ids-color-amber-40","--ids-color-amber-50","--ids-color-amber-60","--ids-color-amber-70","--ids-color-amber-80","--ids-color-amber-90","--ids-color-amber-100"]),...Object.values(["--ids-color-emerald-10","--ids-color-emerald-20","--ids-color-emerald-30","--ids-color-emerald-40","--ids-color-emerald-50","--ids-color-emerald-60","--ids-color-emerald-70","--ids-color-emerald-80","--ids-color-emerald-90","--ids-color-emerald-100"]),...Object.values(["--ids-color-azure-10","--ids-color-azure-20","--ids-color-azure-30","--ids-color-azure-40","--ids-color-azure-50","--ids-color-azure-60","--ids-color-azure-70","--ids-color-azure-80","--ids-color-azure-90","--ids-color-azure-100"]),...Object.values(["--ids-color-turquoise-10","--ids-color-turquoise-20","--ids-color-turquoise-30","--ids-color-turquoise-40","--ids-color-turquoise-50","--ids-color-turquoise-60","--ids-color-turquoise-70","--ids-color-turquoise-80","--ids-color-turquoise-90","--ids-color-turquoise-100"]),...Object.values(["--ids-color-amethyst-10","--ids-color-amethyst-20","--ids-color-amethyst-30","--ids-color-amethyst-40","--ids-color-amethyst-50","--ids-color-amethyst-60","--ids-color-amethyst-70","--ids-color-amethyst-80","--ids-color-amethyst-90","--ids-color-amethyst-100"]),...Object.values(["--ids-color-neutral-10","--ids-color-neutral-20","--ids-color-neutral-30","--ids-color-neutral-40","--ids-color-neutral-50","--ids-color-neutral-60","--ids-color-neutral-70","--ids-color-neutral-80","--ids-color-neutral-90","--ids-color-neutral-100"])].map(e)}set value(t){t=t?.trim()??"",t?this.setAttribute(i.VALUE,t):this.removeAttribute(i.VALUE),this.#d(t),this.#u(this.#i(t))}get value(){return this.getAttribute(i.VALUE)??""}set placeholder(t){t?(this.setAttribute(i.PLACEHOLDER,t),this.textInput?.setAttribute(i.PLACEHOLDER,t)):(this.removeAttribute(i.PLACEHOLDER),this.textInput?.removeAttribute(i.PLACEHOLDER))}get placeholder(){return this.getAttribute(i.PLACEHOLDER)??""}set size(t){t?(this.setAttribute(i.SIZE,t),this.textInput?.setAttribute(i.SIZE,t)):(this.removeAttribute(i.SIZE),this.textInput?.removeAttribute(i.SIZE))}get size(){return this.getAttribute(i.SIZE)}set validate(t){t?(this.setAttribute(i.VALIDATE,t),this.textInput?.setAttribute(i.VALIDATE,t)):(this.removeAttribute(i.VALIDATE),this.textInput?.removeAttribute(i.VALIDATE))}get validate(){return this.getAttribute(i.VALIDATE)}set tabbable(t){n(t)?(this.setAttribute(i.TABBABLE,""),this.textInput?.setAttribute(i.TABBABLE,"")):(this.removeAttribute(i.TABBABLE),this.textInput?.removeAttribute(i.TABBABLE))}get tabbable(){return n(this.getAttribute(i.TABBABLE))}set tooltip(t){t?(this.setAttribute(i.TOOLTIP,t),this.textInput?.setAttribute(i.TOOLTIP,t)):(this.removeAttribute(i.TOOLTIP),this.textInput?.removeAttribute(i.TOOLTIP))}get tooltip(){return this.getAttribute(i.TOOLTIP)}set advanced(t){let e=["#",/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/,/[0-9a-fA-F]/];n(t)?(this.setAttribute(i.ADVANCED,"true"),this.colorInput||this.container?.insertAdjacentHTML("afterbegin",this.colorPickerAdvancedHtml),this.colorInput=this.container?.querySelector(".advanced-color-picker"),this.#a(),this.#d(this.value),this.textInput&&(this.textInput.mask=e)):(this.removeAttribute(i.ADVANCED),this.#s(),this.container?.querySelector(".advanced-color-picker")?.remove(),this.colorInput=null,this.textInput&&(this.textInput.mask=void 0))}get advanced(){return n(this.getAttribute(i.ADVANCED))||!1}set disabled(t){n(t)?(this.setAttribute(i.DISABLED,""),this.textInput?.setAttribute(i.DISABLED,""),this.triggerBtn?.setAttribute(i.DISABLED,""),this.triggerBtn?.setAttribute(i.TABBABLE,"false")):(this.removeAttribute(i.DISABLED),this.textInput?.removeAttribute(i.DISABLED),this.triggerBtn?.removeAttribute(i.DISABLED),this.triggerBtn?.setAttribute(i.TABBABLE,String(this.tabbable)))}get disabled(){return n(this.getAttribute(i.DISABLED))}set readonly(t){n(t)?(this.setAttribute(i.READONLY,""),this.textInput?.setAttribute(i.READONLY,""),this.triggerBtn?.setAttribute(i.DISABLED,"")):(this.removeAttribute(i.READONLY),this.textInput?.removeAttribute(i.READONLY),this.triggerBtn?.removeAttribute(i.DISABLED))}get readonly(){return n(this.getAttribute(i.READONLY))}set suppressLabels(t){n(t)?this.setAttribute(i.SUPPRESS_LABELS,"true"):this.removeAttribute(i.SUPPRESS_LABELS),this.#t()}get suppressLabels(){return this.advanced?!0:n(this.getAttribute(i.SUPPRESS_LABELS))||!1}set suppressTooltips(t){n(t)?this.setAttribute(i.SUPPRESS_TOOLTIPS,"true"):this.removeAttribute(i.SUPPRESS_TOOLTIPS),this.#t()}get suppressTooltips(){return this.advanced?!0:n(this.getAttribute(i.SUPPRESS_TOOLTIPS))||!1}set compact(t){n(t)?(this.setAttribute(i.COMPACT,""),this.textInput?.setAttribute(i.COMPACT,"")):(this.removeAttribute(i.COMPACT),this.textInput?.removeAttribute(i.COMPACT))}get compact(){return n(this.getAttribute(i.COMPACT))}close(){this.popup?.setAttribute(i.VISIBLE,"false"),this.removeOpenEvents(),this.#t()}open(){if(this.advanced||this.disabled||this.readonly||!this.popup)return;if(this.useDefaultSwatches){let e=this.swatches;for(let r=0;r<e.length;r++)e[r].remove();this.append(...this.defaultSwatches)}let t=this.localeAPI.isRTL();this.popup.align=`bottom, ${t?"right":"left"}`,this.popup.arrow="bottom",this.popup.arrowTarget=this.triggerBtn,this.popup.alignTarget=this.textInput,this.popup.visible=!0,this.popup.show(),this.addOpenEvents(),this.#t()}onOutsideClick(){this.close()}#l(){this.#n(),this.textInput?.onEvent("change",this.textInput,t=>{t.stopPropagation(),this.#e(t.detail.value),this.triggerEvent("change",this,{bubbles:!0,detail:{...t.detail,elem:this}})}),this.textInput?.onEvent("input",this.textInput,t=>{t.stopPropagation();let e=t.target;this.#r(e.value),this.triggerEvent("input",this,{bubbles:!0,detail:{elem:this,value:e?.value}})}),this.onEvent("click.color-picker-container",this.container,t=>{let e=t.target;if(!this.readonly&&!this.disabled){if(e.closest(".color-picker-trigger-btn, .color-preview")){this.#p();return}e.name?.toLowerCase()==="ids-color"&&!e.classList.contains("color-preview")&&(this.#e(e?.hex),this.close())}}),this.advanced&&this.#a(),this.onEvent("keydown.color-picker",this,t=>{if(t.target.name==="id-color-picker"&&t.preventDefault(),t.key==="Escape")this.close();else if(["Enter","Space"," "].includes(t.key))if(this.popup?.visible){let r=String(t.target.name).toLowerCase()==="ids-color"?t.target:document.activeElement;this.#e(r?.hex),this.close()}else t.key==="Enter"&&this.open();else t.key==="ArrowDown"&&(t.preventDefault(),this.popup?.visible||this.open())}),this.onEvent("keydown.color-picker-popup",this.popup,t=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Space"," "].includes(t.key)){t.preventDefault();let r=10,o=this.swatches,a=o[0],c=o[o.length-1],p=document.activeElement?.closest("ids-color")||a,u=t.target.name.toLowerCase()==="ids-color"?t.target:p,s=o.indexOf(u),L=o[s-1]||c,C=o[s+1]||a;if(t.key==="ArrowRight")C.swatch?.focus();else if(t.key==="ArrowLeft")L.swatch?.focus();else if(t.key==="ArrowUp"){let d=s-r;if(d>=0){let[h]=o.splice(d,1);h?.swatch?.focus()}}else if(t.key==="ArrowDown"){let d=s+r;if(d<o.length){let[h]=o.splice(d,1);h?.swatch?.focus()}}}})}#r(t){this.colorPreview?.setAttribute(i.HEX,this.#i(t)?.hex||t||"")}#n(){this.offEvent("click.color-picker-container",this.container),this.offEvent("change.color-picer-text",this.textInput),this.offEvent("input.color-picker-text",this.textInput),this.offEvent("keydown.color-picker",this),this.onEvent("keydown.color-picker-popup",this.popup),this.#s()}#a(){this.offEvent("change.color-picker-input",this.colorInput),this.onEvent("change.color-picker-input",this.colorInput,t=>{this.#e(t.target.value)}),this.offEvent("input.color-picker-input",this.colorInput),this.onEvent("input.color-picker-input",this.colorInput,t=>{t.stopPropagation(),this.#r(t.target.value)})}#s(){this.offEvent("change.color-picker-input",this.colorInput),this.offEvent("input.color-picker-input",this.colorInput)}#t(){this.swatches.forEach(t=>{t.classList.add("outlined"),t.tooltip=this.suppressLabels?this.tooltip||t.hex:this.tooltip||t.label,this.suppressTooltips&&(t.tooltip=""),this.popup?.visible?t.removeAttribute(i.TABINDEX):t.setAttribute(i.TABINDEX,"-1")}),(this.#i(this.value)||this.swatches[0])?.swatch?.focus()}#i(t){return this.swatches.find(r=>{if(!t)return!r.hex;let o=String(r.hex).trim().toLowerCase(),a=String(r.label).trim().toLowerCase();return[o,a].includes(String(t).trim().toLowerCase())})}appendClearableButton(){!this.swatches.find(e=>!e.getAttribute(i.HEX))&&this.initialized&&(this.append(new b),this.#t())}removeClearableButton(){this.swatches.find(e=>!e.getAttribute(i.HEX))?.remove()}#c(){if(this.advanced)return this.colorInput?this.colorInput.value:null;let t=this.querySelectorAll("ids-color[checked]")?.[0];return t?t.hex:null}#p(){if(this.advanced){this.colorInput?.click();return}this.popup?.visible?this.close():this.open()}#e(t){if(t){let e=this.#i(t);this.value=e?.hex||t}else this.value=""}#u(t){let e=this.querySelector("[checked]");e&&e.removeAttribute(i.CHECKED),t&&t.setAttribute(i.CHECKED,"")}#o(){let t=this.compact?"mm":this.fieldHeight;return{compact:"xs",xs:"mm",sm:"mm",mm:"mm",md:"md",lg:"lg"}[t]||"md"}onFieldHeightChange(t){this.textInput?.setAttribute(i.FIELD_HEIGHT,t),this.colorPreview?.setAttribute(i.SIZE,this.#o())}onDirtyTrackerChange(t){this.textInput?.setAttribute(i.DIRTY_TRACKER,String(t))}onLabelChange(t){this.textInput?.setAttribute(i.LABEL,t)}onLabelStateChange(t){t?this.textInput?.setAttribute(i.LABEL_STATE,t):this.textInput?.removeAttribute(i.LABEL_STATE)}#d(t){if(!this.colorPreview)return;let e=t??this.#c(),r=this.#i(e),o=r?.hex||e;if(this.#r(o??""),this.advanced&&this.colorInput&&(this.colorInput.value=o?.length!==7?"#ffffff":o),o&&this.textInput){let a=!this.suppressLabels&&r?.label||r?.hex||o;this.textInput.value=a}else this.textInput&&(this.textInput.value="")}};l=v([f("ids-color-picker"),g(S)],l);export{l as a};