@cloudscape-design/components-themeable 3.0.1371 → 3.0.1372

package/lib/__tests__/theming.test.js

@@ -14,6 +14,7 @@ const preset = {
 };
 jest.mock('@cloudscape-design/theming-build', () => ({
     buildThemedComponents: jest.fn().mockResolvedValue(undefined),
+    generateThemeStylesheet: jest.fn().mockReturnValue('.mock-stylesheet {}'),
 }));
 jest.mock('../internal/template/internal/generated/theming/index.cjs', () => ({
     preset,
@@ -44,4 +45,17 @@ describe('buildThemedComponents', () => {
         }));
     });
 });
+describe('generateThemeStylesheet', () => {
+    test('passes the arguments through', () => {
+        const theme = { tokens: { borderRadiusButton: '8px' } };
+        const stylesheet = (0, theming_1.generateThemeStylesheet)({ theme, selector: '.my-theme' });
+        expect(stylesheet).toBe('.mock-stylesheet {}');
+        expect(theming_build_1.generateThemeStylesheet).toHaveBeenCalledWith({
+            override: theme,
+            preset,
+            selector: '.my-theme',
+            baseThemeId: 'visual-refresh',
+        });
+    });
+});
 //# sourceMappingURL=theming.test.js.map

package/lib/__tests__/theming.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming.test.js","sourceRoot":"","sources":["../../../src-themeable/__tests__/theming.test.ts"],"names":[],"mappings":";;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,uEAA4C;AAE5C,MAAM,MAAM,GAAG;IACb,aAAa,EAAE;QACb,kBAAkB,EAAE,+BAA+B;QACnD,8BAA8B,EAAE,6CAA6C;KAC9E;CACF,CAAC;AAEF,IAAI,CAAC,IAAI,CAAC,kCAAkC,EAAE,GAAG,EAAE,CAAC,CAAC;IACnD,qBAAqB,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC;CAC9D,CAAC,CAAC,CAAC;AAEJ,IAAI,CAAC,IAAI,CAAC,2DAA2D,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5E,MAAM;CACP,CAAC,CAAC,CAAC;AAEJ,oEAA6F;AAE7F,wCAAmD;AAEnD,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,KAAK,GAAG,EAAS,CAAC;QAExB,MAAM,IAAA,+BAAqB,EAAC,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAEhG,MAAM,CAAC,qCAAgB,CAAC,CAAC,oBAAoB,CAC3C,MAAM,CAAC,gBAAgB,CAAC;YACtB,MAAM;SACP,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,KAAK,GAAG,EAAS,CAAC;QAExB,MAAM,IAAA,+BAAqB,EAAC;YAC1B,KAAK;YACL,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,gBAAgB;YAC7B,GAAG,EAAE,eAAe,EAAE,SAAS,EAAE;SAClC,CAAC,CAAC;QAEH,MAAM,CAAC,qCAAgB,CAAC,CAAC,oBAAoB,CAC3C,MAAM,CAAC,gBAAgB,CAAC;YACtB,MAAM,EAAE;gBACN,GAAG,MAAM;gBACT,aAAa,EAAE,IAAA,sBAAS,EAAC,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC;aAChE;SACF,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport mapValues from 'lodash/mapValues.js';\n\nconst preset = {\n  propertiesMap: {\n    borderRadiusButton: '--border-radius-button-aaaaaa',\n    colorBorderButtonNormalDefault: '--color-border-button-normal-default-bbbbbb',\n  },\n};\n\njest.mock('@cloudscape-design/theming-build', () => ({\n  buildThemedComponents: jest.fn().mockResolvedValue(undefined),\n}));\n\njest.mock('../internal/template/internal/generated/theming/index.cjs', () => ({\n  preset,\n}));\n\nimport { buildThemedComponents as themingCoreBuild } from '@cloudscape-design/theming-build';\n\nimport { buildThemedComponents } from '../theming';\n\ndescribe('buildThemedComponents', () => {\n  test('does not pass website token versions by default', async () => {\n    const theme = {} as any;\n\n    await buildThemedComponents({ theme, outputDir: '/tmp/output', baseThemeId: 'visual-refresh' });\n\n    expect(themingCoreBuild).toHaveBeenCalledWith(\n      expect.objectContaining({\n        preset,\n      })\n    );\n  });\n\n  test('passes stable website token versions when the feature flag is enabled', async () => {\n    const theme = {} as any;\n\n    await buildThemedComponents({\n      theme,\n      outputDir: '/tmp/output',\n      baseThemeId: 'visual-refresh',\n      ...{ __tokenHashSeed: 'website' },\n    });\n\n    expect(themingCoreBuild).toHaveBeenCalledWith(\n      expect.objectContaining({\n        preset: {\n          ...preset,\n          tokenVersions: mapValues(preset.propertiesMap, () => 'website'),\n        },\n      })\n    );\n  });\n});\n"]}
+{"version":3,"file":"theming.test.js","sourceRoot":"","sources":["../../../src-themeable/__tests__/theming.test.ts"],"names":[],"mappings":";;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,uEAA4C;AAE5C,MAAM,MAAM,GAAG;IACb,aAAa,EAAE;QACb,kBAAkB,EAAE,+BAA+B;QACnD,8BAA8B,EAAE,6CAA6C;KAC9E;CACF,CAAC;AAEF,IAAI,CAAC,IAAI,CAAC,kCAAkC,EAAE,GAAG,EAAE,CAAC,CAAC;IACnD,qBAAqB,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC;IAC7D,uBAAuB,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC;CAC1E,CAAC,CAAC,CAAC;AAEJ,IAAI,CAAC,IAAI,CAAC,2DAA2D,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5E,MAAM;CACP,CAAC,CAAC,CAAC;AAEJ,oEAG0C;AAE1C,wCAA4E;AAE5E,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,KAAK,GAAG,EAAS,CAAC;QAExB,MAAM,IAAA,+BAAqB,EAAC,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAEhG,MAAM,CAAC,qCAAgB,CAAC,CAAC,oBAAoB,CAC3C,MAAM,CAAC,gBAAgB,CAAC;YACtB,MAAM;SACP,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,KAAK,GAAG,EAAS,CAAC;QAExB,MAAM,IAAA,+BAAqB,EAAC;YAC1B,KAAK;YACL,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,gBAAgB;YAC7B,GAAG,EAAE,eAAe,EAAE,SAAS,EAAE;SAClC,CAAC,CAAC;QAEH,MAAM,CAAC,qCAAgB,CAAC,CAAC,oBAAoB,CAC3C,MAAM,CAAC,gBAAgB,CAAC;YACtB,MAAM,EAAE;gBACN,GAAG,MAAM;gBACT,aAAa,EAAE,IAAA,sBAAS,EAAC,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC;aAChE;SACF,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,IAAI,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACxC,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAS,CAAC;QAE/D,MAAM,UAAU,GAAG,IAAA,iCAAuB,EAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC;QAE7E,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC/C,MAAM,CAAC,uCAAkC,CAAC,CAAC,oBAAoB,CAAC;YAC9D,QAAQ,EAAE,KAAK;YACf,MAAM;YACN,QAAQ,EAAE,WAAW;YACrB,WAAW,EAAE,gBAAgB;SAC9B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport mapValues from 'lodash/mapValues.js';\n\nconst preset = {\n  propertiesMap: {\n    borderRadiusButton: '--border-radius-button-aaaaaa',\n    colorBorderButtonNormalDefault: '--color-border-button-normal-default-bbbbbb',\n  },\n};\n\njest.mock('@cloudscape-design/theming-build', () => ({\n  buildThemedComponents: jest.fn().mockResolvedValue(undefined),\n  generateThemeStylesheet: jest.fn().mockReturnValue('.mock-stylesheet {}'),\n}));\n\njest.mock('../internal/template/internal/generated/theming/index.cjs', () => ({\n  preset,\n}));\n\nimport {\n  buildThemedComponents as themingCoreBuild,\n  generateThemeStylesheet as themingCoreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-build';\n\nimport { buildThemedComponents, generateThemeStylesheet } from '../theming';\n\ndescribe('buildThemedComponents', () => {\n  test('does not pass website token versions by default', async () => {\n    const theme = {} as any;\n\n    await buildThemedComponents({ theme, outputDir: '/tmp/output', baseThemeId: 'visual-refresh' });\n\n    expect(themingCoreBuild).toHaveBeenCalledWith(\n      expect.objectContaining({\n        preset,\n      })\n    );\n  });\n\n  test('passes stable website token versions when the feature flag is enabled', async () => {\n    const theme = {} as any;\n\n    await buildThemedComponents({\n      theme,\n      outputDir: '/tmp/output',\n      baseThemeId: 'visual-refresh',\n      ...{ __tokenHashSeed: 'website' },\n    });\n\n    expect(themingCoreBuild).toHaveBeenCalledWith(\n      expect.objectContaining({\n        preset: {\n          ...preset,\n          tokenVersions: mapValues(preset.propertiesMap, () => 'website'),\n        },\n      })\n    );\n  });\n});\n\ndescribe('generateThemeStylesheet', () => {\n  test('passes the arguments through', () => {\n    const theme = { tokens: { borderRadiusButton: '8px' } } as any;\n\n    const stylesheet = generateThemeStylesheet({ theme, selector: '.my-theme' });\n\n    expect(stylesheet).toBe('.mock-stylesheet {}');\n    expect(themingCoreGenerateThemeStylesheet).toHaveBeenCalledWith({\n      override: theme,\n      preset,\n      selector: '.my-theme',\n      baseThemeId: 'visual-refresh',\n    });\n  });\n});\n"]}

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "4b4d1f4b53ecdacdf40c9f49a6ba477d6f6a39aa"
+  "commit": "9963282c4a843a90e222d726418b616165cf9898"
 }

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -60,10 +60,7 @@
       padding-inline: awsui.$space-button-horizontal;
       border-block: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
       border-inline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      border-start-start-radius: awsui.$border-radius-item;
-      border-start-end-radius: awsui.$border-radius-item;
-      border-end-start-radius: awsui.$border-radius-item;
-      border-end-end-radius: awsui.$border-radius-item;
+      @include styles.logical-radius(awsui.$border-radius-dropdown);
       z-index: 2;
 
       &.no-content-styling {

package/lib/internal/scss/button-dropdown/item-element/styles.scss

@@ -40,10 +40,7 @@
 
     background-color: awsui.$color-background-dropdown-item-hover;
     border-color: awsui.$color-border-dropdown-item-hover;
-    border-start-start-radius: awsui.$border-radius-item;
-    border-start-end-radius: awsui.$border-radius-item;
-    border-end-start-radius: awsui.$border-radius-item;
-    border-end-end-radius: awsui.$border-radius-item;
+    @include styles.logical-radius(awsui.$border-radius-dropdown);
 
     &.disabled {
       color: awsui.$color-text-dropdown-item-dimmed;

package/lib/internal/scss/dropdown/styles.scss

@@ -7,6 +7,12 @@
 @use '../internal/styles/tokens' as awsui;
 @use './motion';
 @use '../internal/generated/custom-css-properties/index' as custom-props;
+@use '../internal/styles/style-api' as style-api;
+
+$props: (background-color, border-color, border-width, border-radius);
+$tokens: style-api.resolve($props, carrier);
+@include style-api.register($tokens);
+@include style-api.docs('dropdown', $tokens);
 
 .root {
   @include styles.styles-reset;
@@ -41,14 +47,27 @@
     // Apply styles-reset to ensure font-family and other styles are properly set
     // when expandToViewport is true (dropdown rendered via portal to document.body)
     @include styles.styles-reset;
+    @include style-api.carriers($tokens);
     white-space: inherit;
     position: relative;
-    background-color: awsui.$color-background-dropdown-item-default;
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-dropdown-item-default);
     outline: none;
     @include styles.dropdown-shadow(
-      $border-color: var(#{custom-props.$dropdownContentBorderColor}, #{awsui.$color-border-dropdown-container}),
-      $border-width: var(#{custom-props.$dropdownContentBorderWidth}, #{awsui.$border-width-popover}),
-      $border-radius: var(#{custom-props.$dropdownContentBorderRadius}, #{awsui.$border-radius-dropdown})
+      $border-color: style-api.value(
+          $tokens,
+          border-color,
+          var(#{custom-props.$dropdownContentBorderColor}, #{awsui.$color-border-dropdown-container})
+        ),
+      $border-width: style-api.value(
+          $tokens,
+          border-width,
+          var(#{custom-props.$dropdownContentBorderWidth}, #{awsui.$border-width-popover})
+        ),
+      $border-radius: style-api.value(
+          $tokens,
+          border-radius,
+          var(#{custom-props.$dropdownContentBorderRadius}, #{awsui.$border-radius-dropdown})
+        )
     );
 
     // Don't show dropdown border when there's no dropdown content

package/lib/internal/scss/internal/components/selectable-item/styles.scss

@@ -15,13 +15,6 @@ $border-offset-double: calc(2 * #{$border-offset});
 $divider-w: awsui.$border-divider-list-width;
 $neg-divider-w: calc(-1 * #{$divider-w});
 
-@mixin logical-radius($radius) {
-  border-start-start-radius: $radius;
-  border-start-end-radius: $radius;
-  border-end-start-radius: $radius;
-  border-end-end-radius: $radius;
-}
-
 @function add-offset($value, $offset: $border-offset) {
   @return calc(#{$value} + #{$offset});
 }
@@ -133,13 +126,14 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   &.highlighted,
   &.selected {
     color: var(#{custom-props.$optionColorHighlighted}, #{awsui.$color-text-dropdown-item-highlighted});
-    @include logical-radius(awsui.$border-radius-item);
+    @include styles.logical-radius(awsui.$border-radius-item);
   }
 
   &.highlighted {
     z-index: 3;
     background-color: var(#{custom-props.$optionBackgroundHighlighted}, #{awsui.$color-background-dropdown-item-hover});
     @include highlighted-shadow;
+    @include styles.logical-radius(awsui.$border-radius-dropdown);
     &.disabled {
       box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-dimmed-hover;
       background-color: awsui.$color-background-dropdown-item-dimmed;

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "4b4d1f4b";
+    $awsui-commit-hash: "9963282c";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-66120l;
 $minContentWidth: --awsui-min-content-width-66120l;

package/lib/internal/scss/internal/styles/links.scss

@@ -9,9 +9,18 @@
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../link/constants.scss' as constants;
 @use '../generated/custom-css-properties/index.scss' as custom-props;
+@use './style-api' as style-api;
 
-@mixin link-variant-style($variant) {
-  color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'text-color-default'));
+@function _link-color($tokens, $value) {
+  @if not $tokens {
+    @return $value;
+  }
+  @return style-api.value($tokens, color, $value);
+}
+
+// $tokens: optional Style API v2 token map from style-api.resolve.
+@mixin link-variant-style($variant, $tokens: null) {
+  color: _link-color($tokens, var(#{custom-props.$styleColorDefault}, map.get($variant, 'text-color-default')));
   font-weight: map.get($variant, 'font-weight');
   letter-spacing: map.get($variant, 'letter-spacing');
   text-decoration-line: map.get($variant, 'decoration-line');
@@ -24,7 +33,7 @@
 
   &:hover {
     cursor: pointer;
-    color: var(#{custom-props.$styleColorHover}, map.get($variant, 'text-color-hover'));
+    color: _link-color($tokens, var(#{custom-props.$styleColorHover}, map.get($variant, 'text-color-hover')));
   }
 
   &:focus {
@@ -32,7 +41,7 @@
   }
 
   &:active {
-    color: var(#{custom-props.$styleColorActive}, map.get($variant, 'text-color-active'));
+    color: _link-color($tokens, var(#{custom-props.$styleColorActive}, map.get($variant, 'text-color-active')));
   }
 
   &:active,
@@ -49,9 +58,9 @@
   text-decoration-style: awsui.$font-decoration-style-link;
 }
 
-@mixin link-default($font-size: 'inherit') {
+@mixin link-default($font-size: 'inherit', $tokens: null) {
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
-  @include link-variant-style(map.get(constants.$link-variants, 'secondary'));
+  @include link-variant-style(map.get(constants.$link-variants, 'secondary'), $tokens);
 }
 
 /* Style used for links in slots/components that are text heavy, to help links stand out among

package/lib/internal/scss/internal/styles/utils/mixins.scss

@@ -42,6 +42,13 @@
   text-overflow: ellipsis;
 }
 
+@mixin logical-radius($radius) {
+  border-start-start-radius: $radius;
+  border-start-end-radius: $radius;
+  border-end-start-radius: $radius;
+  border-end-end-radius: $radius;
+}
+
 @mixin base-pseudo-element {
   content: '';
   position: absolute;

package/lib/internal/scss/link/styles.scss

@@ -11,17 +11,30 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/styles/utils/theming' as theming;
+@use '../internal/styles/style-api' as style-api;
+
+$tokens: style-api.resolve((color, focus-ring-color, focus-ring-width, focus-ring-radius), public);
+@include style-api.register($tokens);
+@include style-api.docs('root', $tokens);
+
+@mixin focus-ring-box-shadow($color) {
+  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+    style-api.value(
+      $tokens,
+      focus-ring-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, awsui.$border-link-focus-ring-shadow-spread)
+    )
+    style-api.value($tokens, focus-ring-color, var(#{custom-props.$styleFocusRingBorderColor}, $color));
+}
 
 .link {
   @include styles.styles-reset;
   display: inline;
   white-space: inherit;
 
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, awsui.$border-link-focus-ring-shadow-spread)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+  @include focus-ring-box-shadow(awsui.$color-border-item-focused);
 
-  @include styles.link-default;
+  @include styles.link-default($tokens: $tokens);
 
   @each $variant in map.keys(constants.$link-variants) {
     &.variant-#{$variant} {
@@ -32,16 +45,16 @@
         -webkit-font-smoothing: inherit;
         -moz-osx-font-smoothing: inherit;
       }
-      @include styles.link-variant-style(map.get(constants.$link-variants, $variant));
+      @include styles.link-variant-style(map.get(constants.$link-variants, $variant), $tokens);
     }
   }
 
   &.button {
     @include styles.font-smoothing;
-    @include styles.link-variant-style(map.get(constants.$link-styles, 'button'));
+    @include styles.link-variant-style(map.get(constants.$link-styles, 'button'), $tokens);
 
     @include theming.one-theme-only {
-      @include styles.link-variant-style(map.get(constants.$link-variants, 'primary'));
+      @include styles.link-variant-style(map.get(constants.$link-variants, 'primary'), $tokens);
       & {
         font-weight: inherit;
         letter-spacing: normal;
@@ -49,35 +62,41 @@
         -moz-osx-font-smoothing: auto;
       }
       &.color-inverted {
-        color: awsui.$color-text-link-inverted-default;
+        color: style-api.value($tokens, color, awsui.$color-text-link-inverted-default);
         text-decoration-color: currentColor;
         &:hover {
-          color: awsui.$color-text-link-inverted-hover;
+          color: style-api.value($tokens, color, awsui.$color-text-link-inverted-hover);
         }
       }
     }
   }
 
   &.color-inverted {
-    color: awsui.$color-text-link-inverted-default;
+    color: style-api.value($tokens, color, awsui.$color-text-link-inverted-default);
     @include theming.one-theme-only {
-      #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-        var(#{custom-props.$styleFocusRingBorderWidth}, awsui.$border-link-focus-ring-shadow-spread)
-        var(#{custom-props.$styleFocusRingBorderColor}, currentColor);
+      @include focus-ring-box-shadow(currentColor);
     }
     &:not(.button) {
       text-decoration-line: underline;
       text-decoration-color: currentColor;
     }
     &:hover {
-      color: awsui.$color-text-link-inverted-hover;
+      color: style-api.value($tokens, color, awsui.$color-text-link-inverted-hover);
     }
   }
 
   @include focus-visible.when-visible {
     @include styles.link-focus(
-      $border-color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused),
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $border-color: style-api.value(
+          $tokens,
+          focus-ring-color,
+          var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+        ),
+      $border-radius: style-api.value(
+          $tokens,
+          focus-ring-radius,
+          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+        ),
       $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
     );
   }

package/lib/internal/scss/status-indicator/styles.scss

@@ -64,13 +64,14 @@ $_background-overrides: (
       color: #{map.get($_color-overrides, $color)};
     }
   }
+
   @each $status in map.keys($_status-backgrounds) {
-    &.status-#{$status} > .container {
+    &.status-#{$status}:not(.embedded) > .container {
       background: #{map.get($_status-backgrounds, $status)};
     }
   }
   @each $color in map.keys($_background-overrides) {
-    &.color-override-#{$color} > .container {
+    &.color-override-#{$color}:not(.embedded) > .container {
       background: #{map.get($_background-overrides, $color)};
     }
   }

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

@@ -41,6 +41,9 @@ export interface BoxProps extends BaseComponentProps {
      *   `full` together with `aspectRatio: 'equal'` to render a circle.
      *
      * Composes with existing Box props such as `padding` and `margin`.
+     *
+     * This is a One Theme only feature and must not be used in VR.
+     * @awsuiSystem one-theme
      */
     visualAccent?: BoxProps.VisualAccent;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../types/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../types/native-attributes';\n\nexport interface BoxProps extends BaseComponentProps {\n  /**\n   * Defines the style of element to display.\n   *\n   * - If you set it to `'div'`, `'span'`, `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'p'`, `'strong'`, `'small'`, `'code'`, `'pre'`, or `'samp'`, the variant is also used as the HTML tag name.\n   * - If you set it to `awsui-key-label`, the component will render a `div`,\n   *   styled for use as a key label in key-value pairs.\n   * - If you set it to `awsui-gen-ai-label`, the component will render a `div`,\n   *   styled for use as a label indicating that content is produced by generative AI.\n   * - If you set it to `awsui-value-large`, the component will render a `span`,\n   *   styled using \"Display large light\" typography.\n   * - If you set it to `awsui-inline-code`, the component will render a `code` element,\n   *   styled with a background and padding for inline code snippets.\n   *\n   * Override the HTML tag by using property `tagOverride`.\n   */\n  variant?: BoxProps.Variant;\n  /**\n   * Renders the box as a visual accent wrapper to emphasize its content.\n   *\n   * Setting this property activates the accent styling: a coordinated background and content\n   * color combination that works in both light and dark modes. A `variant` is not required to\n   * activate the accent. The accent styling is applied on top of the element determined by\n   * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected.\n   *\n   * The object accepts the following fields:\n   * - `color` (required) — the coordinated background and foreground color pair. The foreground\n   *   color is applied as the wrapper's CSS `color`, so it only affects content that inherits\n   *   the current color (for example an `Icon`, or a nested `Box` with `color=\"inherit\"`).\n   *   Content that sets its own color is not overridden.\n   * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;\n   *   `equal` forces equal width and height, suitable for wrapping icons.\n   * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword\n   *   from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or\n   *   `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to\n   *   `full` together with `aspectRatio: 'equal'` to render a circle.\n   *\n   * Composes with existing Box props such as `padding` and `margin`.\n   */\n  visualAccent?: BoxProps.VisualAccent;\n  /**\n   * Overrides the default HTML tag provided by the variant.\n   */\n  tagOverride?: string;\n  /**\n   * Overrides the display of the element. You can set it to the following values:\n   *\n   * - `block` - Specifies block display.\n   * - `inline` - Specifies inline display.\n   * - `inline-block` - Specifies inline-block display.\n   * - `none` - Hides the box.\n   *\n   * Note: If you don't set it, the display depends on the variant.\n   */\n  display?: BoxProps.Display;\n  /**\n   * Adds margins to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same margin to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of the margin per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top margin\",\n   *   right: \"size of right margin\",\n   *   bottom: \"size of bottom margin\",\n   *   left: \"size of left margin\",\n   *   horizontal: \"size of left and right margin\",\n   *   vertical: \"size of top and bottom margin\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `margin=\"s\"` adds a small margin to all sides.\n   * `margin={{ right: \"l\", bottom: \"s\" }}` adds a small margin to the bottom and a large margin to the right.\n   */\n  margin?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Adds padding to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same padding to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of padding per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top padding\",\n   *   right: \"size of right padding\",\n   *   bottom: \"size of bottom padding\",\n   *   left: \"size of left padding\",\n   *   horizontal: \"size of left and right padding\",\n   *   vertical: \"size of top and bottom padding\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `padding=\"s\"` adds small padding to all sides.\n   * `padding={{ right: \"l\", bottom: \"s\" }}` adds small padding to the bottom and large padding to the right.\n   */\n  padding?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Defines the text alignment within the element. You can set it to `left`, `center`, or `right`.\n   */\n  textAlign?: BoxProps.TextAlign;\n  /**\n   * Defines the floating behavior. You can set it to `left` or `right`.\n   */\n  float?: BoxProps.Float;\n  /**\n   * Overrides the font size and line height. If not set, the font size and line height depend on the variant.\n   */\n  fontSize?: BoxProps.FontSize;\n  /**\n   * Overrides the font weight. If not set, the value depends on the variant.\n   * @visualrefresh 'heavy'\n   */\n  fontWeight?: BoxProps.FontWeight;\n  /**\n   * Overrides the text color. You can set it to the following values:\n   *\n   * - `inherit` - Inherits the color from the parent element. For example, use this to style content\n   *      in Flashbars and to style the `empty` and `noMatch` slots of the Table and Cards components.\n   * - `text-label` - Specifies the text color for non-form labels. For example, use it for the key in key/value pairs.\n   * - `text-body-secondary` - Specifies the color for secondary text.\n   * - `text-status-error` - Specifies the color for error text and icons.\n   * - `text-status-success` - Specifies the color for success text and icons.\n   * - `text-status-info` - Specifies the color for info text and icon.\n   * - `text-status-inactive` - Specifies the color for inactive and loading text and icons.\n   * - `text-status-warning` - Specifies the color for warning text and icons.\n   *\n   * Note: If you don't set it, the text color depends on the variant.\n   */\n  color?: BoxProps.Color;\n  /**\n   * Content of the box.\n   * @displayname content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Attributes to add to the native element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace BoxProps {\n  export type Variant =\n    | 'div'\n    | 'span'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'p'\n    | 'strong'\n    | 'small'\n    | 'code'\n    | 'pre'\n    | 'samp'\n    | 'awsui-key-label'\n    | 'awsui-gen-ai-label'\n    | 'awsui-value-large'\n    | 'awsui-inline-code';\n\n  export interface VisualAccent {\n    /**\n     * The coordinated background and foreground color pair applied to the accent wrapper.\n     * Each color works in both light and dark modes.\n     *\n     * The background color is applied directly to the wrapper. The foreground color is applied\n     * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the\n     * current color, such as an `Icon` or a nested `Box` with `color=\"inherit\"`. Content that\n     * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that\n     * color and is not recolored by the accent.\n     */\n    color: BoxProps.VisualAccent.Color;\n    /**\n     * Controls the aspect ratio of the accent wrapper.\n     *\n     * - `auto` (default) — the wrapper's width follows its content.\n     * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.\n     *\n     * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle.\n     */\n    aspectRatio?: BoxProps.VisualAccent.AspectRatio;\n    /**\n     * The corner rounding applied to the accent wrapper. When not set, the wrapper has no\n     * border radius.\n     *\n     * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by\n     * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use\n     * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle.\n     */\n    borderRadius?: BoxProps.VisualAccent.BorderRadius;\n  }\n\n  export namespace VisualAccent {\n    export type Color =\n      | 'red'\n      | 'yellow'\n      | 'indigo'\n      | 'green'\n      | 'orange'\n      | 'purple'\n      | 'lime'\n      | 'grey'\n      | 'teal'\n      | 'blue'\n      | 'violet'\n      | 'magenta'\n      | 'pink'\n      | 'amber';\n    export type AspectRatio = 'auto' | 'equal';\n    export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';\n  }\n\n  export type Display = 'block' | 'inline' | 'inline-block' | 'none';\n  export type TextAlign = 'left' | 'center' | 'right';\n  export type Float = 'left' | 'right';\n  export type FontSize =\n    | 'body-s'\n    | 'body-m'\n    | 'heading-xs'\n    | 'heading-s'\n    | 'heading-m'\n    | 'heading-l'\n    | 'heading-xl'\n    | 'display-l'\n    | 'display-xl';\n  export type FontWeight = 'light' | 'normal' | 'bold' | 'heavy';\n  export type Color =\n    | 'inherit'\n    | 'text-label'\n    | 'text-body-secondary'\n    | 'text-status-error'\n    | 'text-status-success'\n    | 'text-status-info'\n    | 'text-status-inactive'\n    | 'text-status-warning';\n  export type SpacingSize = 'n' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\n  export interface Spacing {\n    top?: BoxProps.SpacingSize;\n    right?: BoxProps.SpacingSize;\n    bottom?: BoxProps.SpacingSize;\n    left?: BoxProps.SpacingSize;\n    horizontal?: BoxProps.SpacingSize;\n    vertical?: BoxProps.SpacingSize;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../types/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../types/native-attributes';\n\nexport interface BoxProps extends BaseComponentProps {\n  /**\n   * Defines the style of element to display.\n   *\n   * - If you set it to `'div'`, `'span'`, `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'p'`, `'strong'`, `'small'`, `'code'`, `'pre'`, or `'samp'`, the variant is also used as the HTML tag name.\n   * - If you set it to `awsui-key-label`, the component will render a `div`,\n   *   styled for use as a key label in key-value pairs.\n   * - If you set it to `awsui-gen-ai-label`, the component will render a `div`,\n   *   styled for use as a label indicating that content is produced by generative AI.\n   * - If you set it to `awsui-value-large`, the component will render a `span`,\n   *   styled using \"Display large light\" typography.\n   * - If you set it to `awsui-inline-code`, the component will render a `code` element,\n   *   styled with a background and padding for inline code snippets.\n   *\n   * Override the HTML tag by using property `tagOverride`.\n   */\n  variant?: BoxProps.Variant;\n  /**\n   * Renders the box as a visual accent wrapper to emphasize its content.\n   *\n   * Setting this property activates the accent styling: a coordinated background and content\n   * color combination that works in both light and dark modes. A `variant` is not required to\n   * activate the accent. The accent styling is applied on top of the element determined by\n   * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected.\n   *\n   * The object accepts the following fields:\n   * - `color` (required) — the coordinated background and foreground color pair. The foreground\n   *   color is applied as the wrapper's CSS `color`, so it only affects content that inherits\n   *   the current color (for example an `Icon`, or a nested `Box` with `color=\"inherit\"`).\n   *   Content that sets its own color is not overridden.\n   * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;\n   *   `equal` forces equal width and height, suitable for wrapping icons.\n   * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword\n   *   from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or\n   *   `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to\n   *   `full` together with `aspectRatio: 'equal'` to render a circle.\n   *\n   * Composes with existing Box props such as `padding` and `margin`.\n   *\n   * This is a One Theme only feature and must not be used in VR.\n   * @awsuiSystem one-theme\n   */\n  visualAccent?: BoxProps.VisualAccent;\n  /**\n   * Overrides the default HTML tag provided by the variant.\n   */\n  tagOverride?: string;\n  /**\n   * Overrides the display of the element. You can set it to the following values:\n   *\n   * - `block` - Specifies block display.\n   * - `inline` - Specifies inline display.\n   * - `inline-block` - Specifies inline-block display.\n   * - `none` - Hides the box.\n   *\n   * Note: If you don't set it, the display depends on the variant.\n   */\n  display?: BoxProps.Display;\n  /**\n   * Adds margins to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same margin to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of the margin per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top margin\",\n   *   right: \"size of right margin\",\n   *   bottom: \"size of bottom margin\",\n   *   left: \"size of left margin\",\n   *   horizontal: \"size of left and right margin\",\n   *   vertical: \"size of top and bottom margin\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `margin=\"s\"` adds a small margin to all sides.\n   * `margin={{ right: \"l\", bottom: \"s\" }}` adds a small margin to the bottom and a large margin to the right.\n   */\n  margin?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Adds padding to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same padding to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of padding per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top padding\",\n   *   right: \"size of right padding\",\n   *   bottom: \"size of bottom padding\",\n   *   left: \"size of left padding\",\n   *   horizontal: \"size of left and right padding\",\n   *   vertical: \"size of top and bottom padding\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `padding=\"s\"` adds small padding to all sides.\n   * `padding={{ right: \"l\", bottom: \"s\" }}` adds small padding to the bottom and large padding to the right.\n   */\n  padding?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Defines the text alignment within the element. You can set it to `left`, `center`, or `right`.\n   */\n  textAlign?: BoxProps.TextAlign;\n  /**\n   * Defines the floating behavior. You can set it to `left` or `right`.\n   */\n  float?: BoxProps.Float;\n  /**\n   * Overrides the font size and line height. If not set, the font size and line height depend on the variant.\n   */\n  fontSize?: BoxProps.FontSize;\n  /**\n   * Overrides the font weight. If not set, the value depends on the variant.\n   * @visualrefresh 'heavy'\n   */\n  fontWeight?: BoxProps.FontWeight;\n  /**\n   * Overrides the text color. You can set it to the following values:\n   *\n   * - `inherit` - Inherits the color from the parent element. For example, use this to style content\n   *      in Flashbars and to style the `empty` and `noMatch` slots of the Table and Cards components.\n   * - `text-label` - Specifies the text color for non-form labels. For example, use it for the key in key/value pairs.\n   * - `text-body-secondary` - Specifies the color for secondary text.\n   * - `text-status-error` - Specifies the color for error text and icons.\n   * - `text-status-success` - Specifies the color for success text and icons.\n   * - `text-status-info` - Specifies the color for info text and icon.\n   * - `text-status-inactive` - Specifies the color for inactive and loading text and icons.\n   * - `text-status-warning` - Specifies the color for warning text and icons.\n   *\n   * Note: If you don't set it, the text color depends on the variant.\n   */\n  color?: BoxProps.Color;\n  /**\n   * Content of the box.\n   * @displayname content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Attributes to add to the native element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace BoxProps {\n  export type Variant =\n    | 'div'\n    | 'span'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'p'\n    | 'strong'\n    | 'small'\n    | 'code'\n    | 'pre'\n    | 'samp'\n    | 'awsui-key-label'\n    | 'awsui-gen-ai-label'\n    | 'awsui-value-large'\n    | 'awsui-inline-code';\n\n  export interface VisualAccent {\n    /**\n     * The coordinated background and foreground color pair applied to the accent wrapper.\n     * Each color works in both light and dark modes.\n     *\n     * The background color is applied directly to the wrapper. The foreground color is applied\n     * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the\n     * current color, such as an `Icon` or a nested `Box` with `color=\"inherit\"`. Content that\n     * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that\n     * color and is not recolored by the accent.\n     */\n    color: BoxProps.VisualAccent.Color;\n    /**\n     * Controls the aspect ratio of the accent wrapper.\n     *\n     * - `auto` (default) — the wrapper's width follows its content.\n     * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.\n     *\n     * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle.\n     */\n    aspectRatio?: BoxProps.VisualAccent.AspectRatio;\n    /**\n     * The corner rounding applied to the accent wrapper. When not set, the wrapper has no\n     * border radius.\n     *\n     * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by\n     * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use\n     * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle.\n     */\n    borderRadius?: BoxProps.VisualAccent.BorderRadius;\n  }\n\n  export namespace VisualAccent {\n    export type Color =\n      | 'red'\n      | 'yellow'\n      | 'indigo'\n      | 'green'\n      | 'orange'\n      | 'purple'\n      | 'lime'\n      | 'grey'\n      | 'teal'\n      | 'blue'\n      | 'violet'\n      | 'magenta'\n      | 'pink'\n      | 'amber';\n    export type AspectRatio = 'auto' | 'equal';\n    export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';\n  }\n\n  export type Display = 'block' | 'inline' | 'inline-block' | 'none';\n  export type TextAlign = 'left' | 'center' | 'right';\n  export type Float = 'left' | 'right';\n  export type FontSize =\n    | 'body-s'\n    | 'body-m'\n    | 'heading-xs'\n    | 'heading-s'\n    | 'heading-m'\n    | 'heading-l'\n    | 'heading-xl'\n    | 'display-l'\n    | 'display-xl';\n  export type FontWeight = 'light' | 'normal' | 'bold' | 'heavy';\n  export type Color =\n    | 'inherit'\n    | 'text-label'\n    | 'text-body-secondary'\n    | 'text-status-error'\n    | 'text-status-success'\n    | 'text-status-info'\n    | 'text-status-inactive'\n    | 'text-status-warning';\n  export type SpacingSize = 'n' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\n  export interface Spacing {\n    top?: BoxProps.SpacingSize;\n    right?: BoxProps.SpacingSize;\n    bottom?: BoxProps.SpacingSize;\n    left?: BoxProps.SpacingSize;\n    horizontal?: BoxProps.SpacingSize;\n    vertical?: BoxProps.SpacingSize;\n  }\n}\n"]}

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

@@ -14,7 +14,6 @@ export interface BaseButtonProps {
     /**
      * Provides a reason why the button is disabled (only when `disabled` is `true`).
      * If provided, the button becomes focusable.
-     * Applicable for all button variants, except link.
      */
     disabledReason?: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/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 { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../types/events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../types/native-attributes';\n\nexport interface BaseButtonProps {\n  /**\n   * Renders the button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button is disabled (only when `disabled` is `true`).\n   * If provided, the button becomes focusable.\n   * Applicable for all button variants, except link.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents users from clicking the button, but it can still be focused.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button is in a loading state.\n   */\n  loadingText?: string;\n  /**\n   * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n   */\n  iconName?: IconProps.Name;\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   */\n  iconUrl?: string;\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  iconSvg?: React.ReactNode;\n\n  /**\n   * Adds `aria-label` to the button element. Use this to provide an accessible name for buttons\n   * that don't have visible text, and to distinguish between multiple buttons with identical visible text.\n   * The text will also be added to the `title` attribute of the button.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-describedby` to the button.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n   */\n  wrapText?: boolean;\n\n  /**\n   * Text displayed in the button element.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Adds `aria-controls` to the button. Use when the button controls the contents or presence of an element.\n   */\n  ariaControls?: string;\n\n  /**\n   * Adds an external icon after the button label text.\n   * If an href is provided, it opens the link in a new tab.\n   */\n  external?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component. The object should contain:\n   *\n   * * `externalIconAriaLabel` - (optional) Specifies the aria-label for the external icon when `external` is set to `true`.\n   * @i18n\n   */\n  i18nStrings?: ButtonProps.I18nStrings;\n\n  /**\n   * Attributes to add to the native `button` element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Attributes to add to the native `a` element (when `href` is provided).\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeAnchorAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;\n}\n\nexport interface ButtonProps extends BaseComponentProps, BaseButtonProps {\n  /**\n   * Specifies the alignment of the icon.\n   */\n  iconAlign?: ButtonProps.IconAlign;\n\n  /**\n   * The form action that is performed by a button click.\n   */\n  formAction?: ButtonProps.FormAction;\n\n  /**\n   * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n   * For example, if you have a 'help' button that links to a documentation page.\n   */\n  href?: string;\n\n  /**\n   * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n   * This property only applies when an `href` is provided.\n   */\n  target?: string;\n\n  /**\n   * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n   * If the `rel` property is provided, it overrides the default behavior.\n   */\n  rel?: string;\n\n  /**\n   * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n   * You can specify a string value that will be suggested as the name of the downloaded file.\n   * This property only applies when an `href` is provided.\n   **/\n  download?: boolean | string;\n\n  /** The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.\n   *  Use when a button is not the descendant of a form element, such as when used in a modal.\n   */\n  form?: string;\n\n  /**\n   * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n   */\n  ariaExpanded?: boolean;\n\n  /**\n   * Adds `aria-haspopup` to the button element. Use when the button triggers a popup element such as a menu, listbox, tree, grid, or dialog.\n   */\n  ariaHaspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\n  /**\n   * Called when the user clicks on the button and the button is not disabled or in loading state.\n   */\n  onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n  /**\n   * Called when the user clicks on the button with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n   */\n  onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n\n  /**\n   * Sets the button width to be 100% of the parent container width. Button content is centered.\n   */\n  fullWidth?: boolean;\n\n  /** Determines the general styling of the button as follows:\n   * * `primary` for primary buttons.\n   * * `normal` for secondary buttons.\n   * * `link` for tertiary buttons.\n   * * `icon` to display an icon only (no text).\n   * * `inline-icon` to display an icon-only (no text) button within a text context.\n   * * `inline-link` to display a tertiary button with no outer padding.\n   */\n  variant?: ButtonProps.Variant;\n\n  /**\n   * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n   */\n  iconAlt?: string;\n\n  /**\n   * An object containing CSS properties to customize the button's visual appearance.\n   * Refer to the [style](/components/button/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: ButtonProps.Style;\n}\n\nexport namespace ButtonProps {\n  export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';\n  export type ClickDetail = _ClickDetail;\n  export type FollowDetail = BaseNavigationDetail;\n\n  export type FormAction = 'submit' | 'none';\n\n  export type IconAlign = 'left' | 'right';\n\n  export interface I18nStrings {\n    /**\n     * Specifies the aria-label for the external icon when `external` is set to `true`.\n     */\n    externalIconAriaLabel?: string;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button.\n     */\n    focus(options?: FocusOptions): void;\n  }\n\n  export interface Style {\n    root?: {\n      background?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/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 { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../types/events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../types/native-attributes';\n\nexport interface BaseButtonProps {\n  /**\n   * Renders the button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button is disabled (only when `disabled` is `true`).\n   * If provided, the button becomes focusable.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents users from clicking the button, but it can still be focused.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button is in a loading state.\n   */\n  loadingText?: string;\n  /**\n   * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n   */\n  iconName?: IconProps.Name;\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   */\n  iconUrl?: string;\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  iconSvg?: React.ReactNode;\n\n  /**\n   * Adds `aria-label` to the button element. Use this to provide an accessible name for buttons\n   * that don't have visible text, and to distinguish between multiple buttons with identical visible text.\n   * The text will also be added to the `title` attribute of the button.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-describedby` to the button.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n   */\n  wrapText?: boolean;\n\n  /**\n   * Text displayed in the button element.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Adds `aria-controls` to the button. Use when the button controls the contents or presence of an element.\n   */\n  ariaControls?: string;\n\n  /**\n   * Adds an external icon after the button label text.\n   * If an href is provided, it opens the link in a new tab.\n   */\n  external?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component. The object should contain:\n   *\n   * * `externalIconAriaLabel` - (optional) Specifies the aria-label for the external icon when `external` is set to `true`.\n   * @i18n\n   */\n  i18nStrings?: ButtonProps.I18nStrings;\n\n  /**\n   * Attributes to add to the native `button` element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Attributes to add to the native `a` element (when `href` is provided).\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeAnchorAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;\n}\n\nexport interface ButtonProps extends BaseComponentProps, BaseButtonProps {\n  /**\n   * Specifies the alignment of the icon.\n   */\n  iconAlign?: ButtonProps.IconAlign;\n\n  /**\n   * The form action that is performed by a button click.\n   */\n  formAction?: ButtonProps.FormAction;\n\n  /**\n   * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n   * For example, if you have a 'help' button that links to a documentation page.\n   */\n  href?: string;\n\n  /**\n   * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n   * This property only applies when an `href` is provided.\n   */\n  target?: string;\n\n  /**\n   * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n   * If the `rel` property is provided, it overrides the default behavior.\n   */\n  rel?: string;\n\n  /**\n   * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n   * You can specify a string value that will be suggested as the name of the downloaded file.\n   * This property only applies when an `href` is provided.\n   **/\n  download?: boolean | string;\n\n  /** The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.\n   *  Use when a button is not the descendant of a form element, such as when used in a modal.\n   */\n  form?: string;\n\n  /**\n   * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n   */\n  ariaExpanded?: boolean;\n\n  /**\n   * Adds `aria-haspopup` to the button element. Use when the button triggers a popup element such as a menu, listbox, tree, grid, or dialog.\n   */\n  ariaHaspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\n  /**\n   * Called when the user clicks on the button and the button is not disabled or in loading state.\n   */\n  onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n  /**\n   * Called when the user clicks on the button with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n   */\n  onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n\n  /**\n   * Sets the button width to be 100% of the parent container width. Button content is centered.\n   */\n  fullWidth?: boolean;\n\n  /** Determines the general styling of the button as follows:\n   * * `primary` for primary buttons.\n   * * `normal` for secondary buttons.\n   * * `link` for tertiary buttons.\n   * * `icon` to display an icon only (no text).\n   * * `inline-icon` to display an icon-only (no text) button within a text context.\n   * * `inline-link` to display a tertiary button with no outer padding.\n   */\n  variant?: ButtonProps.Variant;\n\n  /**\n   * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n   */\n  iconAlt?: string;\n\n  /**\n   * An object containing CSS properties to customize the button's visual appearance.\n   * Refer to the [style](/components/button/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: ButtonProps.Style;\n}\n\nexport namespace ButtonProps {\n  export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';\n  export type ClickDetail = _ClickDetail;\n  export type FollowDetail = BaseNavigationDetail;\n\n  export type FormAction = 'submit' | 'none';\n\n  export type IconAlign = 'left' | 'right';\n\n  export interface I18nStrings {\n    /**\n     * Specifies the aria-label for the external icon when `external` is set to `true`.\n     */\n    externalIconAriaLabel?: string;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button.\n     */\n    focus(options?: FocusOptions): void;\n  }\n\n  export interface Style {\n    root?: {\n      background?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAa/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EACJ,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,GAAG,0BAA0B,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc;cAxBrB,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B;YACxB,OAAO;sBACG,MAAM;kBACV,MAAM;iBACP,SAAS,CAAC,IAAI;kBACb,OAAO;yCACgB,OAAO;cAClC,MAAM;6BACS,OAAO;qCACC,OAAO;gBAC5B,OAAO;sBACD,eAAe;sEA8TlC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAa/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EACJ,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,GAAG,0BAA0B,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc;cAxBrB,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B;YACxB,OAAO;sBACG,MAAM;kBACV,MAAM;iBACP,SAAS,CAAC,IAAI;kBACb,OAAO;yCACgB,OAAO;cAClC,MAAM;6BACS,OAAO;qCACC,OAAO;gBAC5B,OAAO;sBACD,eAAe;sEAqUlC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/button/internal.js

@@ -32,7 +32,14 @@ export const InternalButton = React.forwardRef(({ children, iconName, __iconClas
     const isAnchor = Boolean(href);
     const target = targetOverride !== null && targetOverride !== void 0 ? targetOverride : (external ? '_blank' : undefined);
     const isNotInteractive = loading || disabled;
-    const isDisabledWithReason = (variant === 'normal' || variant === 'primary' || variant === 'icon') && !!disabledReason && disabled;
+    const isDisabledWithReason = (variant === 'normal' ||
+        variant === 'primary' ||
+        variant === 'icon' ||
+        variant === 'inline-icon' ||
+        variant === 'inline-link' ||
+        variant === 'link') &&
+        !!disabledReason &&
+        disabled;
     const hasAriaDisabled = (loading && !disabled) || (disabled && __focusable) || isDisabledWithReason;
     const shouldHaveContent = children &&
         ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss', 'inline-icon-pointer-target'].indexOf(variant) === -1;