@arbor-education/design-system.components 0.6.0 → 0.7.0

package/dist/components/progress/Progress.stories.d.ts

@@ -27,15 +27,61 @@ declare const meta: {
         value?: number | null | undefined | undefined;
         max?: number | undefined;
         getValueLabel?: ((value: number, max: number) => string) | undefined;
-        color?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         className?: string | undefined | undefined;
-        prefix?: string | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
         style?: import("react").CSSProperties | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -262,52 +308,6 @@ declare const meta: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-        contextMenu?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
-        nonce?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        title?: string | undefined | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        radioGroup?: string | undefined | undefined;
-        about?: string | undefined | undefined;
-        content?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
-        inlist?: any;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-        popoverTarget?: string | undefined | undefined;
-        inert?: boolean | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        is?: string | undefined | undefined;
-        exportparts?: string | undefined | undefined;
-        part?: string | undefined | undefined;
         asChild?: boolean | undefined;
         indicatorClassName?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/singleUser/SingleUser.d.ts

@@ -0,0 +1,15 @@
+import { type AvatarProps, type AvatarSize } from '../avatar/Avatar';
+import React from 'react';
+export type SingleUserProps = {
+    label: string;
+    className?: string;
+    avatarClassName?: string;
+    size?: AvatarSize;
+} & Omit<AvatarProps, 'className' | 'alt' | 'size'>;
+export declare const SingleUser: React.ForwardRefExoticComponent<{
+    label: string;
+    className?: string;
+    avatarClassName?: string;
+    size?: AvatarSize;
+} & Omit<AvatarProps, "size" | "alt" | "className"> & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=SingleUser.d.ts.map

package/dist/components/singleUser/SingleUser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleUser.d.ts","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;WANd,MAAM;gBACD,MAAM;sBACA,MAAM;WACjB,UAAU;2FAkClB,CAAC"}

package/dist/components/singleUser/SingleUser.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Avatar } from '../avatar/Avatar';
+import React from 'react';
+export const SingleUser = React.forwardRef(({ label, className, avatarClassName, size = 'small', ...avatarProps }, ref) => {
+    return (_jsxs("span", { ref: ref, className: classNames('ds-single-user', className), children: [_jsx(Avatar, { ...avatarProps, size: size, "aria-hidden": "true", alt: "", className: avatarClassName }), _jsx("span", { className: "ds-single-user__label", children: label })] }));
+});
+SingleUser.displayName = 'SingleUser';
+//# sourceMappingURL=SingleUser.js.map

package/dist/components/singleUser/SingleUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleUser.js","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAqC,MAAM,0BAA0B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,KAAK,EACL,SAAS,EACT,eAAe,EACf,IAAI,GAAG,OAAO,EACd,GAAG,WAAW,EACf,EACD,GAAG,EACH,EAAE;IACF,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,aAGlD,KAAC,MAAM,OACD,WAAW,EACf,IAAI,EAAE,IAAI,iBACE,MAAM,EAClB,GAAG,EAAC,EAAE,EACN,SAAS,EAAE,eAAe,GAC1B,EAEF,eAAM,SAAS,EAAC,uBAAuB,YACpC,KAAK,GACD,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/singleUser/SingleUser.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SingleUser } from './SingleUser';
+declare const meta: Meta<typeof SingleUser>;
+export default meta;
+type Story = StoryObj<typeof SingleUser>;
+export declare const WithImage: Story;
+export declare const WithInitials: Story;
+export declare const Placeholder: Story;
+export declare const MediumAvatar: Story;
+export declare const LongLabel: Story;
+//# sourceMappingURL=SingleUser.stories.d.ts.map

package/dist/components/singleUser/SingleUser.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleUser.stories.d.ts","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAIjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAiBzC,eAAO,MAAM,SAAS,EAAE,KAKsD,CAAC;AAE/E,eAAO,MAAM,YAAY,EAAE,KAK0B,CAAC;AAEtD,eAAO,MAAM,WAAW,EAAE,KAIgE,CAAC;AAE3F,eAAO,MAAM,YAAY,EAAE,KAOsD,CAAC;AAElF,eAAO,MAAM,SAAS,EAAE,KAKuE,CAAC"}

package/dist/components/singleUser/SingleUser.stories.js

@@ -0,0 +1,52 @@
+import { SingleUser } from './SingleUser';
+const meta = {
+    title: 'Components/SingleUser',
+    component: SingleUser,
+    tags: ['autodocs'],
+};
+export default meta;
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+const sampleSrc = 'https://i.pravatar.cc/150?img=12';
+export const WithImage = withDescription({
+    args: {
+        label: 'Jordan Matthews',
+        src: sampleSrc,
+    },
+}, 'Displays `SingleUser` with an avatar image and the default small layout.');
+export const WithInitials = withDescription({
+    args: {
+        label: 'Riley Chen',
+        initials: 'RC',
+    },
+}, 'Uses initials when no image source is provided.');
+export const Placeholder = withDescription({
+    args: {
+        label: 'Invited user',
+    },
+}, 'Shows the placeholder avatar treatment when neither image nor initials are supplied.');
+export const MediumAvatar = withDescription({
+    name: 'Size override (medium)',
+    args: {
+        label: 'Taylor Brooks',
+        initials: 'TB',
+        size: 'medium',
+    },
+}, 'Demonstrates overriding the default avatar size within the SingleUser pill.');
+export const LongLabel = withDescription({
+    args: {
+        label: 'Dr. Alexandrina Constantinopolous-Worthington',
+        initials: 'AC',
+    },
+}, 'Exercises the component with a longer label so text wrapping and spacing can be reviewed.');
+//# sourceMappingURL=SingleUser.stories.js.map

package/dist/components/singleUser/SingleUser.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleUser.stories.js","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE;YACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;YACzB,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,kCAAkC,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAAC;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,GAAG,EAAE,SAAS;KACf;CACF,EAAE,0EAA0E,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAAC;IACjD,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,IAAI;KACf;CACF,EAAE,iDAAiD,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAU,eAAe,CAAC;IAChD,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;KACtB;CACF,EAAE,sFAAsF,CAAC,CAAC;AAE3F,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAAC;IACjD,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,QAAQ;KACf;CACF,EAAE,6EAA6E,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAAC;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,+CAA+C;QACtD,QAAQ,EAAE,IAAI;KACf;CACF,EAAE,2FAA2F,CAAC,CAAC"}

package/dist/components/singleUser/SingleUser.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=SingleUser.test.d.ts.map

package/dist/components/singleUser/SingleUser.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleUser.test.d.ts","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/dist/components/singleUser/SingleUser.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { SingleUser } from './SingleUser';
+describe('SingleUser', () => {
+    test('renders label text', () => {
+        render(_jsx(SingleUser, { label: "Jamie Smith", initials: "JS" }));
+        expect(screen.getByText('Jamie Smith')).toBeInTheDocument();
+    });
+    test('hides Avatar from screen readers', () => {
+        const { container } = render(_jsx(SingleUser, { label: "Pat Lee", initials: "PL" }));
+        const avatar = container.querySelector('.ds-avatar');
+        expect(avatar).toHaveAttribute('aria-hidden', 'true');
+    });
+    test('defaults Avatar to small size', () => {
+        const { container } = render(_jsx(SingleUser, { label: "Sam", initials: "S" }));
+        expect(container.querySelector('.ds-avatar--small')).toBeInTheDocument();
+    });
+    test('allows size override', () => {
+        const { container } = render(_jsx(SingleUser, { label: "Sam", initials: "S", size: "medium" }));
+        expect(container.querySelector('.ds-avatar--medium')).toBeInTheDocument();
+    });
+    test('applies className to root and avatarClassName to Avatar', () => {
+        const { container } = render(_jsx(SingleUser, { label: "User", initials: "U", className: "my-chip", avatarClassName: "my-avatar" }));
+        expect(container.querySelector('.ds-single-user.my-chip')).toBeInTheDocument();
+        expect(container.querySelector('.ds-avatar.my-avatar')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=SingleUser.test.js.map

package/dist/components/singleUser/SingleUser.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleUser.test.js","sourceRoot":"","sources":["../../../src/components/singleUser/SingleUser.test.tsx"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAC9B,MAAM,CACJ,KAAC,UAAU,IACT,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,IAAI,GACb,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,UAAU,IACT,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,IAAI,GACb,CACH,CAAC;QACF,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACrD,MAAM,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,UAAU,IACT,KAAK,EAAC,KAAK,EACX,QAAQ,EAAC,GAAG,GACZ,CACH,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAChC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,UAAU,IACT,KAAK,EAAC,KAAK,EACX,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACnE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,UAAU,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,GAAG,EACZ,SAAS,EAAC,SAAS,EACnB,eAAe,EAAC,WAAW,GAC3B,CACH,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC/E,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/tabs/TabsItem.stories.d.ts

@@ -25,7 +25,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -310,7 +310,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

package/dist/components/tag/Tag.d.ts

@@ -1,10 +1,13 @@
 export type TagColor = 'neutral' | 'orange' | 'blue' | 'green' | 'purple' | 'teal' | 'salmon' | 'yellow';
-export type DotColour = 'purple' | 'salmon' | 'teal' | 'yellow' | 'green' | 'orange' | 'blue';
-type TagProps = {
-    text: string;
+export type TagProps = {
+    children: React.ReactNode;
     color?: TagColor;
-    dotColour?: DotColour;
+    selected?: boolean;
+    slotStart?: React.ReactNode;
+    slotEnd?: React.ReactNode;
+    onRemove?: () => void;
+    removeLabel?: string;
+    removeButtonTabIndex?: 0 | -1;
 };
-export declare const Tag: ({ text, color, dotColour }: TagProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Tag: ({ children, color, selected, slotStart, slotEnd, onRemove, removeLabel, removeButtonTabIndex, }: TagProps) => React.JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAC5B,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9F,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,4BAAwC,QAAQ,4CAcnE,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAC5B,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,iGASjB,QAAQ,KAAG,KAAK,CAAC,GAAG,CAAC,OAyBvB,CAAC"}

package/dist/components/tag/Tag.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-export const Tag = ({ text, color = 'neutral', dotColour }) => {
-    return (_jsxs("span", { className: classNames('ds-tag', `ds-tag--${color}`), children: [dotColour && (_jsx("span", { "aria-label": `${dotColour} dot`, className: classNames('ds-tag__dot', `ds-tag__dot--${dotColour}`) })), text] }));
+import { Icon } from '../icon/Icon';
+export const Tag = ({ children, color = 'neutral', selected = false, slotStart, slotEnd, onRemove, removeLabel = 'Remove', removeButtonTabIndex = 0, }) => {
+    return (_jsxs("span", { className: classNames('ds-tag', `ds-tag--${color}`, {
+            'ds-tag--selected': selected,
+        }), children: [slotStart && _jsx("span", { className: "ds-tag__slot-start", children: slotStart }), _jsx("span", { className: "ds-tag__label", children: children }), slotEnd && _jsx("span", { className: "ds-tag__slot-end", children: slotEnd }), onRemove && (_jsx("button", { type: "button", className: "ds-tag__remove", "aria-label": removeLabel, onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                }, tabIndex: removeButtonTabIndex, children: _jsx(Icon, { name: "x", size: 12 }) }))] }));
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAmBpC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE;IACtE,OAAO,CACL,gBACE,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,WAAW,KAAK,EAAE,CAAC,aAElD,SAAS,IAAI,CACZ,6BACc,GAAG,SAAS,MAAM,EAC9B,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,gBAAgB,SAAS,EAAE,CAAC,GACjE,CACH,EACA,IAAI,IACA,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAsB5C,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,oBAAoB,GAAG,CAAC,GACf,EAAqB,EAAE;IAChC,OAAO,CACL,gBAAM,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,WAAW,KAAK,EAAE,EAAE;YACxD,kBAAkB,EAAE,QAAQ;SAC7B,CAAC,aAEC,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,OAAO,IAAI,eAAM,SAAS,EAAC,kBAAkB,YAAE,OAAO,GAAQ,EAC9D,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gBAAgB,gBACd,WAAW,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,QAAQ,EAAE,CAAC;gBACb,CAAC,EACD,QAAQ,EAAE,oBAAoB,YAE9B,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,EAAE,GAAI,GACpB,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,10 +1,15 @@
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Tag } from './Tag';
 declare const meta: Meta<typeof Tag>;
-export declare const Default: {
-    args: {
-        text: string;
-    };
-};
 export default meta;
+type Story = StoryObj<typeof Tag>;
+export declare const Default: Story;
+export declare const WithColour: Story;
+export declare const Selected: Story;
+export declare const WithDot: Story;
+export declare const WithIcon: Story;
+export declare const Removable: Story;
+export declare const RemovableWithIcon: Story;
+export declare const WithSlotEnd: Story;
+export declare const AllColours: Story;
 //# sourceMappingURL=Tag.stories.d.ts.map

package/dist/components/tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAI1B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAY1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAelC,eAAO,MAAM,OAAO,EAAE,KAEsC,CAAC;AAE7D,eAAO,MAAM,UAAU,EAAE,KAEoC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,KAE4F,CAAC;AAEpH,eAAO,MAAM,OAAO,EAAE,KAK6C,CAAC;AAEpE,eAAO,MAAM,QAAQ,EAAE,KAKqC,CAAC;AAE7D,eAAO,MAAM,SAAS,EAAE,KAM4H,CAAC;AAErJ,eAAO,MAAM,iBAAiB,EAAE,KAOiC,CAAC;AAElE,eAAO,MAAM,WAAW,EAAE,KAK6B,CAAC;AAIxD,eAAO,MAAM,UAAU,EAAE,KAQsC,CAAC"}

package/dist/components/tag/Tag.stories.js

@@ -1,13 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { Dot } from '../dot/Dot';
+import { Icon } from '../icon/Icon';
 import { Tag } from './Tag';
 const meta = {
     tags: ['autodocs'],
     title: 'Components/Tag',
     component: Tag,
-};
-export const Default = {
-    args: {
-        text: 'Tag content',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Displays compact tag content with optional start/end slots and removable actions. Removable tags keep their remove button in the tab order by default; composite parents such as Combobox can pass `removeButtonTabIndex={-1}` for roving tab focus.',
+            },
+        },
     },
 };
 export default meta;
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+export const Default = withDescription({
+    args: { children: 'Tag content' },
+}, 'Shows the default neutral Tag with plain text content.');
+export const WithColour = withDescription({
+    args: { children: 'Blue tag', color: 'blue' },
+}, 'Applies one of the semantic colour variants to the Tag.');
+export const Selected = withDescription({
+    args: { children: 'Selected tag', color: 'blue', selected: true },
+}, 'Shows the selected treatment, which intentionally prioritises selection styling over the base colour variant.');
+export const WithDot = withDescription({
+    args: {
+        children: 'With dot',
+        slotStart: _jsx(Dot, { colour: "purple" }),
+    },
+}, 'Uses `slotStart` to render a decorative dot before the label.');
+export const WithIcon = withDescription({
+    args: {
+        children: 'Alice Johnson',
+        slotStart: _jsx(Icon, { name: "user", size: 12 }),
+    },
+}, 'Uses `slotStart` to show an icon before the Tag label.');
+export const Removable = withDescription({
+    args: {
+        children: 'Removable tag',
+        onRemove: fn(),
+        removeLabel: 'Remove removable tag',
+    },
+}, 'Demonstrates a removable Tag with the default close affordance and a custom accessible remove label. The remove button is tabbable by default.');
+export const RemovableWithIcon = withDescription({
+    args: {
+        children: 'Alice Johnson',
+        slotStart: _jsx(Icon, { name: "user", size: 12 }),
+        onRemove: fn(),
+        removeLabel: 'Remove Alice Johnson',
+    },
+}, 'Combines a leading icon with the removable Tag interaction.');
+export const WithSlotEnd = withDescription({
+    args: {
+        children: 'Custom end',
+        slotEnd: _jsx(Icon, { name: "chevron-down", size: 12 }),
+    },
+}, 'Uses `slotEnd` to render trailing custom content.');
+const allColours = ['neutral', 'orange', 'blue', 'green', 'purple', 'teal', 'salmon', 'yellow'];
+export const AllColours = withDescription({
+    render: () => (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 }, children: allColours.map(color => (_jsx(Tag, { color: color, children: color }, color))) })),
+}, 'Displays every available Tag colour variant side by side.');
 //# sourceMappingURL=Tag.stories.js.map

package/dist/components/tag/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,IAAI,GAAqB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;KACpB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/tag/Tag.test.js

@@ -1,57 +1,93 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { Tag } from './Tag';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
+import { Tag } from './Tag';
+import { Dot } from '../dot/Dot';
 describe('Tag', () => {
-    test('Tag says hello', () => {
-        render(_jsx(Tag, { text: "Hello I'm a Pill!" }));
-        expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
-    });
-    test('Tag has default color neutral', () => {
-        render(_jsx(Tag, { text: "Hello I'm a Pill!" }));
-        expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--neutral');
-    });
-    test('Tag has custom color', () => {
-        render(_jsx(Tag, { text: "Hello I'm a Pill!", color: "blue" }));
-        expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--blue');
-    });
-    describe('dot functionality', () => {
-        test('Tag does not render dot when dotColour is not provided', () => {
-            render(_jsx(Tag, { text: "No dot here" }));
-            expect(screen.queryByLabelText(/dot/i)).not.toBeInTheDocument();
-        });
-        test('Tag renders dot when dotColour is provided', () => {
-            render(_jsx(Tag, { text: "Has dot", dotColour: "purple" }));
-            expect(screen.getByLabelText('purple dot')).toBeInTheDocument();
-        });
-        test('Tag dot has correct color class', () => {
-            render(_jsx(Tag, { text: "Purple dot", dotColour: "purple" }));
-            const dot = screen.getByLabelText('purple dot');
-            expect(dot).toHaveClass('ds-tag__dot');
-            expect(dot).toHaveClass('ds-tag__dot--purple');
-        });
-        test('Tag dot renders with each available colour', () => {
-            const colours = [
-                'purple',
-                'salmon',
-                'teal',
-                'yellow',
-                'green',
-                'orange',
-                'blue',
-            ];
-            colours.forEach((colour) => {
-                const { unmount } = render(_jsx(Tag, { text: `${colour} dot`, dotColour: colour }));
-                const dot = screen.getByLabelText(`${colour} dot`);
-                expect(dot).toHaveClass(`ds-tag__dot--${colour}`);
-                unmount();
-            });
-        });
-        test('Tag renders both dot and text correctly', () => {
-            render(_jsx(Tag, { text: "Text with dot", dotColour: "teal" }));
-            expect(screen.getByText('Text with dot')).toBeInTheDocument();
-            expect(screen.getByLabelText('teal dot')).toBeInTheDocument();
+    test('renders children as text content', () => {
+        render(_jsx(Tag, { children: "Hello" }));
+        expect(screen.getByText('Hello')).toBeInTheDocument();
+    });
+    test('has default color neutral', () => {
+        const { container } = render(_jsx(Tag, { children: "Neutral" }));
+        expect(container.querySelector('.ds-tag')).toHaveClass('ds-tag--neutral');
+    });
+    test('applies custom color class', () => {
+        const { container } = render(_jsx(Tag, { color: "blue", children: "Blue" }));
+        expect(container.querySelector('.ds-tag')).toHaveClass('ds-tag--blue');
+    });
+    test('applies selected class when selected is true', () => {
+        const { container } = render(_jsx(Tag, { selected: true, children: "Selected" }));
+        expect(container.querySelector('.ds-tag')).toHaveClass('ds-tag--selected');
+    });
+    describe('slotStart', () => {
+        test('renders slotStart content', () => {
+            const { container } = render(_jsx(Tag, { slotStart: _jsx(Dot, { colour: "purple" }), children: "With dot" }));
+            expect(container.querySelector('.ds-tag__slot-start .ds-dot--purple')).toBeInTheDocument();
+            expect(container.querySelector('.ds-tag__slot-start .ds-dot')).toHaveAttribute('aria-hidden', 'true');
+        });
+        test('does not render slot-start wrapper when slotStart is not provided', () => {
+            const { container } = render(_jsx(Tag, { children: "No slot" }));
+            expect(container.querySelector('.ds-tag__slot-start')).not.toBeInTheDocument();
+        });
+    });
+    describe('slotEnd', () => {
+        test('renders slotEnd content', () => {
+            const { container } = render(_jsx(Tag, { slotEnd: _jsx("span", { children: "End" }), children: "With end" }));
+            expect(container.querySelector('.ds-tag__slot-end')).toHaveTextContent('End');
+        });
+        test('does not render slot-end wrapper when slotEnd is not provided', () => {
+            const { container } = render(_jsx(Tag, { children: "No slot" }));
+            expect(container.querySelector('.ds-tag__slot-end')).not.toBeInTheDocument();
+        });
+    });
+    describe('onRemove', () => {
+        test('renders remove button when onRemove is provided', () => {
+            render(_jsx(Tag, { onRemove: () => { }, children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
+        });
+        test('uses a custom remove label when provided', () => {
+            render(_jsx(Tag, { onRemove: () => { }, removeLabel: "Remove Alice Johnson", children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove Alice Johnson' })).toBeInTheDocument();
+        });
+        test('keeps the remove button in the tab order by default', () => {
+            render(_jsx(Tag, { onRemove: () => { }, children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove' })).toHaveAttribute('tabindex', '0');
+        });
+        test('allows composite parents to remove the button from the tab order', () => {
+            render(_jsx(Tag, { onRemove: () => { }, removeButtonTabIndex: -1, children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove' })).toHaveAttribute('tabindex', '-1');
+        });
+        test('does not render remove button when onRemove is not provided', () => {
+            render(_jsx(Tag, { children: "Static" }));
+            expect(screen.queryByRole('button', { name: 'Remove' })).not.toBeInTheDocument();
+        });
+        test('fires onRemove callback when close button is clicked', async () => {
+            const onRemove = vi.fn();
+            render(_jsx(Tag, { onRemove: onRemove, children: "Removable" }));
+            await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
+            expect(onRemove).toHaveBeenCalledOnce();
+        });
+        test('stops event propagation on remove click', async () => {
+            const onRemove = vi.fn();
+            const outerClick = vi.fn();
+            render(_jsx("div", { onClick: outerClick, children: _jsx(Tag, { onRemove: onRemove, children: "Removable" }) }));
+            await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
+            expect(onRemove).toHaveBeenCalledOnce();
+            expect(outerClick).not.toHaveBeenCalled();
+        });
+    });
+    describe('combined slots', () => {
+        test('renders slotStart, children, slotEnd, and remove button in correct order', () => {
+            const { container } = render(_jsx(Tag, { slotStart: _jsx("span", { children: "S" }), slotEnd: _jsx("span", { children: "E" }), onRemove: () => { }, children: "Label" }));
+            const tag = container.querySelector('.ds-tag');
+            const children = Array.from(tag.children);
+            expect(children[0]).toHaveClass('ds-tag__slot-start');
+            expect(children[1]).toHaveClass('ds-tag__label');
+            expect(children[2]).toHaveClass('ds-tag__slot-end');
+            expect(children[3]).toHaveClass('ds-tag__remove');
         });
     });
 });