ids-enterprise-wc 1.0.0-beta.22 → 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);
@@ -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 {
@@ -618,6 +619,12 @@
   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) .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,
@@ -717,6 +724,12 @@
   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 .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,
@@ -803,6 +816,11 @@
   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.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 {
@@ -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

@@ -42,10 +42,7 @@ declare const Base: {
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
-        render(force?: boolean | undefined): any; /**
-         * HTML for Color Picker Previw Swatch
-         * @returns {string} - html
-         */
+        render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
@@ -77,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;
@@ -212,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;
@@ -282,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;
@@ -399,10 +398,7 @@ declare const Base: {
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
-        render(force?: boolean | undefined): any; /**
-         * HTML for Color Picker Previw Swatch
-         * @returns {string} - html
-         */
+        render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
@@ -434,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;
@@ -569,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;
@@ -639,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;
@@ -737,6 +735,7 @@ declare const Base: {
 } & {
     new (...args: any[]): {
         connectedCallback(): void;
+        "__#47@#dirtyTrackerInitialized": boolean;
         dirty: any;
         isDirty: boolean;
         isCheckbox: boolean;
@@ -749,16 +748,14 @@ declare const Base: {
         appendDirtyTrackerMsg(): void;
         removeDirtyTrackerMsg(): void;
         valMethod(el: any): any;
-        setDirtyTracker(val?: string | undefined): void; /**
-         * Default color swatches for this color-picker if no children provided
-         * @returns {Array<IdsColor>} available colors within this picker
-         */
+        setDirtyTracker(val?: string | undefined): void;
         dirtyTrackerEvents(option?: string): void;
         onLanguageChange: () => void;
         resetDirtyTracker(): void;
         destroyDirtyTracker(): 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;
@@ -780,10 +777,7 @@ declare const Base: {
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
-        render(force?: boolean | undefined): any; /**
-         * HTML for Color Picker Previw Swatch
-         * @returns {string} - html
-         */
+        render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
@@ -815,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;
@@ -950,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;
@@ -1020,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;
@@ -1143,10 +1139,7 @@ declare const Base: {
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
-        render(force?: boolean | undefined): any; /**
-         * HTML for Color Picker Previw Swatch
-         * @returns {string} - html
-         */
+        render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
@@ -1178,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;
@@ -1313,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;
@@ -1383,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;
@@ -1501,10 +1496,7 @@ declare const Base: {
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
-        render(force?: boolean | undefined): any; /**
-         * HTML for Color Picker Previw Swatch
-         * @returns {string} - html
-         */
+        render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
@@ -1536,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;
@@ -1671,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;
@@ -1741,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;
@@ -1862,12 +1856,19 @@ declare const Base: {
         "__#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;
+        "__#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;
@@ -1886,10 +1887,7 @@ declare const Base: {
         mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-        render(force?: boolean | undefined): any; /**
-         * HTML for Color Picker Previw Swatch
-         * @returns {string} - html
-         */
+        render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
@@ -1921,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;
@@ -2056,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;
@@ -2126,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;
@@ -2342,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}

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

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-ZZDLX34E.js";import"../../chunks/ids-chunk-KTREQX4R.js";import"../../chunks/ids-chunk-2AF6ZFD6.js";import"../../chunks/ids-chunk-XA3JH3NI.js";import"../../chunks/ids-chunk-FAWNIWSH.js";import"../../chunks/ids-chunk-NQOSUCLC.js";import"../../chunks/ids-chunk-GRMIKX4U.js";import"../../chunks/ids-chunk-DCJDBNQZ.js";import"../../chunks/ids-chunk-YKKPYZ7H.js";import"../../chunks/ids-chunk-IZ2J35KQ.js";import"../../chunks/ids-chunk-AYV2UDVJ.js";import"../../chunks/ids-chunk-Y7ULYDKT.js";import"../../chunks/ids-chunk-RFRKYRBB.js";import"../../chunks/ids-chunk-GX2AIROS.js";import"../../chunks/ids-chunk-27O7W6CG.js";import"../../chunks/ids-chunk-3NW4RYDK.js";import"../../chunks/ids-chunk-J6QKI23L.js";import"../../chunks/ids-chunk-SBYA6MC4.js";import"../../chunks/ids-chunk-ZIUHOFWA.js";import"../../chunks/ids-chunk-SK3QSKHB.js";import"../../chunks/ids-chunk-4VAQJKQK.js";import"../../chunks/ids-chunk-N5P66PJP.js";import"../../chunks/ids-chunk-KUR5DINC.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-RIOIOE7O.js";import"../../chunks/ids-chunk-EBSENX5U.js";import"../../chunks/ids-chunk-RSN3V7NQ.js";import"../../chunks/ids-chunk-2NG5TGCF.js";import"../../chunks/ids-chunk-TT6S4DMY.js";import"../../chunks/ids-chunk-2FVT36Q6.js";import"../../chunks/ids-chunk-2LMGFQGI.js";import"../../chunks/ids-chunk-Y2X37JEV.js";import"../../chunks/ids-chunk-5AX3KL4V.js";import"../../chunks/ids-chunk-MFR3ZJU3.js";import"../../chunks/ids-chunk-CVXM6WYD.js";import"../../chunks/ids-chunk-LEAYO2RU.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-EGORO2H4.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-JC5MEEEQ.js";import"../../chunks/ids-chunk-MVPWITHY.js";import"../../chunks/ids-chunk-LZU7QFN4.js";import"../../chunks/ids-chunk-H2UUMN2T.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-Q4QJCPLZ.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7MATJMV7.js";import"../../chunks/ids-chunk-OM3C4JYX.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-JN2QIYPV.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-3Q46IU4X.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-2S3ZI6FA.js";import"../../chunks/ids-chunk-A5VS3GHN.js";import"../../chunks/ids-chunk-MU6TEUQV.js";import"../../chunks/ids-chunk-2NCNY5M5.js";import"../../chunks/ids-chunk-Y4EYKQDB.js";import"../../chunks/ids-chunk-6CWZ6PHN.js";import"../../chunks/ids-chunk-LJQTODTY.js";import"../../chunks/ids-chunk-5VLVRLE4.js";import"../../chunks/ids-chunk-ILHYYXOF.js";import"../../chunks/ids-chunk-XTCS3D75.js";import"../../chunks/ids-chunk-AYV2UDVJ.js";import"../../chunks/ids-chunk-Y7ULYDKT.js";import"../../chunks/ids-chunk-RFRKYRBB.js";import"../../chunks/ids-chunk-GX2AIROS.js";import"../../chunks/ids-chunk-JN2EOADZ.js";import"../../chunks/ids-chunk-HUARKWSN.js";import"../../chunks/ids-chunk-C32UHI3N.js";import"../../chunks/ids-chunk-SBYA6MC4.js";import"../../chunks/ids-chunk-MQ6BZDJX.js";import"../../chunks/ids-chunk-OG7QKM76.js";import"../../chunks/ids-chunk-QB2R7NFX.js";import"../../chunks/ids-chunk-DWQDPDVF.js";import"../../chunks/ids-chunk-D5LVWGTQ.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-THWPNPVI.js";import"../../chunks/ids-chunk-RVGJSPDM.js";import"../../chunks/ids-chunk-CIV4C2EF.js";import"../../chunks/ids-chunk-TS5BNU4J.js";import"../../chunks/ids-chunk-EVHXH7AZ.js";import"../../chunks/ids-chunk-FEKUOSFS.js";import"../../chunks/ids-chunk-SFFMOANB.js";import"../../chunks/ids-chunk-JLFFKOCV.js";import"../../chunks/ids-chunk-RK2P2XSH.js";import"../../chunks/ids-chunk-VVZZ2ZHD.js";import"../../chunks/ids-chunk-LEAYO2RU.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-JXYR7PEP.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-VEYEV4RH.js";import"../../chunks/ids-chunk-7GOUFWOD.js";import"../../chunks/ids-chunk-LZU7QFN4.js";import"../../chunks/ids-chunk-J3AAQ3QT.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-K44HS5DC.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-WMUHD4GN.js";import"../../chunks/ids-chunk-QNEN3NVF.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-O4ZHP64Q.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-2HSRRRSM.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-FAEI3K2L.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-container/ids-container.css

@@ -26,7 +26,7 @@
 .ids-container {
   background-color: var(--ids-color-background-default);
   box-sizing: border-box;
-  color: var(--ids-color-text);
+  color: var(--ids-color-text-default);
   height: 100%;
   outline: none;
   overflow: auto;