al-design-system 1.7.0 → 1.9.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 (11) hide show
  1. package/README.md +8 -5
  2. package/README.pt-BR.md +8 -5
  3. package/dist/al.css +598 -2
  4. package/dist/components/carousel.css +169 -0
  5. package/dist/components/carousel.js +137 -0
  6. package/dist/components/rating.css +192 -0
  7. package/dist/components/slider.css +232 -0
  8. package/dist/components/slider.js +52 -0
  9. package/dist/foundation.css +1 -1
  10. package/dist/tokens.json +1 -1
  11. 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 + 30 components**, designed in Figma and coded from the same tokens.
13
+ - **Foundation + 33 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.
@@ -34,6 +34,8 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
34
34
  | | Textarea | | [guidelines](src/components/textarea/guidelines.md) |
35
35
  | | Password | ✓ | [guidelines](src/components/password/guidelines.md) |
36
36
  | | Number field | ✓ | [guidelines](src/components/number-field/guidelines.md) |
37
+ | | Slider | ✓ | [guidelines](src/components/slider/guidelines.md) |
38
+ | | Rating | | [guidelines](src/components/rating/guidelines.md) |
37
39
  | Structure and overlays | Divider | | [guidelines](src/components/divider/guidelines.md) |
38
40
  | | Card | | [guidelines](src/components/card/guidelines.md) |
39
41
  | | Tab | ✓ | [guidelines](src/components/tab/guidelines.md) |
@@ -42,6 +44,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
42
44
  | | Drawer | ✓ | [guidelines](src/components/drawer/guidelines.md) |
43
45
  | Navigation | Sidebar | ✓ | [guidelines](src/components/sidebar/guidelines.md) |
44
46
  | | Breadcrumb | ✓ | [guidelines](src/components/breadcrumb/guidelines.md) |
47
+ | | Carousel | ✓ | [guidelines](src/components/carousel/guidelines.md) |
45
48
  | | Pagination | | [guidelines](src/components/pagination/guidelines.md) |
46
49
  | | Stepper | | [guidelines](src/components/stepper/guidelines.md) |
47
50
  | Feedback | Tooltip | ✓ | [guidelines](src/components/tooltip/guidelines.md) |
@@ -61,7 +64,7 @@ npm install al-design-system
61
64
  Or straight from a CDN, pinned to a version:
62
65
 
63
66
  ```html
64
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.7.0/dist/al.css">
67
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.9.0/dist/al.css">
65
68
  ```
66
69
 
67
70
  Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -70,10 +73,10 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
70
73
 
71
74
  | File | What it is |
72
75
  |---|---|
73
- | `al.css` | Foundation + all 30 components, in one file |
76
+ | `al.css` | Foundation + all 33 components, in one file |
74
77
  | `foundation.css` | Only the Foundation: color, typography, spacing, radius, icon size, elevation, focus ring and motion |
75
78
  | `components/<name>.css` | One component (its tokens + its CSS) |
76
- | `components/<name>.js` | The behavior, for the 11 components that have a script |
79
+ | `components/<name>.js` | The behavior, for the 13 components that have a script |
77
80
  | `icons/*.svg`, `icons/icons.json` | The 70 icons |
78
81
  | `tokens.json` | The Foundation tokens, to read from code |
79
82
 
@@ -104,7 +107,7 @@ The exact markup of each component (which element, which attributes) is describe
104
107
 
105
108
  ### Scripts
106
109
 
107
- 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:
110
+ Password, Number field, Slider, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Carousel, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
108
111
 
109
112
  ```html
110
113
  <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 + 30 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
13
+ - **Foundation + 33 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ó.
@@ -34,6 +34,8 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
34
34
  | | Textarea | | [diretrizes](src/components/textarea/guidelines.md) |
35
35
  | | Password | ✓ | [diretrizes](src/components/password/guidelines.md) |
36
36
  | | Number field | ✓ | [diretrizes](src/components/number-field/guidelines.md) |
37
+ | | Slider | ✓ | [diretrizes](src/components/slider/guidelines.md) |
38
+ | | Rating | | [diretrizes](src/components/rating/guidelines.md) |
37
39
  | Estrutura e sobreposição | Divider | | [diretrizes](src/components/divider/guidelines.md) |
38
40
  | | Card | | [diretrizes](src/components/card/guidelines.md) |
39
41
  | | Tab | ✓ | [diretrizes](src/components/tab/guidelines.md) |
@@ -42,6 +44,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
42
44
  | | Drawer | ✓ | [diretrizes](src/components/drawer/guidelines.md) |
43
45
  | Navegação | Sidebar | ✓ | [diretrizes](src/components/sidebar/guidelines.md) |
44
46
  | | Breadcrumb | ✓ | [diretrizes](src/components/breadcrumb/guidelines.md) |
47
+ | | Carousel | ✓ | [diretrizes](src/components/carousel/guidelines.md) |
45
48
  | | Pagination | | [diretrizes](src/components/pagination/guidelines.md) |
46
49
  | | Stepper | | [diretrizes](src/components/stepper/guidelines.md) |
47
50
  | Feedback | Tooltip | ✓ | [diretrizes](src/components/tooltip/guidelines.md) |
@@ -61,7 +64,7 @@ npm install al-design-system
61
64
  Ou direto de uma CDN, fixado numa versão:
62
65
 
63
66
  ```html
64
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.7.0/dist/al.css">
67
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.9.0/dist/al.css">
65
68
  ```
66
69
 
67
70
  Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -70,10 +73,10 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
70
73
 
71
74
  | Arquivo | O que é |
72
75
  |---|---|
73
- | `al.css` | Foundation + os 30 componentes, num arquivo só |
76
+ | `al.css` | Foundation + os 33 componentes, num arquivo só |
74
77
  | `foundation.css` | Só a Foundation: cor, tipografia, espaçamento, radius, tamanho de ícone, elevação, anel de foco e motion |
75
78
  | `components/<nome>.css` | Um componente (os tokens + o CSS dele) |
76
- | `components/<nome>.js` | O comportamento, para os 11 componentes que têm script |
79
+ | `components/<nome>.js` | O comportamento, para os 13 componentes que têm script |
77
80
  | `icons/*.svg`, `icons/icons.json` | Os 70 ícones |
78
81
  | `tokens.json` | Os tokens da Foundation, para ler por código |
79
82
 
@@ -104,7 +107,7 @@ A marcação exata de cada componente (qual elemento, quais atributos) está des
104
107
 
105
108
  ### Scripts
106
109
 
107
- 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:
110
+ Password, Number field, Slider, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Carousel, 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:
108
111
 
109
112
  ```html
110
113
  <script src="node_modules/al-design-system/dist/components/modal.js" defer></script>