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

package/components/ids-pager/ids-pager.css

@@ -1,34 +1,41 @@
-/* Ids Pager Number List Component */
-:host(ids-pager-number-list) {
-  box-sizing: border-box;
-  flex-basis: 0;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+/* Ids Pager Input Component */
+:host(ids-pager-input) {
+  display: inline-flex;
   align-items: center;
-  white-space: nowrap;
-  text-align: center;
 }
 
-ids-button::part(button) {
-  max-width: 40px;
-  padding: 6px 8px;
+.ids-pager-input,
+ids-input::part(container) {
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  margin-block-end: 0;
 }
 
-ids-button:not([selected]):not([disabled])::part(button) {
-  color: var(--ids-hyperlink-text-color);
+.ids-pager-input input,
+ids-input::part(input) {
+  padding-block-start: 0;
+  padding-block-end: 0;
+  margin-block-end: 0;
+  min-width: 40px;
 }
 
-ids-button[selected]::part(button) {
-  font-weight: var(--ids-font-weight-semi-bold);
+.ids-pager-input label,
+ids-input::part(label) {
+  margin-block-end: 0;
+  height: 0;
 }
 
-ids-button:not([selected]):hover {
-  border: none;
-  border-bottom: 1px solid var(--ids-focus-border-color);
+.ids-pager-input,
+ids-input::part(field-container) {
+  margin-block-end: 0;
 }
 
-.divider {
-  display: inline-flex;
+ids-text {
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+}
+
+ids-input[size=xs]::part(field-container),
+.ids-input.xs .field-container {
+  width: auto;
 }

package/components/ids-pager/ids-pager.d.ts

@@ -62,6 +62,7 @@ declare const IdsPager_base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/components/ids-pager/ids-pager.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-5WUJ7UVF.js";import"../../chunks/ids-chunk-W7LEXJSD.js";import"../../chunks/ids-chunk-UAUE2CSS.js";import"../../chunks/ids-chunk-W2CAJ2LX.js";import"../../chunks/ids-chunk-P2FFFWZL.js";import"../../chunks/ids-chunk-XDGYUGXP.js";import"../../chunks/ids-chunk-MSZGF2V7.js";import"../../chunks/ids-chunk-SANGBPYY.js";import"../../chunks/ids-chunk-WWN6C3DG.js";import"../../chunks/ids-chunk-OAOSLNJT.js";import"../../chunks/ids-chunk-AYV2UDVJ.js";import"../../chunks/ids-chunk-YZHR5JP2.js";import"../../chunks/ids-chunk-Y7ULYDKT.js";import"../../chunks/ids-chunk-GX2AIROS.js";import"../../chunks/ids-chunk-JE4DL2PP.js";import"../../chunks/ids-chunk-P2D5GQOV.js";import"../../chunks/ids-chunk-IADGPFIU.js";import"../../chunks/ids-chunk-SBYA6MC4.js";import"../../chunks/ids-chunk-UXOESE2B.js";import"../../chunks/ids-chunk-BQNSGN27.js";import"../../chunks/ids-chunk-TPLRKVBR.js";import"../../chunks/ids-chunk-CA7WSO53.js";import"../../chunks/ids-chunk-VCTVRNBS.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-NKERXKF7.js";import"../../chunks/ids-chunk-FY732MLA.js";import"../../chunks/ids-chunk-ILL3AE5R.js";import"../../chunks/ids-chunk-VBGN2CRQ.js";import"../../chunks/ids-chunk-RTUKNVUC.js";import"../../chunks/ids-chunk-4Y4BRYZL.js";import"../../chunks/ids-chunk-6XCOPQLH.js";import"../../chunks/ids-chunk-N6J46CDW.js";import"../../chunks/ids-chunk-DFQRXICA.js";import"../../chunks/ids-chunk-3VZAZNKV.js";import"../../chunks/ids-chunk-F3RQ5V7T.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-OI3V5ZMR.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-YKXR5BK4.js";import"../../chunks/ids-chunk-VKONCQ6O.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-X5HHVE4J.js";import"../../chunks/ids-chunk-YWQWAWKA.js";import"../../chunks/ids-chunk-IUQDTAVW.js";import"../../chunks/ids-chunk-FP7JXALX.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-OIRG76OL.js";import"../../chunks/ids-chunk-LCUXCSNZ.js";import"../../chunks/ids-chunk-YS37TBDI.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-GTV4PSEA.js";import"../../chunks/ids-chunk-VGRUIA4C.js";import"../../chunks/ids-chunk-2NN3ZJ6Q.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-JIQ2LTHS.js";import"../../chunks/ids-chunk-J252AMUY.js";import"../../chunks/ids-chunk-VPHSXARB.js";import"../../chunks/ids-chunk-XDGYUGXP.js";import"../../chunks/ids-chunk-UZJO7ZOJ.js";import"../../chunks/ids-chunk-KHY7SIUO.js";import"../../chunks/ids-chunk-56YQVDRY.js";import"../../chunks/ids-chunk-A6JFZG7O.js";import"../../chunks/ids-chunk-J377KX6R.js";import"../../chunks/ids-chunk-E4VRTFNA.js";import"../../chunks/ids-chunk-AYV2UDVJ.js";import"../../chunks/ids-chunk-Y7ULYDKT.js";import"../../chunks/ids-chunk-YG2GGPUF.js";import"../../chunks/ids-chunk-GX2AIROS.js";import"../../chunks/ids-chunk-3VMFQMM4.js";import"../../chunks/ids-chunk-QRLAPANT.js";import"../../chunks/ids-chunk-O6RSWMYI.js";import"../../chunks/ids-chunk-SBYA6MC4.js";import"../../chunks/ids-chunk-ODSUO7BM.js";import"../../chunks/ids-chunk-QCRLDB3I.js";import"../../chunks/ids-chunk-542APW5J.js";import"../../chunks/ids-chunk-7OME6RME.js";import"../../chunks/ids-chunk-SUZ4YNUA.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-IZZJC2EB.js";import"../../chunks/ids-chunk-4RXDW4MK.js";import"../../chunks/ids-chunk-T55PJIDE.js";import"../../chunks/ids-chunk-GFTX3QTI.js";import"../../chunks/ids-chunk-WY2RW7QR.js";import"../../chunks/ids-chunk-RI2BXZ6U.js";import"../../chunks/ids-chunk-FF2PR2KM.js";import"../../chunks/ids-chunk-DSILQO6B.js";import"../../chunks/ids-chunk-QXBFKEEP.js";import"../../chunks/ids-chunk-4FZLXQW3.js";import"../../chunks/ids-chunk-OIS6KGMU.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-33V6A4PN.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-BGHX2WQ5.js";import"../../chunks/ids-chunk-AVLWMYWS.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-AZSONAF7.js";import"../../chunks/ids-chunk-7VJ3NF24.js";import"../../chunks/ids-chunk-EJFTSZLS.js";import"../../chunks/ids-chunk-FP7JXALX.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-54WKNX4L.js";import"../../chunks/ids-chunk-LCUXCSNZ.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7JIYCFAW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-HABPILOR.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};

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

@@ -1,19 +1,19 @@
 import IdsElement from '../../core/ids-element';
 declare const Base: {
     new (...args: any[]): {
-        "__#57@#hostNode": any;
+        "__#58@#hostNode": any;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        "__#57@#capturesFocus": boolean;
+        "__#58@#capturesFocus": boolean;
         capturesFocus: boolean;
-        "__#57@#cyclesFocus": boolean;
+        "__#58@#cyclesFocus": boolean;
         cyclesFocus: boolean;
-        "__#57@#attachFocusEvents"(): void;
-        "__#57@#removeFocusEvents"(): void;
-        "__#57@#updateFocusEvents"(): void;
-        "__#57@#focusableSelectors": string[];
+        "__#58@#attachFocusEvents"(): void;
+        "__#58@#removeFocusEvents"(): void;
+        "__#58@#updateFocusEvents"(): void;
+        "__#58@#focusableSelectors": string[];
         focusableSelectors: string[];
-        "__#57@#focusableElementsInDocument": any;
+        "__#58@#focusableElementsInDocument": any;
         readonly focusableElementsInDocument: any;
         refreshFocusableElements(): void;
         readonly focusableElements: any;
@@ -50,6 +50,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -371,7 +372,7 @@ declare const Base: {
         disconnectedCallback(): void;
         hasOpenEvents: boolean;
         popupOpenEventsTarget: import("../ids-popup/ids-popup-attributes").IdsPopupElementRef;
-        "__#35@#currentPopupOpenEventsTarget": import("../ids-popup/ids-popup-attributes").IdsPopupElementRef;
+        "__#30@#currentPopupOpenEventsTarget": import("../ids-popup/ids-popup-attributes").IdsPopupElementRef;
         addOpenEvents(): void;
         removeOpenEvents(): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
@@ -401,6 +402,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -721,7 +723,7 @@ declare const Base: {
     new (...args: any[]): {
         connectedCallback(): void;
         disconnectedCallback(): void;
-        "__#36@#setInitialState"(): void;
+        "__#31@#setInitialState"(): void;
         hasTriggerEvents: boolean;
         popupDelay: number;
         readonly popup: import("../ids-popup/ids-popup").default | null | undefined;
@@ -762,6 +764,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -1135,6 +1138,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -1458,7 +1462,7 @@ declare const Base: {
         attachment: string | null;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        "__#34@#setAttachmentParent"(val: string | null): void;
+        "__#29@#setAttachmentParent"(val: string | null): void;
         appendToTargetParent(): void;
         appendToOriginalParent(): void;
         name?: string | undefined;
@@ -1480,6 +1484,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

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

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-HT4HOREV.js";import"../../chunks/ids-chunk-EVCI4WMT.js";import"../../chunks/ids-chunk-Q6YDMB2A.js";import"../../chunks/ids-chunk-ZHYOU3QW.js";import"../../chunks/ids-chunk-J6DDVFGW.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-YS37TBDI.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-GTV4PSEA.js";import"../../chunks/ids-chunk-VGRUIA4C.js";import"../../chunks/ids-chunk-2NN3ZJ6Q.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-UQLHTIAQ.js";import"../../chunks/ids-chunk-RLU5OFPQ.js";import"../../chunks/ids-chunk-R7DZNS7W.js";import"../../chunks/ids-chunk-K7QJZ6GH.js";import"../../chunks/ids-chunk-J6DDVFGW.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7JIYCFAW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-HABPILOR.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};

package/components/ids-pie-chart/ids-pie-chart.css

@@ -13,9 +13,9 @@
   align-items: center;
   border: 1px solid transparent;
   display: flex;
-  font-family: var(--ids-font-family);
-  font-size: var(--ids-chart-legend-text-size);
-  color: var(--ids-chart-legend-text-color);
+  font-family: var(--ids-font-family-default);
+  font-size: var(--ids-chart-legend-font-size);
+  color: var(--ids-chart-legend-color-text);
   padding-inline-start: 8px;
   padding-inline-end: 8px;
   padding-block-start: 2px;
@@ -24,8 +24,8 @@
 }
 .chart-legend a:focus {
   outline: none;
-  border-color: var(--ids-focus-border-color);
-  box-shadow: var(--ids-focus-box-shadow);
+  border-color: var(--ids-color-border-focus);
+  box-shadow: var(--ids-shadow-focus);
 }
 .chart-legend .swatch {
   display: inline-flex;
@@ -144,7 +144,7 @@
 }
 
 .ids-pie-chart {
-  margin-block-end: var(--ids-spacing-xl);
+  margin-block-end: var(--ids-space-50);
   height: 100%;
   width: 100%;
 }
@@ -233,9 +233,9 @@
 }
 
 .donut-text {
-  font-family: var(--ids-pie-chart-text-font-family);
-  font-size: var(--ids-pie-chart-text-font-size);
-  fill: var(--ids-pie-chart-text-fill);
+  font-family: var(--ids-chart-pie-font-family);
+  font-size: var(--ids-chart-pie-font-size);
+  fill: var(--ids-chart-pie-color-text);
   text-anchor: middle;
 }
 

package/components/ids-pie-chart/ids-pie-chart.d.ts

@@ -61,6 +61,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -383,8 +384,8 @@ declare const Base: {
         connectedCallback(): void;
         attachSelectionEvents(): void;
         detachSelectionEvents(): void;
-        "__#92@#init"(): void;
-        "__#92@#doSelectableChange"(value: boolean): void;
+        "__#93@#init"(): void;
+        "__#93@#doSelectableChange"(value: boolean): void;
         selectable: boolean;
         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;
@@ -414,6 +415,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -771,6 +773,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -1144,6 +1147,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/components/ids-pie-chart/ids-pie-chart.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-MTQNGZCM.js";import"../../chunks/ids-chunk-GD7I4Q2L.js";import"../../chunks/ids-chunk-3PABHGXP.js";import"../../chunks/ids-chunk-SDY66MPI.js";import"../../chunks/ids-chunk-NKERXKF7.js";import"../../chunks/ids-chunk-JMCJ3SGL.js";import"../../chunks/ids-chunk-T2TIUOXF.js";import"../../chunks/ids-chunk-DFQRXICA.js";import"../../chunks/ids-chunk-3VZAZNKV.js";import"../../chunks/ids-chunk-F3RQ5V7T.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-OI3V5ZMR.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-YKXR5BK4.js";import"../../chunks/ids-chunk-VKONCQ6O.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-X5HHVE4J.js";import"../../chunks/ids-chunk-YWQWAWKA.js";import"../../chunks/ids-chunk-IUQDTAVW.js";import"../../chunks/ids-chunk-FP7JXALX.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-OIRG76OL.js";import"../../chunks/ids-chunk-LCUXCSNZ.js";import"../../chunks/ids-chunk-YS37TBDI.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-GTV4PSEA.js";import"../../chunks/ids-chunk-VGRUIA4C.js";import"../../chunks/ids-chunk-2NN3ZJ6Q.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-6JTZE653.js";import"../../chunks/ids-chunk-O7EMEZFO.js";import"../../chunks/ids-chunk-AVNBEYP6.js";import"../../chunks/ids-chunk-I2TYEGWJ.js";import"../../chunks/ids-chunk-IZZJC2EB.js";import"../../chunks/ids-chunk-ZIGY2P3N.js";import"../../chunks/ids-chunk-T2TIUOXF.js";import"../../chunks/ids-chunk-QXBFKEEP.js";import"../../chunks/ids-chunk-4FZLXQW3.js";import"../../chunks/ids-chunk-OIS6KGMU.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-33V6A4PN.js";import"../../chunks/ids-chunk-MDLMRVPY.js";import"../../chunks/ids-chunk-BGHX2WQ5.js";import"../../chunks/ids-chunk-AVLWMYWS.js";import"../../chunks/ids-chunk-ODGLGMPF.js";import"../../chunks/ids-chunk-AZSONAF7.js";import"../../chunks/ids-chunk-7VJ3NF24.js";import"../../chunks/ids-chunk-EJFTSZLS.js";import"../../chunks/ids-chunk-FP7JXALX.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-54WKNX4L.js";import"../../chunks/ids-chunk-LCUXCSNZ.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7JIYCFAW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-HABPILOR.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{a as default};

package/components/ids-popup/ids-popup-attributes.js

@@ -1 +1 @@
-import{a,b,c,d,e,f,g,h,i,j,k,l,m,n,o}from"../../chunks/ids-chunk-VKONCQ6O.js";import"../../chunks/ids-chunk-2NN3ZJ6Q.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{f as ALIGNMENTS_EDGES_X,g as ALIGNMENTS_EDGES_Y,d as ALIGNMENTS_X,e as ALIGNMENTS_Y,c as ALIGNMENT_EDGES,h as ANIMATION_STYLES,i as ARROW_TYPES,a as CENTER,b as DEFAULT_ALIGN_EDGE,m as POPUP_MAXHEIGHT_PROPNAME,l as POPUP_PROPERTIES,j as POSITION_STYLES,k as TYPES,n as formatAlignAttribute,o as onPlace};
+import{a,b,c,d,e,f,g,h,i,j,k,l,m,n,o}from"../../chunks/ids-chunk-AVLWMYWS.js";import"../../chunks/ids-chunk-HABPILOR.js";import"../../chunks/ids-chunk-U7OOVFXE.js";export{f as ALIGNMENTS_EDGES_X,g as ALIGNMENTS_EDGES_Y,d as ALIGNMENTS_X,e as ALIGNMENTS_Y,c as ALIGNMENT_EDGES,h as ANIMATION_STYLES,i as ARROW_TYPES,a as CENTER,b as DEFAULT_ALIGN_EDGE,m as POPUP_MAXHEIGHT_PROPNAME,l as POPUP_PROPERTIES,j as POSITION_STYLES,k as TYPES,n as formatAlignAttribute,o as onPlace};

package/components/ids-popup/ids-popup.css

@@ -1,7 +1,7 @@
 /* Ids Popup Component */
 :root {
   display: block;
-  z-index: var(--ids-z-index-popup);
+  z-index: var(--ids-z-index-60);
   text-align: unset;
 }
 
@@ -22,7 +22,7 @@
 }
 
 :host([visible][animated]) {
-  transition: left var(--ids-transition-length) var(--ids-transition-linear), top var(--ids-transition-length) var(--ids-transition-linear);
+  transition: left var(--ids-motion-duration) var(--ids-motion-linear), top var(--ids-motion-duration) var(--ids-motion-linear);
 }
 
 .ids-popup {
@@ -94,10 +94,10 @@
   top: calc(var(--ids-popup-arrow-size) * -1);
 }
 .ids-popup.animated {
-  transition: opacity var(--ids-transition-length) var(--ids-transition-linear), transform var(--ids-transition-length) var(--ids-transition-linear);
+  transition: opacity var(--ids-motion-duration) var(--ids-motion-linear), transform var(--ids-motion-duration) var(--ids-motion-linear);
 }
 .ids-popup.animated.open {
-  transition: opacity var(--ids-transition-length) var(--ids-transition-linear), height var(--ids-transition-length) var(--ids-transition-linear), width var(--ids-transition-length) var(--ids-transition-linear), transform var(--ids-transition-length) var(--ids-transition-linear);
+  transition: opacity var(--ids-motion-duration) var(--ids-motion-linear), height var(--ids-motion-duration) var(--ids-motion-linear), width var(--ids-motion-duration) var(--ids-motion-linear), transform var(--ids-motion-duration) var(--ids-motion-linear);
 }
 .ids-popup.animation-fade {
   opacity: 0;
@@ -154,226 +154,226 @@
   transform: none;
 }
 .ids-popup.none {
-  background-color: var(--ids-popup-background-color);
-  border: 1px solid var(--ids-popup-border-color);
+  background-color: var(--ids-popup-color-background);
+  border: 1px solid var(--ids-popup-color-border);
   padding: 1px solid var(--ids-popup-padding);
 }
 .ids-popup.custom {
-  background-color: var(--ids-popup-background-color);
+  background-color: var(--ids-popup-color-background);
   border: 1px solid transparent;
 }
 .ids-popup.menu {
-  background-color: var(--ids-popup-menu-background-color);
-  border: 1px solid var(--ids-popup-menu-border-color);
-  font-family: var(--ids-font-family);
+  background-color: var(--ids-popup-menu-color-background-default);
+  border: 1px solid var(--ids-popup-menu-color-border-default);
+  font-family: var(--ids-font-family-default);
   padding-block: var(--ids-popup-menu-padding);
-  color: var(--ids-popup-menu-text-color);
+  color: var(--ids-popup-menu-color-text-default);
   border-radius: var(--ids-popup-menu-border-radius);
-  box-shadow: var(--ids-popup-menu-box-shadow);
+  box-shadow: var(--ids-popup-menu-shadow-default);
 }
 .ids-popup.menu .arrow.bottom {
-  border-bottom-color: var(--ids-popup-menu-border-color);
+  border-bottom-color: var(--ids-popup-menu-color-border-default);
 }
 .ids-popup.menu .arrow.bottom::after {
-  border-bottom-color: var(--ids-popup-menu-background-color);
+  border-bottom-color: var(--ids-popup-menu-color-background-default);
 }
 .ids-popup.menu .arrow.left {
-  border-left-color: var(--ids-popup-menu-border-color);
+  border-left-color: var(--ids-popup-menu-color-border-default);
 }
 .ids-popup.menu .arrow.left::after {
-  border-left-color: var(--ids-popup-menu-background-color);
+  border-left-color: var(--ids-popup-menu-color-background-default);
 }
 .ids-popup.menu .arrow.right {
-  border-right-color: var(--ids-popup-menu-border-color);
+  border-right-color: var(--ids-popup-menu-color-border-default);
 }
 .ids-popup.menu .arrow.right::after {
-  border-right-color: var(--ids-popup-menu-background-color);
+  border-right-color: var(--ids-popup-menu-color-background-default);
 }
 .ids-popup.menu .arrow.top {
-  border-top-color: var(--ids-popup-menu-border-color);
+  border-top-color: var(--ids-popup-menu-color-border-default);
 }
 .ids-popup.menu .arrow.top::after {
-  border-top-color: var(--ids-popup-menu-background-color);
+  border-top-color: var(--ids-popup-menu-color-background-default);
 }
 .ids-popup.menu-alt {
-  background-color: var(--ids-popup-menu-inverse-background-color);
-  border: 1px solid var(--ids-popup-menu-inverse-border-color);
+  background-color: var(--ids-popup-menu-color-background-inverse);
+  border: 1px solid var(--ids-popup-menu-color-border-inverse);
   padding-block: var(--ids-popup-menu-padding);
-  box-shadow: var(--ids-popup-menu-inverse-box-shadow);
+  box-shadow: var(--ids-popup-menu-shadow-inverse);
   font-size: var(--ids-popup-menu-font-size);
-  color: var(--ids-popup-menu-inverse-text-color);
-  border-color: var(--ids-popup-menu-inverse-border-color);
-  border-radius: var(--ids-border-radius-xs);
-  font-family: var(--ids-font-family);
+  color: var(--ids-popup-menu-color-text-inverse);
+  border-color: var(--ids-popup-menu-color-border-inverse);
+  border-radius: var(--ids-border-radius-01);
+  font-family: var(--ids-font-family-default);
 }
 .ids-popup.menu-alt .arrow.bottom,
 .ids-popup.menu-alt .arrow.bottom::after {
-  border-bottom-color: var(--ids-popup-menu-inverse-border-color);
+  border-bottom-color: var(--ids-popup-menu-color-border-inverse);
 }
 .ids-popup.menu-alt .arrow.left,
 .ids-popup.menu-alt .arrow.left::after {
-  border-left-color: var(--ids-popup-menu-inverse-border-color);
+  border-left-color: var(--ids-popup-menu-color-border-inverse);
 }
 .ids-popup.menu-alt .arrow.right,
 .ids-popup.menu-alt .arrow.right::after {
-  border-right-color: var(--ids-popup-menu-inverse-border-color);
+  border-right-color: var(--ids-popup-menu-color-border-inverse);
 }
 .ids-popup.menu-alt .arrow.top,
 .ids-popup.menu-alt .arrow.top::after {
-  border-top-color: var(--ids-popup-menu-inverse-border-color);
+  border-top-color: var(--ids-popup-menu-color-border-inverse);
 }
 .ids-popup.tooltip {
-  background-color: var(--ids-tooltip-background-color);
+  background-color: var(--ids-tooltip-color-background);
   border-radius: var(--ids-tooltip-border-radius);
-  box-shadow: var(--ids-tooltip-box-shadow);
+  box-shadow: var(--ids-tooltip-shadow);
   cursor: var(--ids-cursor-pointer);
-  color: var(--ids-tooltip-text-color);
+  color: var(--ids-tooltip-color-text);
   display: inline-block;
   font-size: var(--ids-tooltip-font-size);
   padding: var(--ids-tooltip-padding);
-  font-family: var(--ids-font-family);
-  z-index: var(--ids-z-index-tooltip);
+  font-family: var(--ids-font-family-default);
+  z-index: var(--ids-z-index-70);
 }
 .ids-popup.tooltip .arrow.bottom,
 .ids-popup.tooltip .arrow.bottom::after {
-  border-bottom-color: var(--ids-tooltip-background-color);
+  border-bottom-color: var(--ids-tooltip-color-background);
 }
 .ids-popup.tooltip .arrow.bottom {
   top: -6px;
 }
 .ids-popup.tooltip .arrow.left,
 .ids-popup.tooltip .arrow.left::after {
-  border-left-color: var(--ids-tooltip-background-color);
+  border-left-color: var(--ids-tooltip-color-background);
 }
 .ids-popup.tooltip .arrow.left {
   right: -6px;
 }
 .ids-popup.tooltip .arrow.right,
 .ids-popup.tooltip .arrow.right::after {
-  border-right-color: var(--ids-tooltip-background-color);
+  border-right-color: var(--ids-tooltip-color-background);
 }
 .ids-popup.tooltip .arrow.right {
   left: -6px;
 }
 .ids-popup.tooltip .arrow.top,
 .ids-popup.tooltip .arrow.top::after {
-  border-top-color: var(--ids-tooltip-background-color);
+  border-top-color: var(--ids-tooltip-color-background);
 }
 .ids-popup.tooltip .arrow.top {
   bottom: -6px;
 }
 .ids-popup.tooltip.error-color {
-  background-color: var(--ids-tooltip-error-background-color);
+  background-color: var(--ids-tooltip-error-color-background-error);
 }
 .ids-popup.tooltip.error-color .arrow.bottom,
 .ids-popup.tooltip.error-color .arrow.bottom::after {
-  border-bottom-color: var(--ids-tooltip-error-background-color);
+  border-bottom-color: var(--ids-tooltip-error-color-background-error);
 }
 .ids-popup.tooltip.error-color .arrow.left,
 .ids-popup.tooltip.error-color .arrow.left::after {
-  border-left-color: var(--ids-tooltip-error-background-color);
+  border-left-color: var(--ids-tooltip-error-color-background-error);
 }
 .ids-popup.tooltip.error-color .arrow.right,
 .ids-popup.tooltip.error-color .arrow.right::after {
-  border-right-color: var(--ids-tooltip-error-background-color);
+  border-right-color: var(--ids-tooltip-error-color-background-error);
 }
 .ids-popup.tooltip.error-color .arrow.top,
 .ids-popup.tooltip.error-color .arrow.top::after {
-  border-top-color: var(--ids-tooltip-error-background-color);
+  border-top-color: var(--ids-tooltip-error-color-background-error);
 }
 .ids-popup.tooltip.info-color {
-  background-color: var(--ids-tooltip-info-background-color);
+  background-color: var(--ids-tooltip-info-color-background-info);
 }
 .ids-popup.tooltip.info-color .arrow.bottom,
 .ids-popup.tooltip.info-color .arrow.bottom::after {
-  border-bottom-color: var(--ids-tooltip-info-background-color);
+  border-bottom-color: var(--ids-tooltip-info-color-background-info);
 }
 .ids-popup.tooltip.info-color .arrow.left,
 .ids-popup.tooltip.info-color .arrow.left::after {
-  border-left-color: var(--ids-tooltip-info-background-color);
+  border-left-color: var(--ids-tooltip-info-color-background-info);
 }
 .ids-popup.tooltip.info-color .arrow.right,
 .ids-popup.tooltip.info-color .arrow.right::after {
-  border-right-color: var(--ids-tooltip-info-background-color);
+  border-right-color: var(--ids-tooltip-info-color-background-info);
 }
 .ids-popup.tooltip.info-color .arrow.top,
 .ids-popup.tooltip.info-color .arrow.top::after {
-  border-top-color: var(--ids-tooltip-info-background-color);
+  border-top-color: var(--ids-tooltip-info-color-background-info);
 }
 .ids-popup.tooltip.alert-color, .ids-popup.tooltip.warning-color {
-  background-color: var(--ids-tooltip-warning-background-color);
+  background-color: var(--ids-tooltip-color-background-warning);
 }
 .ids-popup.tooltip.alert-color .arrow.bottom,
 .ids-popup.tooltip.alert-color .arrow.bottom::after, .ids-popup.tooltip.warning-color .arrow.bottom,
 .ids-popup.tooltip.warning-color .arrow.bottom::after {
-  border-bottom-color: var(--ids-tooltip-warning-background-color);
+  border-bottom-color: var(--ids-tooltip-color-background-warning);
 }
 .ids-popup.tooltip.alert-color .arrow.left,
 .ids-popup.tooltip.alert-color .arrow.left::after, .ids-popup.tooltip.warning-color .arrow.left,
 .ids-popup.tooltip.warning-color .arrow.left::after {
-  border-left-color: var(--ids-tooltip-warning-background-color);
+  border-left-color: var(--ids-tooltip-color-background-warning);
 }
 .ids-popup.tooltip.alert-color .arrow.right,
 .ids-popup.tooltip.alert-color .arrow.right::after, .ids-popup.tooltip.warning-color .arrow.right,
 .ids-popup.tooltip.warning-color .arrow.right::after {
-  border-right-color: var(--ids-tooltip-warning-background-color);
+  border-right-color: var(--ids-tooltip-color-background-warning);
 }
 .ids-popup.tooltip.alert-color .arrow.top,
 .ids-popup.tooltip.alert-color .arrow.top::after, .ids-popup.tooltip.warning-color .arrow.top,
 .ids-popup.tooltip.warning-color .arrow.top::after {
-  border-top-color: var(--ids-tooltip-warning-background-color);
+  border-top-color: var(--ids-tooltip-color-background-warning);
 }
 .ids-popup.tooltip.success-color {
-  background-color: var(--ids-tooltip-success-background-color);
+  background-color: var(--ids-tooltip-color-background-success);
 }
 .ids-popup.tooltip.success-color .arrow.bottom,
 .ids-popup.tooltip.success-color .arrow.bottom::after {
-  border-bottom-color: var(--ids-tooltip-success-background-color);
+  border-bottom-color: var(--ids-tooltip-color-background-success);
 }
 .ids-popup.tooltip.success-color .arrow.left,
 .ids-popup.tooltip.success-color .arrow.left::after {
-  border-left-color: var(--ids-tooltip-success-background-color);
+  border-left-color: var(--ids-tooltip-color-background-success);
 }
 .ids-popup.tooltip.success-color .arrow.right,
 .ids-popup.tooltip.success-color .arrow.right::after {
-  border-right-color: var(--ids-tooltip-success-background-color);
+  border-right-color: var(--ids-tooltip-color-background-success);
 }
 .ids-popup.tooltip.success-color .arrow.top,
 .ids-popup.tooltip.success-color .arrow.top::after {
-  border-top-color: var(--ids-tooltip-success-background-color);
+  border-top-color: var(--ids-tooltip-color-background-success);
 }
 .ids-popup.tooltip-alt {
-  background-color: var(--ids-tooltip-inverse-background-color);
+  background-color: var(--ids-tooltip-color-background-inverse);
   padding: var(--ids-tooltip-padding);
   border-radius: var(--ids-tooltip-border-radius);
   font-size: var(--ids-tooltip-font-size);
-  color: var(--ids-tooltip-inverse-text-color);
-  font-family: var(--ids-font-family);
+  color: var(--ids-tooltip-color-text-inverse);
+  font-family: var(--ids-font-family-default);
 }
 .ids-popup.modal {
-  background-color: var(--ids-modal-background-color);
-  border: 1px solid var(--ids-modal-border-color);
+  background-color: var(--ids-modal-color-background);
+  border: 1px solid var(--ids-modal-color-border);
   padding: var(--ids-modal-padding);
   border-radius: var(--ids-modal-border-radius);
-  box-shadow: var(--ids-modal-box-shadow);
-  font-family: var(--ids-font-family);
-  color: var(--ids-modal-text-color);
+  box-shadow: var(--ids-modal-shadow-default);
+  font-family: var(--ids-font-family-default);
+  color: var(--ids-modal-color-text);
 }
 .ids-popup.dropdown {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--ids-dropdown-background-color);
-  border: 1px solid var(--ids-dropdown-border-color);
-  box-shadow: var(--ids-dropdown-box-shadow);
+  background-color: var(--ids-dropdown-color-background-default);
+  border: 1px solid var(--ids-dropdown-color-border);
+  box-shadow: var(--ids-dropdown-shadow-default);
   border-radius: var(--ids-dropdown-border-radius);
   outline: none;
-  border-top-color: var(--ids-dropdown-attached-border-color);
+  border-top-color: var(--ids-dropdown-attached-color-border);
 }
 .ids-popup.dropdown.flipped {
-  border-radius: var(--ids-dropdown-flipped-border-radius);
-  border-bottom-color: var(--ids-dropdown-attached-border-color);
-  border-top-color: var(--ids-dropdown-border-color);
-  box-shadow: var(--ids-dropdown-flipped-box-shadow);
+  border-radius: var(--ids-dropdown-border-radius-opened-up);
+  border-bottom-color: var(--ids-dropdown-attached-color-border);
+  border-top-color: var(--ids-dropdown-color-border);
+  box-shadow: var(--ids-dropdown-shadow-opened-up);
 }
 .ids-popup:not(.position-viewport).has-maxheight .content-wrapper {
   height: var(--ids-popup-maxheight);

package/components/ids-popup/ids-popup.d.ts

@@ -41,6 +41,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -414,6 +415,7 @@ declare const Base: {
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
+        loadLegacyTheme(value: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;