markawesome 0.18.1 → 0.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c2c5ebb3f9f231f78078d8ff504c309a0a20a2b786835db6763b79ec02c2ecb
-  data.tar.gz: c2828be808439565b2ff460feaf052ed97640fd9605a973897656d86b71160e6
+  metadata.gz: fcd58ebaea11af858fd0b4e922bdf4447035df09cc91b9acfa9dea047a908cf8
+  data.tar.gz: de54c7cb14e781a63d4bc22a132bb637cc62c1ec0383a0404e46b81efd3a3500
 SHA512:
-  metadata.gz: 43d62e1980cd64700193e51dfef75007b4a64382ee70b4623283e24d29bd9dc6b0043834411bad243131abf57328587008704c858da90a4dc2d33a3410db9faf
-  data.tar.gz: 2668f52f02046b64911bbc7cb979fb4d9cd6c061eb811f3f06a7f21d0a46eb859adf300d836c30b1e544f2b03fabc39617a384c83c12ae70f1159db7b1424c02
+  metadata.gz: ebbc8bb6f73131839e94bc1b1d79a875bdd2de65e980832c59fb3305b03324b76c6259b800e16be111bdfd6e3c0df14d6f80820052474d635e2a982c1cd5d987
+  data.tar.gz: 2a768f945ecb99d16b4aa3e60d64dce34e97bf518239344d83a440a9cba0cd0c60caeac5315c8fbfee5545c3212f6d28376dc3dc181b903cfb0a68f1649c640c

data/CHANGELOG.md

@@ -6,6 +6,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [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
@@ -53,7 +55,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/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/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.18.1
+  version: 0.19.0
 platform: ruby
 authors:
 - Janne Waren