@justeattakeaway/pie-button 0.16.0 → 0.17.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 (17) hide show
  1. package/.turbo/turbo-build.log +7 -7
  2. package/CHANGELOG.md +18 -0
  3. package/README.md +48 -41
  4. package/dist/index.js +45 -99
  5. package/dist/react.js +209 -223
  6. package/dist/types/packages/components/pie-button/src/defs.d.ts +28 -15
  7. package/dist/types/packages/components/pie-button/src/defs.d.ts.map +1 -1
  8. package/dist/types/packages/components/pie-button/src/index.d.ts +2 -2
  9. package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -1
  10. package/package.json +1 -1
  11. package/src/button.scss +68 -18
  12. package/src/defs.ts +29 -34
  13. package/src/index.ts +7 -8
  14. package/test/accessibility/pie-button.spec.ts +10 -11
  15. package/test/component/pie-button.spec.ts +7 -4
  16. package/test/visual/pie-button.spec.ts +17 -15
  17. package/vite.config.js +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,14 +1,14 @@
1
- [3:48:31 PM] @custom-elements-manifest/analyzer: Created new manifest.
1
+ [11:00:50 AM] @custom-elements-manifest/analyzer: Created new manifest.
2
2
  react wrapper has been added!
3
- vite v4.2.3 building for production...
3
+ vite v4.3.9 building for production...
4
4
  transforming...
5
- ✓ 28 modules transformed.
5
+ ✓ 22 modules transformed.
6
6
  rendering chunks...
7
7
  computing gzip size...
8
- dist/index.js  7.96 kB │ gzip: 2.10 kB
9
- dist/react.js 59.13 kB │ gzip: 15.94 kB
8
+ dist/index.js  7.09 kB │ gzip: 1.77 kB
9
+ dist/react.js 59.01 kB │ gzip: 15.91 kB
10
10
  
11
11
  [vite:dts] Start generate declaration files...
12
- ✓ built in 30.67s
13
- [vite:dts] Declaration files built in 28365ms.
12
+ ✓ built in 13.54s
13
+ [vite:dts] Declaration files built in 12277ms.
14
14
  
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.17.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [Changed] - Styles updated to fully match design updates ([#581](https://github.com/justeattakeaway/pie/pull/581)) by [@ashleynolan](https://github.com/ashleynolan)
8
+
9
+ - Focus styles have been updated to the new style
10
+ - Padding, font-size and line-heights adjusted inline with designs
11
+ - Outline button text colour updated from `color-content-interactive-tertiary` to `color-content-interactive-secondary`
12
+ - Primary buttons at `xsmall` and `small-productive` now have darker background
13
+ - `ghost` variant background colour changed to `transparent` (rather than #fff)
14
+
15
+ ## 0.16.1
16
+
17
+ ### Patch Changes
18
+
19
+ - [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
20
+
3
21
  ## 0.16.0
4
22
 
5
23
  ### Minor Changes
package/README.md CHANGED
@@ -17,41 +17,49 @@
17
17
  - [HTML example](#html)
18
18
  - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
19
19
  - [React example (using Next 13)](#react-templates-using-next-13)
20
- 5. [TypeScript Enum Exports](#typescript-enum-exports)
21
- 6. [Testing](#testing)
20
+ 5. [Testing](#testing)
22
21
  - [Browser Tests](#browser-tests)
23
22
  - [Visual Tests](#visual-tests)
24
23
 
25
24
 
26
25
  ## `pie-button`
27
26
 
28
- `pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications. This component can be easily integrated into various frontend frameworks and customized through a set of properties. For TypeScript projects, it also provides exported enums for type safety and autocompletion.
27
+ `pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications.
28
+
29
+ This component can be easily integrated into various frontend frameworks and customized through a set of properties.
29
30
 
30
31
  ## Local development
31
32
 
32
- Install dependencies at the root
33
- ```
33
+ Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
34
+
35
+ ```bash
34
36
  yarn
35
37
  ```
36
38
 
37
- Navigate to this folder, compile with TypeScript and build with Vite
38
- ```
39
- cd packages/components/pie-button
40
- yarn build
41
- ```
39
+ To build the `pie-button` package, run the following command:
42
40
 
43
- Compile and watch for changes (auto-compiles `dist` on save)
41
+ ```bash
42
+ yarn build --filter=pie-button
44
43
  ```
45
- yarn watch
44
+
45
+ If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
46
+
47
+ ```bash
48
+ yarn watch --filter=pie-button
49
+
50
+ # in a separate terminal tab, run
51
+ yarn dev --filter=pie-storybook
46
52
  ```
47
53
 
48
54
  ### Importing the component
49
55
 
50
56
  ```js
51
- // default
57
+ // Default – for Native JS Applications, Vue, Angular, Svelte etc.
52
58
  import { PieButton } from '@justeattakeaway/pie-button';
53
59
 
54
- // react
60
+ // React
61
+ // For React, you will need to import our React specific component build
62
+ // Which wraps the web component using the @lit-labs/react package
55
63
  import { PieButton } from '@justeattakeaway/pie-button/dist/react';
56
64
  ```
57
65
 
@@ -59,12 +67,21 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
59
67
 
60
68
  | Property | Type | Default | Description |
61
69
  |-------------|-----------|-----------------|----------------------------------------------------------------------|
62
- | size | `String` | `medium` | Size of the button, one of `buttonSizes` |
63
- | type | `String` | `submit` | Type of the button, one of `buttonTypes` |
64
- | variant | `String` | `primary` | Variant of the button, one of `buttonVariants` |
70
+ | size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
71
+ | type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`, `menu` |
72
+ | variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost` |
65
73
  | disabled | `Boolean` | `false` | If `true`, disables the button. |
66
74
  | isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container. |
67
75
 
76
+ In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
77
+
78
+ ```html
79
+ <!-- Native HTML -->
80
+ <pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
81
+
82
+ <!-- JSX -->
83
+ <PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
84
+ ```
68
85
 
69
86
  ## Events
70
87
 
@@ -73,67 +90,57 @@ This component does not use any custom event handlers. In order to add event lis
73
90
  For example, to add a click handler in various templates:
74
91
 
75
92
  ### HTML
93
+
76
94
  ```html
77
95
  <!-- Other attributes omitted for clarity -->
78
96
  <pie-button onclick="e => console.log(e)">Click me!</pie-button>
79
97
  ```
80
98
 
81
99
  ### Vue templates (using Nuxt 3)
100
+
82
101
  ```html
83
102
  <!-- Other attributes omitted for clarity -->
84
103
  <pie-button @click="handleClick">Click me!</pie-button>
85
104
  ```
86
105
 
87
106
  ### React templates (using Next 13)
107
+
88
108
  ```html
89
109
  <!-- Other attributes omitted for clarity -->
90
110
  <PieButton onClick={handleClick}>increment</PieButton>
91
111
 
92
112
  ```
93
113
 
94
- ## TypeScript Type Exports
95
-
96
- For TypeScript projects, we export one interface for the button properties: `ButtonProps`. This contains three props `buttonSizes`, `buttonTypes`, and `buttonVariants`. You can import and use these types to set the corresponding property values for the `pie-button` component. This ensures better type safety and autocompletion in your project.
97
-
98
- Here's an example of how to import and use the enums in a TypeScript project:
99
-
100
- ```typescript
101
- import { ButtonProps } from '@justeattakeaway/pie-button';
102
- ```
103
-
104
- In your markup or JSX, you can then use these variables to set the properties for the pie-button component:
105
-
106
- ```html
107
- <PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
108
- ```
109
-
110
114
  ## Testing
111
115
 
112
116
  ### Browser tests
113
117
 
114
- Run at the root of the monorepo:
115
- ```
118
+ To run the browser tests, run the following command from the root of the monorepo:
119
+
120
+ ```bash
116
121
  yarn test:browsers --filter=pie-button
117
122
  ```
118
123
 
119
124
  ### Visual tests
120
125
 
121
- Run at the root of the monorepo:
122
- ```
126
+ To run the visual regression tests, run the following command from the root of the monorepo:
127
+
128
+ ```bash
123
129
  yarn test:visual --filter=pie-button
124
130
  ```
125
131
 
126
132
  Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
127
133
 
128
- Setup via bash:
134
+ #### Setup via bash
129
135
 
130
- ```
136
+ ```bash
131
137
  export PERCY_TOKEN_PIE_BUTTON=abcde
132
138
  ```
133
139
 
134
- Setup via package.json:
140
+ #### Setup via package.json
135
141
 
136
142
  Under scripts `test:visual` replace the environment variable with the below:
137
143
 
138
- ```
144
+ ```bash
139
145
  PERCY_TOKEN_PIE_BUTTON=abcde
146
+ ```
package/dist/index.js CHANGED
@@ -1,130 +1,76 @@
1
- import { unsafeCSS as h, LitElement as f, html as v } from "lit";
1
+ import { unsafeCSS as h, LitElement as u, html as m } from "lit";
2
2
  import { property as c } from "lit/decorators.js";
3
3
  import "lit/decorators/property.js";
4
- const b = (i, o, e) => function(r, t) {
5
- const n = `#${t}`;
6
- Object.defineProperty(r, t, {
4
+ const b = (l, o, a) => function(t, r) {
5
+ const e = `#${r}`;
6
+ Object.defineProperty(t, r, {
7
7
  get() {
8
- return this[n];
8
+ return this[e];
9
9
  },
10
- set(a) {
11
- const g = this[n];
12
- o.includes(a) ? this[n] = a : (console.error(
13
- `<${i}> Invalid value "${a}" provided for property "${t}".`,
10
+ set(v) {
11
+ const p = this[e];
12
+ o.includes(v) ? this[e] = v : (console.error(
13
+ `<${l}> Invalid value "${v}" provided for property "${r}".`,
14
14
  `Must be one of: ${o.join(" | ")}.`,
15
- `Falling back to default value: "${e}"`
16
- ), this[n] = e), this.requestUpdate(t, g);
15
+ `Falling back to default value: "${a}"`
16
+ ), this[e] = a), this.requestUpdate(r, p);
17
17
  }
18
18
  });
19
- }, m = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
20
- `;
21
- var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, z = (i, o, e, r) => {
22
- for (var t = r > 1 ? void 0 : r ? x(o, e) : o, n = i.length - 1, a; n >= 0; n--)
23
- (a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
24
- return r && t && y(o, e, t), t;
19
+ }, f = `.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-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);min-block-size:var(--btn-min-block-size);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}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner);outline:none;position:relative}.o-btn:focus-visible:after{content:"";display:block;position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:var(--btn-border-radius);box-shadow:0 0 0 2px var(--dt-color-focus-outer)}.o-btn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.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){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-l) - var(--dt-color-active-01)))}.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){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-btn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=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-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)}.o-btn[size=small-expressive]{--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)}.o-btn[size=small-productive]{--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)}.o-btn[size=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)}
20
+ `, g = ["xsmall", "small-productive", "small-expressive", "medium", "large"], y = ["submit", "button", "reset", "menu"], x = ["primary", "secondary", "outline", "ghost"];
21
+ var z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (l, o, a, n) => {
22
+ for (var t = n > 1 ? void 0 : n ? k(o, a) : o, r = l.length - 1, e; r >= 0; r--)
23
+ (e = l[r]) && (t = (n ? e(o, a, t) : e(t)) || t);
24
+ return n && t && z(o, a, t), t;
25
25
  };
26
- class p extends f {
27
- constructor() {
28
- super(...arguments), this.propKeyValues = "";
29
- }
30
- // Renders a string such as 'size: small, isFullWidth: true'
31
- // as HTML such as:
32
- // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
33
- // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
34
- _renderPropKeyValues() {
35
- return this.propKeyValues.split(",").map((o) => {
36
- const [e, r] = o.split(":");
37
- return v`<p class="c-webComponentTestWrapper-label"><b>${e}</b>: <code>${r}</code></p>`;
38
- });
39
- }
40
- // eslint-disable-next-line class-methods-use-this
41
- render() {
42
- return v`
43
- <div class="c-webComponentTestWrapper">
44
- ${this._renderPropKeyValues()}
45
- <div class="c-webComponentTestWrapper-slot">
46
- <slot></slot>
47
- </div>
48
- </div>`;
49
- }
50
- }
51
- p.styles = h(m);
52
- z([
53
- c({ type: String })
54
- ], p.prototype, "propKeyValues", 2);
55
- const u = "web-component-test-wrapper";
56
- customElements.get(u) || customElements.define(u, p);
57
- const $ = `.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-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-min-block-size);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}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}.o-btn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.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){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-btn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled);border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-btn[disabled][variant=ghost]{--btn-bg-color: var(--dt-color-container-default);outline:none}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small]{--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
58
- `, w = [
59
- "xsmall",
60
- "small-expressive",
61
- "small-productive",
62
- "medium",
63
- "large"
64
- ], k = [
65
- "primary",
66
- "secondary",
67
- "outline",
68
- "ghost"
69
- ], P = [
70
- "submit",
71
- "button",
72
- "reset",
73
- "menu"
74
- ];
75
- var _ = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (i, o, e, r) => {
76
- for (var t = r > 1 ? void 0 : r ? W(o, e) : o, n = i.length - 1, a; n >= 0; n--)
77
- (a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
78
- return r && t && _(o, e, t), t;
79
- };
80
- const d = "pie-button";
81
- class l extends f {
26
+ const s = "pie-button";
27
+ class i extends u {
82
28
  constructor() {
83
29
  super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isFullWidth = !1;
84
30
  }
85
31
  render() {
86
32
  const {
87
33
  type: o,
88
- disabled: e,
89
- isFullWidth: r,
34
+ disabled: a,
35
+ isFullWidth: n,
90
36
  variant: t,
91
- size: n
37
+ size: r
92
38
  } = this;
93
- return v`
39
+ return m`
94
40
  <button
95
41
  class="o-btn"
96
42
  type=${o}
97
43
  variant=${t}
98
- size=${n}
99
- ?disabled=${e}
100
- ?isFullWidth=${r}>
44
+ size=${r}
45
+ ?disabled=${a}
46
+ ?isFullWidth=${n}>
101
47
  <slot></slot>
102
48
  </button>`;
103
49
  }
104
50
  }
105
- l.styles = h($);
106
- s([
51
+ i.styles = h(f);
52
+ d([
107
53
  c(),
108
- b(d, w, "medium")
109
- ], l.prototype, "size", 2);
110
- s([
54
+ b(s, g, "medium")
55
+ ], i.prototype, "size", 2);
56
+ d([
111
57
  c(),
112
- b(d, P, "submit")
113
- ], l.prototype, "type", 2);
114
- s([
58
+ b(s, y, "submit")
59
+ ], i.prototype, "type", 2);
60
+ d([
115
61
  c(),
116
- b(d, k, "primary")
117
- ], l.prototype, "variant", 2);
118
- s([
62
+ b(s, x, "primary")
63
+ ], i.prototype, "variant", 2);
64
+ d([
119
65
  c({ type: Boolean })
120
- ], l.prototype, "disabled", 2);
121
- s([
66
+ ], i.prototype, "disabled", 2);
67
+ d([
122
68
  c({ type: Boolean })
123
- ], l.prototype, "isFullWidth", 2);
124
- customElements.define(d, l);
69
+ ], i.prototype, "isFullWidth", 2);
70
+ customElements.define(s, i);
125
71
  export {
126
- l as PieButton,
127
- w as buttonSizes,
128
- P as buttonTypes,
129
- k as buttonVariants
72
+ i as PieButton,
73
+ g as sizes,
74
+ y as types,
75
+ x as variants
130
76
  };