@inkra/react 0.3.0 → 0.4.3

package/dist/slider/index.js

@@ -2,15 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
-export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-valuetext': ariaValueText, className, defaultValue, dir, disabled = false, getValueLabel, inverted = false, min = 0, max = 100, onValueChange, orientation = 'horizontal', seed, size = 'md', thumbLabels, value, variant = 'standard', ...props }, forwardedRef) {
+export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-valuetext': ariaValueText, className, defaultValue, dir, disabled = false, getValueLabel, inverted = false, min = 0, max = 100, name, form, onValueChange, onValueCommit, orientation = 'horizontal', seed, size = 'md', thumbLabels, value, variant = 'standard', ...props }, forwardedRef) {
     const generatedId = useId();
     const rootRef = useRef(null);
     useImperativeHandle(forwardedRef, () => rootRef.current);
-    const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue ?? [min]);
+    const controlled = value !== undefined;
+    const defaultValueRef = useRef([...(defaultValue ?? [min])]);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => [...defaultValueRef.current]);
     const [inferredDir, setInferredDir] = useState('ltr');
     const values = value ?? uncontrolledValue;
+    const valuesRef = useRef(values);
+    const formInputRefs = useRef(new Map());
+    valuesRef.current = values;
     const resolvedDir = dir ?? inferredDir;
     const resolvedSeed = seed ?? `inkra-slider-${generatedId}`;
+    const radixFormId = `${generatedId}-radix-inert-form`;
     useEffect(() => {
         const root = rootRef.current;
         if (dir || !root)
@@ -23,6 +29,38 @@ export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'ari
         }
         return () => observer.disconnect();
     }, [dir]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return undefined;
+        const ownerDocument = root.ownerDocument;
+        const candidate = form ? ownerDocument.getElementById(form) : root.closest('form');
+        const FormElement = ownerDocument.defaultView?.HTMLFormElement;
+        const formElement = FormElement && candidate instanceof FormElement ? candidate : null;
+        if (!formElement)
+            return undefined;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                if (controlled) {
+                    formInputRefs.current.forEach((input, index) => {
+                        input.value = String(valuesRef.current[index] ?? '');
+                    });
+                }
+                else {
+                    setUncontrolledValue([...defaultValueRef.current]);
+                }
+            }, 0);
+        };
+        formElement.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(timer);
+            formElement.removeEventListener('reset', reset);
+        };
+    }, [controlled, form]);
     const percentage = (number) => max > min ? Math.min(100, Math.max(0, (number - min) / (max - min) * 100)) : 0;
     const low = values.length > 1 ? percentage(Math.min(...values)) : 0;
     const high = values.length ? percentage(Math.max(...values)) : 0;
@@ -32,14 +70,20 @@ export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'ari
     const clip = {
         clipPath: orientation === 'horizontal' ? `inset(0 ${end}% 0 ${start}%)` : `inset(${start}% 0 ${end}% 0)`,
     };
-    return _jsxs(SliderPrimitive.Root, { ...props, className: ['inkra-slider', className].filter(Boolean).join(' '), "data-size": size, "data-variant": variant, defaultValue: defaultValue, dir: resolvedDir, disabled: disabled, inverted: inverted, min: min, max: max, onValueChange: next => {
-            if (value === undefined)
+    return _jsxs(SliderPrimitive.Root, { ...props, className: ['inkra-slider', className].filter(Boolean).join(' '), "data-size": size, "data-variant": variant, dir: resolvedDir, disabled: disabled, form: radixFormId, inverted: inverted, min: min, max: max, onValueChange: next => {
+            if (!controlled)
                 setUncontrolledValue(next);
             onValueChange?.(next);
-        }, orientation: orientation, ref: rootRef, value: value, children: [_jsxs(SliderPrimitive.Track, { className: "inkra-slider__track", children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__track-surface", variant: "outline", radius: variant === 'inset' ? 8 : 3, seed: `${resolvedSeed}-track` }), _jsx("span", { "aria-hidden": "true", className: "inkra-slider__range", style: clip, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__range-surface", variant: "selection", seed: `${resolvedSeed}-range` }) })] }), values.map((current, index) => {
+        }, onValueCommit: onValueCommit, orientation: orientation, ref: rootRef, value: values, children: [_jsxs(SliderPrimitive.Track, { className: "inkra-slider__track", children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__track-surface", variant: "outline", radius: variant === 'inset' ? 8 : 3, seed: `${resolvedSeed}-track` }), _jsx("span", { "aria-hidden": "true", className: "inkra-slider__range", style: clip, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__range-surface", variant: "selection", seed: `${resolvedSeed}-range` }) })] }), values.map((current, index) => {
                 const thumbLabel = thumbLabels?.[index];
                 const labelledBy = thumbLabel ? undefined : ariaLabelledBy;
                 const label = thumbLabel ?? (ariaLabel ? `${ariaLabel}${values.length > 1 ? ` ${index + 1}` : ''}` : labelledBy ? undefined : `Value${values.length > 1 ? ` ${index + 1}` : ''}`);
-                return _jsx(SliderPrimitive.Thumb, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }, index);
+                const inputName = name ? values.length > 1 ? `${name}[]` : name : undefined;
+                return _jsxs(SliderPrimitive.unstable_ThumbProvider, { name: inputName, children: [_jsx(SliderPrimitive.unstable_ThumbTrigger, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }), _jsx(SliderPrimitive.unstable_BubbleInput, { disabled: disabled, form: form, name: inputName, ref: input => {
+                                if (input)
+                                    formInputRefs.current.set(index, input);
+                                else
+                                    formInputRefs.current.delete(index);
+                            } })] }, index);
             })] });
 });

package/dist/sortable/index.js

@@ -100,7 +100,7 @@ function SortableContainer({ container, getItemId, renderItem, renderContainerHe
         id: engineContainerId(container.id),
         data: { type: 'inkra-sortable-container', containerId: container.id, disabled },
     });
-    const ids = container.items.map((item) => engineItemId(getItemId(item)));
+    const ids = useMemo(() => container.items.map((item) => engineItemId(getItemId(item))), [container.items, getItemId]);
     const layout = container.layout ?? 'list';
     const acceptingOver = isOver && !disabled;
     return _jsxs(PencilSurface, { as: "section", className: ['inkra-sortable__container', containerClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-layout": layout, "data-over": acceptingOver || undefined, "aria-disabled": disabled || undefined, "aria-label": container.label ?? String(container.id), ref: setNodeRef, seed: `sortable-container-${String(container.id)}`, variant: "paper", children: [acceptingOver && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__container-target", seed: `sortable-container-${String(container.id)}-target`, variant: "selection" }), (renderContainerHeader || container.label) && _jsxs("div", { className: "inkra-sortable__container-header", children: [_jsx("div", { className: "inkra-sortable__container-title", children: renderContainerHeader
@@ -145,7 +145,7 @@ export function Sortable({ autoScroll = true, className, containerClassName, con
     const initialRef = useRef([]);
     const projectedRef = useRef([]);
     const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const visibleContainers = projected ?? cloneSortableContainers(containers);
+    const visibleContainers = projected ?? containers;
     const activeLocation = activeId === null ? null : findSortableLocation(visibleContainers, activeId, getItemId);
     const activeContainer = activeLocation === null
         ? null
@@ -227,12 +227,16 @@ export function Sortable({ autoScroll = true, className, containerClassName, con
     function handleDragOver(event) {
         const overData = getEngineData(event.over);
         if (!event.over || overData?.disabled) {
+            if (sortableContainersEqual(projectedRef.current, initialRef.current, getItemId))
+                return;
             const restored = cloneSortableContainers(initialRef.current);
             projectedRef.current = restored;
             setProjected(restored);
             return;
         }
         const next = getDropProjection(projectedRef.current, event, getItemId);
+        if (sortableContainersEqual(projectedRef.current, next, getItemId))
+            return;
         projectedRef.current = next;
         setProjected(next);
     }

package/dist/sparkline/index.js

@@ -36,10 +36,25 @@ export const Sparkline = forwardRef(function Sparkline({ data, type = 'line', wi
         value: point.value === null ? null : Math.min(max ?? Infinity, Math.max(min ?? -Infinity, point.value)),
     })), [max, min, points]);
     const geometry = useMemo(() => createSparklineGeometry(boundedPoints, width, height), [boundedPoints, height, width]);
-    const [activeIndex, setActiveIndex] = useState(values.length ? [...points].reverse().find(point => point.value !== null)?.index ?? null : null);
+    const [activeIndex, setActiveIndex] = useState(() => {
+        for (let index = points.length - 1; index >= 0; index--)
+            if (points[index].value !== null)
+                return index;
+        return null;
+    });
     const activePoint = activeIndex === null ? null : points[activeIndex] ?? null;
     const effectiveShowPoints = showPoints || values.length === 1;
-    const summary = values.length === 0 ? 'No data' : `Current ${values[values.length - 1]}, min ${Math.min(...values)}, max ${Math.max(...values)}`;
+    const summary = useMemo(() => {
+        if (!values.length)
+            return 'No data';
+        let minimum = values[0];
+        let maximum = values[0];
+        for (let index = 1; index < values.length; index++) {
+            minimum = Math.min(minimum, values[index]);
+            maximum = Math.max(maximum, values[index]);
+        }
+        return `Current ${values[values.length - 1]}, min ${minimum}, max ${maximum}`;
+    }, [values]);
     const onKeyDown = (event) => {
         if (!points.length || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
             return;

package/dist/sparkline/model.js

@@ -4,11 +4,18 @@ export function normalizeSparklineData(data) {
     return data.map((value, index) => ({ index, value: typeof value === 'number' && Number.isFinite(value) ? value : null }));
 }
 export function sparklineDomain(points) {
-    const values = points.flatMap(point => point.value === null ? [] : [point.value]);
-    if (values.length === 0)
+    let min = Infinity;
+    let max = -Infinity;
+    let hasValue = false;
+    for (const point of points) {
+        if (point.value === null)
+            continue;
+        hasValue = true;
+        min = Math.min(min, point.value);
+        max = Math.max(max, point.value);
+    }
+    if (!hasValue)
         return [0, 1];
-    const min = Math.min(...values);
-    const max = Math.max(...values);
     if (min === max) {
         const pad = Math.abs(min) * 0.12 || 1;
         return [min - pad, max + pad];

package/dist/styles/accordion.css

@@ -0,0 +1,228 @@
+.inkra-accordion {
+  color: var(--inkra-ink);
+  width: 100%;
+}
+
+.inkra-accordion[data-orientation="horizontal"] {
+  display: flex;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.inkra-accordion__item {
+  min-width: 0;
+  position: relative;
+}
+
+.inkra-accordion[data-orientation="horizontal"] > .inkra-accordion__item {
+  display: flex;
+  flex: 0 0 auto;
+}
+
+.inkra-accordion__header {
+  font: inherit;
+  margin: 0;
+}
+
+.inkra-accordion__trigger {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  font-weight: var(--inkra-weight-regular);
+  gap: var(--inkra-space-3);
+  justify-content: space-between;
+  letter-spacing: var(--inkra-letter-spacing);
+  line-height: var(--inkra-line-ui);
+  min-height: var(--inkra-touch-target);
+  min-width: var(--inkra-touch-target);
+  padding: var(--inkra-space-2) var(--inkra-space-3);
+  position: relative;
+  text-align: start;
+  width: 100%;
+}
+
+.inkra-accordion__trigger:focus-visible {
+  outline: 0;
+}
+
+.inkra-accordion__trigger:disabled,
+.inkra-accordion__item[data-disabled] .inkra-accordion__trigger {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.inkra-accordion__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+
+  display: block !important;
+  inset: var(--inkra-focus-width);
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+  z-index: 2;
+}
+
+.inkra-accordion__trigger:focus-visible .inkra-accordion__focus-ring {
+  opacity: 1;
+}
+
+.inkra-accordion__trigger-label {
+  min-width: 0;
+  position: relative;
+}
+
+.inkra-accordion__trigger-icon {
+  align-items: center;
+  color: var(--inkra-ink-muted);
+  display: inline-flex;
+  flex: 0 0 var(--inkra-icon-md);
+  height: var(--inkra-icon-md);
+  justify-content: center;
+  pointer-events: none;
+  transition: transform var(--inkra-motion-fast) var(--inkra-ease);
+  width: var(--inkra-icon-md);
+}
+
+.inkra-accordion__trigger[data-state="open"] .inkra-accordion__trigger-icon {
+  transform: rotate(180deg);
+}
+
+.inkra-accordion__trigger-glyph {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.inkra-accordion__content {
+  overflow: hidden;
+}
+
+.inkra-accordion__content[data-state="open"] {
+  animation: inkra-accordion-content-down var(--inkra-motion-normal) var(--inkra-ease);
+}
+
+.inkra-accordion__content[data-state="closed"] {
+  animation: inkra-accordion-content-up var(--inkra-motion-normal) var(--inkra-ease) both;
+  height: 0;
+}
+
+.inkra-accordion__content-body {
+  box-sizing: border-box;
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+  padding: var(--inkra-space-2) var(--inkra-space-3) var(--inkra-space-4);
+}
+
+.inkra-accordion__content[data-state="open"] > .inkra-accordion__content-body {
+  animation: inkra-accordion-body-in var(--inkra-motion-normal) var(--inkra-ease);
+}
+
+.inkra-accordion__content[data-state="closed"] > .inkra-accordion__content-body {
+  animation: inkra-accordion-body-out var(--inkra-motion-normal) var(--inkra-ease) both;
+  pointer-events: none;
+}
+
+.inkra-accordion__content-body.inkra-accordion__content[data-state="closed"] {
+  padding: 0;
+}
+
+@keyframes inkra-accordion-body-in {
+  from { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes inkra-accordion-body-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
+}
+
+.inkra-accordion__divider {
+  color: var(--inkra-border);
+  inset-block-end: -4px;
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-accordion[data-orientation="horizontal"] .inkra-accordion__divider {
+  inset-block: 0;
+  inset-inline-end: -4px;
+  inset-inline-start: auto;
+}
+
+@keyframes inkra-accordion-content-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes inkra-accordion-content-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@keyframes inkra-accordion-content-open-horizontal {
+  from { width: 0; }
+  to { width: var(--radix-accordion-content-width); }
+}
+
+@keyframes inkra-accordion-content-close-horizontal {
+  from { width: var(--radix-accordion-content-width); }
+  to { width: 0; }
+}
+
+.inkra-accordion[data-orientation="horizontal"] .inkra-accordion__content[data-state="open"] {
+  animation-name: inkra-accordion-content-open-horizontal;
+}
+
+.inkra-accordion[data-orientation="horizontal"] .inkra-accordion__content[data-state="closed"] {
+  animation-name: inkra-accordion-content-close-horizontal;
+  height: auto;
+  width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-accordion__content,
+  .inkra-accordion__content-body {
+    animation: none !important;
+  }
+
+  .inkra-accordion__focus-ring,
+  .inkra-accordion__trigger-icon {
+    transition-duration: 0ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-pencil-surface.inkra-accordion__focus-ring {
+    display: none !important;
+  }
+
+  .inkra-accordion__trigger:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: calc(-1 * var(--inkra-focus-width));
+  }
+
+  .inkra-accordion__trigger-icon::before {
+    content: "+";
+  }
+
+  .inkra-accordion__trigger[data-state="open"] .inkra-accordion__trigger-icon::before {
+    content: "−";
+  }
+}
+
+@media print {
+  .inkra-accordion__content,
+  .inkra-accordion__content-body {
+    animation: none !important;
+  }
+}

package/dist/styles/alert-dialog.css

@@ -0,0 +1,139 @@
+.inkra-alert-dialog__backdrop {
+  animation: inkra-alert-dialog-backdrop-in var(--inkra-motion-normal) var(--inkra-ease);
+  background: var(--inkra-overlay);
+  inset: 0;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-alert-dialog__backdrop[data-state="closed"] {
+  animation: inkra-alert-dialog-backdrop-out var(--inkra-motion-normal) var(--inkra-ease);
+}
+
+.inkra-alert-dialog__content {
+  animation: inkra-alert-dialog-content-in var(--inkra-motion-normal) var(--inkra-ease);
+  inset-block-start: 50%;
+  left: 50%;
+  max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
+  outline: 0;
+  position: fixed;
+  transform: translate(-50%, -50%);
+  width: min(32rem, calc(100vw - var(--inkra-space-8)));
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+
+.inkra-alert-dialog__content[data-state="closed"] {
+  animation: inkra-alert-dialog-content-out var(--inkra-motion-normal) var(--inkra-ease);
+  pointer-events: none;
+}
+
+.inkra-alert-dialog__backdrop[data-state],
+.inkra-alert-dialog__content[data-state] { animation-fill-mode: both; }
+
+.inkra-alert-dialog__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  inset: var(--inkra-focus-width);
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  z-index: 2;
+}
+
+.inkra-alert-dialog__content:focus > .inkra-alert-dialog__focus-ring {
+  opacity: 1;
+}
+
+.inkra-alert-dialog__surface,
+.inkra-alert-dialog__layout {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  min-height: 0;
+  width: 100%;
+}
+
+.inkra-alert-dialog__surface { color: var(--inkra-ink); overflow: hidden; }
+.inkra-alert-dialog__layout { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.inkra-alert-dialog__layout:has(> .inkra-alert-dialog__body) { overflow: hidden; }
+
+.inkra-alert-dialog__header,
+.inkra-alert-dialog__body,
+.inkra-alert-dialog__footer {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--inkra-space-5);
+  position: relative;
+}
+
+.inkra-alert-dialog__header,
+.inkra-alert-dialog__footer { flex: none; }
+.inkra-alert-dialog__heading { display: grid; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
+.inkra-alert-dialog__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.inkra-alert-dialog__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inkra-space-3); justify-content: flex-end; }
+.inkra-alert-dialog__footer[data-align="start"] { justify-content: flex-start; }
+.inkra-alert-dialog__footer[data-align="center"] { justify-content: center; }
+.inkra-alert-dialog__footer > .inkra-button { max-width: 100%; }
+
+.inkra-alert-dialog__title {
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-display);
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+}
+
+.inkra-alert-dialog__description {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+  margin: 0;
+}
+
+.inkra-alert-dialog__divider { height: 8px; inset-inline: 0; pointer-events: none; position: absolute; width: 100%; }
+.inkra-alert-dialog__header > .inkra-alert-dialog__divider { bottom: -4px; }
+.inkra-alert-dialog__footer > .inkra-alert-dialog__divider { top: -4px; }
+
+@keyframes inkra-alert-dialog-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes inkra-alert-dialog-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes inkra-alert-dialog-content-in {
+  from { opacity: 0; transform: translate(-50%, calc(-50% + var(--inkra-space-2))) scale(.98); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+@keyframes inkra-alert-dialog-content-out {
+  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  to { opacity: 0; transform: translate(-50%, calc(-50% + var(--inkra-space-2))) scale(.98); }
+}
+
+@media (max-width: 30rem) {
+  .inkra-alert-dialog__content {
+    width: calc(100vw - var(--inkra-space-4));
+  }
+  .inkra-alert-dialog__header,
+  .inkra-alert-dialog__body,
+  .inkra-alert-dialog__footer { padding: var(--inkra-space-4); }
+}
+
+@media (max-height: 30rem) {
+  .inkra-alert-dialog__content { max-height: calc(100dvh - var(--inkra-space-4)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-alert-dialog__backdrop,
+  .inkra-alert-dialog__content { animation: none !important; }
+}
+
+@media print {
+  .inkra-alert-dialog__backdrop,
+  .inkra-alert-dialog__content { animation: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-alert-dialog__backdrop { background: CanvasText; opacity: .25; }
+  .inkra-alert-dialog__surface { background: Canvas; border: 1px solid CanvasText; }
+  .inkra-pencil-surface.inkra-alert-dialog__focus-ring { display: none !important; }
+  .inkra-alert-dialog__content:focus { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
+  .inkra-alert-dialog__header[data-divided] { border-bottom: 1px solid CanvasText; }
+  .inkra-alert-dialog__footer[data-divided] { border-top: 1px solid CanvasText; }
+}

package/dist/styles/audio-player.css

@@ -0,0 +1,22 @@
+.inkra-audio-player { box-sizing: border-box; color: var(--inkra-ink); container-type: inline-size; display: grid; gap: var(--inkra-space-3); min-inline-size: 0; padding: var(--inkra-space-4); width: min(100%, 42rem); }
+.inkra-audio-player > audio { height: 1px; opacity: 0; position: absolute; width: 1px; }
+.inkra-audio-player__controls { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inkra-space-2); min-inline-size: 0; }
+.inkra-audio-player__seek { flex: 1 1 12rem; min-inline-size: 8rem; }
+.inkra-audio-player__volume { flex: 0 1 6rem; min-inline-size: 4rem; }
+.inkra-audio-player__seek .inkra-slider, .inkra-audio-player__volume .inkra-slider { min-inline-size: 0; width: 100%; }
+.inkra-audio-player__seek .inkra-slider { --inkra-slider-track-size: 28px; }
+.inkra-audio-player__volume .inkra-slider { --inkra-slider-track-size: 24px; }
+.inkra-audio-player__settings { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--inkra-space-2); min-inline-size: 0; }
+.inkra-audio-player__time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 7rem; max-inline-size: 100%; overflow-wrap: anywhere; text-align: center; }
+.inkra-audio-player__settings > .inkra-select__trigger { flex: none; min-width: 5.5rem; }
+.inkra-audio-player__message { color: var(--inkra-ink-muted); margin: 0; }
+.inkra-audio-player__sr-only { block-size: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; position: absolute; white-space: nowrap; inline-size: 1px; }
+@container (max-width: 40rem) { .inkra-audio-player__controls { align-items: stretch; } .inkra-audio-player__time { flex: 1 0 100%; min-inline-size: 0; order: 4; text-align: start; } .inkra-audio-player__seek { flex-basis: 10rem; } .inkra-audio-player__settings { flex: 1 1 100%; order: 5; } .inkra-audio-player__volume { flex: 1 1 8rem; } }
+@container (max-width: 20rem) { .inkra-audio-player__controls { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); } .inkra-audio-player__seek { min-inline-size: 0; } .inkra-audio-player__time, .inkra-audio-player__settings { grid-column: 1 / -1; } .inkra-audio-player__settings { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); width: 100%; } .inkra-audio-player__volume { min-inline-size: 0; } .inkra-audio-player__settings > .inkra-select__trigger { grid-column: 1 / -1; min-width: 0; width: 100%; } }
+@media (forced-colors: active) {
+  .inkra-audio-player__controls { color: ButtonText; }
+  .inkra-audio-player__time, .inkra-audio-player__message { color: CanvasText; }
+  .inkra-audio-player__controls .inkra-slider__track-surface,
+  .inkra-audio-player__controls .inkra-slider__range-surface,
+  .inkra-audio-player__controls .inkra-slider__thumb-surface { forced-color-adjust: none; }
+}