markawesome 0.16.0 → 0.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eee224c1babae361baa15c8c0f0a65bebf839d9debc599bf8e4a43bb3752bdb4
-  data.tar.gz: 9d8d78ec8aaf682bf252c634a220fa7cb9283ec15dc70c280d69967ed9f2945b
+  metadata.gz: a8753b6516f4a04d147b50bd980b9dd2040dc2cba63a87746121b4e25bb8529e
+  data.tar.gz: 606d078978520bf6f53c96d4d91f2f1bb66cbdbc85e1d4236d2d3ca18f222c35
 SHA512:
-  metadata.gz: edb36c15048371cf37c3d860d214faacc61158b9a497f09293ade0fb152b02bcb0c7a37ed1db0725939f1bea4d5159aad9bf3452456120ed5c5250c55dd61f4b
-  data.tar.gz: 112fbcbb947dc90348bc2c187b0ee3a8379fba4bff06e8da0ee3f8b550e9307933333795e245a524b41478b41fc75875f33a62f1b63263a13c5dabd16a37475f
+  metadata.gz: a647d34d02688da9ce8b7a5511f8544123c4943c9f108f66598a9da8246bf6c7130d2138cde68392efc8b7603be42679e88843414847759c69d48d1cfc8297ca
+  data.tar.gz: fc0f43062d5ca3a7a2a12d80c8a77cbfc33a856270b1d02dbb5d9203200c591b6b74e768ea3ccc8c48b1aadb607bf9228dd5602acd0bcc81dbc8f8d865a920da

data/CHANGELOG.md

@@ -4,6 +4,31 @@ 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).
 
+## [Unreleased]
+
+## [0.17.0] - 2026-06-26
+
+### Added
+
+- New `VideoTransformer` producing Web Awesome's two media components — `<wa-video>` (a single embedded video with custom controls) and `<wa-video-playlist>` (a playlist wrapping multiple `<wa-video>` children). Both are Web Awesome **Pro** (experimental); the markup emitted is declarative and static-site-safe.
+  - **Single video** (primary): a `;;;<tokens>` fence, body, closing `;;;`. **Playlist** (primary): a `;;;;;;<tokens>` container wrapping bare `;;;` items (mirroring the carousel `~~~`/`~~~~~~` structure — the bare `;;;` item open keeps the closing `;;;;;;` from being mis-read as an item). Block alternatives: `:::wa-video <tokens>` and `:::wa-video-playlist <tokens>`. Runs in the pipeline immediately after `ComparisonTransformer`.
+  - **Body**: the first markdown link `[text](url)` supplies `title`/`src`; the first markdown image `![alt](url)` supplies `poster` (a negative lookbehind keeps the image's `[…]()` from being taken as the link). A block with no link (no `src`) is left untransformed.
+  - **Tokens**: `controls:none|standard|full` and `preload:auto|metadata|none` (enum-validated `key:value`; invalid values dropped) plus the boolean flags `autoplay`, `autoplay-muted`, `autoplay-on-visible`, `loop`, `muted` (whole-token matched, so `autoplay-muted` never triggers `autoplay`). The playlist's `controls` preset is forwarded to the container only — children omit it. Deterministic emission order: `src`, `poster`, `title`, `controls`, `preload`, then `autoplay`, `autoplay-muted`, `autoplay-on-visible`, `loop`, `muted`; `src`/`poster`/`title` are HTML-escaped.
+  - **Plain-markdown degradation** (`render_as_markdown`, used for `.md` endpoints / llms.txt): a single video degrades to `[title](src)`; a playlist degrades to a bulleted list of `- [title](src)`.
+  - Captions (`<track>`) and multi-format `<source>` children are documented v1 follow-ups — a single `src` attribute suffices today.
+- New `DateTransformer` producing Web Awesome's two declarative timestamp components — `<wa-format-date>` (an absolute, locale-formatted date such as "June 26, 2026") and `<wa-relative-time>` ("3 days ago", optionally live-ticking). The date value is baked into the markup at build time; both components are pure declarative wrappers over the browser's `Intl.DateTimeFormat` / `Intl.RelativeTimeFormat`, with no data fetching — ideal for blog post dates, changelog stamps, and "last updated".
+  - **Inline syntax** (primary): `[[[ <date> <tokens> ]]]` — triple square brackets, single-line, transformed before Kramdown (runs right after `TooltipTransformer`). `[[[` collides with no other delimiter and survives Kramdown + Jekyll/Liquid.
+  - **Block alternative**: `:::wa-format-date <date> <tokens>` / `:::wa-relative-time <date> <tokens>` with an empty body closed by `:::`. The selector name chooses the mode directly.
+  - **Mode**: absolute (`<wa-format-date>`) is the default; a bare `relative` token in the inline form switches to `<wa-relative-time>`.
+  - **Date token**: the token matching ISO 8601 `YYYY-MM-DD` (optionally `THH:MM[:SS][.s][Z|±HH:MM]`) is passed verbatim (escaped) into `date="…"`. If omitted, `date` is dropped and the component shows the viewer's **current** time (runtime-now). Datetimes use the `T` separator (a space would break tokenization).
+  - **format-date formatting**: `style:short|medium|long|full` and `time:short|medium|long|full` presets expand to Web Awesome's granular attributes, with granular overrides (`weekday`, `era`, `year`, `month`, `day`, `hour`, `minute`, `second`, `hour-format`, `time-zone-name`, `time-zone`, `lang`/`locale` → `lang`) winning per key (rightmost-wins). Enum values are validated; invalid values and unknown tokens are silently dropped. A bare date with no style/time/granular field defaults to `style:long`. Deterministic emission order: `date weekday era year month day hour minute second time-zone-name time-zone hour-format lang`.
+  - **relative-time formatting**: `format` (`long|short|narrow`, default `long` omitted), `numeric` (`auto|always`, default `auto` omitted), `sync` (boolean live-update flag), and `lang`/`locale` → `lang`. Date/style tokens are ignored in relative mode. Deterministic emission order: `date format numeric sync lang`.
+  - **Plain-markdown degradation** (`render_as_markdown`, used for `.md` endpoints / llms.txt): each timestamp degrades to its raw date string (empty for a runtime-now timestamp), since plain text has no locale formatting.
+- **Static-site caveat**: like `<wa-icon>`, both timestamp components render generated text into shadow DOM with no light-DOM fallback — with Web Awesome's JS disabled they show nothing. This matches our existing generated-content model (documented alongside the `<wa-tag with-remove>` caveat); no fallback text is emitted.
+- `PopoverTransformer` and `TooltipTransformer` now accept **all twelve** Web Awesome placements — the four primary (`top`, `bottom`, `left`, `right`) plus the eight aligned variants (`top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`) — matching `<wa-popover>`/`<wa-tooltip>`'s full `placement` surface. `AttributeParser` matches whole tokens, so `bottom-start` resolves without colliding with `bottom`.
+- `PopoverTransformer` and `TooltipTransformer` gain a `skidding:N` token, mirroring `distance:N`. It emits `<wa-popover>`/`<wa-tooltip>`'s `skidding` attribute — the offset **along** the target (whereas `distance` is the offset **away** from it). Negative values are allowed (`skidding:-4`). Emission order is deterministic: `placement`, `without-arrow`, `distance`, `skidding` (popover) and `placement`, `distance`, `skidding` (tooltip).
+- `TabsTransformer` supports a per-tab `disabled` flag as a **leading token** on the `+++ ` item header (e.g. `+++ disabled Coming soon`), mirroring the accordion item flags. It emits `<wa-tab disabled>` (the tab renders but cannot be selected) and strips the flag from the label; a non-leading occurrence of the word is left untouched. The `render_as_markdown` degradation strips the flag too (`### Coming soon`). Non-disabled tabs are byte-identical to before.
+
 ## [0.16.0] - 2026-06-25
 
 ### Added

data/lib/markawesome/plain_markdown_renderer.rb

@@ -46,12 +46,14 @@ module Markawesome
       layout
       popover
       tooltip
+      date
       badge
       button
       callout
       card
       carousel
       comparison
+      video
       copy_button
       details
       image_dialog
@@ -66,12 +68,14 @@ module Markawesome
       layout: LayoutTransformer,
       popover: PopoverTransformer,
       tooltip: TooltipTransformer,
+      date: DateTransformer,
       badge: BadgeTransformer,
       button: ButtonTransformer,
       callout: CalloutTransformer,
       card: CardTransformer,
       carousel: CarouselTransformer,
       comparison: ComparisonTransformer,
+      video: VideoTransformer,
       copy_button: CopyButtonTransformer,
       details: DetailsTransformer,
       image_dialog: ImageDialogTransformer,

data/lib/markawesome/transformer.rb

@@ -13,12 +13,14 @@ module Markawesome
       content = LayoutTransformer.transform(content)
       content = PopoverTransformer.transform(content)
       content = TooltipTransformer.transform(content)
+      content = DateTransformer.transform(content)
       content = BadgeTransformer.transform(content)
       content = ButtonTransformer.transform(content)
       content = CalloutTransformer.transform(content)
       content = CardTransformer.transform(content)
       content = CarouselTransformer.transform(content)
       content = ComparisonTransformer.transform(content)
+      content = VideoTransformer.transform(content)
       content = CopyButtonTransformer.transform(content)
       content = DetailsTransformer.transform(content)
 

data/lib/markawesome/transformers/date_transformer.rb

@@ -0,0 +1,209 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms declarative timestamp syntax into Web Awesome's two timestamp
+  # components:
+  #   <wa-format-date>   — an absolute, locale-formatted date ("June 26, 2026")
+  #   <wa-relative-time> — a relative phrase ("3 days ago"), optionally ticking
+  #
+  # These are pure declarative wrappers over the browser's Intl.DateTimeFormat /
+  # Intl.RelativeTimeFormat: the date value is baked into the markup at build
+  # time, with no data fetching. Great for blog dates, changelog stamps, and
+  # "last updated".
+  #
+  # Inline (primary):    [[[ <date> <tokens> ]]]
+  # Block (alternative): :::wa-format-date <date> <tokens>  /  :::wa-relative-time …
+  #                      followed by a closing ::: (empty body)
+  #
+  # Mode: absolute (<wa-format-date>) is the default; a bare `relative` token in
+  # the inline form switches to <wa-relative-time>. The block selector name
+  # chooses the mode directly.
+  #
+  # Static-site caveat: both components render generated text into shadow DOM
+  # with no light-DOM fallback — with Web Awesome's JS disabled they show
+  # nothing. This is identical to <wa-icon> and the other generated-content
+  # components we already emit, so it is consistent with our model.
+  class DateTransformer < BaseTransformer
+    # Inline: content excludes `]`, non-greedy, multiple-per-line, single-line.
+    INLINE_REGEX = /\[\[\[[ \t]*([^\]\r\n]+?)[ \t]*\]\]\]/
+    # Block: selector name picks the mode; an empty body, closed by `:::`.
+    ALTERNATIVE_REGEX = /^:::wa-(format-date|relative-time)[ \t]*([^\n]*)\n:::$/
+
+    # A token is the date when it is an ISO 8601 date or datetime (datetimes use
+    # the `T` separator — a space would break whitespace tokenization).
+    DATE_TOKEN_REGEX =
+      /\A\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2})?(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?)?\z/
+
+    # style:/time: presets expand to Web Awesome's granular date/time attributes.
+    STYLE_PRESETS = {
+      'short' => { 'month' => 'numeric', 'day' => 'numeric', 'year' => '2-digit' },
+      'medium' => { 'month' => 'short', 'day' => 'numeric', 'year' => 'numeric' },
+      'long' => { 'month' => 'long', 'day' => 'numeric', 'year' => 'numeric' },
+      'full' => { 'weekday' => 'long', 'month' => 'long', 'day' => 'numeric', 'year' => 'numeric' }
+    }.freeze
+
+    TIME_PRESETS = {
+      'short' => { 'hour' => 'numeric', 'minute' => 'numeric' },
+      'medium' => { 'hour' => 'numeric', 'minute' => 'numeric', 'second' => 'numeric' },
+      'long' => { 'hour' => 'numeric', 'minute' => 'numeric', 'second' => 'numeric', 'time-zone-name' => 'short' },
+      'full' => { 'hour' => 'numeric', 'minute' => 'numeric', 'second' => 'numeric', 'time-zone-name' => 'long' }
+    }.freeze
+
+    # Granular key:value tokens that pass through to the same-named WA attribute,
+    # validated against an allowed enum (invalid values dropped).
+    GRANULAR_ENUMS = {
+      'weekday' => %w[narrow short long],
+      'era' => %w[narrow short long],
+      'year' => %w[numeric 2-digit],
+      'month' => %w[numeric 2-digit narrow short long],
+      'day' => %w[numeric 2-digit],
+      'hour' => %w[numeric 2-digit],
+      'minute' => %w[numeric 2-digit],
+      'second' => %w[numeric 2-digit],
+      'hour-format' => %w[auto 12 24],
+      'time-zone-name' => %w[short long]
+    }.freeze
+
+    # Granular keys that count as an explicit date/time field — their presence
+    # (or a style:/time: preset) suppresses the style:long default.
+    CONTENT_FIELDS = %w[weekday era year month day hour minute second time-zone-name].freeze
+
+    # Deterministic emission order (required for byte-for-byte parity).
+    FORMAT_DATE_ORDER = %w[date weekday era year month day hour minute second
+                           time-zone-name time-zone hour-format lang].freeze
+
+    RELATIVE_FORMATS = %w[long short narrow].freeze
+    RELATIVE_NUMERICS = %w[auto always].freeze
+
+    def self.transform(content)
+      patterns = [
+        { regex: INLINE_REGEX, block: proc { |_m, md| render_tokens(md[1], nil) } },
+        { regex: ALTERNATIVE_REGEX,
+          block: proc { |_m, md| render_tokens(md[2], md[1] == 'relative-time' ? :relative : :absolute) } }
+      ]
+      apply_multiple_patterns(content, patterns)
+    end
+
+    # Plain-markdown degradation: there is no locale formatting in plain text,
+    # so each timestamp degrades to its raw date string (empty when omitted).
+    def self.render_as_markdown(content, _options = {})
+      patterns = [
+        { regex: INLINE_REGEX, block: proc { |_m, md| extract_date(md[1]) } },
+        { regex: ALTERNATIVE_REGEX, block: proc { |_m, md| extract_date(md[2]) } }
+      ]
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def render_tokens(token_string, mode_override)
+        tokens = token_string.to_s.strip.split(/\s+/)
+        date, tokens = split_date(tokens)
+        mode = mode_override || (tokens.include?('relative') ? :relative : :absolute)
+
+        mode == :relative ? build_relative_time(date, tokens) : build_format_date(date, tokens)
+      end
+
+      # Pull the first date/datetime token out, leaving the option tokens.
+      def split_date(tokens)
+        index = tokens.index { |token| token.match?(DATE_TOKEN_REGEX) }
+        return [nil, tokens] unless index
+
+        [tokens[index], tokens[0...index] + tokens[(index + 1)..]]
+      end
+
+      def extract_date(token_string)
+        tokens = token_string.to_s.strip.split(/\s+/)
+        tokens.find { |token| token.match?(DATE_TOKEN_REGEX) }.to_s
+      end
+
+      def build_format_date(date, tokens)
+        attrs = {}
+        apply_presets(tokens, attrs)
+        apply_granular(tokens, attrs)
+        # A bare date (no style/time/granular field) defaults to style:long.
+        attrs.merge!(STYLE_PRESETS['long']) if (attrs.keys & CONTENT_FIELDS).empty?
+        attrs['date'] = date if date
+
+        parts = FORMAT_DATE_ORDER.filter_map do |key|
+          "#{key}=\"#{escape_html(attrs[key])}\"" if attrs.key?(key)
+        end
+        build_element('wa-format-date', parts)
+      end
+
+      # Apply the rightmost valid style: and time: presets.
+      def apply_presets(tokens, attrs)
+        style = nil
+        time = nil
+        tokens.each do |token|
+          if (m = token.match(/\Astyle:(.+)\z/)) && STYLE_PRESETS.key?(m[1])
+            style = m[1]
+          elsif (m = token.match(/\Atime:(.+)\z/)) && TIME_PRESETS.key?(m[1])
+            time = m[1]
+          end
+        end
+        attrs.merge!(STYLE_PRESETS[style]) if style
+        attrs.merge!(TIME_PRESETS[time]) if time
+      end
+
+      # Apply granular enum keys (override presets) and free-string modifiers
+      # (time-zone, lang/locale). Later tokens win.
+      def apply_granular(tokens, attrs)
+        tokens.each do |token|
+          next unless (m = token.match(/\A([a-z-]+):(.+)\z/))
+
+          key = m[1]
+          value = m[2]
+          if GRANULAR_ENUMS[key]&.include?(value)
+            attrs[key] = value
+          elsif key == 'time-zone'
+            attrs['time-zone'] = value
+          elsif %w[lang locale].include?(key)
+            attrs['lang'] = value
+          end
+        end
+      end
+
+      def build_relative_time(date, tokens)
+        opts = parse_relative_options(tokens)
+        parts = []
+        parts << "date=\"#{escape_html(date)}\"" if date
+        parts << "format=\"#{opts[:format]}\"" if opts[:format] && opts[:format] != 'long'
+        parts << "numeric=\"#{opts[:numeric]}\"" if opts[:numeric] && opts[:numeric] != 'auto'
+        parts << 'sync' if opts[:sync]
+        parts << "lang=\"#{escape_html(opts[:lang])}\"" if opts[:lang]
+        build_element('wa-relative-time', parts)
+      end
+
+      def parse_relative_options(tokens)
+        opts = { format: nil, numeric: nil, sync: false, lang: nil }
+        tokens.each do |token|
+          if token == 'sync'
+            opts[:sync] = true
+          elsif (m = token.match(/\Aformat:(.+)\z/)) && RELATIVE_FORMATS.include?(m[1])
+            opts[:format] = m[1]
+          elsif (m = token.match(/\Anumeric:(.+)\z/)) && RELATIVE_NUMERICS.include?(m[1])
+            opts[:numeric] = m[1]
+          elsif (m = token.match(/\A(?:lang|locale):(.+)\z/))
+            opts[:lang] = m[1]
+          end
+        end
+        opts
+      end
+
+      def build_element(tag, parts)
+        return "<#{tag}></#{tag}>" if parts.empty?
+
+        "<#{tag} #{parts.join(' ')}></#{tag}>"
+      end
+
+      def escape_html(text)
+        text.gsub('&', '&amp;').gsub('<', '&lt;').gsub('>', '&gt;')
+            .gsub('"', '&quot;').gsub("'", '&#39;')
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/popover_transformer.rb

@@ -11,12 +11,15 @@ module Markawesome
   # Inline syntax: &&&params? trigger text >>> popover content&&&
   #
   # Params: space-separated tokens (order doesn't matter)
-  # Placement: top (default), bottom, left, right
+  # Placement: top (default), bottom, left, right, plus the eight aligned
+  #   variants (top-start, top-end, right-start, …) — the full wa-popover surface
   # Flags: without-arrow
-  # Distance: distance:N (e.g., distance:10)
+  # Distance: distance:N (e.g., distance:10) — offset away from the target
+  # Skidding: skidding:N (e.g., skidding:12, skidding:-4) — offset along the target
   class PopoverTransformer < BaseTransformer
     POPOVER_ATTRIBUTES = {
-      placement: %w[top bottom left right],
+      placement: %w[top top-start top-end right right-start right-end
+                    bottom bottom-start bottom-end left left-start left-end],
       without_arrow: %w[without-arrow],
       trigger_style: %w[link]
     }.freeze
@@ -42,13 +45,13 @@ module Markawesome
           popover_content = matchdata[2].strip
 
           params_string, trigger_text = parse_inline_trigger_and_params(combined)
-          placement, without_arrow, distance, _link_style = parse_parameters(params_string)
+          placement, without_arrow, distance, _link_style, skidding = parse_parameters(params_string)
 
           popover_id = generate_popover_id(trigger_text, popover_content, seen_ids)
 
           build_inline_popover_html(popover_id, trigger_text, popover_content,
                                     { placement: placement, without_arrow: without_arrow,
-                                      distance: distance })
+                                      distance: distance, skidding: skidding })
         end
       }
 
@@ -57,7 +60,7 @@ module Markawesome
         trigger_text = trigger_text.strip
         popover_content = popover_content.strip
 
-        placement, without_arrow, distance, link_style = parse_parameters(params_string)
+        placement, without_arrow, distance, link_style, skidding = parse_parameters(params_string)
 
         popover_id = generate_popover_id(trigger_text, popover_content, seen_ids)
 
@@ -65,7 +68,7 @@ module Markawesome
 
         build_popover_html(popover_id, trigger_text, content_html,
                            { placement: placement, without_arrow: without_arrow,
-                             distance: distance, link_style: link_style })
+                             distance: distance, link_style: link_style, skidding: skidding })
       end
 
       # Inline patterns first to avoid conflicts with block patterns
@@ -106,19 +109,21 @@ module Markawesome
       private
 
       def parse_parameters(params_string)
-        return ['top', false, nil, false] if params_string.nil? || params_string.strip.empty?
+        return ['top', false, nil, false, nil] if params_string.nil? || params_string.strip.empty?
 
         attributes = AttributeParser.parse(params_string, POPOVER_ATTRIBUTES)
         placement = attributes[:placement] || 'top'
         without_arrow = attributes[:without_arrow] == 'without-arrow'
         link_style = attributes[:trigger_style] == 'link'
 
-        # Look for distance:N parameter
+        # Look for distance:N and skidding:N parameters (skidding may be negative)
         tokens = params_string.strip.split(/\s+/)
         distance_token = tokens.find { |token| token.match?(/^distance:\d+$/) }
         distance = distance_token&.sub('distance:', '')
+        skidding_token = tokens.find { |token| token.match?(/^skidding:-?\d+$/) }
+        skidding = skidding_token&.sub('skidding:', '')
 
-        [placement, without_arrow, distance, link_style]
+        [placement, without_arrow, distance, link_style, skidding]
       end
 
       def generate_popover_id(trigger_text, content, seen_ids)
@@ -156,42 +161,36 @@ module Markawesome
 
       def popover_param?(token)
         POPOVER_ATTRIBUTES.any? { |_attr, values| values.include?(token) } ||
-          token.match?(/^distance:\d+$/)
+          token.match?(/^distance:\d+$/) ||
+          token.match?(/^skidding:-?\d+$/)
+      end
+
+      # Build the <wa-popover> attribute list. Emission order is fixed:
+      # for, placement, without-arrow, distance, skidding.
+      def popover_attributes(popover_id, options)
+        attrs = ["for='#{popover_id}'", "placement='#{options[:placement]}'"]
+        attrs << 'without-arrow' if options[:without_arrow]
+        attrs << "distance='#{options[:distance]}'" if options[:distance]
+        attrs << "skidding='#{options[:skidding]}'" if options[:skidding]
+        attrs
       end
 
       def build_inline_popover_html(popover_id, trigger_text, content_text, options)
         trigger_content = escape_html(trigger_text)
-        content_escaped = escape_html(content_text)
-        content_escaped = content_escaped.gsub('\n', '<br>')
-
-        popover_attrs = ["for='#{popover_id}'"]
-        popover_attrs << "placement='#{options[:placement]}'"
-        popover_attrs << 'without-arrow' if options[:without_arrow]
-        popover_attrs << "distance='#{options[:distance]}'" if options[:distance]
+        content_escaped = escape_html(content_text).gsub('\n', '<br>')
 
+        attrs = popover_attributes(popover_id, options)
         trigger = build_trigger(popover_id, trigger_content, true)
 
-        "#{trigger}<wa-popover #{popover_attrs.join(' ')}>#{content_escaped}</wa-popover>"
+        "#{trigger}<wa-popover #{attrs.join(' ')}>#{content_escaped}</wa-popover>"
       end
 
       def build_popover_html(popover_id, trigger_text, content_html, options)
-        # Escape trigger text for security
         trigger_content = escape_html(trigger_text)
-
-        # Build popover attributes
-        popover_attrs = ["for='#{popover_id}'"]
-        popover_attrs << "placement='#{options[:placement]}'"
-        popover_attrs << 'without-arrow' if options[:without_arrow]
-        popover_attrs << "distance='#{options[:distance]}'" if options[:distance]
-
+        attrs = popover_attributes(popover_id, options)
         trigger = build_trigger(popover_id, trigger_content, options[:link_style])
 
-        html = []
-        html << trigger
-        html << "<wa-popover #{popover_attrs.join(' ')}>"
-        html << content_html
-        html << '</wa-popover>'
-        html.join("\n")
+        [trigger, "<wa-popover #{attrs.join(' ')}>", content_html, '</wa-popover>'].join("\n")
       end
 
       def build_trigger(popover_id, trigger_content, link_style)

data/lib/markawesome/transformers/tabs_transformer.rb

@@ -12,6 +12,8 @@ module Markawesome
   #   - activation: auto (default), manual
   #   - active: panel name to show initially (e.g., "general", "tab-2")
   #   - no-scroll-controls: disables scroll arrows
+  # Per-tab flag (leading token on the `+++ ` item header, mirroring accordion):
+  #   - disabled: this tab renders but cannot be selected (e.g., "+++ disabled Coming soon")
   class TabsTransformer < BaseTransformer
     COMPONENT_ATTRIBUTES = {
       placement: %w[top bottom start end],
@@ -66,7 +68,8 @@ module Markawesome
       transform_proc = proc do |_params_string, tabs_block, _third|
         tab_contents = tabs_block.scan(/^\+\+\+ ([^\n]+)\n(.*?)\n\+\+\+/m)
         tab_contents.map do |title, panel_content|
-          "### #{title.strip}\n\n#{panel_content.strip}"
+          label, = parse_tab_header(title)
+          "### #{label}\n\n#{panel_content.strip}"
         end.join("\n\n")
       end
 
@@ -85,7 +88,11 @@ module Markawesome
 
         tab_contents.each_with_index do |(title, panel_content), index|
           tab_id = "tab-#{index + 1}"
-          tabs << "<wa-tab panel=\"#{tab_id}\">#{title.strip}</wa-tab>"
+          label, disabled = parse_tab_header(title)
+
+          tab_attrs = ["panel=\"#{tab_id}\""]
+          tab_attrs << 'disabled' if disabled
+          tabs << "<wa-tab #{tab_attrs.join(' ')}>#{label}</wa-tab>"
 
           panel_html = markdown_to_html(panel_content.strip)
           tab_panels << "<wa-tab-panel name=\"#{tab_id}\">#{panel_html}</wa-tab-panel>"
@@ -93,6 +100,17 @@ module Markawesome
 
         [tabs, tab_panels]
       end
+
+      # Parse a tab item header. A leading `disabled` token (case-sensitive,
+      # exactly `disabled` or `disabled `-prefixed) flags the tab as disabled and
+      # is stripped from the label; otherwise the label is the stripped title,
+      # unchanged. Mirrors accordion's leading item flags.
+      def parse_tab_header(title)
+        stripped = title.to_s.strip
+        return [stripped, false] unless stripped == 'disabled' || stripped.start_with?('disabled ')
+
+        [stripped.sub(/\Adisabled\s*/, ''), true]
+      end
     end
   end
 end

data/lib/markawesome/transformers/tooltip_transformer.rb

@@ -13,15 +13,18 @@ module Markawesome
   # 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)
+  # Placement: top (default), bottom, left, right, plus the eight aligned
+  #   variants (top-start, top-end, right-start, …) — the full wa-tooltip surface
+  # Distance: distance:N (e.g., distance:10) — offset away from the target
+  # Skidding: skidding:N (e.g., skidding:12, skidding:-4) — offset along the target
   #
   # 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]
+      placement: %w[top top-start top-end right right-start right-end
+                    bottom bottom-start bottom-end left left-start left-end]
     }.freeze
 
     # Inline regex (single-line, no newlines allowed): capture 1 = params+anchor,
@@ -43,12 +46,12 @@ module Markawesome
           tip_text = matchdata[2].strip
 
           params_string, anchor_text = parse_inline_anchor_and_params(combined)
-          placement, distance = parse_parameters(params_string)
+          placement, distance, skidding = 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 })
+                             { placement: placement, distance: distance, skidding: skidding })
         end
       }
 
@@ -59,12 +62,12 @@ module Markawesome
           anchor_text = matchdata[2].strip
           tip_text = matchdata[3].strip
 
-          placement, distance = parse_parameters(params_string)
+          placement, distance, skidding = 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 })
+                             { placement: placement, distance: distance, skidding: skidding })
         end
       }
 
@@ -99,17 +102,19 @@ module Markawesome
       private
 
       def parse_parameters(params_string)
-        return ['top', nil] if params_string.nil? || params_string.strip.empty?
+        return ['top', nil, 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)
+        # Look for distance:N / skidding:N parameters (rightmost-wins; skidding may be negative)
         tokens = params_string.strip.split(/\s+/)
         distance_token = tokens.reverse.find { |token| token.match?(/^distance:\d+$/) }
         distance = distance_token&.sub('distance:', '')
+        skidding_token = tokens.reverse.find { |token| token.match?(/^skidding:-?\d+$/) }
+        skidding = skidding_token&.sub('skidding:', '')
 
-        [placement, distance]
+        [placement, distance, skidding]
       end
 
       def generate_tooltip_id(anchor_text, tip_text, seen_ids)
@@ -147,7 +152,8 @@ module Markawesome
 
       def tooltip_param?(token)
         TOOLTIP_ATTRIBUTES.any? { |_attr, values| values.include?(token) } ||
-          token.match?(/^distance:\d+$/)
+          token.match?(/^distance:\d+$/) ||
+          token.match?(/^skidding:-?\d+$/)
       end
 
       def build_tooltip_html(tooltip_id, anchor_text, tip_text, options)
@@ -157,6 +163,7 @@ module Markawesome
         tooltip_attrs = ["for=\"#{tooltip_id}\""]
         tooltip_attrs << "placement=\"#{options[:placement]}\""
         tooltip_attrs << "distance=\"#{options[:distance]}\"" if options[:distance]
+        tooltip_attrs << "skidding=\"#{options[:skidding]}\"" if options[:skidding]
 
         anchor = build_anchor(tooltip_id, anchor_content)
 

data/lib/markawesome/transformers/video_transformer.rb

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+require_relative '../attribute_parser'
+
+module Markawesome
+  # Transforms video syntax into Web Awesome's two media components:
+  #   <wa-video>          — a single embedded video with custom controls
+  #   <wa-video-playlist> — a playlist wrapping multiple <wa-video> children
+  #
+  # Single video
+  #   Primary:     ;;;tokens\n[Title](src)\n![Poster](poster)\n;;;
+  #   Alternative: :::wa-video tokens\n…\n:::
+  #
+  # Playlist (a ;;;;;; container wrapping bare ;;; items, mirroring carousel)
+  #   Primary:     ;;;;;;tokens\n;;;\n[Title](src)\n;;;\n…\n;;;;;;
+  #   Alternative: :::wa-video-playlist tokens\n;;;\n…\n;;;\n:::
+  #
+  # Body: the first markdown link `[text](url)` supplies `title`/`src`; the first
+  # markdown image `![alt](url)` supplies `poster`. A block with no link (no
+  # `src`) is left untransformed.
+  #
+  # Tokens: `controls:none|standard|full` and `preload:auto|metadata|none`
+  # (enum-validated, invalid values dropped) plus the boolean flags
+  # `autoplay`, `autoplay-muted`, `autoplay-on-visible`, `loop`, `muted`.
+  # Playlist children omit `controls` (the container forwards it to each child).
+  class VideoTransformer < BaseTransformer
+    # Boolean flags, matched as whole tokens so `autoplay-muted` never triggers
+    # `autoplay`. Parsed via AttributeParser (rightmost-wins, order-independent).
+    VIDEO_FLAGS = {
+      autoplay: %w[autoplay],
+      'autoplay-muted': %w[autoplay-muted],
+      'autoplay-on-visible': %w[autoplay-on-visible],
+      loop: %w[loop],
+      muted: %w[muted]
+    }.freeze
+
+    # Deterministic emission order for the boolean flags.
+    FLAG_ORDER = %w[autoplay autoplay-muted autoplay-on-visible loop muted].freeze
+
+    CONTROLS_VALUES = %w[none standard full].freeze
+    PRELOAD_VALUES = %w[auto metadata none].freeze
+
+    # Playlist consumes its inner ;;; items first; the bare `;;;\n` item open
+    # (no params) is load-bearing — it stops the closing `;;;;;;` from being
+    # mis-read as another item (mirrors carousel's `~~~`/`~~~~~~` trick).
+    PLAYLIST_PRIMARY = /^;{6}([^\n]*)\n((?:;;;\n(?:.*?\n)?;;;\n?)+);{6}/m
+    PLAYLIST_ALT = /^:::wa-video-playlist\s*([^\n]*)\n(.*?)\n:::/m
+    # `(?!;)` keeps the single open from matching a leftover `;;;;;;` fence.
+    SINGLE_PRIMARY = /^;;;(?!;)([^\n]*)\n(.*?)\n^;;;$/m
+    SINGLE_ALT = /^:::wa-video\s*([^\n]*)\n(.*?)\n:::/m
+    ITEM_REGEX = /;;;\n(.*?);;;(?:\n|$)/m
+
+    # First markdown link that is not the `![…]()` of an image (negative
+    # lookbehind on `!`) → title + src.
+    LINK_REGEX = /(?<!!)\[([^\]]+)\]\(([^)]+)\)/
+    # First markdown image → poster.
+    IMAGE_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/
+
+    def self.transform(content)
+      patterns = [
+        { regex: PLAYLIST_PRIMARY, block: proc { |_m, md| build_playlist(md[1], md[2]) } },
+        { regex: PLAYLIST_ALT, block: proc { |_m, md| build_playlist(md[1], md[2]) } },
+        { regex: SINGLE_PRIMARY, block: proc { |m, md| build_single(md[1], md[2]) || m } },
+        { regex: SINGLE_ALT, block: proc { |m, md| build_single(md[1], md[2]) || m } }
+      ]
+      apply_multiple_patterns(content, patterns)
+    end
+
+    def self.render_as_markdown(content, _options = {})
+      patterns = [
+        { regex: PLAYLIST_PRIMARY, block: proc { |_m, md| render_playlist_markdown(md[2]) } },
+        { regex: PLAYLIST_ALT, block: proc { |_m, md| render_playlist_markdown(md[2]) } },
+        { regex: SINGLE_PRIMARY, block: proc { |m, md| render_single_markdown(md[2]) || m } },
+        { regex: SINGLE_ALT, block: proc { |m, md| render_single_markdown(md[2]) || m } }
+      ]
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def build_single(params, body)
+        build_video(params, body, suppress_controls: false)
+      end
+
+      def build_playlist(params, body)
+        controls = parse_tokens(params)[:controls]
+        controls_attr = controls ? " controls=\"#{controls}\"" : ''
+        children = extract_items(body).filter_map do |item_body|
+          build_video('', item_body, suppress_controls: true)
+        end
+        "<wa-video-playlist#{controls_attr}>#{children.join}</wa-video-playlist>"
+      end
+
+      # Returns the <wa-video> HTML, or nil when the body has no link (no `src`),
+      # signalling the caller to leave the block untransformed.
+      def build_video(params, body, suppress_controls:)
+        tokens = parse_tokens(params)
+        title, src, poster = extract_link_and_image(body)
+        return nil unless src
+
+        parts = ["src=\"#{escape_html(src)}\""]
+        parts << "poster=\"#{escape_html(poster)}\"" if poster
+        parts << "title=\"#{escape_html(title)}\"" if title && !title.empty?
+        parts << "controls=\"#{tokens[:controls]}\"" if tokens[:controls] && !suppress_controls
+        parts << "preload=\"#{tokens[:preload]}\"" if tokens[:preload]
+        FLAG_ORDER.each { |flag| parts << flag if tokens[:flags].include?(flag) }
+
+        "<wa-video #{parts.join(' ')}></wa-video>"
+      end
+
+      def parse_tokens(params)
+        result = { controls: nil, preload: nil, flags: [] }
+        params.to_s.strip.split(/\s+/).each do |token|
+          if (m = token.match(/\Acontrols:(.+)\z/)) && CONTROLS_VALUES.include?(m[1])
+            result[:controls] = m[1]
+          elsif (m = token.match(/\Apreload:(.+)\z/)) && PRELOAD_VALUES.include?(m[1])
+            result[:preload] = m[1]
+          end
+        end
+        result[:flags] = AttributeParser.parse(params, VIDEO_FLAGS).keys.map(&:to_s)
+        result
+      end
+
+      def extract_items(body)
+        body.scan(ITEM_REGEX).map { |match| match[0] }
+      end
+
+      def extract_link_and_image(body)
+        link = body.match(LINK_REGEX)
+        image = body.match(IMAGE_REGEX)
+        [link && link[1], link && link[2], image && image[2]]
+      end
+
+      def render_single_markdown(body)
+        title, src, = extract_link_and_image(body)
+        return nil unless src
+
+        "[#{title.to_s.empty? ? src : title}](#{src})"
+      end
+
+      def render_playlist_markdown(body)
+        extract_items(body).filter_map do |item_body|
+          title, src, = extract_link_and_image(item_body)
+          next unless src
+
+          "- [#{title.to_s.empty? ? src : title}](#{src})"
+        end.join("\n")
+      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

@@ -12,6 +12,7 @@ require_relative 'transformers/card_transformer'
 require_relative 'transformers/carousel_transformer'
 require_relative 'transformers/comparison_transformer'
 require_relative 'transformers/copy_button_transformer'
+require_relative 'transformers/date_transformer'
 require_relative 'transformers/details_transformer'
 require_relative 'transformers/dialog_transformer'
 require_relative 'transformers/icon_transformer'
@@ -21,3 +22,4 @@ require_relative 'transformers/popover_transformer'
 require_relative 'transformers/tabs_transformer'
 require_relative 'transformers/tag_transformer'
 require_relative 'transformers/tooltip_transformer'
+require_relative 'transformers/video_transformer'

data/lib/markawesome/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.16.0
+  version: 0.17.0
 platform: ruby
 authors:
 - Janne Waren
@@ -93,6 +93,7 @@ files:
 - lib/markawesome/transformers/carousel_transformer.rb
 - lib/markawesome/transformers/comparison_transformer.rb
 - lib/markawesome/transformers/copy_button_transformer.rb
+- lib/markawesome/transformers/date_transformer.rb
 - lib/markawesome/transformers/details_transformer.rb
 - lib/markawesome/transformers/dialog_transformer.rb
 - lib/markawesome/transformers/icon_transformer.rb
@@ -102,6 +103,7 @@ files:
 - lib/markawesome/transformers/tabs_transformer.rb
 - lib/markawesome/transformers/tag_transformer.rb
 - lib/markawesome/transformers/tooltip_transformer.rb
+- lib/markawesome/transformers/video_transformer.rb
 - lib/markawesome/version.rb
 - markawesome.gemspec
 homepage: https://github.com/jannewaren/markawesome