@cloudscape-design/components-themeable 3.0.1255 → 3.0.1257

package/lib/internal/template/token/interfaces.d.ts

@@ -54,8 +54,45 @@ export interface TokenProps extends BaseComponentProps {
      * Only applies to plain text labels.
      */
     tooltipContent?: string;
+    /**
+     * An object containing CSS properties to customize the token's visual appearance.
+     * Refer to the [style](/components/token/?tabId=style) tab for more details.
+     * @awsuiSystem core
+     */
+    style?: TokenProps.Style;
 }
 export declare namespace TokenProps {
     type Variant = 'normal' | 'inline';
+    interface Style {
+        root?: {
+            background?: {
+                default?: string;
+                disabled?: string;
+                readOnly?: string;
+            };
+            borderColor?: {
+                default?: string;
+                disabled?: string;
+                readOnly?: string;
+            };
+            borderRadius?: string;
+            borderWidth?: string;
+            paddingBlock?: string;
+            paddingInline?: string;
+        };
+        dismissButton?: {
+            color?: {
+                default?: string;
+                disabled?: string;
+                hover?: string;
+                readOnly?: string;
+            };
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/token/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAE7B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IAEtC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC3C"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAE7B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IAEtC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE1C,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE;gBACX,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,WAAW,CAAC,EAAE;gBACZ,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;CACF"}

package/lib/internal/template/token/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TokenProps extends BaseComponentProps {\n  /** Slot for the label of the token as text or an element.\n   *\n   * For `variant=\"inline\"`, only plain text is supported, for example, strings or numbers.\n   */\n  label: React.ReactNode;\n\n  /**\n   * Adds an `aria-label` to the token.\n   *\n   * Use this if the label is not plain text.\n   */\n  ariaLabel?: string;\n\n  /** A label tag that provides additional guidance, shown next to the label. */\n  labelTag?: string;\n\n  /** Further information about the token that appears below the label. */\n  description?: string;\n\n  /** A list of tags giving further guidance about the token. */\n  tags?: ReadonlyArray<string>;\n\n  /** An icon at the start of the token.\n   *\n   * When `variant=\"normal\"`, if a description or tags are set, icon size should be `normal`.\n   *\n   * When `variant=\"inline\"`, icon size should be `small`.\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Specifies the token's visual style and functionality.\n   *\n   * For `inline` only label, icon and dismiss button are displayed.\n   *\n   * Defaults to `normal` if not specified.\n   */\n  variant?: TokenProps.Variant;\n\n  /** Determines whether the token is disabled. */\n  disabled?: boolean;\n\n  /**\n   * Specifies if the control is read-only. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n\n  /** Adds an `aria-label` to the dismiss button. */\n  dismissLabel?: string;\n\n  /**\n   * Called when the user clicks on the dismiss button.\n   *\n   * Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler;\n\n  /**\n   * Content to display in the tooltip when `variant=\"inline\"`. The tooltip appears when the token label is truncated due to insufficient space.\n   *\n   * Only applies to plain text labels.\n   */\n  tooltipContent?: string;\n}\n\nexport namespace TokenProps {\n  export type Variant = 'normal' | 'inline';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TokenProps extends BaseComponentProps {\n  /** Slot for the label of the token as text or an element.\n   *\n   * For `variant=\"inline\"`, only plain text is supported, for example, strings or numbers.\n   */\n  label: React.ReactNode;\n\n  /**\n   * Adds an `aria-label` to the token.\n   *\n   * Use this if the label is not plain text.\n   */\n  ariaLabel?: string;\n\n  /** A label tag that provides additional guidance, shown next to the label. */\n  labelTag?: string;\n\n  /** Further information about the token that appears below the label. */\n  description?: string;\n\n  /** A list of tags giving further guidance about the token. */\n  tags?: ReadonlyArray<string>;\n\n  /** An icon at the start of the token.\n   *\n   * When `variant=\"normal\"`, if a description or tags are set, icon size should be `normal`.\n   *\n   * When `variant=\"inline\"`, icon size should be `small`.\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Specifies the token's visual style and functionality.\n   *\n   * For `inline` only label, icon and dismiss button are displayed.\n   *\n   * Defaults to `normal` if not specified.\n   */\n  variant?: TokenProps.Variant;\n\n  /** Determines whether the token is disabled. */\n  disabled?: boolean;\n\n  /**\n   * Specifies if the control is read-only. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n\n  /** Adds an `aria-label` to the dismiss button. */\n  dismissLabel?: string;\n\n  /**\n   * Called when the user clicks on the dismiss button.\n   *\n   * Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler;\n\n  /**\n   * Content to display in the tooltip when `variant=\"inline\"`. The tooltip appears when the token label is truncated due to insufficient space.\n   *\n   * Only applies to plain text labels.\n   */\n  tooltipContent?: string;\n\n  /**\n   * An object containing CSS properties to customize the token's visual appearance.\n   * Refer to the [style](/components/token/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: TokenProps.Style;\n}\n\nexport namespace TokenProps {\n  export type Variant = 'normal' | 'inline';\n\n  export interface Style {\n    root?: {\n      background?: {\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      borderColor?: {\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    dismissButton?: {\n      color?: {\n        default?: string;\n        disabled?: string;\n        hover?: string;\n        readOnly?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}

package/lib/internal/template/token/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,KAAK,kBAAkB,GAAG,UAAU,GAClC,0BAA0B,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEJ,iBAAS,aAAa,CAAC,EAErB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,cAAc,EAGd,IAAI,EACJ,mBAAmB,EAGnB,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,kBAAkB,eA+HpB;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,KAAK,kBAAkB,GAAG,UAAU,GAClC,0BAA0B,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEJ,iBAAS,aAAa,CAAC,EAErB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,cAAc,EAGd,IAAI,EACJ,mBAAmB,EAGnB,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,kBAAkB,eAiIpB;AAED,eAAe,aAAa,CAAC"}

package/lib/internal/template/token/internal.js

@@ -8,6 +8,7 @@ import Option from '../internal/components/option';
 import LiveRegion from '../live-region/internal';
 import Tooltip from '../tooltip/internal.js';
 import DismissButton from './dismiss-button';
+import { getTokenRootStyles } from './styles';
 import legacyTestingStyles from '../token-group/styles.css.js';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -20,6 +21,7 @@ role, disableInnerPadding,
 // Base
 __internalRootRef, ...restProps }) {
     const baseProps = getBaseProps(restProps);
+    const tokenRootStyleProps = getTokenRootStyles(restProps.style);
     const labelContainerRef = useRef(null);
     const labelRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
@@ -74,7 +76,7 @@ __internalRootRef, ...restProps }) {
         }, onMouseLeave: () => {
             setShowTooltip(false);
         }, tabIndex: !!tooltipContent && isInline && isEllipsisActive ? 0 : undefined },
-        React.createElement(SpanOrDivTag, { className: clsx(!isInline ? styles['token-box'] : styles['token-box-inline'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], !isInline && !onDismiss && styles['token-box-without-dismiss'], disableInnerPadding && styles['disable-padding']) },
+        React.createElement(SpanOrDivTag, { className: clsx(!isInline ? styles['token-box'] : styles['token-box-inline'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], !isInline && !onDismiss && styles['token-box-without-dismiss'], disableInnerPadding && styles['disable-padding']), style: tokenRootStyleProps },
             React.createElement(Option, { className: clsx(isInline && styles['token-option-inline']), triggerVariant: isInline, option: buildOptionDefinition(), disableTitleTooltip: !!tooltipContent, labelContainerRef: labelContainerRef, labelRef: labelRef, labelId: ariaLabelledbyId }),
             onDismiss && (React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss, readOnly: readOnly, inline: isInline }))),
         !!tooltipContent && isInline && isEllipsisActive && showTooltip && (React.createElement(Tooltip, { "data-testid": "token-tooltip", getTrack: () => labelContainerRef.current, content: React.createElement(LiveRegion, null,

package/lib/internal/template/token/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../live-region/internal';\nimport Tooltip from '../tooltip/internal.js';\nimport DismissButton from './dismiss-button';\nimport { TokenProps } from './interfaces';\n\nimport legacyTestingStyles from '../token-group/styles.css.js';\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTokenProps = TokenProps &\n  InternalBaseComponentProps & {\n    role?: string;\n    disableInnerPadding?: boolean;\n  };\n\nfunction InternalToken({\n  // External\n  label,\n  ariaLabel,\n  labelTag,\n  description,\n  variant = 'normal',\n  disabled,\n  readOnly,\n  icon,\n  tags,\n  dismissLabel,\n  onDismiss,\n  tooltipContent,\n\n  // Internal\n  role,\n  disableInnerPadding,\n\n  // Base\n  __internalRootRef,\n  ...restProps\n}: InternalTokenProps) {\n  const baseProps = getBaseProps(restProps);\n  const labelContainerRef = useRef<HTMLSpanElement>(null);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n  const isInline = variant === 'inline';\n  const ariaLabelledbyId = useUniqueId();\n\n  const isLabelOverflowing = () => {\n    const labelContent = labelRef.current;\n    const labelContainer = labelContainerRef.current;\n\n    if (labelContent && labelContainer) {\n      return labelContent.offsetWidth > labelContainer.offsetWidth;\n    }\n  };\n\n  useResizeObserver(labelContainerRef, () => {\n    if (isInline) {\n      setIsEllipsisActive(isLabelOverflowing() ?? false);\n    }\n  });\n\n  const buildOptionDefinition = () => {\n    const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';\n    const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };\n\n    if (isInline) {\n      if (!isLabelStringOrNumber) {\n        warnOnce('Label', `Only plain text (strings or numbers) are supported when variant=\"inline\".`);\n      }\n\n      return {\n        ...labelObject,\n        disabled,\n        __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{icon}</span>,\n      };\n    } else {\n      return {\n        ...labelObject,\n        disabled,\n        labelTag,\n        description,\n        tags,\n        __customIcon: icon && <span className={styles.icon}>{icon}</span>,\n      };\n    }\n  };\n\n  // Use span for inline tokens (e.g. inside contentEditable) to avoid block-level elements breaking text flow.\n  const SpanOrDivTag = isInline ? 'span' : 'div';\n\n  return (\n    <SpanOrDivTag\n      {...baseProps}\n      ref={__internalRootRef}\n      className={clsx(\n        styles.root,\n        legacyTestingStyles.token,\n        testUtilStyles.root,\n        !isInline ? styles['token-normal'] : styles['token-inline'],\n        analyticsSelectors.token,\n        baseProps.className\n      )}\n      aria-label={ariaLabel}\n      aria-labelledby={!ariaLabel ? ariaLabelledbyId : undefined}\n      aria-disabled={!!disabled}\n      role={role ?? 'group'}\n      onFocus={() => {\n        setShowTooltip(true);\n      }}\n      onBlur={() => {\n        setShowTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n      }}\n      tabIndex={!!tooltipContent && isInline && isEllipsisActive ? 0 : undefined}\n    >\n      <SpanOrDivTag\n        className={clsx(\n          !isInline ? styles['token-box'] : styles['token-box-inline'],\n          disabled && styles['token-box-disabled'],\n          readOnly && styles['token-box-readonly'],\n          !isInline && !onDismiss && styles['token-box-without-dismiss'],\n          disableInnerPadding && styles['disable-padding']\n        )}\n      >\n        <Option\n          className={clsx(isInline && styles['token-option-inline'])}\n          triggerVariant={isInline}\n          option={buildOptionDefinition()}\n          disableTitleTooltip={!!tooltipContent}\n          labelContainerRef={labelContainerRef}\n          labelRef={labelRef}\n          labelId={ariaLabelledbyId}\n        />\n        {onDismiss && (\n          <DismissButton\n            disabled={disabled}\n            dismissLabel={dismissLabel}\n            onDismiss={onDismiss}\n            readOnly={readOnly}\n            inline={isInline}\n          />\n        )}\n      </SpanOrDivTag>\n      {!!tooltipContent && isInline && isEllipsisActive && showTooltip && (\n        <Tooltip\n          data-testid=\"token-tooltip\"\n          getTrack={() => labelContainerRef.current}\n          content={\n            <LiveRegion>\n              <span data-testid=\"tooltip-live-region-content\">{tooltipContent}</span>\n            </LiveRegion>\n          }\n          onEscape={() => {\n            setShowTooltip(false);\n          }}\n        />\n      )}\n    </SpanOrDivTag>\n  );\n}\n\nexport default InternalToken;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../live-region/internal';\nimport Tooltip from '../tooltip/internal.js';\nimport DismissButton from './dismiss-button';\nimport { TokenProps } from './interfaces';\nimport { getTokenRootStyles } from './styles';\n\nimport legacyTestingStyles from '../token-group/styles.css.js';\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTokenProps = TokenProps &\n  InternalBaseComponentProps & {\n    role?: string;\n    disableInnerPadding?: boolean;\n  };\n\nfunction InternalToken({\n  // External\n  label,\n  ariaLabel,\n  labelTag,\n  description,\n  variant = 'normal',\n  disabled,\n  readOnly,\n  icon,\n  tags,\n  dismissLabel,\n  onDismiss,\n  tooltipContent,\n\n  // Internal\n  role,\n  disableInnerPadding,\n\n  // Base\n  __internalRootRef,\n  ...restProps\n}: InternalTokenProps) {\n  const baseProps = getBaseProps(restProps);\n  const tokenRootStyleProps = getTokenRootStyles(restProps.style);\n  const labelContainerRef = useRef<HTMLSpanElement>(null);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n  const isInline = variant === 'inline';\n  const ariaLabelledbyId = useUniqueId();\n\n  const isLabelOverflowing = () => {\n    const labelContent = labelRef.current;\n    const labelContainer = labelContainerRef.current;\n\n    if (labelContent && labelContainer) {\n      return labelContent.offsetWidth > labelContainer.offsetWidth;\n    }\n  };\n\n  useResizeObserver(labelContainerRef, () => {\n    if (isInline) {\n      setIsEllipsisActive(isLabelOverflowing() ?? false);\n    }\n  });\n\n  const buildOptionDefinition = () => {\n    const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';\n    const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };\n\n    if (isInline) {\n      if (!isLabelStringOrNumber) {\n        warnOnce('Label', `Only plain text (strings or numbers) are supported when variant=\"inline\".`);\n      }\n\n      return {\n        ...labelObject,\n        disabled,\n        __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{icon}</span>,\n      };\n    } else {\n      return {\n        ...labelObject,\n        disabled,\n        labelTag,\n        description,\n        tags,\n        __customIcon: icon && <span className={styles.icon}>{icon}</span>,\n      };\n    }\n  };\n\n  // Use span for inline tokens (e.g. inside contentEditable) to avoid block-level elements breaking text flow.\n  const SpanOrDivTag = isInline ? 'span' : 'div';\n\n  return (\n    <SpanOrDivTag\n      {...baseProps}\n      ref={__internalRootRef}\n      className={clsx(\n        styles.root,\n        legacyTestingStyles.token,\n        testUtilStyles.root,\n        !isInline ? styles['token-normal'] : styles['token-inline'],\n        analyticsSelectors.token,\n        baseProps.className\n      )}\n      aria-label={ariaLabel}\n      aria-labelledby={!ariaLabel ? ariaLabelledbyId : undefined}\n      aria-disabled={!!disabled}\n      role={role ?? 'group'}\n      onFocus={() => {\n        setShowTooltip(true);\n      }}\n      onBlur={() => {\n        setShowTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n      }}\n      tabIndex={!!tooltipContent && isInline && isEllipsisActive ? 0 : undefined}\n    >\n      <SpanOrDivTag\n        className={clsx(\n          !isInline ? styles['token-box'] : styles['token-box-inline'],\n          disabled && styles['token-box-disabled'],\n          readOnly && styles['token-box-readonly'],\n          !isInline && !onDismiss && styles['token-box-without-dismiss'],\n          disableInnerPadding && styles['disable-padding']\n        )}\n        style={tokenRootStyleProps}\n      >\n        <Option\n          className={clsx(isInline && styles['token-option-inline'])}\n          triggerVariant={isInline}\n          option={buildOptionDefinition()}\n          disableTitleTooltip={!!tooltipContent}\n          labelContainerRef={labelContainerRef}\n          labelRef={labelRef}\n          labelId={ariaLabelledbyId}\n        />\n        {onDismiss && (\n          <DismissButton\n            disabled={disabled}\n            dismissLabel={dismissLabel}\n            onDismiss={onDismiss}\n            readOnly={readOnly}\n            inline={isInline}\n          />\n        )}\n      </SpanOrDivTag>\n      {!!tooltipContent && isInline && isEllipsisActive && showTooltip && (\n        <Tooltip\n          data-testid=\"token-tooltip\"\n          getTrack={() => labelContainerRef.current}\n          content={\n            <LiveRegion>\n              <span data-testid=\"tooltip-live-region-content\">{tooltipContent}</span>\n            </LiveRegion>\n          }\n          onEscape={() => {\n            setShowTooltip(false);\n          }}\n        />\n      )}\n    </SpanOrDivTag>\n  );\n}\n\nexport default InternalToken;\n"]}

package/lib/internal/template/token/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1i2wg_1w2x6_161",
-  "dismiss-button": "awsui_dismiss-button_1i2wg_1w2x6_193",
-  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_1w2x6_233",
-  "icon": "awsui_icon_1i2wg_1w2x6_240",
-  "icon-inline": "awsui_icon-inline_1i2wg_1w2x6_246",
-  "token-normal": "awsui_token-normal_1i2wg_1w2x6_251",
-  "token-inline": "awsui_token-inline_1i2wg_1w2x6_258",
-  "token-option-inline": "awsui_token-option-inline_1i2wg_1w2x6_284",
-  "token-box": "awsui_token-box_1i2wg_1w2x6_288",
-  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_1w2x6_307",
-  "token-box-inline": "awsui_token-box-inline_1i2wg_1w2x6_311",
-  "disable-padding": "awsui_disable-padding_1i2wg_1w2x6_331",
-  "token-box-readonly": "awsui_token-box-readonly_1i2wg_1w2x6_338",
-  "token-box-disabled": "awsui_token-box-disabled_1i2wg_1w2x6_339"
+  "root": "awsui_root_1i2wg_1450c_161",
+  "dismiss-button": "awsui_dismiss-button_1i2wg_1450c_193",
+  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_1450c_234",
+  "icon": "awsui_icon_1i2wg_1450c_241",
+  "icon-inline": "awsui_icon-inline_1i2wg_1450c_247",
+  "token-normal": "awsui_token-normal_1i2wg_1450c_252",
+  "token-inline": "awsui_token-inline_1i2wg_1450c_259",
+  "token-option-inline": "awsui_token-option-inline_1i2wg_1450c_285",
+  "token-box": "awsui_token-box_1i2wg_1450c_289",
+  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_1450c_308",
+  "token-box-inline": "awsui_token-box-inline_1i2wg_1450c_312",
+  "disable-padding": "awsui_disable-padding_1i2wg_1450c_332",
+  "token-box-readonly": "awsui_token-box-readonly_1i2wg_1450c_339",
+  "token-box-disabled": "awsui_token-box-disabled_1i2wg_1450c_340"
 };
   

package/lib/internal/template/token/styles.d.ts

@@ -0,0 +1,3 @@
+import { TokenProps } from './interfaces';
+export declare function getTokenRootStyles(style: TokenProps['style']): {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/internal/template/token/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/token/styles.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,MA0B5D"}

package/lib/internal/template/token/styles.js

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getTokenRootStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    if (SYSTEM !== 'core') {
+        return {};
+    }
+    return {
+        borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
+        borderWidth: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderWidth,
+        paddingBlock: (_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.paddingBlock,
+        paddingInline: (_d = style === null || style === void 0 ? void 0 : style.root) === null || _d === void 0 ? void 0 : _d.paddingInline,
+        [customCssProps.tokenStyleBackgroundDefault]: (_f = (_e = style === null || style === void 0 ? void 0 : style.root) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.default,
+        [customCssProps.tokenStyleBackgroundDisabled]: (_h = (_g = style === null || style === void 0 ? void 0 : style.root) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.disabled,
+        [customCssProps.tokenStyleBackgroundReadOnly]: (_k = (_j = style === null || style === void 0 ? void 0 : style.root) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k.readOnly,
+        [customCssProps.tokenStyleBorderColorDefault]: (_m = (_l = style === null || style === void 0 ? void 0 : style.root) === null || _l === void 0 ? void 0 : _l.borderColor) === null || _m === void 0 ? void 0 : _m.default,
+        [customCssProps.tokenStyleBorderColorDisabled]: (_p = (_o = style === null || style === void 0 ? void 0 : style.root) === null || _o === void 0 ? void 0 : _o.borderColor) === null || _p === void 0 ? void 0 : _p.disabled,
+        [customCssProps.tokenStyleBorderColorReadOnly]: (_r = (_q = style === null || style === void 0 ? void 0 : style.root) === null || _q === void 0 ? void 0 : _q.borderColor) === null || _r === void 0 ? void 0 : _r.readOnly,
+        [customCssProps.tokenStyleDismissColorDefault]: (_t = (_s = style === null || style === void 0 ? void 0 : style.dismissButton) === null || _s === void 0 ? void 0 : _s.color) === null || _t === void 0 ? void 0 : _t.default,
+        [customCssProps.tokenStyleDismissColorDisabled]: (_v = (_u = style === null || style === void 0 ? void 0 : style.dismissButton) === null || _u === void 0 ? void 0 : _u.color) === null || _v === void 0 ? void 0 : _v.disabled,
+        [customCssProps.tokenStyleDismissColorHover]: (_x = (_w = style === null || style === void 0 ? void 0 : style.dismissButton) === null || _w === void 0 ? void 0 : _w.color) === null || _x === void 0 ? void 0 : _x.hover,
+        [customCssProps.tokenStyleDismissColorReadOnly]: (_z = (_y = style === null || style === void 0 ? void 0 : style.dismissButton) === null || _y === void 0 ? void 0 : _y.color) === null || _z === void 0 ? void 0 : _z.readOnly,
+        ...(((_0 = style === null || style === void 0 ? void 0 : style.dismissButton) === null || _0 === void 0 ? void 0 : _0.focusRing) && {
+            [customCssProps.styleFocusRingBorderColor]: style.dismissButton.focusRing.borderColor,
+            [customCssProps.styleFocusRingBorderRadius]: style.dismissButton.focusRing.borderRadius,
+            [customCssProps.styleFocusRingBorderWidth]: style.dismissButton.focusRing.borderWidth,
+        }),
+    };
+}
+//# sourceMappingURL=styles.js.map

package/lib/internal/template/token/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/token/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,kBAAkB,CAAC,KAA0B;;IAC3D,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,YAAY;QACvC,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW;QACrC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,YAAY;QACvC,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,aAAa;QACzC,CAAC,cAAc,CAAC,2BAA2B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,UAAU,0CAAE,OAAO;QAC9E,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,UAAU,0CAAE,QAAQ;QAChF,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,UAAU,0CAAE,QAAQ;QAChF,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,OAAO;QAChF,CAAC,cAAc,CAAC,6BAA6B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,QAAQ;QAClF,CAAC,cAAc,CAAC,6BAA6B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,QAAQ;QAClF,CAAC,cAAc,CAAC,6BAA6B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,0CAAE,KAAK,0CAAE,OAAO;QACpF,CAAC,cAAc,CAAC,8BAA8B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,0CAAE,KAAK,0CAAE,QAAQ;QACtF,CAAC,cAAc,CAAC,2BAA2B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,0CAAE,KAAK,0CAAE,KAAK;QAChF,CAAC,cAAc,CAAC,8BAA8B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,0CAAE,KAAK,0CAAE,QAAQ;QACtF,GAAG,CAAC,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,0CAAE,SAAS,KAAI;YACrC,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,WAAW;YACrF,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,YAAY;YACvF,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,WAAW;SACtF,CAAC;KACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { TokenProps } from './interfaces';\n\nexport function getTokenRootStyles(style: TokenProps['style']) {\n  if (SYSTEM !== 'core') {\n    return {};\n  }\n\n  return {\n    borderRadius: style?.root?.borderRadius,\n    borderWidth: style?.root?.borderWidth,\n    paddingBlock: style?.root?.paddingBlock,\n    paddingInline: style?.root?.paddingInline,\n    [customCssProps.tokenStyleBackgroundDefault]: style?.root?.background?.default,\n    [customCssProps.tokenStyleBackgroundDisabled]: style?.root?.background?.disabled,\n    [customCssProps.tokenStyleBackgroundReadOnly]: style?.root?.background?.readOnly,\n    [customCssProps.tokenStyleBorderColorDefault]: style?.root?.borderColor?.default,\n    [customCssProps.tokenStyleBorderColorDisabled]: style?.root?.borderColor?.disabled,\n    [customCssProps.tokenStyleBorderColorReadOnly]: style?.root?.borderColor?.readOnly,\n    [customCssProps.tokenStyleDismissColorDefault]: style?.dismissButton?.color?.default,\n    [customCssProps.tokenStyleDismissColorDisabled]: style?.dismissButton?.color?.disabled,\n    [customCssProps.tokenStyleDismissColorHover]: style?.dismissButton?.color?.hover,\n    [customCssProps.tokenStyleDismissColorReadOnly]: style?.dismissButton?.color?.readOnly,\n    ...(style?.dismissButton?.focusRing && {\n      [customCssProps.styleFocusRingBorderColor]: style.dismissButton.focusRing.borderColor,\n      [customCssProps.styleFocusRingBorderRadius]: style.dismissButton.focusRing.borderRadius,\n      [customCssProps.styleFocusRingBorderWidth]: style.dismissButton.focusRing.borderWidth,\n    }),\n  };\n}\n"]}

package/lib/internal/template/token/styles.scoped.css

@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1i2wg_1w2x6_161:not(#\9) {
+.awsui_root_1i2wg_1450c_161:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -190,7 +190,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9) {
+.awsui_dismiss-button_1i2wg_1450c_193:not(#\9) {
   align-self: flex-start;
   margin-block-end: 0;
   margin-inline-start: var(--space-xxs-jnczic, 4px);
@@ -198,18 +198,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-width-field-9k1tdz, 1px) solid transparent;
   padding-block: 0;
   padding-inline: var(--space-xxs-jnczic, 4px);
-  color: var(--color-text-button-inline-icon-default-4lrtb0, #545b64);
+  color: var(--awsui-token-style-dismiss-color-default-hzjhvz, var(--color-text-button-inline-icon-default-4lrtb0, #545b64));
   background-color: transparent;
   cursor: pointer;
+  --awsui-style-focus-ring-box-shadow-hzjhvz: 0 0 0 var(--awsui-style-focus-ring-border-width-hzjhvz, 2px) var(--awsui-style-focus-ring-border-color-hzjhvz, var(--color-border-item-focused-r5f6xl, #0073bb));
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1450c_193:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1450c_193:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1450c_193:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -217,56 +218,56 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\
   inset-block-start: calc(-1 * 0px);
   inline-size: calc(100% + 0px + 0px);
   block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-hzjhvz, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-hzjhvz, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-hzjhvz, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-hzjhvz, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-hzjhvz);
 }
-.awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):focus {
+.awsui_dismiss-button_1i2wg_1450c_193:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):hover {
-  color: var(--color-text-button-inline-icon-hover-8fgg9l, #16191f);
+.awsui_dismiss-button_1i2wg_1450c_193:not(#\9):hover {
+  color: var(--awsui-token-style-dismiss-color-hover-hzjhvz, var(--color-text-button-inline-icon-hover-8fgg9l, #16191f));
 }
-.awsui_dismiss-button-inline_1i2wg_1w2x6_233:not(#\9) {
+.awsui_dismiss-button-inline_1i2wg_1450c_234:not(#\9) {
   padding-inline: 0;
   display: flex;
   align-items: center;
   align-self: center;
 }
 
-.awsui_icon_1i2wg_1w2x6_240:not(#\9) {
+.awsui_icon_1i2wg_1450c_241:not(#\9) {
   padding-inline-end: var(--space-xs-kw7k3v, 8px);
   align-self: flex-start;
   display: flex;
   flex-shrink: 0;
 }
-.awsui_icon-inline_1i2wg_1w2x6_246:not(#\9) {
+.awsui_icon-inline_1i2wg_1450c_247:not(#\9) {
   padding-inline-end: var(--space-xxs-jnczic, 4px);
   align-self: center;
 }
 
-.awsui_token-normal_1i2wg_1w2x6_251:not(#\9) {
+.awsui_token-normal_1i2wg_1450c_252:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_token-inline_1i2wg_1w2x6_258:not(#\9) {
+.awsui_token-inline_1i2wg_1450c_259:not(#\9) {
   display: inline-flex;
   max-inline-size: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1w2x6_258:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1450c_259:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1w2x6_258:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1450c_259:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1w2x6_258:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1450c_259:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -281,22 +282,22 @@ body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1w2x6_258:not(#\9)
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_token-option-inline_1i2wg_1w2x6_284:not(#\9) {
+.awsui_token-option-inline_1i2wg_1450c_285:not(#\9) {
   max-block-size: 20px;
 }
 
-.awsui_token-box_1i2wg_1w2x6_288:not(#\9) {
+.awsui_token-box_1i2wg_1450c_289:not(#\9) {
   position: relative;
   block-size: 100%;
-  border-block: var(--border-width-token-cwl2sl, 1px) solid var(--color-border-item-selected-vq6ddf, #0073bb);
-  border-inline: var(--border-width-token-cwl2sl, 1px) solid var(--color-border-item-selected-vq6ddf, #0073bb);
+  border-block: var(--border-width-token-cwl2sl, 1px) solid var(--awsui-token-style-border-color-default-hzjhvz, var(--color-border-item-selected-vq6ddf, #0073bb));
+  border-inline: var(--border-width-token-cwl2sl, 1px) solid var(--awsui-token-style-border-color-default-hzjhvz, var(--color-border-item-selected-vq6ddf, #0073bb));
   padding-block-start: var(--space-scaled-xxs-jatbiv, 4px);
   padding-block-end: var(--space-scaled-xxs-jatbiv, 4px);
   padding-inline-start: var(--space-field-horizontal-n5peob, 8px);
   padding-inline-end: var(--space-xxs-jnczic, 4px);
   display: flex;
   align-items: flex-start;
-  background: var(--color-background-item-selected-v20q4r, #f1faff);
+  background: var(--awsui-token-style-background-default-hzjhvz, var(--color-background-item-selected-v20q4r, #f1faff));
   border-start-start-radius: var(--border-radius-token-8arsz0, 2px);
   border-start-end-radius: var(--border-radius-token-8arsz0, 2px);
   border-end-start-radius: var(--border-radius-token-8arsz0, 2px);
@@ -304,21 +305,21 @@ body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1w2x6_258:not(#\9)
   color: var(--color-text-body-default-5qid0u, #16191f);
   box-sizing: border-box;
 }
-.awsui_token-box-without-dismiss_1i2wg_1w2x6_307:not(#\9) {
+.awsui_token-box-without-dismiss_1i2wg_1450c_308:not(#\9) {
   padding-inline-end: var(--space-field-horizontal-n5peob, 8px);
 }
 
-.awsui_token-box-inline_1i2wg_1w2x6_311:not(#\9) {
+.awsui_token-box-inline_1i2wg_1450c_312:not(#\9) {
   position: relative;
   block-size: 20px;
   max-block-size: 20px;
-  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-item-selected-vq6ddf, #0073bb);
-  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-item-selected-vq6ddf, #0073bb);
+  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-token-style-border-color-default-hzjhvz, var(--color-border-item-selected-vq6ddf, #0073bb));
+  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-token-style-border-color-default-hzjhvz, var(--color-border-item-selected-vq6ddf, #0073bb));
   padding-inline-start: var(--space-scaled-xxs-jatbiv, 4px);
   padding-inline-end: var(--space-scaled-xxs-jatbiv, 4px);
   display: flex;
   align-items: center;
-  background: var(--color-background-item-selected-v20q4r, #f1faff);
+  background: var(--awsui-token-style-background-default-hzjhvz, var(--color-background-item-selected-v20q4r, #f1faff));
   border-start-start-radius: var(--space-scaled-xxs-jatbiv, 4px);
   border-start-end-radius: var(--space-scaled-xxs-jatbiv, 4px);
   border-end-start-radius: var(--space-scaled-xxs-jatbiv, 4px);
@@ -328,30 +329,35 @@ body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1w2x6_258:not(#\9)
   max-inline-size: 100%;
 }
 
-.awsui_disable-padding_1i2wg_1w2x6_331:not(#\9) {
+.awsui_disable-padding_1i2wg_1450c_332:not(#\9) {
   padding-block-start: 0;
   padding-block-end: 0;
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
 
-.awsui_token-box-readonly_1i2wg_1w2x6_338:not(#\9),
-.awsui_token-box-disabled_1i2wg_1w2x6_339:not(#\9) {
-  border-color: var(--color-border-input-disabled-tz38ro, #eaeded);
-  background-color: var(--color-background-container-content-aemn43, #ffffff);
+.awsui_token-box-readonly_1i2wg_1450c_339:not(#\9),
+.awsui_token-box-disabled_1i2wg_1450c_340:not(#\9) {
   pointer-events: none;
 }
-.awsui_token-box-readonly_1i2wg_1w2x6_338 > .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9),
-.awsui_token-box-disabled_1i2wg_1w2x6_339 > .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9) {
-  color: var(--color-text-button-inline-icon-disabled-o6nywg, #aab7b8);
+.awsui_token-box-readonly_1i2wg_1450c_339 > .awsui_dismiss-button_1i2wg_1450c_193:not(#\9),
+.awsui_token-box-disabled_1i2wg_1450c_340 > .awsui_dismiss-button_1i2wg_1450c_193:not(#\9) {
   cursor: initial;
 }
-.awsui_token-box-readonly_1i2wg_1w2x6_338 > .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):hover,
-.awsui_token-box-disabled_1i2wg_1w2x6_339 > .awsui_dismiss-button_1i2wg_1w2x6_193:not(#\9):hover {
-  color: var(--color-text-button-inline-icon-disabled-o6nywg, #aab7b8);
+
+.awsui_token-box-readonly_1i2wg_1450c_339:not(#\9) {
+  border-color: var(--awsui-token-style-border-color-read-only-hzjhvz, var(--color-border-input-disabled-tz38ro, #eaeded));
+  background: var(--awsui-token-style-background-read-only-hzjhvz, var(--color-background-container-content-aemn43, #ffffff));
+}
+.awsui_token-box-readonly_1i2wg_1450c_339 > .awsui_dismiss-button_1i2wg_1450c_193:not(#\9) {
+  color: var(--awsui-token-style-dismiss-color-read-only-hzjhvz, var(--color-text-button-inline-icon-disabled-o6nywg, #aab7b8));
 }
 
-.awsui_token-box-disabled_1i2wg_1w2x6_339:not(#\9) {
-  border-color: var(--color-border-control-disabled-c9dn39, #d5dbdb);
+.awsui_token-box-disabled_1i2wg_1450c_340:not(#\9) {
+  border-color: var(--awsui-token-style-border-color-disabled-hzjhvz, var(--color-border-control-disabled-c9dn39, #d5dbdb));
+  background: var(--awsui-token-style-background-disabled-hzjhvz, var(--color-background-container-content-aemn43, #ffffff));
   color: var(--color-text-disabled-bhrk1i, #aab7b8);
+}
+.awsui_token-box-disabled_1i2wg_1450c_340 > .awsui_dismiss-button_1i2wg_1450c_193:not(#\9) {
+  color: var(--awsui-token-style-dismiss-color-disabled-hzjhvz, var(--color-text-button-inline-icon-disabled-o6nywg, #aab7b8));
 }

package/lib/internal/template/token/styles.selectors.js

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1i2wg_1w2x6_161",
-  "dismiss-button": "awsui_dismiss-button_1i2wg_1w2x6_193",
-  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_1w2x6_233",
-  "icon": "awsui_icon_1i2wg_1w2x6_240",
-  "icon-inline": "awsui_icon-inline_1i2wg_1w2x6_246",
-  "token-normal": "awsui_token-normal_1i2wg_1w2x6_251",
-  "token-inline": "awsui_token-inline_1i2wg_1w2x6_258",
-  "token-option-inline": "awsui_token-option-inline_1i2wg_1w2x6_284",
-  "token-box": "awsui_token-box_1i2wg_1w2x6_288",
-  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_1w2x6_307",
-  "token-box-inline": "awsui_token-box-inline_1i2wg_1w2x6_311",
-  "disable-padding": "awsui_disable-padding_1i2wg_1w2x6_331",
-  "token-box-readonly": "awsui_token-box-readonly_1i2wg_1w2x6_338",
-  "token-box-disabled": "awsui_token-box-disabled_1i2wg_1w2x6_339"
+  "root": "awsui_root_1i2wg_1450c_161",
+  "dismiss-button": "awsui_dismiss-button_1i2wg_1450c_193",
+  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_1450c_234",
+  "icon": "awsui_icon_1i2wg_1450c_241",
+  "icon-inline": "awsui_icon-inline_1i2wg_1450c_247",
+  "token-normal": "awsui_token-normal_1i2wg_1450c_252",
+  "token-inline": "awsui_token-inline_1i2wg_1450c_259",
+  "token-option-inline": "awsui_token-option-inline_1i2wg_1450c_285",
+  "token-box": "awsui_token-box_1i2wg_1450c_289",
+  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_1450c_308",
+  "token-box-inline": "awsui_token-box-inline_1i2wg_1450c_312",
+  "disable-padding": "awsui_disable-padding_1i2wg_1450c_332",
+  "token-box-readonly": "awsui_token-box-readonly_1i2wg_1450c_339",
+  "token-box-disabled": "awsui_token-box-disabled_1i2wg_1450c_340"
 };
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1255",
+  "version": "3.0.1257",
   "files": [
     "lib"
   ],