npm - @breadstone/mosaik-elements-foundation - Versions diffs - 0.0.32 → 0.0.34 - Mend

@breadstone/mosaik-elements-foundation 0.0.32 → 0.0.34

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 (1066) hide show

package/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.js CHANGED Viewed

@@ -13,28 +13,28 @@ import { css } from '../../../../Dom/Css';
 export function appHeaderElementCosmopolitanStyle() {
     return css `
 :host {
+  --app-header-background-color: var(--cosmopolitan-scheme-background);
+  --app-header-border-color: var(--cosmopolitan-scheme-highlight);
+  --app-header-border-radius: var(--cosmopolitan-layout-radius);
+  --app-header-border-style: solid;
+  --app-header-border-width: var(--cosmopolitan-layout-thickness);
   --app-header-font-family: var(--cosmopolitan-typography-headline6-font-family);
-  --app-header-font-size: var(--cosmopolitan-typography-headline6-font-size);
-  --app-header-font-line-height: var(--cosmopolitan-typography-headline6-line-height);
-  --app-header-font-weight: var(--cosmopolitan-typography-headline6-font-weight);
   --app-header-font-letter-spacing: var(--cosmopolitan-typography-headline6-letter-spacing);
+  --app-header-font-line-height: var(--cosmopolitan-typography-headline6-line-height);
+  --app-header-font-size: var(--cosmopolitan-typography-headline6-font-size);
   --app-header-font-text-decoration: var(--cosmopolitan-typography-headline6-text-decoration);
   --app-header-font-text-transform: var(--cosmopolitan-typography-headline6-text-transform);
-  --app-header-padding-top: unset;
-  --app-header-padding-right: unset;
+  --app-header-font-weight: var(--cosmopolitan-typography-headline6-font-weight);
+  --app-header-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --app-header-gap: var(--cosmopolitan-layout-space);
   --app-header-padding-bottom: unset;
   --app-header-padding-left: unset;
-  --app-header-gap: var(--cosmopolitan-layout-space);
+  --app-header-padding-right: unset;
+  --app-header-padding-top: unset;
   --app-header-transition-duration: var(--cosmopolitan-layout-transition);
   --app-header-transition-mode: ease;
   --app-header-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-header-translate: unset;
-  --app-header-background-color: var(--cosmopolitan-scheme-background);
-  --app-header-border-color: var(--cosmopolitan-scheme-highlight);
-  --app-header-border-radius: var(--cosmopolitan-layout-radius);
-  --app-header-border-style: solid;
-  --app-header-border-width: var(--cosmopolitan-layout-thickness);
-  --app-header-foreground-color: var(--cosmopolitan-scheme-foreground);
 }
 @media screen and (prefers-reduced-motion: reduce) {

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

@@ -13,28 +13,28 @@ import { css } from '../../../../Dom/Css';
 export function appHeaderElementJoyStyle() {
     return css `
 :host {
+  --app-header-background-color: var(--joy-scheme-background);
+  --app-header-border-color: var(--joy-scheme-highlight);
+  --app-header-border-radius: var(--joy-layout-radius);
+  --app-header-border-style: solid;
+  --app-header-border-width: var(--joy-layout-thickness);
   --app-header-font-family: var(--joy-typography-headline6-font-family);
-  --app-header-font-size: var(--joy-typography-headline6-font-size);
-  --app-header-font-line-height: var(--joy-typography-headline6-line-height);
-  --app-header-font-weight: var(--joy-typography-headline6-font-weight);
   --app-header-font-letter-spacing: var(--joy-typography-headline6-letter-spacing);
+  --app-header-font-line-height: var(--joy-typography-headline6-line-height);
+  --app-header-font-size: var(--joy-typography-headline6-font-size);
   --app-header-font-text-decoration: var(--joy-typography-headline6-text-decoration);
   --app-header-font-text-transform: var(--joy-typography-headline6-text-transform);
-  --app-header-padding-top: unset;
-  --app-header-padding-right: unset;
+  --app-header-font-weight: var(--joy-typography-headline6-font-weight);
+  --app-header-foreground-color: var(--joy-scheme-foreground);
+  --app-header-gap: var(--joy-layout-space);
   --app-header-padding-bottom: unset;
   --app-header-padding-left: unset;
-  --app-header-gap: var(--joy-layout-space);
+  --app-header-padding-right: unset;
+  --app-header-padding-top: unset;
   --app-header-transition-duration: var(--joy-layout-transition);
   --app-header-transition-mode: ease;
   --app-header-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-header-translate: unset;
-  --app-header-background-color: var(--joy-scheme-background);
-  --app-header-border-color: var(--joy-scheme-highlight);
-  --app-header-border-radius: var(--joy-layout-radius);
-  --app-header-border-style: solid;
-  --app-header-border-width: var(--joy-layout-thickness);
-  --app-header-foreground-color: var(--joy-scheme-foreground);
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/Shell/Themes/AppHeaderElement.Retro.js CHANGED Viewed

@@ -13,28 +13,28 @@ import { css } from '../../../../Dom/Css';
 export function appHeaderElementRetroStyle() {
     return css `
 :host {
+  --app-header-background-color: var(--retro-scheme-background);
+  --app-header-border-color: var(--retro-scheme-contrast);
+  --app-header-border-radius: var(--retro-layout-radius);
+  --app-header-border-style: solid;
+  --app-header-border-width: var(--retro-layout-thickness);
   --app-header-font-family: var(--retro-typography-headline6-font-family);
-  --app-header-font-size: var(--retro-typography-headline6-font-size);
-  --app-header-font-line-height: var(--retro-typography-headline6-line-height);
-  --app-header-font-weight: var(--retro-typography-headline6-font-weight);
   --app-header-font-letter-spacing: var(--retro-typography-headline6-letter-spacing);
+  --app-header-font-line-height: var(--retro-typography-headline6-line-height);
+  --app-header-font-size: var(--retro-typography-headline6-font-size);
   --app-header-font-text-decoration: var(--retro-typography-headline6-text-decoration);
   --app-header-font-text-transform: var(--retro-typography-headline6-text-transform);
-  --app-header-padding-top: unset;
-  --app-header-padding-right: unset;
+  --app-header-font-weight: var(--retro-typography-headline6-font-weight);
+  --app-header-foreground-color: var(--retro-scheme-foreground);
+  --app-header-gap: var(--retro-layout-space);
   --app-header-padding-bottom: unset;
   --app-header-padding-left: unset;
-  --app-header-gap: var(--retro-layout-space);
+  --app-header-padding-right: unset;
+  --app-header-padding-top: unset;
   --app-header-transition-duration: var(--retro-layout-transition);
   --app-header-transition-mode: ease;
   --app-header-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-header-translate: unset;
-  --app-header-background-color: var(--retro-scheme-background);
-  --app-header-border-color: var(--retro-scheme-contrast);
-  --app-header-border-radius: var(--retro-layout-radius);
-  --app-header-border-style: solid;
-  --app-header-border-width: var(--retro-layout-thickness);
-  --app-header-foreground-color: var(--retro-scheme-foreground);
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Empty/Themes/EmptyStateElement.Cosmopolitan.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function emptyStateElementCosmopolitanStyle() {
     return css `
 :host {
   --empty-state-font-family: unset;
-  --empty-state-font-size: unset;
-  --empty-state-font-line-height: unset;
-  --empty-state-font-weight: unset;
   --empty-state-font-letter-spacing: unset;
+  --empty-state-font-line-height: unset;
+  --empty-state-font-size: unset;
   --empty-state-font-text-decoration: unset;
   --empty-state-font-text-transform: unset;
-  --empty-state-padding-top: unset;
-  --empty-state-padding-right: unset;
-  --empty-state-padding-bottom: unset;
-  --empty-state-padding-left: unset;
-  --empty-state-gap: unset;
-  --empty-state-transition-duration: unset;
-  --empty-state-transition-mode: unset;
-  --empty-state-transition-property: unset;
-  --empty-state-translate: unset;
+  --empty-state-font-weight: unset;
   --empty-state-foreground-color: unset;
+  --empty-state-gap: unset;
   --empty-state-header-font-family: unset;
   --empty-state-header-font-letter-spacing: unset;
   --empty-state-header-font-line-height: unset;
@@ -37,6 +29,14 @@ export function emptyStateElementCosmopolitanStyle() {
   --empty-state-header-font-text-decoration: unset;
   --empty-state-header-font-text-transform: unset;
   --empty-state-header-font-weight: unset;
+  --empty-state-padding-bottom: unset;
+  --empty-state-padding-left: unset;
+  --empty-state-padding-right: unset;
+  --empty-state-padding-top: unset;
+  --empty-state-transition-duration: unset;
+  --empty-state-transition-mode: unset;
+  --empty-state-transition-property: unset;
+  --empty-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Empty/Themes/EmptyStateElement.Joy.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function emptyStateElementJoyStyle() {
     return css `
 :host {
   --empty-state-font-family: unset;
-  --empty-state-font-size: unset;
-  --empty-state-font-line-height: unset;
-  --empty-state-font-weight: unset;
   --empty-state-font-letter-spacing: unset;
+  --empty-state-font-line-height: unset;
+  --empty-state-font-size: unset;
   --empty-state-font-text-decoration: unset;
   --empty-state-font-text-transform: unset;
-  --empty-state-padding-top: calc(var(--joy-layout-space) * 2);
-  --empty-state-padding-right: calc(var(--joy-layout-space) * 2);
-  --empty-state-padding-bottom: calc(var(--joy-layout-space) * 2);
-  --empty-state-padding-left: calc(var(--joy-layout-space) * 2);
-  --empty-state-gap: var(--joy-layout-space);
-  --empty-state-transition-duration: unset;
-  --empty-state-transition-mode: unset;
-  --empty-state-transition-property: unset;
-  --empty-state-translate: unset;
+  --empty-state-font-weight: unset;
   --empty-state-foreground-color: var(--joy-scheme-middlelight);
+  --empty-state-gap: var(--joy-layout-space);
   --empty-state-header-font-family: var(--joy-font-family);
   --empty-state-header-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
   --empty-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -37,6 +29,14 @@ export function emptyStateElementJoyStyle() {
   --empty-state-header-font-text-decoration: var(--joy-typography-body1-text-decoration);
   --empty-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
   --empty-state-header-font-weight: var(--joy-typography-body1-font-weight);
+  --empty-state-padding-bottom: calc(var(--joy-layout-space) * 2);
+  --empty-state-padding-left: calc(var(--joy-layout-space) * 2);
+  --empty-state-padding-right: calc(var(--joy-layout-space) * 2);
+  --empty-state-padding-top: calc(var(--joy-layout-space) * 2);
+  --empty-state-transition-duration: unset;
+  --empty-state-transition-mode: unset;
+  --empty-state-transition-property: unset;
+  --empty-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Empty/Themes/EmptyStateElement.Retro.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function emptyStateElementRetroStyle() {
     return css `
 :host {
   --empty-state-font-family: unset;
-  --empty-state-font-size: unset;
-  --empty-state-font-line-height: unset;
-  --empty-state-font-weight: unset;
   --empty-state-font-letter-spacing: unset;
+  --empty-state-font-line-height: unset;
+  --empty-state-font-size: unset;
   --empty-state-font-text-decoration: unset;
   --empty-state-font-text-transform: unset;
-  --empty-state-padding-top: calc(var(--retro-layout-space) * 2);
-  --empty-state-padding-right: calc(var(--retro-layout-space) * 2);
-  --empty-state-padding-bottom: calc(var(--retro-layout-space) * 2);
-  --empty-state-padding-left: calc(var(--retro-layout-space) * 2);
-  --empty-state-gap: var(--retro-layout-space);
-  --empty-state-transition-duration: unset;
-  --empty-state-transition-mode: unset;
-  --empty-state-transition-property: unset;
-  --empty-state-translate: unset;
+  --empty-state-font-weight: unset;
   --empty-state-foreground-color: var(--retro-scheme-middlelight);
+  --empty-state-gap: var(--retro-layout-space);
   --empty-state-header-font-family: var(--retro-font-family);
   --empty-state-header-font-letter-spacing: var(--retro-typography-body1-letter-spacing);
   --empty-state-header-font-line-height: var(--retro-typography-body1-line-height);
@@ -37,6 +29,14 @@ export function emptyStateElementRetroStyle() {
   --empty-state-header-font-text-decoration: var(--retro-typography-body1-text-decoration);
   --empty-state-header-font-text-transform: var(--retro-typography-body1-text-transform);
   --empty-state-header-font-weight: var(--retro-typography-body1-font-weight);
+  --empty-state-padding-bottom: calc(var(--retro-layout-space) * 2);
+  --empty-state-padding-left: calc(var(--retro-layout-space) * 2);
+  --empty-state-padding-right: calc(var(--retro-layout-space) * 2);
+  --empty-state-padding-top: calc(var(--retro-layout-space) * 2);
+  --empty-state-transition-duration: unset;
+  --empty-state-transition-mode: unset;
+  --empty-state-transition-property: unset;
+  --empty-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Error/Themes/ErrorStateElement.Cosmopolitan.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function errorStateElementCosmopolitanStyle() {
     return css `
 :host {
   --error-state-font-family: unset;
-  --error-state-font-size: unset;
-  --error-state-font-line-height: unset;
-  --error-state-font-weight: unset;
   --error-state-font-letter-spacing: unset;
+  --error-state-font-line-height: unset;
+  --error-state-font-size: unset;
   --error-state-font-text-decoration: unset;
   --error-state-font-text-transform: unset;
-  --error-state-padding-top: unset;
-  --error-state-padding-right: unset;
-  --error-state-padding-bottom: unset;
-  --error-state-padding-left: unset;
-  --error-state-gap: unset;
-  --error-state-transition-duration: unset;
-  --error-state-transition-mode: unset;
-  --error-state-transition-property: unset;
-  --error-state-translate: unset;
+  --error-state-font-weight: unset;
   --error-state-foreground-color: unset;
+  --error-state-gap: unset;
   --error-state-header-font-family: unset;
   --error-state-header-font-letter-spacing: unset;
   --error-state-header-font-line-height: unset;
@@ -37,6 +29,14 @@ export function errorStateElementCosmopolitanStyle() {
   --error-state-header-font-text-decoration: unset;
   --error-state-header-font-text-transform: unset;
   --error-state-header-font-weight: unset;
+  --error-state-padding-bottom: unset;
+  --error-state-padding-left: unset;
+  --error-state-padding-right: unset;
+  --error-state-padding-top: unset;
+  --error-state-transition-duration: unset;
+  --error-state-transition-mode: unset;
+  --error-state-transition-property: unset;
+  --error-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Error/Themes/ErrorStateElement.Joy.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function errorStateElementJoyStyle() {
     return css `
 :host {
   --error-state-font-family: unset;
-  --error-state-font-size: unset;
-  --error-state-font-line-height: unset;
-  --error-state-font-weight: unset;
   --error-state-font-letter-spacing: unset;
+  --error-state-font-line-height: unset;
+  --error-state-font-size: unset;
   --error-state-font-text-decoration: unset;
   --error-state-font-text-transform: unset;
-  --error-state-padding-top: calc(var(--joy-layout-space) * 2);
-  --error-state-padding-right: calc(var(--joy-layout-space) * 2);
-  --error-state-padding-bottom: calc(var(--joy-layout-space) * 2);
-  --error-state-padding-left: calc(var(--joy-layout-space) * 2);
-  --error-state-gap: var(--joy-layout-space);
-  --error-state-transition-duration: unset;
-  --error-state-transition-mode: unset;
-  --error-state-transition-property: unset;
-  --error-state-translate: unset;
+  --error-state-font-weight: unset;
   --error-state-foreground-color: unset;
+  --error-state-gap: var(--joy-layout-space);
   --error-state-header-font-family: var(--joy-font-family);
   --error-state-header-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
   --error-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -37,6 +29,14 @@ export function errorStateElementJoyStyle() {
   --error-state-header-font-text-decoration: var(--joy-typography-body1-text-decoration);
   --error-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
   --error-state-header-font-weight: var(--joy-typography-body1-font-weight);
+  --error-state-padding-bottom: calc(var(--joy-layout-space) * 2);
+  --error-state-padding-left: calc(var(--joy-layout-space) * 2);
+  --error-state-padding-right: calc(var(--joy-layout-space) * 2);
+  --error-state-padding-top: calc(var(--joy-layout-space) * 2);
+  --error-state-transition-duration: unset;
+  --error-state-transition-mode: unset;
+  --error-state-transition-property: unset;
+  --error-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Error/Themes/ErrorStateElement.Retro.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function errorStateElementRetroStyle() {
     return css `
 :host {
   --error-state-font-family: unset;
-  --error-state-font-size: unset;
-  --error-state-font-line-height: unset;
-  --error-state-font-weight: unset;
   --error-state-font-letter-spacing: unset;
+  --error-state-font-line-height: unset;
+  --error-state-font-size: unset;
   --error-state-font-text-decoration: unset;
   --error-state-font-text-transform: unset;
-  --error-state-padding-top: calc(var(--retro-layout-space) * 2);
-  --error-state-padding-right: calc(var(--retro-layout-space) * 2);
-  --error-state-padding-bottom: calc(var(--retro-layout-space) * 2);
-  --error-state-padding-left: calc(var(--retro-layout-space) * 2);
-  --error-state-gap: var(--retro-layout-space);
-  --error-state-transition-duration: unset;
-  --error-state-transition-mode: unset;
-  --error-state-transition-property: unset;
-  --error-state-translate: unset;
+  --error-state-font-weight: unset;
   --error-state-foreground-color: unset;
+  --error-state-gap: var(--retro-layout-space);
   --error-state-header-font-family: var(--retro-font-family);
   --error-state-header-font-letter-spacing: var(--retro-typography-body1-letter-spacing);
   --error-state-header-font-line-height: var(--retro-typography-body1-line-height);
@@ -37,6 +29,14 @@ export function errorStateElementRetroStyle() {
   --error-state-header-font-text-decoration: var(--retro-typography-body1-text-decoration);
   --error-state-header-font-text-transform: var(--retro-typography-body1-text-transform);
   --error-state-header-font-weight: var(--retro-typography-body1-font-weight);
+  --error-state-padding-bottom: calc(var(--retro-layout-space) * 2);
+  --error-state-padding-left: calc(var(--retro-layout-space) * 2);
+  --error-state-padding-right: calc(var(--retro-layout-space) * 2);
+  --error-state-padding-top: calc(var(--retro-layout-space) * 2);
+  --error-state-transition-duration: unset;
+  --error-state-transition-mode: unset;
+  --error-state-transition-property: unset;
+  --error-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function successStateElementCosmopolitanStyle() {
     return css `
 :host {
   --success-state-font-family: unset;
-  --success-state-font-size: unset;
-  --success-state-font-line-height: unset;
-  --success-state-font-weight: unset;
   --success-state-font-letter-spacing: unset;
+  --success-state-font-line-height: unset;
+  --success-state-font-size: unset;
   --success-state-font-text-decoration: unset;
   --success-state-font-text-transform: unset;
-  --success-state-padding-top: unset;
-  --success-state-padding-right: unset;
-  --success-state-padding-bottom: unset;
-  --success-state-padding-left: unset;
-  --success-state-gap: unset;
-  --success-state-transition-duration: unset;
-  --success-state-transition-mode: unset;
-  --success-state-transition-property: unset;
-  --success-state-translate: unset;
+  --success-state-font-weight: unset;
   --success-state-foreground-color: unset;
+  --success-state-gap: unset;
   --success-state-header-font-family: unset;
   --success-state-header-font-letter-spacing: unset;
   --success-state-header-font-line-height: unset;
@@ -37,6 +29,14 @@ export function successStateElementCosmopolitanStyle() {
   --success-state-header-font-text-decoration: unset;
   --success-state-header-font-text-transform: unset;
   --success-state-header-font-weight: unset;
+  --success-state-padding-bottom: unset;
+  --success-state-padding-left: unset;
+  --success-state-padding-right: unset;
+  --success-state-padding-top: unset;
+  --success-state-transition-duration: unset;
+  --success-state-transition-mode: unset;
+  --success-state-transition-property: unset;
+  --success-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function successStateElementJoyStyle() {
     return css `
 :host {
   --success-state-font-family: unset;
-  --success-state-font-size: unset;
-  --success-state-font-line-height: unset;
-  --success-state-font-weight: unset;
   --success-state-font-letter-spacing: unset;
+  --success-state-font-line-height: unset;
+  --success-state-font-size: unset;
   --success-state-font-text-decoration: unset;
   --success-state-font-text-transform: unset;
-  --success-state-padding-top: calc(var(--joy-layout-space) * 2);
-  --success-state-padding-right: calc(var(--joy-layout-space) * 2);
-  --success-state-padding-bottom: calc(var(--joy-layout-space) * 2);
-  --success-state-padding-left: calc(var(--joy-layout-space) * 2);
-  --success-state-gap: var(--joy-layout-space);
-  --success-state-transition-duration: unset;
-  --success-state-transition-mode: unset;
-  --success-state-transition-property: unset;
-  --success-state-translate: unset;
+  --success-state-font-weight: unset;
   --success-state-foreground-color: unset;
+  --success-state-gap: var(--joy-layout-space);
   --success-state-header-font-family: var(--joy-font-family);
   --success-state-header-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
   --success-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -37,6 +29,14 @@ export function successStateElementJoyStyle() {
   --success-state-header-font-text-decoration: var(--joy-typography-body1-text-decoration);
   --success-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
   --success-state-header-font-weight: var(--joy-typography-body1-font-weight);
+  --success-state-padding-bottom: calc(var(--joy-layout-space) * 2);
+  --success-state-padding-left: calc(var(--joy-layout-space) * 2);
+  --success-state-padding-right: calc(var(--joy-layout-space) * 2);
+  --success-state-padding-top: calc(var(--joy-layout-space) * 2);
+  --success-state-transition-duration: unset;
+  --success-state-transition-mode: unset;
+  --success-state-transition-property: unset;
+  --success-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/States/Success/Themes/SuccessStateElement.Retro.js CHANGED Viewed

@@ -14,22 +14,14 @@ export function successStateElementRetroStyle() {
     return css `
 :host {
   --success-state-font-family: unset;
-  --success-state-font-size: unset;
-  --success-state-font-line-height: unset;
-  --success-state-font-weight: unset;
   --success-state-font-letter-spacing: unset;
+  --success-state-font-line-height: unset;
+  --success-state-font-size: unset;
   --success-state-font-text-decoration: unset;
   --success-state-font-text-transform: unset;
-  --success-state-padding-top: calc(var(--retro-layout-space) * 2);
-  --success-state-padding-right: calc(var(--retro-layout-space) * 2);
-  --success-state-padding-bottom: calc(var(--retro-layout-space) * 2);
-  --success-state-padding-left: calc(var(--retro-layout-space) * 2);
-  --success-state-gap: var(--retro-layout-space);
-  --success-state-transition-duration: unset;
-  --success-state-transition-mode: unset;
-  --success-state-transition-property: unset;
-  --success-state-translate: unset;
+  --success-state-font-weight: unset;
   --success-state-foreground-color: unset;
+  --success-state-gap: var(--retro-layout-space);
   --success-state-header-font-family: var(--retro-font-family);
   --success-state-header-font-letter-spacing: var(--retro-typography-body1-letter-spacing);
   --success-state-header-font-line-height: var(--retro-typography-body1-line-height);
@@ -37,6 +29,14 @@ export function successStateElementRetroStyle() {
   --success-state-header-font-text-decoration: var(--retro-typography-body1-text-decoration);
   --success-state-header-font-text-transform: var(--retro-typography-body1-text-transform);
   --success-state-header-font-weight: var(--retro-typography-body1-font-weight);
+  --success-state-padding-bottom: calc(var(--retro-layout-space) * 2);
+  --success-state-padding-left: calc(var(--retro-layout-space) * 2);
+  --success-state-padding-right: calc(var(--retro-layout-space) * 2);
+  --success-state-padding-top: calc(var(--retro-layout-space) * 2);
+  --success-state-transition-duration: unset;
+  --success-state-transition-mode: unset;
+  --success-state-transition-property: unset;
+  --success-state-translate: unset;
 }
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Controllers/PanController.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ControllerBase, type ControllerHost } from './Abstracts/ControllerBase';
 /**
- * Generic PanController to handle panstart, panmove, and panend events.
+ * Controller to recognize pan gestures, allowing users to drag or swipe elements on the screen.
  *
  * @public
  */
@@ -14,6 +14,11 @@ export declare class PanController extends ControllerBase {
     private _pointerMoveEventListenerSubscription;
     private _pointerUpEventListenerSubscription;
     private _pointerCancelEventListenerSubscription;
+    /**
+     * Constructs a new instance of the `PanController` class.
+     *
+     * @public
+     */
     constructor(host: ControllerHost);
     /**
      * @public
@@ -31,9 +36,20 @@ export declare class PanController extends ControllerBase {
 }
 declare global {
     interface HTMLElementEventMap {
-        panstart: CustomEvent;
-        panmove: CustomEvent;
-        panend: CustomEvent;
+        panstart: CustomEvent<{
+            clientX: number;
+            clientY: number;
+        }>;
+        panmove: CustomEvent<{
+            clientX: number;
+            clientY: number;
+            deltaX: number;
+            deltaY: number;
+        }>;
+        panend: CustomEvent<{
+            clientX: number;
+            clientY: number;
+        }>;
     }
 }
 //# sourceMappingURL=PanController.d.ts.map

package/Controls/Controllers/PanController.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanController.d.ts","sourceRoot":"","sources":["../../../src/Controls/Controllers/PanController.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjF;;;;GAIG;AACH,qBAAa,aACT,SAAQ,cAAc;IAItB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,qCAAqC,CAAoC;IACjF,OAAO,CAAC,qCAAqC,CAAoC;IACjF,OAAO,CAAC,mCAAmC,CAAoC;IAC/E,OAAO,CAAC,uCAAuC,CAAoC;~~gBAMhE~~,IAAI,EAAE,cAAc;IAkBvC;;;OAGG;IACa,aAAa,IAAI,IAAI;IAIrC;;;OAGG;IACa,gBAAgB,IAAI,IAAI;IAOxC,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;CAetB;AAED,OAAO,CAAC,MAAM,CAAC;~~IAEX~~,UAAU,mBAAmB;QACzB,QAAQ,EAAE,WAAW,CAAC;~~QACtB~~,OAAO,EAAE,WAAW,CAAC;~~QACrB~~,MAAM,EAAE,WAAW,CAAC;~~KACvB~~;CACJ"}
1	+ {"version":3,"file":"PanController.d.ts","sourceRoot":"","sources":["../../../src/Controls/Controllers/PanController.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjF;;;;GAIG;AACH,qBAAa,aACT,SAAQ,cAAc;IAItB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,qCAAqC,CAAoC;IACjF,OAAO,CAAC,qCAAqC,CAAoC;IACjF,OAAO,CAAC,mCAAmC,CAAoC;IAC/E,OAAO,CAAC,uCAAuC,CAAoC;IAMnF;;;;OAIG;gBACgB,IAAI,EAAE,cAAc;IAkBvC;;;OAGG;IACa,aAAa,IAAI,IAAI;IAIrC;;;OAGG;IACa,gBAAgB,IAAI,IAAI;IAOxC,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;CAetB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,mBAAmB;QACzB,QAAQ,EAAE,WAAW,CAAC;YAClB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC,CAAC;QACH,OAAO,EAAE,WAAW,CAAC;YACjB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,MAAM,EAAE,MAAM,CAAC;YACf,MAAM,EAAE,MAAM,CAAC;SAClB,CAAC,CAAC;QACH,MAAM,EAAE,WAAW,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC,CAAC;KACN;CACJ"}

package/Controls/Controllers/PanController.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { emit, on } from '@breadstone/mosaik-elements';
 import { ControllerBase } from './Abstracts/ControllerBase';
 /**
- * Generic PanController to handle panstart, panmove, and panend events.
+ * Controller to recognize pan gestures, allowing users to drag or swipe elements on the screen.
  *
  * @public
  */
@@ -19,6 +19,11 @@ export class PanController extends ControllerBase {
     _pointerCancelEventListenerSubscription;
     // #endregion
     // #region Ctor
+    /**
+     * Constructs a new instance of the `PanController` class.
+     *
+     * @public
+     */
     constructor(host) {
         super(host);
         this._startX = 0;

package/Controls/Controllers/PanController.js.map CHANGED Viewed

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

package/Controls/Controllers/PinchController.d.ts ADDED Viewed

@@ -0,0 +1,60 @@
+import { ControllerBase, type ControllerHost } from './Abstracts/ControllerBase';
+/**
+ * Controller to recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out).
+ *
+ * @public
+ */
+export declare class PinchController extends ControllerBase {
+    private readonly _pointerMap;
+    private _active;
+    private _startDistance;
+    private _currentDistance;
+    private _scale;
+    private _pointerDownEventListenerSubscription;
+    private _pointerMoveEventListenerSubscription;
+    private _pointerUpEventListenerSubscription;
+    private _pointerCancelEventListenerSubscription;
+    private _lastScale;
+    /**
+     * Constructs a new instance of the `PinchController` class.
+     *
+     * @public
+     */
+    constructor(host: ControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onPointerCancel;
+    private getDistance;
+}
+declare global {
+    interface HTMLElementEventMap {
+        pinchstart: CustomEvent<{
+            distance: number;
+            scale: number;
+        }>;
+        pinchmove: CustomEvent<{
+            distance: number;
+            scale: number;
+        }>;
+        pinchend: CustomEvent<{
+            distance: number;
+            scale: number;
+        }>;
+        pinchcancel: CustomEvent<{
+            distance: number;
+            scale: number;
+        }>;
+        pinchin: CustomEvent<{
+            distance: number;
+            scale: number;
+        }>;
+        pinchout: CustomEvent<{
+            distance: number;
+            scale: number;
+        }>;
+    }
+}
+//# sourceMappingURL=PinchController.d.ts.map