rook-cli 1.3.2 → 1.3.5

package/rook-framework/snippets/rk-form-field.liquid

@@ -0,0 +1,83 @@
+{% doc %}
+  Snippet: RkFormField
+  Componente estrutural para agrupar campos de formulário (Label + Input + Descrição + Mensagem de Erro).
+  Gerencia automaticamente as associações WAI-ARIA com base no ID fornecido.
+
+  @param {string} id - O ID único base para o controle (Ex: 'customer_email'). O input dentro deve usar esse ID.
+  @param {string} label - O texto do label.
+  @param {string} control - Elemento transcluído de marcação (ex: `<input>`, `<select>`, `<textarea>`).
+  @param {string} [description] - Texto descritivo/ajuda opcional para guiar o preenchimento.
+  @param {string} [error] - Se presente, o campo entra em estado de erro e exibe esta mensagem.
+  @param {boolean} [required] - Se true, exibe o indicador (asterisco) de campo obrigatório.
+  @param {string} [layout] - 'vertical' (padrão) ou 'horizontal'.
+
+  @example
+  {% capture control_input %}
+    <input type="email" id="email" name="customer[email]" class="rk-input" required>
+  {% endcapture %}
+
+  {% render 'rk-form-field',
+    id: 'email',
+    label: 'Endereço de E-mail',
+    control: control_input,
+    description: 'Nós nunca compartilharemos o seu e-mail.',
+    required: true
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_layout = layout | default: 'vertical'
+  assign has_error = false
+  if error != blank
+    assign has_error = true
+  endif
+
+  assign description_id = id | append: '-description'
+  assign error_id = id | append: '-error'
+-%}
+
+<div class="rk-form-field rk-form-field--{{ t_layout }}{% if has_error %} rk-form-field--error{% endif %}">
+  
+  {%- comment -%} ==========================================
+      1. LABEL AREA
+  ========================================== {%- endcomment -%}
+  <label for="{{ id }}" class="rk-form-field__label">
+    {{ label }}
+    {%- if required -%}
+      <span class="rk-form-field__required" aria-hidden="true">*</span>
+    {%- endif -%}
+  </label>
+
+  {%- comment -%} ==========================================
+      2. CONTROL WRAPPER (Adicionando ARIA associations ao filho)
+  ========================================== {%- endcomment -%}
+  <div 
+    class="rk-form-field__control"
+    {%- comment -%}
+      Como Liquid não parseia o conteúdo de `control` para injetar ATRIBUTOS facilmente
+      nós deixamos como wrapper. Recomendado que no arquivo que chamou adicione navativamente 
+      se o WAI ARIA total for crítico. Mas o wrapper abraça.
+    {%- endcomment -%}
+  >
+    {{ control }}
+  </div>
+
+  {%- comment -%} ==========================================
+      3. DESCRIPTION AREA
+  ========================================== {%- endcomment -%}
+  {%- if description != blank and has_error == false -%}
+    <p id="{{ description_id }}" class="rk-form-field__description">
+      {{ description }}
+    </p>
+  {%- endif -%}
+
+  {%- comment -%} ==========================================
+      4. ERROR MESSAGE
+  ========================================== {%- endcomment -%}
+  {%- if has_error -%}
+    <p id="{{ error_id }}" class="rk-form-field__error" role="alert">
+      {{ error }}
+    </p>
+  {%- endif -%}
+
+</div>

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

@@ -0,0 +1,32 @@
+{%- doc -%}
+  Renders the CSS variable for the `gap` style with responsive scaling support.
+  Portable equivalent of Horizon's `gap-style.liquid` with `rk-` prefixed variables.
+
+  Values above `scale_min` (default: 24px) are wrapped in a responsive `max()` function
+  that scales down proportionally on smaller viewports using `--rk-gap-scale`.
+
+  @param {number} value - The base or desktop gap value to use, in pixels.
+  @param {string} [name] - The name of the CSS variable suffix. Default: 'gap'
+  @param {number} [scale_min] - Value above which gap scaling will be applied. Default: 24
+  @param {boolean} [disable_scaling] - If true, disables scaling and outputs the original value.
+
+  @example
+  <div class="rk-gap-style" style="{% render 'rk-gap-style', value: block.settings.gap %}">
+
+  @example Custom name
+  <div style="{% render 'rk-gap-style', value: 28, name: 'card-gap' %}">
+    → outputs: --rk-card-gap: max(24px, calc(var(--rk-gap-scale, 1) * 28px));
+{%- enddoc -%}
+
+{%- liquid
+  assign rk_min = scale_min | default: 24
+  assign rk_name = name | default: 'gap'
+-%}
+
+{%- if value != blank -%}
+  {%- if disable_scaling != true and value > rk_min -%}
+    --rk-{{ rk_name }}: max({{ rk_min }}px, calc(var(--rk-gap-scale, 1) * {{ value }}px));
+  {%- else -%}
+    --rk-{{ rk_name }}: {{ value }}px;
+  {%- endif -%}
+{%- endif -%}

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

@@ -0,0 +1,28 @@
+{% doc %}
+  Snippet: RkIcon
+  Renders an SVG icon wrapper.
+
+  @param {string} icon - Icon name to render (passes through to theme's icon.liquid)
+  @param {string} [size] - 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [color] - CSS color value
+  @param {string} [label] - Accessibility label
+
+  @example
+  {% render 'rk-icon', icon: 'heart', size: 'lg' %}
+{% enddoc %}
+
+{%- liquid
+  assign icon_size = size | default: 'md'
+-%}
+
+<span
+  class="rk-icon rk-icon--{{ icon_size }}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if color %}style="color: {{ color }}"{% endif %}
+  {% if label %}aria-label="{{ label }}"{% else %}aria-hidden="true"{% endif %}
+  role="{% if label %}img{% else %}presentation{% endif %}"
+>
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    {% render 'icon', icon: icon %}
+  </svg>
+</span>

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

@@ -0,0 +1,60 @@
+{% doc %}
+  Snippet: RkImage
+  Renders a responsive <img> with srcset, aspect-ratio, lazyload, and CLS prevention.
+
+  @param {object} image - Shopify image object
+  @param {number} [width] - Custom width (default: image.width)
+  @param {number} [height] - Custom height
+  @param {string} [sizes] - Responsive sizes attribute
+  @param {string} [loading] - 'lazy' | 'eager' (default: 'lazy')
+  @param {string} [class] - Extra CSS classes
+  @param {string} [style] - Additional inline styles
+  @param {string} [alt] - Alt text override
+  @param {string} [shape] - 'rounded' | 'circle'
+  @param {string} [placeholder_text] - Text fallback if image is blank
+
+  @example
+  {% render 'rk-image', image: product.featured_image, loading: 'eager' %}
+{% enddoc %}
+
+{%- liquid
+  assign img_loading = loading | default: 'lazy'
+  assign img_alt = alt | default: image.alt | escape
+  assign img_width = width | default: image.width
+  assign img_height = height | default: image.height
+  assign img_sizes = sizes | default: '100vw'
+
+  assign shape_class = ''
+  if shape == 'rounded'
+    assign shape_class = ' rk-image--rounded'
+  elsif shape == 'circle'
+    assign shape_class = ' rk-image--circle'
+  endif
+-%}
+
+{% if image != blank %}
+  {%- assign height_1x = img_height -%}
+  {%- assign height_2x = img_height | times: 2 -%}
+  {%- assign height_3x = img_height | times: 3 -%}
+
+  {%- capture srcset_value -%}
+    {{ image | image_url: height: height_1x }} 1x, {{ image | image_url: height: height_2x }} 2x, {{ image | image_url: height: height_3x }} 3x
+  {%- endcapture -%}
+
+  <div
+    class="rk-image{{ shape_class }}{% if class %} {{ class }}{% endif %}"
+    style="aspect-ratio: {{ img_width }} / {{ img_height }};{% if style %} {{ style }}{% endif %}"
+  >
+    {{ image | image_url: height: height_1x | image_tag:
+      class: 'rk-image__img',
+      srcset: srcset_value,
+      sizes: img_sizes,
+      loading: img_loading,
+      alt: img_alt
+    }}
+  </div>
+{% elsif placeholder_text != blank %}
+  <div class="rk-image__placeholder{% if class %} {{ class }}{% endif %}" style="{% if style %}{{ style }}{% endif %}">
+    {{ placeholder_text }}
+  </div>
+{% endif %}

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

@@ -0,0 +1,35 @@
+{% doc %}
+  Snippet: RkInput
+  Renders a text input field.
+
+  @param {string} name - Input name attribute
+  @param {string} [id] - Input id attribute
+  @param {string} [type] - Input type (default: 'text')
+  @param {string} [value] - Initial value
+  @param {string} [placeholder] - Placeholder text
+  @param {boolean} [required] - Makes input required
+  @param {boolean} [disabled] - Disables input
+  @param {boolean} [error] - Shows error state
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [attr] - Additional HTML attributes
+
+  @example
+  {% render 'rk-input', name: 'email', type: 'email', placeholder: 'seu@email.com' %}
+{% enddoc %}
+
+{%- liquid
+  assign input_type = type | default: 'text'
+  assign input_id = id | default: name
+-%}
+
+<input
+  type="{{ input_type }}"
+  id="{{ input_id }}"
+  name="{{ name }}"
+  {% if value %}value="{{ value }}"{% endif %}
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if required %}required aria-required="true"{% endif %}
+  {% if disabled %}disabled{% endif %}
+  class="rk-input{% if error %} rk-input--error{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {{ attr }}
+>

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

@@ -0,0 +1,54 @@
+{% doc %}
+  Snippet: RkInstallments
+  Renders the installment price information reading global settings.
+
+  @param {number} price - Price in cents to calculate installments from
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-installments', price: product.selected_or_first_available_variant.price %}
+{% enddoc %}
+
+{%- liquid
+  unless settings.rk_installments_enabled
+    break
+  endunless
+
+  assign inst_max = settings.rk_installments_max | default: 12
+  assign inst_no_interest = settings.rk_installments_without_interest | default: 3
+  assign inst_min_value = settings.rk_installments_min_value | default: '500' | plus: 0
+  assign interest_rate_raw = settings.rk_installments_interest_rate | default: '2.99'
+
+  assign best_installments = 1
+  assign best_value = price
+
+  for i in (1..inst_max)
+    assign value = price | divided_by: i
+    if value >= inst_min_value
+      assign best_installments = i
+      assign best_value = value
+    else
+      break
+    endif
+  endfor
+
+  assign has_interest = false
+  if best_installments > inst_no_interest
+    assign has_interest = true
+  endif
+
+  assign formatted_value = best_value | money
+-%}
+
+{% if best_installments > 1 %}
+  <span class="rk-installments{% if custom_class %} {{ custom_class }}{% endif %}">
+    <span class="rk-installments__value">{{ best_installments }}x</span>
+    de
+    <span class="rk-installments__value">{{ formatted_value }}</span>
+    {% if has_interest %}
+      <span class="rk-installments__interest">(com juros de {{ interest_rate_raw }}%)</span>
+    {% else %}
+      <span class="rk-installments__interest">sem juros</span>
+    {% endif %}
+  </span>
+{% endif %}

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>