@praxisui/settings-panel 1.0.0-beta.5 → 1.0.0-beta.53

package/README.md

@@ -1,5 +1,53 @@
+---
+title: "Settings Panel"
+slug: "settings-panel-overview"
+description: "Visao geral do @praxisui/settings-panel com drawer de configuracao, contrato SettingsValueProvider, acoes Apply/Save e customizacao por tokens CSS."
+doc_type: "reference"
+document_kind: "component-overview"
+component: "settings-panel"
+category: "components"
+audience:
+  - "frontend"
+  - "host"
+  - "architect"
+level: "intermediate"
+status: "active"
+owner: "praxis-ui"
+tags:
+  - "settings-panel"
+  - "drawer"
+  - "config-editor"
+  - "tokens"
+  - "ux"
+order: 39
+icon: "settings"
+toc: true
+sidebar: true
+search_boost: 0.9
+reading_time: 11
+estimated_setup_time: 15
+version: "1.0"
+related_docs:
+  - "host-settings-panel-integration"
+  - "consumer-integration-quickstart"
+  - "host-integration-guide"
+keywords:
+  - "praxis settings panel"
+  - "drawer editor"
+  - "settings value provider"
+  - "apply save close"
+last_updated: "2026-03-07"
+---
+
 # @praxisui/settings-panel
 
+## 🔰 Exemplos / Quickstart
+
+Para ver esta biblioteca em funcionamento em uma aplicação completa, utilize o projeto de exemplo (Quickstart):
+
+- Repositório: https://github.com/codexrodrigues/praxis-ui-quickstart
+- O Quickstart demonstra a integração das bibliotecas `@praxisui/*` em um app Angular, incluindo instalação, configuração e uso em telas reais.
+
 Painel de configurações baseado em drawer para hospedar editores de configuração com UX consistente (Apply, Save & Close, Reset, Cancel).
 
 ## Instalação
@@ -21,6 +69,30 @@ Peer dependencies (Angular v20):
 - O componente implementa o contrato `SettingsValueProvider` para o painel habilitar/desabilitar ações do rodapé.
 - O host observa `SettingsPanelRef.applied$` e `saved$` para aplicar/persistir mudanças.
 
+## Customização visual (tokens CSS)
+
+O painel respeita tokens M3 do app host (ex.: `--md-sys-color-*`, `--md-sys-elevation-level*`, `--md-sys-shape-corner-*`).
+Se quiser ajustar layout/spacing sem alterar código, use as variáveis abaixo (em `:root` ou no container do painel).
+
+Layout
+- `--pfx-settings-panel-width`: largura padrão (default `720px`)
+- `--pfx-settings-panel-width-expanded`: largura quando expandido (default `95vw`)
+- `--pfx-settings-panel-max-width`: largura máxima quando expandido (default `2400px`)
+- `--pfx-settings-panel-header-height`: altura do header (default `64px`)
+- `--pfx-settings-panel-header-padding-x`: padding horizontal do header (default `16px`)
+- `--pfx-settings-panel-header-gap`: gap entre itens do header (default `8px`)
+- `--pfx-settings-panel-title-gap`: gap entre ícone e título (default `8px`)
+- `--pfx-settings-panel-body-padding`: padding do corpo (default `8px 8px 24px 8px`)
+- `--pfx-settings-panel-footer-padding`: padding do rodapé (default `12px 16px`)
+- `--pfx-settings-panel-footer-gap`: gap entre botões do rodapé (default `12px`)
+- `--pfx-settings-panel-button-gap`: gap entre ícone e texto em botões (default `8px`)
+
+Sombras / backdrop
+- `--pfx-settings-panel-header-shadow`: sombra do header (default `--md-sys-elevation-level1`)
+- `--pfx-settings-panel-footer-shadow`: sombra do footer (default `--md-sys-elevation-level1`)
+- `--pfx-backdrop`: cor do backdrop (default `--md-sys-color-scrim`)
+- `--pfx-backdrop-blur`: blur do backdrop (default `6px`)
+
 ## API Principal
 
 Serviço