semmet-angular 0.39.0 → 0.41.0

package/README.en.md

@@ -35,6 +35,28 @@ Use isolated components when you need fine-grained control, or compositions when
 - **Compositions / Blocks**: ready-made sections such as `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation`, and `command-list`.
 - **Delivery**: `ng add`, `ci`, `docker`, `deploy`, and `verify`.
 
+## Composition Commands
+
+Compositions/blocks generate standalone Angular sections using the matching Semmet components. Generated CSS stays local to the block and uses local spacing tokens to keep landing-page rhythm without injecting global styles into the application.
+
+| Command | Generates | Built from |
+|---|---|---|
+| `ng generate semmet-angular:block hero` | Semantic hero section | Section structure |
+| `ng generate semmet-angular:block section-card` | Card section | `card` |
+| `ng generate semmet-angular:block section-faq` | FAQ section | `accordion` |
+| `ng generate semmet-angular:block section-pricing` | Pricing section | `card` |
+| `ng generate semmet-angular:block section-stats` | Stats section | Section structure |
+| `ng generate semmet-angular:block section-table` | Table section | `table` |
+| `ng generate semmet-angular:block section-form` | Form section | `form` |
+| `ng generate semmet-angular:block section-tabs` | Tabs section | `tabs` |
+| `ng generate semmet-angular:block section-list-group` | Action list section | `list-group` |
+| `ng generate semmet-angular:block section-alert` | Alert section | `alert` |
+| `ng generate semmet-angular:block section-progress` | Progress section | `progress-bar` |
+| `ng generate semmet-angular:block section-carousel` | Carousel section | `carousel` |
+| `ng generate semmet-angular:block header-navbar` | Header navigation | `navbar` |
+| `ng generate semmet-angular:block footer-navigation` | Footer navigation | `navbar` |
+| `ng generate semmet-angular:block command-list` | Command list section | Section structure |
+
 ## Generated tests
 
 Every component schematic generates test files next to the component:

package/README.md

@@ -35,6 +35,28 @@ Use componentes isolados quando precisar de controle fino, ou compositions quand
 - **Compositions / Blocks**: seções prontas como `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation` e `command-list`.
 - **Delivery**: `ng add`, `ci`, `docker`, `deploy` e `verify`.
 
+## Comandos de Composição
+
+Compositions/blocks geram seções Angular standalone usando os componentes correspondentes da própria Semmet. O CSS gerado fica local no block e usa tokens locais de espaçamento para manter ritmo de landing page sem injetar estilo global na aplicação.
+
+| Comando | Gera | Usa como base |
+|---|---|---|
+| `ng generate semmet-angular:block hero` | Seção hero semântica | Estrutura de seção |
+| `ng generate semmet-angular:block section-card` | Seção de cards | `card` |
+| `ng generate semmet-angular:block section-faq` | Seção de FAQ | `accordion` |
+| `ng generate semmet-angular:block section-pricing` | Seção de preços | `card` |
+| `ng generate semmet-angular:block section-stats` | Seção de métricas | Estrutura de seção |
+| `ng generate semmet-angular:block section-table` | Seção com tabela | `table` |
+| `ng generate semmet-angular:block section-form` | Seção com formulário | `form` |
+| `ng generate semmet-angular:block section-tabs` | Seção com abas | `tabs` |
+| `ng generate semmet-angular:block section-list-group` | Seção com lista de ações | `list-group` |
+| `ng generate semmet-angular:block section-alert` | Seção com alerta | `alert` |
+| `ng generate semmet-angular:block section-progress` | Seção com progresso | `progress-bar` |
+| `ng generate semmet-angular:block section-carousel` | Seção com carousel | `carousel` |
+| `ng generate semmet-angular:block header-navbar` | Header com navegação | `navbar` |
+| `ng generate semmet-angular:block footer-navigation` | Footer com navegação | `navbar` |
+| `ng generate semmet-angular:block command-list` | Seção de comandos | Estrutura de seção |
+
 ## Fluxo de Entrega
 
 Depois de rodar `ng add semmet-angular`, use:

package/README.pt-BR.md

@@ -33,6 +33,28 @@ Use componentes isolados quando precisar de controle fino, ou compositions quand
 - **Compositions / Blocks**: seções prontas como `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation` e `command-list`.
 - **Delivery**: `ng add`, `ci`, `docker`, `deploy` e `verify`.
 
+## Comandos de Composição
+
+Compositions/blocks geram seções Angular standalone usando os componentes correspondentes da própria Semmet. O CSS gerado fica local no block e usa tokens locais de espaçamento para manter ritmo de landing page sem injetar estilo global na aplicação.
+
+| Comando | Gera | Usa como base |
+|---|---|---|
+| `ng generate semmet-angular:block hero` | Seção hero semântica | Estrutura de seção |
+| `ng generate semmet-angular:block section-card` | Seção de cards | `card` |
+| `ng generate semmet-angular:block section-faq` | Seção de FAQ | `accordion` |
+| `ng generate semmet-angular:block section-pricing` | Seção de preços | `card` |
+| `ng generate semmet-angular:block section-stats` | Seção de métricas | Estrutura de seção |
+| `ng generate semmet-angular:block section-table` | Seção com tabela | `table` |
+| `ng generate semmet-angular:block section-form` | Seção com formulário | `form` |
+| `ng generate semmet-angular:block section-tabs` | Seção com abas | `tabs` |
+| `ng generate semmet-angular:block section-list-group` | Seção com lista de ações | `list-group` |
+| `ng generate semmet-angular:block section-alert` | Seção com alerta | `alert` |
+| `ng generate semmet-angular:block section-progress` | Seção com progresso | `progress-bar` |
+| `ng generate semmet-angular:block section-carousel` | Seção com carousel | `carousel` |
+| `ng generate semmet-angular:block header-navbar` | Header com navegação | `navbar` |
+| `ng generate semmet-angular:block footer-navigation` | Footer com navegação | `navbar` |
+| `ng generate semmet-angular:block command-list` | Seção de comandos | Estrutura de seção |
+
 ## Fluxo de Entrega
 
 Depois de rodar `ng add semmet-angular`, use:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "description": "Accessible UI delivery dev kit in Angular: schematics that generate components, compositions, tests, and delivery scaffolds as native editable Angular code.",
   "publisher": "danilodevsilva",
   "license": "MIT",

package/src/accordion/files/__name@dasherize__/__name@dasherize__.css.template

@@ -5,6 +5,9 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-md: 12px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: block;
@@ -29,9 +32,9 @@ h3:not(:first-of-type) {
 button {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--semmet-space-xs);
   width: 100%;
-  padding: 1rem 1rem;
+  padding: var(--semmet-space-xs) var(--semmet-space-sm);
   font: inherit;
   font-weight: 500;
   color: inherit;
@@ -68,6 +71,6 @@ button[aria-expanded='true']::after {
 }
 
 [role='region'] {
-  padding: 0 1rem 1rem;
+  padding: 0 var(--semmet-space-sm) var(--semmet-space-sm);
   color: var(--semmet-color-on-surface-variant);
 }

package/src/alert/files/__name@dasherize__/__name@dasherize__.css.template

@@ -2,6 +2,9 @@
   --semmet-color-primary: #18181b;
   --semmet-color-on-primary: #ffffff;
   --semmet-radius-sm: 8px;
+  --semmet-space-3xs: 4px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: block;
@@ -13,8 +16,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1rem;
+  gap: var(--semmet-space-xs);
+  padding: var(--semmet-space-xs);
   color: var(--semmet-color-on-primary);
   background: var(--semmet-color-primary);
   border-radius: var(--semmet-radius-sm);
@@ -29,7 +32,7 @@ button {
   border: none;
   cursor: pointer;
   border-radius: 4px;
-  padding: 0.25rem 0.5rem;
+  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
   transition: background-color var(--semmet-motion);
 }
 

package/src/alert-dialog/files/__name@dasherize__/__name@dasherize__.css.template

@@ -6,6 +6,10 @@
   --semmet-color-on-surface-variant: #52525b;
   --semmet-color-scrim: rgba(20, 24, 23, 0.45);
   --semmet-radius-lg: 20px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
+  --semmet-target-md: 40px;
   --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
@@ -21,7 +25,8 @@ button {
   background: none;
   border: none;
   border-radius: 8px;
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-md);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   cursor: pointer;
   transition: background-color var(--semmet-motion);
 }
@@ -38,7 +43,7 @@ button:focus-visible {
 [role='alertdialog'] button:last-of-type {
   color: var(--semmet-color-on-primary);
   background: var(--semmet-color-primary);
-  margin-left: 0.5rem;
+  margin-left: var(--semmet-space-2xs);
 }
 
 [role='alertdialog'] button:last-of-type:hover {
@@ -58,7 +63,7 @@ button:focus-visible {
   transform: translate(-50%, -50%);
   min-width: 22rem;
   max-width: 90vw;
-  padding: 1.5rem;
+  padding: var(--semmet-space-sm);
   border-radius: var(--semmet-radius-lg);
   background: var(--semmet-color-surface);
   color: var(--semmet-color-on-surface);
@@ -71,12 +76,12 @@ button:focus-visible {
 }
 
 [role='alertdialog'] h2 {
-  margin: 0 0 1rem;
+  margin: 0 0 var(--semmet-space-xs);
   font-size: 1.25rem;
   font-weight: 500;
 }
 
 [role='alertdialog'] > div {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--semmet-space-sm);
   color: var(--semmet-color-on-surface-variant);
 }

package/src/badge/files/__name@dasherize__/__name@dasherize__.css.template

@@ -13,6 +13,9 @@
   --semmet-color-on-info: #ffffff;
   --semmet-radius-full: 999px;
   --semmet-radius-sm: 6px;
+  --semmet-space-3xs: 4px;
+  --semmet-space-2xs: 8px;
+  --semmet-target-sm: 32px;
 
   display: inline-block;
   font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
@@ -22,7 +25,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--semmet-space-2xs);
   border-radius: var(--semmet-radius-sm);
   font-weight: 700;
   line-height: 1;
@@ -32,19 +35,19 @@
 
 .semmet-badge--sm {
   min-height: 1.25rem;
-  padding: 0.25rem 0.5rem;
+  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
   font-size: 0.6875rem;
 }
 
 .semmet-badge--md {
   min-height: 1.5rem;
-  padding: 0.5rem 0.5rem;
+  padding: var(--semmet-space-2xs);
   font-size: 0.75rem;
 }
 
 .semmet-badge--lg {
   min-height: 1.75rem;
-  padding: 0.5rem 0.5rem;
+  padding: var(--semmet-space-2xs);
   font-size: 0.8125rem;
 }
 
@@ -54,7 +57,7 @@
 
 .semmet-badge--dot {
   min-width: auto;
-  padding-inline-start: 0.5rem;
+  padding-inline-start: var(--semmet-space-2xs);
 }
 
 .semmet-badge--dot:has(.semmet-badge__dot):not(:has(.semmet-badge__label)) {

package/src/breadcrumb/files/__name@dasherize__/__name@dasherize__.css.template

@@ -2,6 +2,7 @@
   --semmet-color-primary: #18181b;
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
+  --semmet-space-2xs: 8px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: block;
@@ -13,7 +14,7 @@ ol {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--semmet-space-2xs);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -22,7 +23,7 @@ ol {
 li {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--semmet-space-2xs);
   color: var(--semmet-color-on-surface-variant);
 }
 

package/src/button/files/__name@dasherize__/__name@dasherize__.css.template

@@ -8,6 +8,12 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-sm: 8px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
+  --semmet-target-sm: 32px;
+  --semmet-target-md: 40px;
+  --semmet-target-lg: 48px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: inline-block;
@@ -19,7 +25,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--semmet-space-2xs);
   min-width: 2.75rem;
   border: 1px solid transparent;
   border-radius: var(--semmet-radius-sm);
@@ -38,19 +44,19 @@
 }
 
 .semmet-button--sm {
-  min-height: 2rem;
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-sm);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font-size: 0.875rem;
 }
 
 .semmet-button--md {
-  min-height: 2.5rem;
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-md);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
 }
 
 .semmet-button--lg {
-  min-height: 3rem;
-  padding: 1rem 1.5rem;
+  min-height: var(--semmet-target-lg);
+  padding: var(--semmet-space-xs) var(--semmet-space-sm);
   font-size: 1rem;
 }
 

package/src/button-group/files/__name@dasherize__/__name@dasherize__.css.template

@@ -6,6 +6,12 @@
   --semmet-color-outline: #d4d4d8;
   --semmet-color-on-surface: #27272a;
   --semmet-radius-sm: 8px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
+  --semmet-target-sm: 32px;
+  --semmet-target-md: 40px;
+  --semmet-target-lg: 48px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: inline-block;
@@ -55,19 +61,19 @@
 }
 
 .semmet-button-group--sm .semmet-button-group__button {
-  min-height: 2rem;
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-sm);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font-size: 0.875rem;
 }
 
 .semmet-button-group--md .semmet-button-group__button {
-  min-height: 2.5rem;
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-md);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
 }
 
 .semmet-button-group--lg .semmet-button-group__button {
-  min-height: 3rem;
-  padding: 1rem 1.5rem;
+  min-height: var(--semmet-target-lg);
+  padding: var(--semmet-space-xs) var(--semmet-space-sm);
   font-size: 1rem;
 }
 

package/src/card/files/__name@dasherize__/__name@dasherize__.css.template

@@ -5,6 +5,9 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-md: 12px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
 
   display: block;
   font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
@@ -19,7 +22,7 @@ article {
 }
 
 h3 {
-  margin: 1.5rem 1.5rem 0.5rem;
+  margin: var(--semmet-space-sm) var(--semmet-space-sm) var(--semmet-space-2xs);
   font-size: 1.0625rem;
   font-weight: 500;
   color: var(--semmet-color-on-surface);
@@ -36,15 +39,15 @@ p {
 }
 
 .semmet-card__description {
-  margin: 0 1.5rem 1rem;
+  margin: 0 var(--semmet-space-sm) var(--semmet-space-xs);
   color: var(--semmet-color-on-surface-variant);
 }
 
 .semmet-card__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
-  margin: 0 1.5rem 1.5rem;
+  gap: var(--semmet-space-xs);
+  margin: 0 var(--semmet-space-sm) var(--semmet-space-sm);
 }
 
 a {

package/src/carousel/files/__name@dasherize__/__name@dasherize__.css.template

@@ -5,6 +5,9 @@
   --semmet-color-outline: #d4d4d8;
   --semmet-color-on-surface: #18181b;
   --semmet-radius-md: 12px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
+  --semmet-target-md: 40px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: block;
@@ -16,7 +19,7 @@ section {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--semmet-space-xs);
 }
 
 [aria-live] {
@@ -25,7 +28,7 @@ section {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem;
+  padding: var(--semmet-space-sm);
   color: var(--semmet-color-on-surface);
   background: var(--semmet-color-surface);
   border: 1px solid var(--semmet-color-outline);
@@ -35,8 +38,8 @@ section {
 
 button {
   flex-shrink: 0;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: var(--semmet-target-md);
+  height: var(--semmet-target-md);
   font-size: 1.25rem;
   color: var(--semmet-color-on-primary);
   background: var(--semmet-color-primary);

package/src/checkbox/files/__name@dasherize__/__name@dasherize__.css.template

@@ -3,6 +3,8 @@
   --semmet-color-on-primary: #ffffff;
   --semmet-color-outline: #71717a;
   --semmet-color-on-surface: #18181b;
+  --semmet-space-sm: 24px;
+  --semmet-target-sm: 32px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: inline-block;
@@ -14,8 +16,8 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding-left: 1.5rem;
-  min-height: 1.125rem;
+  padding-left: var(--semmet-space-sm);
+  min-height: var(--semmet-target-sm);
   color: var(--semmet-color-on-surface);
   cursor: pointer;
   user-select: none;

package/src/close-button/files/__name@dasherize__/__name@dasherize__.css.template

@@ -4,6 +4,9 @@
   --semmet-color-on-inverse: #ffffff;
   --semmet-color-hover: #f4f4f5;
   --semmet-radius-full: 999px;
+  --semmet-target-sm: 32px;
+  --semmet-target-md: 40px;
+  --semmet-target-lg: 48px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: inline-block;
@@ -28,18 +31,18 @@
 }
 
 .semmet-close-button--sm {
-  width: 2rem;
-  height: 2rem;
+  width: var(--semmet-target-sm);
+  height: var(--semmet-target-sm);
 }
 
 .semmet-close-button--md {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--semmet-target-md);
+  height: var(--semmet-target-md);
 }
 
 .semmet-close-button--lg {
-  width: 3rem;
-  height: 3rem;
+  width: var(--semmet-target-lg);
+  height: var(--semmet-target-lg);
 }
 
 .semmet-close-button--default:hover:not(:disabled),

package/src/combobox/files/__name@dasherize__/__name@dasherize__.css.template

@@ -6,6 +6,10 @@
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-sm: 8px;
   --semmet-radius-md: 12px;
+  --semmet-space-3xs: 4px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-target-md: 40px;
   --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
@@ -17,7 +21,7 @@
 
 label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--semmet-space-2xs);
   font-weight: 500;
   color: var(--semmet-color-on-surface);
 }
@@ -25,12 +29,13 @@ label {
 input {
   width: 100%;
   min-width: 14rem;
+  min-height: var(--semmet-target-md);
   font: inherit;
   color: var(--semmet-color-on-surface);
   background: var(--semmet-color-surface);
   border: 1px solid var(--semmet-color-outline);
   border-radius: var(--semmet-radius-sm);
-  padding: 0.5rem 1rem;
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   box-sizing: border-box;
   transition: border-color var(--semmet-motion);
 }
@@ -47,8 +52,8 @@ ul {
   top: 100%;
   left: 0;
   right: 0;
-  margin: 0.25rem 0 0;
-  padding: 0.5rem;
+  margin: var(--semmet-space-3xs) 0 0;
+  padding: var(--semmet-space-2xs);
   list-style: none;
   background: var(--semmet-color-surface);
   border-radius: var(--semmet-radius-md);
@@ -58,7 +63,8 @@ ul {
 }
 
 [role='option'] {
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-md);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   border-radius: 6px;
   color: var(--semmet-color-on-surface);
   cursor: pointer;

package/src/dialog/files/__name@dasherize__/__name@dasherize__.css.template

@@ -5,6 +5,10 @@
   --semmet-color-on-surface-variant: #52525b;
   --semmet-color-scrim: rgba(20, 24, 23, 0.45);
   --semmet-radius-lg: 20px;
+  --semmet-space-2xs: 8px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
+  --semmet-target-md: 40px;
   --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
@@ -20,7 +24,8 @@ button {
   background: none;
   border: none;
   border-radius: 8px;
-  padding: 0.5rem 1rem;
+  min-height: var(--semmet-target-md);
+  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   cursor: pointer;
   transition: background-color var(--semmet-motion);
 }
@@ -47,7 +52,7 @@ button:focus-visible {
   transform: translate(-50%, -50%);
   min-width: 22rem;
   max-width: 90vw;
-  padding: 1.5rem;
+  padding: var(--semmet-space-sm);
   border-radius: var(--semmet-radius-lg);
   background: var(--semmet-color-surface);
   color: var(--semmet-color-on-surface);
@@ -60,12 +65,12 @@ button:focus-visible {
 }
 
 [role='dialog'] h2 {
-  margin: 0 0 1rem;
+  margin: 0 0 var(--semmet-space-xs);
   font-size: 1.25rem;
   font-weight: 500;
 }
 
 [role='dialog'] > div {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--semmet-space-sm);
   color: var(--semmet-color-on-surface-variant);
 }

package/src/disclosure/files/__name@dasherize__/__name@dasherize__.css.template

@@ -5,6 +5,8 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-md: 12px;
+  --semmet-space-xs: 16px;
+  --semmet-space-sm: 24px;
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
 
   display: block;
@@ -21,9 +23,9 @@
 button {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--semmet-space-xs);
   width: 100%;
-  padding: 1rem 1rem;
+  padding: var(--semmet-space-xs) var(--semmet-space-sm);
   font: inherit;
   font-weight: 500;
   color: inherit;
@@ -60,6 +62,6 @@ button[aria-expanded='true']::after {
 }
 
 div {
-  padding: 0 1rem 1rem;
+  padding: 0 var(--semmet-space-sm) var(--semmet-space-sm);
   color: var(--semmet-color-on-surface-variant);
 }