markawesome 0.18.1 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c2c5ebb3f9f231f78078d8ff504c309a0a20a2b786835db6763b79ec02c2ecb
-  data.tar.gz: c2828be808439565b2ff460feaf052ed97640fd9605a973897656d86b71160e6
+  metadata.gz: '09defacfcfa437cfd7c5406b0705161597633880fac312488a7fa29c3055754d'
+  data.tar.gz: 369cd9e0d91dc6a423501367f98e2e54391a04aaebc4cf9da9c79d1c3a4267aa
 SHA512:
-  metadata.gz: 43d62e1980cd64700193e51dfef75007b4a64382ee70b4623283e24d29bd9dc6b0043834411bad243131abf57328587008704c858da90a4dc2d33a3410db9faf
-  data.tar.gz: 2668f52f02046b64911bbc7cb979fb4d9cd6c061eb811f3f06a7f21d0a46eb859adf300d836c30b1e544f2b03fabc39617a384c83c12ae70f1159db7b1424c02
+  metadata.gz: fa42c7657b0abac3554309763a38a75a8c6bc08d39b8a28e85b9fa0b57ea931207705efa0ff194c097582996986871a382b09872508dad2cfe325fc957350efa
+  data.tar.gz: 4a509a216fd0ce3aea3238e85dbf8cfea8fc60c7d55e9209e7e9915862b933708afd896a9582cc8c630bbbaf41caf759285f8687a5bff8df45c386d7a058617a

data/CHANGELOG.md

@@ -6,6 +6,35 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.20.0] - 2026-10-09
+
+### Added
+
+- **Labeled divider (`<wa-divider>` label, Web Awesome 3.13.0+).** New `DividerTransformer` with a mirrored one-line shorthand, `--- label ---`, and a `:::wa-divider params?` alternative whose body is the label (empty for a bare divider). Leading tokens are consumed from the left: `start`/`center`/`end` → `label-placement`, `horizontal`/`vertical` → `orientation`, `icon:name` → a `<wa-icon>` before the label. The rest is the label, rendered as inline Markdown. Output: `<wa-divider orientation="…" label-placement="…"><wa-icon name="…"></wa-icon> Label</wa-divider>`, attributes only when given. Plain `---` and `--- ---` are untouched and stay `<hr>`, and so is any line made only of `|`, `:`, `-` and whitespace, which keeps pipe-less GFM table separators such as `--- | ---` intact. The plain-Markdown renderer degrades it to `---` followed by the label as its own paragraph (icon dropped), with a leading blank line so the rule can't turn a preceding line into a setext heading. Known limitation, shared with every transformer: only backtick code fences are protected, so a `--- x ---` line inside a `~~~` fence is transformed.
+- **Display-only stepper (`<wa-stepper>` / `<wa-step>`, Web Awesome 3.14.0, experimental).** New `StepperTransformer`: a `>>>>>> params?` fence (or `:::wa-stepper params?`) wrapping a Markdown task list. Each unindented list line is a step: `[x]`/`[X]` → `completed`; leading `active`, `loading`, `disabled`, a variant (`neutral`/`brand`/`success`/`warning`/`danger`), an attention (`none`/`pulse`/`bounce`) and `icon:name` (→ `slot="icon"`) are flags; the rest is the label as inline Markdown. Lines indented two or more spaces under a step are joined into `<span slot="description">`. Steps are named `step-1…N` and the container's `active` is the step flagged `active` (last wins), else the first incomplete step, else the last. Container params: `horizontal`/`vertical`/`auto` → `orientation`, `label:"…"` → `label` (HTML-escaped). Interactivity (`clickable`, `linear`, step invokers) is intentionally omitted — the steps have no content panels to navigate between. The `>>>>>>` fence never collides with the `^>>>$` separator of details/dialog/popover/tooltip/random-content. Plain-Markdown degrade: an ordered task list keeping `[x]`/`[ ]`, the current step in bold, and descriptions as indented continuation lines.
+- Both run **first** in the pipeline (right after code-block protection, before layouts), so a divider or stepper can sit inside layouts, cards, callouts, tabs, accordion and dialog bodies — e.g. `--- vertical vs ---` between two buttons in a `::::cluster`. Same position in `PlainMarkdownRenderer::PIPELINE` (new `:divider` / `:stepper` override keys).
+- Manifest coverage now also guards `wa-divider` `orientation`/`label-placement`, `wa-stepper` `orientation` and `wa-step` `variant`/`attention` (`DIVIDER_ATTRIBUTES`, `STEPPER_ATTRIBUTES`, `STEP_ATTRIBUTES`).
+
+### Internal
+
+- **Refreshed the Web Awesome manifest fixture to 3.14.0** (September 24th, 2026; covers 3.13.0 too). `rake wa:manifest[3.14.0]` regenerated `spec/fixtures/webawesome-enums.json` and `WA_VERSION` moved to `3.14.0`. The diff is **purely additive** — three new tags (`wa-step`, `wa-stepper`, `wa-tag-input`) and a `label-placement` enum on `wa-divider` — with **zero DRIFT and zero GAP** against the enums we accept, so no transformer constant changed. `<wa-accordion>` and `<wa-random-content>` are now **stable** in Web Awesome, so the "experimental" wording was dropped from their transformer comments. Fixture remains byte-identical to `markawesome-js`'s copy. Example-site CDN pins bumped to 3.14.0 in `jekyll-webawesome` and `eleventy-plugin-webawesome`.
+
+## [0.19.0] - 2026-08-26
+
+### Fixed
+
+- **Repeated dialogs no longer share a DOM id.** The id is an MD5 of the trigger text plus body, so two dialogs differing only by a param (e.g. width) collided — and byte-identical ones always did. Both triggers then emitted the same `data-dialog='open …'`, so `getElementById` resolved every one of them to the first dialog and the others were unreachable. Repeats now get a `-2`, `-3`, … suffix, the scheme `generate_popover_id`/`generate_tooltip_id` already used. The first occurrence keeps its bare id, so existing single-dialog output is unchanged.
+
+### Changed
+
+- **Image-dialog trigger buttons now style both `::part(base)` and `::part(button)`.** Web Awesome 3.11.0 gives every component a CSS part named after itself and softly deprecates the generic `base` part — for `<wa-button>` the wrapper part is now `button`, and WA's own manifest marks `base` as *"Deprecated. Use the `button` part instead."* The chrome-stripping `<style>` block emitted for an image trigger (`![alt](src)` under `image_dialog: true`) now lists both selectors in each of its three rules, so the trigger stays chrome-less on 3.10-pinned sites (which have no `button` part) **and** on 3.11+ sites once `base` is eventually removed. Purely additive — no existing selector was dropped. The style block moved into a private `image_button_style` helper; output is byte-identical to `markawesome-js` and now locked by specs in `spec/dialog_transformer_spec.rb` (the emitted selectors were previously untested in either engine).
+
+### Internal
+
+- **Refreshed the Web Awesome manifest fixture to 3.12.0** (August 2026). `rake wa:manifest[3.12.0]` regenerated `spec/fixtures/webawesome-enums.json` and `WA_VERSION` moved to `3.12.0`. The enum diff is a **single additive line** — `wa-dropdown-item` gained a `target` enum (`_blank`/`_parent`/`_self`/`_top`) alongside its new `href`/`rel`/`download` navigation attributes — on a component that is [explicitly out of scope](ROADMAP.md) for a static-Markdown model, so there is **zero DRIFT and zero GAP** against the enums we accept and no transformer constant changed. Nothing else in WA 3.12.0 touches a component we emit: the other additions are `<wa-data-grid>`'s `filterOptions` (JS-supplied data) and the Figma kit, and every fix/change is internal to Web Awesome's own shadow DOM. Two of those fixes land on our output for free — `<wa-button>` now keeps its accessible name and gains `aria-busy` while loading (we already accept a bare `loading` token in `BUTTON_ATTRIBUTES`), and duplicate landmarks were removed from `<wa-card>`, `<wa-dialog>` and `<wa-drawer>`. Fixture remains byte-identical to `markawesome-js`'s copy. Example-site CDN pins bumped to 3.12.0 in `jekyll-webawesome` and `eleventy-plugin-webawesome`.
+- **Refreshed the Web Awesome manifest fixture to 3.11.0** (July 30th, 2026). `rake wa:manifest[3.11.0]` regenerated `spec/fixtures/webawesome-enums.json` and `WA_VERSION` moved to `3.11.0`. The diff was **purely additive** — four new tags (`wa-otp-input`, `wa-pagination`, and `wa-toast`/`wa-toast-item`, which moved from Pro to Core) — with **zero DRIFT and zero GAP** against the enums we accept, so no transformer constant changed. `IconAttributes::SCHEMA` was separately verified against WA 3.11.0's `IconAnimation` (18 values) and `IconCanvas` types and still matches exactly, as do every slot our transformers emit (`footer`, `icon`, `summary`). Fixture remains byte-identical to `markawesome-js`'s copy.
+- **Web Awesome manifest coverage spec** (`spec/webawesome_manifest_coverage_spec.rb`) — a deterministic guard that checks every enum our transformers accept against a vendored slice of Web Awesome's machine-readable Custom Elements Manifest, pinned to **WA 3.11.0**. For 39 `(constant → wa-tag/attribute)` mappings across 15 components it fails on **DRIFT** (a value we accept that WA no longer lists — exempting the deliberate `callout` `info`→`brand` input alias) and **GAP** (a WA value we don't expose, gated by an `INTENTIONALLY_OMITTED` map that starts empty, so a new WA value turns the build red until adopted or recorded with a reason). 6 entries WA can't describe as an inline enum (`wa-icon` family/variant/animation/canvas are freeform/opaque types; `wa-video` is absent from WA core's manifest) are surfaced as `skip`s, not silently dropped. The fixture `spec/fixtures/webawesome-enums.json` is a **derived artifact** regenerated with `rake wa:manifest[X.Y.Z]` (`script/update_wa_manifest.rb`) — never hand-edited, and byte-identical to `markawesome-js`'s copy. Dev-only (not packaged in the gem); no version bump. See CLAUDE.md → "Web Awesome manifest coverage" for the WA-bump workflow.
+
 ## [0.18.1] - 2026-07-04
 
 ### Fixed

data/README.md

@@ -4,6 +4,8 @@ A framework-agnostic Ruby library that transforms custom Markdown syntax into [W
 
 Used as the transformation engine for the [jekyll-webawesome](https://github.com/jannewaren/jekyll-webawesome) plugin.
 
+> **🔗 See it live — [hosted examples site](https://jannewaren.github.io/jekyll-webawesome/).** Every supported component shown side by side: the Markawesome markdown on the left, the live Web Awesome component it renders on the right. The clearest way to see what this project does.
+
 ## Features
 
 - 🎯 **Framework Agnostic** - Works with any static site generator or Ruby application
@@ -23,9 +25,11 @@ Used as the transformation engine for the [jekyll-webawesome](https://github.com
 | **Copy Button** | `<<<placement? tooltip:full\|copy\|none?` | `:::wa-copy-button placement? tooltip:full\|copy\|none?` | `<wa-copy-button value="content" tooltip-placement="top" tooltip="copy"></wa-copy-button>` |
 | **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details>content</wa-details>` |
 | **Dialog** | `???params?` | `:::wa-dialog params?` | `<wa-dialog>` with trigger button and content |
+| **Divider** | `--- label ---` (e.g. `--- start icon:star New ---`) | `:::wa-divider params?` (body is the label) | `<wa-divider label-placement="start"><wa-icon name="star"></wa-icon> New</wa-divider>` |
 | **Icon** | `$$$icon-name` | `:::wa-icon icon-name` | `<wa-icon name="icon-name"></wa-icon>` |
 | **Image Dialog** | `![alt](url)` | — | Wraps images in clickable `<wa-dialog>` overlays |
 | **Popover** | `&&&params?` or inline `&&&trigger >>> content&&&` | `:::wa-popover params?` | `<wa-popover>` with trigger button and content |
+| **Stepper** | `>>>>>> params?` wrapping a task list | `:::wa-stepper params?` | `<wa-stepper active="step-2"><wa-step name="step-1" completed>…</wa-step>…</wa-stepper>` |
 | **Tab Group** | `++++++` | `:::wa-tabs` | `<wa-tab-group><wa-tab>content</wa-tab></wa-tab-group>` |
 | **Tag** | `@@@brand` | `:::wa-tag brand` | `<wa-tag variant="brand">content</wa-tag>` |
 
@@ -36,6 +40,22 @@ Used as the transformation engine for the [jekyll-webawesome](https://github.com
 > listener (e.g. a single global handler that removes `event.target`). The markup
 > we emit is valid either way.
 
+> **Labeled divider:** `--- label ---` needs text between the mirrored dashes,
+> so a plain `---` stays an `<hr>`. Leading `start`/`center`/`end`
+> (label placement), `horizontal`/`vertical` (orientation) and `icon:name`
+> tokens are consumed from the left; the rest is the label, as inline Markdown.
+> A line made only of `|`, `:` and `-` (a pipe-less table separator) is left
+> alone. Use `:::wa-divider` when a label must start with one of those words.
+
+> **Stepper (display-only):** each unindented list line is a step. `[x]` marks
+> it completed; leading `active`, `loading`, `disabled`, a variant, an attention
+> (`pulse`/`bounce`/`none`) and `icon:name` are flags; lines indented under a
+> step become its description. The active step is the one flagged `active`,
+> else the first incomplete step, else the last. Container params are
+> `horizontal`/`vertical`/`auto` and `label:"…"`. `wa-stepper` is experimental
+> in Web Awesome 3.14.0, and its interactive features (`clickable`, `linear`)
+> are deliberately not exposed.
+
 ## Layout Utilities
 
 Layout utilities use `::::` (quadruple colon) syntax to wrap content in CSS layout containers. Inner content is not markdown-converted, so component `:::` syntax inside layouts works normally.
@@ -53,7 +73,7 @@ Layout utilities use `::::` (quadruple colon) syntax to wrap content in CSS layo
 
 All layouts support these key:value attributes:
 
-- `gap:SIZE` — Sets spacing (`0`, `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`)
+- `gap:SIZE` — Sets spacing (`0`, `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`)
 - `align:VALUE` — Align items (`start`, `end`, `center`, `stretch`, `baseline`)
 - `justify:VALUE` — Justify content (`start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`)
 

data/lib/markawesome/plain_markdown_renderer.rb

@@ -25,9 +25,9 @@ module Markawesome
       # component without forking the gem.
       #
       # @param component [Symbol] one of :accordion, :callout, :badge, :button,
-      #   :card, :carousel, :comparison, :copy_button, :details, :dialog, :icon,
-      #   :image_dialog, :layout, :popover, :random_content, :tabs, :tag,
-      #   :tooltip.
+      #   :card, :carousel, :comparison, :copy_button, :details, :dialog,
+      #   :divider, :icon, :image_dialog, :layout, :popover, :random_content,
+      #   :stepper, :tabs, :tag, :tooltip, :tree.
       # @yield [content, options] Proc that receives the full source content
       #   and the renderer options; returns the content with that component
       #   syntax replaced.
@@ -44,6 +44,8 @@ module Markawesome
     end
 
     PIPELINE = %i[
+      divider
+      stepper
       layout
       popover
       tooltip
@@ -68,6 +70,8 @@ module Markawesome
     ].freeze
 
     TRANSFORMER_MAP = {
+      divider: DividerTransformer,
+      stepper: StepperTransformer,
       layout: LayoutTransformer,
       popover: PopoverTransformer,
       tooltip: TooltipTransformer,

data/lib/markawesome/transformer.rb

@@ -10,6 +10,13 @@ module Markawesome
     def self.process(content, options = {})
       content, tokens = CodeBlockProtector.protect(content)
 
+      # Divider and stepper run FIRST: their content is inline-only (a label,
+      # a list of one-line steps), so emitting them before any container lets
+      # them sit inside layouts, cards, callouts, tabs, accordion and dialog
+      # bodies — e.g. `--- vertical vs ---` inside a `::::cluster`.
+      content = DividerTransformer.transform(content)
+      content = StepperTransformer.transform(content)
+
       content = LayoutTransformer.transform(content)
       content = PopoverTransformer.transform(content)
       content = TooltipTransformer.transform(content)

data/lib/markawesome/transformers/accordion_transformer.rb

@@ -23,7 +23,7 @@ module Markawesome
   #   - expanded -> expanded; disabled -> disabled
   #   - icon:name -> <wa-icon slot="icon" name="name"></wa-icon> as first child
   #
-  # wa-accordion is experimental in Web Awesome (added 3.7). expanded/disabled
+  # wa-accordion was added in Web Awesome 3.7 (stable since 3.13). expanded/disabled
   # and the mode/appearance/icon-placement attributes are all static-safe.
   class AccordionTransformer < BaseTransformer
     CONTAINER_ATTRIBUTES = {

data/lib/markawesome/transformers/dialog_transformer.rb

@@ -25,6 +25,10 @@ module Markawesome
       primary_regex = /^\?\?\?([^\n]*)$\n(.*?)\n^>>>$\n(.*?)\n^\?\?\?$/m
       alternative_regex = /^:::wa-dialog([^\n]*)$\n(.*?)\n^>>>$\n(.*?)\n^:::$/m
 
+      # Two dialogs with the same trigger and body hash alike, so suffix repeats
+      # (-2, -3, …) to keep ids unique — same scheme as popover/tooltip.
+      seen_ids = Hash.new(0)
+
       # Define shared transformation logic
       transform_proc = proc do |params_string, button_text, dialog_content|
         button_text = button_text.strip
@@ -37,7 +41,7 @@ module Markawesome
         label, content_without_label = extract_label(dialog_content, button_text)
 
         # Generate unique ID based on content
-        dialog_id = generate_dialog_id(button_text, dialog_content)
+        dialog_id = generate_dialog_id(button_text, dialog_content, seen_ids)
 
         # Convert markdown to HTML
         content_html = markdown_to_html(content_without_label)
@@ -104,11 +108,17 @@ module Markawesome
         end
       end
 
-      # Generate a unique ID for the dialog using MD5 hash
-      def generate_dialog_id(button_text, content)
+      # Generate a unique ID for the dialog using MD5 hash.
+      # The hash covers the trigger and body only, so two dialogs differing solely
+      # by a param (e.g. width) would collide — and identical ones always do. The
+      # occurrence counter disambiguates: the first keeps the bare id, later ones
+      # get -2, -3, … Mirrors generate_popover_id / generate_tooltip_id.
+      def generate_dialog_id(button_text, content, seen_ids)
         hash_input = "#{button_text}#{content}"
         hash = Digest::MD5.hexdigest(hash_input)
-        "dialog-#{hash[0..7]}" # Use first 8 characters of hash
+        base = "dialog-#{hash[0..7]}" # Use first 8 characters of hash
+        occurrence = seen_ids[base] += 1
+        occurrence == 1 ? base : "#{base}-#{occurrence}"
       end
 
       # Build the complete dialog HTML with trigger button
@@ -134,26 +144,7 @@ module Markawesome
         # Add CSS Parts styling for image buttons to make them invisible
         if is_image_button
           button_id = "#{dialog_id}-btn"
-          html << '<style>'
-          html << "  ##{button_id}::part(base) {"
-          html << '    padding: 0;'
-          html << '    margin: 0;'
-          html << '    border: none;'
-          html << '    background: transparent;'
-          html << '    box-shadow: none;'
-          html << '    color: inherit;'
-          html << '    min-width: 0;'
-          html << '    height: auto;'
-          html << '  }'
-          html << "  ##{button_id}::part(base):hover {"
-          html << '    background: transparent;'
-          html << '    border-color: transparent;'
-          html << '  }'
-          html << "  ##{button_id}::part(base):active {"
-          html << '    background: transparent;'
-          html << '    border-color: transparent;'
-          html << '  }'
-          html << '</style>'
+          html.concat(image_button_style(button_id))
         end
 
         # Trigger button
@@ -175,6 +166,27 @@ module Markawesome
         html.join("\n")
       end
 
+      # Strip the trigger button's chrome so an image trigger reads as a bare image.
+      #
+      # WA 3.11 deprecated wa-button's generic `base` part in favour of a part named after
+      # the component (`button`). `base` still works but is on its way out, so target both —
+      # the output then styles correctly on 3.10-pinned and 3.11+ sites.
+      def image_button_style(button_id)
+        wrapper = lambda do |state|
+          "  ##{button_id}::part(base)#{state}, ##{button_id}::part(button)#{state} {"
+        end
+
+        ['<style>', wrapper.call(''),
+         '    padding: 0;', '    margin: 0;', '    border: none;',
+         '    background: transparent;', '    box-shadow: none;', '    color: inherit;',
+         '    min-width: 0;', '    height: auto;', '  }',
+         wrapper.call(':hover'),
+         '    background: transparent;', '    border-color: transparent;', '  }',
+         wrapper.call(':active'),
+         '    background: transparent;', '    border-color: transparent;', '  }',
+         '</style>']
+      end
+
       # Escape HTML entities in text
       def escape_html(text)
         text.gsub('&', '&amp;')

data/lib/markawesome/transformers/divider_transformer.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+require_relative '../attribute_parser'
+require_relative '../icon_slot_parser'
+
+module Markawesome
+  # Transforms labeled-divider syntax into <wa-divider> elements with a label in
+  # the default slot (Web Awesome 3.13.0+).
+  #
+  # Primary syntax (one line, mirrored dashes):
+  #   --- or ---
+  #   --- start Release notes ---
+  #   --- end icon:star New ---
+  #   --- icon:quote-left ---
+  #   --- vertical vs ---
+  # Alternative syntax (the body is the label, and may be empty):
+  #   :::wa-divider start icon:star
+  #   Release **notes**
+  #   :::
+  #
+  # Leading tokens (consumed from the left until the first non-token word):
+  #   - start, center, end      -> label-placement
+  #   - horizontal, vertical    -> orientation
+  #   - icon:name               -> <wa-icon name="name"> before the label
+  # The rest of the line is the label, rendered as inline Markdown. To start a
+  # label with one of those words, use the alternative syntax.
+  #
+  # A plain `---` (and `--- ---`) is left alone and stays an <hr>. So is a line
+  # made only of `|`, `:`, `-` and whitespace (e.g. a pipe-less GFM table
+  # separator such as `--- | ---`).
+  class DividerTransformer < BaseTransformer
+    DIVIDER_ATTRIBUTES = {
+      orientation: %w[horizontal vertical],
+      label_placement: %w[start center end]
+    }.freeze
+
+    # Content slot: emits <wa-icon name="..."> with no slot attribute.
+    ICON_SLOTS = {
+      default: 'content',
+      slots: %w[content],
+      slot_map: { 'content' => 'content' }
+    }.freeze
+
+    PRIMARY_REGEX = /^---[ \t]+(\S[^\n]*?)[ \t]+---[ \t]*$/
+    ALTERNATIVE_REGEX = /^:::wa-divider[ \t]*([^\n]*)\n(?:(.*?)\n)?:::[ \t]*$/m
+    TABLE_SEPARATOR_REGEX = /\A[|:\-\s]*\z/
+
+    def self.transform(content)
+      content = content.gsub(PRIMARY_REGEX) do |match|
+        inner = Regexp.last_match(1)
+        next match if inner.match?(TABLE_SEPARATOR_REGEX)
+
+        lead, label = split_leading_tokens(inner)
+        build_html(lead, label)
+      end
+
+      content.gsub(ALTERNATIVE_REGEX) do
+        params_string = Regexp.last_match(1)
+        body = Regexp.last_match(2).to_s
+        build_html(params_string, body.strip)
+      end
+    end
+
+    # Degrade to a thematic break followed by the label as its own paragraph
+    # (icon dropped). The leading blank line stops `---` from turning a
+    # preceding paragraph line into a setext heading.
+    def self.render_as_markdown(content, _options = {})
+      content = content.gsub(PRIMARY_REGEX) do |match|
+        inner = Regexp.last_match(1)
+        next match if inner.match?(TABLE_SEPARATOR_REGEX)
+
+        _lead, label = split_leading_tokens(inner)
+        markdown_break(label)
+      end
+
+      content.gsub(ALTERNATIVE_REGEX) do
+        markdown_break(Regexp.last_match(2).to_s.strip)
+      end
+    end
+
+    class << self
+      private
+
+      # Consume leading placement/orientation/icon tokens; the rest is the label.
+      def split_leading_tokens(inner)
+        tokens = inner.strip.split(/\s+/)
+        lead = []
+        lead << tokens.shift while tokens.any? && leading_token?(tokens.first)
+        [lead.join(' '), tokens.join(' ')]
+      end
+
+      def leading_token?(token)
+        token.start_with?('icon:') || DIVIDER_ATTRIBUTES.values.any? { |values| values.include?(token) }
+      end
+
+      def build_html(params_string, label)
+        attributes = AttributeParser.parse(params_string, DIVIDER_ATTRIBUTES)
+        icon_result = IconSlotParser.parse(params_string, ICON_SLOTS)
+
+        attr_parts = []
+        attr_parts << "orientation=\"#{attributes[:orientation]}\"" if attributes[:orientation]
+        attr_parts << "label-placement=\"#{attributes[:label_placement]}\"" if attributes[:label_placement]
+        attrs_string = attr_parts.empty? ? '' : " #{attr_parts.join(' ')}"
+
+        icon_html = IconSlotParser.to_html(icon_result[:icons], ICON_SLOTS[:slot_map])
+        label_html = render_inline(label)
+        separator = !icon_html.empty? && !label_html.empty? ? ' ' : ''
+
+        "<wa-divider#{attrs_string}>#{icon_html}#{separator}#{label_html}</wa-divider>"
+      end
+
+      # Inline Markdown: render, then drop the wrapping <p> (the badge idiom).
+      def render_inline(text)
+        return '' if text.empty?
+
+        markdown_to_html(text).strip.sub(%r{\A<p>(.*)</p>\z}m, '\1')
+      end
+
+      def markdown_break(label)
+        label.empty? ? "\n---" : "\n---\n\n#{label}\n"
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/random_content_transformer.rb

@@ -4,7 +4,7 @@ require_relative 'base_transformer'
 require_relative '../attribute_parser'
 
 module Markawesome
-  # Transforms random-content syntax into Web Awesome's experimental
+  # Transforms random-content syntax into Web Awesome's
   # <wa-random-content> element, which shows one or more of its direct element
   # children at random (optionally rotating them) and hides the rest — all in
   # WA's own runtime, so the author writes zero JavaScript. Ideal for a "little

data/lib/markawesome/transformers/stepper_transformer.rb

@@ -0,0 +1,201 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+require_relative '../attribute_parser'
+require_relative '../icon_slot_parser'
+
+module Markawesome
+  # Transforms stepper syntax into a display-only <wa-stepper> / <wa-step>
+  # progress indicator, written as a Markdown task list.
+  #
+  # Primary syntax:
+  #   >>>>>> vertical label:"Checkout progress"
+  #   - [x] Cart
+  #   - [x] Shipping
+  #     Standard, 3–5 days
+  #   - [ ] pulse icon:credit-card Payment
+  #   - [ ] Review
+  #   >>>>>>
+  # Alternative syntax: :::wa-stepper params? ...same list... :::
+  #
+  # Container params:
+  #   - horizontal, vertical, auto -> orientation
+  #   - label:"text"               -> label (accessible name)
+  # Steps are unindented list lines (`-`, `*` or `+`):
+  #   - [x] / [X] marks the step completed; [ ] or no box means not completed
+  #   - leading flags: active, loading, disabled, a variant (neutral, brand,
+  #     success, warning, danger), an attention (none, pulse, bounce), and
+  #     icon:name (slotted into the step's icon slot)
+  #   - the rest of the line is the label, rendered as inline Markdown
+  #   - lines indented by two or more spaces under a step are joined into its
+  #     description slot, rendered as inline Markdown
+  #
+  # Steps are named step-1..N and the container's `active` points at the step
+  # flagged `active` (last one wins), else the first incomplete step, else the
+  # last step. Interactivity (`clickable`, `linear`, step invokers) is omitted
+  # on purpose: these steps have no content panels, so there is nothing to
+  # navigate between without app JavaScript.
+  class StepperTransformer < BaseTransformer
+    STEPPER_ATTRIBUTES = {
+      orientation: %w[horizontal vertical auto]
+    }.freeze
+
+    STEP_ATTRIBUTES = {
+      variant: %w[neutral brand success warning danger],
+      attention: %w[none pulse bounce]
+    }.freeze
+
+    STEP_FLAGS = %w[active loading disabled].freeze
+
+    ICON_SLOTS = {
+      default: 'icon',
+      slots: %w[icon],
+      slot_map: { 'icon' => 'icon' }
+    }.freeze
+
+    PRIMARY_REGEX = /^>{6}([^\n]*)\n(.*?)\n>{6}[ \t]*$/m
+    ALTERNATIVE_REGEX = /^:::wa-stepper[ \t]*([^\n]*)\n(.*?)\n:::[ \t]*$/m
+    LABEL_REGEX = /label:(?:"([^"]*)"|'([^']*)')/
+    STEP_LINE_REGEX = /\A[-*+][ \t]+(.*)\z/
+    CONTINUATION_REGEX = /\A[ \t]{2,}(\S.*)\z/
+    CHECKBOX_REGEX = /\A\[([ xX])\](?:[ \t]+(.*))?\z/
+
+    def self.transform(content)
+      transform_proc = proc do |params_string, body|
+        label, params_string = extract_label(params_string.to_s)
+        attributes = AttributeParser.parse(params_string, STEPPER_ATTRIBUTES)
+        steps = parse_steps(body)
+        active = active_index(steps)
+
+        attr_parts = []
+        attr_parts << "orientation=\"#{attributes[:orientation]}\"" if attributes[:orientation]
+        attr_parts << "label=\"#{escape_html(label)}\"" unless label.empty?
+        attr_parts << "active=\"step-#{active + 1}\"" if active
+        attrs_string = attr_parts.empty? ? '' : " #{attr_parts.join(' ')}"
+
+        steps_html = steps.each_with_index.map { |step, index| build_step(step, index) }.join
+        "<wa-stepper#{attrs_string}>#{steps_html}</wa-stepper>"
+      end
+
+      patterns = dual_syntax_patterns(PRIMARY_REGEX, ALTERNATIVE_REGEX, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    # Degrade to an ordered task list: completed steps keep [x], the current
+    # step is bold, and a description becomes an indented continuation line.
+    def self.render_as_markdown(content, _options = {})
+      transform_proc = proc do |_params_string, body|
+        steps = parse_steps(body)
+        active = active_index(steps)
+
+        steps.each_with_index.map do |step, index|
+          marker = "#{index + 1}. "
+          label = index == active && !step[:label].empty? ? "**#{step[:label]}**" : step[:label]
+          line = "#{marker}[#{step[:completed] ? 'x' : ' '}]"
+          line += " #{label}" unless label.empty?
+          line += "\n#{' ' * marker.length}#{step[:description]}" unless step[:description].empty?
+          line
+        end.join("\n")
+      end
+
+      patterns = dual_syntax_patterns(PRIMARY_REGEX, ALTERNATIVE_REGEX, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      # Pull out label:"…" (or label:'…') before the bare tokens are parsed, so
+      # words inside the label can't be read as orientation tokens.
+      def extract_label(params_string)
+        match = LABEL_REGEX.match(params_string)
+        return ['', params_string] unless match
+
+        [(match[1] || match[2]).strip, params_string.sub(LABEL_REGEX, ' ')]
+      end
+
+      def parse_steps(body)
+        steps = []
+        body.to_s.each_line do |line|
+          line = line.chomp
+          if (match = STEP_LINE_REGEX.match(line))
+            steps << parse_step(match[1])
+          elsif (match = CONTINUATION_REGEX.match(line)) && steps.any?
+            steps.last[:description_lines] << match[1].strip
+          end
+        end
+        steps.each { |step| step[:description] = step.delete(:description_lines).join(' ') }
+      end
+
+      def parse_step(raw)
+        completed = false
+        if (match = CHECKBOX_REGEX.match(raw.strip))
+          completed = match[1] != ' '
+          raw = match[2].to_s
+        end
+
+        tokens = raw.strip.split(/\s+/)
+        lead = []
+        lead << tokens.shift while tokens.any? && leading_token?(tokens.first)
+        lead_string = lead.join(' ')
+
+        {
+          completed: completed,
+          flags: lead & STEP_FLAGS,
+          attributes: AttributeParser.parse(lead_string, STEP_ATTRIBUTES),
+          icons: IconSlotParser.parse(lead_string, ICON_SLOTS)[:icons],
+          label: tokens.join(' '),
+          description_lines: []
+        }
+      end
+
+      def leading_token?(token)
+        token.start_with?('icon:') ||
+          STEP_FLAGS.include?(token) ||
+          STEP_ATTRIBUTES.values.any? { |values| values.include?(token) }
+      end
+
+      # The explicitly active step (last wins), else the first incomplete one,
+      # else the last step; nil when there are no steps.
+      def active_index(steps)
+        return nil if steps.empty?
+
+        explicit = steps.rindex { |step| step[:flags].include?('active') }
+        return explicit if explicit
+
+        steps.index { |step| !step[:completed] } || (steps.length - 1)
+      end
+
+      def build_step(step, index)
+        attr_parts = ["name=\"step-#{index + 1}\""]
+        attr_parts << 'completed' if step[:completed]
+        attr_parts << 'loading' if step[:flags].include?('loading')
+        attr_parts << 'disabled' if step[:flags].include?('disabled')
+        attr_parts << "variant=\"#{step[:attributes][:variant]}\"" if step[:attributes][:variant]
+        attr_parts << "attention=\"#{step[:attributes][:attention]}\"" if step[:attributes][:attention]
+
+        icon_html = IconSlotParser.to_html(step[:icons], ICON_SLOTS[:slot_map])
+        description = render_inline(step[:description])
+        description_html = description.empty? ? '' : "<span slot=\"description\">#{description}</span>"
+
+        "<wa-step #{attr_parts.join(' ')}>#{icon_html}#{render_inline(step[:label])}#{description_html}</wa-step>"
+      end
+
+      # Inline Markdown: render, then drop the wrapping <p> (the badge idiom).
+      def render_inline(text)
+        return '' if text.empty?
+
+        markdown_to_html(text).strip.sub(%r{\A<p>(.*)</p>\z}m, '\1')
+      end
+
+      def escape_html(text)
+        text.to_s
+            .gsub('&', '&amp;')
+            .gsub('<', '&lt;')
+            .gsub('>', '&gt;')
+            .gsub('"', '&quot;')
+            .gsub("'", '&#39;')
+      end
+    end
+  end
+end

data/lib/markawesome/transformers.rb

@@ -15,11 +15,13 @@ require_relative 'transformers/copy_button_transformer'
 require_relative 'transformers/date_transformer'
 require_relative 'transformers/details_transformer'
 require_relative 'transformers/dialog_transformer'
+require_relative 'transformers/divider_transformer'
 require_relative 'transformers/icon_transformer'
 require_relative 'transformers/image_dialog_transformer'
 require_relative 'transformers/layout_transformer'
 require_relative 'transformers/popover_transformer'
 require_relative 'transformers/random_content_transformer'
+require_relative 'transformers/stepper_transformer'
 require_relative 'transformers/tabs_transformer'
 require_relative 'transformers/tag_transformer'
 require_relative 'transformers/tooltip_transformer'

data/lib/markawesome/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Markawesome
-  VERSION = '0.18.1'
+  VERSION = '0.20.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.18.1
+  version: 0.20.0
 platform: ruby
 authors:
 - Janne Waren
@@ -96,11 +96,13 @@ files:
 - lib/markawesome/transformers/date_transformer.rb
 - lib/markawesome/transformers/details_transformer.rb
 - lib/markawesome/transformers/dialog_transformer.rb
+- lib/markawesome/transformers/divider_transformer.rb
 - lib/markawesome/transformers/icon_transformer.rb
 - lib/markawesome/transformers/image_dialog_transformer.rb
 - lib/markawesome/transformers/layout_transformer.rb
 - lib/markawesome/transformers/popover_transformer.rb
 - lib/markawesome/transformers/random_content_transformer.rb
+- lib/markawesome/transformers/stepper_transformer.rb
 - lib/markawesome/transformers/tabs_transformer.rb
 - lib/markawesome/transformers/tag_transformer.rb
 - lib/markawesome/transformers/tooltip_transformer.rb
@@ -130,7 +132,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Framework-agnostic Markdown to Web Awesome component transformer
 test_files: []