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

package/{chunks/ids-chunk-CBPGHRMM.js → components/ids-search-field/ids-search-field.css}

@@ -1,4 +1,3 @@
-import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXCSNZ.js";import{a as s,b as l}from"./ids-chunk-XE4WFW5M.js";import{a as d}from"./ids-chunk-EZRDAHD3.js";import{a}from"./ids-chunk-U7OOVFXE.js";var p=`
 @charset "UTF-8";
 /**
  * Css for clearable mixin
@@ -94,7 +93,7 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 }
 
 .label-state-hidden .ids-label-text.empty::before {
-  content: "\xA0";
+  content: " ";
 }
 
 .label-state-collapsed .ids-label-text {
@@ -105,44 +104,44 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   -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,23 +153,23 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .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;
   justify-content: inherit;
 }
 .ids-label-text.empty::before {
-  content: "\xA0";
+  content: " ";
 }
 .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,15 +184,15 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 }
 
 .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 {
+:root {
   display: block;
-  max-width: calc(var(--ids-input-width-full) - 2px);
+  max-width: var(--ids-input-width-full);
 }
 :host .ids-input {
   display: inline-block;
@@ -233,38 +232,38 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   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 +272,13 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .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 +295,14 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   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);
-  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 +310,11 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   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,12 +340,15 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   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 {
   margin: 0;
 }
+.ids-input.no-margins.field-height-xs, .ids-input.no-margins.compact.field-height-xs {
+  margin-block-end: 0;
+}
 .ids-input.no-margins .field-container, .ids-input.no-margins.compact .field-container {
   margin-bottom: 0;
 }
@@ -355,7 +357,7 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 }
 .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;
@@ -363,19 +365,19 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   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;
@@ -383,19 +385,24 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .ids-input.full .field-container {
   width: var(--ids-input-width-full);
 }
+@media (max-width: 360px) {
+  .ids-input .field-container {
+    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;
@@ -405,27 +412,27 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   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;
@@ -433,14 +440,15 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .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-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;
@@ -450,28 +458,33 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 }
 .ids-input.color-variant-borderless .field-container {
   background-color: transparent;
-  border-color: transparent;
+  border-color: transparent !important;
 }
 .ids-input.color-variant-borderless:focus-within .field-container {
   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 {
-  padding-inline: var(--ids-spacing-sm);
+  font-size: var(--ids-data-grid-font-size-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-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;
@@ -479,6 +492,7 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 }
 .ids-input.color-variant-in-cell.ids-input.full .field-container {
   margin-inline: 3px;
+  width: initial;
 }
 .ids-input.color-variant-in-cell.ids-input.field-height-md .ids-input-field {
   padding-inline: 6px;
@@ -509,25 +523,25 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   /* 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;
@@ -535,18 +549,18 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .ids-input.bg-transparent:focus-within .field-container {
   background-color: transparent;
 }
-.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .field-container, .ids-input:hover.readonly.readonly-background .field-container {
-  border-color: var(--ids-input-hover-border-color);
+.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-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,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning,
-.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover, .ids-input:hover.readonly.readonly-background .alert,
-.ids-input:hover.readonly.readonly-background .alert:hover,
-.ids-input:hover.readonly.readonly-background .warning,
-.ids-input:hover.readonly.readonly-background .warning:hover {
-  border-color: var(--ids-input-alert-border-color);
-  color: var(--ids-input-alert-text-color);
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert,
+.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-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,
@@ -554,92 +568,95 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:focus-within,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning.is-active,
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover:focus-within,
-.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover.is-active, .ids-input:hover.readonly.readonly-background .alert:focus-within, .ids-input:hover.readonly.readonly-background .alert.is-active,
-.ids-input:hover.readonly.readonly-background .alert:hover:focus-within,
-.ids-input:hover.readonly.readonly-background .alert:hover.is-active,
-.ids-input:hover.readonly.readonly-background .warning:focus-within,
-.ids-input:hover.readonly.readonly-background .warning.is-active,
-.ids-input:hover.readonly.readonly-background .warning:hover:focus-within,
-.ids-input:hover.readonly.readonly-background .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;
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:focus-within,
+.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-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],
 .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning[disabled],
-.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover[disabled], .ids-input:hover.readonly.readonly-background .alert[disabled],
-.ids-input:hover.readonly.readonly-background .alert:hover[disabled],
-.ids-input:hover.readonly.readonly-background .warning[disabled],
-.ids-input:hover.readonly.readonly-background .warning:hover[disabled] {
-  border-color: var(--ids-input-alert-disabled-border-color);
-  color: var(--ids-input-alert-disabled-text-color);
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert[disabled],
+.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-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 .error,
-.ids-input:hover.readonly.readonly-background .error:hover {
-  border-color: var(--ids-input-error-border-color);
-  color: var(--ids-input-error-text-color);
+.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-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 .error:focus-within, .ids-input:hover.readonly.readonly-background .error.is-active,
-.ids-input:hover.readonly.readonly-background .error:hover:focus-within,
-.ids-input:hover.readonly.readonly-background .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;
+.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-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 .error[disabled],
-.ids-input:hover.readonly.readonly-background .error:hover[disabled] {
-  border-color: var(--ids-input-error-disabled-border-color);
-  color: var(--ids-input-error-disabled-border-color);
+.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-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 .info,
-.ids-input:hover.readonly.readonly-background .info:hover {
-  border-color: var(--ids-input-info-border-color);
-  color: var(--ids-input-info-text-color);
+.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-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 .info:focus-within, .ids-input:hover.readonly.readonly-background .info.is-active,
-.ids-input:hover.readonly.readonly-background .info:hover:focus-within,
-.ids-input:hover.readonly.readonly-background .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;
+.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-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 .info[disabled],
-.ids-input:hover.readonly.readonly-background .info:hover[disabled] {
-  border-color: var(--ids-input-info-disabled-border-color);
-  color: var(--ids-input-info-disabled-text-color);
+.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-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 .success,
-.ids-input:hover.readonly.readonly-background .success:hover {
-  border-color: var(--ids-input-success-border-color);
-  color: var(--ids-input-success-text-color);
+.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-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 .success:focus-within, .ids-input:hover.readonly.readonly-background .success.is-active,
-.ids-input:hover.readonly.readonly-background .success:hover:focus-within,
-.ids-input:hover.readonly.readonly-background .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;
+.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-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 .success[disabled],
-.ids-input:hover.readonly.readonly-background .success:hover[disabled] {
-  border-color: var(--ids-input-success-disabled-border-color);
-  color: var(--ids-input-success-disabled-text-color);
+.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-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-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,
@@ -648,102 +665,102 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 .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.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless):hover .field-container {
-  border-color: var(--ids-data-grid-filter-input-hover-color);
+.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-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;
@@ -766,27 +783,27 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 
 :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] {
@@ -822,6 +839,17 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   margin-inline-start: 4px;
 }
 
+::slotted(.audible) {
+  clip: rect(0, 0, 0, 0);
+  height: 0;
+  line-height: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
 :host([part=trigger-field]) {
   justify-content: flex-start;
 }
@@ -841,7 +869,7 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
 }
 
 .ids-input.color-variant-alternate-formatter:focus-within .field-container {
-  box-shadow: var(--ids-trigger-field-focus-box-shadow);
+  box-shadow: var(--ids-trigger-field-shadow-focus);
 }
 .ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
   box-shadow: none;
@@ -851,71 +879,104 @@ import{a as c}from"./ids-chunk-5J2HUPTU.js";import{c as n}from"./ids-chunk-LCUXC
   box-shadow: none;
 }
 
+:host ids-menu-button {
+  transition: border var(--ids-motion-duration) var(--ids-motion-ease);
+  border: 0;
+  border-inline: 0;
+  border-inline-end: 1px solid var(--ids-input-color-border-default);
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  margin: 0;
+  margin-inline: 0;
+  padding: 0;
+  padding-inline: 0;
+}
+:host ids-menu-button > * {
+  display: inline-flex;
+  align-self: center;
+}
+:host ids-menu-button::part(button) {
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  margin-inline: 0;
+  padding: 0;
+  padding-inline: 0;
+  padding-inline: var(--ids-search-field-icon-margin);
+}
+:host ids-menu-button::part(button), :host ids-menu-button::part(button):active, :host ids-menu-button::part(button):hover {
+  background: transparent;
+  background-color: transparent;
+}
+
+:host(:focus-within) ids-menu-button,
+:host(:focus-visible) ids-menu-button {
+  border-color: var(--ids-input-color-border-focus);
+}
+:host(:focus-within) ids-menu-button::part(button),
+:host(:focus-visible) ids-menu-button::part(button) {
+  color: var(--ids-button-tertiary-color-text-hover);
+}
+
+:host(:active) ids-menu-button,
+:host(:hover) ids-menu-button {
+  border-color: var(--ids-input-color-border-hover);
+}
+
 .ids-search-field ids-icon.search-icon {
-  margin-inline-start: var(--ids-searchfield-app-menu-search-icon-margin);
+  margin-inline-start: var(--ids-search-field-icon-margin);
+}
+.ids-search-field .fieldset {
+  display: inline-flex;
+  flex-direction: row;
+}
+.ids-search-field #category-action-button::part(button) {
+  padding: var(--ids-space-40);
+  margin-inline-start: var(--ids-search-field-icon-margin);
 }
 .ids-search-field.color-variant-alternate .field-container {
   border-style: none;
-  background-color: var(--ids-searchfield-header-background-color);
-  color: var(--ids-searchfield-header-text-color);
+  background-color: var(--ids-search-field-header-color-background);
+  color: var(--ids-search-field-header-color-text);
 }
 .ids-search-field.color-variant-alternate ids-icon {
-  color: var(--ids-searchfield-header-icon-color);
+  color: var(--ids-search-field-header-color-icon-default);
 }
 .ids-search-field.color-variant-card .field-container {
-  background: var(--ids-searchfield-card-background-color);
-  color: var(--ids-searchfield-card-text-color);
+  background: var(--ids-search-field-card-color-background);
+  color: var(--ids-search-field-card-color-text);
 }
 .ids-search-field.color-variant-card .btn-clear:hover {
   background-color: transparent;
 }
 .ids-search-field.color-variant-app-menu {
-  color: var(--ids-searchfield-app-menu-text-color);
+  color: var(--ids-search-field-app-menu-color-text);
 }
 .ids-search-field.color-variant-app-menu .field-container {
   border-style: none;
-  border-radius: var(--ids-searchfield-app-menu-border-radius);
-  background-color: var(--ids-searchfield-app-menu-background-color);
-  color: var(--ids-searchfield-app-menu-text-color);
+  border-radius: var(--ids-search-field-border-radius);
+  background-color: var(--ids-search-field-app-menu-color-background);
+  color: var(--ids-search-field-app-menu-color-text);
 }
 .ids-search-field.color-variant-app-menu .ids-input-field {
-  color: var(--ids-searchfield-app-menu-text-color);
+  color: var(--ids-search-field-app-menu-color-text);
 }
 .ids-search-field.color-variant-app-menu .btn-clear {
-  color: var(--ids-searchfield-app-menu-icon-color);
+  color: var(--ids-search-field-app-menu-color-icon-default);
 }
 .ids-search-field.color-variant-app-menu .btn-clear:hover {
-  color: var(--ids-searchfield-app-menu-icon-hover-color);
+  color: var(--ids-search-field-app-menu-color-icon-hover);
 }
 .ids-search-field.color-variant-app-menu ids-icon::part(search-icon) {
-  color: var(--ids-searchfield-app-menu-text-color);
+  color: var(--ids-search-field-app-menu-color-text);
 }
 .ids-search-field.color-variant-app-menu:focus-within ids-icon::part(search-icon) {
-  color: var(--ids-searchfield-app-menu-icon-hover-color);
+  color: var(--ids-search-field-app-menu-color-icon-hover);
 }
 .ids-search-field.color-variant-app-menu:focus-within .field-container, .ids-search-field.color-variant-app-menu.readonly:focus-within .field-container {
-  box-shadow: var(--ids-searchfield-app-menu-focus-box-shadow);
-}`;var f="Search",g="Type to search",e=class extends c{constructor(){super()}isFormComponent=!0;colorVariants=["alternate","app-menu","card"];onColorVariantRefresh(i){let r=i||"";i==="app-menu"&&(r="alternate");let o=t=>{t.setAttribute(d.COLOR_VARIANT,r)};this.buttons.forEach(o),this.fieldContainer&&[...this.fieldContainer.querySelectorAll("ids-trigger-button")].forEach(o)}static get attributes(){return[...super.attributes]}connectedCallback(){super.connectedCallback(),this.#r(),this.#o(),this.placeholder||(this.placeholder=g),this.label||(this.label=f)}template(){this.templateHostAttributes();let{ariaLabel:i,containerClass:r,inputClass:o,inputState:t,labelHtml:u,placeholder:h,type:b,value:v}=this.templateVariables();return`<div id="ids-search-field" class="ids-search-field ids-trigger-field ${r}" part="container">
-      ${u}
-      <div class="field-container" part="field-container">
-        <ids-icon class="ids-icon search-icon starting-icon" size="medium" icon="search"></ids-icon>
-        <slot name="trigger-start"></slot>
-        <input
-          part="input"
-          id="${this.id}-input"
-          ${b}${o}${h}${t}
-          ${i}
-          ${v}
-          ></input>
-        <slot name="trigger-end"></slot>
-      </div>
-      ${this.autocomplete?`
-        <ids-popup
-          type="dropdown"
-          align="bottom, left"
-          align-target="#${this.id}-input"
-          part="popup"
-        >
-          <ids-list-box slot="content"></ids-list-box>
-        </ids-popup>`:""}
-    </div>`}async search(i){let r=[],o=n(i);return this.#i!==o&&(this.input&&(this.input.value=o),this.#i=o,typeof this.onSearch=="function"&&(r=await this.onSearch(o))),r}set value(i){super.value=i;let r=super.value;this.#i=r,typeof this.onSearch=="function"&&this.onSearch(r)}get value(){return super.value}onSearch(i=void 0){return[`${n(i)}`]}#i=null;#r(){let i=r=>{this.search(r.target.value)};this.onEvent("change",this.input,i),this.onEvent("input",this.input,i)}#o(){this.onEvent("keydown",this.input,i=>{let r=!i?.path?.length||!i.path[0].classList||!i.path[0].classList.contains("ids-icon-button");switch(["Enter"].indexOf(i.code)>-1&&r&&i.preventDefault(),i.key){case"Enter":r&&this.onSearch(this.input?.value);break;default:break}})}};e=a([s("ids-search-field"),l(p)],e);export{e as a};
+  box-shadow: var(--ids-search-field-app-menu-shadow-focus);
+}