@idyeah/diya 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to `@idyeah/diya` are documented here. The format is based
 on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2026-11-11
+
+### Fixed
+
+- `Progress`: under Reduce Motion, indeterminate progress no longer freezes as
+  a 35% bar or a 28% ring, which read as a stuck amount. It shows a full bar or
+  ring that fades gently between faint and clear, so it still reads as working.
+  Without Reduce Motion nothing changes. The indeterminate bar's width now comes
+  from CSS instead of an inline style, and the rule uses no `!important`, so
+  your own styles can still restyle it.
+- `Drawer`: the docs no longer say it slides in from the side, which it doesn't
+  in 1.0. The description and the `side` prop now say where it sits; `api.json`
+  and the type declarations follow.
+
 ## [1.0.0] - 2026-11-07
 
 First public release, under the MIT License.
@@ -314,4 +328,5 @@ change in any release. The README lists the public tokens.
 - Chatbot and Data Viz (`DataViz`, `Chart`) are `experimental`: outside semver
   until their API settles.
 
+[1.0.1]: https://github.com/idyeah-studio/diya/releases/tag/v1.0.1
 [1.0.0]: https://github.com/idyeah-studio/diya/releases/tag/v1.0.0

package/dist/api.json

@@ -1515,7 +1515,7 @@
       "propsType": "DiyaProviderProps"
     },
     "Drawer": {
-      "description": "A modal panel that slides in from the side, traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element.",
+      "description": "A modal panel at the side of the page that traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element.",
       "entry": ".",
       "extendsDom": "dialog",
       "props": {
@@ -1566,7 +1566,7 @@
         },
         "side": {
           "default": "right",
-          "description": "Edge the drawer slides from; defaults to 'right'.",
+          "description": "Which edge of the page the drawer sits on; defaults to 'right'.",
           "required": false,
           "type": "\"left\" | \"right\"",
           "values": [
@@ -7273,5 +7273,5 @@
     "WizardProps": "Omit<HTMLAttributes<HTMLElement>, \"children\"> & { steps: readonly WizardStep[]; activeStep: number; onStepChange: (step: number) => void; onComplete: () => void; orientation?: \"horizontal\" | \"vertical\"; showStepCount?: boolean; loading?: boolean; label?: string; backLabel?: string; nextLabel?: string; completeLabel?: string; noValidate?: boolean; headingLevel?: 1 | 2 | 3 | 4 | 5 | 6; }",
     "WizardStep": "{ id: string; label: string; title?: string; description?: ReactNode; content: ReactNode; }"
   },
-  "version": "1.0.0"
+  "version": "1.0.1"
 }

package/dist/progress/Progress.js

@@ -10,5 +10,5 @@ export const Progress = forwardRef(function Progress({ value, variant = 'linear'
     const locale = useDiyaLocale();
     const indeterminate = forced || value === undefined || !Number.isFinite(value);
     const amount = indeterminate ? 0 : Math.min(100, Math.max(0, value));
-    return _jsxs("div", { ...props, ref: ref, className: cx('diya-progress', className), "data-variant": variant, "data-indeterminate": indeterminate, children: [_jsx("div", { className: "diya-progress-meter", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : amount, "aria-valuetext": indeterminate ? t.inProgress : undefined, children: variant === 'linear' ? _jsx("div", { className: "diya-progress-track", children: _jsx("span", { style: { width: indeterminate ? '35%' : `${amount}%` } }) }) : _jsxs("svg", { viewBox: "0 0 100 100", "aria-hidden": "true", children: [_jsx("circle", { className: "diya-progress-track-circle", cx: "50", cy: "50", r: "42" }), _jsx("circle", { className: "diya-progress-fill-circle", cx: "50", cy: "50", r: "42", pathLength: "100", strokeDasharray: "100", strokeDashoffset: indeterminate ? 72 : 100 - amount })] }) }), showValue && !indeterminate && _jsx("span", { className: "diya-progress-value", "aria-hidden": "true", children: new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 }).format(Math.round(amount) / 100) })] });
+    return _jsxs("div", { ...props, ref: ref, className: cx('diya-progress', className), "data-variant": variant, "data-indeterminate": indeterminate, children: [_jsx("div", { className: "diya-progress-meter", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : amount, "aria-valuetext": indeterminate ? t.inProgress : undefined, children: variant === 'linear' ? _jsx("div", { className: "diya-progress-track", children: _jsx("span", { style: indeterminate ? undefined : { width: `${amount}%` } }) }) : _jsxs("svg", { viewBox: "0 0 100 100", "aria-hidden": "true", children: [_jsx("circle", { className: "diya-progress-track-circle", cx: "50", cy: "50", r: "42" }), _jsx("circle", { className: "diya-progress-fill-circle", cx: "50", cy: "50", r: "42", pathLength: "100", strokeDasharray: "100", strokeDashoffset: indeterminate ? 72 : 100 - amount })] }) }), showValue && !indeterminate && _jsx("span", { className: "diya-progress-value", "aria-hidden": "true", children: new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 }).format(Math.round(amount) / 100) })] });
 });

package/dist/styles.css

@@ -1819,12 +1819,19 @@
 .diya-root .diya-progress-track-circle { stroke: var(--diya-color-selected); }
 .diya-root .diya-progress-fill-circle { stroke: var(--diya-color-accent); stroke-linecap: round; }
 .diya-root .diya-progress[data-variant='circular'] .diya-progress-value { position: absolute; inset: 0; display: grid; place-items: center; }
-.diya-root .diya-progress[data-indeterminate='true'][data-variant='linear'] .diya-progress-track > span { animation: diya-progress-travel 1.8s ease-in-out infinite alternate; }
+.diya-root .diya-progress[data-indeterminate='true'][data-variant='linear'] .diya-progress-track > span { width: 35%; animation: diya-progress-travel 1.8s ease-in-out infinite alternate; }
 .diya-root .diya-progress[data-indeterminate='true'][data-variant='circular'] svg { animation: diya-progress-spin 1.4s linear infinite; }
 @keyframes diya-progress-travel { from { transform: translateX(-100%); } to { transform: translateX(285%); } }
 @keyframes diya-progress-spin { to { transform: rotate(270deg); } }
-@media (prefers-reduced-motion: reduce) { .diya-root .diya-progress[data-indeterminate='true'] svg,
-.diya-root  .diya-progress[data-indeterminate='true'] .diya-progress-track > span { animation: none !important; } }
+/* Under Reduce Motion, indeterminate progress stops travelling or spinning and
+   breathes in place instead: a full bar or ring that fades between faint and
+   clear, so it reads as "working", never as a stuck amount or as done. */
+@keyframes diya-progress-breathe { from { opacity: .25; } to { opacity: .7; } }
+@media (prefers-reduced-motion: reduce) {
+  .diya-root .diya-progress[data-indeterminate='true'][data-variant='circular'] svg { animation: none; }
+  .diya-root .diya-progress[data-indeterminate='true'][data-variant='circular'] .diya-progress-fill-circle { stroke-dashoffset: 0; animation: diya-progress-breathe 2s ease-in-out infinite alternate; }
+  .diya-root .diya-progress[data-indeterminate='true'][data-variant='linear'] .diya-progress-track > span { width: 100%; transform: none; animation: diya-progress-breathe 2s ease-in-out infinite alternate; }
+}
 @media (forced-colors: active) { .diya-root .diya-progress-track { outline: 1px solid CanvasText; } .diya-root .diya-progress-track > span { background: Highlight; } .diya-root .diya-progress-fill-circle { stroke: Highlight; } }
 
 

package/dist/workflow/Drawer.d.ts

@@ -20,12 +20,12 @@ export type DrawerProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'title'
     children: ReactNode;
     /** Content pinned to the bottom, usually action buttons. */
     footer?: ReactNode;
-    /** Edge the drawer slides from; defaults to 'right'. */
+    /** Which edge of the page the drawer sits on; defaults to 'right'. */
     side?: 'left' | 'right';
     /** Shows the close icon button in the header; defaults to true. */
     showClose?: boolean;
 };
-/** A modal panel that slides in from the side, traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element. */
+/** A modal panel at the side of the page that traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element. */
 export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DialogHTMLAttributes<HTMLDialogElement>, "children" | "open" | "title"> & {
     /** Whether the drawer is shown; the caller owns this state. */
     open: boolean;
@@ -41,7 +41,7 @@ export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<Dial
     children: ReactNode;
     /** Content pinned to the bottom, usually action buttons. */
     footer?: ReactNode;
-    /** Edge the drawer slides from; defaults to 'right'. */
+    /** Which edge of the page the drawer sits on; defaults to 'right'. */
     side?: "left" | "right";
     /** Shows the close icon button in the header; defaults to true. */
     showClose?: boolean;

package/dist/workflow/Drawer.js

@@ -7,7 +7,7 @@ import { useDiyaMessages } from '../DiyaProvider.js';
 import { cx } from '../internal/cx.js';
 import { composeRefs } from '../internal/slot.js';
 import { drawerMessages } from './drawer-messages.js';
-/** A modal panel that slides in from the side, traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element. */
+/** A modal panel at the side of the page that traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element. */
 export const Drawer = forwardRef(function Drawer({ open, onOpenChange, title, headingLevel = 3, description, children, footer, side = 'right', showClose = true, className, onCancel, onClose, onClick, ...props }, ref) {
     const t = useDiyaMessages('drawer', drawerMessages);
     const dialog = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idyeah/diya",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "type": "module",
   "description": "React components and patterns: Light, Dark and Glass. MIT.",