rook-cli 1.3.2 → 1.3.4

package/rook-framework/snippets/rk-item.liquid

@@ -0,0 +1,69 @@
+{% doc %}
+  Snippet: RkItem
+  Componente base de lista/menu (List Item / Menu Item) com suporte a ícones, atalhos, e estados interativos.
+
+  @param {string} [as] - Tag HTML (ex: 'div', 'li', 'a', 'button'). Padrão: 'div'
+  @param {string} [href] - URL caso `as: 'a'`.
+  @param {string} [role] - Papel ARIA (ex: 'menuitem', 'option', 'listitem').
+  @param {boolean} [interactive] - Se true, aplica estilos de hover/focus. Automático se for link/button.
+  @param {boolean} [selected] - Se true, marca como visualmente ativo/selecionado (aria-selected="true").
+  @param {boolean} [disabled] - Se true, desativa a interação (aria-disabled="true").
+  @param {string} [leading] - Ícone ou elemento injetado à esquerda.
+  @param {string} [content] - Texto principal do item.
+  @param {string} [description] - Texto secundário menor exibido abaixo do content.
+  @param {string} [trailing] - Elemento injetado à direita (atalhos de teclado, chevron, check).
+  @param {string} [custom_class] - Classes CSS extras.
+
+  @example
+  {% render 'rk-item',
+    as: 'button',
+    leading: '<svg>...</svg>',
+    content: 'Configurações',
+    trailing: '<span class="text-sm text-muted">⌘S</span>',
+    interactive: true
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_as = as | default: 'div'
+  
+  assign is_link = false
+  if t_as == 'a' and href != blank
+    assign is_link = true
+  endif
+
+  assign is_interactive = false
+  if interactive == true or interactive == 'true' or is_link or t_as == 'button'
+    assign is_interactive = true
+  endif
+-%}
+
+<{{ t_as }}
+  class="rk-item{% if is_interactive %} rk-item--interactive{% endif %}{% if selected %} rk-item--selected{% endif %}{% if disabled %} rk-item--disabled{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if role %}role="{{ role }}"{% endif %}
+  {% if is_link %}href="{{ href }}"{% endif %}
+  {% if selected %}aria-selected="true"{% endif %}
+  {% if disabled %}aria-disabled="true" tabindex="-1"{% endif %}
+  {% if t_as == 'button' and disabled %}disabled{% endif %}
+>
+  {%- if leading != blank -%}
+    <span class="rk-item__leading">
+      {{ leading }}
+    </span>
+  {%- endif -%}
+
+  <span class="rk-item__main">
+    {%- if content != blank -%}
+      <span class="rk-item__content">{{ content }}</span>
+    {%- endif -%}
+    {%- if description != blank -%}
+      <span class="rk-item__description">{{ description }}</span>
+    {%- endif -%}
+  </span>
+
+  {%- if trailing != blank -%}
+    <span class="rk-item__trailing">
+      {{ trailing }}
+    </span>
+  {%- endif -%}
+</{{ t_as }}>

package/rook-framework/snippets/rk-layout-style.liquid

@@ -0,0 +1,37 @@
+{%- doc -%}
+  Renders CSS variables for layout/panel styles including flex direction, alignment, gap and wrapping.
+  Portable equivalent of Horizon's `layout-panel-style.liquid` with `rk-` prefixed variables.
+
+  @param {object} settings - The block or section settings object containing layout values
+
+  Settings keys used:
+    - settings.content_direction: 'row' | 'column' (default: 'column')
+    - settings.horizontal_alignment: CSS justify-content value
+    - settings.vertical_alignment: CSS align-items value
+    - settings.gap: number (px)
+
+  @example
+  <div class="rk-layout-style" style="{% render 'rk-layout-style', settings: block.settings %}">
+{%- enddoc -%}
+
+{%- liquid
+  assign rk_h_align = settings.horizontal_alignment
+  assign rk_v_align = settings.vertical_alignment
+
+  unless settings.content_direction == 'row'
+    if settings.horizontal_alignment_flex_direction_column != blank
+      assign rk_h_align = settings.horizontal_alignment_flex_direction_column
+    endif
+    if settings.vertical_alignment_flex_direction_column != blank
+      assign rk_v_align = settings.vertical_alignment_flex_direction_column
+    endif
+  endunless
+-%}
+
+--rk-flex-direction: {{ settings.content_direction | default: 'column' }};
+--rk-flex-wrap: nowrap;
+--rk-flex-wrap-mobile: wrap;
+--rk-h-align: {{ rk_h_align }};
+--rk-v-align: {{ rk_v_align }};
+
+{% render 'rk-gap-style', value: settings.gap %}

package/rook-framework/snippets/rk-modal.liquid

@@ -0,0 +1,31 @@
+{% doc %}
+  Snippet: RkModal
+  Renders a modal/dialog wrapper using a Web Component.
+
+  @param {string} id - Unique modal id
+  @param {string} content - HTML content of the modal
+  @param {string} [title] - Optional title
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-modal', id: 'my-modal', title: 'Quick View', content: some_html %}
+{% enddoc %}
+
+<rk-modal-element data-modal-id="{{ id }}">
+  <div id="{{ id }}" class="rk-modal{% if custom_class %} {{ custom_class }}{% endif %}">
+    <div class="rk-modal__overlay" data-action="close"></div>
+    <div class="rk-modal__content" role="dialog" aria-modal="true" {% if title %}aria-label="{{ title }}"{% endif %}>
+      <button type="button" class="rk-modal__close" data-action="close" aria-label="Fechar">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+
+      {% if title %}
+        <h2 class="rk-typography rk-typography--lg rk-typography--bold" style="margin-bottom: var(--rk-space-md);">{{ title }}</h2>
+      {% endif %}
+
+      {{ content }}
+    </div>
+  </div>
+</rk-modal-element>

package/rook-framework/snippets/rk-pix-discount.liquid

@@ -0,0 +1,34 @@
+{% doc %}
+  Snippet: RkPixDiscount
+  Renders the Pix discount price reading global settings.
+
+  @param {number} price - Price in cents to apply discount
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-pix-discount', price: product.selected_or_first_available_variant.price %}
+{% enddoc %}
+
+{%- liquid
+  unless settings.rk_pix_enabled
+    break
+  endunless
+
+  assign pix_discount_pct = settings.rk_pix_discount | default: 5
+  assign pix_label = settings.rk_pix_label | default: 'no Pix'
+
+  assign discount_multiplier = 100 | minus: pix_discount_pct
+  assign pix_price = price | times: discount_multiplier | divided_by: 100
+  assign formatted_pix = pix_price | money
+-%}
+
+{% if pix_discount_pct > 0 %}
+  <span class="rk-pix{% if custom_class %} {{ custom_class }}{% endif %}">
+    <svg class="rk-pix__icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+      <path d="M393.8 254.3l-79.3-79.3c-14.7-14.7-38.5-14.7-53.2 0L182 254.3c-14.7 14.7-14.7 38.5 0 53.2l79.3 79.3c14.7 14.7 38.5 14.7 53.2 0l79.3-79.3c14.7-14.7 14.7-38.5 0-53.2zM239.7 346.5L165.9 272.7c-3.9-3.9-3.9-10.2 0-14.1l73.8-73.8c3.9-3.9 10.2-3.9 14.1 0l73.8 73.8c3.9 3.9 3.9 10.2 0 14.1l-73.8 73.8c-3.9 3.9-10.2 3.9-14.1 0z"/>
+    </svg>
+    <span>{{ formatted_pix }}</span>
+    <span>{{ pix_label }}</span>
+    <span class="rk-pix__badge">-{{ pix_discount_pct }}%</span>
+  </span>
+{% endif %}

package/rook-framework/snippets/rk-popover.liquid

@@ -0,0 +1,77 @@
+{% doc %}
+  Snippet: RkPopover
+  Renders a Popover component (floating overlay triggered by click).
+  Uses Web Component <rk-popover-element> for behaviour.
+
+  @param {string} id - Unique popover id
+  @param {string} [side] - Preferred side: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom')
+  @param {string} [align] - Alignment: 'start' | 'center' | 'end' (default: 'center')
+  @param {number} [side_offset] - Distance from trigger in px (default: 8)
+  @param {number} [align_offset] - Lateral shift in px (default: 0)
+  @param {boolean} [show_arrow] - Show pointing arrow (default: true)
+  @param {string} [title] - Optional header title
+  @param {string} [description] - Optional header description
+  @param {string} [trigger_content] - HTML for the trigger element
+  @param {string} [body] - HTML for the body content
+  @param {string} [custom_class] - Extra CSS classes for the content container
+  @param {string} [width] - Content container width (e.g. '320px')
+
+  @example
+  {% capture popover_trigger %}
+    {% render 'rk-button', text: 'Open Popover', style: 'outline', size: 'sm' %}
+  {% endcapture %}
+  {% capture popover_body %}
+    <p>Any rich content here</p>
+  {% endcapture %}
+  {% render 'rk-popover', id: 'my-pop', trigger_content: popover_trigger, body: popover_body, title: 'Settings' %}
+{% enddoc %}
+
+{%- liquid
+  assign pop_side = side | default: 'bottom'
+  assign pop_align = align | default: 'center'
+  assign pop_side_offset = side_offset | default: 8
+  assign pop_align_offset = align_offset | default: 0
+  assign pop_show_arrow = show_arrow | default: true
+-%}
+
+<rk-popover-element
+  data-side="{{ pop_side }}"
+  data-align="{{ pop_align }}"
+  data-side-offset="{{ pop_side_offset }}"
+  data-align-offset="{{ pop_align_offset }}"
+  class="rk-popover"
+>
+  {%- comment -%} Trigger Area {%- endcomment -%}
+  <div data-rk-popover-trigger class="rk-popover__trigger">
+    {{ trigger_content }}
+  </div>
+
+  {%- comment -%} Content Container {%- endcomment -%}
+  <div
+    id="{{ id }}"
+    class="rk-popover__content{% if custom_class %} {{ custom_class }}{% endif %}"
+    role="dialog"
+    aria-modal="false"
+    {% if title %}aria-label="{{ title }}"{% endif %}
+    {% if width %}style="--rk-popover-width: {{ width }};"{% endif %}
+  >
+    {%- if pop_show_arrow -%}
+      <div class="rk-popover__arrow"></div>
+    {%- endif -%}
+
+    {%- if title or description -%}
+      <div class="rk-popover__header">
+        {%- if title -%}
+          <h3 class="rk-popover__title">{{ title }}</h3>
+        {%- endif -%}
+        {%- if description -%}
+          <p class="rk-popover__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+
+    <div class="rk-popover__body">
+      {{ body }}
+    </div>
+  </div>
+</rk-popover-element>

package/rook-framework/snippets/rk-price.liquid

@@ -0,0 +1,48 @@
+{% doc %}
+  Snippet: RkPrice
+  Renders a configurable price display with optional promotional/compare pricing.
+
+  @param {object} product - The product object
+  @param {boolean} [from] - Show "A partir de" prefix
+  @param {boolean} [show_compare] - Force show compare-at price
+  @param {string} [compare_position] - 'before' | 'after' (default: 'before')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-price', product: product, from: true %}
+{% enddoc %}
+
+{%- liquid
+  assign selected_variant = product.selected_or_first_available_variant
+  assign current_price = selected_variant.price
+  assign compare_price = selected_variant.compare_at_price
+  assign cmp_position = compare_position | default: 'before'
+
+  assign is_on_sale = false
+  if compare_price > current_price
+    assign is_on_sale = true
+  endif
+
+  if product == blank
+    assign current_price = 1999
+  endif
+
+  assign formatted_price = current_price | money
+  assign formatted_compare = compare_price | money
+-%}
+
+<div class="rk-price{% if is_on_sale %} rk-price--sale{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}">
+  {%- if from -%}
+    <span class="rk-price__from">A partir de</span>
+  {%- endif -%}
+
+  {%- if is_on_sale and cmp_position == 'before' -%}
+    <span class="rk-price__compare">{{ formatted_compare }}</span>
+  {%- endif -%}
+
+  <span class="rk-price__current">{{ formatted_price }}</span>
+
+  {%- if is_on_sale and cmp_position == 'after' -%}
+    <span class="rk-price__compare">{{ formatted_compare }}</span>
+  {%- endif -%}
+</div>

package/rook-framework/snippets/rk-progress.liquid

@@ -0,0 +1,38 @@
+{% doc %}
+  Snippet: RkProgress
+  Renders a visual Progress Bar (Shadcn/UI pattern).
+  The Web Component `<rk-progress-element>` animates changes using CSS transform.
+
+  @param {number} value - Current progress value
+  @param {number} [max] - Maximum progress value (default: 100)
+  @param {string} [id] - Unique id for accessibility linking
+  @param {string} [aria_label] - Describe the context for screen readers
+  @param {string} [custom_class] - Extra CSS classes for sizing or coloring
+
+  @example
+  {% render 'rk-progress', value: 45, aria_label: 'Progresso do Frete Grátis' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_value = value | default: 0
+  assign t_max = max | default: 100
+-%}
+
+<rk-progress-element
+  data-value="{{ t_value }}"
+  data-max="{{ t_max }}"
+  {% if id %}id="{{ id }}"{% endif %}
+  class="rk-progress{% if custom_class %} {{ custom_class }}{% endif %}"
+>
+  <div 
+    class="rk-progress__track"
+    role="progressbar"
+    aria-valuenow="{{ t_value }}"
+    aria-valuemin="0"
+    aria-valuemax="{{ t_max }}"
+    aria-valuetext="{{ t_value }} de {{ t_max }}"
+    {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
+  >
+    <div class="rk-progress__indicator"></div>
+  </div>
+</rk-progress-element>

package/rook-framework/snippets/rk-quantity.liquid

@@ -0,0 +1,56 @@
+{% doc %}
+  Snippet: RkQuantity
+  Renders a quantity selector wrapped in a Web Component.
+
+  @param {number} [value] - Initial quantity (default: 1)
+  @param {number} [min] - Minimum value (default: 1)
+  @param {number} [max] - Maximum value
+  @param {number} [step] - Step increment (default: 1)
+  @param {string} [name] - Input name attribute (default: 'quantity')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-quantity', value: 1, min: 1, max: 10 %}
+{% enddoc %}
+
+{%- liquid
+  assign qty_value = value | default: 1
+  assign qty_min = min | default: 1
+  assign qty_step = step | default: 1
+  assign qty_name = name | default: 'quantity'
+-%}
+
+<rk-quantity-selector class="rk-quantity{% if custom_class %} {{ custom_class }}{% endif %}">
+  <button
+    type="button"
+    class="rk-quantity__btn"
+    data-type="minus"
+    aria-label="{{ 'accessibility.decrease_quantity' | t | default: 'Diminuir quantidade' }}"
+    {% if qty_value <= qty_min %}disabled{% endif %}
+  >
+    <span aria-hidden="true">−</span>
+  </button>
+
+  <input
+    type="number"
+    class="rk-quantity__input"
+    name="{{ qty_name }}"
+    value="{{ qty_value }}"
+    min="{{ qty_min }}"
+    {% if max %}max="{{ max }}"{% endif %}
+    step="{{ qty_step }}"
+    aria-label="{{ 'accessibility.quantity' | t | default: 'Quantidade' }}"
+    inputmode="numeric"
+    pattern="[0-9]*"
+  >
+
+  <button
+    type="button"
+    class="rk-quantity__btn"
+    data-type="plus"
+    aria-label="{{ 'accessibility.increase_quantity' | t | default: 'Aumentar quantidade' }}"
+    {% if max and qty_value >= max %}disabled{% endif %}
+  >
+    <span aria-hidden="true">+</span>
+  </button>
+</rk-quantity-selector>

package/rook-framework/snippets/rk-quick-add.liquid

@@ -0,0 +1,67 @@
+{% doc %}
+  Snippet: RkQuickAdd
+  Renders an "Add to Cart" button with optional quantity selector.
+  ⚠️ EXCEPTION: This component is coupled to Horizon's quick-add.js & events.js.
+
+  @param {object} product - The product object
+  @param {string} section_id - The section ID
+  @param {boolean} [show_quantity] - Shows the rk-quantity selector (default: false)
+  @param {string} [button_text] - Override button text
+  @param {string} [button_style] - rk-button style (default: 'primary')
+  @param {string} [button_size] - rk-button size (default: 'md')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-quick-add', product: product, section_id: section.id, show_quantity: true %}
+{% enddoc %}
+
+{%- liquid
+  assign variant = product.selected_or_first_available_variant
+  assign form_id = 'RkQuickAdd-' | append: product.id | append: '-' | append: section_id
+  assign add_text = button_text | default: 'Adicionar ao Carrinho'
+  assign btn_style = button_style | default: 'primary'
+  assign btn_size = button_size | default: 'md'
+
+  assign can_add = false
+  if variant.available
+    assign can_add = true
+  endif
+-%}
+
+<quick-add-component
+  class="rk-quick-add{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-product-title="{{ product.title }}"
+>
+  <product-form-component
+    data-section-id="{{ section_id }}"
+    data-product-id="{{ product.id }}"
+    on:submit="/handleSubmit"
+  >
+    {%- form 'product', product, id: form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
+      <input type="hidden" name="id" value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>
+
+      {% if show_quantity %}
+        <div style="margin-bottom: var(--rk-space-sm);">
+          {% render 'rk-quantity',
+            value: variant.quantity_rule.min | default: 1,
+            min: variant.quantity_rule.min | default: 1,
+            max: variant.quantity_rule.max,
+            step: variant.quantity_rule.increment | default: 1,
+            name: 'quantity'
+          %}
+        </div>
+      {% else %}
+        <input type="hidden" name="quantity" value="{{ variant.quantity_rule.min | default: 1 }}">
+      {% endif %}
+
+      {% render 'rk-button',
+        text: add_text,
+        type: 'submit',
+        style: btn_style,
+        size: btn_size,
+        disabled: can_add == false,
+        full_width: true
+      %}
+    {%- endform -%}
+  </product-form-component>
+</quick-add-component>

package/rook-framework/snippets/rk-scripts.liquid

@@ -0,0 +1,17 @@
+{% doc %}
+  Snippet: RkScripts
+  Módulo de carregamento concentrado dos web components do Rook UI Core.
+  Garante que todos os controllers JS do framework sejam injetados juntos e de forma organizada,
+  mantendo a arquitetura desacoplada e limpa (SOLID).
+{% enddoc %}
+
+{%- liquid
+  # Lista de componentes JS essenciais do Rook Framework
+  assign rk_components = 'quantity,modal,accordion,popover,scroll-area,drawer,dialog,sheet,tabs,toggle,progress,collapsible,carousel,bottom-app-bar'
+  assign rk_components_array = rk_components | split: ','
+-%}
+
+<!-- [RkScripts] Web Components Controllers -->
+{%- for component in rk_components_array -%}
+  <script src="{{ 'rk-' | append: component | append: '.js' | asset_url }}" defer></script>
+{%- endfor -%}

package/rook-framework/snippets/rk-scroll-area.liquid

@@ -0,0 +1,60 @@
+{% doc %}
+  Snippet: RkScrollArea
+  Renders a custom scroll area with styled scrollbars.
+  Uses Web Component <rk-scroll-area> for behaviour.
+
+  @param {string} [id] - Optional unique id
+  @param {string} [orientation] - 'vertical' | 'horizontal' | 'both' (default: 'vertical')
+  @param {string} [visibility] - 'auto' | 'always' | 'hover' (default: 'auto')
+  @param {string} [height] - Container height CSS value (e.g. '300px', '50vh')
+  @param {string} [width] - Container width CSS value (e.g. '100%')
+  @param {string} [content] - HTML content to display inside the viewport
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture scroll_content %}
+    <p>Long text or list of items here…</p>
+  {% endcapture %}
+  {% render 'rk-scroll-area', height: '300px', content: scroll_content %}
+
+  {% comment %} Horizontal example {% endcomment %}
+  {% render 'rk-scroll-area', orientation: 'horizontal', height: '200px', content: cards_html %}
+{% enddoc %}
+
+{%- liquid
+  assign sa_orientation = orientation | default: 'vertical'
+  assign sa_visibility = visibility | default: 'auto'
+  assign sa_height = height | default: '100%'
+  assign sa_width = width | default: '100%'
+-%}
+
+<rk-scroll-area
+  {% if id %}id="{{ id }}"{% endif %}
+  class="rk-scroll-area{% if sa_visibility == 'always' %} rk-scroll-area--always{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-visibility="{{ sa_visibility }}"
+  style="--rk-scroll-area-height: {{ sa_height }}; --rk-scroll-area-width: {{ sa_width }};"
+>
+  {%- comment -%} Viewport {%- endcomment -%}
+  <div class="rk-scroll-area__viewport" tabindex="0">
+    {{ content }}
+  </div>
+
+  {%- comment -%} Vertical Scrollbar {%- endcomment -%}
+  {%- if sa_orientation == 'vertical' or sa_orientation == 'both' -%}
+    <div class="rk-scroll-area__scrollbar rk-scroll-area__scrollbar--vertical">
+      <div class="rk-scroll-area__thumb"></div>
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Horizontal Scrollbar {%- endcomment -%}
+  {%- if sa_orientation == 'horizontal' or sa_orientation == 'both' -%}
+    <div class="rk-scroll-area__scrollbar rk-scroll-area__scrollbar--horizontal">
+      <div class="rk-scroll-area__thumb"></div>
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Corner (only when both axes) {%- endcomment -%}
+  {%- if sa_orientation == 'both' -%}
+    <div class="rk-scroll-area__corner"></div>
+  {%- endif -%}
+</rk-scroll-area>

package/rook-framework/snippets/rk-sheet.liquid

@@ -0,0 +1,86 @@
+{% doc %}
+  Snippet: RkSheet
+  Renders a Sheet / Side Panel that slides from the viewport edges.
+  Uses Web Component <rk-sheet-element> for behaviour.
+
+  Unlike the Drawer, the Sheet occupies the full height/width of the viewport
+  and is designed for deeper interactions (filters, forms, navigation menus).
+
+  @param {string} id - Unique sheet id (required)
+  @param {string} [side] - 'right' | 'left' | 'top' | 'bottom' (default: 'right')
+  @param {string} [size] - Panel width/height CSS value (default: '400px')
+  @param {string} title - Sheet title (required for a11y)
+  @param {string} [description] - Header description / subtitle
+  @param {string} [body] - HTML for the body content
+  @param {string} [footer] - HTML for the footer (action buttons)
+  @param {boolean} [overlay_close] - Close on overlay click (default: true)
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture sheet_body %}
+    <form>...</form>
+  {% endcapture %}
+  {% capture sheet_footer %}
+    {% render 'rk-button', text: 'Salvar Alterações', style: 'primary', full_width: true %}
+  {% endcapture %}
+  {% render 'rk-sheet', id: 'filters-panel', side: 'right', size: '420px', title: 'Filtros', body: sheet_body, footer: sheet_footer %}
+
+  {% comment %} Navigation menu {% endcomment %}
+  {% render 'rk-sheet', id: 'nav-menu', side: 'left', title: 'Menu', body: nav_html %}
+{% enddoc %}
+
+{%- liquid
+  assign s_side = side | default: 'right'
+  assign s_size = size | default: '400px'
+  assign s_overlay_close = overlay_close | default: true
+-%}
+
+{%- capture title_id -%}{{ id }}-title{%- endcapture -%}
+{%- capture desc_id -%}{{ id }}-desc{%- endcapture -%}
+
+<rk-sheet-element
+  data-sheet-id="{{ id }}"
+  data-overlay-close="{{ s_overlay_close }}"
+>
+  <div id="{{ id }}" class="rk-sheet{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
+    <div class="rk-sheet__overlay"></div>
+
+    {%- comment -%} Panel {%- endcomment -%}
+    <div
+      class="rk-sheet__panel rk-sheet__panel--{{ s_side }}"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="{{ title_id }}"
+      {% if description %}aria-describedby="{{ desc_id }}"{% endif %}
+      style="--rk-sheet-size: {{ s_size }};"
+    >
+      {%- comment -%} Close button {%- endcomment -%}
+      <button type="button" class="rk-sheet__close" data-action="close" aria-label="Fechar">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+
+      {%- comment -%} Header {%- endcomment -%}
+      <div class="rk-sheet__header">
+        <h2 id="{{ title_id }}" class="rk-sheet__title">{{ title }}</h2>
+        {%- if description -%}
+          <p id="{{ desc_id }}" class="rk-sheet__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+
+      {%- comment -%} Body {%- endcomment -%}
+      <div class="rk-sheet__body">
+        {{ body }}
+      </div>
+
+      {%- comment -%} Footer {%- endcomment -%}
+      {%- if footer -%}
+        <div class="rk-sheet__footer">
+          {{ footer }}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</rk-sheet-element>