@aurodesignsystem-dev/auro-button 0.0.0-pr359.0 → 0.0.0-pr359.1

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 +68 -68
  2. package/demo/auro-button.min.js +16 -11
  3. package/demo/button-sheet.html +80 -80
  4. package/demo/icon-sheet.html +50 -50
  5. package/demo/index.md +42 -42
  6. package/dist/{auro-button-Er6qTIWt.js → auro-button-DIjwfXGy.js} +2 -2
  7. package/dist/index.d.ts +2 -2
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +1 -1
package/demo/api.md CHANGED
@@ -5,24 +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` | | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
15
- | [onDark](#onDark) | `ondark` | `boolean` | false | DEPRECATED - use `surface` property |
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
- | [surface](#surface) | `surface` | `'light', 'dark'` | "light" | Defines whether the button is on a light or dark background. |
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. |
8
+ | Property | Attribute | Type | Default | Description |
9
+ |---------------|---------------|--------------------------------------------------|-------------|--------------------------------------------------|
10
+ | [appearance](#appearance) | `appearance` | `'default', 'inverse'` | "'default'" | Defines whether the button should be light colored for use on dark 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` | | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
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. |
26
26
 
27
27
  ## Methods
28
28
 
@@ -62,22 +62,22 @@
62
62
  <div class="exampleWrapper--ondark">
63
63
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
64
64
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
65
- <auro-button surface="dark">Primary</auro-button>
66
- <auro-button variant="secondary" surface="dark">Secondary</auro-button>
67
- <auro-button variant="tertiary" surface="dark">Tertiary</auro-button>
68
- <auro-button variant="ghost" surface="dark">Ghost</auro-button>
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>
69
69
  <br /><br/>
70
- <auro-button surface="dark" shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
71
- <auro-button surface="dark" shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
72
- <auro-button surface="dark" shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
73
- <auro-button surface="dark" shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
74
- <auro-button surface="dark" 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>
75
75
  <br /><br/>
76
- <auro-button surface="dark" shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
77
- <auro-button surface="dark" shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
78
- <auro-button surface="dark" shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
79
- <auro-button surface="dark" shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
80
- <auro-button surface="dark" 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>
81
81
  <!-- AURO-GENERATED-CONTENT:END -->
82
82
  </div>
83
83
  <auro-accordion alignRight>
@@ -86,22 +86,22 @@
86
86
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
87
87
 
88
88
  ```html
89
- <auro-button surface="dark">Primary</auro-button>
90
- <auro-button variant="secondary" surface="dark">Secondary</auro-button>
91
- <auro-button variant="tertiary" surface="dark">Tertiary</auro-button>
92
- <auro-button variant="ghost" surface="dark">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>
93
93
  <br /><br/>
94
- <auro-button surface="dark" shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
95
- <auro-button surface="dark" shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
96
- <auro-button surface="dark" shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
97
- <auro-button surface="dark" shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
98
- <auro-button surface="dark" 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>
99
99
  <br /><br/>
100
- <auro-button surface="dark" shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
101
- <auro-button surface="dark" shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
102
- <auro-button surface="dark" shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
103
- <auro-button surface="dark" shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
104
- <auro-button surface="dark" 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>
105
105
  ```
106
106
  <!-- AURO-GENERATED-CONTENT:END -->
107
107
  </auro-accordion>
@@ -135,10 +135,10 @@ This example demonstrates `auro-button` in it's `disabled` state.
135
135
  <div class="exampleWrapper--ondark">
136
136
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledOnDark.html) -->
137
137
  <!-- The below content is automatically added from ./../apiExamples/disabledOnDark.html -->
138
- <auro-button disabled surface="dark">Primary</auro-button>
139
- <auro-button variant="secondary" disabled surface="dark">Secondary</auro-button>
140
- <auro-button variant="tertiary" disabled surface="dark">Tertiary</auro-button>
141
- <auro-button variant="ghost" disabled surface="dark">Ghost</auro-button>
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>
142
142
  <!-- AURO-GENERATED-CONTENT:END -->
143
143
  </div>
144
144
  <auro-accordion alignRight>
@@ -147,10 +147,10 @@ This example demonstrates `auro-button` in it's `disabled` state.
147
147
  <!-- The below code snippet is automatically added from ./../apiExamples/disabledOnDark.html -->
148
148
 
149
149
  ```html
150
- <auro-button disabled surface="dark">Primary</auro-button>
151
- <auro-button variant="secondary" disabled surface="dark">Secondary</auro-button>
152
- <auro-button variant="tertiary" disabled surface="dark">Tertiary</auro-button>
153
- <auro-button variant="ghost" disabled surface="dark">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>
154
154
  ```
155
155
  <!-- AURO-GENERATED-CONTENT:END -->
156
156
  </auro-accordion>
@@ -220,9 +220,9 @@ The `static` attribute creates a button with no interactivity. When applied, the
220
220
  <div class="exampleWrapper--ondark">
221
221
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/staticOnDark.html) -->
222
222
  <!-- The below content is automatically added from ./../apiExamples/staticOnDark.html -->
223
- <auro-button static surface="dark">Static Primary Button</auro-button>
224
- <auro-button static variant="secondary" surface="dark">Static Secondary Button</auro-button>
225
- <auro-button static variant="tertiary" surface="dark">Static Tertiary Button</auro-button>
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>
226
226
  <!-- AURO-GENERATED-CONTENT:END -->
227
227
  </div>
228
228
  <auro-accordion alignRight>
@@ -231,9 +231,9 @@ The `static` attribute creates a button with no interactivity. When applied, the
231
231
  <!-- The below code snippet is automatically added from ./../apiExamples/staticOnDark.html -->
232
232
 
233
233
  ```html
234
- <auro-button static surface="dark">Static Primary Button</auro-button>
235
- <auro-button static variant="secondary" surface="dark">Static Secondary Button</auro-button>
236
- <auro-button static variant="tertiary" surface="dark">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>
237
237
  ```
238
238
  <!-- AURO-GENERATED-CONTENT:END -->
239
239
  </auro-accordion>
@@ -633,10 +633,10 @@ Use the `loading` attribute to alter the content to the shimmering dots to alert
633
633
  <div class="exampleWrapper--ondark">
634
634
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loadingOnDark.html) -->
635
635
  <!-- The below content is automatically added from ./../apiExamples/loadingOnDark.html -->
636
- <auro-button surface="dark" loading>Primary</auro-button>
637
- <auro-button variant="secondary" surface="dark" loading>Secondary</auro-button>
638
- <auro-button variant="tertiary" surface="dark" loading>Tertiary</auro-button>
639
- <auro-button variant="ghost" surface="dark" loading>Ghost</auro-button>
636
+ <auro-button appearance="inverse" loading>Primary</auro-button>
637
+ <auro-button variant="secondary" appearance="inverse" loading>Secondary</auro-button>
638
+ <auro-button variant="tertiary" appearance="inverse" loading>Tertiary</auro-button>
639
+ <auro-button variant="ghost" appearance="inverse" loading>Ghost</auro-button>
640
640
  <!-- AURO-GENERATED-CONTENT:END -->
641
641
  </div>
642
642
  <auro-accordion alignRight>
@@ -645,10 +645,10 @@ Use the `loading` attribute to alter the content to the shimmering dots to alert
645
645
  <!-- The below code snippet is automatically added from ./../apiExamples/loadingOnDark.html -->
646
646
 
647
647
  ```html
648
- <auro-button surface="dark" loading>Primary</auro-button>
649
- <auro-button variant="secondary" surface="dark" loading>Secondary</auro-button>
650
- <auro-button variant="tertiary" surface="dark" loading>Tertiary</auro-button>
651
- <auro-button variant="ghost" surface="dark" loading>Ghost</auro-button>
648
+ <auro-button appearance="inverse" loading>Primary</auro-button>
649
+ <auro-button variant="secondary" appearance="inverse" loading>Secondary</auro-button>
650
+ <auro-button variant="tertiary" appearance="inverse" loading>Tertiary</auro-button>
651
+ <auro-button variant="ghost" appearance="inverse" loading>Ghost</auro-button>
652
652
  ```
653
653
  <!-- AURO-GENERATED-CONTENT:END -->
654
654
  </auro-accordion>
package/demo/auro-button.min.js CHANGED
@@ -569,17 +569,17 @@ class AuroElement extends i$2 {
569
569
  },
570
570
 
571
571
  /**
572
- * Defines whether the button is on a light or dark background.
573
- * @property {'light', 'dark'}
574
- * @default 'light'
572
+ * Defines whether the button should be light colored for use on dark backgrounds.
573
+ * @property {'default', 'inverse'}
574
+ * @default 'default'
575
575
  */
576
- surface: {
576
+ appearance: {
577
577
  type: String,
578
578
  reflect: true
579
579
  },
580
580
 
581
- /**
582
- * DEPRECATED - use `surface` attribute.
581
+ /**
582
+ * DEPRECATED - use `appearance` attribute.
583
583
  * @default {false}
584
584
  */
585
585
  onDark: {
@@ -602,6 +602,13 @@ class AuroElement extends i$2 {
602
602
  };
603
603
  }
604
604
 
605
+ constructor() {
606
+ super();
607
+
608
+ this.onDark = false;
609
+ this.appearance = 'default';
610
+ }
611
+
605
612
  resetShapeClasses() {
606
613
  if (this.shape && this.size) {
607
614
  if (this.wrapper) {
@@ -690,7 +697,7 @@ class AuroElement extends i$2 {
690
697
 
691
698
  var loaderVersion = '6.0.0';
692
699
 
693
- 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([surface=dark]){--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([surface=dark]: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([surface=dark]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([surface=dark][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([surface=dark][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([surface=dark][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([surface=dark][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([surface=dark][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([surface=dark][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([surface=dark][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([surface=dark][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([surface=dark][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([surface=dark][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([surface=dark][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([surface=dark][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([surface=dark][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([surface=dark][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([surface=dark][variant=flat]) .auro-button:active:not(:disabled),:host([surface=dark][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([surface=dark][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([surface=dark][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)}
700
+ 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)}
694
701
  `;
695
702
 
696
703
  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}
@@ -723,8 +730,8 @@ const ICON_ONLY_SHAPES = ["circle", "square"];
723
730
  * @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
724
731
  * @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
725
732
  * @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
726
- * @property {boolean} onDark - DEPRECATED - use `surface` property
727
- * @property {'light', 'dark'} surface - Defines whether the button is on a light or dark background.
733
+ * @property {boolean} onDark - DEPRECATED - use `appearance` property
734
+ * @property {'default', 'inverse'} appearance - Defines whether the button should be light colored for use on dark backgrounds.
728
735
  */
729
736
  class AuroButton extends AuroElement {
730
737
  /**
@@ -744,8 +751,6 @@ class AuroButton extends AuroElement {
744
751
  this.static = false;
745
752
  this.size = "md";
746
753
  this.shape = "rounded";
747
- this.onDark = false;
748
- this.surface = 'light';
749
754
  this.fluid = false;
750
755
  this.loadingText = this.loadingText || "Loading...";
751
756
  this.variant = "primary";