phlex_kit 0.5.0 → 0.6.1

data/app/components/phlex_kit/tabs/tabs_trigger.rb

@@ -1,12 +1,24 @@
 module PhlexKit
   class TabsTrigger < BaseComponent
-    def initialize(value:, as: :button, **attrs)
+    def initialize(value:, as: :button, active: false, **attrs)
       @value = value
       @as = as.to_sym
+      @active = active
       @attrs = attrs
     end
     def view_template(&)
-      base = { class: "pk-tabs-trigger", role: "tab", data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value } }
+      # Deterministic ids pair each trigger with its panel (aria-controls /
+      # aria-labelledby); the controller re-scopes them per instance in
+      # connect() so multiple tab sets sharing a value can't collide.
+      # aria-selected and the roving tabindex are kept in sync by the
+      # controller's activeValueChanged.
+      base = {
+        class: "pk-tabs-trigger", role: "tab", id: "pk-tabs-trigger-#{@value}",
+        aria_selected: @active ? "true" : "false",
+        aria_controls: "pk-tabs-panel-#{@value}",
+        tabindex: @active ? "0" : "-1",
+        data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value }
+      }
       if @as == :a
         a(**mix(base, @attrs), &)
       else

data/app/components/phlex_kit/theme_toggle/theme_toggle.rb

@@ -3,11 +3,19 @@ module PhlexKit
   # ThemeToggle. The sibling phlex-kit--theme-toggle controller listens for the
   # toggle's change event and flips :root[data-theme] (matching the token system).
   class ThemeToggle < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    def initialize(wrapper: {}, aria: {}, **attrs)
+      @wrapper = wrapper
+      @aria = aria
+      @attrs = attrs
+    end
+
     def view_template(&block)
+      # Merge caller wrapper/aria instead of splatting @attrs over the defaults —
+      # a caller `wrapper:` would otherwise replace the hash wholesale and
+      # silently delete the theme-toggle controller wiring.
       render PhlexKit::Toggle.new(
-        aria: { label: "Toggle theme" },
-        wrapper: { data: { controller: "phlex-kit--theme-toggle", action: "phlex-kit--toggle:change->phlex-kit--theme-toggle#apply" } },
+        aria: { label: "Toggle theme" }.merge(@aria),
+        wrapper: mix({ data: { controller: "phlex-kit--theme-toggle", action: "phlex-kit--toggle:change->phlex-kit--theme-toggle#apply" } }, @wrapper),
         **@attrs, &block
       )
     end

data/app/components/phlex_kit/toast/toast_controller.js

@@ -27,6 +27,10 @@ export default class extends Controller {
     this._onPointerUp = this._onPointerUp.bind(this)
     this._onPointerEnter = () => this._pause()
     this._onPointerLeave = () => { if (!this._swipe.active) this._resume() }
+    // Keyboard parity with hover: tabbing into the toast (e.g. to reach its
+    // action button) must pause auto-dismiss just like pointerenter does.
+    this._onFocusIn = () => this._pause()
+    this._onFocusOut = (e) => { if (!this.element.contains(e.relatedTarget)) this._resume() }
     this._onKeyDown = this._onKeyDown.bind(this)
     this._onForceDismiss = (e) => { e.stopPropagation(); this._close() }
     this._onRestart = () => this._restart()
@@ -36,6 +40,8 @@ export default class extends Controller {
     this.element.addEventListener("pointerdown", this._onPointerDown)
     this.element.addEventListener("pointerenter", this._onPointerEnter)
     this.element.addEventListener("pointerleave", this._onPointerLeave)
+    this.element.addEventListener("focusin", this._onFocusIn)
+    this.element.addEventListener("focusout", this._onFocusOut)
     this.element.addEventListener("keydown", this._onKeyDown)
     this.element.addEventListener("phlex-kit:toast:force-dismiss", this._onForceDismiss)
     this.element.addEventListener("phlex-kit:toast:restart", this._onRestart)
@@ -53,6 +59,8 @@ export default class extends Controller {
     this.element.removeEventListener("pointerdown", this._onPointerDown)
     this.element.removeEventListener("pointerenter", this._onPointerEnter)
     this.element.removeEventListener("pointerleave", this._onPointerLeave)
+    this.element.removeEventListener("focusin", this._onFocusIn)
+    this.element.removeEventListener("focusout", this._onFocusOut)
     this.element.removeEventListener("keydown", this._onKeyDown)
     this.element.removeEventListener("phlex-kit:toast:force-dismiss", this._onForceDismiss)
     this.element.removeEventListener("phlex-kit:toast:restart", this._onRestart)
@@ -70,9 +78,18 @@ export default class extends Controller {
     if (this.element.dataset.state === "closing") return
     this.element.dataset.state = "closing"
     this.element.dispatchEvent(new CustomEvent(reason === "auto" ? "phlex-kit:toast:auto-close" : "phlex-kit:toast:dismiss", { bubbles: true, detail: { id: this.element.id } }))
+    this._invokeCallback(reason === "auto" ? this.onAutoCloseValue : this.onDismissValue)
     setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
   }
 
+  // on_dismiss:/on_auto_close: name a global function (Sonner-style callback
+  // for server-rendered toasts).
+  _invokeCallback(name) {
+    if (!name) return
+    const fn = window[name]
+    if (typeof fn === "function") fn({ id: this.element.id })
+  }
+
   _start() {
     if (!Number.isFinite(this.durationValue) || this.durationValue <= 0) return
     this._startedAt = performance.now()

data/app/components/phlex_kit/toast/toast_icon.rb

@@ -22,7 +22,7 @@ module PhlexKit
     def view_template
       return unless renderable?
       span(**mix({ class: "pk-toast-icon", data: { slot: "icon" } }, @attrs)) do
-        render Icon.new(GLYPHS.fetch(@variant), size: 16, class: svg_classes)
+        render Icon.new(fetch_option(GLYPHS, @variant, :glyph), size: 16, class: svg_classes)
       end
     end
 

data/app/components/phlex_kit/toast/toast_item.rb

@@ -44,7 +44,7 @@ module PhlexKit
 
     def item_attrs
       data = {
-        variant: VARIANTS.fetch(@variant),
+        variant: fetch_option(VARIANTS, @variant, :variant),
         state: "pending",
         swipe: "none",
         controller: "phlex-kit--toast",

data/app/components/phlex_kit/toggle/toggle.rb

@@ -7,7 +7,7 @@ module PhlexKit
     SIZES = { sm: "sm", default: nil, lg: "lg" }.freeze
 
     def self.modifier_classes(variant:, size:)
-      [VARIANTS.fetch(variant, nil), SIZES.fetch(size, nil)].compact
+      [ VARIANTS.fetch(variant, nil), SIZES.fetch(size, nil) ].compact
     end
 
     def initialize(pressed: false, name: nil, value: "1", unpressed_value: nil,
@@ -33,7 +33,7 @@ module PhlexKit
     private
 
     def classes
-      (["pk-toggle"] + self.class.modifier_classes(variant: @variant, size: @size)).join(" ")
+      ([ "pk-toggle" ] + self.class.modifier_classes(variant: @variant, size: @size)).join(" ")
     end
 
     def button_default_attrs

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

@@ -29,6 +29,8 @@ module PhlexKit
         calendar: [ [ :path, { d: "M8 2v4" } ], [ :path, { d: "M16 2v4" } ], [ :rect, { rx: "2", x: "3", y: "4", width: "18", height: "18" } ], [ :path, { d: "M3 10h18" } ] ],
         user: [ [ :path, { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" } ], [ :circle, { cx: "12", cy: "7", r: "4" } ] ],
         users: [ [ :path, { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" } ], [ :path, { d: "M16 3.128a4 4 0 0 1 0 7.744" } ], [ :path, { d: "M22 21v-2a4 4 0 0 0-3-3.87" } ], [ :circle, { cx: "9", cy: "7", r: "4" } ] ],
+        user_x: [ [ :path, { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" } ], [ :circle, { cx: "9", cy: "7", r: "4" } ], [ :line, { x1: "17", x2: "22", y1: "8", y2: "13" } ], [ :line, { x1: "22", x2: "17", y1: "8", y2: "13" } ] ],
+        volume_off: [ [ :path, { d: "M16 9a5 5 0 0 1 .95 2.293" } ], [ :path, { d: "M19.364 5.636a9 9 0 0 1 1.889 9.96" } ], [ :path, { d: "m2 2 20 20" } ], [ :path, { d: "m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11" } ], [ :path, { d: "M9.828 4.172A.686.686 0 0 1 11 4.657v.686" } ] ],
         settings: [ [ :path, { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" } ], [ :circle, { cx: "12", cy: "12", r: "3" } ] ],
         trash: [ [ :path, { d: "M10 11v6" } ], [ :path, { d: "M14 11v6" } ], [ :path, { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" } ], [ :path, { d: "M3 6h18" } ], [ :path, { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" } ] ],
         plus: [ [ :path, { d: "M5 12h14" } ], [ :path, { d: "M12 5v14" } ] ],
@@ -81,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

@@ -29,6 +29,8 @@ module PhlexKit
         calendar: [ [ :path, { d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z" } ] ],
         user: [ [ :path, { d: "M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z" } ] ],
         users: [ [ :path, { d: "M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z" } ] ],
+        user_x: [ [ :path, { d: "M168,56a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H176A8,8,0,0,1,168,56Zm58.08,37.33a103.93,103.93,0,1,1-80.76-67.89,8,8,0,0,1-2.64,15.78A88.07,88.07,0,0,0,40,128a87.62,87.62,0,0,0,22.24,58.41A79.66,79.66,0,0,1,98.3,157.66a48,48,0,1,1,59.4,0,79.66,79.66,0,0,1,36.06,28.75A88,88,0,0,0,211,98.67a8,8,0,0,1,15.09-5.34ZM128,152a32,32,0,1,0-32-32A32,32,0,0,0,128,152Zm0,64a87.57,87.57,0,0,0,53.92-18.5,64,64,0,0,0-107.84,0A87.57,87.57,0,0,0,128,216Z" } ] ],
+        volume_off: [ [ :path, { d: "M53.92,34.62A8,8,0,1,0,42.08,45.38L73.55,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V175.09l42.08,46.29a8,8,0,1,0,11.84-10.76ZM32,96H72v64H32ZM144,207.64,88,164.09V95.89l56,61.6Zm42-63.77a24,24,0,0,0,0-31.72,8,8,0,1,1,12-10.57,40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.59Zm-80.16-76a8,8,0,0,1,1.4-11.23l39.85-31A8,8,0,0,1,160,32v74.83a8,8,0,0,1-16,0V48.36l-26.94,21A8,8,0,0,1,105.84,67.91ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z" } ] ],
         settings: [ [ :path, { d: "M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z" } ] ],
         trash: [ [ :path, { d: "M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z" } ] ],
         plus: [ [ :path, { d: "M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z" } ] ],
@@ -81,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

@@ -29,6 +29,8 @@ module PhlexKit
         calendar: [ [ :path, { d: "M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z" } ] ],
         user: [ [ :path, { d: "M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z" } ] ],
         users: [ [ :path, { d: "M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.752 23 22H21C21 19.564 19.5483 17.4671 17.4628 16.5271L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z" } ] ],
+        user_x: [ [ :path, { d: "M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM19 17.5858L21.1213 15.4645L22.5355 16.8787L20.4142 19L22.5355 21.1213L21.1213 22.5355L19 20.4142L16.8787 22.5355L15.4645 21.1213L17.5858 19L15.4645 16.8787L16.8787 15.4645L19 17.5858Z" } ] ],
+        volume_off: [ [ :path, { d: "M10 7.22056L6.60282 10.0001H3V14.0001H6.60282L10 16.7796V7.22056ZM5.88889 16.0001H2C1.44772 16.0001 1 15.5524 1 15.0001V9.00007C1 8.44778 1.44772 8.00007 2 8.00007H5.88889L11.1834 3.66821C11.3971 3.49335 11.7121 3.52485 11.887 3.73857C11.9601 3.8279 12 3.93977 12 4.05519V19.9449C12 20.2211 11.7761 20.4449 11.5 20.4449C11.3846 20.4449 11.2727 20.405 11.1834 20.3319L5.88889 16.0001ZM20.4142 12.0001L23.9497 15.5356L22.5355 16.9498L19 13.4143L15.4645 16.9498L14.0503 15.5356L17.5858 12.0001L14.0503 8.46454L15.4645 7.05032L19 10.5859L22.5355 7.05032L23.9497 8.46454L20.4142 12.0001Z" } ] ],
         settings: [ [ :path, { d: "M3.33946 17.0002C2.90721 16.2515 2.58277 15.4702 2.36133 14.6741C3.3338 14.1779 3.99972 13.1668 3.99972 12.0002C3.99972 10.8345 3.3348 9.824 2.36353 9.32741C2.81025 7.71651 3.65857 6.21627 4.86474 4.99001C5.7807 5.58416 6.98935 5.65534 7.99972 5.072C9.01009 4.48866 9.55277 3.40635 9.4962 2.31604C11.1613 1.8846 12.8847 1.90004 14.5031 2.31862C14.4475 3.40806 14.9901 4.48912 15.9997 5.072C17.0101 5.65532 18.2187 5.58416 19.1346 4.99007C19.7133 5.57986 20.2277 6.25151 20.66 7.00021C21.0922 7.7489 21.4167 8.53025 21.6381 9.32628C20.6656 9.82247 19.9997 10.8336 19.9997 12.0002C19.9997 13.166 20.6646 14.1764 21.6359 14.673C21.1892 16.2839 20.3409 17.7841 19.1347 19.0104C18.2187 18.4163 17.0101 18.3451 15.9997 18.9284C14.9893 19.5117 14.4467 20.5941 14.5032 21.6844C12.8382 22.1158 11.1148 22.1004 9.49633 21.6818C9.55191 20.5923 9.00929 19.5113 7.99972 18.9284C6.98938 18.3451 5.78079 18.4162 4.86484 19.0103C4.28617 18.4205 3.77172 17.7489 3.33946 17.0002ZM8.99972 17.1964C10.0911 17.8265 10.8749 18.8227 11.2503 19.9659C11.7486 20.0133 12.2502 20.014 12.7486 19.9675C13.1238 18.8237 13.9078 17.8268 14.9997 17.1964C16.0916 16.5659 17.347 16.3855 18.5252 16.6324C18.8146 16.224 19.0648 15.7892 19.2729 15.334C18.4706 14.4373 17.9997 13.2604 17.9997 12.0002C17.9997 10.74 18.4706 9.5632 19.2729 8.6665C19.1688 8.4405 19.0538 8.21822 18.9279 8.00021C18.802 7.78219 18.667 7.57148 18.5233 7.36842C17.3457 7.61476 16.0911 7.43414 14.9997 6.80405C13.9083 6.17395 13.1246 5.17768 12.7491 4.03455C12.2509 3.98714 11.7492 3.98646 11.2509 4.03292C10.8756 5.17671 10.0916 6.17364 8.99972 6.80405C7.9078 7.43447 6.65245 7.61494 5.47428 7.36803C5.18485 7.77641 4.93463 8.21117 4.72656 8.66637C5.52881 9.56311 5.99972 10.74 5.99972 12.0002C5.99972 13.2604 5.52883 14.4372 4.72656 15.3339C4.83067 15.5599 4.94564 15.7822 5.07152 16.0002C5.19739 16.2182 5.3324 16.4289 5.47612 16.632C6.65377 16.3857 7.90838 16.5663 8.99972 17.1964ZM11.9997 15.0002C10.3429 15.0002 8.99972 13.6571 8.99972 12.0002C8.99972 10.3434 10.3429 9.00021 11.9997 9.00021C13.6566 9.00021 14.9997 10.3434 14.9997 12.0002C14.9997 13.6571 13.6566 15.0002 11.9997 15.0002ZM11.9997 13.0002C12.552 13.0002 12.9997 12.5525 12.9997 12.0002C12.9997 11.4479 12.552 11.0002 11.9997 11.0002C11.4474 11.0002 10.9997 11.4479 10.9997 12.0002C10.9997 12.5525 11.4474 13.0002 11.9997 13.0002Z" } ] ],
         trash: [ [ :path, { d: "M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z" } ] ],
         plus: [ [ :path, { d: "M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" } ] ],
@@ -81,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

@@ -29,6 +29,8 @@ module PhlexKit
         calendar: [ [ :path, { d: "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" } ], [ :path, { d: "M16 3v4" } ], [ :path, { d: "M8 3v4" } ], [ :path, { d: "M4 11h16" } ], [ :path, { d: "M11 15h1" } ], [ :path, { d: "M12 15v3" } ] ],
         user: [ [ :path, { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" } ], [ :path, { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" } ] ],
         users: [ [ :path, { d: "M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" } ], [ :path, { d: "M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" } ], [ :path, { d: "M16 3.13a4 4 0 0 1 0 7.75" } ], [ :path, { d: "M21 21v-2a4 4 0 0 0 -3 -3.85" } ] ],
+        user_x: [ [ :path, { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" } ], [ :path, { d: "M6 21v-2a4 4 0 0 1 4 -4h3.5" } ], [ :path, { d: "M22 22l-5 -5" } ], [ :path, { d: "M17 22l5 -5" } ] ],
+        volume_off: [ [ :path, { d: "M15 8a5 5 0 0 1 1.912 4.934m-1.377 2.602a5 5 0 0 1 -.535 .464" } ], [ :path, { d: "M17.7 5a9 9 0 0 1 2.362 11.086m-1.676 2.299a9 9 0 0 1 -.686 .615" } ], [ :path, { d: "M9.069 5.054l.431 -.554a.8 .8 0 0 1 1.5 .5v2m0 4v8a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l1.294 -1.664" } ], [ :path, { d: "M3 3l18 18" } ] ],
         settings: [ [ :path, { d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" } ], [ :path, { d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" } ] ],
         trash: [ [ :path, { d: "M4 7l16 0" } ], [ :path, { d: "M10 11l0 6" } ], [ :path, { d: "M14 11l0 6" } ], [ :path, { d: "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" } ], [ :path, { d: "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" } ] ],
         plus: [ [ :path, { d: "M12 5l0 14" } ], [ :path, { d: "M5 12l14 0" } ] ],
@@ -81,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.0"
+  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.0
+  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