al-design-system 1.3.0 → 1.5.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 (10) hide show
  1. package/README.md +7 -5
  2. package/README.pt-BR.md +7 -5
  3. package/dist/al.css +603 -2
  4. package/dist/components/menu.css +236 -0
  5. package/dist/components/menu.js +111 -0
  6. package/dist/components/number-field.css +363 -0
  7. package/dist/components/number-field.js +83 -0
  8. package/dist/foundation.css +1 -1
  9. package/dist/tokens.json +1 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
10
10
 
11
11
  ## What it is
12
12
 
13
- - **Foundation + 26 components**, designed in Figma and coded from the same tokens.
13
+ - **Foundation + 28 components**, designed in Figma and coded from the same tokens.
14
14
  - **Light and dark themes** built in. It follows the operating system by default, and you can force one.
15
15
  - **Accessibility is checked by the build.** Every rendered combination (variant × state × theme) is measured for contrast against the background it actually sits on, and each component's markup contract is verified. If something fails, the build stops.
16
16
  - **Nothing is typed by hand.** Tokens, CSS variables, `tokens.json` and the documentation tables are all generated from one source.
@@ -23,6 +23,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
23
23
  | | Icon | | (70 icons, see [Icons](#icons)) |
24
24
  | | Icon Button | | [guidelines](src/components/icon-button/guidelines.md) |
25
25
  | | Link | | [guidelines](src/components/link/guidelines.md) |
26
+ | | Menu | ✓ | [guidelines](src/components/menu/guidelines.md) |
26
27
  | | Tag | | [guidelines](src/components/tag/guidelines.md) |
27
28
  | | Avatar | | [guidelines](src/components/avatar/guidelines.md) |
28
29
  | Forms | Select | | [guidelines](src/components/select/guidelines.md) |
@@ -32,6 +33,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
32
33
  | | Input | | [guidelines](src/components/input/guidelines.md) |
33
34
  | | Textarea | | [guidelines](src/components/textarea/guidelines.md) |
34
35
  | | Password | ✓ | [guidelines](src/components/password/guidelines.md) |
36
+ | | Number field | ✓ | [guidelines](src/components/number-field/guidelines.md) |
35
37
  | Structure and overlays | Divider | | [guidelines](src/components/divider/guidelines.md) |
36
38
  | | Card | | [guidelines](src/components/card/guidelines.md) |
37
39
  | | Tab | ✓ | [guidelines](src/components/tab/guidelines.md) |
@@ -57,7 +59,7 @@ npm install al-design-system
57
59
  Or straight from a CDN, pinned to a version:
58
60
 
59
61
  ```html
60
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.3.0/dist/al.css">
62
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.5.0/dist/al.css">
61
63
  ```
62
64
 
63
65
  Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -66,10 +68,10 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
66
68
 
67
69
  | File | What it is |
68
70
  |---|---|
69
- | `al.css` | Foundation + all 26 components, in one file |
71
+ | `al.css` | Foundation + all 28 components, in one file |
70
72
  | `foundation.css` | Only the Foundation: color, typography, spacing, radius, icon size, elevation, focus ring and motion |
71
73
  | `components/<name>.css` | One component (its tokens + its CSS) |
72
- | `components/<name>.js` | The behavior, for the 9 components that have a script |
74
+ | `components/<name>.js` | The behavior, for the 11 components that have a script |
73
75
  | `icons/*.svg`, `icons/icons.json` | The 70 icons |
74
76
  | `tokens.json` | The Foundation tokens, to read from code |
75
77
 
@@ -100,7 +102,7 @@ The exact markup of each component (which element, which attributes) is describe
100
102
 
101
103
  ### Scripts
102
104
 
103
- Password, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
105
+ Password, Number field, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
104
106
 
105
107
  ```html
106
108
  <script src="node_modules/al-design-system/dist/components/modal.js" defer></script>
package/README.pt-BR.md CHANGED
@@ -10,7 +10,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
10
10
 
11
11
  ## O que é
12
12
 
13
- - **Foundation + 26 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
13
+ - **Foundation + 28 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
14
14
  - **Temas claro e escuro** já incluídos. Por padrão segue o sistema operacional, e dá para forçar um.
15
15
  - **A acessibilidade é conferida no build.** Cada combinação renderizada (variante × estado × tema) tem o contraste medido contra o fundo onde ela realmente aparece, e o contrato de marcação de cada componente é verificado. Se algo reprova, o build para.
16
16
  - **Nada é digitado à mão.** Tokens, variáveis CSS, `tokens.json` e as tabelas da documentação saem todos de uma fonte só.
@@ -23,6 +23,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
23
23
  | | Icon | | (70 ícones, ver [Ícones](#ícones)) |
24
24
  | | Icon Button | | [diretrizes](src/components/icon-button/guidelines.md) |
25
25
  | | Link | | [diretrizes](src/components/link/guidelines.md) |
26
+ | | Menu | ✓ | [diretrizes](src/components/menu/guidelines.md) |
26
27
  | | Tag | | [diretrizes](src/components/tag/guidelines.md) |
27
28
  | | Avatar | | [diretrizes](src/components/avatar/guidelines.md) |
28
29
  | Formulários | Select | | [diretrizes](src/components/select/guidelines.md) |
@@ -32,6 +33,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
32
33
  | | Input | | [diretrizes](src/components/input/guidelines.md) |
33
34
  | | Textarea | | [diretrizes](src/components/textarea/guidelines.md) |
34
35
  | | Password | ✓ | [diretrizes](src/components/password/guidelines.md) |
36
+ | | Number field | ✓ | [diretrizes](src/components/number-field/guidelines.md) |
35
37
  | Estrutura e sobreposição | Divider | | [diretrizes](src/components/divider/guidelines.md) |
36
38
  | | Card | | [diretrizes](src/components/card/guidelines.md) |
37
39
  | | Tab | ✓ | [diretrizes](src/components/tab/guidelines.md) |
@@ -57,7 +59,7 @@ npm install al-design-system
57
59
  Ou direto de uma CDN, fixado numa versão:
58
60
 
59
61
  ```html
60
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.3.0/dist/al.css">
62
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.5.0/dist/al.css">
61
63
  ```
62
64
 
63
65
  Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -66,10 +68,10 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
66
68
 
67
69
  | Arquivo | O que é |
68
70
  |---|---|
69
- | `al.css` | Foundation + os 26 componentes, num arquivo só |
71
+ | `al.css` | Foundation + os 28 componentes, num arquivo só |
70
72
  | `foundation.css` | Só a Foundation: cor, tipografia, espaçamento, radius, tamanho de ícone, elevação, anel de foco e motion |
71
73
  | `components/<nome>.css` | Um componente (os tokens + o CSS dele) |
72
- | `components/<nome>.js` | O comportamento, para os 9 componentes que têm script |
74
+ | `components/<nome>.js` | O comportamento, para os 11 componentes que têm script |
73
75
  | `icons/*.svg`, `icons/icons.json` | Os 70 ícones |
74
76
  | `tokens.json` | Os tokens da Foundation, para ler por código |
75
77
 
@@ -100,7 +102,7 @@ A marcação exata de cada componente (qual elemento, quais atributos) está des
100
102
 
101
103
  ### Scripts
102
104
 
103
- Password, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast e Alert precisam do script, carregado uma vez por página. Cada um liga sozinho os componentes que já estão na página:
105
+ Password, Number field, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast e Alert precisam do script, carregado uma vez por página. Cada um liga sozinho os componentes que já estão na página:
104
106
 
105
107
  ```html
106
108
  <script src="node_modules/al-design-system/dist/components/modal.js" defer></script>