@workday/canvas-kit-preview-react 8.0.0-alpha.116-next.1 → 8.0.0-alpha.118-next.1

package/dist/commonjs/pill/lib/Pill.d.ts

@@ -10,8 +10,10 @@ export interface PillProps extends BoxProps {
 export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
     maxWidth: string | number;
     disabled: boolean;
+    id: string;
 }> & {} & {}, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };
@@ -19,6 +21,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 }> & {
     Context: React.Context<{
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -27,6 +30,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 } & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -34,6 +38,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     }>;
     Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -42,6 +47,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -49,6 +55,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     }>;
     IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAgID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Df,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}

package/dist/commonjs/pill/lib/Pill.js

@@ -111,7 +111,6 @@ var getRemovablePillColors = function (disabled) {
 };
 var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: tokens_1.borderRadius.m, flexShrink: 0 }, tokens_1.type.levels.subtext.large), { color: tokens_1.colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: tokens_1.type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + tokens_1.space.xxs, height: tokens_1.space.m, position: 'relative' });
 var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
-        borderColor: tokens_1.colors.blueberry400,
         'span[data-count="ck-pill-count"]': {
             borderTop: "1px solid " + tokens_1.colors.blueberry400,
             borderBottom: "1px solid " + tokens_1.colors.blueberry400,
@@ -128,10 +127,18 @@ var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(
             border: 'none',
         },
     },
-})), layout_1.boxStyleFn);
+})), function (_a) {
+    var variant = _a.variant;
+    return ({
+        '&:focus': {
+            borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
+        },
+    });
+}, layout_1.boxStyleFn);
 var StyledNonInteractivePill = common_1.styled(StyledBasePill)({
     cursor: 'default',
     overflow: 'revert',
+    position: 'relative',
 });
 exports.Pill = common_1.createContainer('button')({
     modelHook: usePillModel_1.usePillModel,
@@ -145,7 +152,7 @@ exports.Pill = common_1.createContainer('button')({
 })(function (_a, Element, model) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200 }, elemProps),
+        variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200, id: model.state.id }, elemProps),
             react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
         variant === 'default' && (react_1.default.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
             react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
@@ -154,7 +161,7 @@ exports.Pill = common_1.createContainer('button')({
                 }
                 return (react_1.default.createElement(layout_1.Stack.Item, { key: index, display: "inline-flex" }, child));
             })))),
-        variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span' }, elemProps),
+        variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
             react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);

package/dist/commonjs/pill/lib/PillAvatar.d.ts

@@ -3,6 +3,7 @@ export interface PillAvatarProps extends AvatarProps {
 }
 export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillAvatarProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}
+{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;;EAerB,CAAC"}

package/dist/commonjs/pill/lib/PillAvatar.js

@@ -25,5 +25,5 @@ var usePillModel_1 = require("./usePillModel");
 exports.PillAvatar = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,
 })(function (elemProps, Element, model) {
-    return (react_1.default.createElement(avatar_1.Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18 }, elemProps, { disabled: model.state.disabled }), elemProps.children));
+    return (react_1.default.createElement(avatar_1.Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
 });

package/dist/commonjs/pill/lib/PillIcon.d.ts

@@ -9,6 +9,7 @@ export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
 }
 export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;EAanB,CAAC"}
+{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;;EAenB,CAAC"}

package/dist/commonjs/pill/lib/PillIcon.js

@@ -36,5 +36,5 @@ exports.PillIcon = common_1.createSubcomponent('span')({
     modelHook: usePillModel_1.usePillModel,
 })(function (_a, Element) {
     var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
-    return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
+    return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
 });

package/dist/commonjs/pill/lib/PillIconButton.d.ts

@@ -6,9 +6,15 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
      * @default `xSmallIcon`
      */
     icon?: CanvasSystemIcon;
+    /**
+     * The aria label for the removable icon
+     * @default 'remove'
+     */
+    'aria-label'?: string;
 }
 export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAuDD,eAAO,MAAM,cAAc;;;;;;EAuB1B,CAAC"}
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA6CD,eAAO,MAAM,cAAc;;;;;;;EAgC1B,CAAC"}

package/dist/commonjs/pill/lib/PillIconButton.js

@@ -47,9 +47,7 @@ var getIconColors = function () {
         focus: {
             icon: tokens_1.colors.licorice500,
             focusRing: common_1.focusRing({
-                width: 0,
                 innerColor: 'transparent',
-                outerColor: 'transparent',
             }),
         },
         disabled: {
@@ -58,31 +56,26 @@ var getIconColors = function () {
         },
     };
 };
-var StyledFocusTarget = common_1.styled('span')({
-    height: 20,
-    position: 'absolute',
-    right: '5px',
-    left: tokens_1.space.xxxs,
-    margin: 0,
-    borderRadius: tokens_1.borderRadius.m,
-    '&:focus': __assign({ outline: 'none' }, common_1.focusRing({
-        outerColor: tokens_1.colors.blueberry400,
-        innerColor: 'transparent',
-        separation: 0,
-        width: 2,
-        inset: 'inner',
-    })),
-});
 var StyledIconButton = common_1.styled(button_1.BaseButton)({
-    marginInlineEnd: '-14px !important',
-    paddingInlineEnd: tokens_1.space.xxxs,
-    marginInlineStart: "-" + tokens_1.space.xxs + " !important",
+    marginInlineEnd: '-7px',
+    marginInlineStart: "-2px",
+    overflow: 'visible',
+    '::after': {
+        content: '""',
+        height: tokens_1.space.l,
+        width: tokens_1.space.l,
+        position: 'absolute',
+        left: '-7px',
+        bottom: '-7px',
+        margin: 0,
+        pointerEvents: 'all',
+        cursor: 'pointer',
+    },
 });
 exports.PillIconButton = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,
 })(function (_a, Element, model) {
-    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children"]);
-    return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: tokens_1.space.l, width: tokens_1.space.l, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), tabIndex: -1, as: Element, position: "relative" }, elemProps),
-        react_1.default.createElement(StyledFocusTarget, { "aria-hidden": "true", tabIndex: model.state.disabled ? -1 : 0 }),
-        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, size: 24 })));
+    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, _c = _a["aria-label"], ariaLabel = _c === void 0 ? 'remove' : _c, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children", 'aria-label']);
+    return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), "aria-labelledby": "removable-" + model.state.id + " label-" + model.state.id, as: Element, position: "relative" }, elemProps),
+        react_1.default.createElement(icon_1.SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: tokens_1.space.m, "aria-hidden": true, role: "img" })));
 });

package/dist/commonjs/pill/lib/PillLabel.d.ts

@@ -5,6 +5,7 @@ export interface PillLabelProps extends BoxProps {
 }
 export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;EAepB,CAAC"}
+{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;;EAgBpB,CAAC"}

package/dist/commonjs/pill/lib/PillLabel.js

@@ -43,5 +43,5 @@ exports.PillLabel = common_1.createSubcomponent('span')({
 })(function (_a, Element, model) {
     var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
     return (react_1.default.createElement(tooltip_1.OverflowTooltip, __assign({}, tooltipProps),
-        react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element }, elemProps), elemProps.children)));
+        react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: "label-" + model.state.id }, elemProps), elemProps.children)));
 });

package/dist/commonjs/pill/lib/usePillModel.d.ts

@@ -8,8 +8,14 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
      * Use to disable a pill.
      */
     disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
 }> & {} & {}) | undefined) => {
     state: {
+        id: string;
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
          * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -31,7 +37,13 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
      * Use to disable a pill.
      */
     disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
 }, {}, {
+    id: string;
     /**
      * Determines the max width of the pill. If the pill text is longer than the max width,
      * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -43,6 +55,7 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
     disabled: boolean;
 }, {}, {
     state: {
+        id: string;
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
          * text will be truncated and a tooltip will show the rest of the content when hovered over

package/dist/commonjs/pill/lib/usePillModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;;IAPH;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EASL,CAAC"}
+{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;QAZH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;IAZH;;;OAGG;;IAEH;;OAEG;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EAgBL,CAAC"}

package/dist/commonjs/pill/lib/usePillModel.js

@@ -24,8 +24,14 @@ exports.usePillModel = common_1.createModelHook({
          * Use to disable a pill.
          */
         disabled: false,
+        /**
+         * ID used to add accessibility labels to pill elements.
+         * @default `useUniqueId()`
+         */
+        id: '',
     },
 })(function (config) {
-    var state = __assign({}, config);
+    var id = common_1.useUniqueId(config.id);
+    var state = __assign(__assign({}, config), { id: id });
     return { state: state, events: {} };
 });

package/dist/es6/pill/lib/Pill.d.ts

@@ -10,8 +10,10 @@ export interface PillProps extends BoxProps {
 export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
     maxWidth: string | number;
     disabled: boolean;
+    id: string;
 }> & {} & {}, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };
@@ -19,6 +21,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 }> & {
     Context: React.Context<{
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -27,6 +30,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 } & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -34,6 +38,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     }>;
     Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -42,6 +47,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -49,6 +55,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     }>;
     IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };

package/dist/es6/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAgID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Df,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}

package/dist/es6/pill/lib/Pill.js

@@ -105,7 +105,6 @@ var getRemovablePillColors = function (disabled) {
 };
 var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: borderRadius.m, flexShrink: 0 }, type.levels.subtext.large), { color: colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + space.xxs, height: space.m, position: 'relative' });
 var StyledBasePill = styled(BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
-        borderColor: colors.blueberry400,
         'span[data-count="ck-pill-count"]': {
             borderTop: "1px solid " + colors.blueberry400,
             borderBottom: "1px solid " + colors.blueberry400,
@@ -122,10 +121,18 @@ var StyledBasePill = styled(BaseButton.as('button'))(__assign(__assign(__assign(
             border: 'none',
         },
     },
-})), boxStyleFn);
+})), function (_a) {
+    var variant = _a.variant;
+    return ({
+        '&:focus': {
+            borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+        },
+    });
+}, boxStyleFn);
 var StyledNonInteractivePill = styled(StyledBasePill)({
     cursor: 'default',
     overflow: 'revert',
+    position: 'relative',
 });
 export var Pill = createContainer('button')({
     modelHook: usePillModel,
@@ -139,7 +146,7 @@ export var Pill = createContainer('button')({
 })(function (_a, Element, model) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);
     return (React.createElement(React.Fragment, null,
-        variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + colors.licorice200 }, elemProps),
+        variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + colors.licorice200, id: model.state.id }, elemProps),
             React.createElement(PillLabel, null, elemProps.children))),
         variant === 'default' && (React.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
             React.createElement(HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, function (child, index) {
@@ -148,7 +155,7 @@ export var Pill = createContainer('button')({
                 }
                 return (React.createElement(Stack.Item, { key: index, display: "inline-flex" }, child));
             })))),
-        variant === 'removable' && (React.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span' }, elemProps),
+        variant === 'removable' && (React.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
             React.createElement(HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return React.createElement(PillLabel, { key: index }, child);

package/dist/es6/pill/lib/PillAvatar.d.ts

@@ -3,6 +3,7 @@ export interface PillAvatarProps extends AvatarProps {
 }
 export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillAvatarProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/es6/pill/lib/PillAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}
+{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;;EAerB,CAAC"}

package/dist/es6/pill/lib/PillAvatar.js

@@ -19,5 +19,5 @@ import { usePillModel } from './usePillModel';
 export var PillAvatar = createSubcomponent('button')({
     modelHook: usePillModel,
 })(function (elemProps, Element, model) {
-    return (React.createElement(Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18 }, elemProps, { disabled: model.state.disabled }), elemProps.children));
+    return (React.createElement(Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
 });

package/dist/es6/pill/lib/PillIcon.d.ts

@@ -9,6 +9,7 @@ export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
 }
 export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/es6/pill/lib/PillIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;EAanB,CAAC"}
+{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;;EAenB,CAAC"}

package/dist/es6/pill/lib/PillIcon.js

@@ -30,5 +30,5 @@ export var PillIcon = createSubcomponent('span')({
     modelHook: usePillModel,
 })(function (_a, Element) {
     var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
-    return (React.createElement(SystemIcon, __assign({ marginInlineStart: "-" + space.xxxs, display: "flex", as: Element, size: 20, icon: icon || plusIcon }, elemProps)));
+    return (React.createElement(SystemIcon, __assign({ marginInlineStart: "-" + space.xxxs, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || plusIcon }, elemProps)));
 });

package/dist/es6/pill/lib/PillIconButton.d.ts

@@ -6,9 +6,15 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
      * @default `xSmallIcon`
      */
     icon?: CanvasSystemIcon;
+    /**
+     * The aria label for the removable icon
+     * @default 'remove'
+     */
+    'aria-label'?: string;
 }
 export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/es6/pill/lib/PillIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAuDD,eAAO,MAAM,cAAc;;;;;;EAuB1B,CAAC"}
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA6CD,eAAO,MAAM,cAAc;;;;;;;EAgC1B,CAAC"}

package/dist/es6/pill/lib/PillIconButton.js

@@ -25,7 +25,7 @@ import { focusRing, styled, createSubcomponent } from '@workday/canvas-kit-react
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { usePillModel } from './usePillModel';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
-import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
+import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { BaseButton } from '@workday/canvas-kit-react/button';
 var getIconColors = function () {
     return {
@@ -41,9 +41,7 @@ var getIconColors = function () {
         focus: {
             icon: colors.licorice500,
             focusRing: focusRing({
-                width: 0,
                 innerColor: 'transparent',
-                outerColor: 'transparent',
             }),
         },
         disabled: {
@@ -52,31 +50,26 @@ var getIconColors = function () {
         },
     };
 };
-var StyledFocusTarget = styled('span')({
-    height: 20,
-    position: 'absolute',
-    right: '5px',
-    left: space.xxxs,
-    margin: 0,
-    borderRadius: borderRadius.m,
-    '&:focus': __assign({ outline: 'none' }, focusRing({
-        outerColor: colors.blueberry400,
-        innerColor: 'transparent',
-        separation: 0,
-        width: 2,
-        inset: 'inner',
-    })),
-});
 var StyledIconButton = styled(BaseButton)({
-    marginInlineEnd: '-14px !important',
-    paddingInlineEnd: space.xxxs,
-    marginInlineStart: "-" + space.xxs + " !important",
+    marginInlineEnd: '-7px',
+    marginInlineStart: "-2px",
+    overflow: 'visible',
+    '::after': {
+        content: '""',
+        height: space.l,
+        width: space.l,
+        position: 'absolute',
+        left: '-7px',
+        bottom: '-7px',
+        margin: 0,
+        pointerEvents: 'all',
+        cursor: 'pointer',
+    },
 });
 export var PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,
 })(function (_a, Element, model) {
-    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children"]);
-    return (React.createElement(StyledIconButton, __assign({ borderRadius: "s", height: space.l, width: space.l, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), tabIndex: -1, as: Element, position: "relative" }, elemProps),
-        React.createElement(StyledFocusTarget, { "aria-hidden": "true", tabIndex: model.state.disabled ? -1 : 0 }),
-        React.createElement(SystemIcon, { icon: icon, size: 24 })));
+    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, _c = _a["aria-label"], ariaLabel = _c === void 0 ? 'remove' : _c, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children", 'aria-label']);
+    return (React.createElement(StyledIconButton, __assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), "aria-labelledby": "removable-" + model.state.id + " label-" + model.state.id, as: Element, position: "relative" }, elemProps),
+        React.createElement(SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: space.m, "aria-hidden": true, role: "img" })));
 });

package/dist/es6/pill/lib/PillLabel.d.ts

@@ -5,6 +5,7 @@ export interface PillLabelProps extends BoxProps {
 }
 export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/es6/pill/lib/PillLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;EAepB,CAAC"}
+{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;;EAgBpB,CAAC"}

package/dist/es6/pill/lib/PillLabel.js

@@ -37,5 +37,5 @@ export var PillLabel = createSubcomponent('span')({
 })(function (_a, Element, model) {
     var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
     return (React.createElement(OverflowTooltip, __assign({}, tooltipProps),
-        React.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element }, elemProps), elemProps.children)));
+        React.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: "label-" + model.state.id }, elemProps), elemProps.children)));
 });

package/dist/es6/pill/lib/usePillModel.d.ts

@@ -8,8 +8,14 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
      * Use to disable a pill.
      */
     disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
 }> & {} & {}) | undefined) => {
     state: {
+        id: string;
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
          * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -31,7 +37,13 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
      * Use to disable a pill.
      */
     disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
 }, {}, {
+    id: string;
     /**
      * Determines the max width of the pill. If the pill text is longer than the max width,
      * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -43,6 +55,7 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
     disabled: boolean;
 }, {}, {
     state: {
+        id: string;
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
          * text will be truncated and a tooltip will show the rest of the content when hovered over

package/dist/es6/pill/lib/usePillModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;;IAPH;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EASL,CAAC"}
+{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;QAZH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;IAZH;;;OAGG;;IAEH;;OAEG;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EAgBL,CAAC"}

package/dist/es6/pill/lib/usePillModel.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { createModelHook } from '@workday/canvas-kit-react/common';
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
 export var usePillModel = createModelHook({
     defaultConfig: {
         /**
@@ -21,8 +21,14 @@ export var usePillModel = createModelHook({
          * Use to disable a pill.
          */
         disabled: false,
+        /**
+         * ID used to add accessibility labels to pill elements.
+         * @default `useUniqueId()`
+         */
+        id: '',
     },
 })(function (config) {
-    var state = __assign({}, config);
+    var id = useUniqueId(config.id);
+    var state = __assign(__assign({}, config), { id: id });
     return { state: state, events: {} };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "8.0.0-alpha.116-next.1+026b6673",
+  "version": "8.0.0-alpha.118-next.1+d45e9ab1",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-preview-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/preview-react"
   },
   "files": [
     "*/package.json",
@@ -45,15 +46,15 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^8.0.0-alpha.116-next.1+026b6673",
+    "@workday/canvas-kit-react": "^8.0.0-alpha.118-next.1+d45e9ab1",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/design-assets-types": "^0.2.4"
+    "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.116-next.1+026b6673",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.118-next.1+d45e9ab1",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "026b66731361064192c405e99eb0e1412c7dd09f"
+  "gitHead": "d45e9ab1446a7c0c4bf7403f0c75db8d3793d4f1"
 }

package/pill/lib/Pill.tsx

@@ -92,6 +92,7 @@ const getRemovablePillColors = (disabled?: boolean) => {
       icon: colors.licorice200,
       background: colors.soap300,
       label: colors.blackPepper400,
+
       focusRing: focusRing({
         width: 0,
         innerColor: 'transparent',
@@ -124,7 +125,6 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
   {
     ...pillBaseStyles,
     '&:focus': {
-      borderColor: colors.blueberry400,
       'span[data-count="ck-pill-count"]': {
         borderTop: `1px solid ${colors.blueberry400}`,
         borderBottom: `1px solid ${colors.blueberry400}`,
@@ -146,12 +146,18 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
       },
     }),
   },
+  ({variant}) => ({
+    '&:focus': {
+      borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+    },
+  }),
   boxStyleFn
 );
 
-const StyledNonInteractivePill = styled(StyledBasePill)({
+const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
   cursor: 'default',
   overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
+  position: 'relative',
 });
 
 export const Pill = createContainer('button')({
@@ -171,6 +177,7 @@ export const Pill = createContainer('button')({
           maxWidth={model.state.maxWidth}
           as={Element !== 'button' ? Element : 'span'}
           border={`1px solid ${colors.licorice200}`}
+          id={model.state.id}
           {...elemProps}
         >
           <PillLabel>{elemProps.children}</PillLabel>
@@ -201,6 +208,7 @@ export const Pill = createContainer('button')({
         <StyledNonInteractivePill
           colors={getRemovablePillColors(model.state.disabled)}
           as={Element !== 'button' ? Element : 'span'}
+          variant={variant}
           {...elemProps}
         >
           <HStack spacing="xxxs" display="inline-flex" alignItems="center" justifyContent="center">

package/pill/lib/PillAvatar.tsx

@@ -17,6 +17,7 @@ export const PillAvatar = createSubcomponent('button')({
       style={{opacity: model.state.disabled ? '.7' : '1'}}
       as="div"
       size={18}
+      altText={undefined}
       {...elemProps}
       disabled={model.state.disabled}
     >

package/pill/lib/PillIcon.tsx

@@ -25,6 +25,8 @@ export const PillIcon = createSubcomponent('span')({
       display="flex"
       as={Element}
       size={20}
+      role="img"
+      aria-label="add"
       icon={icon || plusIcon}
       {...elemProps}
     />

package/pill/lib/PillIconButton.tsx

@@ -6,7 +6,7 @@ import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {usePillModel} from './usePillModel';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {BaseButton} from '@workday/canvas-kit-react/button';
 
 export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
@@ -15,6 +15,11 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
    * @default `xSmallIcon`
    */
   icon?: CanvasSystemIcon;
+  /**
+   * The aria label for the removable icon
+   * @default 'remove'
+   */
+  'aria-label'?: string;
 }
 
 const getIconColors = () => {
@@ -33,9 +38,7 @@ const getIconColors = () => {
       icon: colors.licorice500,
 
       focusRing: focusRing({
-        width: 0,
         innerColor: 'transparent',
-        outerColor: 'transparent',
       }),
     },
     disabled: {
@@ -45,51 +48,52 @@ const getIconColors = () => {
   };
 };
 
-const StyledFocusTarget = styled('span')<StyledType & PillIconButtonProps>({
-  height: 20,
-  position: 'absolute',
-  right: '5px',
-  left: space.xxxs,
-  margin: 0,
-  borderRadius: borderRadius.m,
-  '&:focus': {
-    outline: 'none',
-    ...focusRing({
-      outerColor: colors.blueberry400,
-      innerColor: 'transparent',
-      separation: 0,
-      width: 2,
-      inset: 'inner',
-    }),
-  },
-});
-
 const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
-  marginInlineEnd: '-14px !important', // visually pull in the pill to the right size
-  paddingInlineEnd: space.xxxs, // add 4px padding outside the pill for click target
-  marginInlineStart: `-${space.xxs} !important`, // visually create space between label and the button
+  marginInlineEnd: '-7px', // visually pull in the pill to the right size
+  marginInlineStart: `-2px`, // visually create space between label and the button
+  overflow: 'visible',
+  '::after': {
+    content: '""',
+    height: space.l,
+    width: space.l,
+    position: 'absolute',
+    left: '-7px',
+    bottom: '-7px',
+    margin: 0,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+  },
 });
 
 export const PillIconButton = createSubcomponent('button')({
   modelHook: usePillModel,
 })<PillIconButtonProps>(
-  ({size, icon = xSmallIcon, maxWidth, children, ...elemProps}, Element, model) => {
+  (
+    {size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps},
+    Element,
+    model
+  ) => {
     return (
       <StyledIconButton
         borderRadius="s"
-        height={space.l}
-        width={space.l}
+        height={20}
+        width={20}
         padding="zero"
         disabled={model.state.disabled}
         colors={getIconColors()}
-        tabIndex={-1}
+        aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
         as={Element}
         position="relative"
         {...elemProps}
       >
-        {/* We made the clickable element in this case the button larger, and have the span be the visible focus area */}
-        <StyledFocusTarget aria-hidden="true" tabIndex={model.state.disabled ? -1 : 0} />
-        <SystemIcon icon={icon} size={24} />
+        <SystemIcon
+          aria-label={ariaLabel}
+          id={`removable-${model.state.id}`}
+          icon={icon}
+          size={space.m}
+          aria-hidden // This works for Chrome but not needed in Safari
+          role="img"
+        />
       </StyledIconButton>
     );
   }

package/pill/lib/PillLabel.tsx

@@ -26,6 +26,7 @@ export const PillLabel = createSubcomponent('span')({
         color={model.state.disabled ? colors.licorice100 : 'inherit'}
         maxWidth={model.state.maxWidth}
         as={Element}
+        id={`label-${model.state.id}`}
         {...elemProps}
       >
         {elemProps.children}

package/pill/lib/usePillModel.tsx

@@ -1,4 +1,4 @@
-import {createModelHook} from '@workday/canvas-kit-react/common';
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
 export const usePillModel = createModelHook({
   defaultConfig: {
@@ -11,10 +11,17 @@ export const usePillModel = createModelHook({
      * Use to disable a pill.
      */
     disabled: false,
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: '',
   },
 })(config => {
+  const id = useUniqueId(config.id);
   const state = {
     ...config,
+    id,
   };
 
   return {state, events: {}};