@cloudscape-design/components-themeable 3.0.1351 → 3.0.1353

package/lib/internal/template/attribute-editor/styles.scoped.css

@@ -136,10 +136,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
@@ -150,10 +146,10 @@ 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_empty-appear_n4qlp_cpi4n_153:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_n4qlp_cpi4n_1 var(--motion-duration-transition-show-paced-ljwltl, 180ms) var(--motion-easing-transition-show-paced-9j2ih7, ease-out);
+.awsui_empty-appear_n4qlp_1c69m_149:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_n4qlp_1c69m_1 var(--motion-duration-transition-show-paced-ljwltl, 180ms) var(--motion-easing-transition-show-paced-9j2ih7, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_n4qlp_cpi4n_1 {
+@keyframes awsui_awsui-motion-fade-in_n4qlp_1c69m_1 {
   from {
     opacity: 0.2;
   }
@@ -162,17 +158,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_empty-appear_n4qlp_cpi4n_153:not(#\9) {
+  .awsui_empty-appear_n4qlp_1c69m_149:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_empty-appear_n4qlp_cpi4n_153:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_cpi4n_153:not(#\9) {
+.awsui-motion-disabled .awsui_empty-appear_n4qlp_1c69m_149:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_1c69m_149:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_n4qlp_cpi4n_175:not(#\9) {
+.awsui_root_n4qlp_1c69m_171:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -208,31 +204,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: start;
 }
 
-.awsui_empty_n4qlp_cpi4n_153:not(#\9) {
+.awsui_empty_n4qlp_1c69m_149:not(#\9) {
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   color: var(--color-text-empty-y81uqw, #687078);
   grid-column: 1/-1;
 }
 
-.awsui_row_n4qlp_cpi4n_218:not(#\9) {
+.awsui_row_n4qlp_1c69m_214:not(#\9) {
   display: contents;
 }
 
-.awsui_divider_n4qlp_cpi4n_222:not(#\9) {
+.awsui_divider_n4qlp_1c69m_218:not(#\9) {
   grid-column: 1/-1;
   border-block-start: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
 }
 
-.awsui_row-control_n4qlp_cpi4n_227:not(#\9) {
+.awsui_row-control_n4qlp_1c69m_223:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_field_n4qlp_cpi4n_231:not(#\9) {
+.awsui_field_n4qlp_1c69m_227:not(#\9) {
   min-inline-size: 40px;
 }
 
-.awsui_additional-info_n4qlp_cpi4n_235:not(#\9) {
+.awsui_additional-info_n4qlp_1c69m_231:not(#\9) {
   color: var(--color-text-form-secondary-wt0md2, #687078);
   font-size: var(--font-size-body-s-89y7qg, 12px);
   line-height: var(--line-height-body-s-gako33, 16px);
@@ -242,7 +238,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-xxs-3o1yoq, 4px);
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9) {
+.awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9) {
   text-underline-offset: 0.3em;
   text-decoration-thickness: var(--font-decoration-thickness-link-n3u7wl, 1px);
   text-decoration-style: var(--font-decoration-style-link-lw1s9g, solid);
@@ -257,50 +253,50 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-s8g1xv, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9) {
+  .awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9) {
+.awsui-motion-disabled .awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9):hover {
   cursor: pointer;
   color: var(--awsui-style-color-hover-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9):focus {
+.awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9):focus {
   outline: none;
 }
-.awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9):active {
+.awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9):active {
   color: var(--awsui-style-color-active-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9):active, .awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9):focus, .awsui_additional-info_n4qlp_cpi4n_235 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9):active, .awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9):focus, .awsui_additional-info_n4qlp_1c69m_231 > a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-decoration-hover-opkmr8, currentColor);
 }
 
-.awsui_add-row_n4qlp_cpi4n_282:not(#\9) {
+.awsui_add-row_n4qlp_1c69m_278:not(#\9) {
   grid-column: 1/-1;
 }
 
-.awsui_add-button_n4qlp_cpi4n_286:not(#\9) {
+.awsui_add-button_n4qlp_1c69m_282:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_remove-button-container_n4qlp_cpi4n_290:not(#\9) {
+.awsui_remove-button-container_n4qlp_1c69m_286:not(#\9) {
   display: inline-block;
 }
 
-.awsui_remove-button-field-padding_n4qlp_cpi4n_294:not(#\9) {
+.awsui_remove-button-field-padding_n4qlp_1c69m_290:not(#\9) {
   padding-block-start: calc(var(--space-xxs-3o1yoq, 4px) + var(--line-height-body-m-5xw6xo, 22px));
 }
 
-.awsui_remove-button-own-row_n4qlp_cpi4n_298:not(#\9) {
+.awsui_remove-button-own-row_n4qlp_1c69m_294:not(#\9) {
   justify-self: end;
 }
 
-.awsui_remove-button_n4qlp_cpi4n_290:not(#\9) {
+.awsui_remove-button_n4qlp_1c69m_286:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/attribute-editor/styles.selectors.js

@@ -2,20 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "empty-appear": "awsui_empty-appear_n4qlp_cpi4n_153",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_cpi4n_1",
-  "root": "awsui_root_n4qlp_cpi4n_175",
-  "empty": "awsui_empty_n4qlp_cpi4n_153",
-  "row": "awsui_row_n4qlp_cpi4n_218",
-  "divider": "awsui_divider_n4qlp_cpi4n_222",
-  "row-control": "awsui_row-control_n4qlp_cpi4n_227",
-  "field": "awsui_field_n4qlp_cpi4n_231",
-  "additional-info": "awsui_additional-info_n4qlp_cpi4n_235",
-  "add-row": "awsui_add-row_n4qlp_cpi4n_282",
-  "add-button": "awsui_add-button_n4qlp_cpi4n_286",
-  "remove-button-container": "awsui_remove-button-container_n4qlp_cpi4n_290",
-  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_cpi4n_294",
-  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_cpi4n_298",
-  "remove-button": "awsui_remove-button_n4qlp_cpi4n_290"
+  "empty-appear": "awsui_empty-appear_n4qlp_1c69m_149",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_1c69m_1",
+  "root": "awsui_root_n4qlp_1c69m_171",
+  "empty": "awsui_empty_n4qlp_1c69m_149",
+  "row": "awsui_row_n4qlp_1c69m_214",
+  "divider": "awsui_divider_n4qlp_1c69m_218",
+  "row-control": "awsui_row-control_n4qlp_1c69m_223",
+  "field": "awsui_field_n4qlp_1c69m_227",
+  "additional-info": "awsui_additional-info_n4qlp_1c69m_231",
+  "add-row": "awsui_add-row_n4qlp_1c69m_278",
+  "add-button": "awsui_add-button_n4qlp_1c69m_282",
+  "remove-button-container": "awsui_remove-button-container_n4qlp_1c69m_286",
+  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_1c69m_290",
+  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_1c69m_294",
+  "remove-button": "awsui_remove-button_n4qlp_1c69m_286"
 };
   

package/lib/internal/template/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAmBvG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAOtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAoBvG"}

package/lib/internal/template/badge/index.js

@@ -12,7 +12,8 @@ import styles from './styles.css.js';
 export default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }) {
     const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
     const baseProps = getBaseProps(rest);
-    const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
+    const { styleClassNames } = rest;
+    const className = clsx(baseProps.className, styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.root, styles.badge, styles[`badge-color-${color}`]);
     return (React.createElement(WithNativeAttributes, { ...baseProps, tag: "span", componentName: "Badge", nativeAttributes: nativeAttributes, className: className, ref: __internalRootRef, style: getBadgeStyles(style) }, children));
 }
 applyDisplayName(Badge, 'Badge');

package/lib/internal/template/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAc;IACtG,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC;IAE1F,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,OAAO,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAE3B,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BadgeProps } from './interfaces';\nimport { getBadgeStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport { BadgeProps };\n\nexport default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }: BadgeProps) {\n  const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });\n  const baseProps = getBaseProps(rest);\n\n  const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);\n\n  return (\n    <WithNativeAttributes\n      {...baseProps}\n      tag=\"span\"\n      componentName=\"Badge\"\n      nativeAttributes={nativeAttributes}\n      className={className}\n      ref={__internalRootRef}\n      style={getBadgeStyles(style)}\n    >\n      {children}\n    </WithNativeAttributes>\n  );\n}\n\napplyDisplayName(Badge, 'Badge');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAc;IACtG,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,EAAE,eAAe,EAAE,GAAG,IAA6C,CAAC;IAE1E,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC;IAEjH,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,OAAO,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAE3B,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BadgeProps } from './interfaces';\nimport { getBadgeStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport { BadgeProps };\n\n// Style API v2\ninterface StyleClassNames {\n  root?: string;\n}\n\nexport default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }: BadgeProps) {\n  const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });\n  const baseProps = getBaseProps(rest);\n  const { styleClassNames } = rest as { styleClassNames?: StyleClassNames };\n\n  const className = clsx(baseProps.className, styleClassNames?.root, styles.badge, styles[`badge-color-${color}`]);\n\n  return (\n    <WithNativeAttributes\n      {...baseProps}\n      tag=\"span\"\n      componentName=\"Badge\"\n      nativeAttributes={nativeAttributes}\n      className={className}\n      ref={__internalRootRef}\n      style={getBadgeStyles(style)}\n    >\n      {children}\n    </WithNativeAttributes>\n  );\n}\n\napplyDisplayName(Badge, 'Badge');\n"]}

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

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "badge": "awsui_badge_1yjyg_f035l_145",
-  "badge-color-grey": "awsui_badge-color-grey_1yjyg_f035l_191",
-  "badge-color-green": "awsui_badge-color-green_1yjyg_f035l_196",
-  "badge-color-blue": "awsui_badge-color-blue_1yjyg_f035l_201",
-  "badge-color-red": "awsui_badge-color-red_1yjyg_f035l_206",
-  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_f035l_211",
-  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_f035l_216",
-  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_f035l_221",
-  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_f035l_226",
-  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_f035l_231"
+  "badge": "awsui_badge_1yjyg_v5jxh_178",
+  "badge-color-grey": "awsui_badge-color-grey_1yjyg_v5jxh_224",
+  "badge-color-green": "awsui_badge-color-green_1yjyg_v5jxh_229",
+  "badge-color-blue": "awsui_badge-color-blue_1yjyg_v5jxh_234",
+  "badge-color-red": "awsui_badge-color-red_1yjyg_v5jxh_239",
+  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_v5jxh_244",
+  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_v5jxh_249",
+  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_v5jxh_254",
+  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_v5jxh_259",
+  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_v5jxh_264"
 };
   

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

@@ -136,13 +136,46 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* Style used for links in slots/components that are text heavy, to help links stand out among
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among
-surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_badge_1yjyg_f035l_145:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@property --awsui-style-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-background-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+/* awsui:style-api-slot name=root tokens=color, background-color, border-color, border-width, border-radius, padding-block, padding-inline */
+.awsui_badge_1yjyg_v5jxh_178:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -177,59 +210,59 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-dzcybc, normal);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   display: inline-block;
-  border-start-start-radius: var(--border-radius-badge-86n91d, 16px);
-  border-start-end-radius: var(--border-radius-badge-86n91d, 16px);
-  border-end-start-radius: var(--border-radius-badge-86n91d, 16px);
-  border-end-end-radius: var(--border-radius-badge-86n91d, 16px);
+  border-start-start-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
+  border-start-end-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
+  border-end-start-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
+  border-end-end-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: var(--border-width-badge-p88itr, 0px);
-  padding-block: 0;
-  padding-inline: var(--space-xs-m9b7jf, 8px);
-  color: var(--color-text-notification-default-j0vb8v, #fafafa);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-grey_1yjyg_f035l_191:not(#\9) {
-  background-color: var(--color-background-badge-grey-6h1dmu, #545b64);
-  border-color: var(--color-border-badge-grey-7uvo1l, transparent);
-  color: var(--color-text-badge-grey-9tpmmu, #fafafa);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-green_1yjyg_f035l_196:not(#\9) {
-  background-color: var(--color-background-badge-green-vna6pb, #1d8102);
-  border-color: var(--color-border-badge-green-lv2jw1, transparent);
-  color: var(--color-text-badge-green-5g7a8n, #fafafa);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-blue_1yjyg_f035l_201:not(#\9) {
-  background-color: var(--color-background-badge-blue-knlb4f, #0073bb);
-  border-color: var(--color-border-badge-blue-ze81zs, transparent);
-  color: var(--color-text-badge-blue-r39mon, #fafafa);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-red_1yjyg_f035l_206:not(#\9) {
-  background-color: var(--color-background-badge-red-4ap748, #d13212);
-  border-color: var(--color-border-badge-red-5xqfzk, transparent);
-  color: var(--color-text-badge-red-wvf8rj, #fafafa);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-severity-critical_1yjyg_f035l_211:not(#\9) {
-  background-color: var(--color-background-notification-severity-critical-bklmxp, #870303);
-  color: var(--color-text-badge-severity-critical-y13z63, #fafafa);
-  border-color: var(--color-border-badge-severity-critical-iy9xj7, transparent);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-severity-high_1yjyg_f035l_216:not(#\9) {
-  background-color: var(--color-background-notification-severity-high-44r6oe, #ce3311);
-  color: var(--color-text-badge-severity-high-kckiuo, #fafafa);
-  border-color: var(--color-border-badge-severity-high-byl1dx, transparent);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-severity-medium_1yjyg_f035l_221:not(#\9) {
-  background-color: var(--color-background-notification-severity-medium-87oafh, #f89256);
-  color: var(--color-text-badge-severity-medium-ns9l4d, #000000);
-  border-color: var(--color-border-badge-severity-medium-7z1far, transparent);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-severity-low_1yjyg_f035l_226:not(#\9) {
-  background-color: var(--color-background-notification-severity-low-g8anka, #f2cd54);
-  color: var(--color-text-badge-severity-low-pnvr07, #16191f);
-  border-color: var(--color-border-badge-severity-low-jxgtiz, transparent);
-}
-.awsui_badge_1yjyg_f035l_145.awsui_badge-color-severity-neutral_1yjyg_f035l_231:not(#\9) {
-  background-color: var(--color-background-notification-severity-neutral-2smv4l, #687078);
-  color: var(--color-text-badge-severity-neutral-vz3r3d, #fafafa);
-  border-color: var(--color-border-badge-severity-neutral-p51wlk, transparent);
+  border-width: var(--awsui-style-border-width, var(--border-width-badge-p88itr, 0px));
+  padding-block: var(--awsui-style-padding-block, 0);
+  padding-inline: var(--awsui-style-padding-inline, var(--space-xs-m9b7jf, 8px));
+  color: var(--awsui-style-color, var(--color-text-notification-default-j0vb8v, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-grey_1yjyg_v5jxh_224:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-grey-6h1dmu, #545b64));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-grey-7uvo1l, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-grey-9tpmmu, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-green_1yjyg_v5jxh_229:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-green-vna6pb, #1d8102));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-green-lv2jw1, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-green-5g7a8n, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-blue_1yjyg_v5jxh_234:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-blue-knlb4f, #0073bb));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-blue-ze81zs, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-blue-r39mon, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-red_1yjyg_v5jxh_239:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-red-4ap748, #d13212));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-red-5xqfzk, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-red-wvf8rj, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-critical_1yjyg_v5jxh_244:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-critical-bklmxp, #870303));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-critical-iy9xj7, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-critical-y13z63, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-high_1yjyg_v5jxh_249:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-high-44r6oe, #ce3311));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-high-byl1dx, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-high-kckiuo, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-medium_1yjyg_v5jxh_254:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-medium-87oafh, #f89256));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-medium-7z1far, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-medium-ns9l4d, #000000));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-low_1yjyg_v5jxh_259:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-low-g8anka, #f2cd54));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-low-jxgtiz, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-low-pnvr07, #16191f));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-neutral_1yjyg_v5jxh_264:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-neutral-2smv4l, #687078));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-neutral-p51wlk, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-neutral-vz3r3d, #fafafa));
 }

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

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "badge": "awsui_badge_1yjyg_f035l_145",
-  "badge-color-grey": "awsui_badge-color-grey_1yjyg_f035l_191",
-  "badge-color-green": "awsui_badge-color-green_1yjyg_f035l_196",
-  "badge-color-blue": "awsui_badge-color-blue_1yjyg_f035l_201",
-  "badge-color-red": "awsui_badge-color-red_1yjyg_f035l_206",
-  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_f035l_211",
-  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_f035l_216",
-  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_f035l_221",
-  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_f035l_226",
-  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_f035l_231"
+  "badge": "awsui_badge_1yjyg_v5jxh_178",
+  "badge-color-grey": "awsui_badge-color-grey_1yjyg_v5jxh_224",
+  "badge-color-green": "awsui_badge-color-green_1yjyg_v5jxh_229",
+  "badge-color-blue": "awsui_badge-color-blue_1yjyg_v5jxh_234",
+  "badge-color-red": "awsui_badge-color-red_1yjyg_v5jxh_239",
+  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_v5jxh_244",
+  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_v5jxh_249",
+  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_v5jxh_254",
+  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_v5jxh_259",
+  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_v5jxh_264"
 };