@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/sidebar/sidebar.schema.js

@@ -30,7 +30,7 @@ var schema = {
       type: "boolean",
       description: "Whether the sidebar is collapsed. Bindable via `bind:collapsed`. Default `false`.\n\nOn desktop (>= md breakpoint) `collapsed=true` switches the sidebar to\nicon-only mode. Below the md breakpoint the sidebar renders inside a\n`<Drawer>` and `collapsed=true` means the drawer is closed."
     },
-    ariaLabel: {
+    label: {
       type: "string",
       description: "Accessible name for the outer landmark and the mobile drawer. Required —\ndefaults to `'Sidebar'` for convenience but must be unique per page. The\ninner `<nav>` landmark derives its own accessible name from this value\nby appending `' navigation'` so screen readers can distinguish the\nouter complementary region from the inner navigation region."
     },
@@ -65,4 +65,4 @@ export {
   sidebar_schema_default as default
 };
 
-//# debugId=37127B50C71CA2A864756E2164756E21
+//# debugId=BA2701765A21496E64756E2164756E21

package/dist/components/sidebar/sidebar.types.d.ts

@@ -17,7 +17,7 @@ export type SidebarProps = Omit<HTMLAttributes<HTMLElement>, 'aria-label' | 'ari
      * by appending `' navigation'` so screen readers can distinguish the
      * outer complementary region from the inner navigation region.
      */
-    ariaLabel?: string;
+    label?: string;
     /** Additional CSS class merged with `.cinder-sidebar`. */
     class?: string;
     /** Optional branding region rendered above the navigation. */

package/dist/components/slider/index.js

@@ -50,6 +50,185 @@ function setFormFieldContext(context) {
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/_internal/locale-context.ts
+import { createContext as createContext2 } from "svelte";
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext2();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
+// src/_internal/text-direction.ts
+function resolveTextDirection(element, fallback) {
+  let currentElement = element ?? null;
+  let documentDirection;
+  let styledDirectionElement = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute("dir")?.toLowerCase();
+    if (direction === "rtl" || direction === "ltr") {
+      if (typeof getComputedStyle === "function" && styledDirectionElement) {
+        const styledDirection2 = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection2 === "rtl" || styledDirection2 === "ltr")
+          return styledDirection2;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === "auto" && typeof getComputedStyle === "function") {
+      const computedDirection2 = getComputedStyle(currentElement).direction;
+      if (computedDirection2 === "rtl" || computedDirection2 === "ltr")
+        return computedDirection2;
+    }
+    const styledDirection = currentElement.style.direction;
+    if (!styledDirectionElement && (styledDirection === "rtl" || styledDirection === "ltr")) {
+      styledDirectionElement = currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  if (typeof getComputedStyle === "function" && styledDirectionElement) {
+    const direction = getComputedStyle(styledDirectionElement).direction;
+    if (direction === "rtl" || direction === "ltr")
+      return direction;
+  }
+  const computedDirection = readComputedTextDirection(element);
+  const rootComputedDirection = readComputedTextDirection(element?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection)
+    return computedDirection;
+  if (computedDirection && fallback && computedDirection !== fallback && hasDirectionStylingHint(element)) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === "rtl")
+    return computedDirection;
+  if (fallback)
+    return fallback;
+  if (documentDirection)
+    return documentDirection;
+  return;
+}
+function readComputedTextDirection(element) {
+  if (!element || typeof getComputedStyle !== "function")
+    return;
+  const direction = getComputedStyle(element).direction;
+  return direction === "rtl" || direction === "ltr" ? direction : undefined;
+}
+function hasDirectionStylingHint(element) {
+  let currentElement = element?.parentElement;
+  while (currentElement && currentElement !== currentElement.ownerDocument.documentElement) {
+    if (currentElement.style.direction)
+      return true;
+    if (matchesDirectionStyleRule(currentElement))
+      return true;
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function matchesDirectionStyleRule(element) {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules))
+      return true;
+  }
+  return false;
+}
+function matchesDirectionStyleRuleList(element, rules) {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules2 = readNestedCssRules(rule);
+        if (nestedRules2 && matchesDirectionStyleRuleList(element, nestedRules2))
+          return true;
+        continue;
+      }
+      try {
+        if (element.matches(rule.selectorText))
+          return true;
+      } catch {
+        continue;
+      }
+    }
+    const nestedRules = readNestedCssRules(rule);
+    if (nestedRules && isConditionalRuleActive(rule) && matchesDirectionStyleRuleList(element, nestedRules)) {
+      return true;
+    }
+  }
+  return false;
+}
+function readNestedCssRules(rule) {
+  if (!("cssRules" in rule))
+    return;
+  try {
+    const nestedRules = Reflect.get(rule, "cssRules");
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return;
+  }
+}
+function isCssRuleCollection(value) {
+  if (typeof CSSRuleList !== "undefined" && value instanceof CSSRuleList)
+    return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+function isCssRule(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "cssText") === "string" && typeof Reflect.get(value, "type") === "number";
+}
+function isCssStyleRule(rule) {
+  return typeof Reflect.get(rule, "selectorText") === "string" && typeof Reflect.get(rule, "style") === "object" && Reflect.get(rule, "style") !== null;
+}
+function isConditionalRuleActive(rule) {
+  const conditionText = Reflect.get(rule, "conditionText");
+  if (typeof conditionText !== "string" || !conditionText.trim())
+    return true;
+  if (isMediaRule(rule) && typeof matchMedia === "function") {
+    return matchMedia(conditionText).matches;
+  }
+  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports(conditionText);
+  }
+  return true;
+}
+function isMediaRule(rule) {
+  return typeof Reflect.get(rule, "media") === "object" && Reflect.get(rule, "media") !== null;
+}
+function isSupportsRule(rule) {
+  return rule.constructor.name === "CSSSupportsRule" || Reflect.get(rule, "type") === 12;
+}
+function observeTextDirection(element, onChange) {
+  if (!element || typeof MutationObserver === "undefined")
+    return;
+  const observedElement = element;
+  const observer = new MutationObserver((mutations) => {
+    if (mutations.some((mutation) => mutation.type === "attributes" && mutation.attributeName === "dir")) {
+      observeDirectionChain();
+    }
+    onChange();
+  });
+  function observeDirectionChain() {
+    observer.disconnect();
+    let currentElement = observedElement;
+    while (currentElement) {
+      const isAutoDirection = currentElement.getAttribute("dir")?.toLowerCase() === "auto";
+      observer.observe(currentElement, {
+        attributes: true,
+        attributeFilter: ["dir", "style", "class"],
+        childList: isAutoDirection,
+        characterData: isAutoDirection,
+        subtree: isAutoDirection
+      });
+      currentElement = currentElement.parentElement;
+    }
+  }
+  observeDirectionChain();
+  return () => observer.disconnect();
+}
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
@@ -78,7 +257,21 @@ function Slider($$anchor, $$props) {
   $.push($$props, true);
   let mode = $.prop($$props, "mode", 3, "single"), min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), step = $.prop($$props, "step", 3, 1), disabledProp = $.prop($$props, "disabled", 3, false);
   const formField = getFormFieldContext();
+  const localeContext = getLocaleContext();
   const disabled = $.derived(() => disabledProp() || (formField?.disabled ?? false));
+  let rootElement = $.state(null);
+  let directionRevision = $.state(0);
+  const resolvedDirection = $.derived(() => {
+    $.get(directionRevision);
+    return $.get(rootElement) ? resolveTextDirection($.get(rootElement).parentElement, localeContext?.direction) : localeContext?.direction;
+  });
+  const rootDirection = $.derived(() => localeContext?.direction ? $.get(resolvedDirection) : null);
+  const isRightToLeft = $.derived(() => $.get(resolvedDirection) === "rtl");
+  $.user_effect(() => {
+    return observeTextDirection($.get(rootElement)?.parentElement, () => {
+      $.set(directionRevision, $.get(directionRevision) + 1);
+    });
+  });
   const safeStep = $.derived(() => !Number.isFinite(step()) || step() <= 0 ? 1 : step());
   const safePageStep = $.derived(() => {
     if ($$props.pageStep === undefined)
@@ -213,13 +406,18 @@ function Slider($$anchor, $$props) {
       return;
     const current = thumb === "high" ? $.get(highValue) : $.get(lowValue);
     const hasTickArray = $.get(tickList) !== null && $.get(tickList).length > 0;
+    const horizontalStepDirection = $.get(isRightToLeft) ? -1 : 1;
     let next = current;
     switch (event2.key) {
       case "ArrowRight":
+        next = hasTickArray ? neighborTick(current, horizontalStepDirection) : current + horizontalStepDirection * $.get(safeStep);
+        break;
+      case "ArrowLeft":
+        next = hasTickArray ? neighborTick(current, horizontalStepDirection === 1 ? -1 : 1) : current - horizontalStepDirection * $.get(safeStep);
+        break;
       case "ArrowUp":
         next = hasTickArray ? neighborTick(current, 1) : current + $.get(safeStep);
         break;
-      case "ArrowLeft":
       case "ArrowDown":
         next = hasTickArray ? neighborTick(current, -1) : current - $.get(safeStep);
         break;
@@ -255,7 +453,8 @@ function Slider($$anchor, $$props) {
     const rect = $.get(trackElement).getBoundingClientRect();
     if (rect.width === 0)
       return min();
-    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const physicalRatio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const ratio = $.get(isRightToLeft) ? 1 - physicalRatio : physicalRatio;
     return min() + ratio * (max() - min());
   }
   function chooseNearestThumb(raw) {
@@ -366,6 +565,13 @@ function Slider($$anchor, $$props) {
   $.event("pointercancel", $.document, function(...$$args) {
     ($.get(activeThumb) ? handleDocumentPointerEnd : null)?.apply(this, $$args);
   });
+  $.attribute_effect(div, ($0) => ({
+    class: $0,
+    "data-cinder-disabled": $.get(disabled) || undefined,
+    ...$.get(rootDirection) ? { dir: $.get(rootDirection) } : {}
+  }), [
+    () => classNames("cinder-slider", $.get(isRange) && "cinder-slider--range", $$props.class)
+  ]);
   var node = $.child(div);
   {
     var consequent = ($$anchor2) => {
@@ -545,12 +751,8 @@ function Slider($$anchor, $$props) {
     });
   }
   $.reset(div);
-  $.template_effect(($0, $1) => {
-    $.set_class(div, 1, $0);
-    $.set_attribute(div, "data-cinder-disabled", $.get(disabled) || undefined);
-    styles = $.set_style(div_2, "", styles, $1);
-  }, [
-    () => $.clsx(classNames("cinder-slider", $.get(isRange) && "cinder-slider--range", $$props.class)),
+  $.bind_this(div, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
+  $.template_effect(($0) => styles = $.set_style(div_2, "", styles, $0), [
     () => ({
       "--_cinder-slider-low": `${percentOf($.get(lowValue)) ?? ""}%`,
       "--_cinder-slider-high": `${percentOf($.get(isRange) ? $.get(highValue) : $.get(lowValue)) ?? ""}%`
@@ -569,4 +771,4 @@ export {
   Slider
 };
 
-//# debugId=828D9E63B024C1D264756E2164756E21
+//# debugId=F7C0A03C8308A7F264756E2164756E21

package/dist/components/slider/slider.css

@@ -40,18 +40,18 @@
   .cinder-slider__range {
     position: absolute;
     inset-block: 0;
-    left: var(--_cinder-slider-low);
-    right: calc(100% - var(--_cinder-slider-high));
+    inset-inline-start: var(--_cinder-slider-low);
+    inset-inline-end: calc(100% - var(--_cinder-slider-high));
     background: var(--cinder-accent);
     border-radius: var(--cinder-radius-full);
     transition:
-      left var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease),
-      right var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease);
+      inset-inline-start var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease),
+      inset-inline-end var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease);
   }
 
   .cinder-slider:not(.cinder-slider--range) .cinder-slider__range {
-    left: 0;
-    right: calc(100% - var(--_cinder-slider-low));
+    inset-inline-start: 0;
+    inset-inline-end: calc(100% - var(--_cinder-slider-low));
   }
 
   .cinder-slider__ticks {
@@ -63,7 +63,7 @@
   .cinder-slider__tick {
     position: absolute;
     top: 50%;
-    left: var(--_cinder-slider-tick);
+    inset-inline-start: var(--_cinder-slider-tick);
     width: 2px;
     height: 0.5rem;
     background: var(--cinder-border, currentColor);
@@ -75,7 +75,7 @@
   .cinder-slider__thumb {
     position: absolute;
     top: 50%;
-    left: var(--_cinder-slider-pos);
+    inset-inline-start: var(--_cinder-slider-pos);
     width: var(--_cinder-slider-thumb-size);
     height: var(--_cinder-slider-thumb-size);
     background: var(--cinder-surface-raised, white);
@@ -89,10 +89,15 @@
    * gesture for scrolling when pointerdown lands directly on the thumb. */
     touch-action: none;
     transition:
-      left var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease),
+      inset-inline-start var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease),
       box-shadow var(--cinder-duration-fast, 120ms) var(--cinder-ease-standard, ease);
   }
 
+  .cinder-slider__tick:dir(rtl),
+  .cinder-slider__thumb:dir(rtl) {
+    transform: translate(50%, -50%);
+  }
+
   /* The most recently moved thumb in range mode is raised above its sibling
  * so that when the two values coincide, the active one remains the click
  * target. */

package/dist/components/sortable-list/sortable-list.css

@@ -50,7 +50,7 @@
   }
 
   .cinder-sortable-item--shifting {
-    transition: transform 150ms ease;
+    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   @media (prefers-reduced-motion: reduce) {