@ptlm-azulejo/button 1.3.2 → 2.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +78 -0
- package/README.md +21 -2
- package/dist/index.js +13 -15
- package/dist/index.umd.cjs +1 -1
- package/dist/src/index.stories.d.ts +6 -7
- package/dist/src/index.stories.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
## 2.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 53000f7: Add Mozaic-aligned multi-brand theming support.
|
|
8
|
+
|
|
9
|
+
- New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
|
|
10
|
+
and brand presets selected by a root class (`presets/leroy-merlin.css`,
|
|
11
|
+
`presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
|
|
12
|
+
light/dark.
|
|
13
|
+
- `AzButton` now consumes theme tokens through utilities mapped in
|
|
14
|
+
`@theme inline`, working across both brands and in light/dark.
|
|
15
|
+
|
|
16
|
+
**BREAKING:** components no longer bake brand colors. The consumer must now
|
|
17
|
+
import `@ptlm-azulejo/themes/base.css` + a preset and apply the
|
|
18
|
+
`.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
|
|
19
|
+
element; otherwise components render uncolored. See the migration notes in
|
|
20
|
+
`packages/themes/README.md`.
|
|
21
|
+
|
|
22
|
+
All notable changes to this project will be documented in this file.
|
|
23
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
24
|
+
|
|
25
|
+
## [1.3.2](https://github.com/aplemes/library-components/compare/@ptlm-azulejo/button@1.3.1...@ptlm-azulejo/button@1.3.2) (2026-03-12)
|
|
26
|
+
|
|
27
|
+
**Note:** Version bump only for package @ptlm-azulejo/button
|
|
28
|
+
|
|
29
|
+
## [1.3.1](https://github.com/aplemes/library-components/compare/@ptlm-azulejo/button@1.3.0...@ptlm-azulejo/button@1.3.1) (2026-03-12)
|
|
30
|
+
|
|
31
|
+
**Note:** Version bump only for package @ptlm-azulejo/button
|
|
32
|
+
|
|
33
|
+
# 1.3.0 (2026-03-12)
|
|
34
|
+
|
|
35
|
+
### Bug Fixes
|
|
36
|
+
|
|
37
|
+
- [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
|
|
38
|
+
- revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
|
|
39
|
+
|
|
40
|
+
### Features
|
|
41
|
+
|
|
42
|
+
- [US-002] - Align Button with mozaic-vue reference ([def8c29](https://github.com/aplemes/library-components/commit/def8c291c8eb9245181f667bcb40a0bacce2a63a))
|
|
43
|
+
- [US-002] - Pacote de design tokens (@leroy-merlin-pt/tokens) ([2793d72](https://github.com/aplemes/library-components/commit/2793d72c8205c84ee428699b9d0679a6b791babb))
|
|
44
|
+
- [US-003] - Migrar componente Button do Mozaic (@leroy-merlin-pt/button) ([e5fb1c5](https://github.com/aplemes/library-components/commit/e5fb1c5a66560920b8c64014e4e08ca147beb794))
|
|
45
|
+
- [US-004] - Componente Input (@leroy-merlin-pt/input) ([a2a7894](https://github.com/aplemes/library-components/commit/a2a7894b057cab6b350a0b7e45cef7eea86e7a24))
|
|
46
|
+
- add full documentation, unified Storybook and component generator ([02ec178](https://github.com/aplemes/library-components/commit/02ec178e5c5ce4f1cf75efdcbabe33d7fd9d20f9))
|
|
47
|
+
- add README docs to all packages and align Button, IconButton, Input components ([a4df103](https://github.com/aplemes/library-components/commit/a4df103eef20c4c76f532125ae287b93223e1be4))
|
|
48
|
+
- migrate org to [@ptlm-azulejo](https://github.com/azulejo-kit) and add Az component prefix ([c31ba38](https://github.com/aplemes/library-components/commit/c31ba38c12562e2f662b07444eca0fba1a4fe8bc))
|
|
49
|
+
- test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
|
|
50
|
+
- update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
|
|
51
|
+
|
|
52
|
+
# [1.2.0](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.3...@leroy-merlin-pt/button@1.2.0) (2026-03-12)
|
|
53
|
+
|
|
54
|
+
### Features
|
|
55
|
+
|
|
56
|
+
- update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
|
|
57
|
+
|
|
58
|
+
## [1.1.2](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.1...@leroy-merlin-pt/button@1.1.2) (2026-03-11)
|
|
59
|
+
|
|
60
|
+
**Note:** Version bump only for package @leroy-merlin-pt/button
|
|
61
|
+
|
|
62
|
+
## [1.1.1](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.0...@leroy-merlin-pt/button@1.1.1) (2026-03-11)
|
|
63
|
+
|
|
64
|
+
### Bug Fixes
|
|
65
|
+
|
|
66
|
+
- revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
|
|
67
|
+
|
|
68
|
+
# [1.1.0](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.0.3...@leroy-merlin-pt/button@1.1.0) (2026-03-11)
|
|
69
|
+
|
|
70
|
+
### Features
|
|
71
|
+
|
|
72
|
+
- test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
|
|
73
|
+
|
|
74
|
+
## [1.0.3](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.0.2...@leroy-merlin-pt/button@1.0.3) (2026-03-11)
|
|
75
|
+
|
|
76
|
+
### Bug Fixes
|
|
77
|
+
|
|
78
|
+
- [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
|
package/README.md
CHANGED
|
@@ -5,11 +5,30 @@ Buttons are key interactive elements used to perform actions and can be used as
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @ptlm-azulejo/button
|
|
8
|
+
npm install @ptlm-azulejo/button @ptlm-azulejo/themes
|
|
9
9
|
# or
|
|
10
|
-
yarn add @ptlm-azulejo/button
|
|
10
|
+
yarn add @ptlm-azulejo/button @ptlm-azulejo/themes
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
+
## Styles & theming
|
|
14
|
+
|
|
15
|
+
The button reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
|
|
16
|
+
brand preset (it bundles the base tokens) and the component styles, then set the
|
|
17
|
+
brand class on the root element:
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
|
|
21
|
+
import '@ptlm-azulejo/button/style.css'
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<html class="preset-lm" data-theme="dark">
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
> Without a preset **and** the `.preset-*` class, the button renders uncolored.
|
|
29
|
+
> See the [themes package](../themes/README.md) for brand switching, dark mode,
|
|
30
|
+
> and custom brands.
|
|
31
|
+
|
|
13
32
|
## Props
|
|
14
33
|
|
|
15
34
|
| Name | Type | Default | Description |
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { defineComponent as c, computed as b, openBlock as o, createElementBlock as s, normalizeClass as r, renderSlot as a, createCommentVNode as l, createElementVNode as u, normalizeStyle as y, createTextVNode as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as c, computed as b, openBlock as o, createElementBlock as s, normalizeClass as r, renderSlot as a, createCommentVNode as l, createElementVNode as u, normalizeStyle as y, createTextVNode as m } from "vue";
|
|
2
|
+
const g = ["disabled", "type", "aria-busy"], p = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "btn__icon"
|
|
5
5
|
}, $ = {
|
|
6
6
|
key: 1,
|
|
7
|
-
class: "
|
|
8
|
-
|
|
7
|
+
class: "btn__loader",
|
|
8
|
+
"aria-hidden": "true"
|
|
9
9
|
}, f = {
|
|
10
10
|
key: 2,
|
|
11
11
|
class: "btn__icon"
|
|
12
12
|
}, h = {
|
|
13
13
|
key: 4,
|
|
14
14
|
class: "btn__icon"
|
|
15
|
-
},
|
|
15
|
+
}, L = /* @__PURE__ */ c({
|
|
16
16
|
__name: "index",
|
|
17
17
|
props: {
|
|
18
18
|
appearance: { default: "standard" },
|
|
@@ -35,18 +35,16 @@ const m = ["disabled", "type"], g = {
|
|
|
35
35
|
return (t, i) => (o(), s("button", {
|
|
36
36
|
class: r(["btn", d.value]),
|
|
37
37
|
disabled: n.disabled,
|
|
38
|
-
type: n.type
|
|
38
|
+
type: n.type,
|
|
39
|
+
"aria-busy": n.isLoading || void 0
|
|
39
40
|
}, [
|
|
40
|
-
t.$slots.icon && n.iconPosition === "left" && !n.isLoading ? (o(), s("span",
|
|
41
|
+
t.$slots.icon && n.iconPosition === "left" && !n.isLoading ? (o(), s("span", p, [
|
|
41
42
|
a(t.$slots, "icon")
|
|
42
43
|
])) : l("", !0),
|
|
43
44
|
n.isLoading ? (o(), s("span", $, [...i[0] || (i[0] = [
|
|
44
|
-
u("span", {
|
|
45
|
-
class: "btn__spinner",
|
|
46
|
-
"aria-hidden": "true"
|
|
47
|
-
}, null, -1)
|
|
45
|
+
u("span", { class: "btn__spinner" }, null, -1)
|
|
48
46
|
])])) : l("", !0),
|
|
49
|
-
t.$slots.icon && n.iconPosition === "only" ? (o(), s("span", f, [
|
|
47
|
+
t.$slots.icon && n.iconPosition === "only" && !n.isLoading ? (o(), s("span", f, [
|
|
50
48
|
a(t.$slots, "icon")
|
|
51
49
|
])) : (o(), s("span", {
|
|
52
50
|
key: 3,
|
|
@@ -54,15 +52,15 @@ const m = ["disabled", "type"], g = {
|
|
|
54
52
|
style: y({ visibility: n.isLoading ? "hidden" : "visible" })
|
|
55
53
|
}, [
|
|
56
54
|
a(t.$slots, "default", {}, () => [
|
|
57
|
-
i[1] || (i[1] =
|
|
55
|
+
i[1] || (i[1] = m("Button Label", -1))
|
|
58
56
|
])
|
|
59
57
|
], 4)),
|
|
60
58
|
t.$slots.icon && n.iconPosition === "right" && !n.isLoading ? (o(), s("span", h, [
|
|
61
59
|
a(t.$slots, "icon")
|
|
62
60
|
])) : l("", !0)
|
|
63
|
-
], 10,
|
|
61
|
+
], 10, g));
|
|
64
62
|
}
|
|
65
63
|
});
|
|
66
64
|
export {
|
|
67
|
-
|
|
65
|
+
L as AzButton
|
|
68
66
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.button={},o.Vue))})(this,function(o,e){"use strict";const l=["disabled","type"],a={key:0,class:"btn__icon"},d={key:1,class:"
|
|
1
|
+
(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.button={},o.Vue))})(this,function(o,e){"use strict";const l=["disabled","type","aria-busy"],a={key:0,class:"btn__icon"},d={key:1,class:"btn__loader","aria-hidden":"true"},c={key:2,class:"btn__icon"},r={key:4,class:"btn__icon"},b=e.defineComponent({__name:"index",props:{appearance:{default:"standard"},size:{default:"m"},disabled:{type:Boolean},ghost:{type:Boolean},outlined:{type:Boolean},iconPosition:{},type:{default:"button"},isLoading:{type:Boolean}},setup(n){const t=n,y=e.computed(()=>({[`btn--${t.appearance}`]:t.appearance&&t.appearance!=="standard",[`btn--${t.size}`]:t.size&&t.size!=="m","btn--ghost":t.ghost,"btn--outlined":t.outlined,"btn--icon-only":t.iconPosition==="only"}));return(i,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["btn",y.value]),disabled:n.disabled,type:n.type,"aria-busy":n.isLoading||void 0},[i.$slots.icon&&n.iconPosition==="left"&&!n.isLoading?(e.openBlock(),e.createElementBlock("span",a,[e.renderSlot(i.$slots,"icon")])):e.createCommentVNode("",!0),n.isLoading?(e.openBlock(),e.createElementBlock("span",d,[...s[0]||(s[0]=[e.createElementVNode("span",{class:"btn__spinner"},null,-1)])])):e.createCommentVNode("",!0),i.$slots.icon&&n.iconPosition==="only"&&!n.isLoading?(e.openBlock(),e.createElementBlock("span",c,[e.renderSlot(i.$slots,"icon")])):(e.openBlock(),e.createElementBlock("span",{key:3,class:"btn__label",style:e.normalizeStyle({visibility:n.isLoading?"hidden":"visible"})},[e.renderSlot(i.$slots,"default",{},()=>[s[1]||(s[1]=e.createTextVNode("Button Label",-1))])],4)),i.$slots.icon&&n.iconPosition==="right"&&!n.isLoading?(e.openBlock(),e.createElementBlock("span",r,[e.renderSlot(i.$slots,"icon")])):e.createCommentVNode("",!0)],10,l))}});o.AzButton=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -4,16 +4,15 @@ import { default as Button } from './index.vue';
|
|
|
4
4
|
declare const meta: Meta<typeof Button>;
|
|
5
5
|
export default meta;
|
|
6
6
|
type Story = StoryObj<typeof meta>;
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const Secondary: Story;
|
|
9
|
-
export declare const Ghost: Story;
|
|
10
|
-
export declare const Disabled: Story;
|
|
11
|
-
export declare const Small: Story;
|
|
12
|
-
export declare const Large: Story;
|
|
7
|
+
export declare const Standard: Story;
|
|
13
8
|
export declare const Accent: Story;
|
|
14
9
|
export declare const Danger: Story;
|
|
15
10
|
export declare const Inverse: Story;
|
|
16
|
-
export declare const
|
|
11
|
+
export declare const Ghost: Story;
|
|
17
12
|
export declare const Outlined: Story;
|
|
13
|
+
export declare const Small: Story;
|
|
14
|
+
export declare const Large: Story;
|
|
15
|
+
export declare const Loading: Story;
|
|
16
|
+
export declare const Disabled: Story;
|
|
18
17
|
export declare const Submit: Story;
|
|
19
18
|
//# sourceMappingURL=index.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA+
|
|
1
|
+
{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA+G7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-duration:initial}}}.btn{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-l
|
|
1
|
+
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-duration:initial}}}.btn{min-height:calc(var(--spacing,.25rem) * 12);cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--border-radius-l);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 6);font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:var(--leading-tight,1.25);line-height:var(--leading-tight,1.25);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;background-color:var(--color-background-accent-inverse);color:var(--color-text-on-accent-inverse);border-width:1px;border-color:#0000;padding-block:.6875rem;transition-duration:.2s;display:inline-flex;position:relative}@media (hover:hover){.btn:enabled:hover{background-color:var(--color-background-accent-inverse)}@supports (color:color-mix(in lab,red,red)){.btn:enabled:hover{background-color:color-mix(in srgb,var(--color-background-accent-inverse) 85%,#000)}}}.btn:focus-visible{outline:var(--border-m) solid var(--color-text-accent);outline-offset:var(--border-m)}.btn:disabled{background-color:var(--color-background-secondary);color:var(--color-text-tertiary);cursor:not-allowed;border-color:#0000}.btn--s{min-height:calc(var(--spacing,.25rem) * 8);padding-inline:calc(var(--spacing,.25rem) * 4);font-size:var(--font-size-04);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));padding-block:.3125rem}.btn--l{min-height:calc(var(--spacing,.25rem) * 14);padding-inline:calc(var(--spacing,.25rem) * 6);font-size:var(--font-size-06);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding-block:.875rem}.btn--accent{background-color:var(--color-brand);color:var(--color-white,#fff);border-color:#0000}@media (hover:hover){.btn--accent:enabled:hover{background-color:var(--color-brand)}@supports (color:color-mix(in lab,red,red)){.btn--accent:enabled:hover{background-color:color-mix(in srgb,var(--color-brand) 85%,#000)}}}.btn--danger{background-color:var(--color-danger-500);color:var(--color-white,#fff);border-color:#0000}@media (hover:hover){.btn--danger:enabled:hover{background-color:var(--color-danger-600)}}.btn--inverse{border-color:var(--color-border-primary);background-color:var(--color-background-secondary);color:var(--color-text-primary)}@media (hover:hover){.btn--inverse:enabled:hover{background-color:var(--color-background-primary)}}.btn--ghost{color:var(--color-text-accent);background-color:#0000;border-color:#0000}@media (hover:hover){.btn--ghost:enabled:hover{background-color:var(--color-background-accent)}}.btn--outlined{border-color:var(--color-border-primary);color:var(--color-text-accent);background-color:#0000}@media (hover:hover){.btn--outlined:enabled:hover{background-color:var(--color-background-accent)}}.btn--icon-only{padding-inline:calc(var(--spacing,.25rem) * 2)}.btn__icon{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn__loader{inset:calc(var(--spacing,.25rem) * 0);justify-content:center;align-items:center;display:flex;position:absolute}.btn__spinner{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);border-style:var(--tw-border-style);border-width:2px;border-color:#0000 currentColor currentColor;border-radius:3.40282e38px;animation:.6s linear infinite az-btn-spin;display:block}.btn__label{display:inline-block}@keyframes az-btn-spin{to{transform:rotate(360deg)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ptlm-azulejo/button",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.umd.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"dist/*"
|
|
28
28
|
],
|
|
29
29
|
"devDependencies": {
|
|
30
|
+
"@ptlm-azulejo/themes": "*",
|
|
30
31
|
"@storybook/addon-essentials": "^7.0.0",
|
|
31
32
|
"@storybook/addon-interactions": "^7.0.0",
|
|
32
33
|
"@storybook/vue3": "^7.0.0",
|