npm - @breadstone/mosaik-elements-foundation - Versions diffs - 0.0.244 → 0.0.246 - Mend

@breadstone/mosaik-elements-foundation 0.0.244 → 0.0.246

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Cosmopolitan.js CHANGED Viewed

@@ -13,28 +13,50 @@ import { css } from '../../../../../Dom/Css';
 export function pageHeaderElementCosmopolitanStyle() {
     return css `
 :host {
-  --page-header-background-color: unset;
-  --page-header-border-color: unset;
-  --page-header-font-family: unset;
-  --page-header-font-letter-spacing: unset;
-  --page-header-font-line-height: unset;
-  --page-header-font-size: unset;
-  --page-header-font-text-decoration: unset;
-  --page-header-font-text-transform: unset;
-  --page-header-font-weight: unset;
-  --page-header-foreground-color: unset;
+  --page-header-additional-header-font-family: var(--cosmopolitan-font-family);
+  --page-header-additional-header-font-letter-spacing: var(--cosmopolitan-typography-subtitle2-letter-spacing);
+  --page-header-additional-header-font-line-height: var(--cosmopolitan-typography-subtitle2-line-height);
+  --page-header-additional-header-font-size: var(--cosmopolitan-typography-subtitle2-font-size);
+  --page-header-additional-header-font-text-decoration: var(--cosmopolitan-typography-subtitle2-text-decoration);
+  --page-header-additional-header-font-text-transform: var(--cosmopolitan-typography-subtitle2-text-transform);
+  --page-header-additional-header-font-weight: var(--cosmopolitan-typography-subtitle2-font-weight);
+  --page-header-background-color: var(--cosmopolitan-scheme-transparent);
+  --page-header-font-family: var(--cosmopolitan-font-family);
+  --page-header-font-letter-spacing: var(--cosmopolitan-typography-headline4-letter-spacing);
+  --page-header-font-line-height: var(--cosmopolitan-typography-headline4-line-height);
+  --page-header-font-size: var(--cosmopolitan-typography-headline4-font-size);
+  --page-header-font-text-decoration: var(--cosmopolitan-typography-headline4-text-decoration);
+  --page-header-font-text-transform: var(--cosmopolitan-typography-headline4-text-transform);
+  --page-header-font-weight: var(--cosmopolitan-typography-headline4-font-weight);
+  --page-header-foreground-color: var(--cosmopolitan-scheme-foreground);
   --page-header-gap: unset;
-  --page-header-inset: unset;
+  --page-header-header-font-family: var(--cosmopolitan-font-family);
+  --page-header-header-font-letter-spacing: var(--cosmopolitan-typography-headline4-letter-spacing);
+  --page-header-header-font-line-height: var(--cosmopolitan-typography-headline4-line-height);
+  --page-header-header-font-size: var(--cosmopolitan-typography-headline4-font-size);
+  --page-header-header-font-text-decoration: var(--cosmopolitan-typography-headline4-text-decoration);
+  --page-header-header-font-text-transform: var(--cosmopolitan-typography-headline4-text-transform);
+  --page-header-header-font-weight: var(--cosmopolitan-typography-headline4-font-weight);
+  --page-header-inset: calc(var(--cosmopolitan-layout-space) * 2);
   --page-header-padding-bottom: unset;
   --page-header-padding-left: unset;
   --page-header-padding-right: unset;
   --page-header-padding-top: unset;
+  --page-header-prefix-gap: unset;
   --page-header-shadow: unset unset unset unset unset;
   --page-header-shadow-blur: unset;
   --page-header-shadow-color: unset;
   --page-header-shadow-offset-x: unset;
   --page-header-shadow-offset-y: unset;
   --page-header-shadow-spread: unset;
+  --page-header-sub-header-font-family: var(--cosmopolitan-font-family);
+  --page-header-sub-header-font-letter-spacing: var(--cosmopolitan-typography-subtitle1-letter-spacing);
+  --page-header-sub-header-font-line-height: var(--cosmopolitan-typography-subtitle1-line-height);
+  --page-header-sub-header-font-size: var(--cosmopolitan-typography-subtitle1-font-size);
+  --page-header-sub-header-font-text-decoration: var(--cosmopolitan-typography-subtitle1-text-decoration);
+  --page-header-sub-header-font-text-transform: var(--cosmopolitan-typography-subtitle1-text-transform);
+  --page-header-sub-header-font-weight: var(--cosmopolitan-typography-subtitle1-font-weight);
+  --page-header-suffix-gap: unset;
   --page-header-transition-duration: unset;
   --page-header-transition-mode: unset;
   --page-header-transition-property: unset;
@@ -78,21 +100,98 @@ export function pageHeaderElementCosmopolitanStyle() {
   text-transform: var(--page-header-font-text-transform);
   background-color: var(--page-header-background-color);
   color: var(--page-header-foreground-color);
-  flex-direction: column;
+  flex-direction: row;
   flex: 1;
   display: flex;
   position: relative;
 }
+:host [part="root"] {
+  display: inherit;
+  flex: inherit;
+  flex-direction: inherit;
+  gap: var(--page-header-gap);
+}
+:host [part="root"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="prefix"] {
+  gap: var(--page-header-prefix-gap);
+  flex-shrink: 1;
+  align-self: flex-start;
+  align-items: center;
+  display: flex;
+}
+:host [part="root"] [part="prefix"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="heading"] {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+:host [part="root"] [part="heading"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="heading"] [part="content"] {
+  flex-direction: column;
+  display: flex;
+}
+:host [part="root"] [part="heading"] [part="content"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="suffix"] {
+  gap: var(--page-header-suffix-gap);
+  flex-shrink: 1;
+  align-items: center;
+  display: flex;
+}
+:host [part="root"] [part="suffix"][hidden] {
+  display: none;
+}
 :host slot[name="header"], :host slot[name="header"] mosaik-text {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-transform: inherit;
-  background-color: inherit;
+  font-family: var(--page-header-header-font-family);
+  font-size: var(--page-header-header-font-size);
+  line-height: var(--page-header-header-font-line-height);
+  font-weight: var(--page-header-header-font-weight);
+  letter-spacing: var(--page-header-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-header-font-text-decoration);
+  text-decoration: var(--page-header-header-font-text-decoration);
+  text-transform: var(--page-header-header-font-text-transform);
+  color: inherit;
+}
+:host slot[name="subheader"], :host slot[name="subheader"] mosaik-text {
+  font-family: var(--page-header-sub-header-font-family);
+  font-size: var(--page-header-sub-header-font-size);
+  line-height: var(--page-header-sub-header-font-line-height);
+  font-weight: var(--page-header-sub-header-font-weight);
+  letter-spacing: var(--page-header-sub-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-sub-header-font-text-decoration);
+  text-decoration: var(--page-header-sub-header-font-text-decoration);
+  text-transform: var(--page-header-sub-header-font-text-transform);
+  color: inherit;
+}
+:host slot[name="additionalHeader"], :host slot[name="additionalHeader"] mosaik-text {
+  font-family: var(--page-header-additional-header-font-family);
+  font-size: var(--page-header-additional-header-font-size);
+  line-height: var(--page-header-additional-header-font-line-height);
+  font-weight: var(--page-header-additional-header-font-weight);
+  letter-spacing: var(--page-header-additional-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-additional-header-font-text-decoration);
+  text-decoration: var(--page-header-additional-header-font-text-decoration);
+  text-transform: var(--page-header-additional-header-font-text-transform);
   color: inherit;
 }

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Cosmopolitan.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeaderElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.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,kCAAkC;IAC9C,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuHT~~,CAAC;AACN,CAAC"}
1	+ {"version":3,"file":"PageHeaderElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.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,kCAAkC;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0NT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Joy.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeaderElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,SAAS,~~CAwHrD~~"}
1	+ {"version":3,"file":"PageHeaderElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,SAAS,CAgOrD"}

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Joy.js CHANGED Viewed

@@ -13,6 +13,13 @@ import { css } from '../../../../../Dom/Css';
 export function pageHeaderElementJoyStyle() {
     return css `
 :host {
+  --page-header-additional-header-font-family: var(--joy-font-family);
+  --page-header-additional-header-font-letter-spacing: var(--joy-typography-subtitle2-letter-spacing);
+  --page-header-additional-header-font-line-height: var(--joy-typography-subtitle2-line-height);
+  --page-header-additional-header-font-size: var(--joy-typography-subtitle2-font-size);
+  --page-header-additional-header-font-text-decoration: var(--joy-typography-subtitle2-text-decoration);
+  --page-header-additional-header-font-text-transform: var(--joy-typography-subtitle2-text-transform);
+  --page-header-additional-header-font-weight: var(--joy-typography-subtitle2-font-weight);
   --page-header-background-color: var(--joy-scheme-transparent);
   --page-header-font-family: var(--joy-font-family);
   --page-header-font-letter-spacing: var(--joy-typography-headline4-letter-spacing);
@@ -22,18 +29,34 @@ export function pageHeaderElementJoyStyle() {
   --page-header-font-text-transform: var(--joy-typography-headline4-text-transform);
   --page-header-font-weight: var(--joy-typography-headline4-font-weight);
   --page-header-foreground-color: var(--joy-scheme-foreground);
-  --page-header-gap: unset;
+  --page-header-gap: calc(var(--joy-layout-space) * 2);
+  --page-header-header-font-family: var(--joy-font-family);
+  --page-header-header-font-letter-spacing: var(--joy-typography-headline4-letter-spacing);
+  --page-header-header-font-line-height: var(--joy-typography-headline4-line-height);
+  --page-header-header-font-size: var(--joy-typography-headline4-font-size);
+  --page-header-header-font-text-decoration: var(--joy-typography-headline4-text-decoration);
+  --page-header-header-font-text-transform: var(--joy-typography-headline4-text-transform);
+  --page-header-header-font-weight: var(--joy-typography-headline4-font-weight);
   --page-header-inset: calc(var(--joy-layout-space) * 2);
   --page-header-padding-bottom: unset;
   --page-header-padding-left: unset;
   --page-header-padding-right: unset;
   --page-header-padding-top: unset;
+  --page-header-prefix-gap: var(--joy-layout-space);
   --page-header-shadow: unset unset unset unset unset;
   --page-header-shadow-blur: unset;
   --page-header-shadow-color: unset;
   --page-header-shadow-offset-x: unset;
   --page-header-shadow-offset-y: unset;
   --page-header-shadow-spread: unset;
+  --page-header-sub-header-font-family: var(--joy-font-family);
+  --page-header-sub-header-font-letter-spacing: var(--joy-typography-subtitle1-letter-spacing);
+  --page-header-sub-header-font-line-height: var(--joy-typography-subtitle1-line-height);
+  --page-header-sub-header-font-size: var(--joy-typography-subtitle1-font-size);
+  --page-header-sub-header-font-text-decoration: var(--joy-typography-subtitle1-text-decoration);
+  --page-header-sub-header-font-text-transform: var(--joy-typography-subtitle1-text-transform);
+  --page-header-sub-header-font-weight: var(--joy-typography-subtitle1-font-weight);
+  --page-header-suffix-gap: var(--joy-layout-space);
   --page-header-transition-duration: unset;
   --page-header-transition-mode: unset;
   --page-header-transition-property: unset;
@@ -77,21 +100,98 @@ export function pageHeaderElementJoyStyle() {
   text-transform: var(--page-header-font-text-transform);
   background-color: var(--page-header-background-color);
   color: var(--page-header-foreground-color);
-  flex-direction: column;
+  flex-direction: row;
   flex: 1;
   display: flex;
   position: relative;
 }
+:host [part="root"] {
+  display: inherit;
+  flex: inherit;
+  flex-direction: inherit;
+  gap: var(--page-header-gap);
+}
+:host [part="root"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="prefix"] {
+  gap: var(--page-header-prefix-gap);
+  flex-shrink: 1;
+  align-self: flex-start;
+  align-items: center;
+  display: flex;
+}
+:host [part="root"] [part="prefix"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="heading"] {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+:host [part="root"] [part="heading"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="heading"] [part="content"] {
+  flex-direction: column;
+  display: flex;
+}
+:host [part="root"] [part="heading"] [part="content"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="suffix"] {
+  gap: var(--page-header-suffix-gap);
+  flex-shrink: 1;
+  align-items: center;
+  display: flex;
+}
+:host [part="root"] [part="suffix"][hidden] {
+  display: none;
+}
 :host slot[name="header"], :host slot[name="header"] mosaik-text {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-transform: inherit;
-  background-color: inherit;
+  font-family: var(--page-header-header-font-family);
+  font-size: var(--page-header-header-font-size);
+  line-height: var(--page-header-header-font-line-height);
+  font-weight: var(--page-header-header-font-weight);
+  letter-spacing: var(--page-header-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-header-font-text-decoration);
+  text-decoration: var(--page-header-header-font-text-decoration);
+  text-transform: var(--page-header-header-font-text-transform);
+  color: inherit;
+}
+:host slot[name="subheader"], :host slot[name="subheader"] mosaik-text {
+  font-family: var(--page-header-sub-header-font-family);
+  font-size: var(--page-header-sub-header-font-size);
+  line-height: var(--page-header-sub-header-font-line-height);
+  font-weight: var(--page-header-sub-header-font-weight);
+  letter-spacing: var(--page-header-sub-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-sub-header-font-text-decoration);
+  text-decoration: var(--page-header-sub-header-font-text-decoration);
+  text-transform: var(--page-header-sub-header-font-text-transform);
+  color: inherit;
+}
+:host slot[name="additionalHeader"], :host slot[name="additionalHeader"] mosaik-text {
+  font-family: var(--page-header-additional-header-font-family);
+  font-size: var(--page-header-additional-header-font-size);
+  line-height: var(--page-header-additional-header-font-line-height);
+  font-weight: var(--page-header-additional-header-font-weight);
+  letter-spacing: var(--page-header-additional-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-additional-header-font-text-decoration);
+  text-decoration: var(--page-header-additional-header-font-text-decoration);
+  text-transform: var(--page-header-additional-header-font-text-transform);
   color: inherit;
 }
@@ -129,6 +229,10 @@ export function pageHeaderElementJoyStyle() {
   padding: 0;
 }
+:host slot[name="additionalHeader"], :host slot[name="additionalHeader"] mosaik-text {
+  color: var(--joy-scheme-middlelight);
+}
     `;
 }
 //# sourceMappingURL=PageHeaderElement.Joy.js.map

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Joy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeaderElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.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,yBAAyB;IACrC,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsHT~~,CAAC;AACN,CAAC"}
1	+ {"version":3,"file":"PageHeaderElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8NT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Memphis.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeaderElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,SAAS,~~CAyHzD~~"}
1	+ {"version":3,"file":"PageHeaderElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,SAAS,CA4NzD"}

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Memphis.js CHANGED Viewed

@@ -13,8 +13,14 @@ import { css } from '../../../../../Dom/Css';
 export function pageHeaderElementMemphisStyle() {
     return css `
 :host {
-  --page-header-background-color: var(--memphis-scheme-background);
-  --page-header-border-color: unset;
+  --page-header-additional-header-font-family: var(--memphis-font-family);
+  --page-header-additional-header-font-letter-spacing: var(--memphis-typography-subtitle2-letter-spacing);
+  --page-header-additional-header-font-line-height: var(--memphis-typography-subtitle2-line-height);
+  --page-header-additional-header-font-size: var(--memphis-typography-subtitle2-font-size);
+  --page-header-additional-header-font-text-decoration: var(--memphis-typography-subtitle2-text-decoration);
+  --page-header-additional-header-font-text-transform: var(--memphis-typography-subtitle2-text-transform);
+  --page-header-additional-header-font-weight: var(--memphis-typography-subtitle2-font-weight);
+  --page-header-background-color: var(--memphis-scheme-transparent);
   --page-header-font-family: var(--memphis-font-family);
   --page-header-font-letter-spacing: var(--memphis-typography-headline4-letter-spacing);
   --page-header-font-line-height: var(--memphis-typography-headline4-line-height);
@@ -24,17 +30,33 @@ export function pageHeaderElementMemphisStyle() {
   --page-header-font-weight: var(--memphis-typography-headline4-font-weight);
   --page-header-foreground-color: var(--memphis-scheme-foreground);
   --page-header-gap: unset;
+  --page-header-header-font-family: var(--memphis-font-family);
+  --page-header-header-font-letter-spacing: var(--memphis-typography-headline4-letter-spacing);
+  --page-header-header-font-line-height: var(--memphis-typography-headline4-line-height);
+  --page-header-header-font-size: var(--memphis-typography-headline4-font-size);
+  --page-header-header-font-text-decoration: var(--memphis-typography-headline4-text-decoration);
+  --page-header-header-font-text-transform: var(--memphis-typography-headline4-text-transform);
+  --page-header-header-font-weight: var(--memphis-typography-headline4-font-weight);
   --page-header-inset: calc(var(--memphis-layout-space) * 2);
   --page-header-padding-bottom: unset;
   --page-header-padding-left: unset;
   --page-header-padding-right: unset;
   --page-header-padding-top: unset;
+  --page-header-prefix-gap: unset;
   --page-header-shadow: unset unset unset unset unset;
   --page-header-shadow-blur: unset;
   --page-header-shadow-color: unset;
   --page-header-shadow-offset-x: unset;
   --page-header-shadow-offset-y: unset;
   --page-header-shadow-spread: unset;
+  --page-header-sub-header-font-family: var(--memphis-font-family);
+  --page-header-sub-header-font-letter-spacing: var(--memphis-typography-subtitle1-letter-spacing);
+  --page-header-sub-header-font-line-height: var(--memphis-typography-subtitle1-line-height);
+  --page-header-sub-header-font-size: var(--memphis-typography-subtitle1-font-size);
+  --page-header-sub-header-font-text-decoration: var(--memphis-typography-subtitle1-text-decoration);
+  --page-header-sub-header-font-text-transform: var(--memphis-typography-subtitle1-text-transform);
+  --page-header-sub-header-font-weight: var(--memphis-typography-subtitle1-font-weight);
+  --page-header-suffix-gap: unset;
   --page-header-transition-duration: unset;
   --page-header-transition-mode: unset;
   --page-header-transition-property: unset;
@@ -78,21 +100,98 @@ export function pageHeaderElementMemphisStyle() {
   text-transform: var(--page-header-font-text-transform);
   background-color: var(--page-header-background-color);
   color: var(--page-header-foreground-color);
-  flex-direction: column;
+  flex-direction: row;
   flex: 1;
   display: flex;
   position: relative;
 }
+:host [part="root"] {
+  display: inherit;
+  flex: inherit;
+  flex-direction: inherit;
+  gap: var(--page-header-gap);
+}
+:host [part="root"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="prefix"] {
+  gap: var(--page-header-prefix-gap);
+  flex-shrink: 1;
+  align-self: flex-start;
+  align-items: center;
+  display: flex;
+}
+:host [part="root"] [part="prefix"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="heading"] {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+:host [part="root"] [part="heading"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="heading"] [part="content"] {
+  flex-direction: column;
+  display: flex;
+}
+:host [part="root"] [part="heading"] [part="content"][hidden] {
+  display: none;
+}
+:host [part="root"] [part="suffix"] {
+  gap: var(--page-header-suffix-gap);
+  flex-shrink: 1;
+  align-items: center;
+  display: flex;
+}
+:host [part="root"] [part="suffix"][hidden] {
+  display: none;
+}
 :host slot[name="header"], :host slot[name="header"] mosaik-text {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-transform: inherit;
-  background-color: inherit;
+  font-family: var(--page-header-header-font-family);
+  font-size: var(--page-header-header-font-size);
+  line-height: var(--page-header-header-font-line-height);
+  font-weight: var(--page-header-header-font-weight);
+  letter-spacing: var(--page-header-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-header-font-text-decoration);
+  text-decoration: var(--page-header-header-font-text-decoration);
+  text-transform: var(--page-header-header-font-text-transform);
+  color: inherit;
+}
+:host slot[name="subheader"], :host slot[name="subheader"] mosaik-text {
+  font-family: var(--page-header-sub-header-font-family);
+  font-size: var(--page-header-sub-header-font-size);
+  line-height: var(--page-header-sub-header-font-line-height);
+  font-weight: var(--page-header-sub-header-font-weight);
+  letter-spacing: var(--page-header-sub-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-sub-header-font-text-decoration);
+  text-decoration: var(--page-header-sub-header-font-text-decoration);
+  text-transform: var(--page-header-sub-header-font-text-transform);
+  color: inherit;
+}
+:host slot[name="additionalHeader"], :host slot[name="additionalHeader"] mosaik-text {
+  font-family: var(--page-header-additional-header-font-family);
+  font-size: var(--page-header-additional-header-font-size);
+  line-height: var(--page-header-additional-header-font-line-height);
+  font-weight: var(--page-header-additional-header-font-weight);
+  letter-spacing: var(--page-header-additional-header-font-letter-spacing);
+  -webkit-text-decoration: var(--page-header-additional-header-font-text-decoration);
+  text-decoration: var(--page-header-additional-header-font-text-decoration);
+  text-transform: var(--page-header-additional-header-font-text-transform);
   color: inherit;
 }

package/Controls/Components/Layouts/Page/Themes/PageHeaderElement.Memphis.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeaderElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.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,6BAA6B;IACzC,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuHT~~,CAAC;AACN,CAAC"}
1	+ {"version":3,"file":"PageHeaderElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageHeaderElement.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,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0NT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Resize/ResizeElement.d.ts CHANGED Viewed

@@ -11,12 +11,46 @@ declare const ResizeElement_base: (abstract new (...args: Array<any>) => import(
  * @element mosaik-resize
  * @category Layouts
  *
+ * @slot - The default slot for the content to be resized.
+ *
+ * @csspart thumb ${ResizeDirection.East} - The thumb ${ResizeDirection.East} part.
+ * @csspart thumb ${ResizeDirection.North} - The thumb ${ResizeDirection.North} part.
+ * @csspart thumb ${ResizeDirection.NorthEast} - The thumb ${ResizeDirection.NorthEast} part.
+ * @csspart thumb ${ResizeDirection.NorthWest} - The thumb ${ResizeDirection.NorthWest} part.
+ * @csspart thumb ${ResizeDirection.South} - The thumb ${ResizeDirection.South} part.
+ * @csspart thumb ${ResizeDirection.SouthEast} - The thumb ${ResizeDirection.SouthEast} part.
+ * @csspart thumb ${ResizeDirection.SouthWest} - The thumb ${ResizeDirection.SouthWest} part.
+ * @csspart thumb ${ResizeDirection.West} - The thumb ${ResizeDirection.West} part.
+ *
+ * @cssprop {String} --resize-font-family - The font family CSS custom property.
+ * @cssprop {String} --resize-font-letter-spacing - The font letter spacing CSS custom property.
+ * @cssprop {String} --resize-font-line-height - The font line height CSS custom property.
+ * @cssprop {String} --resize-font-size - The font size CSS custom property.
+ * @cssprop {String} --resize-font-text-decoration - The font text decoration CSS custom property.
+ * @cssprop {String} --resize-font-text-transform - The font text transform CSS custom property.
+ * @cssprop {String} --resize-font-weight - The font weight CSS custom property.
+ * @cssprop {String} --resize-gap - The gap CSS custom property.
+ * @cssprop {String} --resize-padding-bottom - The padding bottom CSS custom property.
+ * @cssprop {String} --resize-padding-left - The padding left CSS custom property.
+ * @cssprop {String} --resize-padding-right - The padding right CSS custom property.
+ * @cssprop {String} --resize-padding-top - The padding top CSS custom property.
+ * @cssprop {String} --resize-shadow - The shadow CSS custom property.
+ * @cssprop {String} --resize-shadow-blur - The shadow blur CSS custom property.
+ * @cssprop {String} --resize-shadow-color - The shadow color CSS custom property.
+ * @cssprop {String} --resize-shadow-offset-x - The shadow offset x CSS custom property.
+ * @cssprop {String} --resize-shadow-offset-y - The shadow offset y CSS custom property.
+ * @cssprop {String} --resize-shadow-spread - The shadow spread CSS custom property.
+ * @cssprop {String} --resize-transition-duration - The transition duration CSS custom property.
+ * @cssprop {String} --resize-transition-mode - The transition mode CSS custom property.
+ * @cssprop {String} --resize-transition-property - The transition property CSS custom property.
+ * @cssprop {String} --resize-translate - The translate CSS custom property.
+ *
  * @fires resizeResizeStarted {ResizeStartEvent} - Fired when a resize operation is started.
  * @fires resizeResized {ResizingEvent} - Fired when a resize operation is in progress.
  * @fires resizeResizeEnded {ResizeEndEvent} - Fired when a resize operation is ended.
  * @fires resizeResizeCanceled {ResizeCancelEvent} - Fired when a resize operation is canceled.
  *
- * @slot - The default slot for the content to be resized.
+ * @dependency mosaik-thumb - The Thumb element.
  *
  * @example
  * ```html

package/Controls/Components/Layouts/Resize/ResizeElement.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResizeElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Resize/ResizeElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAkE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAIpJ,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAM5D~~;;;;;;;;;;;;;;;;;;;;;;GAsBG~~;AACH,qBAWa,aACT,SAAQ,kBACR,YAAW,UAAU,EAAE,mBAAmB;IAI1C,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAA4B;IACvE,OAAO,CAAC,aAAa,CAAC,CAAqB;IAC3C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,yBAAyB,CAAyC;IAC1E,OAAO,CAAC,yBAAyB,CAAyC;IAC1E,OAAO,CAAC,iBAAiB,CAAC,CAAiB;IAC3C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAiB;IACpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAiB;IACtD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAiB;IAMtD;;;;OAIG;;IA2BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,mBAAmB,CAErC;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,mBAAmB,EAMzC;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;OAIG;IACH,IACW,YAAY,IAAI,kBAAkB,GAAG,SAAS,CAExD;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,EAM5D;IAED;;;;;OAKG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAMD;;;OAGG;IACa,oBAAoB,IAAI,IAAI;IAO5C;;;OAGG;cACgB,eAAe,IAAI,IAAI;IA2B1C;;;OAGG;cACgB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAMrE;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAQpB;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAkB7B;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
1	+ {"version":3,"file":"ResizeElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Resize/ResizeElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAkE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAIpJ,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAM5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBAWa,aACT,SAAQ,kBACR,YAAW,UAAU,EAAE,mBAAmB;IAI1C,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAA4B;IACvE,OAAO,CAAC,aAAa,CAAC,CAAqB;IAC3C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,yBAAyB,CAAyC;IAC1E,OAAO,CAAC,yBAAyB,CAAyC;IAC1E,OAAO,CAAC,iBAAiB,CAAC,CAAiB;IAC3C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAiB;IACpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAiB;IACtD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAiB;IAMtD;;;;OAIG;;IA2BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,mBAAmB,CAErC;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,mBAAmB,EAMzC;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;OAIG;IACH,IACW,YAAY,IAAI,kBAAkB,GAAG,SAAS,CAExD;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,EAM5D;IAED;;;;;OAKG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAMD;;;OAGG;IACa,oBAAoB,IAAI,IAAI;IAO5C;;;OAGG;cACgB,eAAe,IAAI,IAAI;IA2B1C;;;OAGG;cACgB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAMrE;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAQpB;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAkB7B;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

package/Controls/Components/Layouts/Resize/ResizeElement.js CHANGED Viewed

@@ -29,12 +29,46 @@ import { resizeElementJoyStyle } from './Themes/ResizeElement.Joy';
  * @element mosaik-resize
  * @category Layouts
  *
+ * @slot - The default slot for the content to be resized.
+ *
+ * @csspart thumb ${ResizeDirection.East} - The thumb ${ResizeDirection.East} part.
+ * @csspart thumb ${ResizeDirection.North} - The thumb ${ResizeDirection.North} part.
+ * @csspart thumb ${ResizeDirection.NorthEast} - The thumb ${ResizeDirection.NorthEast} part.
+ * @csspart thumb ${ResizeDirection.NorthWest} - The thumb ${ResizeDirection.NorthWest} part.
+ * @csspart thumb ${ResizeDirection.South} - The thumb ${ResizeDirection.South} part.
+ * @csspart thumb ${ResizeDirection.SouthEast} - The thumb ${ResizeDirection.SouthEast} part.
+ * @csspart thumb ${ResizeDirection.SouthWest} - The thumb ${ResizeDirection.SouthWest} part.
+ * @csspart thumb ${ResizeDirection.West} - The thumb ${ResizeDirection.West} part.
+ *
+ * @cssprop {String} --resize-font-family - The font family CSS custom property.
+ * @cssprop {String} --resize-font-letter-spacing - The font letter spacing CSS custom property.
+ * @cssprop {String} --resize-font-line-height - The font line height CSS custom property.
+ * @cssprop {String} --resize-font-size - The font size CSS custom property.
+ * @cssprop {String} --resize-font-text-decoration - The font text decoration CSS custom property.
+ * @cssprop {String} --resize-font-text-transform - The font text transform CSS custom property.
+ * @cssprop {String} --resize-font-weight - The font weight CSS custom property.
+ * @cssprop {String} --resize-gap - The gap CSS custom property.
+ * @cssprop {String} --resize-padding-bottom - The padding bottom CSS custom property.
+ * @cssprop {String} --resize-padding-left - The padding left CSS custom property.
+ * @cssprop {String} --resize-padding-right - The padding right CSS custom property.
+ * @cssprop {String} --resize-padding-top - The padding top CSS custom property.
+ * @cssprop {String} --resize-shadow - The shadow CSS custom property.
+ * @cssprop {String} --resize-shadow-blur - The shadow blur CSS custom property.
+ * @cssprop {String} --resize-shadow-color - The shadow color CSS custom property.
+ * @cssprop {String} --resize-shadow-offset-x - The shadow offset x CSS custom property.
+ * @cssprop {String} --resize-shadow-offset-y - The shadow offset y CSS custom property.
+ * @cssprop {String} --resize-shadow-spread - The shadow spread CSS custom property.
+ * @cssprop {String} --resize-transition-duration - The transition duration CSS custom property.
+ * @cssprop {String} --resize-transition-mode - The transition mode CSS custom property.
+ * @cssprop {String} --resize-transition-property - The transition property CSS custom property.
+ * @cssprop {String} --resize-translate - The translate CSS custom property.
+ *
  * @fires resizeResizeStarted {ResizeStartEvent} - Fired when a resize operation is started.
  * @fires resizeResized {ResizingEvent} - Fired when a resize operation is in progress.
  * @fires resizeResizeEnded {ResizeEndEvent} - Fired when a resize operation is ended.
  * @fires resizeResizeCanceled {ResizeCancelEvent} - Fired when a resize operation is canceled.
  *
- * @slot - The default slot for the content to be resized.
+ * @dependency mosaik-thumb - The Thumb element.
  *
  * @example
  * ```html