@breadstone/mosaik-elements-foundation 0.0.105 → 0.0.107

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Cosmopolitan.js

@@ -0,0 +1,239 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function scrubSliderElementCosmopolitanStyle() {
+    return css `
+:host {
+  --scrub-slider-background-color: unset;
+  --scrub-slider-border-color: unset;
+  --scrub-slider-border-radius: unset;
+  --scrub-slider-border-style: unset;
+  --scrub-slider-border-width: unset;
+  --scrub-slider-component-name-thumb-background-color: unset;
+  --scrub-slider-font-family: unset;
+  --scrub-slider-font-letter-spacing: unset;
+  --scrub-slider-font-line-height: unset;
+  --scrub-slider-font-size: unset;
+  --scrub-slider-font-text-decoration: unset;
+  --scrub-slider-font-text-transform: unset;
+  --scrub-slider-font-weight: unset;
+  --scrub-slider-foreground-color: unset;
+  --scrub-slider-gap: unset;
+  --scrub-slider-padding-bottom: unset;
+  --scrub-slider-padding-left: unset;
+  --scrub-slider-padding-right: unset;
+  --scrub-slider-padding-top: unset;
+  --scrub-slider-shadow: unset;
+  --scrub-slider-thumb-background-color: unset;
+  --scrub-slider-thumb-border-color: unset;
+  --scrub-slider-thumb-border-radius: unset;
+  --scrub-slider-thumb-border-style: unset;
+  --scrub-slider-thumb-border-width: unset;
+  --scrub-slider-thumb-foreground-color: unset;
+  --scrub-slider-thumb-size: unset;
+  --scrub-slider-tick-bar-border-color: unset;
+  --scrub-slider-tick-bar-foreground-color: unset;
+  --scrub-slider-tick-bar-tick-height: unset;
+  --scrub-slider-tick-bar-tick-text-gap: unset;
+  --scrub-slider-tick-gap: unset;
+  --scrub-slider-tooltip-background-color: unset;
+  --scrub-slider-tooltip-border-color: unset;
+  --scrub-slider-tooltip-border-radius: unset;
+  --scrub-slider-tooltip-border-style: unset;
+  --scrub-slider-tooltip-border-width: unset;
+  --scrub-slider-tooltip-font-family: unset;
+  --scrub-slider-tooltip-font-letter-spacing: unset;
+  --scrub-slider-tooltip-font-line-height: unset;
+  --scrub-slider-tooltip-font-size: unset;
+  --scrub-slider-tooltip-font-text-decoration: unset;
+  --scrub-slider-tooltip-font-text-transform: unset;
+  --scrub-slider-tooltip-font-weight: unset;
+  --scrub-slider-tooltip-foreground-color: unset;
+  --scrub-slider-tooltip-gap: unset;
+  --scrub-slider-tooltip-padding-bottom: unset;
+  --scrub-slider-tooltip-padding-left: unset;
+  --scrub-slider-tooltip-padding-right: unset;
+  --scrub-slider-tooltip-padding-top: unset;
+  --scrub-slider-tooltip-shadow: unset;
+  --scrub-slider-tooltip-transition-duration: unset;
+  --scrub-slider-tooltip-transition-mode: unset;
+  --scrub-slider-tooltip-transition-property: unset;
+  --scrub-slider-track-size: unset;
+  --scrub-slider-transition-duration: unset;
+  --scrub-slider-transition-mode: unset;
+  --scrub-slider-transition-property: unset;
+  --scrub-slider-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  --height: 56px;
+  --center-width: 3px;
+  --tick-gap: 12px;
+  --tick-width: 2px;
+  --tick-color: #b9bcc2;
+  --tick-color-strong: #8b8f96;
+  --track-bg: #fff;
+  --center-color: #e53935;
+  --value-font: 700 48px / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--scrub-slider-font-family);
+  font-size: var(--scrub-slider-font-size);
+  line-height: var(--scrub-slider-font-line-height);
+  font-weight: var(--scrub-slider-font-weight);
+  letter-spacing: var(--scrub-slider-font-letter-spacing);
+  -webkit-text-decoration: var(--scrub-slider-font-text-decoration);
+  text-decoration: var(--scrub-slider-font-text-decoration);
+  text-transform: var(--scrub-slider-font-text-transform);
+  gap: var(--scrub-slider-gap);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  display: inline-flex;
+}
+
+:host [part="root"] {
+  width: 100%;
+}
+
+:host [part="value"] {
+  text-align: center;
+  font: var(--value-font);
+  color: #111;
+}
+
+:host [part="surface"] {
+  height: var(--height);
+  background: var(--track-bg);
+  cursor: ew-resize;
+  touch-action: none;
+  outline: none;
+  position: relative;
+}
+
+:host [part^="ticks"] {
+  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--tick-gap)  - var(--tick-width)), var(--tick-color) calc(var(--tick-gap)  - var(--tick-width)), var(--tick-color) var(--tick-gap));
+  background-size: var(--tick-gap) 100%;
+  background-repeat: repeat;
+  background-position: var(--tick-offset, 0px) 0;
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+}
+
+:host [part$="top"] {
+  opacity: .9;
+  height: 50%;
+  top: 0;
+}
+
+:host [part$="bottom"] {
+  opacity: .6;
+  height: 50%;
+  bottom: 0;
+}
+
+:host [part="center"] {
+  width: var(--center-width);
+  background: var(--center-color);
+  pointer-events: none;
+  border-radius: 1px;
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:host [part="labels"] {
+  color: #2b2d30;
+  opacity: .85;
+  place-items: center;
+  height: 24px;
+  font: 600 14px / 1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji;
+  display: grid;
+}
+
+:host .visually-hidden {
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  position: absolute !important;
+}
+
+:host(:focus-within) [part="surface"] {
+  box-shadow: inset 0 0 0 2px #0000000f;
+}
+
+:host(:hover) [part="tooltip"], :host([is-focused]) [part="tooltip"] {
+  opacity: 1;
+}
+
+:host([tick-placement="none"]) [part="ticks"] {
+  display: none;
+}
+
+:host([tooltip-placement="before"]) [part="tooltip"] {
+  inset-area: top span-all;
+  margin: 0 0 var(--slider-gap) 0;
+  inset-block-start: calc(var(--scrub-slider-thumb-size) / 2 + var(--scrub-slider-gap));
+}
+
+:host([tooltip-placement="after"]) [part="tooltip"] {
+  inset-area: bottom span-all;
+  margin: var(--slider-gap) 0 0 0;
+  inset-block-end: calc(var(--scrub-slider-thumb-size) / 2 + var(--scrub-slider-gap));
+}
+
+:host([track]) [part="input"]::-webkit-slider-thumb {
+  box-shadow: -407px 0 0 400px #f50;
+}
+
+:host([track]) [part="input"]::-moz-range-thumb {
+  box-shadow: -407px 0 0 400px #f50;
+}
+
+    `;
+}
+//# sourceMappingURL=ScrubSliderElement.Cosmopolitan.js.map

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubSliderElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+NT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function scrubSliderElementJoyStyle(): CSSResult;
+//# sourceMappingURL=ScrubSliderElement.Joy.d.ts.map

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubSliderElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CA4NtD"}

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.js

@@ -0,0 +1,234 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function scrubSliderElementJoyStyle() {
+    return css `
+:host {
+  --scrub-slider-background-color: var(--joy-scheme-transparent);
+  --scrub-slider-border-color: var(--joy-scheme-highlight);
+  --scrub-slider-border-radius: var(--joy-layout-radius);
+  --scrub-slider-border-style: solid;
+  --scrub-slider-border-width: var(--joy-layout-thickness);
+  --scrub-slider-font-family: var(--joy-font-family);
+  --scrub-slider-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
+  --scrub-slider-font-line-height: var(--joy-typography-body1-line-height);
+  --scrub-slider-font-size: var(--joy-typography-body1-font-size);
+  --scrub-slider-font-text-decoration: var(--joy-typography-body1-text-decoration);
+  --scrub-slider-font-text-transform: var(--joy-typography-body1-text-transform);
+  --scrub-slider-font-weight: var(--joy-typography-body1-font-weight);
+  --scrub-slider-foreground-color: var(--joy-scheme-foreground);
+  --scrub-slider-gap: var(--joy-layout-space);
+  --scrub-slider-padding-bottom: 0;
+  --scrub-slider-padding-left: 0;
+  --scrub-slider-padding-right: 0;
+  --scrub-slider-padding-top: 0;
+  --scrub-slider-shadow: var(--joy-elevation-none);
+  --scrub-slider-thumb-background-color: var(--joy-scheme-transparent);
+  --scrub-slider-thumb-border-color: var(--joy-scheme-transparent);
+  --scrub-slider-thumb-border-radius: var(--joy-layout-radius);
+  --scrub-slider-thumb-border-style: solid;
+  --scrub-slider-thumb-border-width: var(--joy-layout-thickness);
+  --scrub-slider-thumb-foreground-color: var(--joy-scheme-highlight);
+  --scrub-slider-thumb-size: 18px;
+  --scrub-slider-tick-gap: 0px;
+  --scrub-slider-tooltip-background-color: var(--joy-scheme-highlight);
+  --scrub-slider-tooltip-border-color: var(--joy-scheme-highlight);
+  --scrub-slider-tooltip-border-radius: var(--joy-layout-radius);
+  --scrub-slider-tooltip-border-style: none;
+  --scrub-slider-tooltip-border-width: 0px;
+  --scrub-slider-tooltip-font-family: var(--joy-font-family);
+  --scrub-slider-tooltip-font-letter-spacing: var(--joy-typography-body2-letter-spacing);
+  --scrub-slider-tooltip-font-line-height: var(--joy-typography-body2-line-height);
+  --scrub-slider-tooltip-font-size: var(--joy-typography-body2-font-size);
+  --scrub-slider-tooltip-font-text-decoration: var(--joy-typography-body2-text-decoration);
+  --scrub-slider-tooltip-font-text-transform: var(--joy-typography-body2-text-transform);
+  --scrub-slider-tooltip-font-weight: var(--joy-typography-body2-font-weight);
+  --scrub-slider-tooltip-foreground-color: var(--joy-scheme-foreground);
+  --scrub-slider-tooltip-gap: var(--joy-layout-space);
+  --scrub-slider-tooltip-padding-bottom: var(--joy-layout-space);
+  --scrub-slider-tooltip-padding-left: var(--joy-layout-space);
+  --scrub-slider-tooltip-padding-right: var(--joy-layout-space);
+  --scrub-slider-tooltip-padding-top: var(--joy-layout-space);
+  --scrub-slider-tooltip-shadow: var(--joy-elevation-light);
+  --scrub-slider-tooltip-transition-duration: var(--joy-duration-short);
+  --scrub-slider-tooltip-transition-mode: ease;
+  --scrub-slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
+  --scrub-slider-track-size: 4px;
+  --scrub-slider-transition-duration: var(--joy-duration-short);
+  --scrub-slider-transition-mode: ease;
+  --scrub-slider-transition-property: background-color, color, border-color, opacity, transform;
+  --scrub-slider-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  --height: 56px;
+  --center-width: 3px;
+  --tick-gap: 12px;
+  --tick-width: 2px;
+  --tick-color: #b9bcc2;
+  --tick-color-strong: #8b8f96;
+  --track-bg: #fff;
+  --center-color: #e53935;
+  --value-font: 700 48px / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--scrub-slider-font-family);
+  font-size: var(--scrub-slider-font-size);
+  line-height: var(--scrub-slider-font-line-height);
+  font-weight: var(--scrub-slider-font-weight);
+  letter-spacing: var(--scrub-slider-font-letter-spacing);
+  -webkit-text-decoration: var(--scrub-slider-font-text-decoration);
+  text-decoration: var(--scrub-slider-font-text-decoration);
+  text-transform: var(--scrub-slider-font-text-transform);
+  gap: var(--scrub-slider-gap);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  display: inline-flex;
+}
+
+:host [part="root"] {
+  width: 100%;
+}
+
+:host [part="value"] {
+  text-align: center;
+  font: var(--value-font);
+  color: #111;
+}
+
+:host [part="surface"] {
+  height: var(--height);
+  background: var(--track-bg);
+  cursor: ew-resize;
+  touch-action: none;
+  outline: none;
+  position: relative;
+}
+
+:host [part^="ticks"] {
+  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--tick-gap)  - var(--tick-width)), var(--tick-color) calc(var(--tick-gap)  - var(--tick-width)), var(--tick-color) var(--tick-gap));
+  background-size: var(--tick-gap) 100%;
+  background-repeat: repeat;
+  background-position: var(--tick-offset, 0px) 0;
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+}
+
+:host [part$="top"] {
+  opacity: .9;
+  height: 50%;
+  top: 0;
+}
+
+:host [part$="bottom"] {
+  opacity: .6;
+  height: 50%;
+  bottom: 0;
+}
+
+:host [part="center"] {
+  width: var(--center-width);
+  background: var(--center-color);
+  pointer-events: none;
+  border-radius: 1px;
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:host [part="labels"] {
+  color: #2b2d30;
+  opacity: .85;
+  place-items: center;
+  height: 24px;
+  font: 600 14px / 1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji;
+  display: grid;
+}
+
+:host .visually-hidden {
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  position: absolute !important;
+}
+
+:host(:focus-within) [part="surface"] {
+  box-shadow: inset 0 0 0 2px #0000000f;
+}
+
+:host(:hover) [part="tooltip"], :host([is-focused]) [part="tooltip"] {
+  opacity: 1;
+}
+
+:host([tick-placement="none"]) [part="ticks"] {
+  display: none;
+}
+
+:host([tooltip-placement="before"]) [part="tooltip"] {
+  inset-area: top span-all;
+  margin: 0 0 var(--slider-gap) 0;
+  inset-block-start: calc(var(--scrub-slider-thumb-size) / 2 + var(--scrub-slider-gap));
+}
+
+:host([tooltip-placement="after"]) [part="tooltip"] {
+  inset-area: bottom span-all;
+  margin: var(--slider-gap) 0 0 0;
+  inset-block-end: calc(var(--scrub-slider-thumb-size) / 2 + var(--scrub-slider-gap));
+}
+
+:host([track]) [part="input"]::-webkit-slider-thumb {
+  box-shadow: -407px 0 0 400px #f50;
+}
+
+:host([track]) [part="input"]::-moz-range-thumb {
+  box-shadow: -407px 0 0 400px #f50;
+}
+
+    `;
+}
+//# sourceMappingURL=ScrubSliderElement.Joy.js.map

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubSliderElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0NT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Retro.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function scrubSliderElementRetroStyle(): CSSResult;
+//# sourceMappingURL=ScrubSliderElement.Retro.d.ts.map

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Retro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubSliderElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAiOxD"}