ids-enterprise-wc 1.0.0-beta.14 → 1.0.0-beta.16

package/components/ids-search-field/ids-search-field.css

@@ -62,28 +62,6 @@
   margin-inline-start: 27px;
 }
 
-.ids-radio-group .icon-dirty {
-  margin-inline-start: -1px;
-  margin-block-start: 9px;
-  top: auto;
-  z-index: 1;
-}
-
-.ids-checkbox .icon-dirty {
-  margin-inline-start: -25px;
-}
-.ids-checkbox .icon-dirty[dir=rtl] {
-  margin-inline-start: -20px;
-  transform: none;
-  top: -1px;
-}
-.ids-checkbox.hitbox .icon-dirty {
-  margin-inline-start: -30px;
-}
-.ids-checkbox.hitbox .icon-dirty[dir=rtl] {
-  margin-inline-start: -26px;
-}
-
 .ids-textarea .icon-dirty {
   top: 0;
   margin-inline-start: 1px;
@@ -274,6 +252,8 @@
   display: block;
   margin-block-end: var(--ids-space-60);
   max-width: var(--ids-input-width-full);
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  /* stylelint-disable-next-line no-duplicate-selectors */
 }
 .ids-input .field-container {
   transition: border var(--ids-motion-duration) var(--ids-motion-ease);
@@ -295,7 +275,7 @@
   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-color-border-focus) !important;
+  border-color: var(--ids-input-color-border-focus);
   box-shadow: var(--ids-shadow-focus);
 }
 .ids-input .ids-icon.starting-icon {
@@ -333,6 +313,9 @@
 .ids-input .ids-input-field.start {
   text-align: start;
 }
+.ids-input .ids-input-field::placeholder {
+  color: var(--ids-input-color-text-placeholder);
+}
 .ids-input .ids-input-field.center {
   text-align: center;
 }
@@ -450,6 +433,13 @@
 .ids-input.color-variant-borderless input {
   font-size: var(--ids-font-size-40);
 }
+.ids-input.color-variant-borderless slot[name=trigger-start],
+.ids-input.color-variant-borderless slot[name=trigger-end] {
+  display: flex;
+}
+.ids-input.color-variant-borderless slot[name=trigger-end] {
+  padding-inline-end: 6px;
+}
 .ids-input.color-variant-borderless .icon-dirty {
   display: none;
 }
@@ -486,6 +476,9 @@
 .ids-input.color-variant-in-cell input {
   font-size: var(--ids-font-size-40);
 }
+.ids-input.color-variant-in-cell .validation-message {
+  display: none;
+}
 .ids-input.color-variant-in-cell.ids-input.field-height-lg .ids-input-field {
   padding-inline: 11px;
   height: 40px;
@@ -512,214 +505,251 @@
 .ids-input.color-variant-in-cell.ids-input.field-height-xs.full .field-container {
   margin-inline: 1px;
 }
-
-.caps-lock-indicator {
-  padding-inline-start: 8px;
-  padding-inline-end: 8px;
+.ids-input.color-variant-module-nav {
+  margin-block-end: 0;
+  transform: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease);
 }
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.ids-input {
+.ids-input.color-variant-module-nav .field-container {
+  border-radius: var(--ids-module-nav-common-border-radius);
+  border: var(--ids-module-nav-input-border-width) solid transparent;
+}
+.ids-input.color-variant-module-nav input {
+  background-color: transparent;
+  color: inherit;
+}
+.ids-input.color-variant-module-nav input::placeholder {
+  color: var(--ids-module-nav-search-input-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav input:active {
+  color: var(--ids-module-nav-search-input-text-color);
+}
+.ids-input.color-variant-module-nav:not([class*=field-height-]) {
+  height: var(--ids-module-nav-search-wrapper-height);
+}
+.ids-input.color-variant-module-nav:not([class*=field-height-]) input {
+  height: var(--ids-module-nav-search-input-height);
+}
+.ids-input:not([class*=color-variant-]) {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
-.ids-input .field-container {
+.ids-input:not([class*=color-variant-]) .field-container {
   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-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 {
+.ids-input:not([class*=color-variant-]).readonly .field-container.error, .ids-input:not([class*=color-variant-]).readonly .field-container.error:hover, .ids-input:not([class*=color-variant-]).readonly.hover .field-container.error, .ids-input:not([class*=color-variant-]).readonly.hover .field-container.error:hover, .ids-input:not([class*=color-variant-]).readonly.focus-within .field-container.error, .ids-input:not([class*=color-variant-]).readonly.focus-within .field-container.error:hover {
   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 {
+.ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent) .field-container, .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent).hover .field-container, .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent).focus-within .field-container {
   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 {
+.ids-input:not([class*=color-variant-]).disabled .field-container, .ids-input:not([class*=color-variant-]).disabled:hover .field-container, .ids-input:not([class*=color-variant-]).disabled:focus-within .field-container {
   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 {
+.ids-input:not([class*=color-variant-]).bg-transparent .field-container, .ids-input:not([class*=color-variant-]).bg-transparent.readonly .field-container, .ids-input:not([class*=color-variant-]).bg-transparent.disabled .field-container {
   background-color: transparent;
 }
-.ids-input.bg-transparent:focus-within .field-container {
+.ids-input:not([class*=color-variant-]).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:not(.color-variant-alternate-formatter) .field-container {
+.ids-input:not([class*=color-variant-]).is-active .field-container, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .field-container, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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: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 {
+.ids-input:not([class*=color-variant-]).is-active .alert,
+.ids-input:not([class*=color-variant-]).is-active .alert:hover,
+.ids-input:not([class*=color-variant-]).is-active .warning,
+.ids-input:not([class*=color-variant-]).is-active .warning:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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,
-.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover.is-active,
-.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: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 {
+.ids-input:not([class*=color-variant-]).is-active .alert:focus-within, .ids-input:not([class*=color-variant-]).is-active .alert.is-active,
+.ids-input:not([class*=color-variant-]).is-active .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]).is-active .warning:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .warning.is-active,
+.ids-input:not([class*=color-variant-]).is-active .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .warning:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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: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] {
+.ids-input:not([class*=color-variant-]).is-active .alert[disabled],
+.ids-input:not([class*=color-variant-]).is-active .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]).is-active .warning[disabled],
+.ids-input:not([class*=color-variant-]).is-active .warning:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not(.color-variant-alternate-formatter) .error,
-.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover {
+.ids-input:not([class*=color-variant-]).is-active .error,
+.ids-input:not([class*=color-variant-]).is-active .error:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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: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 {
+.ids-input:not([class*=color-variant-]).is-active .error:focus-within, .ids-input:not([class*=color-variant-]).is-active .error.is-active,
+.ids-input:not([class*=color-variant-]).is-active .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .error:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not(.color-variant-alternate-formatter) .error[disabled],
-.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover[disabled] {
+.ids-input:not([class*=color-variant-]).is-active .error[disabled],
+.ids-input:not([class*=color-variant-]).is-active .error:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not(.color-variant-alternate-formatter) .info,
-.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover {
+.ids-input:not([class*=color-variant-]).is-active .info,
+.ids-input:not([class*=color-variant-]).is-active .info:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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: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 {
+.ids-input:not([class*=color-variant-]).is-active .info:focus-within, .ids-input:not([class*=color-variant-]).is-active .info.is-active,
+.ids-input:not([class*=color-variant-]).is-active .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .info:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not(.color-variant-alternate-formatter) .info[disabled],
-.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover[disabled] {
+.ids-input:not([class*=color-variant-]).is-active .info[disabled],
+.ids-input:not([class*=color-variant-]).is-active .info:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not(.color-variant-alternate-formatter) .success,
-.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover {
+.ids-input:not([class*=color-variant-]).is-active .success,
+.ids-input:not([class*=color-variant-]).is-active .success:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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: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 {
+.ids-input:not([class*=color-variant-]).is-active .success:focus-within, .ids-input:not([class*=color-variant-]).is-active .success.is-active,
+.ids-input:not([class*=color-variant-]).is-active .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .success:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not(.color-variant-alternate-formatter) .success[disabled],
-.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover[disabled] {
+.ids-input:not([class*=color-variant-]).is-active .success[disabled],
+.ids-input:not([class*=color-variant-]).is-active .success:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .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:not([class*=color-variant-]):hover:not(.disabled).readonly.readonly-background.color-variant-alternate-formatter .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-border-hover);
 }
-.ids-input .alert,
-.ids-input .alert:hover,
-.ids-input .warning,
-.ids-input .warning:hover {
+.ids-input:not([class*=color-variant-]) .alert,
+.ids-input:not([class*=color-variant-]) .alert:hover,
+.ids-input:not([class*=color-variant-]) .warning,
+.ids-input:not([class*=color-variant-]) .warning:hover {
   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,
-.ids-input .alert:hover.is-active,
-.ids-input .warning:focus-within,
-.ids-input .warning.is-active,
-.ids-input .warning:hover:focus-within,
-.ids-input .warning:hover.is-active {
+.ids-input:not([class*=color-variant-]) .alert:focus-within, .ids-input:not([class*=color-variant-]) .alert.is-active,
+.ids-input:not([class*=color-variant-]) .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]) .warning:focus-within,
+.ids-input:not([class*=color-variant-]) .warning.is-active,
+.ids-input:not([class*=color-variant-]) .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .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 .alert[disabled],
-.ids-input .alert:hover[disabled],
-.ids-input .warning[disabled],
-.ids-input .warning:hover[disabled] {
+.ids-input:not([class*=color-variant-]) .alert[disabled],
+.ids-input:not([class*=color-variant-]) .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]) .warning[disabled],
+.ids-input:not([class*=color-variant-]) .warning:hover[disabled] {
   border-color: var(--ids-input-color-border-alert-disabled);
   color: var(--ids-input-color-text-alert-disabled);
 }
-.ids-input .error,
-.ids-input .error:hover {
+.ids-input:not([class*=color-variant-]) .error,
+.ids-input:not([class*=color-variant-]) .error:hover {
   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 {
+.ids-input:not([class*=color-variant-]) .error:focus-within, .ids-input:not([class*=color-variant-]) .error.is-active,
+.ids-input:not([class*=color-variant-]) .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .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 .error[disabled],
-.ids-input .error:hover[disabled] {
+.ids-input:not([class*=color-variant-]) .error[disabled],
+.ids-input:not([class*=color-variant-]) .error:hover[disabled] {
   border-color: var(--ids-input-color-border-error-disabled);
   color: var(--ids-input-color-border-error-disabled);
 }
-.ids-input .info,
-.ids-input .info:hover {
+.ids-input:not([class*=color-variant-]) .info,
+.ids-input:not([class*=color-variant-]) .info:hover {
   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 {
+.ids-input:not([class*=color-variant-]) .info:focus-within, .ids-input:not([class*=color-variant-]) .info.is-active,
+.ids-input:not([class*=color-variant-]) .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .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 .info[disabled],
-.ids-input .info:hover[disabled] {
+.ids-input:not([class*=color-variant-]) .info[disabled],
+.ids-input:not([class*=color-variant-]) .info:hover[disabled] {
   border-color: var(--ids-input-color-border-info-disabled);
   color: var(--ids-input-color-text-info-disabled);
 }
-.ids-input .success,
-.ids-input .success:hover {
+.ids-input:not([class*=color-variant-]) .success,
+.ids-input:not([class*=color-variant-]) .success:hover {
   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 {
+.ids-input:not([class*=color-variant-]) .success:focus-within, .ids-input:not([class*=color-variant-]) .success.is-active,
+.ids-input:not([class*=color-variant-]) .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .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 .success[disabled],
-.ids-input .success:hover[disabled] {
+.ids-input:not([class*=color-variant-]) .success[disabled],
+.ids-input:not([class*=color-variant-]) .success:hover[disabled] {
   border-color: var(--ids-input-color-border-success-disabled);
   color: var(--ids-input-color-text-success-disabled);
 }
@@ -738,8 +768,8 @@
   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-color-background-hover);
+.ids-input.color-variant-alternate-formatter:hover.readonly.readonly-background .field-container, .ids-input.color-variant-alternate-formatter:hover:not(.readonly):not(.disabled) .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-border-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-color-border-focus);
@@ -747,7 +777,7 @@
 .ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
   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 {
+.ids-input.color-variant-alternate-formatter.disabled .ids-input.color-variant-alternate-formatter.disabled:hover .field-container {
   border-color: var(--ids-data-grid-filter-input-color-border-disabled);
   color: var(--ids-data-grid-filter-input-color-text-disabled);
 }
@@ -767,6 +797,50 @@
   color: var(--ids-list-builder-input-text-color);
   border: 0;
 }
+.ids-input.color-variant-module-nav {
+  color: var(--ids-module-nav-search-input-text-color);
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.ids-input.color-variant-module-nav .field-container {
+  background-color: transparent;
+  border-color: transparent;
+  color: inherit;
+}
+.ids-input.color-variant-module-nav .ids-input-field {
+  background-color: transparent;
+  color: inherit;
+}
+.ids-input.color-variant-module-nav .ids-input-field::placeholder {
+  color: var(--ids-module-nav-search-input-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav .ids-input-field:active {
+  color: var(--ids-module-nav-search-input-text-color);
+}
+.ids-input.color-variant-module-nav:hover .field-container {
+  background-color: var(--ids-module-nav-item-hover-bg-color);
+}
+.ids-input.color-variant-module-nav:hover .ids-input-field::placeholder {
+  color: var(--ids-module-nav-search-input-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav:hover .ids-input-field {
+  color: var(--ids-module-nav-input-text-color);
+}
+.ids-input.color-variant-module-nav:focus-within .field-container, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .field-container {
+  background-color: var(--ids-module-nav-input-focus-bg-color);
+  border-color: var(--ids-module-nav-item-selected-text-color);
+  box-shadow: none;
+}
+.ids-input.color-variant-module-nav:focus-within .ids-input-field::placeholder, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .ids-input-field::placeholder {
+  color: var(--ids-module-nav-search-input-focused-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav:focus-within .ids-input-field, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .ids-input-field {
+  color: var(--ids-module-nav-input-text-color);
+}
+
+.caps-lock-indicator {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
 
 .is-uppercase {
   text-transform: uppercase;
@@ -861,6 +935,9 @@
 .ids-trigger-field {
   justify-content: inherit;
 }
+.ids-trigger-field.compact .field-container {
+  height: var(--ids-input-height-10);
+}
 
 .ids-trigger-field-slot-trigger-start,
 ::slotted(*[slot=trigger-start]:first-of-type:not([inline]):not([compact]):not([field-height=xs])) {
@@ -990,4 +1067,21 @@
 }
 .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-search-field-app-menu-shadow-focus);
+}
+.ids-search-field.color-variant-module-nav .fieldset {
+  display: contents;
+}
+.ids-search-field.color-variant-module-nav .field-container {
+  background-color: var(--ids-module-nav-search-input-bg-color);
+  color: var(--ids-module-nav-item-hover-text-color);
+}
+.ids-search-field.color-variant-module-nav .ids-input-field {
+  padding-inline-start: var(--ids-module-nav-item-expanded-icon-text-spacing-size);
+}
+.ids-search-field.color-variant-module-nav.full .field-container {
+  width: var(--ids-module-nav-search-input-width);
+}
+.ids-search-field.color-variant-module-nav:focus-within .field-container {
+  background-color: var(--ids-module-nav-search-input-focused-bg-color);
+  border-color: var(--ids-module-nav-item-selected-text-color);
 }

package/components/ids-search-field/ids-search-field.d.ts

@@ -7,7 +7,7 @@ import '../ids-popup-menu/ids-popup-menu';
 /**
  * IDS Search Field Component
  * @type {IdsSearchField}
- * @inherits IdsElement
+ * @inherits IdsTriggerField
  */
 export default class IdsSearchField extends IdsTriggerField {
     #private;

package/components/ids-search-field/ids-search-field.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-RZSBH2SE.js";import"../../chunks/ids-chunk-B3LFOR6V.js";import"../../chunks/ids-chunk-56YQVDRY.js";import"../../chunks/ids-chunk-A6JFZG7O.js";import"../../chunks/ids-chunk-J377KX6R.js";import"../../chunks/ids-chunk-E4VRTFNA.js";import"../../chunks/ids-chunk-AYV2UDVJ.js";import"../../chunks/ids-chunk-Y7ULYDKT.js";import"../../chunks/ids-chunk-YG2GGPUF.js";import"../../chunks/ids-chunk-GX2AIROS.js";import"../../chunks/ids-chunk-3VMFQMM4.js";import"../../chunks/ids-chunk-QRLAPANT.js";import"../../chunks/ids-chunk-O6RSWMYI.js";import"../../chunks/ids-chunk-SBYA6MC4.js";import"../../chunks/ids-chunk-ODSUO7BM.js";import"../../chunks/ids-chunk-QCRLDB3I.js";import"../../chunks/ids-chunk-542APW5J.js";import"../../chunks/ids-chunk-7OME6RME.js";import"../../chunks/ids-chunk-SUZ4YNUA.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-IZZJC2EB.js";import"../../chunks/ids-chunk-M44M2XW4.js";import"../../chunks/ids-chunk-4RXDW4MK.js";import"../../chunks/ids-chunk-T55PJIDE.js";import"../../chunks/ids-chunk-GFTX3QTI.js";import"../../chunks/ids-chunk-WY2RW7QR.js";import"../../chunks/ids-chunk-RI2BXZ6U.js";import"../../chunks/ids-chunk-FF2PR2KM.js";import"../../chunks/ids-chunk-DSILQO6B.js";import"../../chunks/ids-chunk-QXBFKEEP.js";import"../../chunks/ids-chunk-4FZLXQW3.js";import"../../chunks/ids-chunk-G6CTBPDT.js";import"../../chunks/ids-chunk-DOLUR6CX.js";import"../../chunks/ids-chunk-RXKBAZ4I.js";import"../../chunks/ids-chunk-RJCX7NER.js";import"../../chunks/ids-chunk-JA6ES3WY.js";import"../../chunks/ids-chunk-OKBUVHAP.js";import"../../chunks/ids-chunk-DXGQFMWW.js";import"../../chunks/ids-chunk-R7DZNS7W.js";import"../../chunks/ids-chunk-OIS6KGMU.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-33V6A4PN.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-K7QJZ6GH.js";import"../../chunks/ids-chunk-J6DDVFGW.js";import"../../chunks/ids-chunk-BGHX2WQ5.js";import"../../chunks/ids-chunk-AVLWMYWS.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-AZSONAF7.js";import"../../chunks/ids-chunk-7VJ3NF24.js";import"../../chunks/ids-chunk-EJFTSZLS.js";import"../../chunks/ids-chunk-FP7JXALX.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-54WKNX4L.js";import"../../chunks/ids-chunk-LCUXCSNZ.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7JIYCFAW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-HABPILOR.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-XLV3I2G5.js";import"../../chunks/ids-chunk-TLWKYEHJ.js";import"../../chunks/ids-chunk-RL4NAQQE.js";import"../../chunks/ids-chunk-N4PGPFE5.js";import"../../chunks/ids-chunk-27XAFGEX.js";import"../../chunks/ids-chunk-FH6Y4MTJ.js";import"../../chunks/ids-chunk-V7XUWW5B.js";import"../../chunks/ids-chunk-LL4HKB7S.js";import"../../chunks/ids-chunk-AYV2UDVJ.js";import"../../chunks/ids-chunk-Y7ULYDKT.js";import"../../chunks/ids-chunk-YG2GGPUF.js";import"../../chunks/ids-chunk-GX2AIROS.js";import"../../chunks/ids-chunk-SBYA6MC4.js";import"../../chunks/ids-chunk-FYDKD3TL.js";import"../../chunks/ids-chunk-BL6DBLBQ.js";import"../../chunks/ids-chunk-LUQ5WTTM.js";import"../../chunks/ids-chunk-SCWD3ICQ.js";import"../../chunks/ids-chunk-Y4WUDVCZ.js";import"../../chunks/ids-chunk-NWQJK4KK.js";import"../../chunks/ids-chunk-AYDTADXU.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-7ZTSUHBA.js";import"../../chunks/ids-chunk-HT6LX5MG.js";import"../../chunks/ids-chunk-XTFBAHLT.js";import"../../chunks/ids-chunk-MTO4IW77.js";import"../../chunks/ids-chunk-R5ZFGKRA.js";import"../../chunks/ids-chunk-X6RWFTGV.js";import"../../chunks/ids-chunk-4RSNCW6T.js";import"../../chunks/ids-chunk-MA5MPQCR.js";import"../../chunks/ids-chunk-WL54H54A.js";import"../../chunks/ids-chunk-FLW6Z5UP.js";import"../../chunks/ids-chunk-7O3OTI42.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-LFTWDGW6.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-HXQK5AOF.js";import"../../chunks/ids-chunk-B5JKAHB2.js";import"../../chunks/ids-chunk-QGYYPJNG.js";import"../../chunks/ids-chunk-BTXG2E4X.js";import"../../chunks/ids-chunk-ZGB2BJN7.js";import"../../chunks/ids-chunk-6D5SDTJL.js";import"../../chunks/ids-chunk-XJ6YDMYE.js";import"../../chunks/ids-chunk-RFSSSI2A.js";import"../../chunks/ids-chunk-J6DDVFGW.js";import"../../chunks/ids-chunk-CYHGXCKL.js";import"../../chunks/ids-chunk-RZXRZPI4.js";import"../../chunks/ids-chunk-6NIQXA2N.js";import"../../chunks/ids-chunk-R7IBXBBI.js";import"../../chunks/ids-chunk-MXFCUDLP.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-VD3FN2LH.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-DCNGT4R2.js";import"../../chunks/ids-chunk-CS7RTATZ.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-ZVK34T2N.js";import"../../chunks/ids-chunk-N7P4D4N3.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-6EMRTLSG.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as default};

package/components/ids-separator/ids-separator.css

@@ -3,6 +3,10 @@
   display: block;
 }
 
+:host([hidden]) {
+  visibility: hidden;
+}
+
 :host([vertical]) {
   justify-self: center;
   align-self: center;
@@ -28,4 +32,8 @@
   align-self: center;
   background-color: var(--ids-separator-alternate-color-background);
   height: 16px;
+}
+.ids-separator.color-variant-module-nav {
+  margin-inline: var(--ids-module-nav-separator-expanded-edge-distance);
+  background-color: var(--ids-module-nav-separator-color);
 }