markawesome 0.18.0 → 0.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3ce7a2c074d2d33074977cfe3f20c474ba14908e4c07e283c8067e9adce65f4
-  data.tar.gz: 54c1bdd4ab2c53d11c14589757707b3325555afa5315142fa5341f6842d0b90a
+  metadata.gz: fcd58ebaea11af858fd0b4e922bdf4447035df09cc91b9acfa9dea047a908cf8
+  data.tar.gz: de54c7cb14e781a63d4bc22a132bb637cc62c1ec0383a0404e46b81efd3a3500
 SHA512:
-  metadata.gz: ae0b842c192958678ed64bca94c3f637d16c58c4c641c8cc02bc69234ca35e322fd4f677d424c959499c692a5b6f1c7acc477123ad86c3c4eb94a2c91c2ae654
-  data.tar.gz: d870d957d821ca0cd44c46a6afa7175d26436538ed3dae3ce2f7363afb8b1d20aa79a5195743fbfe7b47f5c7494402c89c32ce630acb6010d3f5fa91f1bb2b03
+  metadata.gz: ebbc8bb6f73131839e94bc1b1d79a875bdd2de65e980832c59fb3305b03324b76c6259b800e16be111bdfd6e3c0df14d6f80820052474d635e2a982c1cd5d987
+  data.tar.gz: 2a768f945ecb99d16b4aa3e60d64dce34e97bf518239344d83a440a9cba0cd0c60caeac5315c8fbfee5545c3212f6d28376dc3dc181b903cfb0a68f1649c640c

data/CHANGELOG.md

@@ -6,6 +6,28 @@ 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
+
+- **Horizontal cards no longer overflow with multi-block bodies.** A `===horizontal` card whose body has more than one block (e.g. a `#` heading plus a paragraph) now wraps the body in a single `<div>`, so Web Awesome's `:host([orientation='horizontal']) .body slot::slotted(*) { height: 100% }` rule — which it applies to **every** direct body child — targets the one wrapper instead of each block. Previously each block was stretched to the full card height and the extra ones spilled out below the card. Vertical cards are unchanged (no wrapper is emitted). Parity locked by the new `card-horizontal-body-wrap` case in `markawesome-js`'s `test/parity-corpus.test.ts`.
+
 ## [0.18.0] - 2026-07-04
 
 ### Added

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/card_transformer.rb

@@ -138,8 +138,7 @@ module Markawesome
 
         # Main content
         if parts[:content] && !parts[:content].empty?
-          content_html = markdown_to_html(parts[:content])
-          html_parts << content_html
+          html_parts << body_content_html(parts[:content], orientation)
         end
 
         # Footer slot
@@ -149,6 +148,17 @@ module Markawesome
 
         "<wa-card#{attr_string}>#{html_parts.join}</wa-card>"
       end
+
+      # Horizontal cards wrap the body in a single <div> so Web Awesome's
+      # `:host([orientation='horizontal']) .body slot::slotted(*) { height: 100% }`
+      # rule — which it applies to EVERY direct body child — targets one wrapper
+      # instead of each block. Without the wrapper a multi-block body (e.g. a
+      # heading plus a paragraph) has each child stretched to the full card
+      # height, so the extra ones overflow below it.
+      def body_content_html(content, orientation)
+        content_html = markdown_to_html(content)
+        orientation == 'horizontal' ? "<div>#{content_html}</div>" : content_html
+      end
     end
   end
 end

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.0'
+  VERSION = '0.19.0'
 end

metadata

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