@workday/canvas-kit-labs-react 16.2.0-0652-next.0 → 16.2.0-0654-next.0

package/dist/commonjs/accessory/lib/AccessoryMedia.d.ts

@@ -0,0 +1,72 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+import { AccessoryProps } from './Accessory';
+export interface AccessoryMediaProps extends AccessoryProps {
+    /**
+     * The URL of the image.
+     */
+    src: string;
+    /**
+     * How the image is resized to fit the tile.
+     * @default 'cover'
+     */
+    objectFit?: 'contain' | 'cover';
+    /**
+     * The icon to display from `@workday/canvas-system-icons-web`, centered over the image. When
+     * set, a scrim is painted under the icon for contrast. Uses `color` from `Accessory` for the
+     * glyph (`base.legacy.neutral0` by default).
+     */
+    icon?: SystemIconProps['icon'];
+}
+/**
+ * Image treatment for `AccessoryMedia`. The image part stays hidden until `imageLoaded`. The scrim
+ * part sits under an optional icon. `background` overrides the tile fill.
+ */
+export declare const accessoryMediaStencil: import("@workday/canvas-kit-styling").Stencil<{
+    imageLoaded: {
+        false: ({ imagePart }: {
+            background: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly image: "accessory-media-image";
+            readonly scrim: "accessory-media-scrim";
+        }>) => {
+            "[data-part=\"accessory-media-image\"]": {
+                display: string;
+            };
+        };
+        true: {};
+    };
+    objectFit: {
+        cover: ({ imagePart }: {
+            background: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly image: "accessory-media-image";
+            readonly scrim: "accessory-media-scrim";
+        }>) => {
+            "[data-part=\"accessory-media-image\"]": {
+                objectFit: string;
+            };
+        };
+        contain: ({ imagePart }: {
+            background: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly image: "accessory-media-image";
+            readonly scrim: "accessory-media-scrim";
+        }>) => {
+            "[data-part=\"accessory-media-image\"]": {
+                objectFit: string;
+            };
+        };
+    };
+}, {
+    readonly image: "accessory-media-image";
+    readonly scrim: "accessory-media-scrim";
+}, {
+    background: string;
+}, never, never>;
+/**
+ * `AccessoryMedia` fills an accessory tile with an image. Pass `icon` to center a decorative icon
+ * on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile
+ * background. Always decorative.
+ */
+export declare const AccessoryMedia: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryMediaProps>;
+//# sourceMappingURL=AccessoryMedia.d.ts.map

package/dist/commonjs/accessory/lib/AccessoryMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryMedia.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryMedia.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,OAAO,EAAY,cAAc,EAAmB,MAAM,aAAa,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAmDhC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,cAAc,0FAoDzB,CAAC"}

package/dist/commonjs/accessory/lib/AccessoryMedia.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccessoryMedia = exports.accessoryMediaStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Accessory_1 = require("./Accessory");
+/**
+ * Image treatment for `AccessoryMedia`. The image part stays hidden until `imageLoaded`. The scrim
+ * part sits under an optional icon. `background` overrides the tile fill.
+ */
+exports.accessoryMediaStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        background: '',
+    },
+    parts: {
+        image: 'accessory-media-image',
+        scrim: 'accessory-media-scrim',
+    },
+    base: { name: "3wew7z", styles: "box-sizing:border-box;background-color:var(--background-accessory-media-9cf347, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));[data-part=\"accessory-media-image\"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);}[data-part=\"accessory-media-scrim\"]{position:absolute;inset:0;background-color:var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);pointer-events:none;}" },
+    modifiers: {
+        imageLoaded: {
+            false: { name: "ruy4j", styles: "[data-part=\"accessory-media-image\"]{display:none;}" },
+            true: { name: "2yeyuo", styles: "" }
+        },
+        objectFit: {
+            cover: { name: "2tjew2", styles: "[data-part=\"accessory-media-image\"]{object-fit:cover;}" },
+            contain: { name: "1hjptw", styles: "[data-part=\"accessory-media-image\"]{object-fit:contain;}" }
+        }
+    }
+}, "accessory-media-9cf347");
+/**
+ * `AccessoryMedia` fills an accessory tile with an image. Pass `icon` to center a decorative icon
+ * on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile
+ * background. Always decorative.
+ */
+exports.AccessoryMedia = (0, common_1.createComponent)('span')({
+    displayName: 'AccessoryMedia',
+    Component: ({ src, size = 'extraLarge', objectFit = 'cover', icon, color = canvas_tokens_web_1.base.legacy.neutral0, background, ...elemProps }, ref, Element) => {
+        // Track the loaded URL so a `src` change hides the image again without a mount effect that
+        // can race a synchronous `onLoad` (cached images and data URLs).
+        const [loadedSrc, setLoadedSrc] = react_1.default.useState(null);
+        const imageRef = react_1.default.useRef(null);
+        const imageLoaded = loadedSrc === src;
+        react_1.default.useEffect(() => {
+            const image = imageRef.current;
+            if ((image === null || image === void 0 ? void 0 : image.complete) && image.naturalWidth > 0) {
+                setLoadedSrc(src);
+            }
+        }, [src]);
+        return ((0, jsx_runtime_1.jsxs)(Accessory_1.Accessory, { as: Element, ref: ref, color: icon ? color : undefined, size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.accessoryMediaStencil)({ background, imageLoaded, objectFit })), children: [(0, jsx_runtime_1.jsx)("img", { ref: imageRef, alt: "", onLoad: () => setLoadedSrc(src), src: src, ...exports.accessoryMediaStencil.parts.image }), icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ...exports.accessoryMediaStencil.parts.scrim }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: icon, ...Accessory_1.accessoryStencil.parts.icon })] }))] }));
+    },
+});

package/dist/commonjs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accessory';
 export * from './ai-ingress-button';
 export * from './kbd';
 export * from './selection-group';

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}

package/dist/commonjs/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./accessory"), exports);
 __exportStar(require("./ai-ingress-button"), exports);
 __exportStar(require("./kbd"), exports);
 __exportStar(require("./selection-group"), exports);

package/dist/es6/accessory/index.d.ts

@@ -0,0 +1,7 @@
+export * from './lib/Accessory';
+export * from './lib/AccessoryCalendar';
+export * from './lib/AccessoryFavicon';
+export * from './lib/AccessoryFile';
+export * from './lib/AccessoryIcon';
+export * from './lib/AccessoryMedia';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/accessory/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../accessory/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/es6/accessory/index.js

@@ -0,0 +1,6 @@
+export * from './lib/Accessory';
+export * from './lib/AccessoryCalendar';
+export * from './lib/AccessoryFavicon';
+export * from './lib/AccessoryFile';
+export * from './lib/AccessoryIcon';
+export * from './lib/AccessoryMedia';

package/dist/es6/accessory/lib/Accessory.d.ts

@@ -0,0 +1,157 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+/**
+ * The size of an `Accessory` tile.
+ *
+ * * `extraSmall` — 16px tile, 16px icon
+ * * `small` — 20px tile, 18px icon
+ * * `medium` — 24px tile, 16px icon
+ * * `large` — 32px tile, 18px icon
+ * * `extraLarge` — 40px tile, 20px icon
+ */
+export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
+export interface AccessoryProps extends CSProps {
+    /**
+     * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 16px,
+     * 18px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`.
+     *
+     * * `extraSmall` — 16px
+     * * `small` — 20px
+     * * `medium` — 24px
+     * * `large` — 32px
+     * * `extraLarge` — 40px
+     *
+     * @default 'extraLarge'
+     */
+    size?: AccessorySize;
+    /**
+     * The color of the icon. When set, this overrides the icon color from `variant` on
+     * `AccessoryIcon`. Inherited by the icon `data-part` via a CSS variable.
+     */
+    color?: string;
+    /**
+     * The background color of the icon tile. When set, this overrides the fill from `variant` and is
+     * painted at every size, including `small` and `extraSmall`. Inherited by the icon `data-part`
+     * via a CSS variable.
+     */
+    background?: string;
+}
+/**
+ * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon
+ * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or
+ * `AccessoryMedia`, which render this shell.
+ */
+export declare const accessoryStencil: import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        extraSmall: ({ iconPart, tileBackground }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))" | "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))" | {
+                [x: string]: number | "var(--cnvs-base-size-200, 1rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            width: "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))";
+            height: "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: number | "var(--cnvs-base-size-200, 1rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+        };
+        small: ({ iconPart, tileBackground }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))" | "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))" | {
+                [x: string]: number | "var(--cnvs-base-size-225, 1.125rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            width: "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))";
+            height: "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: number | "var(--cnvs-base-size-225, 1.125rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+        };
+        medium: ({ iconPart }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))" | "var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem))" | {
+                [x: string]: "var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem))";
+            };
+            width: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: "var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem))";
+            };
+        };
+        large: ({ iconPart }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-base-size-125, 0.625rem)" | "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))" | {
+                [x: string]: "var(--cnvs-component-system-icon-size-sm, 1.125rem)";
+            };
+            width: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: "var(--cnvs-component-system-icon-size-sm, 1.125rem)";
+            };
+        };
+        extraLarge: ({ iconPart }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))" | "var(--cnvs-sys-shape-lg, 0.75rem)" | {
+                [x: string]: "var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem))";
+            };
+            width: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: "var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem))";
+            };
+        };
+    };
+}, {
+    readonly icon: "accessory-icon";
+}, {
+    iconColor: string;
+    tileBackground: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
+/**
+ * `Accessory` is the small rounded visual that sits beside text, most often the leading element in
+ * a list item or other row. It owns the tile size and corner radius so a system icon, file type,
+ * image, site favicon, calendar date, or custom content stays one consistent shape.
+ * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar`
+ * render this shell. Accessories are
+ * decorative and always hidden from assistive technology.
+ *
+ * ```tsx
+ * <AccessoryIcon icon={activityIcon} />
+ * ```
+ */
+export declare const Accessory: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryProps>;
+//# sourceMappingURL=Accessory.d.ts.map

package/dist/es6/accessory/lib/Accessory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accessory.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/Accessory.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAEvF,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2E3B,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,qFAkBpB,CAAC"}

package/dist/es6/accessory/lib/Accessory.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
+import { systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
+import { base, component, system } from '@workday/canvas-tokens-web';
+/**
+ * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon
+ * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or
+ * `AccessoryMedia`, which render this shell.
+ */
+export const accessoryStencil = createStencil({
+    extends: cornerShapeStencil,
+    vars: {
+        iconColor: '',
+        tileBackground: '',
+    },
+    parts: {
+        icon: 'accessory-icon',
+    },
+    base: { name: "3hvhdg", styles: "box-sizing:border-box;display:inline-flex;position:relative;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;[data-part=\"accessory-icon\"]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
+    modifiers: {
+        size: {
+            extraSmall: { name: "x75h2", styles: "width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-200, 1rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
+            small: { name: "r0g8q", styles: "width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-225, 1.125rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
+            medium: { name: "poysy", styles: "width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));}" },
+            large: { name: "49ozl6", styles: "width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--shape-corner-shape-ccab68:var(--cnvs-base-size-125, 0.625rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);}" },
+            extraLarge: { name: "4ds3t1", styles: "width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));}" }
+        }
+    }
+}, "accessory-05fc46");
+/**
+ * `Accessory` is the small rounded visual that sits beside text, most often the leading element in
+ * a list item or other row. It owns the tile size and corner radius so a system icon, file type,
+ * image, site favicon, calendar date, or custom content stays one consistent shape.
+ * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar`
+ * render this shell. Accessories are
+ * decorative and always hidden from assistive technology.
+ *
+ * ```tsx
+ * <AccessoryIcon icon={activityIcon} />
+ * ```
+ */
+export const Accessory = createComponent('span')({
+    displayName: 'Accessory',
+    Component: ({ size = 'extraLarge', color, background, ...elemProps }, ref, Element) => {
+        return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, accessoryStencil({ size, iconColor: color, tileBackground: background })), "aria-hidden": true }));
+    },
+});

package/dist/es6/accessory/lib/AccessoryCalendar.d.ts

@@ -0,0 +1,80 @@
+import { AccessoryProps } from './Accessory';
+export interface AccessoryCalendarProps extends AccessoryProps {
+    /**
+     * The month label, such as `Apr`.
+     */
+    month: string;
+    /**
+     * The day of the month, such as `30`.
+     */
+    date: number | string;
+}
+/**
+ * Calendar treatment for `AccessoryCalendar`. The month uses a critical color. The day uses the
+ * default foreground color. `size` scales both. `color` overrides the month. `background`
+ * overrides the tile fill.
+ */
+export declare const accessoryCalendarStencil: import("@workday/canvas-kit-styling").Stencil<{
+    /**
+     * The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
+     * proportion. At `extraLarge` that is 10px and 16px (`subtext.sm` and `body.sm`). Type tokens
+     * do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
+     */
+    size: {
+        extraSmall: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            };
+        };
+        small: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            };
+        };
+        medium: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            };
+        };
+        large: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            };
+        };
+        extraLarge: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+            };
+        };
+    };
+}, {
+    readonly icon: "accessory-icon";
+    readonly month: "accessory-calendar-month";
+    readonly date: "accessory-calendar-date";
+}, {}, never, never>;
+/**
+ * `AccessoryCalendar` renders a month and day in an accessory tile. The month is critical and the
+ * day is the default foreground color. Both scale with `size`. Always decorative.
+ */
+export declare const AccessoryCalendar: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryCalendarProps>;
+//# sourceMappingURL=AccessoryCalendar.d.ts.map

package/dist/es6/accessory/lib/AccessoryCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryCalendar.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryCalendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAmB,MAAM,aAAa,CAAC;AAExE,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;IAoCjC;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsBL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,6FAuB5B,CAAC"}

package/dist/es6/accessory/lib/AccessoryCalendar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { Accessory, accessoryStencil } from './Accessory';
+/**
+ * Calendar treatment for `AccessoryCalendar`. The month uses a critical color. The day uses the
+ * default foreground color. `size` scales both. `color` overrides the month. `background`
+ * overrides the tile fill.
+ */
+export const accessoryCalendarStencil = createStencil({
+    parts: {
+        icon: 'accessory-icon',
+        month: 'accessory-calendar-month',
+        date: 'accessory-calendar-date',
+    },
+    base: { name: "4cbo76", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{flex-direction:column;gap:0.075em;overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-calendar-month\"]{color:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1))));font-size:0.25em;font-weight:var(--cnvs-sys-font-weight-medium);line-height:1;white-space:nowrap;}[data-part=\"accessory-calendar-date\"]{color:var(--cnvs-sys-color-fg-default);font-size:0.4em;font-weight:var(--cnvs-sys-font-weight-normal);line-height:1;white-space:nowrap;}" },
+    modifiers: {
+        /**
+         * The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
+         * proportion. At `extraLarge` that is 10px and 16px (`subtext.sm` and `body.sm`). Type tokens
+         * do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
+         */
+        size: {
+            extraSmall: { name: "1u9oxy", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));}" },
+            small: { name: "2wxatz", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));}" },
+            medium: { name: "3x84p0", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));}" },
+            large: { name: "3ewik8", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));}" },
+            extraLarge: { name: "3ochpw", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));}" }
+        }
+    },
+    defaultModifiers: {
+        size: 'extraLarge',
+    }
+}, "accessory-calendar-63f1cc");
+/**
+ * `AccessoryCalendar` renders a month and day in an accessory tile. The month is critical and the
+ * day is the default foreground color. Both scale with `size`. Always decorative.
+ */
+export const AccessoryCalendar = createComponent('span')({
+    displayName: 'AccessoryCalendar',
+    Component: ({ month, date, size = 'extraLarge', color, background, ...elemProps }, ref, Element) => {
+        return (_jsx(Accessory, { as: Element, ref: ref, background: background, color: color, size: size, ...handleCsProp(elemProps, accessoryCalendarStencil({ size })), children: _jsxs("span", { ...accessoryStencil.parts.icon, children: [_jsx("span", { ...accessoryCalendarStencil.parts.month, children: month }), _jsx("span", { ...accessoryCalendarStencil.parts.date, children: date })] }) }));
+    },
+});

package/dist/es6/accessory/lib/AccessoryFavicon.d.ts

@@ -0,0 +1,75 @@
+import { AccessoryProps } from './Accessory';
+export interface AccessoryFaviconProps extends AccessoryProps {
+    /**
+     * The site URL or bare domain, such as `https://design.workday.com` or `workday.com`. The hostname is
+     * used to resolve the favicon.
+     */
+    url: string;
+}
+/**
+ * Favicon treatment for `AccessoryFavicon`. At `large` and `extraLarge` the mark is inset in an
+ * outlined tile. At `medium` and smaller the mark fills the tile and the frame is removed.
+ * `background` overrides the tile fill.
+ */
+export declare const accessoryFaviconStencil: import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        extraSmall: ({ iconPart, imagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly image: "accessory-favicon-image";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            "[data-part=\"accessory-favicon-image\"]": {
+                width: string;
+                height: string;
+                borderRadius: number;
+            };
+        };
+        small: ({ iconPart, imagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly image: "accessory-favicon-image";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            "[data-part=\"accessory-favicon-image\"]": {
+                width: string;
+                height: string;
+                borderRadius: number;
+            };
+        };
+        medium: ({ iconPart, imagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly image: "accessory-favicon-image";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            "[data-part=\"accessory-favicon-image\"]": {
+                width: string;
+                height: string;
+                borderRadius: number;
+            };
+        };
+        large: {};
+        extraLarge: {};
+    };
+}, {
+    readonly icon: "accessory-icon";
+    readonly image: "accessory-favicon-image";
+}, {}, never, never>;
+/**
+ * `AccessoryFavicon` renders a site favicon in an accessory tile. Pass a site URL or domain as
+ * `url`. The mark is inset in an outlined frame at `large` and `extraLarge`, and fills the tile at
+ * smaller sizes. Always decorative.
+ *
+ * The image is requested from the user's browser at `https://www.google.com/s2/favicons`. Google
+ * receives the hostname and the user's IP address. `referrerPolicy="no-referrer"` keeps the app
+ * origin off that request. It does not proxy the request.
+ */
+export declare const AccessoryFavicon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryFaviconProps>;
+//# sourceMappingURL=AccessoryFavicon.d.ts.map

package/dist/es6/accessory/lib/AccessoryFavicon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryFavicon.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAkC,MAAM,aAAa,CAAC;AA+BvF,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAkElC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}