@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/faceted-filter-bar/faceted-filter-bar.css

@@ -29,9 +29,18 @@
     position: relative;
     display: inline-flex;
     align-items: center;
+    gap: var(--cinder-space-1);
     flex-shrink: 0;
   }
 
+  .cinder-faceted-filter-bar__facet-label {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    line-height: var(--cinder-leading-tight);
+    white-space: nowrap;
+  }
+
   /* Native select styled to match cinder input frame */
   .cinder-faceted-filter-bar__select {
     appearance: none;

package/dist/components/faceted-filter-bar/index.js

@@ -27,6 +27,7 @@ import"@lostgradient/cinder/faceted-filter-bar/styles";
 // src/components/faceted-filter-bar/faceted-filter-bar.svelte
 import"svelte/internal/disclose-version";
 import * as $8 from "svelte/internal/client";
+import { tick } from "svelte";
 
 // src/components/_visually-hidden-live-region.svelte
 import"svelte/internal/disclose-version";
@@ -827,7 +828,7 @@ function Button($$anchor, $$props) {
 
 // src/components/faceted-filter-bar/faceted-filter-bar.svelte
 var root_33 = $8.from_html(`<option> </option>`);
-var root_23 = $8.from_html(`<div class="cinder-faceted-filter-bar__facet"><label class="cinder-faceted-filter-bar__facet-label cinder-sr-only"> </label> <select class="cinder-faceted-filter-bar__select"><option> </option><!></select> <span class="cinder-faceted-filter-bar__select-chevron" aria-hidden="true"></span></div>`);
+var root_23 = $8.from_html(`<div class="cinder-faceted-filter-bar__facet"><label class="cinder-faceted-filter-bar__facet-label"> </label> <select class="cinder-faceted-filter-bar__select"><option> </option><!></select> <span class="cinder-faceted-filter-bar__select-chevron" aria-hidden="true"></span></div>`);
 var root_43 = $8.from_html(`<div class="cinder-faceted-filter-bar__facet"><!></div>`);
 var root_53 = $8.from_html(`<div class="cinder-faceted-filter-bar__chips" aria-label="Active filter controls"><!> <!></div>`);
 var root4 = $8.from_html(`<div><div class="cinder-faceted-filter-bar__controls"><!> <!></div> <!> <!></div>`);
@@ -852,18 +853,25 @@ function Faceted_filter_bar($$anchor, $$props) {
     "onclearall"
   ]);
   const searchId = $8.derived(() => `${generatedId}-search`);
+  let rootElement = $8.state(undefined);
   let internalSearchQuery = $8.state("");
   const isSearchControlled = $8.derived(() => $$props.searchQuery !== undefined);
   const currentSearchQuery = $8.derived(() => $8.get(isSearchControlled) ? $$props.searchQuery ?? "" : $8.get(internalSearchQuery));
   function resolveFacetValue(key) {
     return appliedFilters().find((filter) => filter.key === key)?.value ?? "";
   }
+  function resolveFilterDisplayValue(key, value) {
+    const facet = facets().find((candidate) => candidate.key === key);
+    if (facet?.type !== "select")
+      return value;
+    return facet.options.find((option) => option.value === value)?.label ?? value;
+  }
   const hasAppliedFilters = $8.derived(() => appliedFilters().length > 0 || $8.get(currentSearchQuery).length > 0);
   const totalActiveCount = $8.derived(() => appliedFilters().length);
   const summaryMessage = $8.derived(() => {
     if ($8.get(totalActiveCount) === 0)
       return "";
-    const parts = appliedFilters().map((filter) => `${filter.label}: ${filter.value}`);
+    const parts = appliedFilters().map((filter) => `${filter.label}: ${resolveFilterDisplayValue(filter.key, filter.value)}`);
     return `${$8.get(totalActiveCount)} active filter${$8.get(totalActiveCount) === 1 ? "" : "s"}: ${parts.join(", ")}`;
   });
   function handleSearchInput(value) {
@@ -872,8 +880,16 @@ function Faceted_filter_bar($$anchor, $$props) {
     }
     $$props.onsearchchange?.(value);
   }
-  function handleFilterRemove(key) {
+  async function handleFilterRemove(key) {
+    const filterIndex = appliedFilters().findIndex((filter) => filter.key === key);
+    const facetFallbackKey = appliedFilters()[filterIndex]?.key;
     $$props.onfilterremove?.(key);
+    await tick();
+    const removeButtons = Array.from($8.get(rootElement)?.querySelectorAll(".cinder-chip__remove") ?? []);
+    const nextRemoveButton = removeButtons[Math.min(filterIndex, removeButtons.length - 1)];
+    const facetSelect = facetFallbackKey ? document.getElementById(`${generatedId}-facet-${facetFallbackKey}`) : null;
+    const searchInput = document.getElementById($8.get(searchId));
+    (nextRemoveButton ?? facetSelect ?? searchInput)?.focus();
   }
   function handleClearAll() {
     if (!$8.get(isSearchControlled)) {
@@ -997,9 +1013,10 @@ function Faceted_filter_bar($$anchor, $$props) {
       var div_4 = root_53();
       var node_6 = $8.child(div_4);
       $8.each(node_6, 17, appliedFilters, (filter) => filter.key, ($$anchor3, filter) => {
+        const displayValue = $8.derived(() => resolveFilterDisplayValue($8.get(filter).key, $8.get(filter).value));
         {
-          let $0 = $8.derived(() => `${$8.get(filter).label}: ${$8.get(filter).value}`);
-          let $1 = $8.derived(() => `Remove filter: ${$8.get(filter).label}: ${$8.get(filter).value}`);
+          let $0 = $8.derived(() => `${$8.get(filter).label}: ${$8.get(displayValue)}`);
+          let $1 = $8.derived(() => `Remove filter: ${$8.get(filter).label}: ${$8.get(displayValue)}`);
           Chip($$anchor3, {
             mode: "removable",
             get label() {
@@ -1023,6 +1040,7 @@ function Faceted_filter_bar($$anchor, $$props) {
         get disabled() {
           return disabled();
         },
+        "aria-label": "Clear all filters",
         onclick: handleClearAll,
         children: ($$anchor3, $$slotProps) => {
           $8.next();
@@ -1047,6 +1065,7 @@ function Faceted_filter_bar($$anchor, $$props) {
     priority: "polite"
   });
   $8.reset(div);
+  $8.bind_this(div, ($$value) => $8.set(rootElement, $$value), () => $8.get(rootElement));
   $8.append($$anchor, div);
   $8.pop();
 }
@@ -1059,4 +1078,4 @@ export {
   Faceted_filter_bar as FacetedFilterBar
 };
 
-//# debugId=2E5AE928E1147D5864756E2164756E21
+//# debugId=9104596E018E9DB364756E2164756E21

package/dist/components/file-upload/file-upload.css

@@ -18,9 +18,9 @@
     background: var(--cinder-file-upload-background);
     padding: var(--cinder-space-4);
     transition:
-      border-color 150ms ease,
-      background-color 150ms ease,
-      box-shadow 150ms ease;
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   .cinder-file-upload__dropzone[data-drag-active] {
@@ -35,7 +35,7 @@
   }
 
   .cinder-file-upload__dropzone:focus-within {
-    outline: 2px solid transparent;
+    outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
@@ -169,7 +169,7 @@
     block-size: 100%;
     background: var(--cinder-file-upload-progress-fill);
     inline-size: calc(clamp(0, var(--cinder-file-upload-progress, 0), 100) * 1%);
-    transition: inline-size 150ms ease;
+    transition: inline-size var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   .cinder-file-upload__error {

package/dist/components/floating-action-button/floating-action-button.css

@@ -80,11 +80,11 @@
     font-size: var(--cinder-text-xs);
   }
 
-  .cinder-fab[data-cinder-size='sm'][data-cinder-variant='filled'] {
+  .cinder-fab[data-cinder-size='sm'][data-cinder-shape='filled'] {
     inline-size: var(--cinder-space-10);
   }
 
-  .cinder-fab[data-cinder-size='sm'][data-cinder-variant='extended'] {
+  .cinder-fab[data-cinder-size='sm'][data-cinder-shape='extended'] {
     padding-inline: var(--cinder-space-4);
   }
 
@@ -93,11 +93,11 @@
     font-size: var(--cinder-text-sm);
   }
 
-  .cinder-fab[data-cinder-size='md'][data-cinder-variant='filled'] {
+  .cinder-fab[data-cinder-size='md'][data-cinder-shape='filled'] {
     inline-size: var(--cinder-space-12);
   }
 
-  .cinder-fab[data-cinder-size='md'][data-cinder-variant='extended'] {
+  .cinder-fab[data-cinder-size='md'][data-cinder-shape='extended'] {
     padding-inline: var(--cinder-space-6);
   }
 
@@ -106,51 +106,51 @@
     font-size: var(--cinder-text-lg);
   }
 
-  .cinder-fab[data-cinder-size='lg'][data-cinder-variant='filled'] {
+  .cinder-fab[data-cinder-size='lg'][data-cinder-shape='filled'] {
     inline-size: var(--cinder-space-16);
   }
 
-  .cinder-fab[data-cinder-size='lg'][data-cinder-variant='extended'] {
+  .cinder-fab[data-cinder-size='lg'][data-cinder-shape='extended'] {
     padding-inline: var(--cinder-space-8);
   }
 
   /* ----------------------------------------
-   * Color variants
+   * Color variants (via variant prop)
    * ---------------------------------------- */
 
   /* primary — accent fill with contrast foreground */
-  .cinder-fab[data-cinder-color='primary'] {
+  .cinder-fab[data-cinder-variant='primary'] {
     --_cinder-fab-ring: var(--cinder-ring-on-accent);
     background: var(--cinder-accent);
     color: var(--cinder-accent-contrast);
   }
 
-  .cinder-fab[data-cinder-color='primary']:disabled,
-  .cinder-fab[data-cinder-color='primary'][aria-disabled='true'] {
+  .cinder-fab[data-cinder-variant='primary']:disabled,
+  .cinder-fab[data-cinder-variant='primary'][aria-disabled='true'] {
     background: var(--cinder-surface-inset);
     color: var(--cinder-text-disabled);
   }
 
   /* secondary — surface-raised background with standard text */
-  .cinder-fab[data-cinder-color='secondary'] {
+  .cinder-fab[data-cinder-variant='secondary'] {
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
   }
 
-  .cinder-fab[data-cinder-color='secondary']:disabled,
-  .cinder-fab[data-cinder-color='secondary'][aria-disabled='true'] {
+  .cinder-fab[data-cinder-variant='secondary']:disabled,
+  .cinder-fab[data-cinder-variant='secondary'][aria-disabled='true'] {
     background: var(--cinder-surface-inset);
     color: var(--cinder-text-disabled);
   }
 
   /* surface — neutral surface color, suited for floating above content */
-  .cinder-fab[data-cinder-color='surface'] {
+  .cinder-fab[data-cinder-variant='surface'] {
     background: var(--cinder-surface);
     color: var(--cinder-text);
   }
 
-  .cinder-fab[data-cinder-color='surface']:disabled,
-  .cinder-fab[data-cinder-color='surface'][aria-disabled='true'] {
+  .cinder-fab[data-cinder-variant='surface']:disabled,
+  .cinder-fab[data-cinder-variant='surface'][aria-disabled='true'] {
     background: var(--cinder-surface-inset);
     color: var(--cinder-text-disabled);
   }
@@ -168,15 +168,15 @@
       --_cinder-fab-elevation: var(--cinder-shadow-lg);
     }
 
-    .cinder-fab[data-cinder-color='primary']:hover:not(:disabled):not([aria-disabled='true']) {
+    .cinder-fab[data-cinder-variant='primary']:hover:not(:disabled):not([aria-disabled='true']) {
       background: var(--cinder-accent-hover);
     }
 
-    .cinder-fab[data-cinder-color='secondary']:hover:not(:disabled):not([aria-disabled='true']) {
+    .cinder-fab[data-cinder-variant='secondary']:hover:not(:disabled):not([aria-disabled='true']) {
       background: var(--cinder-surface-hover);
     }
 
-    .cinder-fab[data-cinder-color='surface']:hover:not(:disabled):not([aria-disabled='true']) {
+    .cinder-fab[data-cinder-variant='surface']:hover:not(:disabled):not([aria-disabled='true']) {
       background: var(--cinder-surface-hover);
     }
   }
@@ -184,15 +184,15 @@
   /* :active placed after hover media so press feedback fires on tap as well.
      Uses the gentler on-fill pressed token so the --cinder-accent-contrast label stays
      AA-legible on the pressed fill (see --cinder-accent-active-on-fill in tokens-base.css). */
-  .cinder-fab[data-cinder-color='primary']:active:not(:disabled):not([aria-disabled='true']) {
+  .cinder-fab[data-cinder-variant='primary']:active:not(:disabled):not([aria-disabled='true']) {
     background: var(--cinder-accent-active-on-fill);
   }
 
-  .cinder-fab[data-cinder-color='secondary']:active:not(:disabled):not([aria-disabled='true']) {
+  .cinder-fab[data-cinder-variant='secondary']:active:not(:disabled):not([aria-disabled='true']) {
     background: var(--cinder-surface-pressed);
   }
 
-  .cinder-fab[data-cinder-color='surface']:active:not(:disabled):not([aria-disabled='true']) {
+  .cinder-fab[data-cinder-variant='surface']:active:not(:disabled):not([aria-disabled='true']) {
     background: var(--cinder-surface-pressed);
   }
 

package/dist/components/floating-action-button/floating-action-button.schema.js

@@ -26,9 +26,9 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
-    variant: {
+    shape: {
       enum: ["filled", "extended"],
-      description: "Visual variant. `filled` = circle, `extended` = pill.",
+      description: "Shape. `filled` = circle, `extended` = pill.",
       default: "filled"
     },
     size: {
@@ -36,7 +36,7 @@ var schema = {
       description: "Size of the FAB.",
       default: "md"
     },
-    color: {
+    variant: {
       enum: ["primary", "secondary", "surface"],
       description: "Color palette.",
       default: "primary"
@@ -61,7 +61,7 @@ var schema = {
       {
         name: "children",
         reason: "function-or-snippet",
-        description: "The icon (or icon + label for extended variant). Always provide `aria-label` when\nthe FAB renders an icon without visible text — i.e. the `filled` variant."
+        description: "The icon (or icon + label for extended shape). Always provide `aria-label` when\nthe FAB renders an icon without visible text — i.e. the `filled` shape."
       }
     ]
   }
@@ -71,4 +71,4 @@ export {
   floating_action_button_schema_default as default
 };
 
-//# debugId=6F639B98F17D810F64756E2164756E21
+//# debugId=4A3DB658B8B7E91664756E2164756E21

package/dist/components/floating-action-button/floating-action-button.svelte.d.ts

@@ -10,7 +10,7 @@
  * @avoidWhen You need it pinned to the viewport — it doesn't position itself; wrap it in your own fixed/sticky container.
  * @related button, toolbar
  */
-export type { FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonVariant, FloatingActionButtonColor, } from './floating-action-button.types.ts';
+export type { FloatingActionButtonProps, FloatingActionButtonShape, FloatingActionButtonSize, FloatingActionButtonVariant, } from './floating-action-button.types.ts';
 import type { FloatingActionButtonProps } from './floating-action-button.types.ts';
 declare const FloatingActionButton: import("svelte").Component<FloatingActionButtonProps, {}, "">;
 type FloatingActionButton = ReturnType<typeof FloatingActionButton>;

package/dist/components/floating-action-button/floating-action-button.types.d.ts

@@ -1,14 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 /**
- * Visual variant of the FAB.
+ * Visual palette of the FAB.
  *
- * `filled` renders a circle with equal width and height — the classic FAB shape.
- * `extended` renders a pill with auto-width that accommodates icon + label side by side.
+ * - `primary` — uses the primary accent color (solid fill, contrast foreground).
+ * - `secondary` — uses the surface-raised background with standard text color.
+ * - `surface` — uses the neutral surface color, suited for floating over content.
  *
- * @default `"filled"`
+ * @default `"primary"`
  */
-export type FloatingActionButtonVariant = 'filled' | 'extended';
+export type FloatingActionButtonVariant = 'primary' | 'secondary' | 'surface';
 /**
  * Size of the FAB. Controls the diameter (`filled`) or height (`extended`).
  *
@@ -16,29 +17,28 @@ export type FloatingActionButtonVariant = 'filled' | 'extended';
  */
 export type FloatingActionButtonSize = 'sm' | 'md' | 'lg';
 /**
- * Color palette of the FAB.
+ * Shape of the FAB.
  *
- * - `primary` — uses the primary accent color (solid fill, contrast foreground).
- * - `secondary` — uses the surface-raised background with standard text color.
- * - `surface` — uses the neutral surface color, suited for floating over content.
+ * `filled` renders a circle with equal width and height — the classic FAB shape.
+ * `extended` renders a pill with auto-width that accommodates icon + label side by side.
  *
- * @default `"primary"`
+ * @default `"filled"`
  */
-export type FloatingActionButtonColor = 'primary' | 'secondary' | 'surface';
+export type FloatingActionButtonShape = 'filled' | 'extended';
 type SharedBase = {
-    /** Visual variant. `filled` = circle, `extended` = pill with icon + label. */
-    variant?: FloatingActionButtonVariant;
+    /** Shape. `filled` = circle, `extended` = pill with icon + label. */
+    shape?: FloatingActionButtonShape;
     /** Size — controls diameter for filled, height for extended. */
     size?: FloatingActionButtonSize;
-    /** Color palette. */
-    color?: FloatingActionButtonColor;
+    /** Color palette (primary, secondary, or surface). */
+    variant?: FloatingActionButtonVariant;
     /** When true, disables the button and prevents interaction. */
     disabled?: boolean;
     /** Custom class merged with `.cinder-fab`. */
     class?: string;
     /**
-     * The icon (or icon + label for extended variant). Always provide `aria-label` when
-     * the FAB renders an icon without visible text — i.e. the `filled` variant.
+     * The icon (or icon + label for extended shape). Always provide `aria-label` when
+     * the FAB renders an icon without visible text — i.e. the `filled` shape.
      */
     children?: Snippet;
 };
@@ -58,7 +58,7 @@ type FloatingActionButtonLink = SharedBase & Omit<HTMLAnchorAttributes, 'class'>
 /**
  * Props for the FloatingActionButton component.
  *
- * Icon-only usage (i.e. `variant="filled"`) requires an accessible name via
+ * Icon-only usage (i.e. `shape="filled"`) requires an accessible name via
  * `aria-label` or `aria-labelledby`. The component emits a dev-mode warning when
  * neither is present.
  */
@@ -69,10 +69,10 @@ export type FloatingActionButtonProps = FloatingActionButtonOnly | FloatingActio
  */
 export interface FloatingActionButtonSchemaProps {
     /**
-     * Visual variant. `filled` = circle, `extended` = pill.
+     * Shape. `filled` = circle, `extended` = pill.
      * @default "filled"
      */
-    variant?: FloatingActionButtonVariant;
+    shape?: FloatingActionButtonShape;
     /**
      * Size of the FAB.
      * @default "md"
@@ -82,7 +82,7 @@ export interface FloatingActionButtonSchemaProps {
      * Color palette.
      * @default "primary"
      */
-    color?: FloatingActionButtonColor;
+    variant?: FloatingActionButtonVariant;
     /**
      * When true, disables the button and prevents interaction.
      * @default false

package/dist/components/floating-action-button/index.d.ts

@@ -1,5 +1,5 @@
 import './floating-action-button.css';
 import FloatingActionButton from './floating-action-button.svelte';
 export default FloatingActionButton;
-export type { FloatingActionButtonColor, FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonVariant, } from './floating-action-button.types.ts';
+export type { FloatingActionButtonProps, FloatingActionButtonShape, FloatingActionButtonSize, FloatingActionButtonVariant, } from './floating-action-button.types.ts';
 export { FloatingActionButton };

package/dist/components/floating-action-button/index.js

@@ -47,13 +47,13 @@ var root_1 = $.from_html(`<a><!></a>`);
 var root_3 = $.from_html(`<button><!></button>`);
 function Floating_action_button($$anchor, $$props) {
   $.push($$props, true);
-  const variant = $.prop($$props, "variant", 3, "filled"), size = $.prop($$props, "size", 3, "md"), color = $.prop($$props, "color", 3, "primary"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
+  const shape = $.prop($$props, "shape", 3, "filled"), size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "primary"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
-    "variant",
+    "shape",
     "size",
-    "color",
+    "variant",
     "disabled",
     "children",
     "class",
@@ -66,9 +66,9 @@ function Floating_action_button($$anchor, $$props) {
   const resolvedTabindex = $.derived(() => disabled() ? -1 : $$props.tabindex);
   const mergedClassName = $.derived(() => classNames("cinder-fab", $$props.class));
   const dataAttributes = $.derived(() => ({
-    "data-cinder-variant": variant(),
+    "data-cinder-shape": shape(),
     "data-cinder-size": size(),
-    "data-cinder-color": color()
+    "data-cinder-variant": variant()
   }));
   const resolvedAriaLabel = $.derived(() => typeof $$props["aria-label"] === "string" && $$props["aria-label"].trim().length > 0 ? $$props["aria-label"] : undefined);
   const resolvedAriaLabelledBy = $.derived(() => typeof $$props["aria-labelledby"] === "string" && $$props["aria-labelledby"].trim().length > 0 ? $$props["aria-labelledby"] : undefined);
@@ -77,8 +77,8 @@ function Floating_action_button($$anchor, $$props) {
   $.user_effect(() => {
     const hasAriaLabel = $.get(resolvedAriaLabel) !== undefined;
     const hasAriaLabelledBy = $.get(resolvedAriaLabelledBy) !== undefined;
-    if (variant() === "filled" && !hasAriaLabel && !hasAriaLabelledBy) {
-      devWarn("[cinder/FloatingActionButton] filled variant requires aria-label or aria-labelledby — the icon alone does not provide an accessible name.");
+    if (shape() === "filled" && !hasAriaLabel && !hasAriaLabelledBy) {
+      devWarn("[cinder/FloatingActionButton] filled shape requires aria-label or aria-labelledby — the icon alone does not provide an accessible name.");
     }
     if (!hasAriaLabel && !hasAriaLabelledBy && !$$props.children) {
       devWarn("[cinder/FloatingActionButton] rendered without an accessible name — pass aria-label, aria-labelledby, or children.");
@@ -163,4 +163,4 @@ export {
   Floating_action_button as FloatingActionButton
 };
 
-//# debugId=35EDE98244BC109A64756E2164756E21
+//# debugId=6D4EEEB02E16EECC64756E2164756E21

package/dist/components/form-field/form-field.css

@@ -30,19 +30,9 @@
     cursor: not-allowed;
   }
 
-  /* ----------------------------------------
- * Required marker
- * ---------------------------------------- */
-
-  .cinder-form-field__required {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--cinder-danger);
-    flex-shrink: 0;
-    align-self: center;
-  }
+  /* The required marker is the shared `.cinder-_required-marker` partial
+     (styles/components/_field-label.css) so the asterisk can never drift
+     between FormField, Label, and the inline control labels. */
 
   /* ----------------------------------------
  * Supporting text

package/dist/components/form-field/index.js

@@ -93,7 +93,7 @@ function classNames(...parts) {
 }
 
 // src/components/form-field/form-field.svelte
-var root_1 = $.from_html(`<span class="cinder-form-field__required" aria-hidden="true"></span>`);
+var root_1 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_2 = $.from_html(`<p class="cinder-form-field__description"> </p>`);
 var root_3 = $.from_html(`<p class="cinder-form-field__error" aria-live="polite"> </p>`);
 var root = $.from_html(`<div><label class="cinder-form-field__label"> <!></label> <!> <!> <!></div>`);
@@ -201,4 +201,4 @@ export {
   Form_field as FormField
 };
 
-//# debugId=723B4B3C4D7CDD0464756E2164756E21
+//# debugId=411EE920C978F01864756E2164756E21

package/dist/components/hover-card/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2429,4 +2430,4 @@ export {
   Hover_card as HoverCard
 };
 
-//# debugId=C6DC146A093BE37A64756E2164756E21
+//# debugId=B4B04D4A20FD541364756E2164756E21