@ptlm-azulejo/button 2.0.0 → 2.1.0-alpha.66
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 +114 -0
- package/README.md +21 -0
- package/dist/index.js +39 -30
- package/dist/index.umd.cjs +1 -1
- package/dist/src/index.stories.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +4 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
## 2.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
|
|
8
|
+
expose stable `data-testid` hooks.
|
|
9
|
+
|
|
10
|
+
- Each preset now names its brand's typeface in `--font-family`
|
|
11
|
+
(`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
|
|
12
|
+
`Arial, sans-serif` as the fallback stack.
|
|
13
|
+
- Components apply that typeface on their root, so they follow the active brand
|
|
14
|
+
instead of inheriting the host page's font. Opt out per component by setting
|
|
15
|
+
`--font-family: inherit` on it.
|
|
16
|
+
- `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
|
|
17
|
+
(400), semi-bold (600) and bold (700) weights.
|
|
18
|
+
- Every component now exposes `data-testid` on its root and on meaningful
|
|
19
|
+
sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
|
|
20
|
+
`datepicker` / `datepicker-clear`, `segmented-control` /
|
|
21
|
+
`segmented-control-segment`), so tests can target them without depending on
|
|
22
|
+
CSS class names.
|
|
23
|
+
|
|
24
|
+
As with upstream Mozaic, the presets **name** the typeface but ship no
|
|
25
|
+
`@font-face` and no font binaries — loading the files stays the app's job, so you
|
|
26
|
+
keep control of hosting, subsetting and preload. Until you load them the fallback
|
|
27
|
+
stack renders and nothing breaks. Install the font package matching your brand
|
|
28
|
+
alongside the preset:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
# Leroy Merlin
|
|
32
|
+
yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
33
|
+
# Adeo
|
|
34
|
+
yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
See the Fonts section of `packages/themes/README.md` for the full recipe.
|
|
38
|
+
|
|
39
|
+
## 2.0.0
|
|
40
|
+
|
|
41
|
+
### Major Changes
|
|
42
|
+
|
|
43
|
+
- 53000f7: Add Mozaic-aligned multi-brand theming support.
|
|
44
|
+
|
|
45
|
+
- New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
|
|
46
|
+
and brand presets selected by a root class (`presets/leroy-merlin.css`,
|
|
47
|
+
`presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
|
|
48
|
+
light/dark.
|
|
49
|
+
- `AzButton` now consumes theme tokens through utilities mapped in
|
|
50
|
+
`@theme inline`, working across both brands and in light/dark.
|
|
51
|
+
|
|
52
|
+
**BREAKING:** components no longer bake brand colors. The consumer must now
|
|
53
|
+
import `@ptlm-azulejo/themes/base.css` + a preset and apply the
|
|
54
|
+
`.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
|
|
55
|
+
element; otherwise components render uncolored. See the migration notes in
|
|
56
|
+
`packages/themes/README.md`.
|
|
57
|
+
|
|
58
|
+
All notable changes to this project will be documented in this file.
|
|
59
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
60
|
+
|
|
61
|
+
## [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)
|
|
62
|
+
|
|
63
|
+
**Note:** Version bump only for package @ptlm-azulejo/button
|
|
64
|
+
|
|
65
|
+
## [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)
|
|
66
|
+
|
|
67
|
+
**Note:** Version bump only for package @ptlm-azulejo/button
|
|
68
|
+
|
|
69
|
+
# 1.3.0 (2026-03-12)
|
|
70
|
+
|
|
71
|
+
### Bug Fixes
|
|
72
|
+
|
|
73
|
+
- [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
|
|
74
|
+
- revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
|
|
75
|
+
|
|
76
|
+
### Features
|
|
77
|
+
|
|
78
|
+
- [US-002] - Align Button with mozaic-vue reference ([def8c29](https://github.com/aplemes/library-components/commit/def8c291c8eb9245181f667bcb40a0bacce2a63a))
|
|
79
|
+
- [US-002] - Pacote de design tokens (@leroy-merlin-pt/tokens) ([2793d72](https://github.com/aplemes/library-components/commit/2793d72c8205c84ee428699b9d0679a6b791babb))
|
|
80
|
+
- [US-003] - Migrar componente Button do Mozaic (@leroy-merlin-pt/button) ([e5fb1c5](https://github.com/aplemes/library-components/commit/e5fb1c5a66560920b8c64014e4e08ca147beb794))
|
|
81
|
+
- [US-004] - Componente Input (@leroy-merlin-pt/input) ([a2a7894](https://github.com/aplemes/library-components/commit/a2a7894b057cab6b350a0b7e45cef7eea86e7a24))
|
|
82
|
+
- add full documentation, unified Storybook and component generator ([02ec178](https://github.com/aplemes/library-components/commit/02ec178e5c5ce4f1cf75efdcbabe33d7fd9d20f9))
|
|
83
|
+
- add README docs to all packages and align Button, IconButton, Input components ([a4df103](https://github.com/aplemes/library-components/commit/a4df103eef20c4c76f532125ae287b93223e1be4))
|
|
84
|
+
- migrate org to [@ptlm-azulejo](https://github.com/azulejo-kit) and add Az component prefix ([c31ba38](https://github.com/aplemes/library-components/commit/c31ba38c12562e2f662b07444eca0fba1a4fe8bc))
|
|
85
|
+
- test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
|
|
86
|
+
- update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
|
|
87
|
+
|
|
88
|
+
# [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)
|
|
89
|
+
|
|
90
|
+
### Features
|
|
91
|
+
|
|
92
|
+
- update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
|
|
93
|
+
|
|
94
|
+
## [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)
|
|
95
|
+
|
|
96
|
+
**Note:** Version bump only for package @leroy-merlin-pt/button
|
|
97
|
+
|
|
98
|
+
## [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)
|
|
99
|
+
|
|
100
|
+
### Bug Fixes
|
|
101
|
+
|
|
102
|
+
- revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
|
|
103
|
+
|
|
104
|
+
# [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)
|
|
105
|
+
|
|
106
|
+
### Features
|
|
107
|
+
|
|
108
|
+
- test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
|
|
109
|
+
|
|
110
|
+
## [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)
|
|
111
|
+
|
|
112
|
+
### Bug Fixes
|
|
113
|
+
|
|
114
|
+
- [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
|
package/README.md
CHANGED
|
@@ -29,6 +29,27 @@ import '@ptlm-azulejo/button/style.css'
|
|
|
29
29
|
> See the [themes package](../themes/README.md) for brand switching, dark mode,
|
|
30
30
|
> and custom brands.
|
|
31
31
|
|
|
32
|
+
The button also sets its own `font-family` from the preset's `--font-family`, so
|
|
33
|
+
its label follows the active brand (LeroyMerlin / Roboto) rather than inheriting
|
|
34
|
+
the page font. The preset only *names* the typeface, so you must also install the
|
|
35
|
+
matching font package — without it `font-sans` falls back to a generic sans-serif:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
yarn add @ptlm-azulejo/fonts-leroy-merlin # or @ptlm-azulejo/fonts-adeo for .preset-adeo
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
import '@ptlm-azulejo/fonts-leroy-merlin' // or '@ptlm-azulejo/fonts-adeo'
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
[Loading the font files is your app's job](../themes/README.md#fonts), as with
|
|
46
|
+
upstream Mozaic; until then the fallback stack renders. To hand the button back to
|
|
47
|
+
your page's font:
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
.preset-lm .btn { font-family: inherit; }
|
|
51
|
+
```
|
|
52
|
+
|
|
32
53
|
## Props
|
|
33
54
|
|
|
34
55
|
| Name | Type | Default | Description |
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
import { defineComponent as c, computed as b, openBlock as o, createElementBlock as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as c, computed as b, openBlock as o, createElementBlock as i, normalizeClass as u, renderSlot as a, createCommentVNode as d, createElementVNode as r, normalizeStyle as y, createTextVNode as m } from "vue";
|
|
2
|
+
const p = ["disabled", "type", "aria-busy"], g = {
|
|
3
3
|
key: 0,
|
|
4
|
+
"data-testid": "button-icon",
|
|
4
5
|
class: "btn__icon"
|
|
5
6
|
}, $ = {
|
|
6
7
|
key: 1,
|
|
8
|
+
"data-testid": "button-loader",
|
|
7
9
|
class: "btn__loader",
|
|
8
10
|
"aria-hidden": "true"
|
|
9
11
|
}, f = {
|
|
10
12
|
key: 2,
|
|
13
|
+
"data-testid": "button-icon",
|
|
11
14
|
class: "btn__icon"
|
|
12
15
|
}, h = {
|
|
13
16
|
key: 4,
|
|
17
|
+
"data-testid": "button-icon",
|
|
14
18
|
class: "btn__icon"
|
|
15
19
|
}, L = /* @__PURE__ */ c({
|
|
16
20
|
__name: "index",
|
|
@@ -24,41 +28,46 @@ const g = ["disabled", "type", "aria-busy"], p = {
|
|
|
24
28
|
type: { default: "button" },
|
|
25
29
|
isLoading: { type: Boolean }
|
|
26
30
|
},
|
|
27
|
-
setup(
|
|
28
|
-
const
|
|
29
|
-
[`btn--${
|
|
30
|
-
[`btn--${
|
|
31
|
-
"btn--ghost":
|
|
32
|
-
"btn--outlined":
|
|
33
|
-
"btn--icon-only":
|
|
31
|
+
setup(t) {
|
|
32
|
+
const n = t, l = b(() => ({
|
|
33
|
+
[`btn--${n.appearance}`]: n.appearance && n.appearance !== "standard",
|
|
34
|
+
[`btn--${n.size}`]: n.size && n.size !== "m",
|
|
35
|
+
"btn--ghost": n.ghost,
|
|
36
|
+
"btn--outlined": n.outlined,
|
|
37
|
+
"btn--icon-only": n.iconPosition === "only"
|
|
34
38
|
}));
|
|
35
|
-
return (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
return (e, s) => (o(), i("button", {
|
|
40
|
+
"data-testid": "button",
|
|
41
|
+
class: u(["btn", l.value]),
|
|
42
|
+
disabled: t.disabled,
|
|
43
|
+
type: t.type,
|
|
44
|
+
"aria-busy": t.isLoading || void 0
|
|
40
45
|
}, [
|
|
41
|
-
|
|
42
|
-
a(
|
|
43
|
-
])) :
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
])) : (
|
|
46
|
+
e.$slots.icon && t.iconPosition === "left" && !t.isLoading ? (o(), i("span", g, [
|
|
47
|
+
a(e.$slots, "icon")
|
|
48
|
+
])) : d("", !0),
|
|
49
|
+
t.isLoading ? (o(), i("span", $, [...s[0] || (s[0] = [
|
|
50
|
+
r("span", {
|
|
51
|
+
"data-testid": "button-spinner",
|
|
52
|
+
class: "btn__spinner"
|
|
53
|
+
}, null, -1)
|
|
54
|
+
])])) : d("", !0),
|
|
55
|
+
e.$slots.icon && t.iconPosition === "only" && !t.isLoading ? (o(), i("span", f, [
|
|
56
|
+
a(e.$slots, "icon")
|
|
57
|
+
])) : (o(), i("span", {
|
|
50
58
|
key: 3,
|
|
59
|
+
"data-testid": "button-label",
|
|
51
60
|
class: "btn__label",
|
|
52
|
-
style: y({ visibility:
|
|
61
|
+
style: y({ visibility: t.isLoading ? "hidden" : "visible" })
|
|
53
62
|
}, [
|
|
54
|
-
a(
|
|
55
|
-
|
|
63
|
+
a(e.$slots, "default", {}, () => [
|
|
64
|
+
s[1] || (s[1] = m("Button Label", -1))
|
|
56
65
|
])
|
|
57
66
|
], 4)),
|
|
58
|
-
|
|
59
|
-
a(
|
|
60
|
-
])) :
|
|
61
|
-
], 10,
|
|
67
|
+
e.$slots.icon && t.iconPosition === "right" && !t.isLoading ? (o(), i("span", h, [
|
|
68
|
+
a(e.$slots, "icon")
|
|
69
|
+
])) : d("", !0)
|
|
70
|
+
], 10, p));
|
|
62
71
|
}
|
|
63
72
|
});
|
|
64
73
|
export {
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,
|
|
1
|
+
(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.button={},o.Vue))})(this,function(o,t){"use strict";const a=["disabled","type","aria-busy"],l={key:0,"data-testid":"button-icon",class:"btn__icon"},d={key:1,"data-testid":"button-loader",class:"btn__loader","aria-hidden":"true"},c={key:2,"data-testid":"button-icon",class:"btn__icon"},r={key:4,"data-testid":"button-icon",class:"btn__icon"},b=t.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(e){const n=e,y=t.computed(()=>({[`btn--${n.appearance}`]:n.appearance&&n.appearance!=="standard",[`btn--${n.size}`]:n.size&&n.size!=="m","btn--ghost":n.ghost,"btn--outlined":n.outlined,"btn--icon-only":n.iconPosition==="only"}));return(i,s)=>(t.openBlock(),t.createElementBlock("button",{"data-testid":"button",class:t.normalizeClass(["btn",y.value]),disabled:e.disabled,type:e.type,"aria-busy":e.isLoading||void 0},[i.$slots.icon&&e.iconPosition==="left"&&!e.isLoading?(t.openBlock(),t.createElementBlock("span",l,[t.renderSlot(i.$slots,"icon")])):t.createCommentVNode("",!0),e.isLoading?(t.openBlock(),t.createElementBlock("span",d,[...s[0]||(s[0]=[t.createElementVNode("span",{"data-testid":"button-spinner",class:"btn__spinner"},null,-1)])])):t.createCommentVNode("",!0),i.$slots.icon&&e.iconPosition==="only"&&!e.isLoading?(t.openBlock(),t.createElementBlock("span",c,[t.renderSlot(i.$slots,"icon")])):(t.openBlock(),t.createElementBlock("span",{key:3,"data-testid":"button-label",class:"btn__label",style:t.normalizeStyle({visibility:e.isLoading?"hidden":"visible"})},[t.renderSlot(i.$slots,"default",{},()=>[s[1]||(s[1]=t.createTextVNode("Button Label",-1))])],4)),i.$slots.icon&&e.iconPosition==="right"&&!e.isLoading?(t.openBlock(),t.createElementBlock("span",r,[t.renderSlot(i.$slots,"icon")])):t.createCommentVNode("",!0)],10,a))}});o.AzButton=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -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,
|
|
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,CAoI7B,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-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-
|
|
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-family:var(--font-family,ui-sans-serif, system-ui, sans-serif);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-semi-bold);font-weight:var(--font-weight-semi-bold);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": "2.0.
|
|
3
|
+
"version": "2.1.0-alpha.66",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.umd.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -27,11 +27,13 @@
|
|
|
27
27
|
"dist/*"
|
|
28
28
|
],
|
|
29
29
|
"devDependencies": {
|
|
30
|
+
"@ptlm-azulejo/fonts-adeo": "*",
|
|
31
|
+
"@ptlm-azulejo/fonts-leroy-merlin": "*",
|
|
32
|
+
"@ptlm-azulejo/themes": "*",
|
|
30
33
|
"@storybook/addon-essentials": "^7.0.0",
|
|
31
34
|
"@storybook/addon-interactions": "^7.0.0",
|
|
32
35
|
"@storybook/vue3": "^7.0.0",
|
|
33
36
|
"@storybook/vue3-vite": "^7.0.0",
|
|
34
|
-
"@ptlm-azulejo/themes": "*",
|
|
35
37
|
"@tailwindcss/vite": "^4.0.0",
|
|
36
38
|
"storybook": "^7.0.0",
|
|
37
39
|
"tailwindcss": "^4.0.0",
|