@aurodesignsystem-dev/auro-button 0.0.0-pr377.2 → 0.0.0-pr377.3

package/custom-elements.json

@@ -10,6 +10,34 @@
           "kind": "class",
           "description": "The `auro-button` element provides a styled, accessible button with support for various states and form association.\nIt is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.",
           "name": "AuroButton",
+          "cssParts": [
+            {
+              "description": "Apply CSS to HTML5 button.",
+              "name": "button"
+            },
+            {
+              "description": "Apply CSS to auro-loader.",
+              "name": "loader"
+            },
+            {
+              "description": "Apply CSS to text slot.",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for the text of the button.",
+              "name": ""
+            },
+            {
+              "description": "Use this slot to pass an aria-label to the HTML5 button.",
+              "name": "ariaLabel"
+            },
+            {
+              "description": "Use this slot to pass an aria-label to the HTML5 button when in loading state.",
+              "name": "ariaLabel.loading"
+            }
+          ],
           "members": [
             {
               "kind": "field",

package/demo/api.html

@@ -49,9 +49,9 @@
       import { initExamples } from './api.min.js';
       initExamples();
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js"></script>

package/demo/api.md

@@ -32,6 +32,22 @@ It is designed to be flexible, supporting loading states, icon slots, and integr
 | Name     | Parameters                                                           | Return | Description                                       |
 | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
 | register | `name` (string) - The name of the element that you want to register. |        | This will register this element with the browser. |
+
+### Slots
+
+| Name              | Description                                                                    |
+| ----------------- | ------------------------------------------------------------------------------ |
+| (default)         | Default slot for the text of the button.                                       |
+| ariaLabel         | Use this slot to pass an aria-label to the HTML5 button.                       |
+| ariaLabel.loading | Use this slot to pass an aria-label to the HTML5 button when in loading state. |
+
+### CSS Shadow Parts
+
+| Name   | Description                |
+| ------ | -------------------------- |
+| button | Apply CSS to HTML5 button. |
+| loader | Apply CSS to auro-loader.  |
+| text   | Apply CSS to text slot.    |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Basic

package/demo/auro-button.min.js

@@ -735,7 +735,13 @@ var tokensCss = i$4`:host{--ds-auro-button-border-color: var(--ds-advanced-color
 // See LICENSE in the project root for license information.
 
 
+const ICON_ONLY_SHAPES = ["circle", "square"];
+
 /**
+ * The `auro-button` element provides a styled, accessible button with support for various states and form association.
+ * It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
+ * @customElement auro-button
+ * 
  * @slot - Default slot for the text of the button.
  * @slot ariaLabel - Use this slot to pass an aria-label to the HTML5 button.
  * @slot ariaLabel.loading - Use this slot to pass an aria-label to the HTML5 button when in loading state.
@@ -743,14 +749,6 @@ var tokensCss = i$4`:host{--ds-auro-button-border-color: var(--ds-advanced-color
  * @csspart loader - Apply CSS to auro-loader.
  * @csspart text - Apply CSS to text slot.
  */
-
-const ICON_ONLY_SHAPES = ["circle", "square"];
-
-/**
- * The `auro-button` element provides a styled, accessible button with support for various states and form association.
- * It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
- * @customElement auro-button
- */
 class AuroButton extends AuroElement {
   /**
    * Enables form association for this element.

package/demo/index.html

@@ -37,9 +37,9 @@
       import { initExamples } from './index.min.js';
       initExamples();
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js"></script>

package/dist/index.d.ts

@@ -175,11 +175,27 @@ Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
  * - `value`: Defines the value associated with the button which is submitted with the form data. 
  * - `variant`: undefined 
  * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Default slot for the text of the button.
+ * - `ariaLabel`: Use this slot to pass an aria-label to the HTML5 button.
+ * - `ariaLabel.loading`: Use this slot to pass an aria-label to the HTML5 button when in loading state.
+ * 
  * ## Methods
  * 
  * Methods that can be called to access component functionality.
  * 
  * - `register(name?: string = "auro-button") => void`: This will register this element with the browser.
+ * 
+ * ## CSS Parts
+ * 
+ * Custom selectors for styling elements within the component.
+ * 
+ * - `button`: Apply CSS to HTML5 button.
+ * - `loader`: Apply CSS to auro-loader.
+ * - `text`: Apply CSS to text slot.
   */
     "auro-button": Partial<AuroButtonProps & BaseProps<AuroButton> & BaseEvents>;
 

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-button",
-  "version": "0.0.0-pr377.2",
+  "version": "0.0.0-pr377.3",
   "description": "Auro custom auro-button element",
   "author": "Product design and research",
   "repository": {