markawesome 0.13.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dde7893cda313985c975f86e5521db8a3f56268ebf8d0df5b304719e8db5b73b
-  data.tar.gz: 73e885ac60dfbe2b8734d44aa135fb345440c977390d8d3d7a22cc577328eadf
+  metadata.gz: a3f542a573c1e649456cd84852aec0549b8a4029c23953a947d1966e86f6730c
+  data.tar.gz: 2db687f1c67cfa97ebab7b29eecf7152e5396d98bd614eb04c99e115ad59b267
 SHA512:
-  metadata.gz: 1e4cab6567c4ef43c87472be12ec93d506fc7b4d47a9a7588aa4c99e28d58761e6705bbf56b0ed5efac032dff0960fa6af9d661042950aba516f76d8ee4881ac
-  data.tar.gz: 49df9a0d39e97272b3acd05b52980b86ace61eb00dd6be7e92d91dc90ec0c688b550e5b21e7999303c8f3dc6dd8188cac8d791c1fe5ad07baaac0ce10b23fd5c
+  metadata.gz: 58e6b4bcd8f1ae4a82059def1b169b8cd553cdc23ebc3d83299533ddb3be3ee153f0eb23ec104deea2740b4cdcf5d3e581f3f2aeb47d1ce1322bed875e4f5412
+  data.tar.gz: 34c077b57d27f96b8d8dae36a387044fe9dc263d74f2260455fb5bcc9ed8e25ae92ecd23aedeaaa03e88edd9e5a98138ea0d4d6ec15798b8a53badbc1eb267aa

data/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.15.0] - 2026-06-24
+
+### Added
+
+- New `TooltipTransformer` producing Web Awesome `<wa-tooltip>` — inline contextual help on hover/focus for glossary terms and inline definitions. Declarative, zero-JS, and static-site-safe: the tooltip is attached to a focusable anchor `<span>` via an auto-generated `for`/`id` pair, so authors write only the trigger term and the tip text.
+  - **Inline syntax** (primary): `(((anchor term >>> tip text)))`. The `(((` delimiter is unused by any other transformer, is not Markdown- or Liquid-special, and never appears in normal prose; the `>>>` separator matches the popover/dialog/details convention (anchor first, tip after `>>>`).
+  - **Block alternative**: `:::wa-tooltip placement? distance:N?` / anchor / `>>>` / tip / `:::`, for consistency with every other component's `:::wa-*` form.
+  - **Attributes** (order-independent leading tokens): `placement` (`top` default, `bottom`, `left`, `right`) and `distance:N`. Mirrors `PopoverTransformer`'s surface minus `link`/`without-arrow` (WA `<wa-tooltip>` has no `without-arrow` boolean — arrow size is CSS-only).
+  - **Tip content** is plain text (HTML-escaped), with literal `\n` rendered as `<br>` — the same surface as the popover's *inline* form. Tooltips hold brief text, so there is no Markdown body.
+  - **Emitted markup**: a focusable `<span id="tooltip-…" tabindex="0" class="ma-tooltip-anchor" style="text-decoration: underline dotted; cursor: help;">` anchor followed by `<wa-tooltip for="tooltip-…" placement="…" [distance="…"]>`. The anchor is focusable so keyboard/AT users get the tip (tooltips fire on focus too); `ma-tooltip-anchor` is a styling hook (mirrors popover's `ma-popover-trigger`).
+  - **IDs** are auto-wired via `tooltip-<first 8 of MD5(anchor+tip)>`, with `-2`/`-3` dedup suffixes for repeated identical tooltips — the same scheme as `PopoverTransformer`. Runs immediately after `PopoverTransformer` (early, after `LayoutTransformer`) so inline tooltips inside cards/callouts/details are transformed before Kramdown escapes `(((`/`>>>`.
+  - **Plain-markdown degradation** (`render_as_markdown`, used for `.md` endpoints / llms.txt): both forms degrade to `**anchor** (tip)`, mirroring the popover inline degradation.
+- Aligned placements (`top-start`, …), `show-delay`/`hide-delay`, and a rich-content block form are explicit future follow-ups, not part of v1.
+
+## [0.14.0] - 2026-06-24
+
+### Added
+
+- New `AccordionTransformer` producing Web Awesome `<wa-accordion>` / `<wa-accordion-item>` — a multi-section collapsible container for FAQs, docs sections, and "show more" content (the grouped, mutually-exclusive-capable sibling of `details`). The `/` delimiter is the container/item marker: container fence `//////` (6×), item fence `///` (3×) with an explicit `///` close, mirroring tabs (`++++++`/`+++`). An alternative `:::wa-accordion … :::` form is also accepted.
+  - **Container line** (bare tokens, order-independent, rightmost-wins): `appearance` (`outlined` default, `filled`, `filled-outlined`, `plain`), `mode` (`multiple`, `single`, `single-collapsible`), `icon-placement` (`start`, `end`), and a value-form `heading:N` → `heading-level="N"` where `N` is `1`–`6` or `none` (out-of-range values fall back to omitting the attribute). `appearance` is always emitted (defaulting to `outlined`); `mode`, `icon-placement`, and `heading-level` are emitted only when specified.
+  - **Item header** (`/// [expanded] [disabled] [icon:name] Label`): leading `expanded`/`disabled` flags become the matching boolean attributes; `icon:name` becomes a `<wa-icon slot="icon" name="…">` first child; the remaining text becomes the HTML-escaped `label`. Item bodies are full markdown and may contain other components.
+  - **Plain-markdown degradation** (`render_as_markdown`, used for `.md` endpoints / llms.txt): each item degrades to a `### Label` heading followed by its body, mirroring tabs.
+- `wa-accordion` is **experimental** in Web Awesome (added in 3.7), but `expanded`, `disabled`, and the `mode`/`appearance`/`icon-placement`/`heading-level` attributes are all declarative and static-site-safe — no JavaScript required. The interactive `expandAll()`/`collapseAll()` controls and rich/HTML `label` slot are out of scope for v1; item labels are plain text. The `--wa-accordion-divider-color` custom property removed in WA 3.9.0 is intentionally not exposed.
+
 ## [0.13.0] - 2026-06-20
 
 ### Added

data/lib/markawesome/plain_markdown_renderer.rb

@@ -24,9 +24,9 @@ module Markawesome
       # plugin during boot to override the default rendering for a single
       # component without forking the gem.
       #
-      # @param component [Symbol] one of :callout, :badge, :button, :card,
-      #   :carousel, :comparison, :copy_button, :details, :dialog, :icon,
-      #   :image_dialog, :layout, :popover, :tabs, :tag.
+      # @param component [Symbol] one of :accordion, :callout, :badge, :button,
+      #   :card, :carousel, :comparison, :copy_button, :details, :dialog, :icon,
+      #   :image_dialog, :layout, :popover, :tabs, :tag, :tooltip.
       # @yield [content, options] Proc that receives the full source content
       #   and the renderer options; returns the content with that component
       #   syntax replaced.
@@ -45,6 +45,7 @@ module Markawesome
     PIPELINE = %i[
       layout
       popover
+      tooltip
       badge
       button
       callout
@@ -58,11 +59,13 @@ module Markawesome
       icon
       tag
       tabs
+      accordion
     ].freeze
 
     TRANSFORMER_MAP = {
       layout: LayoutTransformer,
       popover: PopoverTransformer,
+      tooltip: TooltipTransformer,
       badge: BadgeTransformer,
       button: ButtonTransformer,
       callout: CalloutTransformer,
@@ -75,7 +78,8 @@ module Markawesome
       dialog: DialogTransformer,
       icon: IconTransformer,
       tag: TagTransformer,
-      tabs: TabsTransformer
+      tabs: TabsTransformer,
+      accordion: AccordionTransformer
     }.freeze
 
     def self.process(content, options = {})

data/lib/markawesome/transformer.rb

@@ -12,6 +12,7 @@ module Markawesome
 
       content = LayoutTransformer.transform(content)
       content = PopoverTransformer.transform(content)
+      content = TooltipTransformer.transform(content)
       content = BadgeTransformer.transform(content)
       content = ButtonTransformer.transform(content)
       content = CalloutTransformer.transform(content)
@@ -32,6 +33,10 @@ module Markawesome
       content = TagTransformer.transform(content)
       content = TabsTransformer.transform(content)
 
+      # Accordion runs last so item bodies may contain other already-transformed
+      # components (same reason tabs runs near the end).
+      content = AccordionTransformer.transform(content)
+
       CodeBlockProtector.restore(content, tokens)
     end
   end

data/lib/markawesome/transformers/accordion_transformer.rb

@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+require_relative '../attribute_parser'
+require_relative '../icon_slot_parser'
+
+module Markawesome
+  # Transforms accordion syntax into wa-accordion / wa-accordion-item elements
+  # Primary syntax:
+  #   //////appearance? mode? icon-placement? heading:N?
+  #   /// [expanded] [disabled] [icon:name] Label text
+  #   item body markdown
+  #   ///
+  #   //////
+  # Alternative syntax: :::wa-accordion ...same items... :::
+  #
+  # Container attributes (bare, order-independent, rightmost-wins):
+  #   - appearance: outlined (default), filled, filled-outlined, plain
+  #   - mode: multiple (default), single, single-collapsible
+  #   - icon-placement: start, end (default emitted only when given)
+  #   - heading:N -> heading-level="N" where N is 1-6 or "none"
+  # Item tokens (leading flags, then the rest of the line is the label):
+  #   - 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
+  # and the mode/appearance/icon-placement attributes are all static-safe.
+  class AccordionTransformer < BaseTransformer
+    CONTAINER_ATTRIBUTES = {
+      appearance: %w[outlined filled filled-outlined plain],
+      mode: %w[multiple single single-collapsible],
+      icon_placement: %w[start end]
+    }.freeze
+
+    ICON_SLOTS = {
+      default: 'icon',
+      slots: %w[icon],
+      slot_map: { 'icon' => 'icon' }
+    }.freeze
+
+    ITEM_FLAGS = %w[expanded disabled].freeze
+
+    PRIMARY_REGEX = %r{^/{6}([^\n]*)\n((?:/{3} [^\n]+\n.*?\n/{3}\n?)+)/{6}}m
+    ALTERNATIVE_REGEX = %r{^:::wa-accordion\s*([^\n]*)\n((?:/{3} [^\n]+\n.*?\n/{3}\n?)+):::}m
+    ITEM_REGEX = %r{^/{3} ([^\n]+)\n(.*?)\n/{3}}m
+
+    def self.transform(content)
+      transform_proc = proc do |params_string, items_block, _third|
+        attributes = AttributeParser.parse(params_string.to_s.strip, CONTAINER_ATTRIBUTES)
+        heading_level = extract_heading_level(params_string)
+
+        attr_parts = ["appearance=\"#{normalize_appearance(attributes[:appearance])}\""]
+        attr_parts << "mode=\"#{attributes[:mode]}\"" if attributes[:mode]
+        attr_parts << "icon-placement=\"#{attributes[:icon_placement]}\"" if attributes[:icon_placement]
+        attr_parts << "heading-level=\"#{heading_level}\"" if heading_level
+
+        "<wa-accordion #{attr_parts.join(' ')}>#{build_items(items_block)}</wa-accordion>"
+      end
+
+      patterns = dual_syntax_patterns(PRIMARY_REGEX, ALTERNATIVE_REGEX, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    def self.render_as_markdown(content, _options = {})
+      transform_proc = proc do |_params_string, items_block, _third|
+        items_block.scan(ITEM_REGEX).map do |header, body|
+          _flags, label = parse_item_flags_and_label(IconSlotParser.parse(header, ICON_SLOTS)[:remaining])
+          "### #{label}\n\n#{body.strip}"
+        end.join("\n\n")
+      end
+
+      patterns = dual_syntax_patterns(PRIMARY_REGEX, ALTERNATIVE_REGEX, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def build_items(items_block)
+        items_block.scan(ITEM_REGEX).map do |header, body|
+          icon_result = IconSlotParser.parse(header, ICON_SLOTS)
+          flags, label = parse_item_flags_and_label(icon_result[:remaining])
+
+          item_attrs = ["label=\"#{escape_html(label)}\""]
+          item_attrs << 'expanded' if flags.include?('expanded')
+          item_attrs << 'disabled' if flags.include?('disabled')
+
+          icon_html = IconSlotParser.to_html(icon_result[:icons], ICON_SLOTS[:slot_map])
+          body_html = markdown_to_html(body.strip)
+
+          "<wa-accordion-item #{item_attrs.join(' ')}>#{icon_html}#{body_html}</wa-accordion-item>"
+        end.join
+      end
+
+      # Consume leading expanded/disabled tokens; the remainder is the label.
+      def parse_item_flags_and_label(remaining)
+        tokens = remaining.to_s.strip.split(/\s+/)
+        flags = []
+        flags << tokens.shift while tokens.any? && ITEM_FLAGS.include?(tokens.first)
+        [flags, tokens.join(' ')]
+      end
+
+      def extract_heading_level(params_string)
+        return nil if params_string.nil? || params_string.strip.empty?
+
+        token = params_string.strip.split(/\s+/).find { |t| t.start_with?('heading:') }
+        return nil unless token
+
+        value = token.sub(/^heading:/, '')
+        return value if value == 'none' || value.match?(/\A[1-6]\z/)
+
+        nil
+      end
+
+      def normalize_appearance(appearance_param)
+        case appearance_param
+        when 'filled'
+          'filled'
+        when 'filled-outlined'
+          'filled-outlined'
+        when 'plain'
+          'plain'
+        else
+          'outlined'
+        end
+      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/tooltip_transformer.rb

@@ -0,0 +1,184 @@
+# frozen_string_literal: true
+
+require 'digest'
+require_relative 'base_transformer'
+require_relative '../attribute_parser'
+
+module Markawesome
+  # Transforms tooltip syntax into wa-tooltip elements attached to a focusable
+  # anchor span via an auto-generated for/id pair. Declarative, zero-JS, and
+  # static-site-safe — great for glossary terms and inline definitions.
+  #
+  # Inline syntax (primary): (((anchor term >>> tip text)))
+  # Alternative block syntax: :::wa-tooltip params\nanchor\n>>>\ntip\n:::
+  #
+  # Params: space-separated tokens (order doesn't matter)
+  # Placement: top (default), bottom, left, right
+  # Distance: distance:N (e.g., distance:10)
+  #
+  # Tip content is plain text (HTML-escaped), with literal `\n` rendered as
+  # <br> — the same surface as the popover's inline form. Tooltips hold brief
+  # text, so there is no markdown body.
+  class TooltipTransformer < BaseTransformer
+    TOOLTIP_ATTRIBUTES = {
+      placement: %w[top bottom left right]
+    }.freeze
+
+    # Inline regex (single-line, no newlines allowed): capture 1 = params+anchor,
+    # capture 2 = tip text.
+    INLINE_REGEX = /\(\(\([ \t]*([^\r\n]*?)[ \t]*>>>[ \t]*([^\r\n]+?)[ \t]*\)\)\)/
+    # Block alternative regex (multiline): capture 1 = params, 2 = anchor, 3 = tip.
+    ALTERNATIVE_REGEX = /^:::wa-tooltip([^\n]*)$\n(.*?)\n^>>>$\n(.*?)\n^:::$/m
+
+    def self.transform(content)
+      # Tracks ID base usage within this transform call so repeated tooltips
+      # (same anchor + tip) get disambiguated suffixes instead of colliding on
+      # the page.
+      seen_ids = Hash.new(0)
+
+      inline_transform = {
+        regex: INLINE_REGEX,
+        block: proc do |_match, matchdata|
+          combined = matchdata[1]
+          tip_text = matchdata[2].strip
+
+          params_string, anchor_text = parse_inline_anchor_and_params(combined)
+          placement, distance = parse_parameters(params_string)
+
+          tooltip_id = generate_tooltip_id(anchor_text, tip_text, seen_ids)
+
+          build_tooltip_html(tooltip_id, anchor_text, tip_text,
+                             { placement: placement, distance: distance })
+        end
+      }
+
+      alternative_transform = {
+        regex: ALTERNATIVE_REGEX,
+        block: proc do |_match, matchdata|
+          params_string = matchdata[1]
+          anchor_text = matchdata[2].strip
+          tip_text = matchdata[3].strip
+
+          placement, distance = parse_parameters(params_string)
+
+          tooltip_id = generate_tooltip_id(anchor_text, tip_text, seen_ids)
+
+          build_tooltip_html(tooltip_id, anchor_text, tip_text,
+                             { placement: placement, distance: distance })
+        end
+      }
+
+      # Inline pattern first to avoid conflicts with the block pattern.
+      apply_multiple_patterns(content, [inline_transform, alternative_transform])
+    end
+
+    def self.render_as_markdown(content, _options = {})
+      inline_transform = {
+        regex: INLINE_REGEX,
+        block: proc do |_match, matchdata|
+          combined = matchdata[1]
+          tip_text = matchdata[2].strip
+          _params, anchor_text = parse_inline_anchor_and_params(combined)
+          "**#{anchor_text}** (#{tip_text})"
+        end
+      }
+
+      alternative_transform = {
+        regex: ALTERNATIVE_REGEX,
+        block: proc do |_match, matchdata|
+          anchor_text = matchdata[2].strip
+          tip_text = matchdata[3].strip
+          "**#{anchor_text}** (#{tip_text})"
+        end
+      }
+
+      apply_multiple_patterns(content, [inline_transform, alternative_transform])
+    end
+
+    class << self
+      private
+
+      def parse_parameters(params_string)
+        return ['top', nil] if params_string.nil? || params_string.strip.empty?
+
+        attributes = AttributeParser.parse(params_string, TOOLTIP_ATTRIBUTES)
+        placement = attributes[:placement] || 'top'
+
+        # Look for distance:N parameter (rightmost-wins)
+        tokens = params_string.strip.split(/\s+/)
+        distance_token = tokens.reverse.find { |token| token.match?(/^distance:\d+$/) }
+        distance = distance_token&.sub('distance:', '')
+
+        [placement, distance]
+      end
+
+      def generate_tooltip_id(anchor_text, tip_text, seen_ids)
+        hash_input = "#{anchor_text}#{tip_text}"
+        hash = Digest::MD5.hexdigest(hash_input)
+        base = "tooltip-#{hash[0..7]}"
+        occurrence = seen_ids[base] += 1
+        occurrence == 1 ? base : "#{base}-#{occurrence}"
+      end
+
+      def parse_inline_anchor_and_params(combined_string)
+        tokens = combined_string.strip.split(/\s+/)
+        param_tokens = []
+        anchor_tokens = []
+        found_anchor = false
+
+        tokens.each do |token|
+          if !found_anchor && tooltip_param?(token)
+            param_tokens << token
+          else
+            found_anchor = true
+            anchor_tokens << token
+          end
+        end
+
+        anchor_text = anchor_tokens.join(' ')
+
+        # If no anchor text remains, treat entire string as the anchor (no params)
+        if anchor_text.empty?
+          ['', combined_string.strip]
+        else
+          [param_tokens.join(' '), anchor_text]
+        end
+      end
+
+      def tooltip_param?(token)
+        TOOLTIP_ATTRIBUTES.any? { |_attr, values| values.include?(token) } ||
+          token.match?(/^distance:\d+$/)
+      end
+
+      def build_tooltip_html(tooltip_id, anchor_text, tip_text, options)
+        anchor_content = escape_html(anchor_text)
+        tip_escaped = escape_html(tip_text).gsub('\n', '<br>')
+
+        tooltip_attrs = ["for=\"#{tooltip_id}\""]
+        tooltip_attrs << "placement=\"#{options[:placement]}\""
+        tooltip_attrs << "distance=\"#{options[:distance]}\"" if options[:distance]
+
+        anchor = build_anchor(tooltip_id, anchor_content)
+
+        "#{anchor}<wa-tooltip #{tooltip_attrs.join(' ')}>#{tip_escaped}</wa-tooltip>"
+      end
+
+      # Focusable span so keyboard/AT users get the tip (tooltips fire on focus
+      # too). The dotted underline + help cursor mirror the link-style popover
+      # trigger; the ma-tooltip-anchor class is a styling hook for consumers.
+      def build_anchor(tooltip_id, anchor_content)
+        style = 'text-decoration: underline dotted; cursor: help;'
+        "<span id=\"#{tooltip_id}\" tabindex=\"0\" class=\"ma-tooltip-anchor\" " \
+          "style=\"#{style}\">#{anchor_content}</span>"
+      end
+
+      def escape_html(text)
+        text.gsub('&', '&amp;')
+            .gsub('<', '&lt;')
+            .gsub('>', '&gt;')
+            .gsub('"', '&quot;')
+            .gsub("'", '&#39;')
+      end
+    end
+  end
+end

data/lib/markawesome/transformers.rb

@@ -4,6 +4,7 @@
 # This file makes it easy to require all transformers at once
 
 require_relative 'transformers/base_transformer'
+require_relative 'transformers/accordion_transformer'
 require_relative 'transformers/badge_transformer'
 require_relative 'transformers/button_transformer'
 require_relative 'transformers/callout_transformer'
@@ -19,3 +20,4 @@ require_relative 'transformers/layout_transformer'
 require_relative 'transformers/popover_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.13.0'
+  VERSION = '0.15.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.13.0
+  version: 0.15.0
 platform: ruby
 authors:
 - Janne Waren
@@ -84,6 +84,7 @@ files:
 - lib/markawesome/plain_markdown_renderer.rb
 - lib/markawesome/transformer.rb
 - lib/markawesome/transformers.rb
+- lib/markawesome/transformers/accordion_transformer.rb
 - lib/markawesome/transformers/badge_transformer.rb
 - lib/markawesome/transformers/base_transformer.rb
 - lib/markawesome/transformers/button_transformer.rb
@@ -100,6 +101,7 @@ files:
 - lib/markawesome/transformers/popover_transformer.rb
 - lib/markawesome/transformers/tabs_transformer.rb
 - lib/markawesome/transformers/tag_transformer.rb
+- lib/markawesome/transformers/tooltip_transformer.rb
 - lib/markawesome/version.rb
 - markawesome.gemspec
 homepage: https://github.com/jannewaren/markawesome