ids-enterprise-wc 1.0.0-beta.21 → 1.0.0-beta.23

package/components/ids-color-picker/ids-color-picker.css

@@ -46,7 +46,7 @@
 
 .icon-dirty {
   position: absolute;
-  color: var(--ids-color-caution-30);
+  color: var(--ids-color-yellow-30);
   top: 1px;
 }
 .icon-dirty[dir=rtl] {
@@ -83,7 +83,7 @@
   -moz-osx-font-smoothing: grayscale;
   display: flex;
   font-family: var(--ids-font-family-default);
-  margin-top: var(--ids-space-30);
+  margin-top: var(--ids-space-xxs);
 }
 .validation-message.has-custom-icon {
   color: var(--ids-icon-color-default);
@@ -92,37 +92,37 @@
   color: var(--ids-input-color-text-disabled);
 }
 .validation-message .ids-icon {
-  margin-inline-end: var(--ids-space-30);
+  margin-inline-end: var(--ids-space-xxs);
 }
 .validation-message.alert {
   color: var(--ids-color-caution-default);
 }
 .validation-message.alert.disabled {
-  color: var(--ids-color-caution-30);
+  color: var(--ids-color-yellow-30);
 }
 .validation-message.warning {
   color: var(--ids-color-warning-default);
 }
 .validation-message.warning.disabled {
-  color: var(--ids-color-warning-30);
+  color: var(--ids-color-orange-30);
 }
 .validation-message.error {
   color: var(--ids-color-error-default);
 }
 .validation-message.error.disabled {
-  color: var(--ids-color-error-30);
+  color: var(--ids-color-red-30);
 }
 .validation-message.info {
   color: var(--ids-color-info-default);
 }
 .validation-message.info.disabled {
-  color: var(--ids-color-info-30);
+  color: var(--ids-color-blue-30);
 }
 .validation-message.success {
   color: var(--ids-color-success-default);
 }
 .validation-message.success.disabled {
-  color: var(--ids-color-success-30);
+  color: var(--ids-color-green-30);
 }
 .validation-message[hidden] {
   display: none;
@@ -147,8 +147,8 @@
 .ids-label-text.required::after {
   position: relative;
   font-family: var(--ids-font-family-default);
-  margin-inline-start: var(--ids-space-20);
-  margin-inline-end: var(--ids-space-20);
+  margin-inline-start: var(--ids-space-xxxs);
+  margin-inline-end: var(--ids-space-xxxs);
   font-size: var(--ids-font-size-50);
   color: var(--ids-input-required-indicator-color-text-default);
   content: "*";
@@ -165,7 +165,8 @@
 }
 
 .disabled .ids-label-text {
-  color: var(--ids-color-text-disabled);
+  color: var(--ids-input-label-color-text-disabled);
+  opacity: var(--ids-input-disabled-opacity);
 }
 .disabled .ids-label-text.required::after {
   color: var(--ids-input-required-indicator-color-text-disabled);
@@ -255,10 +256,9 @@
 .ids-input {
   position: relative;
   display: block;
-  margin-block-end: var(--ids-space-60);
+  margin-block-end: var(--ids-space-sm);
   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 {
   border: 1px solid;
@@ -282,13 +282,13 @@
 }
 .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);
-  box-shadow: var(--ids-shadow-focus);
+  box-shadow: var(--ids-input-color-border-shadow);
 }
 .ids-input .ids-icon.starting-icon {
-  margin-inline-start: var(--ids-space-40);
+  margin-inline-start: var(--ids-space-xs);
 }
 .ids-input .ids-icon.ending-icon {
-  margin-inline-end: var(--ids-space-40);
+  margin-inline-end: var(--ids-space-xs);
 }
 .ids-input .ids-input-field {
   -webkit-font-smoothing: antialiased;
@@ -297,10 +297,10 @@
   background-color: transparent;
   border: none;
   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);
+  padding-block-start: var(--ids-space-xxs);
+  padding-block-end: var(--ids-space-xxs);
+  padding-inline-start: var(--ids-space-12);
+  padding-inline-end: var(--ids-space-12);
   font-size: var(--ids-input-font-size);
   width: 100%;
   appearance: none;
@@ -330,7 +330,7 @@
   text-align: end;
 }
 .ids-input .validation-message {
-  margin-block-start: var(--ids-space-30);
+  margin-block-start: var(--ids-space-xxs);
   margin-bottom: 0;
 }
 .ids-input.no-margins, .ids-input.no-margins.compact {
@@ -347,7 +347,7 @@
 }
 .ids-input.no-margins .validation-message, .ids-input.no-margins.compact .validation-message {
   margin-bottom: 0;
-  margin-block-start: var(--ids-space-30);
+  margin-block-start: var(--ids-space-xxs);
 }
 .ids-input.no-margins .ids-label-text.empty, .ids-input.no-margins.compact .ids-label-text.empty {
   margin: 0;
@@ -391,8 +391,8 @@
   font-size: var(--ids-input-label-font-size);
 }
 .ids-input.field-height-xs .ids-input-field {
-  padding-inline-start: var(--ids-space-30);
-  padding-inline-end: var(--ids-space-30);
+  padding-inline-start: var(--ids-space-xxs);
+  padding-inline-end: var(--ids-space-xxs);
   padding-top: 0;
   padding-bottom: 0;
   font-size: var(--ids-input-font-size-sm);
@@ -425,8 +425,8 @@
   font-size: var(--ids-input-label-font-size);
 }
 .ids-input.compact .ids-input-field {
-  padding-inline-start: var(--ids-space-30);
-  padding-inline-end: var(--ids-space-30);
+  padding-inline-start: var(--ids-space-xxs);
+  padding-inline-end: var(--ids-space-xxs);
   padding-top: 0;
   padding-bottom: 0;
   font-size: var(--ids-input-font-size-sm);
@@ -453,7 +453,7 @@
   display: flex;
 }
 .ids-input.color-variant-borderless slot[name=trigger-end] {
-  padding-inline-end: 6px;
+  padding-inline-end: 3px;
 }
 .ids-input.color-variant-borderless .icon-dirty {
   display: none;
@@ -469,24 +469,24 @@
   box-shadow: none;
 }
 .ids-input.color-variant-borderless.ids-input.field-height-lg .ids-input-field {
-  padding-inline: calc(var(--ids-space-60) - 2px);
+  padding-inline: calc(var(--ids-space-sm) - 2px);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-md .ids-input-field {
-  padding-inline: calc(var(--ids-space-50) - 2px);
+  padding-inline: calc(var(--ids-space-12) - 2px);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-sm .ids-input-field {
-  padding-inline: calc(var(--ids-space-40) - 2px);
+  padding-inline: calc(var(--ids-space-xs) - 2px);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-xs .ids-input-field {
   font-size: var(--ids-data-grid-font-size-sm);
-  padding-inline: var(--ids-space-20);
+  padding-inline: var(--ids-space-xxxs);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-xs slot[name=trigger-end] {
   padding-inline-end: 0;
 }
 .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);
+  padding-inline: var(--ids-space-xxxxs);
 }
 .ids-input.color-variant-borderless.ids-input.field-height-xxs slot[name=trigger-end] {
   padding-inline-end: 0;
@@ -553,7 +553,7 @@
 .ids-input:not([class*=color-variant-]) .field-container:not(:focus-within) {
   background-color: var(--ids-input-color-background-default);
   border-color: var(--ids-input-color-border-default);
-  color: var(--ids-input-color-text);
+  color: var(--ids-input-color-text-default);
 }
 .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);
@@ -565,6 +565,7 @@
 .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);
+  opacity: var(--ids-input-disabled-opacity);
   -webkit-text-fill-color: var(--ids-input-color-text-disabled);
 }
 .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 {
@@ -612,23 +613,29 @@
   border-color: var(--ids-input-color-border-alert-disabled);
   color: var(--ids-input-color-text-alert-disabled);
 }
-.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .error,
-.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .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 {
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error.field-container:not(:focus-within),
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover.field-container:not(:focus-within), .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error.field-container:not(:focus-within),
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover.field-container:not(:focus-within) {
   border-color: var(--ids-input-color-border-error-default);
   color: var(--ids-input-error-color-text-error-default);
 }
-.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .error:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .error.is-active,
-.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .error:hover:focus-within,
-.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .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 {
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.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:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .error[disabled],
-.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .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] {
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover[disabled] {
   border-color: var(--ids-input-color-border-error-disabled);
   color: var(--ids-input-color-border-error-disabled);
 }
@@ -711,23 +718,29 @@
   border-color: var(--ids-input-color-border-alert-disabled);
   color: var(--ids-input-color-text-alert-disabled);
 }
-.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-]).is-active:hover.readonly.readonly-background .error,
-.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .error:hover {
+.ids-input:not([class*=color-variant-]).is-active .field-container.error,
+.ids-input:not([class*=color-variant-]).is-active .field-container.error:hover, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error,
+.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input:not([class*=color-variant-]).is-active .field-container.error.field-container:not(:focus-within),
+.ids-input:not([class*=color-variant-]).is-active .field-container.error:hover.field-container:not(:focus-within), .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error.field-container:not(:focus-within),
+.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover.field-container:not(:focus-within) {
   border-color: var(--ids-input-color-border-error-default);
   color: var(--ids-input-error-color-text-error-default);
 }
-.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-]).is-active:hover.readonly.readonly-background .error:focus-within, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .error.is-active,
-.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .error:hover:focus-within,
-.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .error:hover.is-active {
+.ids-input:not([class*=color-variant-]).is-active .field-container.error:focus-within, .ids-input:not([class*=color-variant-]).is-active .field-container.error.is-active,
+.ids-input:not([class*=color-variant-]).is-active .field-container.error:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .field-container.error:hover.is-active, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:focus-within, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error.is-active,
+.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.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: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-]).is-active:hover.readonly.readonly-background .error[disabled],
-.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .error:hover[disabled] {
+.ids-input:not([class*=color-variant-]).is-active .field-container.error[disabled],
+.ids-input:not([class*=color-variant-]).is-active .field-container.error:hover[disabled], .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error[disabled],
+.ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover[disabled] {
   border-color: var(--ids-input-color-border-error-disabled);
   color: var(--ids-input-color-border-error-disabled);
 }
@@ -798,19 +811,24 @@
   border-color: var(--ids-input-color-border-alert-disabled);
   color: var(--ids-input-color-text-alert-disabled);
 }
-.ids-input:not([class*=color-variant-]) .error,
-.ids-input:not([class*=color-variant-]) .error:hover {
+.ids-input:not([class*=color-variant-]) .field-container.error,
+.ids-input:not([class*=color-variant-]) .field-container.error:hover {
   border-color: var(--ids-input-color-border-error-default);
   color: var(--ids-input-error-color-text-error-default);
 }
-.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 {
+.ids-input:not([class*=color-variant-]) .field-container.error.field-container:not(:focus-within),
+.ids-input:not([class*=color-variant-]) .field-container.error:hover.field-container:not(:focus-within) {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input:not([class*=color-variant-]) .field-container.error:focus-within, .ids-input:not([class*=color-variant-]) .field-container.error.is-active,
+.ids-input:not([class*=color-variant-]) .field-container.error:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .field-container.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:not([class*=color-variant-]) .error[disabled],
-.ids-input:not([class*=color-variant-]) .error:hover[disabled] {
+.ids-input:not([class*=color-variant-]) .field-container.error[disabled],
+.ids-input:not([class*=color-variant-]) .field-container.error:hover[disabled] {
   border-color: var(--ids-input-color-border-error-disabled);
   color: var(--ids-input-color-border-error-disabled);
 }
@@ -853,6 +871,10 @@
   border-bottom: 1px solid var(--ids-input-header-color-border);
   box-shadow: none;
 }
+.ids-input.color-variant-alternate:focus-within .field-container {
+  border-color: var(--ids-input-color-border-focus);
+  box-shadow: var(--ids-input-color-border-shadow);
+}
 .ids-input.color-variant-alternate .ids-input-field {
   color: var(--ids-input-header-color-text-default);
 }
@@ -874,7 +896,7 @@
   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-shadow-focus);
+  box-shadow: var(--ids-input-color-border-shadow);
 }
 .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);
@@ -889,7 +911,7 @@
   color: var(--ids-data-grid-filter-input-color-text-placeholder);
 }
 .ids-input.color-variant-app-menu .field-container {
-  color: var(--ids-input-color-text-default);
+  color: var(--ids-input-color-text-app-menu);
 }
 .ids-input.color-variant-list-builder .field-container {
   background-color: transparent;
@@ -1054,7 +1076,7 @@ ids-input::part(container) {
 }
 
 .color-picker-trigger-btn {
-  margin-inline-end: 4px;
+  margin-inline-end: 0;
 }
 .color-picker-trigger-btn::part(button) {
   margin-inline-start: 1px;
@@ -1071,7 +1093,7 @@ ids-input::part(container) {
   display: grid;
   grid-template-columns: repeat(10, 20px);
   overflow: visible;
-  padding: var(--ids-space-40);
+  padding: var(--ids-space-xs);
   align-items: center;
   align-content: center;
   justify-content: center;
@@ -1084,7 +1106,7 @@ ids-input::part(container) {
 
 .advanced-color-picker {
   position: absolute;
-  bottom: var(--ids-space-60);
+  bottom: var(--ids-space-sm);
   visibility: hidden;
   opacity: 0;
 }

package/components/ids-color-picker/ids-color-picker.d.ts

@@ -11,14 +11,9 @@ declare const Base: {
         connectedCallback(): void;
         handleClearable(): void;
         refreshClearableButtonStyles(): void;
-        "__#42@#initClearableButton"(): HTMLElement;
+        "__#48@#initClearableButton"(): HTMLElement;
         appendClearableButton(): void;
         removeClearableButton(): void;
-        /**
-         * HTML for IdsColorPicker.shadowRoot
-         * Contains default slot for color elements
-         * @returns {string} - html for the template
-         */
         clear(): void;
         checkContents(): void;
         attachClearableEvents(): void;
@@ -79,7 +74,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -214,6 +209,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -284,6 +280,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -386,7 +383,7 @@ declare const Base: {
         compact: string | boolean;
         fieldHeight: string;
         clearHeightClasses(): void;
-        "__#43@#doFieldHeightChange"(fieldHeight: string): void;
+        "__#49@#doFieldHeightChange"(fieldHeight: string): void;
         onFieldHeightChange?(fieldHeight: string): void;
         name?: string | undefined;
         state: any;
@@ -433,7 +430,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_17 extends keyof HTMLElementEventMap>(type: K_17, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_17]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -568,6 +565,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -638,6 +636,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -736,6 +735,7 @@ declare const Base: {
 } & {
     new (...args: any[]): {
         connectedCallback(): void;
+        "__#47@#dirtyTrackerInitialized": boolean;
         dirty: any;
         isDirty: boolean;
         isCheckbox: boolean;
@@ -753,8 +753,9 @@ declare const Base: {
         onLanguageChange: () => void;
         resetDirtyTracker(): void;
         destroyDirtyTracker(): void;
-        "__#41@#onDirtyTrackerChange"(): void;
+        "__#47@#onDirtyTrackerChange"(): void;
         dirtyTracker: boolean;
+        "__#47@#triggerDirtyEvent"(name: "dirty" | "pristine" | "afterresetdirty"): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -808,7 +809,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_26 extends keyof HTMLElementEventMap>(type: K_26, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_26]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_27 extends keyof HTMLElementEventMap>(type: K_27, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_27]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -943,6 +944,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -1013,6 +1015,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -1168,7 +1171,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_35 extends keyof HTMLElementEventMap>(type: K_35, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_35]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_36 extends keyof HTMLElementEventMap>(type: K_36, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_36]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -1303,6 +1306,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -1373,6 +1377,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -1523,7 +1528,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_44 extends keyof HTMLElementEventMap>(type: K_44, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_44]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_45 extends keyof HTMLElementEventMap>(type: K_45, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_45]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -1658,6 +1663,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -1728,6 +1734,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -1846,20 +1853,27 @@ declare const Base: {
         triggerVetoableEvent(eventType: string, data?: any): boolean;
         detachAllEvents(): void;
         detachEventsByName: (eventName: string) => void;
-        "__#5@#addLongPressListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#removeLongPressListener"(): void;
-        "__#5@#addSwipeListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#removeSwipeListener"(): void;
-        "__#5@#addKeyboardFocusListener"(eventName: string, target: Element): void;
-        "__#5@#removeKeyboardFocusListener"(): void;
-        "__#5@#addHoverEndListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#addSlopedMouseLeaveListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#clearSlopedMouseLeaveTimer"(): void;
-        "__#5@#removeSlopedMouseLeaveListener"(): void;
-        "__#5@#addKeyDownEndListener"(target: HTMLElement, options?: Record<string, unknown> | undefined): void;
+        "__#4@#addLongPressListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#removeLongPressListener"(): void;
+        "__#4@#addSwipeListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        /**
+         * Sets the advanced attribute
+         * @param {boolean | string} value - true if the "advanced" color picker type should be used
+         */
+        "__#4@#removeSwipeListener"(): void;
+        "__#4@#addKeyboardFocusListener"(eventName: string, target: Element): void;
+        "__#4@#removeKeyboardFocusListener"(): void;
+        "__#4@#addHoverEndListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#addSlopedMouseLeaveListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#clearSlopedMouseLeaveTimer"(): void; /**
+         * Sets the id internally and externally
+         * @param {string} value id value
+         */
+        "__#4@#removeSlopedMouseLeaveListener"(): void;
+        "__#4@#addKeyDownEndListener"(target: HTMLElement, options?: Record<string, unknown> | undefined): void;
         clearTimer(): void;
-        "__#5@#removeHoverEndListener"(): void;
-        "__#5@#removeKeyDownEndListener"(): void;
+        "__#4@#removeHoverEndListener"(): void;
+        "__#4@#removeKeyDownEndListener"(): void;
         name?: string | undefined;
         state: any;
         cachedNonce: string;
@@ -1905,7 +1919,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_53 extends keyof HTMLElementEventMap>(type: K_53, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_53]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_54 extends keyof HTMLElementEventMap>(type: K_54, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_54]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -2040,6 +2054,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -2110,6 +2125,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -2213,10 +2229,6 @@ declare const Base: {
  */
 export default class IdsColorPicker extends Base {
     #private;
-    colorInput?: HTMLInputElement | null;
-    colorPreview?: IdsColor | null;
-    triggerBtn?: IdsTriggerButton | null;
-    textInput?: IdsTriggerField | null;
     isFormComponent: boolean;
     useDefaultSwatches: boolean;
     initialized: boolean;
@@ -2233,6 +2245,10 @@ export default class IdsColorPicker extends Base {
      * @returns {string} - html for the template
      */
     template(): string;
+    get textInput(): IdsTriggerField | null;
+    get colorInput(): HTMLInputElement | null;
+    get colorPreview(): HTMLElement | null;
+    get triggerBtn(): IdsTriggerButton | null;
     /**
      * HTML for Color Picker Previw Swatch
      * @returns {string} - html
@@ -2326,6 +2342,12 @@ export default class IdsColorPicker extends Base {
     get suppressTooltips(): boolean;
     set compact(value: boolean | string | null);
     get compact(): boolean;
+    /**
+     * Sets the id internally and externally
+     * @param {string} value id value
+     */
+    set id(value: string);
+    get id(): string;
     /**
      * Closes the Color Picker's Popup
      * @returns {void}