@aurodesignsystem-dev/auro-button 0.0.0-pr362.1 → 0.0.0-pr362.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/demo/api.md +97 -97
  2. package/demo/auro-button.min.js +49 -23
  3. package/demo/button-sheet.html +80 -80
  4. package/demo/icon-sheet.html +50 -50
  5. package/demo/index.md +50 -50
  6. package/dist/{auro-button-Cnclo6IT.js → auro-button-CvWxpTkj.js} +11 -11
  7. package/dist/index.d.ts +11 -11
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +2 -2
package/demo/api.md CHANGED
@@ -5,23 +5,24 @@
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Type | Default | Description |
9
- |---------------|---------------|--------------------------------------------------|-----------|--------------------------------------------------|
10
- | [autofocus](#autofocus) | `autofocus` | `boolean` | false | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user. |
11
- | [disabled](#disabled) | `disabled` | `boolean` | false | If set to true, button will become disabled and not allow for interactions. |
12
- | [fluid](#fluid) | `fluid` | `boolean` | false | Alters the shape of the button to be full width of its parent container. |
13
- | [loading](#loading) | `loading` | `boolean` | false | If set to true button text will be replaced with `auro-loader` and become disabled. |
14
- | [loadingText](#loadingText) | `loadingText` | `string` | | DEPRECATED - Use `slot="ariaLabel.loading"` instead. |
15
- | [onDark](#onDark) | `ondark` | `boolean` | false | Indicates if the button is rendered in dark mode. |
16
- | [shape](#shape) | `shape` | `'default', 'rounded', 'pill', 'circle', 'square'` | "rounded" | Defines the shape of the button. |
17
- | [size](#size) | `size` | `'xs', 'sm', 'md', 'lg', 'xl'` | "md" | Defines the size of the button. |
18
- | [static](#static) | `static` | `boolean` | false | If true, the button will be static and not respond to user interactions. |
19
- | [tIndex](#tIndex) | `tIndex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation. |
20
- | [tabindex](#tabindex) | `tabindex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation.<br />Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.<br />Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`. |
21
- | [title](#title) | `title` | `string` | | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
22
- | [type](#type) | `type` | `'submit', 'reset', 'button'` | | The type of button. Matches HTML5 Button Spec. |
23
- | [value](#value) | `value` | `string` | | Defines the value associated with the button which is submitted with the form data. |
24
- | [variant](#variant) | `variant` | `'primary', 'secondary', 'tertiary', 'ghost', 'flat'` | "primary" | Sets the button variant. |
8
+ | Property | Attribute | Type | Default | Description |
9
+ |---------------|---------------|--------------------------------------------------|-------------|--------------------------------------------------|
10
+ | [appearance](#appearance) | `appearance` | `'default', 'inverse'` | "'default'" | Defines whether the button will be on lighter or darker backgrounds. |
11
+ | [autofocus](#autofocus) | `autofocus` | `boolean` | false | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user. |
12
+ | [disabled](#disabled) | `disabled` | `boolean` | false | If set to true, button will become disabled and not allow for interactions. |
13
+ | [fluid](#fluid) | `fluid` | `boolean` | false | Alters the shape of the button to be full width of its parent container. |
14
+ | [loading](#loading) | `loading` | `boolean` | false | If set to true button text will be replaced with `auro-loader` and become disabled. |
15
+ | [loadingText](#loadingText) | `loadingText` | `string` | | DEPRECATED - Use `slot="ariaLabel.loading"` instead. |
16
+ | [onDark](#onDark) | `ondark` | `boolean` | "{false}" | DEPRECATED - use `appearance` property |
17
+ | [shape](#shape) | `shape` | `'default', 'rounded', 'pill', 'circle', 'square'` | "rounded" | Defines the shape of the button. |
18
+ | [size](#size) | `size` | `'xs', 'sm', 'md', 'lg', 'xl'` | "md" | Defines the size of the button. |
19
+ | [static](#static) | `static` | `boolean` | false | If true, the button will be static and not respond to user interactions. |
20
+ | [tIndex](#tIndex) | `tIndex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation. |
21
+ | [tabindex](#tabindex) | `tabindex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation.<br />Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.<br />Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`. |
22
+ | [title](#title) | `title` | `string` | | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
23
+ | [type](#type) | `type` | `'submit', 'reset', 'button'` | | The type of button. Matches HTML5 Button Spec. |
24
+ | [value](#value) | `value` | `string` | | Defines the value associated with the button which is submitted with the form data. |
25
+ | [variant](#variant) | `variant` | `'primary', 'secondary', 'tertiary', 'ghost', 'flat'` | "primary" | Sets the button variant. |
25
26
 
26
27
  ## Methods
27
28
 
@@ -59,48 +60,48 @@
59
60
  <!-- AURO-GENERATED-CONTENT:END -->
60
61
  </auro-accordion>
61
62
  <div class="exampleWrapper--ondark">
62
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
63
- <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
64
- <auro-button ondark>Primary</auro-button>
65
- <auro-button variant="secondary" ondark>Secondary</auro-button>
66
- <auro-button variant="tertiary" ondark>Tertiary</auro-button>
67
- <auro-button variant="ghost" ondark>Ghost</auro-button>
63
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
64
+ <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
65
+ <auro-button appearance="inverse">Primary</auro-button>
66
+ <auro-button variant="secondary" appearance="inverse">Secondary</auro-button>
67
+ <auro-button variant="tertiary" appearance="inverse">Tertiary</auro-button>
68
+ <auro-button variant="ghost" appearance="inverse">Ghost</auro-button>
68
69
  <br /><br/>
69
- <auro-button ondark shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
70
- <auro-button ondark shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
71
- <auro-button ondark shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
72
- <auro-button ondark shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
73
- <auro-button ondark shape="circle" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
70
+ <auro-button appearance="inverse" shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
71
+ <auro-button appearance="inverse" shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
72
+ <auro-button appearance="inverse" shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
73
+ <auro-button appearance="inverse" shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
74
+ <auro-button appearance="inverse" shape="circle" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
74
75
  <br /><br/>
75
- <auro-button ondark shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
76
- <auro-button ondark shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
77
- <auro-button ondark shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
78
- <auro-button ondark shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
79
- <auro-button ondark shape="square" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
76
+ <auro-button appearance="inverse" shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
77
+ <auro-button appearance="inverse" shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
78
+ <auro-button appearance="inverse" shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
79
+ <auro-button appearance="inverse" shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
80
+ <auro-button appearance="inverse" shape="square" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
80
81
  <!-- AURO-GENERATED-CONTENT:END -->
81
82
  </div>
82
83
  <auro-accordion alignRight>
83
84
  <span slot="trigger">See code</span>
84
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
85
- <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
85
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearance.html) -->
86
+ <!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearance.html -->
86
87
 
87
88
  ```html
88
- <auro-button ondark>Primary</auro-button>
89
- <auro-button variant="secondary" ondark>Secondary</auro-button>
90
- <auro-button variant="tertiary" ondark>Tertiary</auro-button>
91
- <auro-button variant="ghost" ondark>Ghost</auro-button>
89
+ <auro-button appearance="inverse">Primary</auro-button>
90
+ <auro-button variant="secondary" appearance="inverse">Secondary</auro-button>
91
+ <auro-button variant="tertiary" appearance="inverse">Tertiary</auro-button>
92
+ <auro-button variant="ghost" appearance="inverse">Ghost</auro-button>
92
93
  <br /><br/>
93
- <auro-button ondark shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
94
- <auro-button ondark shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
95
- <auro-button ondark shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
96
- <auro-button ondark shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
97
- <auro-button ondark shape="circle" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
94
+ <auro-button appearance="inverse" shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
95
+ <auro-button appearance="inverse" shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
96
+ <auro-button appearance="inverse" shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
97
+ <auro-button appearance="inverse" shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
98
+ <auro-button appearance="inverse" shape="circle" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
98
99
  <br /><br/>
99
- <auro-button ondark shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
100
- <auro-button ondark shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
101
- <auro-button ondark shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
102
- <auro-button ondark shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
103
- <auro-button ondark shape="square" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
100
+ <auro-button appearance="inverse" shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
101
+ <auro-button appearance="inverse" shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
102
+ <auro-button appearance="inverse" shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
103
+ <auro-button appearance="inverse" shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
104
+ <auro-button appearance="inverse" shape="square" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
104
105
  ```
105
106
  <!-- AURO-GENERATED-CONTENT:END -->
106
107
  </auro-accordion>
@@ -132,24 +133,24 @@ This example demonstrates `auro-button` in it's `disabled` state.
132
133
  <!-- AURO-GENERATED-CONTENT:END -->
133
134
  </auro-accordion>
134
135
  <div class="exampleWrapper--ondark">
135
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledOnDark.html) -->
136
- <!-- The below content is automatically added from ./../apiExamples/disabledOnDark.html -->
137
- <auro-button disabled ondark>Primary</auro-button>
138
- <auro-button variant="secondary" disabled ondark>Secondary</auro-button>
139
- <auro-button variant="tertiary" disabled ondark>Tertiary</auro-button>
140
- <auro-button variant="ghost" disabled ondark>Ghost</auro-button>
136
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledInverseAppearance.html) -->
137
+ <!-- The below content is automatically added from ./../apiExamples/disabledInverseAppearance.html -->
138
+ <auro-button disabled appearance="inverse">Primary</auro-button>
139
+ <auro-button variant="secondary" disabled appearance="inverse">Secondary</auro-button>
140
+ <auro-button variant="tertiary" disabled appearance="inverse">Tertiary</auro-button>
141
+ <auro-button variant="ghost" disabled appearance="inverse">Ghost</auro-button>
141
142
  <!-- AURO-GENERATED-CONTENT:END -->
142
143
  </div>
143
144
  <auro-accordion alignRight>
144
145
  <span slot="trigger">See code</span>
145
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledOnDark.html) -->
146
- <!-- The below code snippet is automatically added from ./../apiExamples/disabledOnDark.html -->
146
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledInverseAppearance.html) -->
147
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabledInverseAppearance.html -->
147
148
 
148
149
  ```html
149
- <auro-button disabled ondark>Primary</auro-button>
150
- <auro-button variant="secondary" disabled ondark>Secondary</auro-button>
151
- <auro-button variant="tertiary" disabled ondark>Tertiary</auro-button>
152
- <auro-button variant="ghost" disabled ondark>Ghost</auro-button>
150
+ <auro-button disabled appearance="inverse">Primary</auro-button>
151
+ <auro-button variant="secondary" disabled appearance="inverse">Secondary</auro-button>
152
+ <auro-button variant="tertiary" disabled appearance="inverse">Tertiary</auro-button>
153
+ <auro-button variant="ghost" disabled appearance="inverse">Ghost</auro-button>
153
154
  ```
154
155
  <!-- AURO-GENERATED-CONTENT:END -->
155
156
  </auro-accordion>
@@ -174,14 +175,14 @@ The `static` attribute creates a button with no interactivity. When applied, the
174
175
  <auro-button static size="xl">XL Static</auro-button>
175
176
  <br><br>
176
177
  <auro-button static shape="pill">
177
- <auro-icon name="home" slot="icon" customColor></auro-icon>
178
+ <auro-icon category="interface" name="home-filled" slot="icon" customColor></auro-icon>
178
179
  Static Pill with Icon
179
180
  </auro-button>
180
181
  <auro-button static shape="circle">
181
- <auro-icon name="home" customColor></auro-icon>
182
+ <auro-icon category="interface" name="home-filled" customColor></auro-icon>
182
183
  </auro-button>
183
184
  <auro-button static shape="square">
184
- <auro-icon name="home" customColor></auro-icon>
185
+ <auro-icon category="interface" name="home-filled" customColor></auro-icon>
185
186
  </auro-button>
186
187
  <!-- AURO-GENERATED-CONTENT:END -->
187
188
  </div>
@@ -204,35 +205,35 @@ The `static` attribute creates a button with no interactivity. When applied, the
204
205
  <auro-button static size="xl">XL Static</auro-button>
205
206
  <br><br>
206
207
  <auro-button static shape="pill">
207
- <auro-icon name="home" slot="icon" customColor></auro-icon>
208
+ <auro-icon category="interface" name="home-filled" slot="icon" customColor></auro-icon>
208
209
  Static Pill with Icon
209
210
  </auro-button>
210
211
  <auro-button static shape="circle">
211
- <auro-icon name="home" customColor></auro-icon>
212
+ <auro-icon category="interface" name="home-filled" customColor></auro-icon>
212
213
  </auro-button>
213
214
  <auro-button static shape="square">
214
- <auro-icon name="home" customColor></auro-icon>
215
+ <auro-icon category="interface" name="home-filled" customColor></auro-icon>
215
216
  </auro-button>
216
217
  ```
217
218
  <!-- AURO-GENERATED-CONTENT:END -->
218
219
  </auro-accordion>
219
220
  <div class="exampleWrapper--ondark">
220
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/staticOnDark.html) -->
221
- <!-- The below content is automatically added from ./../apiExamples/staticOnDark.html -->
222
- <auro-button static onDark>Static Primary Button</auro-button>
223
- <auro-button static variant="secondary" onDark>Static Secondary Button</auro-button>
224
- <auro-button static variant="tertiary" onDark>Static Tertiary Button</auro-button>
221
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/staticInverseAppearance.html) -->
222
+ <!-- The below content is automatically added from ./../apiExamples/staticInverseAppearance.html -->
223
+ <auro-button static appearance="inverse">Static Primary Button</auro-button>
224
+ <auro-button static variant="secondary" appearance="inverse">Static Secondary Button</auro-button>
225
+ <auro-button static variant="tertiary" appearance="inverse">Static Tertiary Button</auro-button>
225
226
  <!-- AURO-GENERATED-CONTENT:END -->
226
227
  </div>
227
228
  <auro-accordion alignRight>
228
229
  <span slot="trigger">See code</span>
229
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/staticOnDark.html) -->
230
- <!-- The below code snippet is automatically added from ./../apiExamples/staticOnDark.html -->
230
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/staticInverseAppearance.html) -->
231
+ <!-- The below code snippet is automatically added from ./../apiExamples/staticInverseAppearance.html -->
231
232
 
232
233
  ```html
233
- <auro-button static onDark>Static Primary Button</auro-button>
234
- <auro-button static variant="secondary" onDark>Static Secondary Button</auro-button>
235
- <auro-button static variant="tertiary" onDark>Static Tertiary Button</auro-button>
234
+ <auro-button static appearance="inverse">Static Primary Button</auro-button>
235
+ <auro-button static variant="secondary" appearance="inverse">Static Secondary Button</auro-button>
236
+ <auro-button static variant="tertiary" appearance="inverse">Static Tertiary Button</auro-button>
236
237
  ```
237
238
  <!-- AURO-GENERATED-CONTENT:END -->
238
239
  </auro-accordion>
@@ -660,37 +661,34 @@ Use the `loading` attribute to alter the content to the shimmering dots to alert
660
661
  <!-- AURO-GENERATED-CONTENT:END -->
661
662
  </auro-accordion>
662
663
  <div class="exampleWrapper--ondark">
663
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loadingOnDark.html) -->
664
- <!-- The below content is automatically added from ./../apiExamples/loadingOnDark.html -->
665
- <auro-button ondark loading>Primary</auro-button>
666
- <auro-button variant="secondary" ondark loading>Secondary</auro-button>
667
- <auro-button variant="tertiary" ondark loading>Tertiary</auro-button>
668
- <auro-button variant="ghost" ondark loading>Ghost</auro-button>
664
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loadingInverseAppearance.html) -->
665
+ <!-- The below content is automatically added from ./../apiExamples/loadingInverseAppearance.html -->
666
+ <auro-button appearance="inverse" loading>Primary</auro-button>
667
+ <auro-button variant="secondary" appearance="inverse" loading>Secondary</auro-button>
668
+ <auro-button variant="tertiary" appearance="inverse" loading>Tertiary</auro-button>
669
+ <auro-button variant="ghost" appearance="inverse" loading>Ghost</auro-button>
669
670
  <!-- AURO-GENERATED-CONTENT:END -->
670
671
  </div>
671
672
  <auro-accordion alignRight>
672
673
  <span slot="trigger">See code</span>
673
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loadingOnDark.html) -->
674
- <!-- The below code snippet is automatically added from ./../apiExamples/loadingOnDark.html -->
674
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loadingInverseAppearance.html) -->
675
+ <!-- The below code snippet is automatically added from ./../apiExamples/loadingInverseAppearance.html -->
675
676
 
676
677
  ```html
677
- <auro-button ondark loading>Primary</auro-button>
678
- <auro-button variant="secondary" ondark loading>Secondary</auro-button>
679
- <auro-button variant="tertiary" ondark loading>Tertiary</auro-button>
680
- <auro-button variant="ghost" ondark loading>Ghost</auro-button>
678
+ <auro-button appearance="inverse" loading>Primary</auro-button>
679
+ <auro-button variant="secondary" appearance="inverse" loading>Secondary</auro-button>
680
+ <auro-button variant="tertiary" appearance="inverse" loading>Tertiary</auro-button>
681
+ <auro-button variant="ghost" appearance="inverse" loading>Ghost</auro-button>
681
682
  ```
682
683
  <!-- AURO-GENERATED-CONTENT:END -->
683
684
  </auro-accordion>
684
685
 
685
- ## ARIA Support
686
-
687
- The component supports both the `aria-label` and `aria-labelledby` attributes for accessibility.
688
- In addition, accessible text may be provided through the `ariaLabel` or `ariaLabel.loading` slots, which take precedence over the corresponding attributes.
689
-
690
- If the button enters a `loading` state, the label will default to "Loading..." unless a custom value is supplied via the `ariaLabel.loading` slot or the `loadingText` attribute (deprecated).
686
+ ## ARIA Support
691
687
 
692
688
  #### Aria Label
693
689
 
690
+ Accessible text may be provided through the `ariaLabel` or `ariaLabel.loading` slots.
691
+
694
692
  <div class="exampleWrapper">
695
693
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabel.html) -->
696
694
  <!-- The below content is automatically added from ./../apiExamples/ariaLabel.html -->
@@ -699,7 +697,7 @@ If the button enters a `loading` state, the label will default to "Loading..." u
699
697
  Auro Button
700
698
  </auro-button>
701
699
  <auro-button loading>
702
- <span slot="ariaLabel.loading">Custom loading text</span>
700
+ <span slot="ariaLabel.loading">My Loading Button Label</span>
703
701
  Auro Button
704
702
  </auro-button>
705
703
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -715,7 +713,7 @@ If the button enters a `loading` state, the label will default to "Loading..." u
715
713
  Auro Button
716
714
  </auro-button>
717
715
  <auro-button loading>
718
- <span slot="ariaLabel.loading">Custom loading text</span>
716
+ <span slot="ariaLabel.loading">My Loading Button Label</span>
719
717
  Auro Button
720
718
  </auro-button>
721
719
  ```
@@ -724,6 +722,8 @@ If the button enters a `loading` state, the label will default to "Loading..." u
724
722
 
725
723
  #### Aria Labelledby
726
724
 
725
+ The component supports both the `aria-labelledby` attribute for accessibility.
726
+
727
727
  <div class="exampleWrapper">
728
728
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelledby.html) -->
729
729
  <!-- The below content is automatically added from ./../apiExamples/ariaLabelledby.html -->
package/demo/auro-button.min.js CHANGED
@@ -120,6 +120,19 @@ class AuroLibraryRuntimeUtils {
120
120
 
121
121
  return elemTag === tag || elem.hasAttribute(tag);
122
122
  }
123
+
124
+ /**
125
+ * Gets the text content of a named slot.
126
+ * @returns {String}
127
+ * @private
128
+ */
129
+ getSlotText(elem, name) {
130
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
131
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
132
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
133
+
134
+ return text || null;
135
+ }
123
136
  }
124
137
 
125
138
  /**
@@ -569,7 +582,17 @@ class AuroElement extends i$2 {
569
582
  },
570
583
 
571
584
  /**
572
- * This Boolean attribute lets you specify that the element should be rendered in dark mode.
585
+ * Defines whether the button will be on lighter or darker backgrounds.
586
+ * @property {'default', 'inverse'}
587
+ * @default 'default'
588
+ */
589
+ appearance: {
590
+ type: String,
591
+ reflect: true
592
+ },
593
+
594
+ /**
595
+ * DEPRECATED - use `appearance` attribute.
573
596
  * @default {false}
574
597
  */
575
598
  onDark: {
@@ -592,6 +615,13 @@ class AuroElement extends i$2 {
592
615
  };
593
616
  }
594
617
 
618
+ constructor() {
619
+ super();
620
+
621
+ this.onDark = false;
622
+ this.appearance = 'default';
623
+ }
624
+
595
625
  resetShapeClasses() {
596
626
  if (this.shape && this.size) {
597
627
  if (this.wrapper) {
@@ -680,7 +710,7 @@ class AuroElement extends i$2 {
680
710
 
681
711
  var loaderVersion = '6.0.0';
682
712
 
683
- var colorCss = i$4`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image),var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
713
+ var colorCss = i$4`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image),var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
684
714
  `;
685
715
 
686
716
  var shapeSize = i$4`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}
@@ -715,7 +745,8 @@ const ICON_ONLY_SHAPES = ["circle", "square"];
715
745
  * @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
716
746
  * @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
717
747
  * @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
718
- * @property {boolean} onDark - Indicates if the button is rendered in dark mode.
748
+ * @property {boolean} onDark - DEPRECATED - use `appearance` property
749
+ * @property {'default', 'inverse'} appearance - Defines whether the button will be on lighter or darker backgrounds.
719
750
  */
720
751
  class AuroButton extends AuroElement {
721
752
  /**
@@ -735,7 +766,6 @@ class AuroButton extends AuroElement {
735
766
  this.static = false;
736
767
  this.size = "md";
737
768
  this.shape = "rounded";
738
- this.onDark = false;
739
769
  this.fluid = false;
740
770
  this.loadingText = this.loadingText || "Loading...";
741
771
  this.variant = "primary";
@@ -994,7 +1024,7 @@ class AuroButton extends AuroElement {
994
1024
  }
995
1025
 
996
1026
  /**
997
- * Returns the current value of the projected `aria-label` attribute or undefined if not set.
1027
+ * Returns the current value of the projected `aria-label` attribute or undefined if not set. The `aria-label` attribute is for internal use only.
998
1028
  * @returns {string | undefined}
999
1029
  * @private
1000
1030
  */
@@ -1077,6 +1107,15 @@ class AuroButton extends AuroElement {
1077
1107
  this.runtimeUtils.handleComponentTagRename(this, "auro-button");
1078
1108
  }
1079
1109
 
1110
+ /**
1111
+ * Returns the appropriate string to be used for the aria-label attribute.
1112
+ * @returns {String}
1113
+ * @private
1114
+ */
1115
+ generateAriaLabel() {
1116
+ return this.loading ? this.runtimeUtils.getSlotText(this, 'ariaLabel.loading') || this.loadingText : this.runtimeUtils.getSlotText(this, 'ariaLabel') || this.currentAriaLabel;
1117
+ }
1118
+
1080
1119
  /**
1081
1120
  * This is to detect pointer events for hover and active states for styling purposes.
1082
1121
  * :host with :has selector dont work together in Safari and Firefox
@@ -1101,19 +1140,6 @@ class AuroButton extends AuroElement {
1101
1140
  }
1102
1141
  }
1103
1142
 
1104
- /**
1105
- * Gets the text content of a named slot.
1106
- * @returns {String}
1107
- * @private
1108
- */
1109
- getSlotText(name) {
1110
- const slot = this.shadowRoot?.querySelector(`slot[name="${name}"]`);
1111
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
1112
- const text = nodes.map(n => n.textContent?.trim()).join('').trim();
1113
- return text || null;
1114
- }
1115
-
1116
-
1117
1143
  /**
1118
1144
  * Renders the default layout for the button.
1119
1145
  * @returns {TemplateResult}
@@ -1148,9 +1174,13 @@ class AuroButton extends AuroElement {
1148
1174
  const tabindex = this.tIndex || this.tabindex;
1149
1175
 
1150
1176
  return u$1`
1177
+ <!-- Hidden slots for aria labels -->
1178
+ <slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
1179
+ <slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
1180
+
1151
1181
  <${this._renderTag}
1152
1182
  part="${part}"
1153
- aria-label="${o(this.loading ? this.getSlotText('ariaLabel.loading') || this.loadingText : this.getSlotText('ariaLabel') || this.currentAriaLabel)}"
1183
+ aria-label="${o(this.generateAriaLabel())}"
1154
1184
  aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
1155
1185
  tabindex="${o(this.static ? -1 : tabindex)}"
1156
1186
  ?autofocus="${this.autofocus}"
@@ -1180,10 +1210,6 @@ class AuroButton extends AuroElement {
1180
1210
  </span>
1181
1211
  </span>
1182
1212
  </${this._renderTag}>
1183
-
1184
- <!-- Hidden slots for aria labels -->
1185
- <slot name="ariaLabel" hidden></slot>
1186
- <slot name="ariaLabel.loading" hidden></slot>
1187
1213
  `;
1188
1214
  }
1189
1215