@justeattakeaway/pie-button 0.41.1 → 0.42.0

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 (5) hide show
  1. package/README.md +4 -170
  2. package/dist/index.js +26 -26
  3. package/package.json +1 -1
  4. package/src/button.scss +8 -7
  5. package/src/index.ts +1 -1
package/README.md CHANGED
@@ -8,20 +8,6 @@
8
8
  </a>
9
9
  </p>
10
10
 
11
- # Table of Contents
12
-
13
- 1. [Introduction](#pie-button)
14
- 2. [Installation](#installation)
15
- 3. [Importing the component](#importing-the-component)
16
- 4. [Peer Dependencies](#peer-dependencies)
17
- 5. [Props](#props)
18
- 6. [Events](#events)
19
- - [HTML example](#html)
20
- - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
21
- - [React example (using Next 13)](#react-templates-using-next-13)
22
- 7. [Forms usage](#forms-usage)
23
- 8. [Contributing](#contributing)
24
-
25
11
 
26
12
  ## pie-button
27
13
 
@@ -42,165 +28,13 @@ $ npm i @justeattakeaway/pie-button
42
28
  $ yarn add @justeattakeaway/pie-button
43
29
  ```
44
30
 
45
- For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
46
-
47
-
48
- ### Importing the component
49
-
50
- #### JavaScript
51
- ```js
52
- // Default – for Native JS Applications, Vue, Angular, Svelte, etc.
53
- import { PieButton } from '@justeattakeaway/pie-button';
54
-
55
- // If you don't need to reference the imported object, you can simply
56
- // import the module which registers the component as a custom element.
57
- import '@justeattakeaway/pie-button';
58
- ```
59
-
60
- #### React
61
- ```js
62
- // React
63
- // For React, you will need to import our React-specific component build
64
- // which wraps the web component using ​@lit/react
65
- import { PieButton } from '@justeattakeaway/pie-button/dist/react';
66
- ```
67
-
68
- > [!NOTE]
69
- > When using the React version of the component, please make sure to also
70
- > include React as a [peer dependency](#peer-dependencies) in your project.
71
-
72
-
73
- ## Peer Dependencies
74
-
75
- > [!IMPORTANT]
76
- > When using `pie-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki for more information and how to include these in your application](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies).
77
-
78
-
79
- ## Props
80
-
81
- | Property | Type | Default | Description |
82
- |----------------|-----------|------------|----------------------------------------------------------------------------------------------------------------------|
83
- | size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
84
- | type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)|
85
- | variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `destructive`, `destructive-ghost`, `inverse`, `ghost-inverse`, `outline-inverse` |
86
- | disabled | `Boolean` | `false` | If `true`, disables the button. |
87
- | isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of its container. |
88
- | isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the button. |
89
- | isResponsive | `Boolean` | `false` | If `true`, uses the next larger size on wide viewports. |
90
- | iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing` |
91
- | name | `String` | `undefined`| The name of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) |
92
- | value | `String` | `undefined`| The value of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value) |
93
- | formaction | `String` | `undefined`| Designates an alternative URL for form data submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction) |
94
- | formenctype | `String` | `undefined`| Specifies the form data encoding type. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype) |
95
- | formmethod | `String` | `undefined`| Sets the HTTP method for form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod) |
96
- | formnovalidate | `Boolean` | `undefined` | Ensures the form is submitted without native HTML validation. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formnovalidate) |
97
- | formtarget | `String` | `undefined`| Dictates where to display the response after form submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget) |
98
- | responsiveSize | `String` | `productive`| Sets a specific size for xsmall button when rendered as responsive. It can be `productive` or `expressive`. |
99
-
100
-
101
- In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
102
-
103
- ```html
104
- <!-- Native HTML -->
105
- <pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
106
-
107
- <!-- JSX -->
108
- <PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
109
- ```
110
-
111
-
112
- ## Slots
113
-
114
- | Slot | Description |
115
- |---------------|------------------------------------------------------------------------------------------------------------------------------------|
116
- | Default slot | The default slot is used to pass text into the button component. |
117
- | icon | Used to pass in an icon to the button component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
118
-
119
- ### Using `pie-icons-webc` with `pie-button` icon slot
120
-
121
- We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
122
-
123
- ```html
124
- <!--
125
- Note that pie-button and the icon that you want to use will need to be imported as components into your application.
126
- See the `pie-icons-webc` README for more info on importing these icons.
127
- -->
128
- <pie-button>
129
- <icon-plus-circle slot="icon"></icon-plus-circle>
130
- Search
131
- </pie-button>
132
- ```
133
-
134
-
135
- ## Events
136
-
137
- This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.
138
-
139
- For example, to add a click handler in various templates:
140
-
141
- ### HTML
142
-
143
- ```html
144
- <!-- Other attributes omitted for clarity -->
145
- <pie-button onclick="e => console.log(e)">Click me!</pie-button>
146
- ```
147
-
148
- ### Vue templates (using Nuxt 3)
149
-
150
- ```html
151
- <!-- Other attributes omitted for clarity -->
152
- <pie-button @click="handleClick">Click me!</pie-button>
153
- ```
31
+ ## Documentation
154
32
 
155
- ### React templates (using Next 13)
156
-
157
- ```html
158
- <!-- Other attributes omitted for clarity -->
159
- <PieButton onClick={handleClick}>increment</PieButton>
160
-
161
- ```
162
-
163
- ## Forms usage
164
-
165
- The `pie-button` web component is designed to integrate with standard HTML forms just like a native HTML button. When positioned inside a form, the component will automatically associate itself, enabling it to directly interact with the form context.
166
-
167
- ### Button Attributes
168
-
169
- The `pie-button` provides a set of attributes to customize its behavior within forms:
170
-
171
- - `type`: Determines the button's function. Set to `submit` for form submissions or `reset` to clear form fields.
172
- - `formaction`: Designates an alternative URL for form data submission when this specific button is clicked.
173
- - `formenctype`: Specifies the form data encoding type during submission via this button.
174
- - `formmethod`: Sets the HTTP method (e.g., GET or POST) for form data when initiated by this button.
175
- - `formnovalidate`: If present, ensures the form is submitted without validation checks.
176
- - `formtarget`: Dictates where to display the response after form submission.
177
-
178
- Please see the [MDN docs]((https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)) for more information on these attributes.
179
-
180
- ### Integration Example
181
-
182
- ```html
183
- <form action="/default-endpoint" method="post">
184
- <input type="text" name="username" required>
185
- <pie-button
186
- type="submit"
187
- formaction="/alternate-endpoint"
188
- formenctype="multipart/form-data"
189
- formmethod="post"
190
- formnovalidate
191
- formtarget="_blank">
192
- Submit
193
- </pie-button>
194
- </form>
195
- ```
33
+ Visit [Button | PIE Design System](https://pie.design/components/button/overview) to view more information on this component.
196
34
 
197
- In this example:
35
+ ## Questions
198
36
 
199
- - The pie-button, when clicked, will send the form data to /alternate-endpoint instead of the form's default /default-endpoint.
200
- - It uses the multipart/form-data encoding type for form submission.
201
- - The form will submit using the POST method.
202
- - No validation will be performed during submission, thanks to formnovalidate.
203
- - The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute.
37
+ Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
204
38
 
205
39
  ## Contributing
206
40
 
package/dist/index.js CHANGED
@@ -13,10 +13,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
13
13
  "ghost-inverse",
14
14
  "destructive",
15
15
  "destructive-ghost"
16
- ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
16
+ ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
17
17
  `;
18
18
  (function() {
19
- const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
19
+ const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
20
20
  ariaAtomic: "aria-atomic",
21
21
  ariaAutoComplete: "aria-autocomplete",
22
22
  ariaBusy: "aria-busy",
@@ -100,7 +100,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
100
100
  i.forEach((t) => {
101
101
  const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
102
102
  o.forEach((n) => {
103
- var u;
103
+ var b;
104
104
  if (c.has(n) && n.constructor.formAssociated && U(n), k.has(n)) {
105
105
  const d = k.get(n);
106
106
  Object.keys(S).filter((w) => d[w] !== null).forEach((w) => {
@@ -121,10 +121,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
121
121
  for (; w; )
122
122
  U(w), w = E.nextNode();
123
123
  }
124
- n.localName === "fieldset" && ((u = z.observe) == null || u.call(z, n, G), j(n, !0));
124
+ n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, G), j(n, !0));
125
125
  }), l.forEach((n) => {
126
- const u = c.get(n);
127
- u && a.get(u) && J(u), g.has(n) && g.get(n).disconnect();
126
+ const b = c.get(n);
127
+ b && a.get(b) && J(b), g.has(n) && g.get(n).disconnect();
128
128
  });
129
129
  });
130
130
  }
@@ -178,7 +178,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
178
178
  const o = y.get(i);
179
179
  if (i.noValidate)
180
180
  return;
181
- o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && e.preventDefault();
181
+ o.size && Array.from(o).reverse().map((b) => c.get(b).reportValidity()).includes(!1) && e.preventDefault();
182
182
  }
183
183
  });
184
184
  }, vt = (i) => {
@@ -224,7 +224,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
224
224
  this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
225
225
  }
226
226
  }
227
- const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && A(e), i), bt = (i) => {
227
+ const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = ut(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && A(e), i), ut = (i) => {
228
228
  let t = !0;
229
229
  for (let e in i)
230
230
  e !== "valid" && i[e] !== !1 && (t = !1);
@@ -269,7 +269,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
269
269
  throw new TypeError("Cannot read private member from an object whose class did not declare it");
270
270
  return e === "m" ? r : e === "a" ? r.call(i) : r ? r.value : t.get(i);
271
271
  }
272
- function ut(i, t, e, r, o) {
272
+ function bt(i, t, e, r, o) {
273
273
  if (r === "m")
274
274
  throw new TypeError("Private method is not writable");
275
275
  if (r === "a" && !o)
@@ -281,7 +281,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
281
281
  var C;
282
282
  class ft {
283
283
  constructor(t) {
284
- C.set(this, void 0), ut(this, C, t, "f");
284
+ C.set(this, void 0), bt(this, C, t, "f");
285
285
  for (let e = 0; e < t.length; e++) {
286
286
  let r = t[e];
287
287
  this[e] = r, r.hasAttribute("name") && (this[r.getAttribute("name")] = r);
@@ -317,10 +317,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
317
317
  const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
318
318
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
319
319
  get(...l) {
320
- const n = o.call(this, ...l), u = Array.from(y.get(this) || []);
321
- if (u.length === 0)
320
+ const n = o.call(this, ...l), b = Array.from(y.get(this) || []);
321
+ if (b.length === 0)
322
322
  return n;
323
- const d = Array.from(n).concat(u).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
323
+ const d = Array.from(n).concat(b).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
324
324
  return new ft(d);
325
325
  }
326
326
  });
@@ -396,12 +396,12 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
396
396
  for (const E in t)
397
397
  n[E] = t[E];
398
398
  Object.keys(n).length === 0 && mt(l);
399
- const u = { ...l, ...n };
400
- delete u.valid;
401
- const { valid: d } = pt(l, u, this.form);
399
+ const b = { ...l, ...n };
400
+ delete b.valid;
401
+ const { valid: d } = pt(l, b, this.form);
402
402
  if (!d && !e)
403
403
  throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
404
- b.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
404
+ u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
405
405
  }
406
406
  get shadowRoot() {
407
407
  const t = p.get(this), e = H.get(t);
@@ -409,7 +409,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
409
409
  }
410
410
  get validationMessage() {
411
411
  const t = p.get(this);
412
- return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
412
+ return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
413
413
  }
414
414
  get validity() {
415
415
  const t = p.get(this);
@@ -491,9 +491,9 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
491
491
  }
492
492
  })();
493
493
  var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
494
- for (var b = c > 1 ? void 0 : c ? At(s, a) : s, f = p.length - 1, g; f >= 0; f--)
495
- (g = p[f]) && (b = (c ? g(s, a, b) : g(b)) || b);
496
- return c && b && St(s, a, b), b;
494
+ for (var u = c > 1 ? void 0 : c ? At(s, a) : s, f = p.length - 1, g; f >= 0; f--)
495
+ (g = p[f]) && (u = (c ? g(s, a, u) : g(u)) || u);
496
+ return c && u && St(s, a, u), u;
497
497
  };
498
498
  const L = "pie-button";
499
499
  class v extends xt {
@@ -547,12 +547,12 @@ class v extends xt {
547
547
  * @private
548
548
  */
549
549
  renderSpinner() {
550
- const { size: s, variant: a, disabled: c } = this, b = s.includes("small") ? "small" : "medium";
550
+ const { size: s, variant: a, disabled: c } = this, u = s.includes("small") ? "small" : "medium";
551
551
  let f;
552
552
  return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
553
553
  <pie-spinner
554
- size="${b}"
555
- variant="${f}"
554
+ size="${u}"
555
+ variant="${f}">
556
556
  </pie-spinner>`;
557
557
  }
558
558
  render() {
@@ -560,7 +560,7 @@ class v extends xt {
560
560
  type: s,
561
561
  disabled: a,
562
562
  isFullWidth: c,
563
- variant: b,
563
+ variant: u,
564
564
  size: f,
565
565
  isLoading: g,
566
566
  isResponsive: y,
@@ -572,7 +572,7 @@ class v extends xt {
572
572
  @click=${this._handleClick}
573
573
  class="o-btn"
574
574
  type=${s}
575
- variant=${b}
575
+ variant=${u}
576
576
  size=${f}
577
577
  responsiveSize=${Et(k)}
578
578
  ?disabled=${a}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.41.1",
3
+ "version": "0.42.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/button.scss CHANGED
@@ -38,6 +38,7 @@ $breakpoint-wide: 768px;
38
38
  --btn-height--small: 40px;
39
39
  --btn-height--medium: 48px;
40
40
  --btn-height--large: 56px;
41
+ --icon-display-override: block;
41
42
 
42
43
  /**
43
44
  * Mixin for updating the button styles based on the size passed in.
@@ -49,31 +50,31 @@ $breakpoint-wide: 768px;
49
50
  --btn-padding: 6px var(--dt-spacing-b);
50
51
  --btn-font-size: #{p.font-size(--dt-font-size-14)};
51
52
  --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
52
- --btn-icon-size: 16px;
53
+ --icon-size-override: 16px;
53
54
  } @else if $size == 'small-expressive' {
54
55
  --btn-height: var(--btn-height--small);
55
56
  --btn-padding: 6px var(--dt-spacing-d);
56
57
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
57
58
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
58
- --btn-icon-size: 20px;
59
+ --icon-size-override: 20px;
59
60
  } @else if $size == 'small-productive' {
60
61
  --btn-height: var(--btn-height--small);
61
62
  --btn-padding: 8px var(--dt-spacing-d);
62
63
  --btn-font-size: #{p.font-size(--dt-font-size-16)};
63
64
  --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
64
- --btn-icon-size: 20px;
65
+ --icon-size-override: 20px;
65
66
  } @else if $size == 'medium' {
66
67
  --btn-height: var(--btn-height--medium);
67
68
  --btn-padding: 10px var(--dt-spacing-e);
68
69
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
69
70
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
70
- --btn-icon-size: 24px;
71
+ --icon-size-override: 24px;
71
72
  } @else if $size == 'large' {
72
73
  --btn-height: var(--btn-height--large);
73
74
  --btn-padding: 14px var(--dt-spacing-e);
74
75
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
75
76
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
76
- --btn-icon-size: 24px;
77
+ --icon-size-override: 24px;
77
78
  }
78
79
  }
79
80
 
@@ -254,6 +255,6 @@ $breakpoint-wide: 768px;
254
255
 
255
256
  // Used to size an SVG if one is passed in (when not using the component icons)
256
257
  ::slotted(svg) {
257
- height: var(--btn-icon-size);
258
- width: var(--btn-icon-size);
258
+ height: var(--icon-size-override);
259
+ width: var(--icon-size-override);
259
260
  }
package/src/index.ts CHANGED
@@ -223,7 +223,7 @@ export class PieButton extends LitElement implements ButtonProps {
223
223
  return html`
224
224
  <pie-spinner
225
225
  size="${spinnerSize}"
226
- variant="${spinnerVariant}"
226
+ variant="${spinnerVariant}">
227
227
  </pie-spinner>`;
228
228
  }
229
229