@breadstone/mosaik-elements-foundation 0.1.21 → 0.1.23

package/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.js

@@ -45,7 +45,7 @@ export function tabStripItemElementJoyStyle() {
   --tab-strip-item-shadow-spread: unset;
   --tab-strip-item-size: 56px;
   --tab-strip-item-thickness: 4px;
-  --tab-strip-item-transition-duration: var(--joy-duration-short);
+  --tab-strip-item-transition-duration: var(--mosaik-duration-short);
   --tab-strip-item-transition-mode: ease;
   --tab-strip-item-transition-property: background-color, color, border-color, opacity, box-shadow, transform;
   --tab-strip-item-translate: none;
@@ -209,6 +209,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-primary-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="primary"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -222,6 +223,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-primary-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="primary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="primary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="primary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -230,6 +232,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-secondary-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="secondary"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -243,6 +246,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-secondary-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="secondary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="secondary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="secondary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -251,6 +255,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-tertiary-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -264,6 +269,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-tertiary-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -272,6 +278,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-danger-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="danger"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -285,6 +292,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-danger-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="danger"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="danger"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="danger"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -293,6 +301,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-warning-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="warning"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -306,6 +315,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-warning-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="warning"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="warning"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="warning"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -314,6 +324,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="success"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-success-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([variant="success"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="success"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -327,6 +338,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="success"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-success-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([variant="success"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="success"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="success"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="success"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -335,6 +347,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="info"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-info-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([variant="info"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="info"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -348,6 +361,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="info"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-info-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([variant="info"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="info"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="info"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="info"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -356,6 +370,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-highlight-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="highlight"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -369,6 +384,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-highlight-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="highlight"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="highlight"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="highlight"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {
@@ -377,6 +393,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
   --tab-strip-item-background-color: var(--joy-color-neutral-100);
+  --tab-strip-item-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] [part="icon"], :host([variant="neutral"]:not([disabled]:not([disabled="false"])):hover) [part="root"] [part="content"] ::slotted(mosaik-icon) {
@@ -390,6 +407,7 @@ export function tabStripItemElementJoyStyle() {
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"]))[is-selected]) {
   --tab-strip-item-background-color: var(--joy-color-neutral-50);
+  --tab-strip-item-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="icon"], :host([variant="neutral"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-icon), :host([variant="neutral"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] [part="label"], :host([variant="neutral"]:not([disabled]:not([disabled="false"]))[is-selected]) [part="root"] [part="content"] ::slotted(mosaik-text) {

package/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabStripItemElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiYT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabStripItemElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmZT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Table/Themes/TableBodyCellElement.Joy.js

@@ -36,7 +36,7 @@ export function tableBodyCellElementJoyStyle() {
   --table-body-cell-shadow-offset-x: unset;
   --table-body-cell-shadow-offset-y: unset;
   --table-body-cell-shadow-spread: unset;
-  --table-body-cell-transition-duration: var(--joy-duration-short);
+  --table-body-cell-transition-duration: var(--mosaik-duration-short);
   --table-body-cell-transition-mode: ease;
   --table-body-cell-transition-property: all;
   --table-body-cell-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableBodyElement.Joy.js

@@ -37,7 +37,7 @@ export function tableBodyElementJoyStyle() {
   --table-body-shadow-offset-x: unset;
   --table-body-shadow-offset-y: unset;
   --table-body-shadow-spread: unset;
-  --table-body-transition-duration: var(--joy-duration-short);
+  --table-body-transition-duration: var(--mosaik-duration-short);
   --table-body-transition-mode: ease;
   --table-body-transition-property: all;
   --table-body-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableBodyRowElement.Joy.js

@@ -36,7 +36,7 @@ export function tableBodyRowElementJoyStyle() {
   --table-body-row-shadow-offset-x: unset;
   --table-body-row-shadow-offset-y: unset;
   --table-body-row-shadow-spread: unset;
-  --table-body-row-transition-duration: var(--joy-duration-short);
+  --table-body-row-transition-duration: var(--mosaik-duration-short);
   --table-body-row-transition-mode: ease;
   --table-body-row-transition-property: background-color, border-color;
   --table-body-row-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableElement.Joy.js

@@ -47,7 +47,7 @@ export function tableElementJoyStyle() {
   --table-shadow-offset-x: unset;
   --table-shadow-offset-y: unset;
   --table-shadow-spread: unset;
-  --table-transition-duration: var(--joy-duration-short);
+  --table-transition-duration: var(--mosaik-duration-short);
   --table-transition-mode: ease;
   --table-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   --table-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableFooterCellElement.Joy.js

@@ -36,7 +36,7 @@ export function tableFooterCellElementJoyStyle() {
   --table-footer-cell-shadow-offset-x: unset;
   --table-footer-cell-shadow-offset-y: unset;
   --table-footer-cell-shadow-spread: unset;
-  --table-footer-cell-transition-duration: var(--joy-duration-short);
+  --table-footer-cell-transition-duration: var(--mosaik-duration-short);
   --table-footer-cell-transition-mode: ease;
   --table-footer-cell-transition-property: all;
   --table-footer-cell-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableFooterElement.Joy.js

@@ -37,7 +37,7 @@ export function tableFooterElementJoyStyle() {
   --table-footer-shadow-offset-x: unset;
   --table-footer-shadow-offset-y: unset;
   --table-footer-shadow-spread: unset;
-  --table-footer-transition-duration: var(--joy-duration-short);
+  --table-footer-transition-duration: var(--mosaik-duration-short);
   --table-footer-transition-mode: ease;
   --table-footer-transition-property: all;
   --table-footer-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableFooterRowElement.Joy.js

@@ -37,7 +37,7 @@ export function tableFooterRowElementJoyStyle() {
   --table-footer-row-shadow-offset-x: unset;
   --table-footer-row-shadow-offset-y: unset;
   --table-footer-row-shadow-spread: unset;
-  --table-footer-row-transition-duration: var(--joy-duration-short);
+  --table-footer-row-transition-duration: var(--mosaik-duration-short);
   --table-footer-row-transition-mode: ease;
   --table-footer-row-transition-property: all;
   --table-footer-row-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableHeaderCellElement.Joy.js

@@ -40,7 +40,7 @@ export function tableHeaderCellElementJoyStyle() {
   --table-header-cell-shadow-offset-x: unset;
   --table-header-cell-shadow-offset-y: unset;
   --table-header-cell-shadow-spread: unset;
-  --table-header-cell-transition-duration: var(--joy-duration-short);
+  --table-header-cell-transition-duration: var(--mosaik-duration-short);
   --table-header-cell-transition-mode: ease;
   --table-header-cell-transition-property: all;
   --table-header-cell-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableHeaderElement.Joy.js

@@ -37,7 +37,7 @@ export function tableHeaderElementJoyStyle() {
   --table-header-shadow-offset-x: unset;
   --table-header-shadow-offset-y: unset;
   --table-header-shadow-spread: unset;
-  --table-header-transition-duration: var(--joy-duration-short);
+  --table-header-transition-duration: var(--mosaik-duration-short);
   --table-header-transition-mode: ease;
   --table-header-transition-property: all;
   --table-header-translate: none;

package/Controls/Components/Selectors/Table/Themes/TableHeaderRowElement.Joy.js

@@ -37,7 +37,7 @@ export function tableHeaderRowElementJoyStyle() {
   --table-header-row-shadow-offset-x: unset;
   --table-header-row-shadow-offset-y: unset;
   --table-header-row-shadow-spread: unset;
-  --table-header-row-transition-duration: var(--joy-duration-short);
+  --table-header-row-transition-duration: var(--mosaik-duration-short);
   --table-header-row-transition-mode: ease;
   --table-header-row-transition-property: background-color, border-color;
   --table-header-row-translate: none;

package/Controls/Components/Selectors/Table/editor/Themes/TableColumnEditorElement.Cosmopolitan.js

@@ -35,7 +35,7 @@ export function tableColumnEditorElementCosmopolitanStyle() {
   --table-column-editor-padding-left: var(--cosmopolitan-layout-space);
   --table-column-editor-padding-right: var(--cosmopolitan-layout-space);
   --table-column-editor-padding-top: var(--cosmopolitan-layout-space);
-  --table-column-editor-transition-duration: var(--cosmopolitan-duration-short);
+  --table-column-editor-transition-duration: var(--mosaik-duration-short);
   --table-column-editor-transition-mode: ease;
   --table-column-editor-transition-property: background-color, color;
   --table-column-editor-translate: unset;

package/Controls/Components/Selectors/Table/editor/Themes/TableColumnEditorElement.Joy.js

@@ -41,7 +41,7 @@ export function tableColumnEditorElementJoyStyle() {
   --table-column-editor-shadow-offset-x: unset;
   --table-column-editor-shadow-offset-y: unset;
   --table-column-editor-shadow-spread: unset;
-  --table-column-editor-transition-duration: var(--joy-duration-short);
+  --table-column-editor-transition-duration: var(--mosaik-duration-short);
   --table-column-editor-transition-mode: ease;
   --table-column-editor-transition-property: background-color, color;
   --table-column-editor-translate: none;

package/Controls/Components/Selectors/Table/editor/Themes/TableColumnEditorElement.Memphis.js

@@ -35,7 +35,7 @@ export function tableColumnEditorElementMemphisStyle() {
   --table-column-editor-padding-left: var(--memphis-layout-space);
   --table-column-editor-padding-right: var(--memphis-layout-space);
   --table-column-editor-padding-top: var(--memphis-layout-space);
-  --table-column-editor-transition-duration: var(--memphis-duration-short);
+  --table-column-editor-transition-duration: var(--mosaik-duration-short);
   --table-column-editor-transition-mode: ease;
   --table-column-editor-transition-property: background-color, color;
   --table-column-editor-translate: unset;

package/Controls/Components/Selectors/Tree/Themes/TreeItemElement.Joy.js

@@ -40,7 +40,7 @@ export function treeItemElementJoyStyle() {
   --tree-item-shadow-offset-x: unset;
   --tree-item-shadow-offset-y: unset;
   --tree-item-shadow-spread: unset;
-  --tree-item-transition-duration: var(--joy-duration-short);
+  --tree-item-transition-duration: var(--mosaik-duration-short);
   --tree-item-transition-mode: ease;
   --tree-item-transition-property: background-color, color, border-color, box-shadow;
   --tree-item-translate: none;

package/Controls/Components/Shell/Themes/AppElement.Joy.js

@@ -38,7 +38,7 @@ export function appElementJoyStyle() {
   --app-shadow-offset-x: unset;
   --app-shadow-offset-y: unset;
   --app-shadow-spread: unset;
-  --app-transition-duration: var(--joy-duration-short);
+  --app-transition-duration: var(--mosaik-duration-short);
   --app-transition-mode: ease;
   --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-translate: none;

package/Controls/Components/Shell/Themes/AppHeaderElement.Joy.js

@@ -38,7 +38,7 @@ export function appHeaderElementJoyStyle() {
   --app-header-shadow-offset-x: unset;
   --app-header-shadow-offset-y: unset;
   --app-header-shadow-spread: unset;
-  --app-header-transition-duration: var(--joy-duration-short);
+  --app-header-transition-duration: var(--mosaik-duration-short);
   --app-header-transition-mode: ease;
   --app-header-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-header-translate: none;

package/Controls/Components/States/Empty/EmptyStateElement.d.ts

@@ -18,10 +18,10 @@ declare const EmptyStateElement_base: (abstract new (...args: Array<any>) => imp
  * @element mosaik-empty-state
  * @category States
  *
- * @slot  - The default slot.
- * @slot actions - Action buttons or links for user guidance and next steps
  * @slot - Default content area for additional empty state information or custom elements
+ * @slot actions - Action buttons or links for user guidance and next steps
  * @slot header - The header slot.
+ * @slot content - The content slot.
  *
  * @csspart actions - The container for action slot elements
  * @csspart content - The content text container for detailed explanation

package/Controls/Components/States/Empty/EmptyStateElement.js

@@ -37,10 +37,10 @@ import { emptyStateElementMemphisStyle } from './Themes/EmptyStateElement.Memphi
  * @element mosaik-empty-state
  * @category States
  *
- * @slot  - The default slot.
- * @slot actions - Action buttons or links for user guidance and next steps
  * @slot - Default content area for additional empty state information or custom elements
+ * @slot actions - Action buttons or links for user guidance and next steps
  * @slot header - The header slot.
+ * @slot content - The content slot.
  *
  * @csspart actions - The container for action slot elements
  * @csspart content - The content text container for detailed explanation

package/Routing/RouterAnchorElementStyle.js

@@ -34,7 +34,7 @@ export function routerAnchorElementStyle() {
   --router-anchor-shadow-offset-x: unset;
   --router-anchor-shadow-offset-y: unset;
   --router-anchor-shadow-spread: unset;
-  --router-anchor-transition-duration: var(--joy-duration-short);
+  --router-anchor-transition-duration: var(--mosaik-duration-short);
   --router-anchor-transition-mode: ease;
   --router-anchor-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --router-anchor-translate: none;

package/Theming/ThemeService.d.ts

@@ -299,6 +299,32 @@ export declare class ThemeService {
      * @param applyGlobally Whether to apply the variable globally.
      */
     private setCssVariableWithProviders;
+    /**
+     * Applies elevation variables, including active mode aliases for mode-based elevation themes.
+     *
+     * @private
+     * @param elevation The elevation map to apply.
+     * @param themeName The theme name used for CSS variable prefixes.
+     * @param currentMode The active theme mode.
+     * @param setVariable The CSS variable setter.
+     */
+    private applyElevationVariables;
+    /**
+     * Checks whether a value is a plain record.
+     *
+     * @private
+     * @param value The value to check.
+     * @returns `true` if the value is a record.
+     */
+    private isRecord;
+    /**
+     * Checks whether a value is a theme mode.
+     *
+     * @private
+     * @param value The value to check.
+     * @returns `true` if the value is a theme mode.
+     */
+    private isThemeMode;
     /**
      * Converts a camelCase string to kebab-case.
      *

package/Theming/ThemeService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeService.d.ts","sourceRoot":"","sources":["../../src/Theming/ThemeService.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ThemeService.d.ts","sourceRoot":"","sources":["../../src/Theming/ThemeService.ts"],"names":[],"mappings":"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"}

package/Theming/ThemeService.js

@@ -390,12 +390,8 @@ export class ThemeService {
             this.setCssVariableWithProviders(`--mosaik-layout-${kebabKey}`, `var(--${themeName}-layout-${kebabKey}, ${normalizedValue})`, providers, shouldApplyGlobally);
         });
         // Apply elevation
-        Object.entries(theme.elevation).forEach(([level, value]) => {
-            Object.entries(value).forEach(([property, cssValue]) => {
-                const kebabProperty = this.toKebabCase(property);
-                this.setCssVariableWithProviders(`--${themeName}-elevation-${level}-${kebabProperty}`, cssValue, providers, shouldApplyGlobally);
-                this.setCssVariableWithProviders(`--mosaik-elevation-${level}-${kebabProperty}`, `var(--${themeName}-elevation-${level}-${kebabProperty}, ${cssValue})`, providers, shouldApplyGlobally);
-            });
+        this.applyElevationVariables(theme.elevation, themeName, currentMode, (property, value) => {
+            this.setCssVariableWithProviders(property, value, providers, shouldApplyGlobally);
         });
         // Store the theme state (deep clone to prevent mutations)
         this._themeStates.set(normalizedName, this.cloneTheme(theme));
@@ -589,14 +585,8 @@ export class ThemeService {
             const updatedElevation = Object.assign({}, currentElevation, elevation);
             currentState.elevation = updatedElevation;
         }
-        Object.entries(elevation).forEach(([level, value]) => {
-            Object.entries(value).forEach(([property, cssValue]) => {
-                const kebabProperty = this.toKebabCase(property);
-                // legacy variable style
-                this.setCssVariable(`--${themeName}-elevation-${level}-${kebabProperty}`, cssValue);
-                // new variable style
-                this.setCssVariable(`--mosaik-elevation-${level}-${kebabProperty}`, `var(--${themeName}-elevation-${level}-${kebabProperty}, ${cssValue})`);
-            });
+        this.applyElevationVariables(elevation, themeName, this.getCurrentThemeMode(), (property, value) => {
+            this.setCssVariable(property, value);
         });
     }
     /**
@@ -792,6 +782,74 @@ export class ThemeService {
             provider.style.setProperty(property, value);
         });
     }
+    /**
+     * Applies elevation variables, including active mode aliases for mode-based elevation themes.
+     *
+     * @private
+     * @param elevation The elevation map to apply.
+     * @param themeName The theme name used for CSS variable prefixes.
+     * @param currentMode The active theme mode.
+     * @param setVariable The CSS variable setter.
+     */
+    applyElevationVariables(elevation, themeName, currentMode, setVariable) {
+        const elevationEntries = Object.entries(elevation);
+        const modeEntries = elevationEntries.filter(([mode, value]) => this.isThemeMode(mode) && this.isRecord(value));
+        if (modeEntries.length > 0) {
+            modeEntries.forEach(([mode, value]) => {
+                Object.entries(value).forEach(([level, cssValue]) => {
+                    if (typeof cssValue !== 'string') {
+                        return;
+                    }
+                    const kebabLevel = this.toKebabCase(level);
+                    setVariable(`--${themeName}-elevation-${mode}-${kebabLevel}`, cssValue);
+                    if (mode === currentMode) {
+                        setVariable(`--${themeName}-elevation-${kebabLevel}`, cssValue);
+                        setVariable(`--mosaik-elevation-${kebabLevel}`, `var(--${themeName}-elevation-${kebabLevel}, ${cssValue})`);
+                    }
+                });
+            });
+            return;
+        }
+        elevationEntries.forEach(([level, value]) => {
+            if (typeof value === 'string') {
+                const kebabLevel = this.toKebabCase(level);
+                setVariable(`--${themeName}-elevation-${kebabLevel}`, value);
+                setVariable(`--mosaik-elevation-${kebabLevel}`, `var(--${themeName}-elevation-${kebabLevel}, ${value})`);
+                return;
+            }
+            if (!this.isRecord(value)) {
+                return;
+            }
+            Object.entries(value).forEach(([property, cssValue]) => {
+                if (typeof cssValue !== 'string') {
+                    return;
+                }
+                const kebabProperty = this.toKebabCase(property);
+                setVariable(`--${themeName}-elevation-${level}-${kebabProperty}`, cssValue);
+                setVariable(`--mosaik-elevation-${level}-${kebabProperty}`, `var(--${themeName}-elevation-${level}-${kebabProperty}, ${cssValue})`);
+            });
+        });
+    }
+    /**
+     * Checks whether a value is a plain record.
+     *
+     * @private
+     * @param value The value to check.
+     * @returns `true` if the value is a record.
+     */
+    isRecord(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+    /**
+     * Checks whether a value is a theme mode.
+     *
+     * @private
+     * @param value The value to check.
+     * @returns `true` if the value is a theme mode.
+     */
+    isThemeMode(value) {
+        return value === 'light' || value === 'dark';
+    }
     /**
      * Converts a camelCase string to kebab-case.
      *