oneslash-design-system 2.0.2 → 2.0.4

package/dist/components/button.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-interface ButtonProps {
+/** `aria-*`, `data-*`, `id` and `title` are forwarded to the rendered `<button>` */
+interface ButtonProps extends React.AriaAttributes {
+    id?: string;
+    title?: string;
+    [dataAttr: `data-${string}`]: string | number | boolean | undefined;
     size: 'tiny' | 'small' | 'medium' | 'large';
     type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
     color?: 'default' | 'danger';
@@ -14,5 +18,5 @@ interface ButtonProps {
     /** Shows a spinner in the icon slot, keeps the label, and disables the button */
     loading?: boolean;
 }
-export default function Button({ size, type, color, state, label, secondLabel, decoIcon, actionIcon, onClickButton, onClickActionIcon, className, loading, }: ButtonProps): React.JSX.Element;
+export default function Button({ size, type, color, state, label, secondLabel, decoIcon, actionIcon, onClickButton, onClickActionIcon, className, loading, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/dist/components/button.jsx

@@ -1,10 +1,21 @@
 'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
 import * as LucideIcons from 'lucide-react';
 import { LoadingSmall } from './loadingScreen';
 import { focusRing, focusRingDanger, pressFeedback, stateTransition } from './sharedStyles';
 export default function Button(_a) {
-    var size = _a.size, type = _a.type, _b = _a.color, color = _b === void 0 ? 'default' : _b, state = _a.state, label = _a.label, secondLabel = _a.secondLabel, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.loading, loading = _d === void 0 ? false : _d;
+    var size = _a.size, type = _a.type, _b = _a.color, color = _b === void 0 ? 'default' : _b, state = _a.state, label = _a.label, secondLabel = _a.secondLabel, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, rest = __rest(_a, ["size", "type", "color", "state", "label", "secondLabel", "decoIcon", "actionIcon", "onClickButton", "onClickActionIcon", "className", "loading"]);
     // Synchronous lookup so icons render on the first paint
     var IconLeft = decoIcon ? LucideIcons[decoIcon] : null;
     var IconRight = actionIcon ? LucideIcons[actionIcon] : null;
@@ -67,7 +78,7 @@ export default function Button(_a) {
     };
     // Hover is pure CSS; `state="hovered"` and `state="focused"` only exist to show those states in docs
     var buttonClasses = "\n    flex flex-row items-center rounded-control justify-between ".concat(stateTransition, " ").concat(pressFeedback, "\n    ").concat(color === 'danger' ? focusRingDanger : focusRing, "\n    ").concat(sizeClasses, "\n    ").concat(state === 'selected' ? stateClasses.selected : '', "\n    ").concat(state === 'enabled' || state === 'hovered' ? "".concat(baseTypeClasses, " ").concat(loading ? 'cursor-wait' : "".concat(stateClasses.enabled, " ").concat(hoverTypeClasses)) : '', "\n    ").concat(state === 'focused' ? "".concat(baseTypeClasses, " ").concat(hoverTypeClasses, " ").concat(stateClasses.focused) : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : '', "\n    ").concat(className, "\n  ");
-    return (<button type="button" className={buttonClasses} disabled={state === 'disabled' || loading} aria-busy={loading || undefined} onClick={onClickButton}>
+    return (<button {...rest} type="button" className={buttonClasses} disabled={state === 'disabled' || loading} aria-busy={loading || undefined} onClick={onClickButton}>
       {/* Group IconLeft and label in a flex container for left alignment */}
       <div className={"flex items-center ".concat(size === 'tiny' ? 'gap-0.5' : 'gap-1')}>
         {loading ? (<LoadingSmall size={spinnerSize}/>) : (IconLeft && <IconLeft className={"".concat(sizeIcon, " flex-shrink-0")} strokeWidth={2}/>)}

package/dist/components/iconButton.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import * as LucideIcons from 'lucide-react';
-interface IconButtonProps {
+/** `aria-*`, `data-*`, `id` and `title` are forwarded to the rendered `<button>` */
+interface IconButtonProps extends React.AriaAttributes {
+    id?: string;
+    title?: string;
+    [dataAttr: `data-${string}`]: string | number | boolean | undefined;
     color: "primary" | "secondary" | "tertiary" | "iconOnly";
     state: "enabled" | "selected" | "disabled";
     size: "large" | "medium" | "small" | "tiny";
@@ -11,5 +15,5 @@ interface IconButtonProps {
     ariaLabel?: string;
 }
 export default function IconButton({ color, state, size, iconName, onClick, loading, // Default to false
-ariaLabel, }: IconButtonProps): React.JSX.Element;
+ariaLabel, ...rest }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/components/iconButton.jsx

@@ -1,11 +1,22 @@
 'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
 import * as LucideIcons from 'lucide-react';
 import { LoadingSmall } from './loadingScreen';
 import { focusRing, pressFeedback, stateTransition } from './sharedStyles';
 export default function IconButton(_a) {
     var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick, _b = _a.loading, loading = _b === void 0 ? false : _b, // Default to false
-    ariaLabel = _a.ariaLabel;
+    ariaLabel = _a.ariaLabel, rest = __rest(_a, ["color", "state", "size", "iconName", "onClick", "loading", "ariaLabel"]);
     var Icon = LucideIcons[iconName];
     // "ChevronDown" -> "Chevron Down"
     var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : String(iconName).replace(/([a-z])([A-Z0-9])/g, '$1 $2');
@@ -67,7 +78,7 @@ export default function IconButton(_a) {
             : state === 'selected'
                 ? 'cursor-pointer'
                 : 'cursor-pointer';
-    return (<button type="button" className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " ").concat(stateTransition, " ").concat(pressFeedback, " ").concat(focusRing, " flex items-center justify-center")} disabled={isDisabled || loading} // Disable button during loading
+    return (<button {...rest} type="button" className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " ").concat(stateTransition, " ").concat(pressFeedback, " ").concat(focusRing, " flex items-center justify-center")} disabled={isDisabled || loading} // Disable button during loading
      onClick={onClick} aria-label={loading ? 'Loading' : label}>
       {loading ? (<LoadingSmall size={size}/>) : (Icon && <Icon className={iconSizeClasses[size]} strokeWidth={2}/>)}
     </button>);

package/dist/components/popover.jsx

@@ -1,9 +1,10 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { overlayHidden, overlayTransition, overlayVisible } from './sharedStyles';
 import { useOverlayTransition } from './useOverlayTransition';
+import Menu from './menu';
 export default function Popover(_a) {
     var id = _a.id, anchorEl = _a.anchorEl, open = _a.open, onClose = _a.onClose, children = _a.children;
     var _b = useState(null), popoverElement = _b[0], setPopoverElement = _b[1];
@@ -44,11 +45,17 @@ export default function Popover(_a) {
     }, []);
     if (!mounted || !hasMounted || !anchorEl)
         return null;
+    // A Menu brings its own surface (4px inset, container corners), so the
+    // popover adds none around it rather than doubling the padding and edges.
+    var isMenu = isValidElement(children) && children.type === Menu;
+    var panelClass = isMenu
+        ? ''
+        : 'bg-background-overlay dark:ring-1 dark:ring-misc-divider rounded-control shadow-overlay p-2';
     // Render popover in a portal to prevent layout shifts and positioning issues
     // dark-only edge: a ring only in dark mode, so it keeps a dark: variant (it follows whatever dark variant the app's preset/@theme defines, class-only or OS-aware)
     return createPortal(<div id={id} ref={setPopoverElement} style={styles.popper} {...attributes.popper} className="z-[var(--os-z-overlay)]" role="dialog">
       {/* Popper owns the outer transform, so the fade and scale go on this inner panel */}
-      <div className={"bg-background-overlay dark:ring-1 dark:ring-misc-divider rounded-control shadow-overlay p-2 origin-top-left\n          ".concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
+      <div className={"".concat(panelClass, " origin-top-left\n          ").concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
         {children}
       </div>
     </div>, document.body // Mounting the popover in the document body for isolation

package/dist/components/tag.d.ts

@@ -10,6 +10,8 @@ interface TagProps {
     secondLabel?: string;
     iconName?: IconName;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Only applies to a clickable tag: dims it, drops it from the tab order and ignores clicks */
+    disabled?: boolean;
 }
-export default function Tag({ variant, size, state, color, label, secondLabel, iconName, onClick, }: TagProps): JSX.Element;
+export default function Tag({ variant, size, state, color, label, secondLabel, iconName, onClick, disabled, }: TagProps): JSX.Element;
 export {};

package/dist/components/tag.jsx

@@ -47,7 +47,7 @@ var colorConfig = {
     },
 };
 export default function Tag(_a) {
-    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, color = _a.color, label = _a.label, secondLabel = _a.secondLabel, iconName = _a.iconName, onClick = _a.onClick;
+    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, color = _a.color, label = _a.label, secondLabel = _a.secondLabel, iconName = _a.iconName, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
     // Get icon directly from icons map
     var Icon = iconName ? icons[iconName] : null;
     // Size and padding
@@ -114,20 +114,22 @@ export default function Tag(_a) {
     }
     // Dot color
     var dotColor = (colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.dot) || colorConfig.default.dot;
-    // Hover (only when not selected, no color, and onClick is provided)
-    var hoverClasses = !isSelected && !color && variant === 'contained' && onClick
+    var isDisabled = !!onClick && disabled;
+    // Hover (only when not selected, not disabled, no color, and onClick is provided)
+    var hoverClasses = !isSelected && !isDisabled && !color && variant === 'contained' && onClick
         ? 'hover:bg-background-accent200'
         : '';
-    var cursorClass = onClick && !isSelected ? 'cursor-pointer' : '';
+    var cursorClass = isDisabled ? 'cursor-not-allowed opacity-50' : onClick && !isSelected ? 'cursor-pointer' : '';
     // inline-flex so a tag wraps its content instead of stretching to its container
     var baseClasses = "inline-flex items-center gap-1 rounded-full whitespace-nowrap ".concat(stateTransition);
     // A clickable tag is a keyboard-reachable toggle button
     var interactiveProps = onClick
         ? {
             role: 'button',
-            tabIndex: 0,
+            tabIndex: isDisabled ? -1 : 0,
             'aria-pressed': isSelected,
-            onClick: onClick,
+            'aria-disabled': isDisabled || undefined,
+            onClick: isDisabled ? undefined : onClick,
             onKeyDown: function (e) {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
@@ -136,7 +138,7 @@ export default function Tag(_a) {
             },
         }
         : {};
-    return (<div className={"".concat(baseClasses, " ").concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass, " ").concat(onClick ? "".concat(focusRing, " ").concat(pressFeedbackAny) : '')} {...interactiveProps}>
+    return (<div className={"".concat(baseClasses, " ").concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass, " ").concat(onClick ? focusRing : '', " ").concat(onClick && !isDisabled ? pressFeedbackAny : '')} {...interactiveProps}>
       {variant === 'dot' && (<span className={"w-3 h-3 rounded-full flex-shrink-0 ".concat(dotColor)}/>)}
       {Icon && variant !== 'dot' && <Icon className={"".concat(size === 'tiny' ? 'w-3 h-3' : 'w-4 h-4', " flex-shrink-0")} strokeWidth={2}/>}
       <div className="flex flex-col text-center">

package/dist/components/textField.d.ts

@@ -19,6 +19,10 @@ interface TextFieldProps {
     required?: boolean;
     size?: 'large' | 'medium' | 'small' | 'tiny';
     placeholder?: string;
+    name?: string;
+    /** Browser autofill hint, e.g. "username" or "current-password". Defaults to "off". */
+    autoComplete?: string;
+    tabIndex?: number;
 }
-export default function TextField({ id, label, value, type, onChange, onBlur, onFocus, onKeyDown, onSubmit, autoFocus, multiline, maxRows, disabled, error, errorText, required, size, placeholder, }: TextFieldProps): React.JSX.Element;
+export default function TextField({ id, label, value, type, onChange, onBlur, onFocus, onKeyDown, onSubmit, autoFocus, multiline, maxRows, disabled, error, errorText, required, size, placeholder, name, autoComplete, tabIndex, }: TextFieldProps): React.JSX.Element;
 export {};

package/dist/components/textField.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { stateTransition } from './sharedStyles';
 export default function TextField(_a) {
-    var id = _a.id, label = _a.label, value = _a.value, _b = _a.type, type = _b === void 0 ? 'text' : _b, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onSubmit = _a.onSubmit, _c = _a.autoFocus, autoFocus = _c === void 0 ? false : _c, _d = _a.multiline, multiline = _d === void 0 ? false : _d, _e = _a.maxRows, maxRows = _e === void 0 ? 6 : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.errorText, errorText = _h === void 0 ? 'This field is required' : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.size, size = _k === void 0 ? 'medium' : _k, placeholder = _a.placeholder;
+    var id = _a.id, label = _a.label, value = _a.value, _b = _a.type, type = _b === void 0 ? 'text' : _b, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onSubmit = _a.onSubmit, _c = _a.autoFocus, autoFocus = _c === void 0 ? false : _c, _d = _a.multiline, multiline = _d === void 0 ? false : _d, _e = _a.maxRows, maxRows = _e === void 0 ? 6 : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.errorText, errorText = _h === void 0 ? 'This field is required' : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.size, size = _k === void 0 ? 'medium' : _k, placeholder = _a.placeholder, name = _a.name, _l = _a.autoComplete, autoComplete = _l === void 0 ? 'off' : _l, tabIndex = _a.tabIndex;
     var handleKeyDown = function (e) {
         // Ctrl+Enter or Cmd+Enter to submit
         if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && onSubmit) {
@@ -62,7 +62,7 @@ export default function TextField(_a) {
           {label}{required && <span className="text-error-text ml-0.5">*</span>}
         </label>)}
       <div className="relative">
-        {multiline ? (<textarea id={id} rows={maxRows} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off" {...errorProps}/>) : (<input id={id} type={type} inputMode={getInputMode()} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off" {...errorProps}/>)}
+        {multiline ? (<textarea id={id} rows={maxRows} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} name={name} autoComplete={autoComplete} tabIndex={tabIndex} {...errorProps}/>) : (<input id={id} type={type} inputMode={getInputMode()} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} name={name} autoComplete={autoComplete} tabIndex={tabIndex} {...errorProps}/>)}
       </div>
       {error && (<p id={errorId} className="mt-1 text-error-text text-body2">
           {errorText}

package/dist/components/textarea.d.ts

@@ -18,6 +18,10 @@ interface TextareaProps {
     errorText?: string;
     size?: 'medium' | 'small' | 'tiny';
     placeholder?: string;
+    name?: string;
+    /** Browser autofill hint. Defaults to "off". */
+    autoComplete?: string;
+    tabIndex?: number;
 }
-export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, onSubmit, autoFocus, maxRows, disabled, error, errorText, size, placeholder, }: TextareaProps): React.JSX.Element;
+export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, onSubmit, autoFocus, maxRows, disabled, error, errorText, size, placeholder, name, autoComplete, tabIndex, }: TextareaProps): React.JSX.Element;
 export {};

package/dist/components/textarea.jsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { stateTransition } from './sharedStyles';
 export default function Textarea(_a) {
-    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onCompositionStart = _a.onCompositionStart, onCompositionEnd = _a.onCompositionEnd, onSubmit = _a.onSubmit, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.errorText, errorText = _f === void 0 ? 'This field is required' : _f, _g = _a.size, size = _g === void 0 ? 'medium' : _g, placeholder = _a.placeholder;
+    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onCompositionStart = _a.onCompositionStart, onCompositionEnd = _a.onCompositionEnd, onSubmit = _a.onSubmit, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.errorText, errorText = _f === void 0 ? 'This field is required' : _f, _g = _a.size, size = _g === void 0 ? 'medium' : _g, placeholder = _a.placeholder, name = _a.name, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, tabIndex = _a.tabIndex;
     var textareaRef = useRef(null);
     var handleKeyDown = function (e) {
         // Ctrl+Enter or Cmd+Enter to submit
@@ -65,7 +65,7 @@ export default function Textarea(_a) {
           {label}
         </label>)}
       <div className="relative">
-        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onInput={adjustHeight} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} onCompositionStart={onCompositionStart} onCompositionEnd={onCompositionEnd} autoFocus={autoFocus} disabled={disabled} autoComplete="off" aria-invalid={error || undefined} aria-describedby={error ? errorId : undefined}/>
+        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onInput={adjustHeight} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} onCompositionStart={onCompositionStart} onCompositionEnd={onCompositionEnd} autoFocus={autoFocus} disabled={disabled} name={name} autoComplete={autoComplete} tabIndex={tabIndex} aria-invalid={error || undefined} aria-describedby={error ? errorId : undefined}/>
       </div>
       {error && (<p id={errorId} className="mt-1 text-error-text text-body2">
           {errorText}

package/dist/stories/Button.stories.d.ts

@@ -17,3 +17,4 @@ export declare const DangerTertiary: Story;
 export declare const DangerTextOnly: Story;
 export declare const DangerVariants: Story;
 export declare const Loading: Story;
+export declare const AriaExpanded: Story;

package/dist/stories/Button.stories.jsx

@@ -146,3 +146,18 @@ export var Loading = {
       <Button size="tiny" type="textOnly" state="enabled" label="Saving" loading/>
     </div>); },
 };
+// `aria-*`, `data-*`, `id` and `title` reach the <button>, so an app can mark a toggle
+export var AriaExpanded = {
+    args: {
+        size: "medium",
+        type: "secondary",
+        state: "enabled",
+        label: "Filters",
+        actionIcon: "ChevronDown",
+        id: "filters-trigger",
+        title: "Show filters",
+        "aria-expanded": false,
+        "aria-controls": "filters-panel",
+        "data-testid": "filters-trigger",
+    },
+};

package/dist/stories/IconButton.stories.d.ts

@@ -11,3 +11,4 @@ export declare const Selected: Story;
 export declare const Disabled: Story;
 export declare const Loading: Story;
 export declare const AllSizes: Story;
+export declare const AriaExpanded: Story;

package/dist/stories/IconButton.stories.jsx

@@ -86,3 +86,18 @@ export var AllSizes = {
       <IconButton color="primary" state="enabled" size="large" iconName="Star"/>
     </div>); },
 };
+// `aria-*`, `data-*`, `id` and `title` reach the <button>, so an app can mark a toggle
+export var AriaExpanded = {
+    args: {
+        color: "iconOnly",
+        state: "enabled",
+        size: "medium",
+        iconName: "ChevronDown",
+        ariaLabel: "Show details",
+        id: "details-trigger",
+        title: "Show details",
+        "aria-expanded": true,
+        "aria-controls": "details-panel",
+        "data-testid": "details-trigger",
+    },
+};

package/dist/stories/Tag.stories.d.ts

@@ -9,6 +9,7 @@ export declare const Selected: Story;
 export declare const WithIcon: Story;
 export declare const Small: Story;
 export declare const Clickable: Story;
+export declare const ClickableDisabled: Story;
 export declare const AllVariants: Story;
 export declare const Success: Story;
 export declare const Warning: Story;

package/dist/stories/Tag.stories.jsx

@@ -80,6 +80,17 @@ export var Clickable = {
         onClick: function () { return alert("Tag clicked!"); },
     },
 };
+// A clickable tag with `disabled`: dimmed, aria-disabled, out of the tab order, clicks ignored
+export var ClickableDisabled = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        state: "enabled",
+        label: "Unavailable",
+        onClick: function () { return alert("Should not fire"); },
+        disabled: true,
+    },
+};
 export var AllVariants = {
     render: function () { return (<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
       <Tag variant="contained" size="medium" label="Contained"/>

package/dist/stories/TextField.stories.d.ts

@@ -15,3 +15,4 @@ export declare const Email: Story;
 export declare const Password: Story;
 export declare const Required: Story;
 export declare const Number: Story;
+export declare const Autofill: Story;

package/dist/stories/TextField.stories.jsx

@@ -143,3 +143,16 @@ export var Number = {
         size: "medium",
     },
 };
+// `name` and `autoComplete` let the browser autofill a login form; `tabIndex` reaches the input too
+export var Autofill = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "autofill-textfield",
+        label: "Username",
+        value: "",
+        name: "username",
+        autoComplete: "username",
+        tabIndex: 0,
+        size: "medium",
+    },
+};

package/dist/stories/Textarea.stories.d.ts

@@ -10,3 +10,4 @@ export declare const WithError: Story;
 export declare const SmallSize: Story;
 export declare const AutoExpanding: Story;
 export declare const AllSizes: Story;
+export declare const Named: Story;

package/dist/stories/Textarea.stories.jsx

@@ -82,3 +82,16 @@ export var AllSizes = {
       <TextareaWrapper id="size-medium" label="Medium" size="medium"/>
     </div>); },
 };
+// `name`, `autoComplete` and `tabIndex` reach the <textarea>
+export var Named = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "named-textarea",
+        label: "Message",
+        value: "",
+        name: "message",
+        autoComplete: "off",
+        tabIndex: 0,
+        size: "medium",
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",