klods-ruby 0.2.0

data/lib/klods/components/nav.rb

@@ -0,0 +1,64 @@
+module Klods
+  module Components
+    module Nav
+      MENU_SVG = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' \
+        '<rect y="3" width="20" height="2" rx="1" fill="currentColor"/>' \
+        '<rect y="9" width="20" height="2" rx="1" fill="currentColor"/>' \
+        '<rect y="15" width="20" height="2" rx="1" fill="currentColor"/>' \
+        "</svg>"
+
+      private_constant :MENU_SVG
+
+      def nav(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "nav", base: "klods-nav",
+          modifiers: {collapse: "klods-nav--collapse"},
+          props: props, children: children
+        )
+      end
+
+      def nav_list(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "ul", base: "klods-nav__list", props: props, children: children)
+      end
+
+      def nav_link(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        link = Core.build(
+          tag: "a", base: "klods-nav__link",
+          modifiers: {active: "klods-nav__link--active"},
+          props: props, children: children
+        )
+        Core.el("li", {}, link)
+      end
+
+      def nav_toggle(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        props = {"type" => "button", "aria-label" => "Toggle navigation", "class" => "klods-nav__toggle"}
+          .merge(props.transform_keys(&:to_s))
+        default_icon = Core.el("span", {"aria-hidden" => "true", "class" => "klods-icon"}, Core.raw(MENU_SVG))
+        Core.el("button", props, children || default_icon)
+      end
+
+      def toc(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "ul", base: "klods-toc",
+          modifiers: {sub: "klods-toc--sub"},
+          props: props, children: children
+        )
+      end
+
+      def toc_item(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("li", props, children)
+      end
+
+      def toc_link(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("a", props, children)
+      end
+    end
+  end
+end

data/lib/klods/components/prose.rb

@@ -0,0 +1,25 @@
+module Klods
+  module Components
+    module Prose
+      def prose(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-prose", props: props, children: children)
+      end
+
+      def muted(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "span", base: "klods-muted", props: props, children: children)
+      end
+
+      def lead(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "p", base: "klods-lead", props: props, children: children)
+      end
+
+      def text_center(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-text-center", props: props, children: children)
+      end
+    end
+  end
+end

data/lib/klods/components/table.rb

@@ -0,0 +1,47 @@
+module Klods
+  module Components
+    module Table
+      def table_wrap(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-table-wrap", props: props, children: children)
+      end
+
+      def table(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "table", base: "klods-table",
+          modifiers: {
+            striped: "klods-table--striped",
+            dense: "klods-table--dense"
+          },
+          props: props, children: children
+        )
+      end
+
+      def thead(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("thead", props, children)
+      end
+
+      def tbody(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("tbody", props, children)
+      end
+
+      def tr(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("tr", props, children)
+      end
+
+      def th(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("th", props, children)
+      end
+
+      def td(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("td", props, children)
+      end
+    end
+  end
+end

data/lib/klods/components/tabs.rb

@@ -0,0 +1,63 @@
+module Klods
+  module Components
+    module Tabs
+      def tab_panel(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        label = props.delete(:label) || props.delete("label")
+        attrs = label ? props.merge("data-tab-label" => label.to_s) : props
+        Core.el("div", attrs, children)
+      end
+
+      def tabs(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+        panels = Array(children).flatten.select { |c| c.is_a?(Node) }
+
+        ns = props["id"] ? Core.slug_id("klods-tabs", props["id"].to_s) : "klods-tabs"
+
+        items = panels.each_with_index.map do |panel, i|
+          label = panel.attrs["data-tab-label"] || "Tab #{i + 1}"
+          tab_id = Core.slug_id("#{ns}-tab", "#{label}-#{i + 1}")
+          panel_id = Core.slug_id("#{ns}-panel", "#{label}-#{i + 1}")
+          {panel: panel, label: label, tab_id: tab_id, panel_id: panel_id, active: i == 0}
+        end
+
+        tab_list = Core.el(
+          "div",
+          {"class" => "klods-tabs__list", "role" => "tablist"},
+          items.map do |item|
+            tab_attrs = {
+              "type" => "button",
+              "role" => "tab",
+              "id" => item[:tab_id],
+              "aria-selected" => item[:active].to_s,
+              "aria-controls" => item[:panel_id],
+              "class" => item[:active] ? "klods-tabs__tab klods-tabs__tab--active" : "klods-tabs__tab"
+            }
+            tab_attrs["tabindex"] = "-1" unless item[:active]
+            Core.el("button", tab_attrs, item[:label])
+          end
+        )
+
+        panel_nodes = items.map do |item|
+          panel = item[:panel]
+          panel_attrs = panel.attrs.except("data-tab-label")
+          extra_class = panel_attrs.delete("class")
+          cls = Core.class_names("klods-tabs__panel", Core.resolve_class(extra_class))
+          attrs = panel_attrs.merge(
+            "class" => cls.empty? ? nil : cls,
+            "role" => "tabpanel",
+            "id" => item[:panel_id],
+            "aria-labelledby" => item[:tab_id]
+          ).compact
+          attrs["hidden"] = true unless item[:active]
+          Node.new("div", attrs, panel.children)
+        end
+
+        extra_class = props.delete("class")
+        cls = Core.class_names("klods-tabs", Core.resolve_class(extra_class))
+        Core.el("div", props.merge("class" => cls.empty? ? nil : cls).compact, [tab_list, *panel_nodes])
+      end
+    end
+  end
+end

data/lib/klods/components/toast.rb

@@ -0,0 +1,36 @@
+module Klods
+  module Components
+    module Toast
+      # Renders the live region container. Mount this once in your layout;
+      # individual toasts are appended inside it (via JS on the client, or
+      # server-rendered for SSR pre-populated notifications).
+      def toast_region(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        attrs = {
+          "class" => "klods-toast-region",
+          "aria-live" => "polite",
+          "aria-atomic" => "false",
+          "role" => "region",
+          "aria-label" => "Notifications"
+        }.merge(props.transform_keys(&:to_s))
+        Core.el("div", attrs, children)
+      end
+
+      def toast(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+        variant = props.delete("variant")
+        extra_class = props.delete("class")
+        cls = Core.class_names(
+          "klods-toast",
+          (variant && variant.to_s != "default") ? "klods-toast--#{variant}" : nil,
+          Core.resolve_class(extra_class)
+        )
+        attrs = props.merge("role" => "status", "class" => cls.empty? ? nil : cls).compact
+        body = Core.el("span", {"class" => "klods-toast__body"}, children)
+        close_btn = Core.el("button", {"type" => "button", "class" => "klods-toast__close", "aria-label" => "Dismiss"})
+        Core.el("div", attrs, [body, close_btn])
+      end
+    end
+  end
+end

data/lib/klods/components/tooltip.rb

@@ -0,0 +1,36 @@
+module Klods
+  module Components
+    module Tooltip
+      # tooltip(props, children) — renders the static HTML structure.
+      # Visibility is toggled by data-open via client JS; event wiring is omitted here.
+      def tooltip(props, children)
+        props = props.transform_keys(&:to_s)
+        tip = props.delete("tip")
+        position = props.delete("position") || "above"
+        extra_class = props.delete("class")
+
+        id = _next_tooltip_id
+        tip_node = Core.el(
+          "span",
+          {"id" => id, "role" => "tooltip", "class" => "klods-tooltip__tip klods-tooltip__tip--#{position}"},
+          tip
+        )
+
+        cls = Core.class_names("klods-tooltip", Core.resolve_class(extra_class))
+        attrs = props.merge(
+          "class" => cls.empty? ? nil : cls,
+          "aria-describedby" => id
+        ).compact
+
+        Core.el("span", attrs, [children, tip_node])
+      end
+
+      private
+
+      def _next_tooltip_id
+        Thread.current[:klods_tooltip_counter] = (Thread.current[:klods_tooltip_counter] || 0) + 1
+        "klods-tip-#{Thread.current[:klods_tooltip_counter]}"
+      end
+    end
+  end
+end

data/lib/klods/components.rb

@@ -0,0 +1,19 @@
+require_relative "components/alert"
+require_relative "components/avatar"
+require_relative "components/badge"
+require_relative "components/box"
+require_relative "components/breadcrumb"
+require_relative "components/button"
+require_relative "components/card"
+require_relative "components/code"
+require_relative "components/details"
+require_relative "components/dl"
+require_relative "components/form"
+require_relative "components/list"
+require_relative "components/modal"
+require_relative "components/nav"
+require_relative "components/prose"
+require_relative "components/table"
+require_relative "components/tabs"
+require_relative "components/toast"
+require_relative "components/tooltip"

data/lib/klods/core.rb

@@ -0,0 +1,92 @@
+module Klods
+  module Core
+    module_function
+
+    def raw(html)
+      RawHtml.new(html)
+    end
+
+    def resolve_class(input)
+      case input
+      when nil then ""
+      when String then input.strip
+      when Array then input.flatten.filter_map { |c| resolve_class(c) unless resolve_class(c).empty? }.join(" ")
+      when Hash then input.filter_map { |k, v| k.to_s if v }.join(" ")
+      else input.to_s.strip
+      end
+    end
+
+    def merge_classes(*inputs)
+      inputs.map { |c| resolve_class(c) }.reject(&:empty?).join(" ")
+    end
+
+    def class_names(*parts)
+      parts.flatten.compact.map(&:to_s).reject(&:empty?).join(" ")
+    end
+
+    # Splits (props_or_children, children?) into [props_hash, children].
+    # A Hash first arg is props; anything else (string, array, Node, nil) is children.
+    def normalize_args(a = nil, b = nil)
+      if a.is_a?(Hash) || a.nil?
+        [a || {}, b]
+      else
+        [{}, a]
+      end
+    end
+
+    def el(tag, a = nil, b = nil)
+      props, children = normalize_args(a, b)
+      Node.new(tag, props, children)
+    end
+
+    # BEM builder factory — resolves modifier props into BEM classes, passes
+    # everything else through as HTML attributes.
+    def build(tag:, base:, modifiers: {}, props: {}, children: nil)
+      props = props.dup
+
+      resolved_children = if children.nil?
+        props.delete(:children) || props.delete("children")
+      else
+        props.delete(:children)
+        props.delete("children")
+        children
+      end
+
+      mod_classes = []
+      passthrough = {}
+
+      props.each do |key, value|
+        sym = key.is_a?(Symbol) ? key : key.to_s.to_sym
+        mod = modifiers[sym] || modifiers[key.to_s]
+        if mod
+          if mod.respond_to?(:call)
+            cls = mod.call(value)
+            mod_classes << cls if cls
+          elsif value
+            mod_classes << mod
+          end
+        else
+          passthrough[key] = value
+        end
+      end
+
+      user_class = passthrough.delete(:class) || passthrough.delete("class")
+      final_class = merge_classes(base, *mod_classes, user_class)
+
+      attrs = passthrough
+      attrs["class"] = final_class unless final_class.empty?
+
+      Node.new(tag, attrs, resolved_children)
+    end
+
+    def slug_id(prefix, text)
+      safe = text.to_s
+      slug = safe.downcase.gsub(/[^a-z0-9]+/, "-").gsub(/^-|-$/, "")
+      return "#{prefix}-#{slug}" unless slug.empty?
+
+      h = 5381
+      safe.each_char { |c| h = ((h << 5) + h + c.ord) & 0xffffffff }
+      "#{prefix}-#{h.to_s(36)}"
+    end
+  end
+end

data/lib/klods/html.rb

@@ -0,0 +1,23 @@
+module Klods
+  # Raw HTML tag shortcuts — no BEM classes, just the element.
+  # Mirrors html.ts in klods-js. Tags that share a name with a klods component
+  # (nav, button, form, header, footer, section, table, thead, tbody, tr, th,
+  # td, input, select, textarea, details, summary, dl, dt, dd) are intentionally
+  # omitted — use the klods component or Core.el("tag", ...) for the bare element.
+  module Html
+    %w[a abbr address article b blockquote br caption cite code col colgroup
+      data dfn div em figcaption figure h1 h2 h3 h4 h5 h6 hr i img ins
+      legend li mark ol p pre q s small span strong sub sup time u ul].each do |tag|
+      define_method(tag) do |a = nil, b = nil|
+        props, children = Core.normalize_args(a, b)
+        Core.el(tag, props, children)
+      end
+    end
+
+    # `var` is a reserved word in some linters; named var_el to match klods-js.
+    def var_el(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.el("var", props, children)
+    end
+  end
+end

data/lib/klods/icons.rb

@@ -0,0 +1,120 @@
+module Klods
+  module Icons
+    SIZE_PX = {"small" => 12, "medium" => 20, "large" => 32}.freeze
+
+    private_constant :SIZE_PX
+
+    def self._make_icon(svg_inner, view_box)
+      lambda do |props = nil|
+        props = props ? props.dup : {}
+        size = (props.delete(:size) || props.delete("size") || "medium").to_s
+        label = props.delete(:label) || props.delete("label")
+        extra_class = props.delete(:class) || props.delete("class")
+        px = SIZE_PX[size] || 20
+        aria = label ? {"aria-label" => label.to_s, "role" => "img"} : {"aria-hidden" => "true"}
+        cls = Core.class_names("klods-icon", Core.resolve_class(extra_class))
+        attrs = props.transform_keys(&:to_s).merge(aria)
+        attrs["class"] = cls unless cls.empty?
+        svg = %(<svg width="#{px}" height="#{px}" viewBox="#{view_box}" fill="none" xmlns="http://www.w3.org/2000/svg">#{svg_inner}</svg>)
+        Core.el("span", attrs, Core.raw(svg))
+      end
+    end
+
+    CHECK_CIRCLE_ICON = _make_icon(
+      '<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" d="M5 8l2 2.5 4-4"/>',
+      "0 0 16 16"
+    )
+    CHEV_DOWN_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2 5l6 6 6-6"/>',
+      "0 0 16 16"
+    )
+    CHEV_LEFT_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M11 2l-6 6 6 6"/>',
+      "0 0 16 16"
+    )
+    CHEV_RIGHT_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 2l6 6-6 6"/>',
+      "0 0 16 16"
+    )
+    CHEV_UP_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2 11l6-6 6 6"/>',
+      "0 0 16 16"
+    )
+    CLOSE_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-linecap="round" stroke-width="1.75" d="M4 4l8 8M12 4L4 12"/>',
+      "0 0 16 16"
+    )
+    COPY_ICON = _make_icon(
+      '<rect x="5" y="5" width="8" height="8" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M11 5V3.5A1.5 1.5 0 009.5 2h-6A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5"/>',
+      "0 0 16 16"
+    )
+    DANGER_CIRCLE_ICON = _make_icon(
+      '<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M5.5 5.5l5 5M10.5 5.5l-5 5"/>',
+      "0 0 16 16"
+    )
+    EDIT_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M11.3 2a2 2 0 112.8 2.8L5 13.8l-3.5 1 1-3.5L11.3 2z"/>',
+      "0 0 16 16"
+    )
+    EXTERNAL_LINK_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M9 3h4v4M13 3L7 9"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M6 4H4a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1v-2"/>',
+      "0 0 16 16"
+    )
+    EYE_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.5"/>',
+      "0 0 16 16"
+    )
+    EYE_OFF_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M2 2l12 12"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M4 5.3C2.4 6.5 1 8 1 8s2.5 5 7 5c1.4 0 2.7-.4 3.8-1M9 3.3C11.6 4 14.2 6.2 15 8a12 12 0 01-2 2.7"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M9.8 9.8A2 2 0 016.2 6.2"/>',
+      "0 0 16 16"
+    )
+    INFO_CIRCLE_ICON = _make_icon(
+      '<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path stroke="currentColor" stroke-width="1" stroke-linecap="round" d="M8 7.5v3.5"/><circle cx="8" cy="5.5" r="0.75" fill="currentColor"/>',
+      "0 0 16 16"
+    )
+    MENU_ICON = _make_icon(
+      '<rect y="3" width="20" height="2" rx="1" fill="currentColor"/><rect y="9" width="20" height="2" rx="1" fill="currentColor"/><rect y="15" width="20" height="2" rx="1" fill="currentColor"/>',
+      "0 0 20 20"
+    )
+    PLUS_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M8 3v10M3 8h10"/>',
+      "0 0 16 16"
+    )
+    SEARCH_ICON = _make_icon(
+      '<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5"/><path stroke="currentColor" stroke-width="1.75" stroke-linecap="round" d="M10.5 10.5L14 14"/>',
+      "0 0 16 16"
+    )
+    TRASH_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M2 5h12M6 5V4a1 1 0 011-1h2a1 1 0 011 1v1"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M4.5 5l.7 7.5a1 1 0 001 .9h3.6a1 1 0 001-.9L11.5 5"/>',
+      "0 0 16 16"
+    )
+    USER_ICON = _make_icon(
+      '<circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.5"/><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M2.5 14c0-2.8 2.5-5 5.5-5s5.5 2.2 5.5 5"/>',
+      "0 0 16 16"
+    )
+    WARNING_ICON = _make_icon(
+      '<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M8 2L1.5 13.5h13L8 2z"/><path stroke="currentColor" stroke-width="1" stroke-linecap="round" d="M8 7v3"/><circle cx="8" cy="12" r="0.75" fill="currentColor"/>',
+      "0 0 16 16"
+    )
+
+    def check_circle_icon(props = nil) = CHECK_CIRCLE_ICON.call(props)
+    def chev_down_icon(props = nil) = CHEV_DOWN_ICON.call(props)
+    def chev_left_icon(props = nil) = CHEV_LEFT_ICON.call(props)
+    def chev_right_icon(props = nil) = CHEV_RIGHT_ICON.call(props)
+    def chev_up_icon(props = nil) = CHEV_UP_ICON.call(props)
+    def close_icon(props = nil) = CLOSE_ICON.call(props)
+    def copy_icon(props = nil) = COPY_ICON.call(props)
+    def danger_circle_icon(props = nil)= DANGER_CIRCLE_ICON.call(props)
+    def edit_icon(props = nil) = EDIT_ICON.call(props)
+    def external_link_icon(props = nil)= EXTERNAL_LINK_ICON.call(props)
+    def eye_icon(props = nil) = EYE_ICON.call(props)
+    def eye_off_icon(props = nil) = EYE_OFF_ICON.call(props)
+    def info_circle_icon(props = nil) = INFO_CIRCLE_ICON.call(props)
+    def menu_icon(props = nil) = MENU_ICON.call(props)
+    def plus_icon(props = nil) = PLUS_ICON.call(props)
+    def search_icon(props = nil) = SEARCH_ICON.call(props)
+    def trash_icon(props = nil) = TRASH_ICON.call(props)
+    def user_icon(props = nil) = USER_ICON.call(props)
+    def warning_icon(props = nil) = WARNING_ICON.call(props)
+  end
+end

data/lib/klods/layout.rb

@@ -0,0 +1,110 @@
+module Klods
+  module Layout
+    def page(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(
+        tag: "div", base: "klods-page",
+        modifiers: {
+          sidebar: "klods-page--with-sidebar",
+          sidebar_position: ->(v) { (v.to_s == "trailing") ? "klods-page--sidebar-trailing" : nil },
+          sticky_header: "klods-page--sticky-header"
+        },
+        props: props, children: children
+      )
+    end
+
+    def header(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(tag: "header", base: "klods-header", props: props, children: children)
+    end
+
+    def sidebar(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(tag: "aside", base: "klods-sidebar", props: props, children: children)
+    end
+
+    def content(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(
+        tag: "main", base: "klods-content",
+        modifiers: {narrow: "klods-content--narrow"},
+        props: props, children: children
+      )
+    end
+
+    def footer(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(tag: "footer", base: "klods-footer", props: props, children: children)
+    end
+
+    def section(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(tag: "section", base: "klods-section", props: props, children: children)
+    end
+
+    def stack(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(
+        tag: "div", base: "klods-stack",
+        modifiers: {gap: ->(v) { v ? "klods-stack--gap-#{v}" : nil }},
+        props: props, children: children
+      )
+    end
+
+    def cluster(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(
+        tag: "div", base: "klods-cluster",
+        modifiers: {gap: ->(v) { v ? "klods-cluster--gap-#{v}" : nil }},
+        props: props, children: children
+      )
+    end
+
+    def row(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(
+        tag: "div", base: "klods-row",
+        modifiers: {
+          gap: ->(v) { v ? "klods-row--gap-#{v}" : nil },
+          inline: "klods-row--inline"
+        },
+        props: props, children: children
+      )
+    end
+
+    def grid(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(
+        tag: "div", base: "klods-grid",
+        modifiers: {
+          gap: ->(v) { v ? "klods-grid--gap-#{v}" : nil },
+          cols: ->(v) { v ? "klods-grid--cols-#{v}" : nil },
+          fit: "klods-grid--fit"
+        },
+        props: props, children: children
+      )
+    end
+
+    def center(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(tag: "div", base: "klods-center", props: props, children: children)
+    end
+
+    def spread(a = nil, b = nil)
+      props, children = Core.normalize_args(a, b)
+      Core.build(tag: "div", base: "klods-spread", props: props, children: children)
+    end
+
+    def text(value)
+      Node.new("span", {}, [value.to_s])
+    end
+
+    def sidebar_toggle(attrs = nil)
+      Core.el("button", {
+        "type" => "button",
+        "aria-label" => "Toggle sidebar",
+        "class" => "klods-sidebar-toggle"
+      }.merge((attrs || {}).transform_keys(&:to_s)))
+    end
+  end
+end