rook-cli 1.3.8 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rook-cli",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "CLI para instalar componentes Shopify",
   "repository": {
     "type": "git",

package/rook-framework/PRD.md

@@ -72,14 +72,15 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
 ├── config/
 │   └── rk-settings_schema.json      ← Seção de settings para injetar no tema
 ├── assets/
-│   ├── rk-framework-tokens.css       ← Design Tokens (CSS Variables + Liquid)
+│   ├── rk-framework-tokens.css       ← Design Tokens (CSS Variables estáticas)
 │   ├── rk-framework-core.css         ← Estilos BEM de todos os componentes
 │   ├── rk-quantity.js                ← Controller: <rk-quantity-selector>
-│   ├── rk-modal.js                   ← Controller: <rk-modal-element>
+│   ├── rk-modal.js                   ← Controller: <rk-modal-element> (Media Lightbox)
 │   ├── rk-popover.js                 ← Controller: <rk-popover-element>
 │   ├── rk-scroll-area.js             ← Controller: <rk-scroll-area>
 │   ├── rk-drawer.js                  ← Controller: <rk-drawer-element>
 │   ├── rk-dialog.js                  ← Controller: <rk-dialog-element>
+│   ├── rk-alert-dialog.js            ← Controller: <rk-alert-dialog-element>
 │   ├── rk-sheet.js                   ← Controller: <rk-sheet-element>
 │   ├── rk-tabs.js                    ← Controller: <rk-tabs-element>
 │   ├── rk-toggle.js                  ← Controller: <rk-toggle-element> & <rk-toggle-group>
@@ -87,7 +88,8 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
 │   ├── rk-collapsible.js             ← Controller: <rk-collapsible-element>
 │   ├── rk-carousel.js                ← Controller: <rk-carousel-element>
 │   ├── rk-bottom-app-bar.js          ← Controller: <rk-bottom-app-bar-element>
-│   └── rk-accordion.js              ← Controller: <rk-accordion-element>
+│   ├── rk-accordion.js               ← Controller: <rk-accordion-element>
+│   └── rk-reveal.js                  ← Controller: <rk-reveal-element>
 ├── snippets/
 │   ├── rk-size-style.liquid          ← Style: CSS vars de width/height (portável)
 │   ├── rk-spacing-style.liquid       ← Style: CSS vars de padding com scaling (portável)
@@ -96,7 +98,9 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
 │   ├── rk-layout-style.liquid        ← Style: CSS vars de layout/flex (portável)
 │   ├── rk-button.liquid              ← Átomo: Botão/Link com variantes
 │   ├── rk-image.liquid               ← Átomo: Imagem responsiva com CLS
-│   ├── rk-icon.liquid                ← Átomo: Wrapper SVG para ícones
+│   ├── rk-icon.liquid                ← Átomo: Wrapper SVG para ícones (usa rk-icon-list)
+│   ├── rk-icon-list.liquid           ← Átomo: Biblioteca SVG self-contained (90+ ícones)
+│   ├── rk-icon-or-image.liquid       ← Átomo: Ícone SVG ou imagem com fallback
 │   ├── rk-input.liquid               ← Átomo: Campo de texto
 │   ├── rk-textarea.liquid            ← Átomo: Campo de texto multilinhas
 │   ├── rk-checkbox.liquid            ← Átomo: Checkbox acessível
@@ -108,6 +112,7 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
 │   ├── rk-aspect-ratio.liquid        ← Átomo: Container utilitário 16:9, 4:3, etc.
 │   ├── rk-item.liquid                ← Átomo: Item de Lista/Menu
 │   ├── rk-spinner.liquid             ← Átomo: Indicador de carregamento animado (Loading)
+│   ├── rk-reveal.liquid              ← Átomo: Revelação progressiva por scroll (fade-in/slide-up)
 │   ├── rk-card.liquid                ← Molécula: Container flexível (Header/Body/Footer)
 │   ├── rk-price.liquid               ← Molécula: Display de preço
 │   ├── rk-installments.liquid        ← Molécula: Parcelamento (global)
@@ -115,11 +120,12 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
 │   ├── rk-quantity.liquid            ← Molécula: Seletor de quantidade
 │   ├── rk-accordion.liquid           ← Molécula: Accordion/Disclosure
 │   ├── rk-form-field.liquid          ← Molécula: Label + Input + Error
-│   ├── rk-modal.liquid               ← Molécula: Dialog/Modal base
+│   ├── rk-modal.liquid               ← Molécula: Lightbox de mídia (imagem/vídeo/embed)
 │   ├── rk-popover.liquid             ← Molécula: Popover flutuante
 │   ├── rk-scroll-area.liquid         ← Molécula: Área de scroll customizada
 │   ├── rk-drawer.liquid              ← Molécula: Painel deslizante
 │   ├── rk-dialog.liquid              ← Molécula: Dialog/Modal (Shadcn/UI)
+│   ├── rk-alert-dialog.liquid        ← Molécula: Alert Dialog para confirmações críticas
 │   ├── rk-sheet.liquid               ← Molécula: Painel lateral full-viewport
 │   ├── rk-tabs.liquid                ← Molécula: Guias (Tabs) alternáveis
 │   ├── rk-table.liquid               ← Molécula: Tabela semântica e responsiva
@@ -140,7 +146,7 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
     ├── rk-divider.liquid             ← Block: Divisor com customizer
     ├── rk-accordion.liquid           ← Block: Accordion com customizer
     ├── rk-badge.liquid               ← Block: Badge com customizer
-    ├── rk-icon.liquid                ← Block: Ícone com customizer
+    ├── rk-icon-or-image.liquid        ← Block: Ícone ou Imagem com customizer
     ├── rk-form-field.liquid          ← Block: Campo formulário com customizer
     ├── rk-installments.liquid        ← Block: Parcelamento com customizer
     ├── rk-pix-discount.liquid        ← Block: Desconto Pix com customizer
@@ -244,14 +250,74 @@ O arquivo `rk-settings_schema.json` define uma seção **"⚡ Rook UI Core Frame
 
 #### `rk-icon`
 **Arquivo:** `snippets/rk-icon.liquid`
-**Descrição:** Wrapper SVG para ícones com sizes e acessibilidade.
+**Descrição:** Wrapper SVG para ícones com sizes e acessibilidade. Utiliza a biblioteca `rk-icon-list` com 90+ ícones SVG self-contained.
 
-| Prop | Tipo | Default |
-|---|---|---|
-| `icon` | string | — |
-| `size` | string | `md` |
-| `color` | string | `inherit` |
-| `label` | string | — |
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `icon` | string | — | Nome do ícone (da biblioteca `rk-icon-list`) |
+| `size` | string | `md` | `sm` \| `md` \| `lg` \| `xl` |
+| `color` | string | `inherit` | Cor CSS do ícone (via `currentColor`) |
+| `custom_class` | string | — | Classes CSS extras |
+| `label` | string | — | Label acessível (se vazio, `aria-hidden="true"`) |
+
+**Exemplo:**
+```liquid
+{% render 'rk-icon', icon: 'heart', size: 'lg' %}
+{% render 'rk-icon', icon: 'star', size: 'md', color: '#FF0000', label: 'Destaque' %}
+```
+
+---
+
+#### `rk-icon-list`
+**Arquivo:** `snippets/rk-icon-list.liquid`
+**Descrição:** Biblioteca SVG self-contained com 90+ ícones organizados por categoria. Renderiza paths SVG inline via `{% render 'rk-icon-list', icon: 'nome' %}`.
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `icon` | string | — | Nome do ícone a renderizar |
+
+**Categorias de Ícones Disponíveis:**
+
+| Categoria | Ícones |
+|---|---|
+| **Navegação** | `menu`, `search`, `user`, `cart`, `wishlist`, `heart`, `globe`, `home`, `trash`, `arrow`, `arrow-right`, `chevron-down`, `chevron-up`, `chevron-left`, `chevron-right`, `close`, `check` |
+| **Produto** | `plus`, `minus`, `share`, `star`, `star-outline`, `zoom`, `play`, `info`, `filter`, `eye`, `compare`, `sort` |
+| **Medidas/Técnico** | `ruler`, `scissors`, `expand`, `layers`, `iron`, `hanger`, `tape-measure`, `size-guide` |
+| **Benefícios** | `leaf`, `plant`, `sparkles`, `zap`, `lightning_bolt`, `shield-check`, `gem`, `hand-heart`, `recycle`, `fire`, `crown`, `medal`, `thumbs-up`, `verified`, `eco`, `organic` |
+| **Logística** | `truck`, `lock`, `return`, `package`, `gift`, `credit-card`, `percent`, `coupon`, `wallet`, `receipt`, `barcode`, `price_tag`, `store`, `delivery`, `exchange`, `warranty`, `plane` |
+| **Comunicação** | `chat_bubble`, `phone`, `email`, `bell` |
+| **Informação** | `question_mark`, `error`, `check_box`, `clipboard`, `clock`, `stopwatch`, `calendar`, `map_pin`, `download`, `upload`, `link`, `silhouette`, `qr-code`, `snowflake`, `scan`, `refresh`, `sun`, `moon`, `cookie` |
+| **Moda/Vestuário** | `shirt`, `shoe`, `pants`, `dress`, `glasses`, `watch`, `lipstick`, `perfume`, `diamond`, `paw-print`, `leather` |
+| **Alimentação** | `apple`, `banana`, `carrot`, `serving-dish`, `dairy`, `dairy-free`, `gluten-free`, `nut-free`, `pepper`, `bottle` |
+| **Cuidados/Lavagem** | `washing`, `dryer`, `hand-wash` |
+| **Redes Sociais** | `instagram`, `tiktok`, `facebook`, `x`, `youtube`, `whatsapp`, `telegram`, `spotify`, `pinterest`, `linkedin`, `bluesky`, `snapchat`, `threads`, `tumblr`, `vimeo` |
+
+**Especificações Técnicas:**
+- Todos os ícones usam `viewBox="0 0 20 20"`
+- Paths utilizam `fill="currentColor"` (herda cor do elemento pai)
+
+---
+
+#### `rk-icon-or-image`
+**Arquivo:** `snippets/rk-icon-or-image.liquid`
+**Descrição:** Renderiza um ícone SVG (via `rk-icon`) ou uma imagem uploadada, com lógica de fallback. Se `image` for fornecido, tem prioridade sobre `icon`.
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `icon` | string | — | Nome do ícone (ignorado se `image` for fornecido) |
+| `image` | object | — | Objeto imagem do Shopify (prioridade sobre `icon`) |
+| `size` | string | `md` | `sm` (16px) \| `md` (20px) \| `lg` (24px) \| `xl` (32px) \| `custom` |
+| `custom_width` | number | — | Largura em px quando size é `custom` |
+| `color` | string | — | Cor CSS (apenas para ícones SVG) |
+| `custom_class` | string | — | Classes CSS extras |
+| `label` | string | — | Label acessível |
+| `loading` | string | `lazy` | `lazy` \| `eager` (apenas para imagens) |
+
+**Exemplo:**
+```liquid
+{% render 'rk-icon-or-image', icon: 'heart', size: 'lg' %}
+{% render 'rk-icon-or-image', image: block.settings.image_upload, size: 'custom', custom_width: 48 %}
+```
 
 ---
 
@@ -330,6 +396,48 @@ Shapes: `text` \| `circle` \| `rect`
 
 ---
 
+#### `rk-reveal`
+**Arquivo:** `snippets/rk-reveal.liquid`
+**Controller:** `assets/rk-reveal.js` → `<rk-reveal-element>`
+**Descrição:** Wrapper de revelação progressiva por scroll. Aplica animações de fade-in com slide direcional usando IntersectionObserver. Suporta stagger (cascata) entre filhos para efeito sequencial.
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `animation` | string | `fade-up` | `fade-up` \| `fade-down` \| `fade-left` \| `fade-right` \| `fade` \| `zoom` |
+| `duration` | number | `600` | Duração da animação em ms |
+| `delay` | number | `0` | Atraso antes de iniciar em ms |
+| `stagger` | number | `0` | Atraso incremental entre filhos diretos em ms (0 = desativado) |
+| `threshold` | number | `0.1` | Percentual visível para disparar (0.0 a 1.0) |
+| `easing` | string | `cubic-bezier(0.16, 1, 0.3, 1)` | CSS easing function |
+| `once` | boolean | `true` | Anima apenas uma vez |
+| `content` | string | — | HTML do conteúdo interno |
+| `custom_class` | string | — | Classes extras |
+| `tag` | string | `div` | Tag HTML do wrapper interno |
+
+**Exemplo simples:**
+```liquid
+{% capture banner %}
+  <h2>Bem-vindo</h2>
+{% endcapture %}
+{% render 'rk-reveal', content: banner, animation: 'fade-up' %}
+```
+
+**Exemplo com stagger (cascata):**
+```liquid
+{% capture cards %}
+  <div>Card 1</div>
+  <div>Card 2</div>
+  <div>Card 3</div>
+{% endcapture %}
+{% render 'rk-reveal', content: cards, animation: 'fade-up', stagger: 100, delay: 100 %}
+```
+
+**Acessibilidade:** Respeita `prefers-reduced-motion: reduce` — se ativo, o conteúdo é exibido imediatamente sem animação.
+
+**Custom Event:** `rk:reveal:visible` → `{ animation }`
+
+---
+
 ### 5.2 Moléculas
 
 #### `rk-price`
@@ -421,22 +529,52 @@ Shapes: `text` \| `circle` \| `rect`
 
 ---
 
-#### `rk-modal`
+#### `rk-modal` (Media Lightbox)
 **Arquivo:** `snippets/rk-modal.liquid`
 **Controller:** `assets/rk-modal.js` → `<rk-modal-element>`
-**Descrição:** Dialog base com overlay, trap focus, ESC key e scroll lock.
+**Descrição:** Lightbox de mídia especializado para imagens, vídeos hospedados, YouTube, Vimeo e HTML customizado. Suporta lazy-loading de iframes, autoplay, overlay escuro (85% opacidade), ESC key e scroll lock.
 
-| Prop | Tipo | Default |
-|---|---|---|
-| `id` | string | — |
-| `content` | string | — |
-| `title` | string | — |
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `id` | string | — | ID único do modal (obrigatório) |
+| `type` | string | `image` | `image` \| `video` \| `youtube` \| `vimeo` \| `html` |
+| `image` | object | — | Objeto imagem Shopify (para type: `image`) |
+| `video_url` | string | — | URL do arquivo .mp4 (para type: `video`) |
+| `youtube_id` | string | — | ID do vídeo YouTube (para type: `youtube`) |
+| `vimeo_id` | string | — | ID do vídeo Vimeo (para type: `vimeo`) |
+| `content` | string | — | HTML customizado (para type: `html`) |
+| `alt` | string | — | Texto alternativo / aria-label |
+| `aspect_ratio` | string | `16/9` | Aspect ratio para vídeos |
+| `autoplay` | boolean | `true` | Autoplay ao abrir |
+| `custom_class` | string | — | Classes CSS extras |
 
 **Para abrir externamente:** Usar `data-modal-open="ID_DO_MODAL"` em qualquer botão.
 
+**Exemplo:**
+```liquid
+{%- comment -%} Lightbox de imagem {%- endcomment -%}
+{% render 'rk-modal', id: 'product-zoom', type: 'image', image: product.featured_image, alt: product.title %}
+
+{%- comment -%} Vídeo YouTube {%- endcomment -%}
+{% render 'rk-modal', id: 'brand-video', type: 'youtube', youtube_id: 'dQw4w9WgXcQ' %}
+
+{%- comment -%} Vídeo hospedado {%- endcomment -%}
+{% render 'rk-modal', id: 'story', type: 'video', video_url: video_source, autoplay: true %}
+
+{%- comment -%} HTML customizado {%- endcomment -%}
+{% render 'rk-modal', id: 'custom', type: 'html', content: '<p>Conteúdo aqui</p>' %}
+```
+
+**Comportamento Técnico:**
+- Iframes (YouTube/Vimeo) usam `data-src` para lazy-loading (carregam apenas ao abrir)
+- YouTube: `https://www.youtube.com/embed/{ID}?rel=0&enablejsapi=1`
+- Vimeo: `https://player.vimeo.com/video/{ID}?title=0&byline=0&portrait=0`
+- Vídeos hospedados usam `<video>` com `preload="metadata"`
+- Ao fechar: pausa vídeos e limpa src de iframes para prevenir reprodução em background
+
 **Custom Events:**
-- `rk:modal:open` → `{ id }`
-- `rk:modal:close` → `{ id }`
+- `rk:modal:open` → `{ id, type }`
+- `rk:modal:close` → `{ id, type }`
 
 ---
 
@@ -608,6 +746,49 @@ Shapes: `text` \| `circle` \| `rect`
 
 ---
 
+#### `rk-alert-dialog`
+**Arquivo:** `snippets/rk-alert-dialog.liquid`
+**Controller:** `assets/rk-alert-dialog.js` → `<rk-alert-dialog-element>`
+**Descrição:** Dialog de confirmação crítica (estilo Shadcn/UI AlertDialog). Diferente do Dialog padrão: **não fecha ao clicar no overlay**, foca o botão Cancelar por padrão (segurança) e usa `role="alertdialog"` para tecnologias assistivas.
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `id` | string | — | ID único do alert dialog |
+| `title` | string | — | Título do alerta (obrigatório) |
+| `description` | string | — | Texto explicativo sobre consequências |
+| `cancel_text` | string | `Cancelar` | Texto do botão cancelar |
+| `confirm_text` | string | `Confirmar` | Texto do botão confirmar |
+| `confirm_style` | string | `primary` | Estilo rk-button do botão confirmar |
+| `esc_close` | boolean | `true` | Permite ESC para fechar |
+| `custom_class` | string | — | Classes CSS extras |
+
+**Para abrir externamente:** Usar `data-alert-dialog-open="ID"` em qualquer botão.
+
+**Exemplo:**
+```liquid
+{% render 'rk-alert-dialog',
+  id: 'delete-account',
+  title: 'Você tem certeza absoluta?',
+  description: 'Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta.',
+  cancel_text: 'Cancelar',
+  confirm_text: 'Excluir Conta',
+  confirm_style: 'danger'
+%}
+```
+
+**Diferenças do `rk-dialog`:**
+- Overlay **não é clicável** (não fecha ao clicar fora)
+- Foca o botão **Cancelar** por padrão (segurança contra confirmações acidentais)
+- Usa `role="alertdialog"` em vez de `role="dialog"`
+- Botão confirmar **não auto-fecha** — emite evento `rk:alert-dialog:confirm` para que o consumidor decida (ex: estado de loading)
+
+**Custom Events:**
+- `rk:alert-dialog:open` → `{ id }`
+- `rk:alert-dialog:close` → `{ id, reason }` (reason: `'cancel'`)
+- `rk:alert-dialog:confirm` → `{ id }` (emitido ao clicar confirmar, sem auto-close)
+
+---
+
 #### `rk-sheet`
 **Arquivo:** `snippets/rk-sheet.liquid`
 **Controller:** `assets/rk-sheet.js` → `<rk-sheet-element>`
@@ -902,13 +1083,17 @@ Shapes: `text` \| `circle` \| `rect`
 | `updateButtons()` | Habilita/desabilita botões nos limites |
 | `dispatchChange()` | Emite `rk:quantity:change` com o novo valor |
 
-### 6.2 `rk-modal.js` → `<rk-modal-element>`
+### 6.2 `rk-modal.js` → `<rk-modal-element>` (Media Lightbox)
 
 | Método | Descrição |
 |---|---|
-| `open()` | Abre o modal, trava scroll e foca |
-| `close()` | Fecha o modal, restaura scroll e focus |
-| `isOpen()` | Verifica se o modal está ativo |
+| `open()` | Abre o lightbox, carrega mídia (lazy iframes), trava scroll e foca |
+| `close()` | Fecha o lightbox, para mídia, limpa iframes, restaura scroll e focus |
+| `isOpen()` | Verifica se o lightbox está ativo |
+| `_loadIframes()` | Lazy-load de iframes YouTube/Vimeo via `data-src` com autoplay |
+| `_playMedia()` | Play de vídeo hospedado se autoplay ativo |
+| `_stopMedia()` | Pausa vídeos e limpa src de iframes ao fechar |
+| `_setupOpenTriggers()` | Vincula triggers `[data-modal-open="ID"]` da página |
 
 ### 6.3 `rk-accordion.js` → `<rk-accordion-element>`
 
@@ -963,7 +1148,16 @@ Shapes: `text` \| `circle` \| `rect`
 | `_trapFocus(e)` | Tab trap: wraps entre first/last focusable |
 | `_onKeyDown(e)` | ESC dismiss + Tab trap handler |
 
-### 6.8 `rk-sheet.js` → `<rk-sheet-element>`
+### 6.8 `rk-alert-dialog.js` → `<rk-alert-dialog-element>`
+
+| Método | Descrição |
+|---|---|
+| `open()` | Abre o alert dialog, trava scroll e foca o botão Cancelar |
+| `close(reason)` | Fecha o alert dialog, restaura scroll e focus (reason: `'cancel'`) |
+| `isOpen()` | Verifica se o alert dialog está ativo |
+| `_setupOpenTriggers()` | Vincula triggers `[data-alert-dialog-open="ID"]` |
+
+### 6.9 `rk-sheet.js` → `<rk-sheet-element>`
 
 | Método | Descrição |
 |---|---|
@@ -973,14 +1167,14 @@ Shapes: `text` \| `circle` \| `rect`
 | `_trapFocus(e)` | Tab trap: wraps entre first/last focusable |
 | `_onKeyDown(e)` | ESC dismiss + Tab trap handler |
 
-### 6.9 `rk-tabs.js` → `<rk-tabs-element>`
+### 6.10 `rk-tabs.js` → `<rk-tabs-element>`
 
 | Método | Descrição |
 |---|---|
 | `activateTab(id, focus)` | Ativa a tab correspondente e oculta demais painéis |
 | `_onKeyDown()` | Gerencia navegação de teclado (Setas, Home, End) |
 
-### 6.10 `rk-toggle.js` → `<rk-toggle-element>` e `<rk-toggle-group>`
+### 6.11 `rk-toggle.js` → `<rk-toggle-element>` e `<rk-toggle-group>`
 
 | Método (Toggle) | Descrição |
 |---|---|
@@ -993,7 +1187,7 @@ Shapes: `text` \| `circle` \| `rect`
 | `_handleMultiple()` | Lógica de checkbox |
 | `_emitChange()` | Dispara o valor final atualizado do grupo |
 
-### 6.11 `rk-progress.js` → `<rk-progress-element>`
+### 6.12 `rk-progress.js` → `<rk-progress-element>`
 
 | Método / Getter | Descrição |
 |---|---|
@@ -1001,7 +1195,7 @@ Shapes: `text` \| `circle` \| `rect`
 | `max` (getter/setter) | Define teto via dataset |
 | `_updateIndicator()` | Calcula `(value/max)*100` e converte em `transform: translateX()` |
 
-### 6.12 `rk-collapsible.js` → `<rk-collapsible-element>`
+### 6.13 `rk-collapsible.js` → `<rk-collapsible-element>`
 
 | Método | Descrição |
 |---|---|
@@ -1010,7 +1204,7 @@ Shapes: `text` \| `circle` \| `rect`
 | `toggle()` | Alterna estado atual |
 | `_syncState()` | Gerencia `<rk-collapsible__content--expanded>`, foca/desfoca tabindex |
 
-### 6.13 `rk-carousel.js` → `<rk-carousel-element>`
+### 6.14 `rk-carousel.js` → `<rk-carousel-element>`
 
 | Método / Feature | Descrição |
 |---|---|
@@ -1018,13 +1212,25 @@ Shapes: `text` \| `circle` \| `rect`
 | `_initSwiper()` | Combina opções em dataset com o object `this.options` do Swiper |
 | `ResizeObserver` | Garante que se o Carousel for redimensionado (ex. em tabs) ele ajuste `swiper.update()` |
 
-### 6.14 `rk-bottom-app-bar.js` → `<rk-bottom-app-bar-element>`
+### 6.15 `rk-bottom-app-bar.js` → `<rk-bottom-app-bar-element>`
 
 | Método / Feature | Descrição |
 |---|---|
 | `_onKeyDown(e)` | Ouve Setas Direita/Esquerda para mover Foco entre itens `[role="menuitem"]` |
 | `Tabindex Manager` | Troca dinamicamente tabindex="-1" e "0" mantendo padrão Roving Tabindex A11y |
 
+### 6.16 `rk-reveal.js` → `<rk-reveal-element>`
+
+| Método / Feature | Descrição |
+|---|---|
+| `_applyInitialState()` | Define opacity: 0 e transform inicial baseado no tipo de animação |
+| `_reveal()` | Dispara a animação de revelação (single ou stagger) |
+| `_revealSingle()` | Anima o content wrapper como bloco único |
+| `_revealWithStagger()` | Anima cada filho direto com delay incremental (cascata) |
+| `_hide()` | Reseta o estado (quando `once: false`) para re-animação |
+| `_revealImmediate()` | Exibe sem animação (prefers-reduced-motion) |
+| `IntersectionObserver` | Detecta quando o elemento entra na viewport para disparar a revelação |
+
 ---
 
 ## 7. Guia de Integração com o Tema
@@ -1211,4 +1417,4 @@ O sistema de scaling é definido em `rk-framework-tokens.css`:
 
 ---
 
-*Versão: 1.1.0 — Última atualização: 05/03/2026*
+*Versão: 1.2.0 — Última atualização: 15/03/2026*

package/rook-framework/assets/rk-framework-core.css

@@ -276,6 +276,19 @@
     --rk-icon-size: 32px;
 }
 
+.rk-icon__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.rk-icon-block__link {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
+}
+
 /* --------------------------------------------------------------------------
    rk-input (Input)
    -------------------------------------------------------------------------- */
@@ -705,7 +718,7 @@
 }
 
 /* --------------------------------------------------------------------------
-   rk-modal (Modal)
+   rk-modal (Media Lightbox)
    -------------------------------------------------------------------------- */
 .rk-modal {
     position: fixed;
@@ -729,42 +742,105 @@
 .rk-modal__overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(4px);
 }
 
 .rk-modal__content {
     position: relative;
     z-index: 1;
-    background: #fff;
-    border-radius: var(--rk-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     max-width: 90vw;
     max-height: 90vh;
-    overflow-y: auto;
-    padding: var(--rk-space-lg);
-    transform: translateY(16px);
+    transform: scale(0.95);
     transition: transform var(--rk-transition);
 }
 
 .rk-modal--active .rk-modal__content {
-    transform: translateY(0);
+    transform: scale(1);
 }
 
 .rk-modal__close {
-    position: absolute;
-    top: var(--rk-space-sm);
-    right: var(--rk-space-sm);
-    background: none;
+    position: fixed;
+    top: var(--rk-space-md);
+    right: var(--rk-space-md);
+    z-index: 2;
+    background: rgba(0, 0, 0, 0.5);
     border: none;
     cursor: pointer;
-    color: var(--rk-color-text-muted);
-    padding: var(--rk-space-2xs);
+    color: #fff;
+    padding: var(--rk-space-xs);
     border-radius: 50%;
     transition: background-color var(--rk-transition);
+    line-height: 0;
 }
 
 .rk-modal__close:hover {
-    background-color: var(--rk-color-secondary-hover);
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Media containers */
+.rk-modal__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.rk-modal__media--image {
+    max-width: 90vw;
+    max-height: 90vh;
+}
+
+.rk-modal__img {
+    display: block;
+    max-width: 90vw;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--rk-radius-sm, 4px);
+}
+
+.rk-modal__media--video,
+.rk-modal__media--embed {
+    width: min(90vw, 1200px);
+    max-height: 90vh;
+    border-radius: var(--rk-radius-sm, 4px);
+    overflow: hidden;
+    background: #000;
+}
+
+.rk-modal__video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.rk-modal__iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.rk-modal__media--html {
+    background: #fff;
+    border-radius: var(--rk-radius);
+    padding: var(--rk-space-lg);
+    max-width: min(90vw, 800px);
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+@media (max-width: 749px) {
+    .rk-modal__media--video,
+    .rk-modal__media--embed {
+        width: 100vw;
+        border-radius: 0;
+    }
 }
 
 /* --------------------------------------------------------------------------
@@ -2538,6 +2614,17 @@ a.rk-card {
     height: 32px;
 }
 
+/* --------------------------------------------------------------------------
+   rk-reveal (Scroll Reveal Animation)
+   -------------------------------------------------------------------------- */
+.rk-reveal {
+    display: block;
+}
+
+.rk-reveal__content {
+    will-change: opacity, transform;
+}
+
 /* --------------------------------------------------------------------------
    rk-sr-only (Screen Reader Only utility)
    -------------------------------------------------------------------------- */