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

package/themes/ids-theme-default-light.css

@@ -61,7 +61,7 @@
   --ids-color-turquoise-90: #297B7B;
   --ids-color-turquoise-100: #1F5E5E;
   --ids-color-slate-00: #FFF;
-  --ids-color-slate-10: #FAFAFA;
+  --ids-color-slate-10: #F5F5F5;
   --ids-color-slate-20: #E0E0E1;
   --ids-color-slate-30: #C5C5C9;
   --ids-color-slate-40: #BBBBBF;
@@ -157,7 +157,8 @@
   --ids-border-radius-01: 2px;
   --ids-border-radius-02: 4px;
   --ids-border-radius-03: 8px;
-  --ids-border-radius-04: 16px;
+  --ids-border-radius-04: 12px;
+  --ids-border-radius-05: 16px;
   --ids-border-radius-circle: 50%;
   --ids-cursor-default: default;
   --ids-cursor-grabbing: grabbing;
@@ -182,9 +183,9 @@
   --ids-font-family-hi: "Noto Sans", source sans pro, -apple-system, helvetica, arial;
   --ids-font-family-ja: "Noto Sans JP", source sans pro, -apple-system, helvetica, arial;
   --ids-font-family-ko: "Noto Sans KR", source sans pro, -apple-system, helvetica, arial;
-  --ids-font-family-th: "Sarabun", source sans pro, -apple-system, helvetica, arial;
-  --ids-font-family-zh-cn: "Noto Sans SC", source sans pro, -apple-system, helvetica, arial;
-  --ids-font-family-zh-tw: "Noto Sans TC", source sans pro, -apple-system, helvetica, arial;
+  --ids-font-family-th: "Noto Sans Thai", source sans pro, -apple-system, helvetica, arial;
+  --ids-font-family-zh-hans: "Noto Sans SC", source sans pro, -apple-system, helvetica, arial;
+  --ids-font-family-zh-hant: "Noto Sans TC", source sans pro, -apple-system, helvetica, arial;
   --ids-font-family-mono: source code pro, monospace;
   --ids-font-weight-light: 300;
   --ids-font-weight-normal: 400;
@@ -233,6 +234,7 @@
   --ids-line-height-20: 1.25;
   --ids-line-height-30: 1.5;
   --ids-line-height-40: 2;
+  --ids-z-index-0: 0;
   --ids-z-index-10: 1;
   --ids-z-index-20: 2;
   --ids-z-index-30: 5;
@@ -262,7 +264,7 @@
   --ids-action-panel-header-color-background: var(--ids-color-neutral-10);
   --ids-action-panel-header-color-border: var(--ids-color-neutral-20);
   --ids-action-panel-content-background-color: var(--ids-color-neutral-00);
-  --ids-action-sheet-border-radius: var(--ids-border-radius-04);
+  --ids-action-sheet-border-radius: var(--ids-border-radius-05);
   --ids-action-sheet-padding: var(--ids-space-40);
   --ids-action-sheet-shadow: 0 0 8px rgb(0 0 0 / 0.2);
   --ids-action-sheet-color-background: var(--ids-color-neutral-00);
@@ -365,6 +367,7 @@
   --ids-box-outline-hover: 1px solid var(--ids-color-neutral-30);
   --ids-box-height: auto;
   --ids-box-width: auto;
+  --ids-button-color-text-default: currentColor;
   --ids-button-primary-color-border-default: var(--ids-color-primary);
   --ids-button-primary-color-background-default: var(--ids-color-primary);
   --ids-button-primary-color-text-default: var(--ids-color-text-on-primary);
@@ -393,17 +396,26 @@
   --ids-button-tertiary-color-text-hover: var(--ids-color-primary-70);
   --ids-button-tertiary-color-background-hover: var(--ids-color-primary-10);
   --ids-button-tertiary-color-text-disabled: var(--ids-color-neutral-30);
+  --ids-button-tertiary-shadow-focus: var(--ids-shadow-20);
   --ids-button-tertiary-font-weight: var(--ids-font-weight-semibold);
   --ids-button-tertiary-color-background-pressed: var(--ids-color-primary-30);
   --ids-button-icon-padding: calc(var(--ids-space-40) - 1px);
   --ids-button-destructive-color-background-hover: var(--ids-color-error-10);
+  --ids-button-app-menu-color-text-default: var(--ids-color-neutral-20);
+  --ids-button-app-menu-color-background-hover: var(--ids-color-neutral-90);
+  --ids-button-app-menu-color-text-hover: var(--ids-color-neutral-00);
+  --ids-button-app-menu-color-text-disabled: var(--ids-color-neutral-50);
   --ids-button-alternate-color-text-default: var(--ids-color-neutral-10);
   --ids-button-alternate-color-text-default-hover: var(--ids-color-neutral-00);
   --ids-button-alternate-color-background-pressed: var(--ids-color-text-on-primary);
-  --ids-button-formatter-color-border: var(--ids-color-neutral-00);
+  --ids-button-formatter-color-border-focus: var(--ids-color-border-focus);
   --ids-button-formatter-opacity-disabled: 0.4;
-  --ids-button-formatter-color-text-hover: var(--ids-color-text-inverse);
-  --ids-button-formatter-color-text-default: var(--ids-input-color-background-readonly);
+  --ids-button-formatter-color-text-hover: var(--ids-color-neutral-100);
+  --ids-button-formatter-color-text-disabled: var(--ids-color-neutral-50);
+  --ids-button-formatter-color-background-hover: var(--ids-color-neutral-20);
+  --ids-button-formatter-color-active: var(--ids-color-primary-70);
+  --ids-button-formatter-color-text-default: var(--ids-color-neutral-100);
+  --ids-button-formatter-size: 32px;
   --ids-button-module-border-radius: 10px;
   --ids-button-module-color-background-hover: rgba(0 0 0 / 0.1);
   --ids-button-module-color-text-default: var(--ids-color-neutral-90);
@@ -497,6 +509,7 @@
   --ids-checkbox-color-border-selected-disabled: var(--ids-input-color-text-disabled);
   --ids-checkbox-color-text-disabled: var(--ids-color-text-disabled);
   --ids-checkbox-color-border-focus: var(--ids-input-color-border-focus);
+  --ids-checkbox-color-border-focus-error: var(--ids-color-error-30);
   --ids-checkbox-shadow-focus: var(--ids-shadow-focus);
   --ids-checkbox-color-background-multiselect: var(--ids-color-background-default);
   --ids-counts-color-text: var(--ids-color-text-subtle);
@@ -512,7 +525,7 @@
   --ids-data-grid-cell-color-border: var(--ids-color-neutral-30);
   --ids-data-grid-cell-checkbox-color-border: var(--ids-input-color-border-default);
   --ids-data-grid-cell-color-text-default: var(--ids-color-neutral-100);
-  --ids-data-grid-cell-color-text-disabled: var(--ids-color-neutral-30);
+  --ids-data-grid-cell-color-text-disabled: var(--ids-color-neutral-40);
   --ids-data-grid-cell-color-background-error: rgba(232 79 79 / 0.1);
   --ids-data-grid-list-cell-color-border: var(--ids-color-neutral-20);
   --ids-data-grid-list-header-color-border: var(--ids-color-neutral-10);
@@ -522,28 +535,32 @@
   --ids-data-grid-list-header-color-icon-sorted: var(--ids-color-neutral-00);
   --ids-data-grid-list-header-checkbox-color-background: var(--ids-color-neutral-70);
   --ids-data-grid-header-color-border: var(--ids-color-neutral-30);
-  --ids-data-grid-header-color-background-default: var(--ids-color-neutral-80);
-  --ids-data-grid-header-hover-background-color: var(--ids-color-neutral-90);
+  --ids-data-grid-header-color-background-default: var(--ids-color-neutral-10);
+  --ids-data-grid-header-color-background-hover: var(--ids-color-neutral-20);
   --ids-data-grid-header-checkbox-color-background: var(--ids-color-neutral-00);
-  --ids-data-grid-header-checkbox-color-border: var(--ids-color-neutral-00);
-  --ids-data-grid-header-color-icon: var(--ids-color-neutral-00);
-  --ids-data-grid-header-drag-background-color: var(--ids-color-neutral-100);
-  --ids-data-grid-header-color-background-placeholder-dragging: var(--ids-color-neutral-50);
-  --ids-data-grid-header-color-text: var(--ids-color-neutral-00);
+  --ids-data-grid-header-checkbox-color-border: var(--ids-color-neutral-30);
+  --ids-data-grid-header-color-icon: var(--ids-color-neutral-100);
+  --ids-data-grid-header-drag-background-color: var(--ids-color-neutral-30);
+  --ids-data-grid-header-drag-arrow-color-background: var(--ids-color-neutral-90);
+  --ids-data-grid-header-color-background-default-placeholder-dragging: var(--ids-color-neutral-00);
+  --ids-data-grid-header-color-text: var(--ids-color-neutral-100);
   --ids-data-grid-header-color-icon-unsorted: var(--ids-color-neutral-50);
-  --ids-data-grid-header-color-icon-sorted: var(--ids-color-neutral-00);
+  --ids-data-grid-header-color-icon-sorted: var(--ids-color-neutral-100);
   --ids-data-grid-header-lg-padding: 8px var(--ids-data-grid-padding-lg);
   --ids-data-grid-header-md-padding: 8px var(--ids-data-grid-padding-md);
   --ids-data-grid-header-sm-padding: 8px var(--ids-data-grid-padding-sm);
   --ids-data-grid-header-xs-padding: 6px var(--ids-data-grid-padding-xs);
-  --ids-data-grid-header-xxs-padding: 2px 2px;
-  --ids-data-grid-header-expander-color: var(--ids-color-neutral-20);
-  --ids-data-grid-header-expander-active-color: var(--ids-color-neutral-00);
+  --ids-data-grid-header-xxs-padding: 5px 2px 0 2px;
+  --ids-data-grid-header-expander-color: var(--ids-color-neutral-90);
+  --ids-data-grid-header-expander-color-active: var(--ids-color-neutral-100);
+  --ids-data-grid-filter-icon-color: var(--ids-color-neutral-90);
+  --ids-data-grid-filter-icon-color-background-hover: transparent;
+  --ids-data-grid-filter-icon-color-hover: var(--ids-color-neutral-100);
   --ids-data-grid-filter-input-color-background: transparent;
-  --ids-data-grid-filter-input-color-border-default: var(--ids-color-neutral-30);
-  --ids-data-grid-filter-input-color-text-default: var(--ids-color-neutral-00);
-  --ids-data-grid-filter-input-color-background-hover: var(--ids-color-neutral-20);
-  --ids-data-grid-filter-input-color-border-focus: var(--ids-color-azure-50);
+  --ids-data-grid-filter-input-color-border-default: var(--ids-color-neutral-50);
+  --ids-data-grid-filter-input-color-text-default: var(--ids-color-neutral-100);
+  --ids-data-grid-filter-input-color-border-hover: var(--ids-color-neutral-90);
+  --ids-data-grid-filter-input-color-border-focus: var(--ids-color-azure-60);
   --ids-data-grid-filter-input-color-border-disabled: var(--ids-color-neutral-50);
   --ids-data-grid-filter-input-color-text-disabled: var(--ids-color-neutral-40);
   --ids-data-grid-filter-input-color-background-readonly: var(--ids-color-neutral-60);
@@ -653,7 +670,7 @@
   --ids-editor-source-line-padding-block-start: var(--ids-space-60);
   --ids-editor-source-line-padding-inline: var(--ids-space-50);
   --ids-editor-source-font-line-height: var(--ids-line-height-30);
-  --ids-editor-source-line-font-weight: var(--ids-font-weight-bold);
+  --ids-editor-source-line-font-weight: var(--ids-font-weight-semi-bold);
   --ids-editor-source-color-background-default: var(--ids-color-neutral-10);
   --ids-editor-source-line-color-text: var(--ids-color-neutral-50);
   --ids-editor-textarea-color-background: transparent;
@@ -689,6 +706,13 @@
   --ids-header-color-border-bottom: var(--ids-color-neutral-30);
   --ids-header-color-background: var(--ids-color-neutral-00);
   --ids-header-color-text: var(--ids-color-text-default);
+  --ids-header-button-color-text-default: var(--ids-button-tertiary-color-text-default);
+  --ids-header-button-color-background-hover: var(--ids-button-tertiary-color-background-hover);
+  --ids-header-button-color-text-hover: var(--ids-button-tertiary-color-text-hover);
+  --ids-header-input-color-border-hover: var(--ids-input-color-border-hover);
+  --ids-header-button-color-text-disabled: var(--ids-button-tertiary-color-text-disabled);
+  --ids-header-button-shadow-focus: var(--ids-button-tertiary-shadow-focus);
+  --ids-header-button-color-border-focus: var(--ids-button-tertiary-color-border-focus);
   --ids-header-padding: 8px;
   --ids-header-gradient-opacity-none: rgb(0 114 237 / 1);
   --ids-header-gradient-opacity-full: rgb(0 114 237 / 0);
@@ -712,9 +736,8 @@
   --ids-icon-width-default: 18px;
   --ids-icon-color-default: currentColor;
   --ids-icon-color-default-disabled: var(--ids-color-text-disabled);
-  --ids-icon-empty-color: var(--ids-color-primary);
-  --ids-icon-empty-new-color: var(--ids-color-neutral-60);
-  --ids-icon-status-color-padding: 5px;
+  --ids-icon-status-color-padding: 3px;
+  --ids-icon-infor-color: #D5000E;
   --ids-icon-status-color-border-radius: var(--ids-border-radius-circle);
   --ids-icon-status-color-ruby-color-text: var(--ids-color-ruby-60);
   --ids-icon-status-color-ruby-color-background: var(--ids-color-ruby-10);
@@ -766,15 +789,16 @@
   --ids-input-font-size: var(--ids-font-size-40);
   --ids-input-font-size-sm: var(--ids-font-size-40);
   --ids-input-color-background-default: var(--ids-color-neutral-00);
-  --ids-input-color-border-default: var(--ids-color-neutral-40);
+  --ids-input-color-border-default: var(--ids-color-neutral-50);
   --ids-input-color-text: var(--ids-color-text-data);
+  --ids-input-color-text-placeholder: var(--ids-color-neutral-50);
   --ids-input-label-color-text-default: var(--ids-color-text-label);
   --ids-input-color-border-readonly: var(--ids-color-neutral-40);
   --ids-input-color-text-readonly: var(--ids-color-text-data);
   --ids-input-color-background-readonly: var(--ids-color-neutral-20);
   --ids-input-color-text-disabled: var(--ids-color-text-disabled);
   --ids-input-color-border-disabled: var(--ids-color-text-disabled);
-  --ids-input-color-border-hover: var(--ids-color-neutral-90);
+  --ids-input-color-border-hover: var(--ids-color-azure-60);
   --ids-input-color-border-focus: var(--ids-color-border-focus);
   --ids-input-header-color-text-default: var(--ids-color-neutral-00);
   --ids-input-header-color-text-placeholder: rgba(255 255 255 / 0.7);
@@ -848,12 +872,13 @@
   --ids-loading-indicator-destructive-progress-color-border: var(--ids-color-ruby-60);
   --ids-loading-indicator-tertiary-destructive-color-border: var(--ids-color-ruby-30);
   --ids-masthead-color-background: var(--ids-color-neutral-100);
-  --ids-masthead-color-text: var(--ids-color-neutral-30);
-  --ids-masthead-padding-inline: var(--ids-space-60);
-  --ids-masthead-height-min: 40px;
-  --ids-masthead-logo-padding-icon-inline: var(--ids-space-40);
-  --ids-masthead-logo-top-space-icon: var(--ids-space-10);
+  --ids-masthead-color-text: var(--ids-color-neutral-10);
+  --ids-masthead-padding-inline: var(--ids-space-40);
+  --ids-masthead-height: 40px;
+  --ids-masthead-logo-padding-icon-inline: var(--ids-space-20);
+  --ids-masthead-logo-top-space-icon: 2px;
   --ids-masthead-title-margin-inline: var(--ids-space-40);
+  --ids-masthead-color-hover: var(--ids-color-neutral-00);
   --ids-menu-header-font-weight: var(--ids-font-weight-semibold);
   --ids-menu-header-margin: var(--ids-space-30);
   --ids-menu-header-padding: var(--ids-space-30);
@@ -887,6 +912,75 @@
   --ids-modal-button-color-default: var(--ids-color-primary);
   --ids-modal-button-color-hover: var(--ids-color-primary-80);
   --ids-modal-shadow-focus: 0 0 3px 1px var(--ids-color-primary);
+  --ids-module-nav-background-color: var(--ids-color-slate-10);
+  --ids-module-nav-border-color: var(--ids-color-slate-30);
+  --ids-module-nav-common-border-radius: 8px;
+  --ids-module-nav-collapsed-size: 56px;
+  --ids-module-nav-gutter-size: 4px;
+  --ids-module-nav-expanded-size: 320px;
+  --ids-module-nav-text-color: var(--ids-color-slate-60);
+  --ids-module-nav-bar-z-index: var(--ids-z-index-10);
+  --ids-module-nav-content-z-index: var(--ids-z-index-0);
+  --ids-module-nav-detail-background-color: var(--ids-color-slate-20);
+  --ids-module-nav-detail-size: 300px;
+  --ids-module-nav-accordion-gutter-size: 8px;
+  --ids-module-nav-separator-color: var(--ids-color-slate-20);
+  --ids-module-nav-separator-expanded-edge-distance: 22px;
+  --ids-module-nav-input-border-width: 1px;
+  --ids-module-nav-input-padding-inline-start-size: 10px;
+  --ids-module-nav-input-bg-color: var(--ids-color-neutral-00);
+  --ids-module-nav-input-border-color: var(--ids-color-slate-20);
+  --ids-module-nav-input-text-color: var(--ids-color-slate-60);
+  --ids-module-nav-search-input-width: calc(var(--ids-module-nav-detail-size) + 2px);
+  --ids-module-nav-input-focus-bg-color: var(--ids-color-slate-10);
+  --ids-module-nav-input-hover-bg-color: var(--ids-color-slate-20);
+  --ids-module-nav-item-height: 40px;
+  --ids-module-nav-item-padding-size: 13px;
+  --ids-module-nav-item-margin-inline: 8px;
+  --ids-module-nav-item-icon-start-spacing: 11px;
+  --ids-module-nav-item-icon-end-spacing: 19px;
+  --ids-module-nav-item-dropdown-icon-size: 13px;
+  --ids-module-nav-item-collapsed-size: 40px;
+  --ids-module-nav-item-display-icon-collapsed-margin: 10px;
+  --ids-module-nav-item-collapsed-general-spacing-size: 16px;
+  --ids-module-nav-item-collapsed-first-last-spacing-size: 8px;
+  --ids-module-nav-item-expanded-icon-text-spacing-size: 16px;
+  --ids-module-nav-item-text-color: var(--ids-color-slate-100);
+  --ids-module-nav-item-hover-bg-color: var(--ids-color-slate-20);
+  --ids-module-nav-item-hover-text-color: var(--ids-color-slate-100);
+  --ids-module-nav-item-selected-bg-color: var(--ids-color-azure-10);
+  --ids-module-nav-item-selected-text-color: var(--ids-color-azure-70);
+  --ids-module-nav-item-top-expander-size: 31px;
+  --ids-module-nav-item-sub-expander-size: 23px;
+  --ids-module-nav-switcher-button-size: 40px;
+  --ids-module-nav-switcher-button-gutter-size: 6px;
+  --ids-module-nav-switcher-button-icon-margin: 2px;
+  --ids-module-nav-switcher-dropdown-height: 40px;
+  --ids-module-nav-switcher-dropdown-width: 260px;
+  --ids-module-nav-switcher-dropdown-item-margin-block: 4px;
+  --ids-module-nav-switcher-dropdown-item-height: 48px;
+  --ids-module-nav-switcher-dropdown-bg-color: var(--ids-color-slate-10);
+  --ids-module-nav-switcher-dropdown-item-focus-bg-color: var(--ids-color-slate-20);
+  --ids-module-nav-switcher-dropdown-item-text-color: var(--ids-color-slate-60);
+  --ids-module-nav-switcher-dropdown-icon-top-offset: 11px;
+  --ids-module-nav-search-wrapper-height: 40px;
+  --ids-module-nav-search-input-height: 40px;
+  --ids-module-nav-search-input-icon-y-offset: 20px;
+  --ids-module-nav-search-input-bg-color: var(--ids-color-slate-20);
+  --ids-module-nav-search-input-text-color: var(--ids-color-slate-80);
+  --ids-module-nav-search-input-focused-bg-color: var(--ids-color-neutral-00);
+  --ids-module-nav-search-input-focused-text-color: var(--ids-color-slate-100);
+  --ids-module-nav-search-input-placeholder-text-color: var(--ids-color-slate-100);
+  --ids-module-nav-search-input-focused-placeholder-text-color: var(--ids-color-slate-40);
+  --ids-module-nav-search-close-icon-x-offset: 12px;
+  --ids-module-nav-settings-menu-box-shadow: 0 0 8px 1px rgba(0 0 0 / 0.08);
+  --ids-module-nav-settings-menu-item-height: 40px;
+  --ids-module-nav-settings-menu-item-text-color: var(--ids-color-slate-80);
+  --ids-module-nav-settings-menu-item-icon-color: var(--ids-color-slate-70);
+  --ids-module-nav-settings-menu-min-width: 300px;
+  --ids-module-nav-settings-menu-separator-color: var(--ids-color-slate-10);
+  --ids-module-nav-settings-menu-gutter-size: 8px;
+  --ids-module-nav-footer-gutter-size: 24px;
   --ids-calendar-month-view-color-background-default: var(--ids-color-neutral-00);
   --ids-calendar-month-view-color-border: var(--ids-color-neutral-20);
   --ids-calendar-month-view-color-text-alternate: var(--ids-color-neutral-40);
@@ -1025,10 +1119,11 @@
   --ids-search-field-card-color-text: var(--ids-color-text);
   --ids-search-field-card-color-background: var(--ids-color-neutral-10);
   --ids-separator-color-background: var(--ids-color-neutral-40);
-  --ids-separator-alternate-color-background: var(--ids-color-neutral-40);
   --ids-separator-height: 24px;
   --ids-separator-width: 1px;
   --ids-separator-margin: 4px;
+  --ids-separator-alternate-color-background: var(--ids-color-neutral-30);
+  --ids-separator-alternate-margin: 8px;
   --ids-skip-link-color-background: var(--ids-popup-color-background);
   --ids-skip-link-border-color: var(--ids-popup-color-border);
   --ids-skip-link-margin: var(--ids-space-60);
@@ -1152,12 +1247,13 @@
   --ids-tab-content-color-text: var(--ids-color-text);
   --ids-tab-color-text-default: var(--ids-color-text-default);
   --ids-tab-divider-color-background: var(--ids-color-neutral-30);
-  --ids-tab-color-background-hover: var(--ids-color-neutral-20);
-  --ids-tab-color-text-hover: var(--ids-color-neutral-80);
-  --ids-tab-color-border-focus: var(--ids-color-neutral-80);
-  --ids-tab-color-border-bottom: var(--ids-color-neutral-30);
-  --ids-tab-color-text-disabled: var(--ids-color-neutral-30);
-  --ids-tab-color-text-selected: var(--ids-color-neutral-100);
+  --ids-tab-color-background-hover: var(--ids-color-primary-10);
+  --ids-tab-color-text-hover: var(--ids-color-primary-60);
+  --ids-tab-color-border-focus: var(--ids-color-primary-60);
+  --ids-tab-shadow-focus: var(--ids-shadow-30);
+  --ids-tab-color-border-bottom: var(--ids-color-neutral-60);
+  --ids-tab-color-text-disabled: var(--ids-color-neutral-40);
+  --ids-tab-color-text-selected: var(--ids-color-primary-60);
   --ids-tab-header-color-background-hover: var(--ids-color-neutral-20);
   --ids-tab-vertical-color-background-default: var(--ids-color-neutral-20);
   --ids-tab-vertical-color-text-default: var(--ids-color-text-default);
@@ -1184,6 +1280,7 @@
   --ids-tab-module-color-text-selected: var(--ids-color-neutral-100);
   --ids-tab-module-color-background-disabled: var(--ids-color-neutral-20);
   --ids-tab-module-color-text-disabled: var(--ids-color-neutral-50);
+  --ids-tag-height: 24px;
   --ids-tag-color-background-default: var(--ids-input-color-background-readonly);
   --ids-tag-color-border: var(--ids-input-color-background-readonly);
   --ids-tag-border-radius: var(--ids-border-radius-04);
@@ -1243,7 +1340,8 @@
   --ids-toast-color-border: var(--ids-popup-color-border);
   --ids-toast-color-text: var(--ids-color-neutral-100);
   --ids-toast-progress-color-background: var(--ids-progress-bar-fill-color-background);
-  --ids-toolbar-formatter-color-background: var(--ids-color-neutral-80);
+  --ids-toolbar-formatter-color-background: var(--ids-color-neutral-10);
+  --ids-toolbar-formatter-color-border-bottom: var(--ids-color-neutral-30);
   --ids-tooltip-color-background: var(--ids-color-neutral-80);
   --ids-tooltip-padding: 8px 16px;
   --ids-tooltip-border-radius: var(--ids-border-radius-01);

package/utils/ids-attribute-utils/ids-attribute-utils.d.ts

@@ -0,0 +1,2 @@
+import IdsElement from '../../core/ids-element';
+export declare const setBooleanAttr: (name: string, el: IdsElement, value: boolean | string) => void;

package/utils/ids-attribute-utils/ids-attribute-utils.js

@@ -0,0 +1 @@
+import{a}from"../../chunks/ids-chunk-T4VCWHNS.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as setBooleanAttr};

package/utils/ids-breakpoint-utils/ids-breakpoint-utils.js

@@ -1 +1 @@
-import{a,b,c}from"../../chunks/ids-chunk-U34YTPJC.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as breakpoints,c as isWidthAbove,b as isWidthBelow};
+import{a,b,c}from"../../chunks/ids-chunk-U34YTPJC.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as breakpoints,c as isWidthAbove,b as isWidthBelow};

package/utils/ids-color-utils/ids-color-utils.d.ts

@@ -12,6 +12,14 @@ export declare function hexToRgba(hex: string, opacity?: number): string;
  * @returns {string} converted hex
  */
 export declare function rgbaToHex(rgba: string, forceRemoveAlpha?: boolean): string;
+/**
+ * Picks a light or dark color based on a background
+ * @param {string} bgColor The hex background color
+ * @param {string} lightColor The hex light color
+ * @param {string} darkColor The hex dark color
+ * @returns {string} the contrasting color
+ */
+export declare function contrastColor(bgColor: string, lightColor: string, darkColor: string): string;
 /**
  * Converts the provided "built in" human-readable color to an RGB(A?) value
  * @private

package/utils/ids-color-utils/ids-color-utils.js

@@ -1 +1 @@
-import{a,b,c,d,e,f}from"../../chunks/ids-chunk-PITNTT2F.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{e as adjustColor,c as builtinToRgba,d as colorNameToRgba,a as hexToRgba,b as rgbaToHex,f as statusToIDSColor};
+import{a,b,c,d,e,f,g}from"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{f as adjustColor,d as builtinToRgba,e as colorNameToRgba,c as contrastColor,a as hexToRgba,b as rgbaToHex,g as statusToIDSColor};

package/utils/ids-date-utils/ids-date-utils.js

@@ -1 +1 @@
-import{a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v}from"../../chunks/ids-chunk-EJFTSZLS.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{g as addDate,d as dateDiff,f as daysDiff,o as daysInMonth,m as firstDayOfMonthDate,b as firstDayOfWeekDate,l as gregorianToUmalqura,u as hoursTo12,t as hoursTo24,i as isDaylightSavingTime,a as isTodaysDate,j as isValidDate,n as lastDayOfMonthDate,c as lastDayOfWeekDate,e as monthDiff,v as removeDateRange,h as subtractDate,k as umalquraToGregorian,s as weekNumber,r as weekNumberToDate,p as weeksInMonth,q as weeksInRange};
+import{a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v}from"../../chunks/ids-chunk-N7P4D4N3.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{g as addDate,d as dateDiff,f as daysDiff,o as daysInMonth,m as firstDayOfMonthDate,b as firstDayOfWeekDate,l as gregorianToUmalqura,u as hoursTo12,t as hoursTo24,i as isDaylightSavingTime,a as isTodaysDate,j as isValidDate,n as lastDayOfMonthDate,c as lastDayOfWeekDate,e as monthDiff,v as removeDateRange,h as subtractDate,k as umalquraToGregorian,s as weekNumber,r as weekNumberToDate,p as weeksInMonth,q as weeksInRange};

package/utils/ids-debounce-utils/ids-debounce-utils.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-ONPEMRJP.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-ONPEMRJP.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as default};

package/utils/ids-deep-clone-utils/ids-deep-clone-utils.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{b as deepClone,a as deepCloneArray};
+import{a,b}from"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{b as deepClone,a as deepCloneArray};

package/utils/ids-deferred-utils/ids-deferred-utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Promise wrapper class that allows resolving/rejecting the promise externally
+ */
+export declare class IdsDeferred {
+    promise: Promise<any>;
+    resolve: any;
+    reject: any;
+    hasResolved: boolean;
+    constructor();
+}

package/utils/ids-deferred-utils/ids-deferred-utils.js

@@ -0,0 +1 @@
+import{a}from"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as IdsDeferred};

package/utils/ids-device-env-specs-utils/ids-device-env-specs-utils.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-AQ2W7TKP.js";import"../../chunks/ids-chunk-HABPILOR.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as getSpecs};
+import{a}from"../../chunks/ids-chunk-XFLU3ETC.js";import"../../chunks/ids-chunk-6EMRTLSG.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as getSpecs};

package/utils/ids-dom-utils/ids-dom-utils.d.ts

@@ -98,6 +98,16 @@ export declare function getEditableRect(rect: DOMRect): {
  * @returns {boolean} true if overflowing, false otherwise
  */
 export declare function checkOverflow(el?: HTMLElement | null): boolean;
+/**
+ * Toggles a scrollbar on an element that should only display one if its contents are overflowed
+ * NOTE: the element receiving the `has-scrollbar` class should have accompanying styles
+ *   applied for generating the scrollbar via `overflow: scroll;` or related prop.
+ * @param {HTMLElement} el target element
+ * @param {HTMLElement} [classEl] if defined, receives the CSS class needed to enable scrolling instead of the main element
+ * @param {boolean | undefined} [doToggle] if true, toggles the scrollbar
+ * @returns {boolean} true if the scrollbar was toggled
+ */
+export declare const toggleScrollbar: (el: HTMLElement, classEl?: HTMLElement, doToggle?: boolean) => boolean;
 /**
  * Check if given element has given css class
  * @param {HTMLElement} el the element to act on
@@ -124,3 +134,12 @@ export declare function querySelectorAllShadowRoot(selector: string, rootNode?:
  * @returns {string | null} a pixel value representing a `maxHeight`, or null
  */
 export declare function validMaxHeight(value: string | number | null): string | null;
+/**
+ * Parses a number or string representing a numeric size value
+ * (potentially with a unit type attached) into a string value
+ * compatible with a CSS length data type.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/length
+ * @param {string | number | null} value incoming value definition
+ * @returns {string} stringified value representing a CSS length data type
+ */
+export declare function parseNumberWithUnits(value: string | number | null): string;

package/utils/ids-dom-utils/ids-dom-utils.js

@@ -1 +1 @@
-import{a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q}from"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{m as checkOverflow,d as getClosest,b as getClosestContainerNode,c as getClosestRootNode,a as getClosestShadow,l as getEditableRect,o as getElementAtMouseLocation,n as hasClass,g as next,f as nextUntil,e as parents,h as previous,p as querySelectorAllShadowRoot,i as transitionToPromise,q as validMaxHeight,k as waitForAnimationEnd,j as waitForTransitionEnd};
+import{a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s}from"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{m as checkOverflow,d as getClosest,b as getClosestContainerNode,c as getClosestRootNode,a as getClosestShadow,l as getEditableRect,p as getElementAtMouseLocation,o as hasClass,g as next,f as nextUntil,e as parents,s as parseNumberWithUnits,h as previous,q as querySelectorAllShadowRoot,n as toggleScrollbar,i as transitionToPromise,r as validMaxHeight,k as waitForAnimationEnd,j as waitForTransitionEnd};

package/utils/ids-event-path-utils/ids-event-path-utils.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/ids-chunk-KWUI36H2.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as eventPath,b as findInPath};
+import{a,b}from"../../chunks/ids-chunk-KWUI36H2.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as eventPath,b as findInPath};

package/utils/ids-excel-exporter/ids-excel-exporter.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/ids-chunk-LVUIKMAB.js";import"../../chunks/ids-chunk-WQCS5BSK.js";import"../../chunks/ids-chunk-OFBXKRAJ.js";import"../../chunks/ids-chunk-QWU6YXGX.js";import"../../chunks/ids-chunk-67UG67HK.js";import"../../chunks/ids-chunk-2R6FAQUN.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as exportToCSV,b as exportToXLSX};
+import{a,b}from"../../chunks/ids-chunk-LVUIKMAB.js";import"../../chunks/ids-chunk-WQCS5BSK.js";import"../../chunks/ids-chunk-OFBXKRAJ.js";import"../../chunks/ids-chunk-QWU6YXGX.js";import"../../chunks/ids-chunk-67UG67HK.js";import"../../chunks/ids-chunk-2R6FAQUN.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as exportToCSV,b as exportToXLSX};

package/utils/ids-excel-exporter/ids-excel-formatter.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-67UG67HK.js";import"../../chunks/ids-chunk-2R6FAQUN.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as XLSXFormatter};
+import{a}from"../../chunks/ids-chunk-67UG67HK.js";import"../../chunks/ids-chunk-2R6FAQUN.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as XLSXFormatter};

package/utils/ids-excel-exporter/ids-worksheet-templates.js

@@ -1 +1 @@
-import{a,b,c,d,e,f}from"../../chunks/ids-chunk-2R6FAQUN.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{d as CONTENT_TYPES,c as RELS,f as STYLES_XML,a as WORKBOOK_XML,b as WORKBOOK_XML_REL,e as WORKSHEET_TEMPLATE};
+import{a,b,c,d,e,f}from"../../chunks/ids-chunk-2R6FAQUN.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{d as CONTENT_TYPES,c as RELS,f as STYLES_XML,a as WORKBOOK_XML,b as WORKBOOK_XML_REL,e as WORKSHEET_TEMPLATE};

package/utils/ids-file-saver/ids-file-saver.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-WQCS5BSK.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as saveAs};
+import{a}from"../../chunks/ids-chunk-WQCS5BSK.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as saveAs};

package/utils/ids-object-utils/ids-object-utils.js

@@ -1 +1 @@
-import{a,b,c}from"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{c as calculateTextRenderWidth,a as isObject,b as isObjectAndNotEmpty};
+import{a,b,c}from"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{c as calculateTextRenderWidth,a as isObject,b as isObjectAndNotEmpty};

package/utils/ids-string-utils/ids-string-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * Convert a string in presumed kebab case to camel case
- * @param {string} str [description]
+ * @param {string} str description
  * @returns {string} The return string
  */
 export declare function camelCase(str: string): string;

package/utils/ids-string-utils/ids-string-utils.js

@@ -1 +1 @@
-import{a,b,c,d,e,f,g,h,i,j}from"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{h as buildClassAttrib,a as camelCase,j as escapeRegExp,g as injectTemplate,i as isPrintable,b as kebabCase,c as removeDuplicates,d as removeNewLines,e as stringToBool,f as stringToNumber};
+import{a,b,c,d,e,f,g,h,i,j}from"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{h as buildClassAttrib,a as camelCase,j as escapeRegExp,g as injectTemplate,i as isPrintable,b as kebabCase,c as removeDuplicates,d as removeNewLines,e as stringToBool,f as stringToNumber};

package/utils/ids-timer-utils/ids-timer-utils.js

@@ -1 +1 @@
-import{a,b,c,d,e}from"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{b as clearAnimationInterval,d as clearAnimationTimeout,e as cssTransitionTimeout,a as requestAnimationInterval,c as requestAnimationTimeout};
+import{a,b,c,d,e}from"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{b as clearAnimationInterval,d as clearAnimationTimeout,e as cssTransitionTimeout,a as requestAnimationInterval,c as requestAnimationTimeout};

package/utils/ids-xss-utils/ids-xss-utils.js

@@ -1 +1 @@
-import{a,b,c,d,e,f}from"../../chunks/ids-chunk-LCUXCSNZ.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{f as escapeHTML,a as sanitizeConsoleMethods,b as sanitizeHTML,c as stripHTML,d as stripTags,e as unescapeHTML};
+import{a,b,c,d,e,f}from"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{f as escapeHTML,a as sanitizeConsoleMethods,b as sanitizeHTML,c as stripHTML,d as stripTags,e as unescapeHTML};

package/utils/ids-zip/ids-zip-entry.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-QWU6YXGX.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as ZipEntry};
+import{a}from"../../chunks/ids-chunk-QWU6YXGX.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as ZipEntry};

package/utils/ids-zip/ids-zip.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-OFBXKRAJ.js";import"../../chunks/ids-chunk-QWU6YXGX.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as IdsZip};
+import{a}from"../../chunks/ids-chunk-OFBXKRAJ.js";import"../../chunks/ids-chunk-QWU6YXGX.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as IdsZip};