phlex_kit 0.5.1 → 0.6.1

data/app/components/phlex_kit/toggle_group/toggle_group.rb

@@ -39,7 +39,7 @@ module PhlexKit
 
     def selected_values
       case @type
-      when :single then @value.nil? ? [] : [@value.to_s]
+      when :single then @value.nil? ? [] : [ @value.to_s ]
       when :multiple then Array(@value).map(&:to_s)
       end
     end
@@ -55,7 +55,7 @@ module PhlexKit
 
     def group_default_attrs
       { role: (@type == :single) ? "radiogroup" : "group",
-        class: ["pk-toggle-group", (@orientation == :vertical ? "vertical" : nil), (@spacing > 0 ? "spaced" : nil)].compact.join(" "),
+        class: [ "pk-toggle-group", (@orientation == :vertical ? "vertical" : nil), (@spacing > 0 ? "spaced" : nil) ].compact.join(" "),
         data: { controller: "phlex-kit--toggle-group",
           phlex_kit__toggle_group_type_value: @type.to_s,
           phlex_kit__toggle_group_name_value: @name.to_s,

data/app/components/phlex_kit/toggle_group/toggle_group_item.rb

@@ -18,7 +18,7 @@ module PhlexKit
 
     def item_default_attrs
       a = { type: "button",
-            class: (["pk-toggle"] + self.class.modifier_classes(variant: @variant, size: @size) + ["pk-toggle-group-item"]).join(" "),
+            class: ([ "pk-toggle" ] + self.class.modifier_classes(variant: @variant, size: @size) + [ "pk-toggle-group-item" ]).join(" "),
             data: { state: @pressed ? "on" : "off", value: @item_value,
               phlex_kit__toggle_group_target: "item",
               action: "click->phlex-kit--toggle-group#select keydown->phlex-kit--toggle-group#navigate" } }

data/app/components/phlex_kit/tooltip/tooltip.css

@@ -1,15 +1,25 @@
 /* Co-located with tooltip.rb — UI::Tooltip (+ Trigger / Content). CSS-only:
-   the bubble is absolutely positioned and revealed on the wrapper's :hover /
-   :focus-within (no JS, no @floating-ui). Matched to nova: INVERTED surface
-   (foreground bg, background text) with a rotated-square arrow, rounded-md,
-   px-3 py-1.5 text-xs, gap for inline kbd chips (kbd.css tints them). */
-.pk-tooltip { position: relative; display: inline-flex; }
-.pk-tooltip-trigger { display: inline-flex; }
+   the bubble is revealed on the wrapper's :hover / :focus-within and placed
+   with CSS anchor positioning (Baseline 2026, no JS, no @floating-ui): the
+   fixed panel escapes overflow-clipping ancestors and position-try-fallbacks
+   flips it to the opposite side at the viewport edge. Reveal stays opacity-
+   based (a native [popover] would need JS hover handlers), so it needs
+   z-index rather than the top layer. The ::after arrow pins itself to
+   whichever bubble edge faces the trigger (anchor(center) clamped into the
+   bubble's box), so it follows flip fallbacks automatically — one rule for
+   all four sides. Matched to nova: INVERTED surface (foreground bg,
+   background text) with a rotated-square arrow, rounded-md, px-3 py-1.5
+   text-xs, gap for inline kbd chips (kbd.css tints them). */
+.pk-tooltip { display: inline-flex; anchor-scope: --pk-tooltip, --pk-tooltip-bubble; }
+.pk-tooltip-trigger { display: inline-flex; anchor-name: --pk-tooltip; }
 .pk-tooltip-content {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
+  position: fixed;
+  position-anchor: --pk-tooltip;
+  anchor-name: --pk-tooltip-bubble;
+  inset: auto;
+  position-area: block-start;
+  margin: 0 0 6px;
+  position-try-fallbacks: flip-block;
   z-index: 50;
   display: inline-flex;
   align-items: center;
@@ -27,29 +37,37 @@
   transition: opacity .12s ease;
 }
 .pk-tooltip-content:has(kbd) { padding-right: .375rem; }
+/* The notch. The arrow is position:fixed so both anchors are acceptable
+   (an absolute pseudo's containing block is the bubble, which doesn't
+   contain the trigger — anchor() wouldn't resolve). Its center chases the
+   trigger's center but is clamped 2px inside the bubble's box, so wherever
+   the bubble actually renders (declared side OR a flip fallback) the arrow
+   sits on the edge facing the trigger. */
 .pk-tooltip-content::after {
   content: "";
-  position: absolute;
+  position: fixed;
+  /* default anchor = the trigger, so anchor() values are scroll-compensated */
+  position-anchor: --pk-tooltip;
   z-index: -1;
   width: .625rem;
   height: .625rem;
   border-radius: 2px;
   background: inherit;
-  top: 100%;
-  left: 50%;
-  transform: translate(-50%, calc(-50% - 2px)) rotate(45deg);
+  top: clamp(calc(anchor(--pk-tooltip-bubble top) + 2px), anchor(--pk-tooltip center), calc(anchor(--pk-tooltip-bubble bottom) - 2px));
+  left: clamp(calc(anchor(--pk-tooltip-bubble left) + 2px), anchor(--pk-tooltip center), calc(anchor(--pk-tooltip-bubble right) - 2px));
+  transform: translate(-50%, -50%) rotate(45deg);
 }
-.pk-tooltip-content.bottom { bottom: auto; top: calc(100% + 6px); }
-.pk-tooltip-content.bottom::after { top: 0; transform: translate(-50%, calc(-50% + 2px)) rotate(45deg); }
+.pk-tooltip-content.bottom { position-area: block-end; margin: 6px 0 0; }
 .pk-tooltip-content.left {
-  bottom: auto; left: auto; right: calc(100% + 6px); top: 50%;
-  transform: translateY(-50%);
+  position-area: inline-start; margin: 0 6px 0 0;
+  position-try-fallbacks: flip-inline;
 }
-.pk-tooltip-content.left::after { top: 50%; left: 100%; transform: translate(calc(-50% - 2px), -50%) rotate(45deg); }
 .pk-tooltip-content.right {
-  bottom: auto; right: auto; left: calc(100% + 6px); top: 50%;
-  transform: translateY(-50%);
+  position-area: inline-end; margin: 0 0 0 6px;
+  position-try-fallbacks: flip-inline;
 }
-.pk-tooltip-content.right::after { top: 50%; left: 0; transform: translate(calc(-50% + 2px), -50%) rotate(45deg); }
 .pk-tooltip:hover .pk-tooltip-content,
 .pk-tooltip:focus-within .pk-tooltip-content { opacity: 1; visibility: visible; }
+/* Escape-dismissed (WCAG 1.4.13): suppressed until pointer/focus leaves. */
+.pk-tooltip[data-pk-dismissed]:hover .pk-tooltip-content,
+.pk-tooltip[data-pk-dismissed]:focus-within .pk-tooltip-content { opacity: 0; visibility: hidden; }

data/app/components/phlex_kit/tooltip/tooltip.rb

@@ -2,6 +2,8 @@ module PhlexKit
   # Hover/focus tooltip. ruby_ui's version uses @floating-ui + a cloned template;
   # we keep the Trigger/Content structure but reveal + position the bubble with
   # pure CSS (no JS, no npm dep) — same call as the Select floating-ui strip.
+  # The tiny phlex-kit--tooltip controller only wires aria-describedby and
+  # Escape-dismiss (WCAG 1.4.13); reveal stays CSS.
   # Bubble sits above the trigger. Compose TooltipTrigger + TooltipContent.
   class Tooltip < BaseComponent
     def initialize(**attrs)
@@ -9,7 +11,7 @@ module PhlexKit
     end
 
     def view_template(&block)
-      div(**mix({ class: "pk-tooltip" }, @attrs), &block)
+      div(**mix({ class: "pk-tooltip", data: { controller: "phlex-kit--tooltip" } }, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/tooltip/tooltip_content.rb

@@ -10,7 +10,7 @@ module PhlexKit
     end
 
     def view_template(&)
-      classes = [ "pk-tooltip-content", SIDES.fetch(@side) ].compact.join(" ")
+      classes = [ "pk-tooltip-content", fetch_option(SIDES, @side, :side) ].compact.join(" ")
       div(**mix({ class: classes, role: "tooltip" }, @attrs), &)
     end
   end

data/app/components/phlex_kit/tooltip/tooltip_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// The tooltip stays CSS-revealed (:hover/:focus-within, tooltip.css) — this
+// controller only adds what CSS can't: aria-describedby wiring from trigger
+// to bubble, and WCAG 1.4.13 Escape-dismiss (data-pk-dismissed suppresses the
+// bubble until the pointer/focus leaves the wrapper).
+// Connects to data-controller="phlex-kit--tooltip"
+export default class extends Controller {
+  connect() {
+    const content = this.element.querySelector(".pk-tooltip-content")
+    const trigger = this.element.querySelector(".pk-tooltip-trigger")
+    if (content && trigger) {
+      if (!content.id) content.id = `pk-tooltip-${Math.random().toString(36).slice(2, 8)}`
+      if (!trigger.hasAttribute("aria-describedby")) trigger.setAttribute("aria-describedby", content.id)
+    }
+
+    this._onKeydown = (e) => {
+      if (e.key !== "Escape") return
+      if (this.element.matches(":hover, :focus-within")) this.element.dataset.pkDismissed = ""
+    }
+    this._reset = () => delete this.element.dataset.pkDismissed
+    window.addEventListener("keydown", this._onKeydown)
+    this.element.addEventListener("pointerleave", this._reset)
+    this.element.addEventListener("focusout", this._reset)
+  }
+
+  disconnect() {
+    window.removeEventListener("keydown", this._onKeydown)
+    this.element.removeEventListener("pointerleave", this._reset)
+    this.element.removeEventListener("focusout", this._reset)
+  }
+}

data/app/components/phlex_kit/tooltip/tooltip_trigger.rb

@@ -1,13 +1,18 @@
 module PhlexKit
   # The element a PhlexKit::Tooltip is anchored to. `tabindex: 0` so keyboard users can
-  # focus it (the bubble shows on `:focus-within`). See tooltip.rb.
+  # focus it (the bubble shows on `:focus-within`) — pass `focusable: false` when
+  # the trigger wraps something already focusable (a button, a link) so it
+  # doesn't add a redundant tab stop. See tooltip.rb.
   class TooltipTrigger < BaseComponent
-    def initialize(**attrs)
+    def initialize(focusable: true, **attrs)
+      @focusable = focusable
       @attrs = attrs
     end
 
     def view_template(&block)
-      span(**mix({ class: "pk-tooltip-trigger", tabindex: 0 }, @attrs), &block)
+      defaults = { class: "pk-tooltip-trigger" }
+      defaults[:tabindex] = 0 if @focusable
+      span(**mix(defaults, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/typography/text.rb

@@ -42,7 +42,7 @@ module PhlexKit
     private
 
     def classes
-      [ "pk-text", "pk-text-#{SIZES.fetch(@size)}", WEIGHTS.fetch(@weight) ].compact.join(" ")
+      [ "pk-text", "pk-text-#{fetch_option(SIZES, @size, :size)}", fetch_option(WEIGHTS, @weight, :weight) ].compact.join(" ")
     end
   end
 end

data/app/javascript/phlex_kit/controllers/index.js

@@ -47,6 +47,7 @@ import ToastController from "phlex_kit/controllers/toast_controller"
 import ToasterController from "phlex_kit/controllers/toaster_controller"
 import ToggleController from "phlex_kit/controllers/toggle_controller"
 import ToggleGroupController from "phlex_kit/controllers/toggle_group_controller"
+import TooltipController from "phlex_kit/controllers/tooltip_controller"
 
 export function registerPhlexKitControllers(application) {
   application.register("phlex-kit--accordion", AccordionController)
@@ -88,4 +89,5 @@ export function registerPhlexKitControllers(application) {
   application.register("phlex-kit--toaster", ToasterController)
   application.register("phlex-kit--toggle", ToggleController)
   application.register("phlex-kit--toggle-group", ToggleGroupController)
+  application.register("phlex-kit--tooltip", TooltipController)
 }

data/lib/generators/phlex_kit/component/component_generator.rb

@@ -24,6 +24,9 @@ module PhlexKit
         directory file_name, "app/components/phlex_kit/#{file_name}"
       end
 
+      # Belt-and-braces: the gem manifest's relative import already resolves to
+      # the host copy once app/components is ahead on the asset path, but hosts
+      # that skipped/trimmed the manifest still need an explicit import.
       def wire_import
         css = "app/assets/stylesheets/application.css"
         line = %(@import url("phlex_kit/#{file_name}/#{file_name}.css");\n)
@@ -67,6 +70,31 @@ module PhlexKit
 
       def confirm
         say_status :phlex_kit, "ejected phlex_kit/#{file_name} — your copy now shadows the gem (Ruby, CSS, JS)", :green
+        foreign_behavior_owners.each do |owner|
+          say_status :note,
+            "#{file_name}'s behavior lives in the #{owner} component's controller " \
+            "(still gem-owned) — `rails g phlex_kit:component #{owner}` to own it too",
+            :yellow
+        end
+      end
+
+      private
+
+      # Folders (other than the ejected one) whose Stimulus controllers this
+      # component's .rb files reference — e.g. date_picker rides calendar's,
+      # drawer rides sheet's. Editing the ejected copy won't change that
+      # behavior, so tell the user instead of overstating ownership.
+      def foreign_behavior_owners
+        root = self.class.source_root
+        identifiers = Dir.glob(File.join(root, file_name, "*.rb"))
+          .flat_map { |f| File.read(f).scan(/phlex-kit--([a-z0-9-]+)/) }
+          .flatten.uniq
+        identifiers.filter_map { |id|
+          controller = Dir.glob(File.join(root, "*", "#{id.tr("-", "_")}_controller.js")).first
+          next unless controller
+          owner = File.basename(File.dirname(controller))
+          owner == file_name ? nil : owner
+        }.uniq.sort
       end
     end
   end

data/lib/generators/phlex_kit/install/templates/phlex_kit.rb

@@ -5,6 +5,9 @@ PhlexKit.configure do |c|
   # set true to require it, false to force it off.
   c.reactive = :auto
 
+  # Default icon set for PhlexKit::Icon (:lucide, :phosphor, :tabler, :remix).
+  # c.icon_library = :lucide
+
   # Alias `UI` to `PhlexKit` so you can write `UI::Button` instead of
   # `PhlexKit::Button`. Off by default to avoid claiming a generic constant.
   c.define_ui_alias = false

data/lib/phlex_kit/base_component.rb

@@ -18,5 +18,17 @@ module PhlexKit
     def on(*, **)
       {}
     end
+
+    private
+
+    # Fail-loud option lookup with an actionable message. Still a KeyError —
+    # the same class a bare VARIANTS.fetch raised — but names the component,
+    # the option, and the valid values instead of "key not found: :prmary".
+    def fetch_option(map, key, name)
+      map.fetch(key) do
+        raise KeyError, "#{self.class.name}: unknown #{name} #{key.inspect} — " \
+                        "valid: #{map.keys.map(&:inspect).join(", ")}"
+      end
+    end
   end
 end

data/lib/phlex_kit/engine.rb

@@ -49,7 +49,17 @@ module PhlexKit
 
     # (5) Optional convenience alias so revue-style `UI::Button` keeps working.
     config.after_initialize do
-      Object.const_set(:UI, PhlexKit) if PhlexKit.config.define_ui_alias && !Object.const_defined?(:UI)
+      if PhlexKit.config.define_ui_alias
+        if Object.const_defined?(:UI)
+          # Fail loud-ish: silently skipping reads as "alias mysteriously absent".
+          Rails.logger&.warn(
+            "PhlexKit: define_ui_alias is enabled but ::UI is already defined " \
+            "(#{Object.const_get(:UI).inspect}) — alias skipped."
+          )
+        else
+          Object.const_set(:UI, PhlexKit)
+        end
+      end
     end
   end
 end

data/lib/phlex_kit/icons/lucide.rb

@@ -83,7 +83,7 @@ module PhlexKit
         mic: [ [ :path, { d: "M12 19v3" } ], [ :path, { d: "M19 10v2a7 7 0 0 1-14 0v-2" } ], [ :rect, { rx: "3", x: "9", y: "2", width: "6", height: "13" } ] ],
         play: [ [ :path, { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" } ] ],
         pause: [ [ :rect, { rx: "1", x: "14", y: "3", width: "5", height: "18" } ], [ :rect, { rx: "1", x: "5", y: "3", width: "5", height: "18" } ] ],
-        grip: [ [ :circle, { cx: "9", cy: "12", r: "1" } ], [ :circle, { cx: "9", cy: "5", r: "1" } ], [ :circle, { cx: "9", cy: "19", r: "1" } ], [ :circle, { cx: "15", cy: "12", r: "1" } ], [ :circle, { cx: "15", cy: "5", r: "1" } ], [ :circle, { cx: "15", cy: "19", r: "1" } ] ],
+        grip: [ [ :circle, { cx: "9", cy: "12", r: "1" } ], [ :circle, { cx: "9", cy: "5", r: "1" } ], [ :circle, { cx: "9", cy: "19", r: "1" } ], [ :circle, { cx: "15", cy: "12", r: "1" } ], [ :circle, { cx: "15", cy: "5", r: "1" } ], [ :circle, { cx: "15", cy: "19", r: "1" } ] ]
       }.freeze
     end
   end

data/lib/phlex_kit/icons/phosphor.rb

@@ -83,7 +83,7 @@ module PhlexKit
         mic: [ [ :path, { d: "M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z" } ] ],
         play: [ [ :path, { d: "M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z" } ] ],
         pause: [ [ :path, { d: "M200,32H160a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm0,176H160V48h40ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Zm0,176H56V48H96Z" } ] ],
-        grip: [ [ :path, { d: "M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" } ] ],
+        grip: [ [ :path, { d: "M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" } ] ]
       }.freeze
     end
   end

data/lib/phlex_kit/icons/remix.rb

@@ -83,7 +83,7 @@ module PhlexKit
         mic: [ [ :path, { d: "M11.9998 3C10.3429 3 8.99976 4.34315 8.99976 6V10C8.99976 11.6569 10.3429 13 11.9998 13C13.6566 13 14.9998 11.6569 14.9998 10V6C14.9998 4.34315 13.6566 3 11.9998 3ZM11.9998 1C14.7612 1 16.9998 3.23858 16.9998 6V10C16.9998 12.7614 14.7612 15 11.9998 15C9.23833 15 6.99976 12.7614 6.99976 10V6C6.99976 3.23858 9.23833 1 11.9998 1ZM3.05469 11H5.07065C5.55588 14.3923 8.47329 17 11.9998 17C15.5262 17 18.4436 14.3923 18.9289 11H20.9448C20.4837 15.1716 17.1714 18.4839 12.9998 18.9451V23H10.9998V18.9451C6.82814 18.4839 3.51584 15.1716 3.05469 11Z" } ] ],
         play: [ [ :path, { d: "M16.3944 12.0001L10 7.7371V16.263L16.3944 12.0001ZM19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.0658V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.59871 4.43433 8.69522 4.46355 8.77735 4.5183L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z" } ] ],
         pause: [ [ :path, { d: "M6 5H8V19H6V5ZM16 5H18V19H16V5Z" } ] ],
-        grip: [ [ :path, { d: "M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z" } ] ],
+        grip: [ [ :path, { d: "M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z" } ] ]
       }.freeze
     end
   end

data/lib/phlex_kit/icons/tabler.rb

@@ -83,7 +83,7 @@ module PhlexKit
         mic: [ [ :path, { d: "M9 5a3 3 0 0 1 3 -3a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3a3 3 0 0 1 -3 -3l0 -5" } ], [ :path, { d: "M5 10a7 7 0 0 0 14 0" } ], [ :path, { d: "M8 21l8 0" } ], [ :path, { d: "M12 17l0 4" } ] ],
         play: [ [ :path, { d: "M7 4v16l13 -8l-13 -8" } ] ],
         pause: [ [ :path, { d: "M6 6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -12" } ], [ :path, { d: "M14 6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -12" } ] ],
-        grip: [ [ :path, { d: "M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ] ],
+        grip: [ [ :path, { d: "M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ], [ :path, { d: "M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" } ] ]
       }.freeze
     end
   end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.5.1"
+  VERSION = "0.6.1"
 end

data/lib/phlex_kit.rb

@@ -3,6 +3,11 @@
 require "json" # Carousel serializes its options value standalone (no Rails to_json)
 require "securerandom" # DatePicker generates a default input id
 require "cgi" # DataTable sort/pagination build query strings standalone
+# phlex-rails references ActiveSupport::SafeBuffer at require time; in a Rails
+# app it's already loaded, but a bare `require "phlex_kit"` (script/console)
+# crashes with "uninitialized constant Phlex::ActiveSupport" without these.
+require "active_support"
+require "active_support/core_ext/string/output_safety"
 require "phlex"
 require "phlex-rails"
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.6.1
 platform: ruby
 authors:
 - Matt Kennedy
@@ -582,6 +582,7 @@ files:
 - app/components/phlex_kit/tooltip/tooltip.css
 - app/components/phlex_kit/tooltip/tooltip.rb
 - app/components/phlex_kit/tooltip/tooltip_content.rb
+- app/components/phlex_kit/tooltip/tooltip_controller.js
 - app/components/phlex_kit/tooltip/tooltip_trigger.rb
 - app/components/phlex_kit/typography/blockquote.rb
 - app/components/phlex_kit/typography/heading.rb