@ptlm-azulejo/button 2.1.1 → 2.1.2-alpha.121

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 (3) hide show
  1. package/CHANGELOG.md +144 -0
  2. package/README.md +25 -23
  3. package/package.json +1 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,144 @@
1
+ # Change Log
2
+
3
+ ## 2.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - fbbee70: Formatting-only release. The repository adopted Prettier as its single
8
+ formatting authority, and every shipped file was reformatted in one pass: the
9
+ theme and font stylesheets (published verbatim, so their bytes change), each
10
+ package's README, and the component sources behind `dist/`.
11
+
12
+ No public API, prop, slot, event, CSS variable, class name or rendered output
13
+ changed. Upgrading requires nothing, and skipping this version costs nothing.
14
+
15
+ One internal cleanup rides along in `AzSegmentedControl`: a dead `null`
16
+ initializer and the unreachable branch guarding it were removed from the
17
+ keyboard handler. Arrow / Home / End navigation behaves exactly as before.
18
+
19
+ ## 2.1.1
20
+
21
+ ### Patch Changes
22
+
23
+ - e5341cd: Documentation. Every package README now spells out both brands end to end instead
24
+ of showing one snippet with an "or" comment: which preset stylesheet to import,
25
+ which `.preset-*` class goes on `<html>` to select the theme at runtime,
26
+ `data-theme` for light/dark, and which font package the project needs (Leroy
27
+ Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
28
+
29
+ No component behaviour, prop or token changed. The patch bump exists because npm
30
+ ships `README.md` inside the tarball and renders it as the package page, so the
31
+ corrected instructions only reach consumers on a release.
32
+
33
+ ## 2.1.0
34
+
35
+ ### Minor Changes
36
+
37
+ - eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
38
+ expose stable `data-testid` hooks.
39
+
40
+ - Each preset now names its brand's typeface in `--font-family`
41
+ (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
42
+ `Arial, sans-serif` as the fallback stack.
43
+ - Components apply that typeface on their root, so they follow the active brand
44
+ instead of inheriting the host page's font. Opt out per component by setting
45
+ `--font-family: inherit` on it.
46
+ - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
47
+ (400), semi-bold (600) and bold (700) weights.
48
+ - Every component now exposes `data-testid` on its root and on meaningful
49
+ sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
50
+ `datepicker` / `datepicker-clear`, `segmented-control` /
51
+ `segmented-control-segment`), so tests can target them without depending on
52
+ CSS class names.
53
+
54
+ As with upstream Mozaic, the presets **name** the typeface but ship no
55
+ `@font-face` and no font binaries — loading the files stays the app's job, so you
56
+ keep control of hosting, subsetting and preload. Until you load them the fallback
57
+ stack renders and nothing breaks. Install the font package matching your brand
58
+ alongside the preset:
59
+
60
+ ```bash
61
+ # Leroy Merlin
62
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
63
+ # Adeo
64
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
65
+ ```
66
+
67
+ See the Fonts section of `packages/themes/README.md` for the full recipe.
68
+
69
+ ## 2.0.0
70
+
71
+ ### Major Changes
72
+
73
+ - 53000f7: Add Mozaic-aligned multi-brand theming support.
74
+
75
+ - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
76
+ and brand presets selected by a root class (`presets/leroy-merlin.css`,
77
+ `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
78
+ light/dark.
79
+ - `AzButton` now consumes theme tokens through utilities mapped in
80
+ `@theme inline`, working across both brands and in light/dark.
81
+
82
+ **BREAKING:** components no longer bake brand colors. The consumer must now
83
+ import `@ptlm-azulejo/themes/base.css` + a preset and apply the
84
+ `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
85
+ element; otherwise components render uncolored. See the migration notes in
86
+ `packages/themes/README.md`.
87
+
88
+ All notable changes to this project will be documented in this file.
89
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
90
+
91
+ ## [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)
92
+
93
+ **Note:** Version bump only for package @ptlm-azulejo/button
94
+
95
+ ## [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)
96
+
97
+ **Note:** Version bump only for package @ptlm-azulejo/button
98
+
99
+ # 1.3.0 (2026-03-12)
100
+
101
+ ### Bug Fixes
102
+
103
+ - [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
104
+ - revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
105
+
106
+ ### Features
107
+
108
+ - [US-002] - Align Button with mozaic-vue reference ([def8c29](https://github.com/aplemes/library-components/commit/def8c291c8eb9245181f667bcb40a0bacce2a63a))
109
+ - [US-002] - Pacote de design tokens (@leroy-merlin-pt/tokens) ([2793d72](https://github.com/aplemes/library-components/commit/2793d72c8205c84ee428699b9d0679a6b791babb))
110
+ - [US-003] - Migrar componente Button do Mozaic (@leroy-merlin-pt/button) ([e5fb1c5](https://github.com/aplemes/library-components/commit/e5fb1c5a66560920b8c64014e4e08ca147beb794))
111
+ - [US-004] - Componente Input (@leroy-merlin-pt/input) ([a2a7894](https://github.com/aplemes/library-components/commit/a2a7894b057cab6b350a0b7e45cef7eea86e7a24))
112
+ - add full documentation, unified Storybook and component generator ([02ec178](https://github.com/aplemes/library-components/commit/02ec178e5c5ce4f1cf75efdcbabe33d7fd9d20f9))
113
+ - add README docs to all packages and align Button, IconButton, Input components ([a4df103](https://github.com/aplemes/library-components/commit/a4df103eef20c4c76f532125ae287b93223e1be4))
114
+ - migrate org to [@ptlm-azulejo](https://github.com/azulejo-kit) and add Az component prefix ([c31ba38](https://github.com/aplemes/library-components/commit/c31ba38c12562e2f662b07444eca0fba1a4fe8bc))
115
+ - test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
116
+ - update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
117
+
118
+ # [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)
119
+
120
+ ### Features
121
+
122
+ - update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
123
+
124
+ ## [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)
125
+
126
+ **Note:** Version bump only for package @leroy-merlin-pt/button
127
+
128
+ ## [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)
129
+
130
+ ### Bug Fixes
131
+
132
+ - revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
133
+
134
+ # [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)
135
+
136
+ ### Features
137
+
138
+ - test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
139
+
140
+ ## [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)
141
+
142
+ ### Bug Fixes
143
+
144
+ - [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
package/README.md CHANGED
@@ -30,10 +30,10 @@ CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and
30
30
  **the brand is selected by a class on your app's `<html>` element**, so switching
31
31
  brand never touches component code.
32
32
 
33
- | Project | Preset stylesheet | Root class | Typeface | Font package |
34
- | --- | --- | --- | --- | --- |
35
- | Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
36
- | Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
33
+ | Project | Preset stylesheet | Root class | Typeface | Font package |
34
+ | ------------ | ----------------------------------------------- | ------------- | --------------- | ---------------------------------- |
35
+ | Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
36
+ | Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
37
37
 
38
38
  **Leroy Merlin projects**
39
39
 
@@ -44,7 +44,7 @@ import '@ptlm-azulejo/button/style.css'
44
44
  ```
45
45
 
46
46
  ```html
47
- <html lang="pt" class="preset-lm">
47
+ <html lang="pt" class="preset-lm"></html>
48
48
  ```
49
49
 
50
50
  **Adeo projects**
@@ -56,7 +56,7 @@ import '@ptlm-azulejo/button/style.css'
56
56
  ```
57
57
 
58
58
  ```html
59
- <html lang="pt" class="preset-adeo">
59
+ <html lang="pt" class="preset-adeo"></html>
60
60
  ```
61
61
 
62
62
  > The preset class is what resolves the brand at runtime. Without it — even with
@@ -70,12 +70,12 @@ Add `data-theme` alongside the brand class to pin the color scheme. Leave it off
70
70
  and the preset follows the OS `prefers-color-scheme`:
71
71
 
72
72
  ```html
73
- <html lang="pt" class="preset-lm" data-theme="dark">
73
+ <html lang="pt" class="preset-lm" data-theme="dark"></html>
74
74
  ```
75
75
 
76
76
  ### Why the font package is separate
77
77
 
78
- The preset only *names* its typeface in `--font-family` and ships no font files.
78
+ The preset only _names_ its typeface in `--font-family` and ships no font files.
79
79
  [Loading them is your app's job](../themes/README.md#fonts), as with upstream
80
80
  Mozaic, so you keep control of hosting, subsetting and preload. Without the
81
81
  matching font package, `font-sans` falls back to a generic sans-serif. A
@@ -85,28 +85,30 @@ only the active brand's file is ever downloaded.
85
85
  To hand the button back to your page's font:
86
86
 
87
87
  ```css
88
- .preset-lm .btn { font-family: inherit; }
88
+ .preset-lm .btn {
89
+ font-family: inherit;
90
+ }
89
91
  ```
90
92
 
91
93
  ## Props
92
94
 
93
- | Name | Type | Default | Description |
94
- | --- | --- | --- | --- |
95
- | `appearance` | `"standard"` \| `"danger"` \| `"inverse"` \| `"accent"` | `"standard"` | Defines the visual style of the button. |
96
- | `size` | `"s"` \| `"m"` \| `"l"` | `"m"` | Determines the size of the button. |
97
- | `disabled` | `boolean` | — | If `true`, disables the button, making it non-interactive. |
98
- | `ghost` | `boolean` | — | If `true`, applies a "ghost" style to the button. |
99
- | `outlined` | `boolean` | — | If `true`, the button gets an outlined style. |
100
- | `iconPosition` | `"left"` \| `"right"` \| `"only"` | — | Controls the positioning of an icon in the button. |
101
- | `type` | `"button"` \| `"reset"` \| `"submit"` | `"button"` | Specifies the button's HTML `type` attribute. |
102
- | `isLoading` | `boolean` | — | If `true`, a loading state is displayed. |
95
+ | Name | Type | Default | Description |
96
+ | -------------- | ------------------------------------------------------- | ------------ | ---------------------------------------------------------- |
97
+ | `appearance` | `"standard"` \| `"danger"` \| `"inverse"` \| `"accent"` | `"standard"` | Defines the visual style of the button. |
98
+ | `size` | `"s"` \| `"m"` \| `"l"` | `"m"` | Determines the size of the button. |
99
+ | `disabled` | `boolean` | — | If `true`, disables the button, making it non-interactive. |
100
+ | `ghost` | `boolean` | — | If `true`, applies a "ghost" style to the button. |
101
+ | `outlined` | `boolean` | — | If `true`, the button gets an outlined style. |
102
+ | `iconPosition` | `"left"` \| `"right"` \| `"only"` | — | Controls the positioning of an icon in the button. |
103
+ | `type` | `"button"` \| `"reset"` \| `"submit"` | `"button"` | Specifies the button's HTML `type` attribute. |
104
+ | `isLoading` | `boolean` | — | If `true`, a loading state is displayed. |
103
105
 
104
106
  ## Slots
105
107
 
106
- | Name | Description |
107
- | --- | --- |
108
- | `default` | The content displayed in the button. |
109
- | `icon` | Use this slot to insert an icon for the Button. |
108
+ | Name | Description |
109
+ | --------- | ----------------------------------------------- |
110
+ | `default` | The content displayed in the button. |
111
+ | `icon` | Use this slot to insert an icon for the Button. |
110
112
 
111
113
  ## Basic Usage
112
114
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/button",
3
- "version": "2.1.1",
3
+ "version": "2.1.2-alpha.121",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.cjs",
6
6
  "module": "./dist/index.js",