carbon-design-system · theetrain · Jan 15, 2024 · Jan 15, 2024 · Jan 16, 2024 · Jan 19, 2024
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
diff --git a/css/all.css b/css/all.css
diff --git a/css/all.scss b/css/all.scss
@@ -1,35 +1,32 @@
+$prefix: 'bx';
+
 // Use all Carbon themes
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
-  $prefix: 'bx'
+  $prefix: $prefix
 );
-@use "@carbon/styles/scss/theme" as *;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
+@use "@carbon/styles" as styles;
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($white);
+  @include styles.theme(styles.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include theme($g10);
+  @include styles.theme(styles.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include theme($g90);
+  @include styles.theme(styles.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include theme($g100);
+  @include styles.theme(styles.$g100);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
-.bx--text-truncate-end {
+.#{$prefix}--text-truncate-end {
   @include text-truncate-end;
 }
-.bx--text-truncate-front {
+.#{$prefix}--text-truncate-front {
   @include text-truncate-front;
 }
diff --git a/css/g10.css b/css/g10.css
diff --git a/css/g10.scss b/css/g10.scss
@@ -1,20 +1,14 @@
-// Use g10 theme
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
   $prefix: 'bx'
 );
-@use "@carbon/styles/scss/theme" as *;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
+@use "@carbon/styles" as styles;
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($g10);
+  @include styles.theme(styles.$g10);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
 .bx--text-truncate-end {
   @include text-truncate-end;
 }

diff --git a/css/g100.css b/css/g100.css
diff --git a/css/g100.scss b/css/g100.scss
@@ -1,20 +1,14 @@
-// Use g10 theme
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
   $prefix: 'bx'
 );
-@use "@carbon/styles/scss/theme" as *;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
+@use "@carbon/styles" as styles;
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($g100);
+  @include styles.theme(styles.$g100);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
 .bx--text-truncate-end {
   @include text-truncate-end;
 }

diff --git a/css/g90.css b/css/g90.css
diff --git a/css/g90.scss b/css/g90.scss
@@ -1,20 +1,14 @@
-// Use g10 theme
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
   $prefix: 'bx'
 );
-@use "@carbon/styles/scss/theme" as *;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
+@use "@carbon/styles" as styles;
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($g90);
+  @include styles.theme(styles.$g90);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
 .bx--text-truncate-end {
   @include text-truncate-end;
 }

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -486,7 +486,7 @@
           "reactive": false
         },
         {
-          "name": "isSelected",
+          "name": "selected",
           "kind": "let",
           "description": "Set to `true` to enable the selected state for an icon-only, ghost button",
           "type": "boolean",
@@ -546,21 +546,8 @@
         {
           "name": "as",
           "kind": "let",
-          "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "skeleton",
-          "kind": "let",
-          "description": "Set to `true` to display the skeleton state",
-          "type": "boolean",
-          "value": "false",
+          "description": "Specify an element name to render as the button.\nBe sure to provide",
+          "type": "keyof import('svelte/elements').SvelteHTMLElements",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -618,49 +605,50 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the HTML element",
-          "type": "null | HTMLAnchorElement | HTMLButtonElement",
+          "type": "null | HTMLElement",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
           "constant": false,
           "reactive": true
-        }
-      ],
-      "moduleExports": [],
-      "slots": [
+        },
         {
-          "name": "__default__",
-          "default": true,
-          "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
+          "name": "buttonAttributes",
+          "kind": "let",
+          "description": "Button, anchor, or div attributes",
+          "type": "import('svelte/elements').HTMLAnchorAttributes |\nimport('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes",
+          "value": "{}",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
+      "moduleExports": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
-        { "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
-        { "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" },
+        { "type": "forwarded", "name": "click", "element": "svelte:element" },
+        { "type": "forwarded", "name": "focus", "element": "svelte:element" },
+        { "type": "forwarded", "name": "blur", "element": "svelte:element" },
         {
           "type": "forwarded",
-          "name": "mouseover",
-          "element": "ButtonSkeleton"
+          "name": "pointerover",
+          "element": "svelte:element"
         },
         {
           "type": "forwarded",
-          "name": "mouseenter",
-          "element": "ButtonSkeleton"
+          "name": "pointerenter",
+          "element": "svelte:element"
         },
         {
           "type": "forwarded",
-          "name": "mouseleave",
-          "element": "ButtonSkeleton"
+          "name": "pointerleave",
+          "element": "svelte:element"
         }
       ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "button | a | div" },
-      "extends": {
-        "interface": "ButtonSkeletonProps",
-        "import": "\"./ButtonSkeleton.svelte\""
-      }
+      "typedefs": []
     },
     {
       "moduleName": "ButtonSet",

diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
@@ -36,7 +36,7 @@
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
-    You must provide an <strong>iconDescription</strong> for the button tooltip.
+    You must provide an <strong>iconDescription</strong> for screen readers.
   </div>
 </InlineNotification>
 
@@ -54,7 +54,7 @@
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
-    You must provide an <strong>iconDescription</strong> for the button tooltip.
+    You must provide an <strong>iconDescription</strong> for screen readers.
   </div>
 </InlineNotification>
 
@@ -84,41 +84,20 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 ## Custom element
 
-<Button as let:props>
-  <p {...props}>Custom element</p>
+<Button as="div">
+  Custom element
 </Button>
 
-## Field size
+## Sizes
 
-<Button size="md">Primary</Button>
-<Button size="md" kind="secondary">Secondary</Button>
-<Button size="md" kind="tertiary">Tertiary</Button>
-<Button size="md" kind="ghost">Ghost</Button>
-<Button size="md" kind="danger">Danger</Button>
+Button is available in small, medium, large, extra-large, and double-extra-large.
+Use `md` (default) when used with form fields.
 
-## Small size
-
-<Button size="sm">Primary</Button>
-<Button size="sm" kind="secondary">Secondary</Button>
-<Button size="sm" kind="tertiary">Tertiary</Button>
-<Button size="sm" kind="ghost">Ghost</Button>
-<Button size="sm" kind="danger">Danger</Button>
-
-## Large size
-
-<Button size="xl">Primary</Button>
-<Button size="xl" kind="secondary">Secondary</Button>
-<Button size="xl" kind="tertiary">Tertiary</Button>
-<Button size="xl" kind="ghost">Ghost</Button>
-<Button size="xl" kind="danger">Danger</Button>
-
-## Extra-large size
-
-<Button size="2xl">Primary</Button>
-<Button size="2xl" kind="secondary">Secondary</Button>
-<Button size="2xl" kind="tertiary">Tertiary</Button>
-<Button size="2xl" kind="ghost">Ghost</Button>
-<Button size="2xl" kind="danger">Danger</Button>
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+<Button size="xl">Extra Large</Button>
+<Button size="2xl">Double extra Large</Button>
 
 ## Disabled state
 
@@ -129,12 +108,6 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 
-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    Expressive styles only work with the default, "lg", and "xl" button sizes.
-  </div>
-</InlineNotification>
-
 <Button expressive size="xl">Primary</Button>
 <Button expressive size="xl" kind="secondary">Secondary</Button>
 <Button expressive size="xl" kind="tertiary">Tertiary</Button>
@@ -153,13 +126,19 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
 <Button expressive kind="ghost">Ghost</Button>
 <Button expressive kind="danger">Danger</Button>
 
+## Additional attributes
+
+Use `buttonAttributes` to pass any additional attributes.
+
+<Button buttonAttributes={{class: 'ready'}}>Ready</Button>
+
 ## Skeleton
 
-<Button size="xl" skeleton />
+<!-- <Button size="xl" skeleton />
 <Button size="lg" skeleton />
 <Button skeleton />
 <Button skeleton size="field" />
-<Button skeleton size="small" />
+<Button skeleton size="small" /> -->
 
 ## Programmatic focus