@sentropic/design-system-svelte 0.13.0 → 0.15.0

package/dist/Popper.svelte

@@ -0,0 +1,317 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import Portal from "./Portal.svelte";
+
+  export type PopperStrategy = "absolute" | "fixed";
+
+  export type PopperPlacement =
+    | "top"
+    | "bottom"
+    | "left"
+    | "right"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end"
+    | "right-start"
+    | "right-end";
+
+  export type PopperSide = "top" | "bottom" | "left" | "right";
+  export type PopperAlign = "start" | "center" | "end";
+
+  export type PopperProps = {
+    /** Reference element the panel is positioned against. */
+    anchor: HTMLElement | null;
+    /** Controlled open state. When false (or no anchor) nothing renders. */
+    open?: boolean;
+    /** Wanted placement of the panel relative to the anchor. */
+    placement?: PopperPlacement;
+    /** Main-axis distance (px) between the anchor and the panel. */
+    offset?: number;
+    /** Flip to the opposite side when the panel would overflow the viewport. */
+    flip?: boolean;
+    /** Shift along the cross axis to keep the panel within the viewport. */
+    shift?: boolean;
+    /** Expose a positioned arrow element. */
+    arrow?: boolean;
+    /** CSS positioning strategy. */
+    strategy?: PopperStrategy;
+    /** Render the panel into `document.body` via a Portal. */
+    portal?: boolean;
+    /** Optional class applied to the floating panel. */
+    class?: string;
+    /** Notified whenever the resolved placement changes (after flip). */
+    onPlacementChange?: (placement: PopperPlacement) => void;
+    children?: Snippet;
+  };
+
+  /** Split a placement into its side and (optional) alignment. */
+  export function splitPlacement(placement: PopperPlacement): {
+    side: PopperSide;
+    align: PopperAlign;
+  } {
+    const [side, align] = placement.split("-") as [PopperSide, PopperAlign?];
+    return { side, align: align ?? "center" };
+  }
+
+  /** Recompose a side + alignment into a placement string. */
+  export function joinPlacement(side: PopperSide, align: PopperAlign): PopperPlacement {
+    return (align === "center" ? side : `${side}-${align}`) as PopperPlacement;
+  }
+
+  const OPPOSITE: Record<PopperSide, PopperSide> = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+
+  export type Rect = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+  };
+
+  /**
+   * Pure geometry: compute the panel coordinates (in the chosen strategy's
+   * coordinate space) given the anchor rect, the panel size, and options.
+   * Returns the resolved placement (after flip) and the top/left coordinates,
+   * plus the arrow offset along the main edge.
+   *
+   * Coordinates are viewport-relative; callers add scroll offsets for the
+   * `absolute` strategy. No DOM access here — safe to unit test.
+   */
+  export function computePosition(
+    anchorRect: Rect,
+    panelWidth: number,
+    panelHeight: number,
+    options: {
+      placement: PopperPlacement;
+      offset: number;
+      flip: boolean;
+      shift: boolean;
+      viewportWidth: number;
+      viewportHeight: number;
+    }
+  ): { placement: PopperPlacement; top: number; left: number } {
+    const { offset, flip, shift, viewportWidth, viewportHeight } = options;
+    let { side, align } = splitPlacement(options.placement);
+
+    const place = (s: PopperSide, a: PopperAlign) => {
+      let top = 0;
+      let left = 0;
+      if (s === "top" || s === "bottom") {
+        top = s === "top" ? anchorRect.top - panelHeight - offset : anchorRect.bottom + offset;
+        if (a === "start") left = anchorRect.left;
+        else if (a === "end") left = anchorRect.right - panelWidth;
+        else left = anchorRect.left + anchorRect.width / 2 - panelWidth / 2;
+      } else {
+        left = s === "left" ? anchorRect.left - panelWidth - offset : anchorRect.right + offset;
+        if (a === "start") top = anchorRect.top;
+        else if (a === "end") top = anchorRect.bottom - panelHeight;
+        else top = anchorRect.top + anchorRect.height / 2 - panelHeight / 2;
+      }
+      return { top, left };
+    };
+
+    // Flip: if the panel overflows on the chosen side, try the opposite side.
+    if (flip) {
+      const candidate = place(side, align);
+      const overflows =
+        (side === "top" && candidate.top < 0) ||
+        (side === "bottom" && candidate.top + panelHeight > viewportHeight) ||
+        (side === "left" && candidate.left < 0) ||
+        (side === "right" && candidate.left + panelWidth > viewportWidth);
+      if (overflows) {
+        const flipped = OPPOSITE[side];
+        const flippedPos = place(flipped, align);
+        const flippedOverflows =
+          (flipped === "top" && flippedPos.top < 0) ||
+          (flipped === "bottom" && flippedPos.top + panelHeight > viewportHeight) ||
+          (flipped === "left" && flippedPos.left < 0) ||
+          (flipped === "right" && flippedPos.left + panelWidth > viewportWidth);
+        // Only flip if the opposite side fits better.
+        if (!flippedOverflows) side = flipped;
+      }
+    }
+
+    let { top, left } = place(side, align);
+
+    // Shift: clamp along the cross axis so the panel stays in the viewport.
+    if (shift) {
+      if (side === "top" || side === "bottom") {
+        const max = Math.max(0, viewportWidth - panelWidth);
+        left = Math.min(Math.max(0, left), max);
+      } else {
+        const max = Math.max(0, viewportHeight - panelHeight);
+        top = Math.min(Math.max(0, top), max);
+      }
+    }
+
+    return { placement: joinPlacement(side, align), top, left };
+  }
+</script>
+
+<script lang="ts">
+  let {
+    anchor,
+    open = false,
+    placement = "bottom",
+    offset = 8,
+    flip = true,
+    shift = true,
+    arrow = false,
+    strategy = "absolute",
+    portal = true,
+    class: className,
+    onPlacementChange,
+    children
+  }: PopperProps = $props();
+
+  let panel = $state<HTMLDivElement | undefined>();
+  let top = $state(0);
+  let left = $state(0);
+  // Placement actually applied (may differ from the requested `placement`
+  // after a flip). Initialised lazily; defaults to the requested placement.
+  let flippedPlacement = $state<PopperPlacement | undefined>();
+  const resolvedPlacement = $derived(flippedPlacement ?? placement);
+
+  function reposition() {
+    if (typeof window === "undefined") return;
+    if (!open || !anchor || !panel) return;
+
+    const anchorRect = anchor.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+
+    const result = computePosition(
+      {
+        top: anchorRect.top,
+        left: anchorRect.left,
+        right: anchorRect.right,
+        bottom: anchorRect.bottom,
+        width: anchorRect.width,
+        height: anchorRect.height
+      },
+      panelRect.width,
+      panelRect.height,
+      {
+        placement,
+        offset,
+        flip,
+        shift,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      }
+    );
+
+    // `absolute` is positioned relative to the document, so add scroll offsets.
+    // `fixed` is viewport-relative, so coordinates are used as-is.
+    if (strategy === "absolute") {
+      top = result.top + window.scrollY;
+      left = result.left + window.scrollX;
+    } else {
+      top = result.top;
+      left = result.left;
+    }
+
+    if (result.placement !== resolvedPlacement) {
+      flippedPlacement = result.placement;
+      onPlacementChange?.(result.placement);
+    }
+  }
+
+  $effect(() => {
+    // Client-only: register listeners and compute the position once mounted.
+    if (typeof window === "undefined") return;
+    if (!open || !anchor || !panel) return;
+
+    reposition();
+
+    const onScroll = () => reposition();
+    const onResize = () => reposition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  });
+
+  const panelStyle = () =>
+    `position: ${strategy}; top: ${top}px; left: ${left}px;`;
+  const panelSide = () => splitPlacement(resolvedPlacement).side;
+</script>
+
+{#snippet floating()}
+  <div
+    bind:this={panel}
+    class={className ? `st-popper ${className}` : "st-popper"}
+    data-popper-placement={resolvedPlacement}
+    style={panelStyle()}
+  >
+    {@render children?.()}
+    {#if arrow}
+      <span
+        class="st-popper__arrow"
+        data-popper-side={panelSide()}
+        aria-hidden="true"
+      ></span>
+    {/if}
+  </div>
+{/snippet}
+
+{#if open && anchor}
+  {#if portal}
+    <Portal target="body">
+      {@render floating()}
+    </Portal>
+  {:else}
+    {@render floating()}
+  {/if}
+{/if}
+
+<style>
+  .st-popper {
+    z-index: var(--st-component-popover-zIndex, 80);
+  }
+
+  .st-popper__arrow {
+    position: absolute;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: inherit;
+    border: inherit;
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  .st-popper__arrow[data-popper-side="bottom"] {
+    top: -0.25rem;
+    left: 50%;
+    margin-left: -0.25rem;
+  }
+
+  .st-popper__arrow[data-popper-side="top"] {
+    bottom: -0.25rem;
+    left: 50%;
+    margin-left: -0.25rem;
+  }
+
+  .st-popper__arrow[data-popper-side="right"] {
+    left: -0.25rem;
+    top: 50%;
+    margin-top: -0.25rem;
+  }
+
+  .st-popper__arrow[data-popper-side="left"] {
+    right: -0.25rem;
+    top: 50%;
+    margin-top: -0.25rem;
+  }
+</style>

package/dist/Popper.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { Snippet } from "svelte";
+export type PopperStrategy = "absolute" | "fixed";
+export type PopperPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+export type PopperSide = "top" | "bottom" | "left" | "right";
+export type PopperAlign = "start" | "center" | "end";
+export type PopperProps = {
+    /** Reference element the panel is positioned against. */
+    anchor: HTMLElement | null;
+    /** Controlled open state. When false (or no anchor) nothing renders. */
+    open?: boolean;
+    /** Wanted placement of the panel relative to the anchor. */
+    placement?: PopperPlacement;
+    /** Main-axis distance (px) between the anchor and the panel. */
+    offset?: number;
+    /** Flip to the opposite side when the panel would overflow the viewport. */
+    flip?: boolean;
+    /** Shift along the cross axis to keep the panel within the viewport. */
+    shift?: boolean;
+    /** Expose a positioned arrow element. */
+    arrow?: boolean;
+    /** CSS positioning strategy. */
+    strategy?: PopperStrategy;
+    /** Render the panel into `document.body` via a Portal. */
+    portal?: boolean;
+    /** Optional class applied to the floating panel. */
+    class?: string;
+    /** Notified whenever the resolved placement changes (after flip). */
+    onPlacementChange?: (placement: PopperPlacement) => void;
+    children?: Snippet;
+};
+/** Split a placement into its side and (optional) alignment. */
+export declare function splitPlacement(placement: PopperPlacement): {
+    side: PopperSide;
+    align: PopperAlign;
+};
+/** Recompose a side + alignment into a placement string. */
+export declare function joinPlacement(side: PopperSide, align: PopperAlign): PopperPlacement;
+export type Rect = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+/**
+ * Pure geometry: compute the panel coordinates (in the chosen strategy's
+ * coordinate space) given the anchor rect, the panel size, and options.
+ * Returns the resolved placement (after flip) and the top/left coordinates,
+ * plus the arrow offset along the main edge.
+ *
+ * Coordinates are viewport-relative; callers add scroll offsets for the
+ * `absolute` strategy. No DOM access here — safe to unit test.
+ */
+export declare function computePosition(anchorRect: Rect, panelWidth: number, panelHeight: number, options: {
+    placement: PopperPlacement;
+    offset: number;
+    flip: boolean;
+    shift: boolean;
+    viewportWidth: number;
+    viewportHeight: number;
+}): {
+    placement: PopperPlacement;
+    top: number;
+    left: number;
+};
+declare const Popper: import("svelte").Component<PopperProps, {}, "">;
+type Popper = ReturnType<typeof Popper>;
+export default Popper;
+//# sourceMappingURL=Popper.svelte.d.ts.map

package/dist/Popper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popper.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,cAAc,CAAC,SAAS,EAAE,eAAe,GAAG;IAC1D,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB,CAGA;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAG,eAAe,CAEnF;AASD,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,GACA;IAAE,SAAS,EAAE,eAAe,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAwD3D;AAsHH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Portal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PortalProps = {
+    /**
+     * Where to teleport the children. A CSS selector string or an actual
+     * `HTMLElement`. Defaults to the document `<body>`.
+     */
+    target?: string | HTMLElement;
+    /** When `true`, render inline in place (no teleportation). */
+    disabled?: boolean;
+    /** Optional class applied to the portal container element. */
+    class?: string;
+    children?: Snippet;
+  };
+
+  /**
+   * Resolve a target prop to an `HTMLElement`. Returns `null` when it cannot be
+   * resolved (SSR, missing selector, etc.).
+   */
+  export function resolvePortalTarget(
+    target: string | HTMLElement | undefined
+  ): HTMLElement | null {
+    if (typeof document === "undefined") return null;
+    if (target == null) return document.body;
+    if (typeof target === "string") {
+      return document.querySelector<HTMLElement>(target) ?? document.body;
+    }
+    return target;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    target = "body",
+    disabled = false,
+    class: className,
+    children
+  }: PortalProps = $props();
+
+  // The container that actually holds the children. We render it inline first
+  // (so SSR produces markup in place) and move it into the target on mount.
+  let container = $state<HTMLDivElement | undefined>();
+
+  $effect(() => {
+    // Client-only: never touch the DOM during SSR or before mount.
+    if (disabled || !container) return;
+    if (typeof document === "undefined") return;
+
+    const destination = resolvePortalTarget(target);
+    if (!destination) return;
+
+    destination.appendChild(container);
+
+    return () => {
+      // Clean up on unmount / target change: remove the container from the DOM.
+      container?.remove();
+    };
+  });
+</script>
+
+{#if disabled}
+  <div class={className ? `st-portal ${className}` : "st-portal"} data-st-portal="inline">
+    {@render children?.()}
+  </div>
+{:else}
+  <div
+    bind:this={container}
+    class={className ? `st-portal ${className}` : "st-portal"}
+    data-st-portal="teleported"
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  .st-portal {
+    display: contents;
+  }
+</style>

package/dist/Portal.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+export type PortalProps = {
+    /**
+     * Where to teleport the children. A CSS selector string or an actual
+     * `HTMLElement`. Defaults to the document `<body>`.
+     */
+    target?: string | HTMLElement;
+    /** When `true`, render inline in place (no teleportation). */
+    disabled?: boolean;
+    /** Optional class applied to the portal container element. */
+    class?: string;
+    children?: Snippet;
+};
+/**
+ * Resolve a target prop to an `HTMLElement`. Returns `null` when it cannot be
+ * resolved (SSR, missing selector, etc.).
+ */
+export declare function resolvePortalTarget(target: string | HTMLElement | undefined): HTMLElement | null;
+declare const Portal: import("svelte").Component<PortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;
+//# sourceMappingURL=Portal.svelte.d.ts.map

package/dist/Portal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Portal.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,GACvC,WAAW,GAAG,IAAI,CAOpB;AA+CH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Rating.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" module>
+  export type RatingSize = "sm" | "md" | "lg";
+</script>
+
+<script lang="ts">
+  import { Star, StarHalf } from "@lucide/svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type RatingProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Note courante (0..max). Pas de 1, ou 0.5 si `allowHalf`. */
+    value?: number;
+    /** Nombre d'étoiles. */
+    max?: number;
+    /** Appelé avec la nouvelle note au clic ou au clavier. */
+    onChange?: (value: number) => void;
+    /** Affichage seul : ni clic ni clavier n'émettent. */
+    readonly?: boolean;
+    /** Autorise les demi-étoiles (sélection au demi-point). */
+    allowHalf?: boolean;
+    size?: RatingSize;
+    /** Attribut name (utile dans un formulaire / pour la sémantique radio). */
+    name?: string;
+    /** Étiquette accessible du groupe. */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    value = 0,
+    max = 5,
+    onChange,
+    readonly = false,
+    allowHalf = false,
+    size = "md",
+    name,
+    label,
+    class: className,
+    ...rest
+  }: RatingProps = $props();
+
+  const iconSize = $derived(size === "sm" ? 16 : size === "lg" ? 28 : 22);
+
+  const classes = $derived(
+    ["st-rating", `st-rating--${size}`, readonly && "st-rating--readonly", className]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
+
+  // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+  const focusedStar = $derived(value > 0 ? Math.ceil(value) : 1);
+
+  function fill(star: number): "full" | "half" | "empty" {
+    if (value >= star) return "full";
+    if (allowHalf && value >= star - 0.5) return "half";
+    return "empty";
+  }
+
+  function commit(next: number) {
+    if (readonly) return;
+    const clamped = Math.max(0, Math.min(max, next));
+    value = clamped;
+    onChange?.(clamped);
+  }
+
+  function onStarClick(event: MouseEvent, star: number) {
+    if (readonly) return;
+    let next = star;
+    if (allowHalf) {
+      const target = event.currentTarget as HTMLElement;
+      const rect = target.getBoundingClientRect();
+      const isLeftHalf = event.clientX - rect.left < rect.width / 2;
+      next = isLeftHalf ? star - 0.5 : star;
+    }
+    // Re-cliquer la valeur déjà sélectionnée remet à zéro.
+    if (next === value) {
+      commit(0);
+      return;
+    }
+    commit(next);
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (readonly) return;
+    const step = allowHalf ? 0.5 : 1;
+    let handled = true;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        commit(Math.min(max, value + step));
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        commit(Math.max(0, value - step));
+        break;
+      case "Home":
+        commit(0);
+        break;
+      case "End":
+        commit(max);
+        break;
+      default:
+        handled = false;
+    }
+    if (handled) event.preventDefault();
+  }
+</script>
+
+<div
+  {...rest}
+  class={classes}
+  role="radiogroup"
+  aria-label={label}
+  aria-readonly={readonly ? "true" : undefined}
+>
+  {#each stars as star (star)}
+    {@const state = fill(star)}
+    <button
+      type="button"
+      class="st-rating__star"
+      class:st-rating__star--full={state === "full"}
+      class:st-rating__star--half={state === "half"}
+      role="radio"
+      name={name}
+      aria-checked={Math.ceil(value) === star ? "true" : "false"}
+      aria-label={`${star} / ${max}`}
+      tabindex={!readonly && star === focusedStar ? 0 : -1}
+      disabled={readonly}
+      onclick={(event) => onStarClick(event, star)}
+      onkeydown={onKeyDown}
+    >
+      {#if state === "half"}
+        <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+      {:else}
+        <Star
+          size={iconSize}
+          strokeWidth={1.75}
+          fill={state === "full" ? "currentColor" : "none"}
+          aria-hidden="true"
+        />
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .st-rating {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-rating__star {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-semantic-text-muted);
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+    padding: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-rating__star--full,
+  .st-rating__star--half {
+    color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
+  }
+
+  .st-rating__star:hover:not(:disabled) {
+    color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
+  }
+
+  .st-rating__star:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-rating__star:disabled {
+    cursor: default;
+  }
+
+  .st-rating--readonly .st-rating__star {
+    cursor: default;
+  }
+</style>