@breadstone/mosaik-elements-foundation 0.0.229 → 0.0.230

package/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Joy.js

@@ -13,30 +13,26 @@ import { css } from '../../../../../Dom/Css';
 export function timelineMarkerElementJoyStyle() {
     return css `
 :host {
-  --timeline-marker-content-gap: var(--joy-layout-space);
-  --timeline-marker-font-family: var(--joy-font-family);
+  --timeline-marker-font-family: unset;
   --timeline-marker-font-letter-spacing: unset;
-  --timeline-marker-font-line-height: 1.5;
+  --timeline-marker-font-line-height: unset;
   --timeline-marker-font-size: unset;
   --timeline-marker-font-text-decoration: unset;
   --timeline-marker-font-text-transform: unset;
-  --timeline-marker-font-weight: 400;
-  --timeline-marker-foreground-color: var(--joy-scheme-foreground);
-  --timeline-marker-gap: calc(var(--joy-layout-space) * 2);
-  --timeline-marker-line-color: var(--joy-scheme-highlight);
-  --timeline-marker-line-offset: calc(var(--joy-layout-space) * 4);
-  --timeline-marker-line-thickness: var(--joy-layout-thickness);
+  --timeline-marker-font-weight: unset;
+  --timeline-marker-gap: unset;
   --timeline-marker-marker-border-color: var(--joy-scheme-highlight);
   --timeline-marker-marker-border-width: var(--joy-layout-thickness);
   --timeline-marker-marker-color: var(--joy-scheme-background);
   --timeline-marker-marker-size: calc(var(--joy-layout-space) * 2.5);
-  --timeline-marker-padding-bottom: var(--joy-layout-space);
-  --timeline-marker-padding-left: var(--joy-layout-space);
-  --timeline-marker-padding-right: var(--joy-layout-space);
-  --timeline-marker-padding-top: var(--joy-layout-space);
-  --timeline-marker-transition-duration: var(--joy-duration-short);
-  --timeline-marker-transition-mode: ease;
-  --timeline-marker-transition-property: color, background-color, transform;
+  --timeline-marker-padding-bottom: unset;
+  --timeline-marker-padding-left: unset;
+  --timeline-marker-padding-right: unset;
+  --timeline-marker-padding-top: unset;
+  --timeline-marker-progress-ring-width: var(--joy-layout-thickness);
+  --timeline-marker-transition-duration: unset;
+  --timeline-marker-transition-mode: unset;
+  --timeline-marker-transition-property: unset;
   --timeline-marker-translate: unset;
 }
 
@@ -67,16 +63,26 @@ export function timelineMarkerElementJoyStyle() {
 }
 
 :host {
-  width: var(--timeline-marker-marker-size);
-  height: var(--timeline-marker-marker-size);
-  background: var(--timeline-marker-marker-color);
-  border: var(--timeline-marker-marker-border-width) solid var(--timeline-marker-marker-border-color);
-  box-sizing: border-box;
-  color: inherit;
-  border-radius: 999px;
   justify-content: center;
   align-items: center;
   display: inline-flex;
+  position: relative;
+}
+
+:host [part="progressRing"] {
+  --progress-ring-thickness: var(--timeline-marker-progress-ring-width);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:host([is-busy]) {
+  pointer-events: none;
+}
+
+:host([is-busy]) [part="pip"] {
+  visibility: hidden;
 }
 
     `;

package/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineMarkerElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.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,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoET,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimelineMarkerElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.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,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineMarkerElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAsE7D"}
+{"version":3,"file":"TimelineMarkerElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CA4E7D"}

package/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.js

@@ -13,30 +13,26 @@ import { css } from '../../../../../Dom/Css';
 export function timelineMarkerElementMemphisStyle() {
     return css `
 :host {
-  --timeline-marker-content-gap: var(--memphis-layout-space);
-  --timeline-marker-font-family: var(--memphis-font-family);
+  --timeline-marker-font-family: unset;
   --timeline-marker-font-letter-spacing: unset;
-  --timeline-marker-font-line-height: 1.5;
+  --timeline-marker-font-line-height: unset;
   --timeline-marker-font-size: unset;
   --timeline-marker-font-text-decoration: unset;
   --timeline-marker-font-text-transform: unset;
-  --timeline-marker-font-weight: 400;
-  --timeline-marker-foreground-color: var(--memphis-scheme-foreground);
-  --timeline-marker-gap: calc(var(--memphis-layout-space) * 2);
-  --timeline-marker-line-color: var(--memphis-scheme-highlight);
-  --timeline-marker-line-offset: calc(var(--memphis-layout-space) * 3);
-  --timeline-marker-line-thickness: var(--memphis-layout-thickness);
+  --timeline-marker-font-weight: unset;
+  --timeline-marker-gap: unset;
   --timeline-marker-marker-border-color: var(--memphis-scheme-highlight);
   --timeline-marker-marker-border-width: var(--memphis-layout-thickness);
   --timeline-marker-marker-color: var(--memphis-scheme-background);
   --timeline-marker-marker-size: calc(var(--memphis-layout-space) * 2.5);
-  --timeline-marker-padding-bottom: var(--memphis-layout-space);
-  --timeline-marker-padding-left: var(--memphis-layout-space);
-  --timeline-marker-padding-right: var(--memphis-layout-space);
-  --timeline-marker-padding-top: var(--memphis-layout-space);
-  --timeline-marker-transition-duration: var(--memphis-duration-medium);
-  --timeline-marker-transition-mode: ease;
-  --timeline-marker-transition-property: color, background-color, transform;
+  --timeline-marker-padding-bottom: unset;
+  --timeline-marker-padding-left: unset;
+  --timeline-marker-padding-right: unset;
+  --timeline-marker-padding-top: unset;
+  --timeline-marker-progress-ring-width: var(--memphis-layout-thickness);
+  --timeline-marker-transition-duration: unset;
+  --timeline-marker-transition-mode: unset;
+  --timeline-marker-transition-property: unset;
   --timeline-marker-translate: unset;
 }
 
@@ -67,16 +63,26 @@ export function timelineMarkerElementMemphisStyle() {
 }
 
 :host {
-  width: var(--timeline-marker-marker-size);
-  height: var(--timeline-marker-marker-size);
-  background: var(--timeline-marker-marker-color);
-  border: var(--timeline-marker-marker-border-width) solid var(--timeline-marker-marker-border-color);
-  box-sizing: border-box;
-  color: inherit;
-  border-radius: 999px;
   justify-content: center;
   align-items: center;
   display: inline-flex;
+  position: relative;
+}
+
+:host [part="progressRing"] {
+  --progress-ring-thickness: var(--timeline-marker-progress-ring-width);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:host([is-busy]) {
+  pointer-events: none;
+}
+
+:host([is-busy]) [part="pip"] {
+  visibility: hidden;
 }
 
     `;

package/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineMarkerElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.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,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoET,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimelineMarkerElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineMarkerElement.Memphis.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,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineOppositeElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wCAAwC,IAAI,SAAS,CAsEpE"}
+{"version":3,"file":"TimelineOppositeElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wCAAwC,IAAI,SAAS,CA8DpE"}

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.js

@@ -13,7 +13,6 @@ import { css } from '../../../../../Dom/Css';
 export function timelineOppositeElementCosmopolitanStyle() {
     return css `
 :host {
-  --timeline-opposite-content-gap: var(--cosmopolitan-layout-space);
   --timeline-opposite-font-family: var(--cosmopolitan-font-family);
   --timeline-opposite-font-letter-spacing: unset;
   --timeline-opposite-font-line-height: 1.5;
@@ -22,21 +21,14 @@ export function timelineOppositeElementCosmopolitanStyle() {
   --timeline-opposite-font-text-transform: unset;
   --timeline-opposite-font-weight: 400;
   --timeline-opposite-foreground-color: var(--cosmopolitan-scheme-foreground);
-  --timeline-opposite-gap: calc(var(--cosmopolitan-layout-space) * 2);
-  --timeline-opposite-line-color: var(--cosmopolitan-scheme-highlight);
-  --timeline-opposite-line-offset: calc(var(--cosmopolitan-layout-space) * 3);
-  --timeline-opposite-line-thickness: var(--cosmopolitan-layout-thickness);
-  --timeline-opposite-marker-border-color: var(--cosmopolitan-scheme-highlight);
-  --timeline-opposite-marker-border-width: var(--cosmopolitan-layout-thickness);
-  --timeline-opposite-marker-color: var(--cosmopolitan-scheme-background);
-  --timeline-opposite-marker-size: calc(var(--cosmopolitan-layout-space) * 2.5);
-  --timeline-opposite-padding-bottom: var(--cosmopolitan-layout-space);
-  --timeline-opposite-padding-left: var(--cosmopolitan-layout-space);
-  --timeline-opposite-padding-right: var(--cosmopolitan-layout-space);
-  --timeline-opposite-padding-top: var(--cosmopolitan-layout-space);
-  --timeline-opposite-transition-duration: var(--cosmopolitan-duration-short);
-  --timeline-opposite-transition-mode: ease;
-  --timeline-opposite-transition-property: color, background-color, transform;
+  --timeline-opposite-gap: unset;
+  --timeline-opposite-padding-bottom: unset;
+  --timeline-opposite-padding-left: unset;
+  --timeline-opposite-padding-right: unset;
+  --timeline-opposite-padding-top: unset;
+  --timeline-opposite-transition-duration: unset;
+  --timeline-opposite-transition-mode: unset;
+  --timeline-opposite-transition-property: unset;
   --timeline-opposite-translate: unset;
 }
 

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineOppositeElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.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,wCAAwC;IACpD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoET,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimelineOppositeElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Cosmopolitan.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,wCAAwC;IACpD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineOppositeElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAsE3D"}
+{"version":3,"file":"TimelineOppositeElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CA8D3D"}

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Joy.js

@@ -13,7 +13,6 @@ import { css } from '../../../../../Dom/Css';
 export function timelineOppositeElementJoyStyle() {
     return css `
 :host {
-  --timeline-opposite-content-gap: var(--joy-layout-space);
   --timeline-opposite-font-family: var(--joy-font-family);
   --timeline-opposite-font-letter-spacing: unset;
   --timeline-opposite-font-line-height: 1.5;
@@ -22,21 +21,14 @@ export function timelineOppositeElementJoyStyle() {
   --timeline-opposite-font-text-transform: unset;
   --timeline-opposite-font-weight: 400;
   --timeline-opposite-foreground-color: var(--joy-scheme-foreground);
-  --timeline-opposite-gap: calc(var(--joy-layout-space) * 2);
-  --timeline-opposite-line-color: var(--joy-scheme-highlight);
-  --timeline-opposite-line-offset: calc(var(--joy-layout-space) * 4);
-  --timeline-opposite-line-thickness: var(--joy-layout-thickness);
-  --timeline-opposite-marker-border-color: var(--joy-scheme-highlight);
-  --timeline-opposite-marker-border-width: var(--joy-layout-thickness);
-  --timeline-opposite-marker-color: var(--joy-scheme-background);
-  --timeline-opposite-marker-size: calc(var(--joy-layout-space) * 2.5);
-  --timeline-opposite-padding-bottom: var(--joy-layout-space);
-  --timeline-opposite-padding-left: var(--joy-layout-space);
-  --timeline-opposite-padding-right: var(--joy-layout-space);
-  --timeline-opposite-padding-top: var(--joy-layout-space);
-  --timeline-opposite-transition-duration: var(--joy-duration-short);
-  --timeline-opposite-transition-mode: ease;
-  --timeline-opposite-transition-property: color, background-color, transform;
+  --timeline-opposite-gap: unset;
+  --timeline-opposite-padding-bottom: unset;
+  --timeline-opposite-padding-left: unset;
+  --timeline-opposite-padding-right: unset;
+  --timeline-opposite-padding-top: unset;
+  --timeline-opposite-transition-duration: unset;
+  --timeline-opposite-transition-mode: unset;
+  --timeline-opposite-transition-property: unset;
   --timeline-opposite-translate: unset;
 }
 

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineOppositeElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.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,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoET,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimelineOppositeElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.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,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineOppositeElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,SAAS,CAsE/D"}
+{"version":3,"file":"TimelineOppositeElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,SAAS,CA8D/D"}

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.js

@@ -13,7 +13,6 @@ import { css } from '../../../../../Dom/Css';
 export function timelineOppositeElementMemphisStyle() {
     return css `
 :host {
-  --timeline-opposite-content-gap: var(--memphis-layout-space);
   --timeline-opposite-font-family: var(--memphis-font-family);
   --timeline-opposite-font-letter-spacing: unset;
   --timeline-opposite-font-line-height: 1.5;
@@ -22,21 +21,14 @@ export function timelineOppositeElementMemphisStyle() {
   --timeline-opposite-font-text-transform: unset;
   --timeline-opposite-font-weight: 400;
   --timeline-opposite-foreground-color: var(--memphis-scheme-foreground);
-  --timeline-opposite-gap: calc(var(--memphis-layout-space) * 2);
-  --timeline-opposite-line-color: var(--memphis-scheme-highlight);
-  --timeline-opposite-line-offset: calc(var(--memphis-layout-space) * 3);
-  --timeline-opposite-line-thickness: var(--memphis-layout-thickness);
-  --timeline-opposite-marker-border-color: var(--memphis-scheme-highlight);
-  --timeline-opposite-marker-border-width: var(--memphis-layout-thickness);
-  --timeline-opposite-marker-color: var(--memphis-scheme-background);
-  --timeline-opposite-marker-size: calc(var(--memphis-layout-space) * 2.5);
-  --timeline-opposite-padding-bottom: var(--memphis-layout-space);
-  --timeline-opposite-padding-left: var(--memphis-layout-space);
-  --timeline-opposite-padding-right: var(--memphis-layout-space);
-  --timeline-opposite-padding-top: var(--memphis-layout-space);
-  --timeline-opposite-transition-duration: var(--memphis-duration-medium);
-  --timeline-opposite-transition-mode: ease;
-  --timeline-opposite-transition-property: color, background-color, transform;
+  --timeline-opposite-gap: unset;
+  --timeline-opposite-padding-bottom: unset;
+  --timeline-opposite-padding-left: unset;
+  --timeline-opposite-padding-right: unset;
+  --timeline-opposite-padding-top: unset;
+  --timeline-opposite-transition-duration: unset;
+  --timeline-opposite-transition-mode: unset;
+  --timeline-opposite-transition-property: unset;
   --timeline-opposite-translate: unset;
 }
 

package/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineOppositeElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoET,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimelineOppositeElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Timeline/Themes/TimelineOppositeElement.Memphis.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Timeline/TimelineContentElement.d.ts

@@ -4,11 +4,33 @@ declare const TimelineContentElement_base: (abstract new (...args: Array<any>) =
 /**
  * TimelineContent - Represents the primary content area within a timeline item.
  *
+ * @description
+ * Wraps the main textual or visual information for a `TimelineItemElement`.
+ * Placed in the `content` slot of the parent item.
+ *
+ * @name TimelineContent
  * @element mosaik-timeline-content
  * @category Layouts
  *
  * @slot - Default slot for primary timeline content.
  *
+ * @cssprop {String} --timeline-content-font-family - Font family for content text
+ * @cssprop {String} --timeline-content-font-size - Font size for content text
+ * @cssprop {String} --timeline-content-font-weight - Font weight for content text
+ * @cssprop {String} --timeline-content-font-line-height - Line height for content text
+ * @cssprop {String} --timeline-content-font-letter-spacing - Letter spacing for content text
+ * @cssprop {String} --timeline-content-font-text-decoration - Text decoration for content text
+ * @cssprop {String} --timeline-content-font-text-transform - Text transform for content text
+ * @cssprop {Color} --timeline-content-foreground-color - Text color of the content area
+ *
+ * @fires connected {ConnectedEvent} - Fired when connected to DOM
+ * @fires changed {PropertyChangedEvent} - Fired when a property changes
+ *
+ * @example
+ * ```html
+ * <mosaik-timeline-content>Event description goes here.</mosaik-timeline-content>
+ * ```
+ *
  * @public
  */
 export declare class TimelineContentElement extends TimelineContentElement_base implements ITimelineContentElementProps {

package/Controls/Components/Media/Timeline/TimelineContentElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineContentElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineContentElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;;AAQ9E;;;;;;;;;GASG;AACH,qBAYa,sBACT,SAAQ,2BACR,YAAW,4BAA4B;IAIvC;;;;;;OAMG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;GAEG;AACH,yBAAiB,sBAAsB,CAAC;IACpC,KAAY,KAAK,GAAG,4BAA4B,CAAC;CACpD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,yBAAyB,EAAE,sBAAsB,CAAC;KACrD;CACJ"}
+{"version":3,"file":"TimelineContentElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineContentElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;;AAQ9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAYa,sBACT,SAAQ,2BACR,YAAW,4BAA4B;IAIvC;;;;;;OAMG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;GAEG;AACH,yBAAiB,sBAAsB,CAAC;IACpC,KAAY,KAAK,GAAG,4BAA4B,CAAC;CACpD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,yBAAyB,EAAE,sBAAsB,CAAC;KACrD;CACJ"}

package/Controls/Components/Media/Timeline/TimelineContentElement.js

@@ -16,11 +16,33 @@ import { timelineContentElementTemplate } from './TimelineContentElementTemplate
 /**
  * TimelineContent - Represents the primary content area within a timeline item.
  *
+ * @description
+ * Wraps the main textual or visual information for a `TimelineItemElement`.
+ * Placed in the `content` slot of the parent item.
+ *
+ * @name TimelineContent
  * @element mosaik-timeline-content
  * @category Layouts
  *
  * @slot - Default slot for primary timeline content.
  *
+ * @cssprop {String} --timeline-content-font-family - Font family for content text
+ * @cssprop {String} --timeline-content-font-size - Font size for content text
+ * @cssprop {String} --timeline-content-font-weight - Font weight for content text
+ * @cssprop {String} --timeline-content-font-line-height - Line height for content text
+ * @cssprop {String} --timeline-content-font-letter-spacing - Letter spacing for content text
+ * @cssprop {String} --timeline-content-font-text-decoration - Text decoration for content text
+ * @cssprop {String} --timeline-content-font-text-transform - Text transform for content text
+ * @cssprop {Color} --timeline-content-foreground-color - Text color of the content area
+ *
+ * @fires connected {ConnectedEvent} - Fired when connected to DOM
+ * @fires changed {PropertyChangedEvent} - Fired when a property changes
+ *
+ * @example
+ * ```html
+ * <mosaik-timeline-content>Event description goes here.</mosaik-timeline-content>
+ * ```
+ *
  * @public
  */
 let TimelineContentElement = class TimelineContentElement extends Themeable(CustomElement) {

package/Controls/Components/Media/Timeline/TimelineContentElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineContentElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineContentElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,uCAAuC,EAAE,MAAM,8CAA8C,CAAC;AACvG,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,kCAAkC,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAElF,aAAa;AAEb;;;;;;;;;GASG;AAaI,IAAM,sBAAsB,GAA5B,MAAM,sBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,qBAAqB;IAErB;;;;;;OAMG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,yBAAyB,CAAC;IACrC,CAAC;CAIJ,CAAA;AAnBY,sBAAsB;IAZlC,SAAS,CAAC;QACP,QAAQ,EAAE,yBAAyB;QACnC,QAAQ,EAAE,8BAA8B;QACxC,MAAM,EAAE;YACJ,GAAG,EAAE,8BAA8B;YACnC,OAAO,EAAE,kCAAkC;YAC3C,YAAY,EAAE,uCAAuC;SACxD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,SAAS;SAClB;KACJ,CAAC;GACW,sBAAsB,CAmBlC"}
+{"version":3,"file":"TimelineContentElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineContentElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,uCAAuC,EAAE,MAAM,8CAA8C,CAAC;AACvG,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,kCAAkC,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAElF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAaI,IAAM,sBAAsB,GAA5B,MAAM,sBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,qBAAqB;IAErB;;;;;;OAMG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,yBAAyB,CAAC;IACrC,CAAC;CAIJ,CAAA;AAnBY,sBAAsB;IAZlC,SAAS,CAAC;QACP,QAAQ,EAAE,yBAAyB;QACnC,QAAQ,EAAE,8BAA8B;QACxC,MAAM,EAAE;YACJ,GAAG,EAAE,8BAA8B;YACnC,OAAO,EAAE,kCAAkC;YAC3C,YAAY,EAAE,uCAAuC;SACxD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,SAAS;SAClB;KACJ,CAAC;GACW,sBAAsB,CAmBlC"}

package/Controls/Components/Media/Timeline/TimelineContentElementTemplate.d.ts

@@ -1,7 +1,7 @@
 import { type TemplateResult } from '../../../../Dom/Html';
 import type { TimelineContentElement } from './TimelineContentElement';
 /**
- * The template of the {@link TimelineContentElement}.
+ * The template of the `TimelineContentElement`.
  *
  * @public
  */

package/Controls/Components/Media/Timeline/TimelineContentElementTemplate.js

@@ -2,7 +2,7 @@
 import { html } from '../../../../Dom/Html';
 // #endregion
 /**
- * The template of the {@link TimelineContentElement}.
+ * The template of the `TimelineContentElement`.
  *
  * @public
  */

package/Controls/Components/Media/Timeline/TimelineElement.d.ts

@@ -3,32 +3,65 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import type { ITimelineElementProps } from './ITimelineElementProps';
 declare const TimelineElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * Timeline - A semantic container for ordered timeline items.
+ * Timeline - A sequential visualization of events or steps along a line.
  *
  * @description
- * Provides layout direction, alignment context, and renders the timeline line
- * while exposing a single slot for {@link TimelineItemElement} children.
+ * The Timeline component renders a list of `TimelineItemElement` children
+ * along a connecting line. It supports vertical and horizontal orientations
+ * as well as start, end, and alternating alignment modes.
  *
+ * @name Timeline
  * @element mosaik-timeline
  * @category Layouts
  *
- * @slot - Default slot for {@link TimelineItemElement} children.
+ * @slot - Default slot for `TimelineItemElement` children.
  *
  * @csspart line - The visual connector line running through the timeline.
  *
- * @cssprop {String} --timeline-gap - Gap between timeline items.
- * @cssprop {Color} --timeline-line-color - Color of the timeline connector line.
- * @cssprop {String} --timeline-line-thickness - Thickness of the timeline connector line.
- * @cssprop {String} --timeline-line-offset - Offset position of the timeline line.
- * @cssprop {Color} --timeline-foreground-color - Foreground/text color.
- * @cssprop {String} --timeline-font-family - Font family for timeline text.
- * @cssprop {String} --timeline-font-size - Font size for timeline text.
- * @cssprop {String} --timeline-font-weight - Font weight for timeline text.
- * @cssprop {String} --timeline-font-line-height - Line height for timeline text.
- * @cssprop {String} --timeline-marker-size - Size of the timeline marker.
- * @cssprop {Color} --timeline-marker-color - Background color of the marker.
- * @cssprop {Color} --timeline-marker-border-color - Border color of the marker.
- * @cssprop {String} --timeline-marker-border-width - Border width of the marker.
+ * @cssprop {String} --timeline-content-gap - Gap between content areas
+ * @cssprop {String} --timeline-font-family - Font family for timeline text
+ * @cssprop {String} --timeline-font-size - Font size for timeline text
+ * @cssprop {String} --timeline-font-weight - Font weight for timeline text
+ * @cssprop {String} --timeline-font-line-height - Line height for timeline text
+ * @cssprop {String} --timeline-font-letter-spacing - Letter spacing for timeline text
+ * @cssprop {String} --timeline-font-text-decoration - Text decoration for timeline text
+ * @cssprop {String} --timeline-font-text-transform - Text transform for timeline text
+ * @cssprop {Color} --timeline-foreground-color - Text color of the timeline
+ * @cssprop {String} --timeline-gap - Gap between timeline items
+ * @cssprop {Color} --timeline-line-color - Color of the connecting line
+ * @cssprop {String} --timeline-line-offset - Offset position of the timeline line
+ * @cssprop {String} --timeline-line-thickness - Thickness of the connecting line
+ * @cssprop {Color} --timeline-marker-border-color - Border color of the marker
+ * @cssprop {String} --timeline-marker-border-width - Border width of the marker
+ * @cssprop {Color} --timeline-marker-color - Background color of the marker
+ * @cssprop {String} --timeline-marker-size - Size of the timeline marker
+ * @cssprop {String} --timeline-padding-top - Top padding of the timeline
+ * @cssprop {String} --timeline-padding-right - Right padding of the timeline
+ * @cssprop {String} --timeline-padding-bottom - Bottom padding of the timeline
+ * @cssprop {String} --timeline-padding-left - Left padding of the timeline
+ * @cssprop {String} --timeline-transition-duration - Transition duration
+ * @cssprop {String} --timeline-transition-mode - Transition timing function
+ * @cssprop {String} --timeline-transition-property - Properties that transition
+ * @cssprop {String} --timeline-translate - CSS translate offset
+ *
+ * @dependency {TimelineItemElement} - Individual timeline entry
+ * @dependency {TimelineMarkerElement} - Visual marker for each item
+ * @dependency {TimelineContentElement} - Content area of a timeline item
+ * @dependency {TimelineOppositeElement} - Opposite content area of a timeline item
+ *
+ * @fires connected {ConnectedEvent} - Fired when connected to DOM
+ * @fires changed {PropertyChangedEvent} - Fired when a property changes
+ *
+ * @example
+ * Vertical timeline:
+ * ```html
+ * <mosaik-timeline orientation="vertical" align="start">
+ *   <mosaik-timeline-item>
+ *     <mosaik-timeline-marker text="1" variant="primary" appearance="solid"></mosaik-timeline-marker>
+ *     <mosaik-timeline-content>Step one</mosaik-timeline-content>
+ *   </mosaik-timeline-item>
+ * </mosaik-timeline>
+ * ```
  *
  * @public
  */

package/Controls/Components/Media/Timeline/TimelineElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAYrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAkBa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,MAAM,CAAoB;IAMlC;;;;OAIG;;IAgBH;;;;;;OAMG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,iBAAiB,CAEpC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,iBAAiB,EAKxC;CAIJ;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}
+{"version":3,"file":"TimelineElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAYrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBAkBa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,MAAM,CAAoB;IAMlC;;;;OAIG;;IAgBH;;;;;;OAMG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,iBAAiB,CAEpC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,iBAAiB,EAKxC;CAIJ;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}

package/Controls/Components/Media/Timeline/TimelineElement.js

@@ -25,32 +25,65 @@ import { TimelineMarkerElement } from './TimelineMarkerElement';
 import { TimelineOppositeElement } from './TimelineOppositeElement';
 // #endregion
 /**
- * Timeline - A semantic container for ordered timeline items.
+ * Timeline - A sequential visualization of events or steps along a line.
  *
  * @description
- * Provides layout direction, alignment context, and renders the timeline line
- * while exposing a single slot for {@link TimelineItemElement} children.
+ * The Timeline component renders a list of `TimelineItemElement` children
+ * along a connecting line. It supports vertical and horizontal orientations
+ * as well as start, end, and alternating alignment modes.
  *
+ * @name Timeline
  * @element mosaik-timeline
  * @category Layouts
  *
- * @slot - Default slot for {@link TimelineItemElement} children.
+ * @slot - Default slot for `TimelineItemElement` children.
  *
  * @csspart line - The visual connector line running through the timeline.
  *
- * @cssprop {String} --timeline-gap - Gap between timeline items.
- * @cssprop {Color} --timeline-line-color - Color of the timeline connector line.
- * @cssprop {String} --timeline-line-thickness - Thickness of the timeline connector line.
- * @cssprop {String} --timeline-line-offset - Offset position of the timeline line.
- * @cssprop {Color} --timeline-foreground-color - Foreground/text color.
- * @cssprop {String} --timeline-font-family - Font family for timeline text.
- * @cssprop {String} --timeline-font-size - Font size for timeline text.
- * @cssprop {String} --timeline-font-weight - Font weight for timeline text.
- * @cssprop {String} --timeline-font-line-height - Line height for timeline text.
- * @cssprop {String} --timeline-marker-size - Size of the timeline marker.
- * @cssprop {Color} --timeline-marker-color - Background color of the marker.
- * @cssprop {Color} --timeline-marker-border-color - Border color of the marker.
- * @cssprop {String} --timeline-marker-border-width - Border width of the marker.
+ * @cssprop {String} --timeline-content-gap - Gap between content areas
+ * @cssprop {String} --timeline-font-family - Font family for timeline text
+ * @cssprop {String} --timeline-font-size - Font size for timeline text
+ * @cssprop {String} --timeline-font-weight - Font weight for timeline text
+ * @cssprop {String} --timeline-font-line-height - Line height for timeline text
+ * @cssprop {String} --timeline-font-letter-spacing - Letter spacing for timeline text
+ * @cssprop {String} --timeline-font-text-decoration - Text decoration for timeline text
+ * @cssprop {String} --timeline-font-text-transform - Text transform for timeline text
+ * @cssprop {Color} --timeline-foreground-color - Text color of the timeline
+ * @cssprop {String} --timeline-gap - Gap between timeline items
+ * @cssprop {Color} --timeline-line-color - Color of the connecting line
+ * @cssprop {String} --timeline-line-offset - Offset position of the timeline line
+ * @cssprop {String} --timeline-line-thickness - Thickness of the connecting line
+ * @cssprop {Color} --timeline-marker-border-color - Border color of the marker
+ * @cssprop {String} --timeline-marker-border-width - Border width of the marker
+ * @cssprop {Color} --timeline-marker-color - Background color of the marker
+ * @cssprop {String} --timeline-marker-size - Size of the timeline marker
+ * @cssprop {String} --timeline-padding-top - Top padding of the timeline
+ * @cssprop {String} --timeline-padding-right - Right padding of the timeline
+ * @cssprop {String} --timeline-padding-bottom - Bottom padding of the timeline
+ * @cssprop {String} --timeline-padding-left - Left padding of the timeline
+ * @cssprop {String} --timeline-transition-duration - Transition duration
+ * @cssprop {String} --timeline-transition-mode - Transition timing function
+ * @cssprop {String} --timeline-transition-property - Properties that transition
+ * @cssprop {String} --timeline-translate - CSS translate offset
+ *
+ * @dependency {TimelineItemElement} - Individual timeline entry
+ * @dependency {TimelineMarkerElement} - Visual marker for each item
+ * @dependency {TimelineContentElement} - Content area of a timeline item
+ * @dependency {TimelineOppositeElement} - Opposite content area of a timeline item
+ *
+ * @fires connected {ConnectedEvent} - Fired when connected to DOM
+ * @fires changed {PropertyChangedEvent} - Fired when a property changes
+ *
+ * @example
+ * Vertical timeline:
+ * ```html
+ * <mosaik-timeline orientation="vertical" align="start">
+ *   <mosaik-timeline-item>
+ *     <mosaik-timeline-marker text="1" variant="primary" appearance="solid"></mosaik-timeline-marker>
+ *     <mosaik-timeline-content>Step one</mosaik-timeline-content>
+ *   </mosaik-timeline-item>
+ * </mosaik-timeline>
+ * ```
  *
  * @public
  */

package/Controls/Components/Media/Timeline/TimelineElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AACzF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAmBI,IAAM,eAAe,GAArB,MAAM,eACT,SAAQ,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAG5C,iBAAiB;IAET,MAAM,CAAoB;IAElC,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,6EAA6E;QAC7E,8FAA8F;QAC9F,+CAA+C;QAC/C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QAE3D,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC,KAAK,CAAC;IAC1C,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;OAMG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,iBAAiB,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACH,IACW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAW,KAAK,CAAC,KAAwB;QACrC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;CAIJ,CAAA;AAbG;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG3B;AApDQ,eAAe;IAlB3B,SAAS,CAAC;QACP,QAAQ,EAAE,iBAAiB;QAC3B,QAAQ,EAAE,uBAAuB;QACjC,MAAM,EAAE;YACJ,GAAG,EAAE,uBAAuB;YAC5B,OAAO,EAAE,2BAA2B;YACpC,YAAY,EAAE,gCAAgC;SACjD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,MAAM;SACf;QACD,OAAO,EAAE;YACL,mBAAmB;YACnB,qBAAqB;YACrB,sBAAsB;YACtB,uBAAuB;SAC1B;KACJ,CAAC;;GACW,eAAe,CA8D3B"}
+{"version":3,"file":"TimelineElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Media/Timeline/TimelineElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AACzF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAmBI,IAAM,eAAe,GAArB,MAAM,eACT,SAAQ,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAG5C,iBAAiB;IAET,MAAM,CAAoB;IAElC,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,6EAA6E;QAC7E,8FAA8F;QAC9F,+CAA+C;QAC/C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QAE3D,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC,KAAK,CAAC;IAC1C,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;OAMG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,iBAAiB,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACH,IACW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAW,KAAK,CAAC,KAAwB;QACrC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;CAIJ,CAAA;AAbG;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG3B;AApDQ,eAAe;IAlB3B,SAAS,CAAC;QACP,QAAQ,EAAE,iBAAiB;QAC3B,QAAQ,EAAE,uBAAuB;QACjC,MAAM,EAAE;YACJ,GAAG,EAAE,uBAAuB;YAC5B,OAAO,EAAE,2BAA2B;YACpC,YAAY,EAAE,gCAAgC;SACjD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,MAAM;SACf;QACD,OAAO,EAAE;YACL,mBAAmB;YACnB,qBAAqB;YACrB,sBAAsB;YACtB,uBAAuB;SAC1B;KACJ,CAAC;;GACW,eAAe,CA8D3B"}