@kenlo/kdls-design-system 2.9.2 → 2.10.0

package/foundations/tokens.css

@@ -3351,6 +3351,7 @@
 :root {
   --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
   --font-weight-regular: 400;
+  --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-size-display-lg: 56px;
@@ -3400,12 +3401,22 @@
 }
 
 /* ------------------------------------------------------------------------------ */
-/* ------------------------------------EASING------------------------------------ */
+/* ------------------------------------MOTION------------------------------------ */
 :root {
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+  }
+}
 /* ------------------------------------------------------------------------------ */
 /* -----------------------------PAGE BACKGROUND----------------------------- */
 :root {

package/kdls-manifest.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "name": "@kenlo/kdls-design-system",
-    "version": "2.9.2"
+    "version": "2.10.0"
   },
   "install": {
     "add": "npm install @kenlo/kdls-design-system",
@@ -14,8 +14,8 @@
   "counts": {
     "components": 60,
     "propsTables": 85,
-    "props": 732,
-    "tokens": 548,
+    "props": 733,
+    "tokens": 552,
     "api": 12,
     "icons": 49
   },
@@ -512,7 +512,7 @@
           "name": "size",
           "type": "'sm'|'md'|'lg'",
           "default": "'sm'",
-          "description": "'sm' = 12px · 'md' = 14px · 'lg' = 16px",
+          "description": "'sm' = rótulo 12px, caixa 24px · 'md' = rótulo 16px, caixa 28px · 'lg' = rótulo 16px, caixa 32px",
           "example": "size=\"sm\""
         },
         {
@@ -2420,16 +2420,16 @@
         },
         {
           "name": "variant",
-          "type": "'primary' | 'neutral'",
+          "type": "'primary' | 'neutral' | 'inverse'",
           "default": "'primary'",
-          "description": "'primary' = cor do tema ativo · 'neutral' = cinza neutro. Usar 'neutral' para chevrons e ações secundárias",
+          "description": "'primary' = cor do tema ativo · 'neutral' = cinza neutro, para chevrons e ações secundárias · 'inverse' = ícone branco com hover claro, para o botão sobre uma foto ou um fundo escuro",
           "example": "variant=\"primary\""
         },
         {
           "name": "size",
-          "type": "'sm' | 'md' | 'lg'",
+          "type": "'xs' | 'sm' | 'md' | 'lg'",
           "default": "'sm'",
-          "description": "Tamanho do botão e da área de hover — 'sm' = 32px · 'md' = 40px · 'lg' = 48px. O ícone é sempre 24px independente do tamanho.",
+          "description": "Tamanho que o botão ocupa — 'xs' = 24px (só o ícone entra na linha; o hover, o pressionado e a área de toque continuam com 32px em volta) · 'sm' = 32px · 'md' = 40px · 'lg' = 48px. O ícone é sempre 24px independente do tamanho.",
           "example": "size=\"sm\""
         },
         {
@@ -2454,6 +2454,13 @@
           "description": "Label acessível — obrigatório: não há como derivar um rótulo automático de um ícone arbitrário",
           "example": "aria-label=\"Excluir contato\""
         },
+        {
+          "name": "aria-expanded",
+          "type": "boolean",
+          "default": "—",
+          "description": "Diz ao leitor de tela se o que o botão abre está aberto — gatilho de menu, gaveta ou acordeão. Os demais atributos de botão (aria-*, onKeyDown, title…) também chegam ao elemento raiz",
+          "example": "aria-expanded={open}"
+        },
         {
           "name": "className",
           "type": "string",
@@ -3010,16 +3017,16 @@
             },
             {
               "name": "iconVariant",
-              "type": "'neutral' | 'primary'",
+              "type": "'neutral' | 'primary' | 'inverse'",
               "default": "'primary'",
-              "description": "Variant de cor do IconButton interno — use 'neutral' para ícones de opções e chevrons.",
+              "description": "Variant de cor do IconButton interno — use 'neutral' para ícones de opções e chevrons, 'inverse' sobre foto ou fundo escuro.",
               "example": "iconVariant=\"primary\""
             },
             {
               "name": "iconSize",
-              "type": "'sm' | 'md' | 'lg'",
+              "type": "'xs' | 'sm' | 'md' | 'lg'",
               "default": "'sm'",
-              "description": "Tamanho do IconButton interno — o ícone continua 24px em qualquer tamanho.",
+              "description": "Tamanho do IconButton interno — o ícone continua 24px em qualquer tamanho; 'xs' ocupa só os 24px do ícone na linha.",
               "example": "iconSize=\"sm\""
             },
             {
@@ -4041,9 +4048,8 @@
         {
           "name": "active",
           "type": "boolean",
-          "default": "false",
-          "required": true,
-          "description": "Estado ativo — preenchido com cor primária. Inativo = apenas contorno",
+          "default": "—",
+          "description": "Estado ativo de uma pílula de filtro ou alternância — preenchida com a cor primária; false = só o contorno. Omita quando a pílula é uma ação (abre algo, navega): sem active ela é anunciada como botão simples, sem estado ligado/desligado",
           "example": "active={isActive}"
         },
         {
@@ -7907,6 +7913,20 @@
         "value": "var(--color-neutral-90)"
       }
     ],
+    "duration": [
+      {
+        "name": "--duration-base",
+        "value": "200ms"
+      },
+      {
+        "name": "--duration-fast",
+        "value": "120ms"
+      },
+      {
+        "name": "--duration-slow",
+        "value": "300ms"
+      }
+    ],
     "ease": [
       {
         "name": "--ease-spring",
@@ -7976,6 +7996,10 @@
         "name": "--font-weight-bold",
         "value": "700"
       },
+      {
+        "name": "--font-weight-medium",
+        "value": "500"
+      },
       {
         "name": "--font-weight-regular",
         "value": "400"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/kdls-design-system",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "private": false,
   "type": "module",
   "description": "KDLS Design System — componentes React + TypeScript",