@kenlo/kdls-design-system 2.12.2 → 2.17.0

package/kdls-manifest.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "name": "@kenlo/kdls-design-system",
-    "version": "2.12.2"
+    "version": "2.17.0"
   },
   "install": {
     "add": "npm install @kenlo/kdls-design-system",
@@ -14,7 +14,7 @@
   "counts": {
     "components": 60,
     "propsTables": 85,
-    "props": 735,
+    "props": 745,
     "tokens": 552,
     "api": 12,
     "icons": 49
@@ -613,9 +613,16 @@
           "name": "showSelectAll",
           "type": "boolean",
           "default": "false",
-          "description": "Exibe uma linha fixa \"Selecionar todos\" acima da lista, com indeterminate quando parte das opções está marcada. Só tem efeito com multiple",
+          "description": "Exibe \"Selecionar todos\". Por padrão é uma linha fixa acima da lista, com indeterminate quando parte das opções está marcada; selectAllPlacement=\"footer\" leva para o rodapé. Só tem efeito com multiple",
           "example": "showSelectAll"
         },
+        {
+          "name": "selectAllPlacement",
+          "type": "'header' | 'footer'",
+          "default": "'header'",
+          "description": "Onde fica o \"Selecionar todos\" — o mesmo do Select. header = linha com checkbox acima da lista | footer = link num canto do rodapé automático, com Limpar e Aplicar no outro; vira \"Desmarcar todos\" quando todas as opções visíveis estão marcadas. Só tem efeito com showSelectAll; com footer customizado, volta para o header",
+          "example": "selectAllPlacement=\"header\""
+        },
         {
           "name": "value",
           "type": "string | string[] | null",
@@ -1472,6 +1479,20 @@
           "description": "Marca o campo como obrigatório — asterisco no label e aria-required na caixa",
           "example": "required"
         },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Nome acessível da caixa — usar quando não há label visível (ex.: caixa de seleção de uma linha da tabela). Com label e aria-label, o leitor de tela lê a aria-label",
+          "example": "aria-label=\"Selecionar imóvel AP0123\""
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": "—",
+          "description": "Id do elemento visível que nomeia a caixa (ex.: o título da linha) — preferir a aria-label quando esse texto já está na tela. Se os dois forem passados, este vence",
+          "example": "aria-labelledby=\"titulo-imovel-123\""
+        },
         {
           "name": "className",
           "type": "string",
@@ -1584,8 +1605,8 @@
           "name": "zIndex",
           "type": "number",
           "default": "—",
-          "description": "Sobrescreve o z-index do painel. Use quando o ColorPicker está dentro de um Popover ou Drawer com z-index elevado",
-          "example": "zIndex={500}"
+          "description": "Sobrescreve o z-index do painel. Sem a prop, o painel não define z-index na página e sobe sozinho para 500 dentro de um Drawer, Modal ou BottomSheet aberto — use quando o ColorPicker está numa camada própria acima disso (ex.: um Popover com z-index alto)",
+          "example": "zIndex={600}"
         },
         {
           "name": "disableAlpha",
@@ -1721,6 +1742,13 @@
           "description": "Mês exibido ao abrir quando não há valor selecionado",
           "example": "defaultViewDate={new Date('2027-01-01')}"
         },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "default": "—",
+          "description": "Sobrescreve o z-index do calendário. Sem a prop, o calendário fica em 200 na página e sobe sozinho para 500 dentro de um Drawer, Modal ou BottomSheet aberto — use só quando o campo está numa camada própria acima disso",
+          "example": "zIndex={600}"
+        },
         {
           "name": "isRange",
           "type": "boolean",
@@ -4207,8 +4235,8 @@
           "name": "zIndex",
           "type": "number",
           "default": "—",
-          "description": "Sobrescreve o z-index do painel — usar quando aninhado em camadas com z-index elevado",
-          "example": "zIndex={500}"
+          "description": "Sobrescreve o z-index do painel. Sem a prop, o painel não define z-index na página e sobe sozinho para 500 dentro de um Drawer, Modal ou BottomSheet aberto — use quando o Popover está numa camada própria acima disso",
+          "example": "zIndex={600}"
         },
         {
           "name": "panelClassName",
@@ -4515,6 +4543,20 @@
           "description": "Placeholder do campo de busca",
           "example": "searchPlaceholder=\"Digite para buscar...\""
         },
+        {
+          "name": "allSelectedLabel",
+          "type": "string",
+          "default": "—",
+          "description": "Texto exibido no trigger quando todas as opções estão marcadas, no lugar de \"primeira opção +N\" (ex.: \"DWV +1\" vira \"Todas\"). Sem a prop, o trigger segue mostrando a primeira + contador. Só tem efeito com multiple",
+          "example": "allSelectedLabel=\"Todas\""
+        },
+        {
+          "name": "selectAllPlacement",
+          "type": "'header' | 'footer'",
+          "default": "'header'",
+          "description": "Onde fica o \"Selecionar todos\". header = linha com checkbox acima da lista | footer = link num canto do rodapé, com Limpar e Aplicar no outro; vira \"Desmarcar todos\" quando todas as opções visíveis estão marcadas. Nos dois casos afeta só as opções visíveis e nada é aplicado antes do Aplicar. Só tem efeito com showSelectAll",
+          "example": "selectAllPlacement=\"header\""
+        },
         {
           "name": "value",
           "type": "string | string[] | DropdownLabeledValue | DropdownLabeledValue[] | null",
@@ -4624,7 +4666,7 @@
           "name": "showSelectAll",
           "type": "boolean",
           "default": "false",
-          "description": "Exibe \"Selecionar todos\" como primeira linha — marcar/desmarcar todas as opções de uma vez. Requer multiple",
+          "description": "Exibe \"Selecionar todos\" — marcar/desmarcar todas as opções visíveis de uma vez. Por padrão é a primeira linha, acima da lista; selectAllPlacement=\"footer\" leva para o rodapé. Requer multiple",
           "example": "showSelectAll"
         },
         {
@@ -5703,6 +5745,20 @@
           "description": "Desabilita toda interação no controle — bloqueia todos os itens",
           "example": "disabled"
         },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Nome acessível do grupo — usar quando nenhum título visível nomeia as opções. Sem nome, o leitor de tela anuncia só as opções (\"10, rádio, 1 de 5\"), sem dizer do que são",
+          "example": "aria-label=\"Quartos\""
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": "—",
+          "description": "Id do elemento visível que nomeia o grupo — preferir a aria-label quando o título já está na tela. Se os dois forem passados, este vence",
+          "example": "aria-labelledby=\"titulo-quartos\""
+        },
         {
           "name": "className",
           "type": "string",
@@ -5753,6 +5809,13 @@
           "default": "false",
           "description": "Desabilita apenas este item",
           "example": "disabled"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Nome do item para o leitor de tela — obrigatório na prática quando o item mostra só ícone, que sem ele não tem nome",
+          "example": "'aria-label': 'Grade'"
         }
       ],
       "subComponents": []
@@ -5784,6 +5847,13 @@
           "description": "Posição do tooltip em relação ao disparador — 4 lados × 3 alinhamentos. Inverte automaticamente para o lado oposto quando não há espaço",
           "example": "placement=\"top\""
         },
+        {
+          "name": "width",
+          "type": "'hug'|'fill'",
+          "default": "'hug'",
+          "description": "Largura do wrapper do disparador, só com children: 'hug' = abraça o disparador · 'fill' = ocupa 100% do contêiner e estica o disparador junto. Use 'fill' quando o disparador é uma linha inteira, como um Card. Sem children não tem efeito — o ícone padrão mantém o próprio tamanho",
+          "example": "width=\"hug\""
+        },
         {
           "name": "className",
           "type": "string",

package/package.json

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