@trebired/frontend 23.2.0 → 25.0.0

package/dist/layout/styles/site-header.scss

@@ -1,10 +1,16 @@
 @use "@trebired/bundler/namespace" as ns;
+@use "./../../styles/utils/tone" as tone;
 
 @function token($name, $fallback) {
   @return var(#{ns.css-var("shell-header-" + $name)}, $fallback);
 }
 
 $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.22, 1, 0.36, 1));
+$tone-motion: token("tone-duration", 320ms) token("tone-easing", cubic-bezier(0.22, 1, 0.36, 1));
+
+:root {
+  #{ns.css-var("shell-header-height")}: 5rem;
+}
 
 #{ns.data("site-header-root")} {
   display: contents;
@@ -15,24 +21,17 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   inset-inline: 0;
   inset-block-start: 0;
   z-index: token("root-z-index", var(#{ns.css-var("z-header")}, 920));
-  color: token("root-color", var(#{ns.css-var("adaptive")}, currentColor));
-  border-block-end: token("root-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
-  background: var(#{ns.css-var("glass-bg")}, token("root-bg", var(#{ns.css-var("page")}, #fff)));
-}
-
-#{ns.data("site-header")}::before {
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  -webkit-backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  content: "";
-  pointer-events: none;
+  color: token("root-color", var(#{ns.css-var("text")}, currentColor));
+  border-block-end: token("root-border", 1px solid color-mix(in srgb, currentColor 14%, transparent));
+  #{ns.css-var("shell-header-surface")}: token("root-bg", var(#{ns.css-var("page")}, #fff));
+  background: var(#{ns.css-var("shell-header-surface")});
+  transition:
+  color $tone-motion,
+  border-color $tone-motion,
+  background-color $tone-motion;
 }
 
-#{ns.element-class("site-header", "bar")},
-
-#{ns.element-class("site-header", "menu-content")} {
+#{ns.element-class("site-header", "bar")} {
   width: 100%;
   max-width: token("max-width", 72rem);
   box-sizing: border-box;
@@ -43,7 +42,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 #{ns.element-class("site-header", "bar")} {
   position: relative;
   display: flex;
-  min-height: 5rem;
+  min-height: var(#{ns.css-var("shell-header-height")});
   align-items: center;
   justify-content: space-between;
   gap: token("gap", 1rem);
@@ -56,7 +55,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   flex: 0 1 auto;
   align-items: center;
   gap: token("brand-gap", 0.75rem);
-  color: token("brand-color", var(#{ns.css-var("adaptive")}, currentColor));
+  color: token("brand-color", var(#{ns.css-var("text")}, currentColor));
   font-family: token("brand-font-family", inherit);
   font-size: token("brand-font-size", 1.125rem);
   font-weight: token("brand-font-weight", 700);
@@ -78,6 +77,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   object-fit: contain;
 }
 
+#{ns.element-class("site-header", "brand")} #{ns.class("logo")} img {
+  height: 100%;
+  max-width: 100%;
+}
+
 #{ns.element-class("site-header", "nav")},
 
 #{ns.element-class("site-header", "actions")} {
@@ -90,6 +94,22 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   gap: token("nav-gap", 0.25rem);
 }
 
+#{ns.element-class("site-header", "nav")} #{ns.element-class("site-header", "link")},
+
+#{ns.element-class("site-header", "nav")} #{ns.element-class("site-header", "nav-trigger")} {
+  white-space: nowrap;
+}
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "nav")},
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "actions")} {
+  display: none;
+}
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "toggle")} {
+  display: inline-flex;
+}
+
 #{ns.element-class("site-header", "actions")} {
   flex: 0 0 auto;
   gap: token("actions-gap", 0.5rem);
@@ -100,15 +120,14 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 }
 
 #{ns.element-class("site-header", "link")} {
-  color: token("link-color", var(#{ns.css-var("adaptive-muted")}, currentColor));
   font-size: 0.875rem;
   font-weight: token("link-font-weight", 500);
   letter-spacing: token("link-letter-spacing", normal);
   text-decoration: none;
   text-transform: token("link-text-transform", none);
   transition:
-  background-color var(#{ns.css-var("transition-fast")}, 160ms) ease,
-  color var(#{ns.css-var("transition-fast")}, 160ms) ease;
+  color var(#{ns.css-var("tone-change")}),
+  background-color var(#{ns.css-var("transition-fast")}, 160ms) ease;
 }
 
 #{ns.element-class("site-header", "link")} {
@@ -116,8 +135,34 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   border-radius: token("link-radius", 0.5rem);
 }
 
+#{ns.element-class("site-header", "nav-trigger")},
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")} {
+  padding: token("link-padding", 0.5rem 0.75rem);
+  border: 0;
+  border-radius: token("link-radius", 0.5rem);
+  color: token("link-color", currentColor);
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: token("link-font-weight", 500);
+  letter-spacing: token("link-letter-spacing", normal);
+  text-transform: token("link-text-transform", none);
+  transition:
+  color var(#{ns.css-var("tone-change")}),
+  background-color var(#{ns.css-var("transition-fast")}, 160ms) ease;
+}
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")}:hover,
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")}[aria-expanded="true"],
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")}[aria-current="true"] {
+  color: token("link-hover-color", var(#{ns.css-var("text")}, currentColor));
+  background: token("link-hover-bg", transparent);
+}
+
 #{ns.element-class("site-header", "link")}:hover {
-  color: token("link-hover-color", var(#{ns.css-var("adaptive")}, currentColor));
+  color: token("link-hover-color", var(#{ns.css-var("text")}, currentColor));
   background: token("link-hover-bg", transparent);
 }
 
@@ -125,9 +170,26 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   color: token("link-active-color", token("link-hover-color", var(#{ns.css-var("text")}, #000)));
   background: token("link-active-bg", token("link-hover-bg", transparent));
   font-weight: token("link-active-font-weight", token("link-font-weight", 500));
-  text-decoration: token("link-active-text-decoration", none);
-  text-decoration-color: token("link-active-text-decoration-color", currentColor);
-  text-underline-offset: token("link-active-text-underline-offset", 0.25rem);
+  text-decoration: token("link-active-decoration", none);
+  text-decoration-color: token("link-active-decoration-color", currentColor);
+  text-underline-offset: token("link-active-underline-offset", 0.25rem);
+}
+
+#{ns.element-class("site-header", "nav-trigger")} #{ns.element-class("site-header", "link-label")} {
+  color: color-mix(in srgb, currentColor 78%, transparent);
+}
+
+#{ns.element-class("site-header", "nav-trigger")}:hover #{ns.element-class("site-header", "link-label")},
+
+#{ns.element-class("site-header", "nav-trigger")}[aria-expanded="true"] #{ns.element-class("site-header", "link-label")},
+
+#{ns.element-class("site-header", "nav-trigger")}[aria-current="true"] #{ns.element-class("site-header", "link-label")} {
+  color: currentColor;
+}
+
+#{ns.element-class("site-header", "link-label")} {
+  display: inline-block;
+  position: relative;
 }
 
 #{ns.element-class("site-header", "toggle")} {
@@ -141,7 +203,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   margin-inline-end: token("toggle-offset", -0.5rem);
   border: 0;
   border-radius: token("toggle-radius", 0.5rem);
-  color: token("toggle-color", var(#{ns.css-var("adaptive")}, currentColor));
+  color: token("toggle-color", var(#{ns.css-var("text")}, currentColor));
   background: transparent;
   font-size: 2rem;
   cursor: pointer;
@@ -193,115 +255,24 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   transform: rotate(-45deg);
 }
 
-#{ns.element-class("site-header", "menu")} {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-start: 100%;
-  display: grid;
-  grid-template-rows: 0fr;
-  color: token("menu-color", var(#{ns.css-var("adaptive")}, currentColor));
-  border-block-end: token("menu-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
-  background: var(#{ns.css-var("glass-bg")}, token("menu-bg", var(#{ns.css-var("page")}, #fff)));
-  backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  -webkit-backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  box-shadow: token("menu-shadow", 0 24px 32px -24px rgb(0 0 0 / 18%));
-  opacity: 0;
-  visibility: hidden;
-  transition:
-  grid-template-rows $motion,
-  opacity $motion,
-  visibility 0s linear token("motion-duration", 500ms);
-}
-
-#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu")} {
-  grid-template-rows: 1fr;
-  opacity: 1;
-  visibility: visible;
-  transition:
-  grid-template-rows $motion,
-  opacity $motion,
-  visibility 0s;
-}
-
-#{ns.element-class("site-header", "menu-body")} {
-  min-height: 0;
-  max-height: calc(100dvh - 5rem);
-  overflow: hidden;
-}
-
-#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu-body")} {
-  overflow-y: auto;
-}
-
-#{ns.element-class("site-header", "menu-content")} {
-  display: flex;
-  flex-direction: column;
-  gap: token("menu-gap", 1rem);
-  padding-block: token("menu-py", 1.5rem);
-  opacity: 0;
-  transform: translateY(-1rem);
-  transition: opacity $motion, transform $motion;
-}
-
-#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu-content")} {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-#{ns.element-class("site-header", "menu-links")} {
-  display: flex;
-  flex-direction: column;
-  gap: token("menu-links-gap", 0.25rem);
-}
-
-#{ns.element-class("site-header", "menu-footer")} {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: token("menu-footer-gap", 0.75rem);
-  padding-block-start: token("menu-gap", 1rem);
-  border-block-start: token("menu-footer-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
-}
-
-@media (min-width: 768px) {
-  #{ns.element-class("site-header", "bar")},
-  #{ns.element-class("site-header", "menu-content")} {
-    padding-inline: 1rem;
-  }
-
-  #{ns.element-class("site-header", "nav")},
-  #{ns.element-class("site-header", "actions")} {
-    display: flex;
-  }
-
-  #{ns.element-class("site-header", "toggle")},
-  #{ns.element-class("site-header", "menu")} {
-    display: none;
-  }
-}
-
 #{ns.class("site-header-brand-button")},
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")} {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
-  gap: var(#{ns.css-var("shell-header-brand-button-gap")}, 8px);
+  gap: var(#{ns.css-var("shell-header-brand-btn-gap")}, 8px);
   min-width: 0;
   min-height: 0;
   height: auto;
   border: 0;
-  border-radius: var(#{ns.css-var("shell-header-brand-button-radius")}, var(#{ns.css-var("radius-sm")}, 0));
+  border-radius: var(#{ns.css-var("shell-header-brand-btn-radius")}, var(#{ns.css-var("radius-sm")}, 0));
   padding-block: 4px;
   padding-inline: 0;
   background: transparent;
-  color: var(
-    #{ns.css-var("shell-header-brand-button-color")},
-    color-mix(in srgb, var(#{ns.css-var("adaptive")}, currentColor) 74%, transparent)
-  );
+  color: var(#{ns.css-var("shell-header-brand-btn-color")}, currentColor);
+  transition: color var(#{ns.css-var("tone-change")});
   cursor: pointer;
-  transition: color 0.22s ease;
 }
 
 #{ns.class("site-header-brand-button")}:hover,
@@ -315,7 +286,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 #{ns.class("button")}#{ns.class("site-header-brand-button")}:focus-visible,
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
-  color: var(#{ns.css-var("shell-header-brand-button-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
+  color: var(#{ns.css-var("shell-header-brand-btn-hover-color")}, currentColor);
 }
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}:hover,
@@ -324,10 +295,23 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
   border-color: transparent;
-  background: var(#{ns.css-var("shell-header-brand-button-hover-bg")}, transparent);
+  background: var(#{ns.css-var("shell-header-brand-btn-hover-bg")}, transparent);
 }
 
 #{ns.class("site-header-brand-button")}:focus-visible {
   outline: var(#{ns.css-var("border-width")}, 1px) solid color-mix(in srgb, currentColor 35%, transparent);
   outline-offset: 0.2rem;
 }
+
+body:has(main > #{ns.data("dark")}:first-child) #{ns.data("site-header")}:not(#{ns.data("site-header-live")}),
+
+#{ns.data("site-header")}#{ns.data("dark")} {
+  @include tone.on-dark;
+  #{ns.css-var("shell-header-surface")}: token("root-bg-dark", var(#{ns.css-var("ink")}, #000));
+}
+
+@media (min-width: 768px) {
+  #{ns.element-class("site-header", "bar")} {
+    padding-inline: 1rem;
+  }
+}

package/dist/layout/styles/site-link.scss

@@ -0,0 +1,61 @@
+@use "@trebired/bundler/namespace" as ns;
+
+#{ns.class("site-link")} {
+  width: fit-content;
+  color: var(#{ns.css-var("shell-link-color")}, currentColor);
+  text-decoration-line: var(#{ns.css-var("shell-link-decoration-line")}, none);
+  transition:
+  color var(#{ns.css-var("tone-change")}),
+  background-color var(#{ns.css-var("transition-fast")}, 180ms) var(#{ns.css-var("transition-easing")}, ease);
+}
+
+#{ns.class("site-link--active")} {
+  color: var(#{ns.css-var("shell-link-active-color")}, var(#{ns.css-var("text")}, currentColor));
+}
+
+#{ns.class("site-link")}:hover,
+
+#{ns.class("site-link")}:focus-visible {
+  color: var(#{ns.css-var("shell-link-hover-color")}, var(#{ns.css-var("text")}, currentColor));
+}
+
+#{ns.class("site-link-label")} {
+  display: inline-block;
+  position: relative;
+  color: color-mix(in srgb, currentColor 78%, transparent);
+}
+
+#{ns.class("site-link")}:hover #{ns.class("site-link-label")},
+
+#{ns.class("site-link")}:focus-visible #{ns.class("site-link-label")},
+
+#{ns.class("site-link--active")} #{ns.class("site-link-label")} {
+  color: currentColor;
+}
+
+#{ns.class("site-link-label")}::after {
+  position: absolute;
+  inset-inline: 0;
+  bottom: var(#{ns.css-var("shell-link-underline-offset")}, -0.35rem);
+  height: var(#{ns.css-var("shell-link-underline-radius")}, 0.3rem);
+  border-block-end-style: solid;
+  border-block-end-width: var(#{ns.css-var("shell-link-underline-height")}, 1px);
+  border-block-end-color: var(#{ns.css-var("shell-link-underline-hover-color")}, currentColor);
+  border-end-end-radius: var(#{ns.css-var("shell-link-underline-radius")}, 0.3rem);
+  border-end-start-radius: var(#{ns.css-var("shell-link-underline-radius")}, 0.3rem);
+  clip-path: inset(0 100% 0 0);
+  content: "";
+  transition: clip-path var(#{ns.css-var("shell-link-underline-duration")}, 0.3s) ease;
+}
+
+#{ns.class("site-link")}:hover #{ns.class("site-link-label")}::after,
+
+#{ns.class("site-link")}:focus-visible #{ns.class("site-link-label")}::after,
+
+#{ns.class("site-link--active")} #{ns.class("site-link-label")}::after {
+  clip-path: inset(0 0 0 0);
+}
+
+#{ns.class("site-link--active")} #{ns.class("site-link-label")}::after {
+  border-block-end-color: var(#{ns.css-var("shell-link-underline-color")}, currentColor);
+}

package/dist/media/carousel-state.d.ts

@@ -7,7 +7,8 @@ type CarouselState = {
     showPrevious: () => void;
 };
 declare function prefersReducedMotion(): boolean;
+declare function useMotionPreference(): boolean;
 declare function useCarouselState(length: number, intervalMs: number): CarouselState;
-export { prefersReducedMotion, useCarouselState };
+export { prefersReducedMotion, useCarouselState, useMotionPreference };
 export type { CarouselState };
 //# sourceMappingURL=carousel-state.d.ts.map

package/dist/media/carousel-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-state.d.ts","sourceRoot":"","sources":["../../../src/media/carousel-state.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,iBAAS,oBAAoB,IAAI,OAAO,CAOvC;AAED,iBAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,aAAa,CA+B3E;AAED,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"carousel-state.d.ts","sourceRoot":"","sources":["../../../src/media/carousel-state.ts"],"names":[],"mappings":"AAGA,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,iBAAS,oBAAoB,IAAI,OAAO,CAMvC;AAED,iBAAS,mBAAmB,IAAI,OAAO,CAWtC;AAED,iBAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,aAAa,CAgC3E;AAED,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;AACvE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/media/carousel-state.js

@@ -1,17 +1,27 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { A11Y_CHANGE_EVENT, motionReduced } from "./../a11y/attributes.js";
 function prefersReducedMotion() {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
-        return false;
     try {
-        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        return motionReduced();
     }
     catch {
         return false;
     }
 }
+function useMotionPreference() {
+    const [reduced, setReduced] = useState(prefersReducedMotion);
+    useEffect(() => {
+        const sync = () => setReduced(prefersReducedMotion());
+        sync();
+        document.addEventListener(A11Y_CHANGE_EVENT, sync);
+        return () => document.removeEventListener(A11Y_CHANGE_EVENT, sync);
+    }, []);
+    return reduced;
+}
 function useCarouselState(length, intervalMs) {
     const [activeIndex, setActiveIndex] = useState(0);
     const [paused, setPaused] = useState(false);
+    const reducedMotion = useMotionPreference();
     const timer = useRef(undefined);
     const showNext = useCallback(() => {
         setActiveIndex((current) => (length ? (current + 1) % length : 0));
@@ -23,11 +33,11 @@ function useCarouselState(length, intervalMs) {
         setActiveIndex(() => Math.min(Math.max(index, 0), Math.max(length - 1, 0)));
     }, [length]);
     useEffect(() => {
-        if (paused || length < 2 || intervalMs <= 0 || prefersReducedMotion())
+        if (paused || length < 2 || intervalMs <= 0 || reducedMotion)
             return undefined;
         timer.current = window.setInterval(showNext, intervalMs);
         return () => window.clearInterval(timer.current);
-    }, [activeIndex, intervalMs, length, paused, showNext]);
+    }, [activeIndex, intervalMs, length, paused, reducedMotion, showNext]);
     return {
         activeIndex: Math.min(activeIndex, Math.max(length - 1, 0)),
         onEnter: () => setPaused(true),
@@ -37,5 +47,5 @@ function useCarouselState(length, intervalMs) {
         showPrevious,
     };
 }
-export { prefersReducedMotion, useCarouselState };
+export { prefersReducedMotion, useCarouselState, useMotionPreference };
 //# sourceMappingURL=carousel-state.js.map

package/dist/media/carousel-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-state.js","sourceRoot":"","sources":["../../../src/media/carousel-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWjE,SAAS,oBAAoB;IAC3B,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;QAAE,OAAO,KAAK,CAAC;IAC3F,IAAI,CAAC;QACH,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;IACvE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC;AAED,SAAS,gBAAgB,CAAC,MAAc,EAAE,UAAkB;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,MAAM,CAAmB,SAAS,CAAC,CAAC;IAElD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEf,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACzC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,oBAAoB,EAAE;YAAE,OAAO,SAAS,CAAC;QACxF,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACzD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1D,OAAO;QACL,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3D,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;QAC/B,MAAM;QACN,QAAQ;QACR,YAAY;KACb,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"carousel-state.js","sourceRoot":"","sources":["../../../src/media/carousel-state.ts"],"names":[],"mappings":"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"}

package/dist/media/styles/carousel.scss

@@ -1,4 +1,5 @@
 @use "@trebired/bundler/namespace" as ns;
+@use "../../a11y/styles/_motion.scss" as motion;
 
 $bottom: ns.modifier("carousel", "controls-bottom");
 
@@ -131,7 +132,7 @@ $bottom: ns.modifier("carousel", "controls-bottom");
   background: oklch(100% 0 0 / 100%);
 }
 
-@media (prefers-reduced-motion: reduce) {
+@include motion.reduced-motion {
   #{ns.class("carousel-slide")} {
     transition: none;
   }

package/dist/money/config.d.ts

@@ -0,0 +1,15 @@
+type FrontendMoneyRound = "down" | "near" | "up";
+type FrontendMoneyRuntimeConfig = {
+    base: string;
+    locales: Record<string, string>;
+    rates: Record<string, number>;
+    steps: Record<string, number>;
+};
+declare const MONEY_CONFIG_ATTR: `data-${string}`;
+declare const DEFAULT_MONEY_BASE = "CZK";
+declare const DEFAULT_MONEY_LOCALES: Record<string, string>;
+declare function configureFrontendMoney(value: unknown): FrontendMoneyRuntimeConfig;
+declare function getFrontendMoney(): FrontendMoneyRuntimeConfig;
+export { configureFrontendMoney, DEFAULT_MONEY_BASE, DEFAULT_MONEY_LOCALES, getFrontendMoney, MONEY_CONFIG_ATTR, };
+export type { FrontendMoneyRound, FrontendMoneyRuntimeConfig };
+//# sourceMappingURL=config.d.ts.map

package/dist/money/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/money/config.ts"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AAEjD,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,iBAAiB,kBAAmC,CAAC;AAE3D,QAAA,MAAM,kBAAkB,QAAQ,CAAC;AAEjC,QAAA,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQjD,CAAC;AA0CF,iBAAS,sBAAsB,CAAC,KAAK,EAAE,OAAO,GAAG,0BAA0B,CAG1E;AAaD,iBAAS,gBAAgB,IAAI,0BAA0B,CAKtD;AAED,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,GAClB,CAAC;AACF,YAAY,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,CAAC"}

package/dist/money/config.js

@@ -0,0 +1,79 @@
+import { frontendDataAttr } from "./../namespace/index.js";
+const MONEY_CONFIG_ATTR = frontendDataAttr("money-config");
+const DEFAULT_MONEY_BASE = "CZK";
+const DEFAULT_MONEY_LOCALES = {
+    cs: "CZK",
+    de: "EUR",
+    en: "EUR",
+    hu: "HUF",
+    pl: "PLN",
+    sk: "EUR",
+    uk: "UAH",
+};
+const EMPTY = {
+    base: DEFAULT_MONEY_BASE,
+    locales: DEFAULT_MONEY_LOCALES,
+    rates: {},
+    steps: {},
+};
+let configured = null;
+function numbersOf(value) {
+    if (!value || typeof value !== "object")
+        return {};
+    const out = {};
+    for (const [key, entry] of Object.entries(value)) {
+        const amount = Number(entry);
+        if (Number.isFinite(amount) && amount > 0)
+            out[key.trim().toUpperCase()] = amount;
+    }
+    return out;
+}
+function localesOf(value) {
+    if (!value || typeof value !== "object")
+        return DEFAULT_MONEY_LOCALES;
+    const out = {};
+    for (const [key, entry] of Object.entries(value)) {
+        const code = String(entry || "").trim().toUpperCase();
+        if (code)
+            out[key.trim().toLowerCase()] = code;
+    }
+    return Object.keys(out).length ? out : DEFAULT_MONEY_LOCALES;
+}
+function normalize(value) {
+    if (!value || typeof value !== "object")
+        return EMPTY;
+    const source = value;
+    return {
+        base: String(source.base || DEFAULT_MONEY_BASE).trim().toUpperCase(),
+        locales: localesOf(source.locales),
+        rates: numbersOf(source.rates),
+        steps: numbersOf(source.steps),
+    };
+}
+function configureFrontendMoney(value) {
+    configured = normalize(value);
+    return configured;
+}
+function readDocumentMoney() {
+    if (typeof document === "undefined")
+        return null;
+    const raw = document.documentElement.getAttribute(MONEY_CONFIG_ATTR);
+    if (!raw)
+        return null;
+    try {
+        return normalize(JSON.parse(raw));
+    }
+    catch {
+        return null;
+    }
+}
+function getFrontendMoney() {
+    if (configured)
+        return configured;
+    const fromDocument = readDocumentMoney();
+    if (fromDocument)
+        configured = fromDocument;
+    return configured || EMPTY;
+}
+export { configureFrontendMoney, DEFAULT_MONEY_BASE, DEFAULT_MONEY_LOCALES, getFrontendMoney, MONEY_CONFIG_ATTR, };
+//# sourceMappingURL=config.js.map

package/dist/money/config.js.map

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

package/dist/money/format.d.ts

@@ -0,0 +1,12 @@
+import { type FrontendMoneyRound } from "./config.js";
+type MoneyOptions = {
+    currency?: string;
+    round?: FrontendMoneyRound;
+    step?: number;
+};
+declare function moneyCurrencyFor(lang: string): string;
+declare function convertMoney(amount: number, lang: string, options?: MoneyOptions): number;
+declare function formatMoney(amount: number, lang: string, options?: MoneyOptions): string;
+export { convertMoney, formatMoney, moneyCurrencyFor };
+export type { MoneyOptions };
+//# sourceMappingURL=format.d.ts.map

package/dist/money/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/money/format.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,iBAAS,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI9C;AA6BD,iBAAS,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAOtF;AAOD,iBAAS,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAarF;AAED,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,CAAC"}