primer_view_components 0.0.88 → 0.0.91

data/app/assets/styles/primer_view_components.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"primer_view_components.css"}

data/app/components/primer/alpha/auto_complete.rb

@@ -94,12 +94,12 @@ module Primer
       #
       # @example With custom classes for the input
       #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
-      #     <% c.input(classes: "custom-class") %>
+      #     <% c.with_input(classes: "custom-class") %>
       #   <% end %>
       #
       # @example With custom classes for the results
       #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
-      #     <% c.results(classes: "custom-class") do %>
+      #     <% c.with_results(classes: "custom-class") do %>
       #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
       #         Apple
       #       <% end %>

data/app/components/primer/alpha/hidden_text_expander.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `HiddenTextExpander` to indicate and toggle hidden text.
+    #
+    # @accessibility
+    #   `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+    #   The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
+    #   if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
+    #   `"Expand 5 more comments"` instead of `"More"`.
+    class HiddenTextExpander < Primer::Component
+      status :alpha
+
+      # @example Default
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
+      #
+      # @example Styling the button
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
+      #
+      # @param inline [Boolean] Whether or not the expander is inline.
+      # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(inline: false, button_arguments: {}, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @button_arguments = button_arguments
+
+        @system_arguments[:tag] = :span
+        @system_arguments[:classes] = class_names(
+          "hidden-text-expander",
+          @system_arguments[:classes],
+          "inline" => inline
+        )
+
+        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        if aria_label.present?
+          @button_arguments[:"aria-label"] = aria_label
+          @system_arguments[:aria]&.delete(:label)
+        end
+
+        @button_arguments[:classes] = class_names(
+          "ellipsis-expander",
+          button_arguments[:classes]
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::HellipButton.new(**@button_arguments))
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/layout.rb

@@ -14,6 +14,8 @@ module Primer
     #   Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
     #   `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
     class Layout < Primer::Component
+      status :alpha
+
       FIRST_IN_SOURCE_DEFAULT = :sidebar
       FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze
 
@@ -80,8 +82,8 @@ module Primer
       # @example Default
       #
       #   <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #     <% c.main(border: true) { "Main" } %>
-      #     <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% c.with_main(border: true) { "Main" } %>
+      #     <% c.with_sidebar(border: true) { "Sidebar" } %>
       #   <% end %>
       #
       # @example Main widths
@@ -96,20 +98,20 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(width: :full, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :full, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(width: :md, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :md, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(width: :lg, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :lg, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(width: :xl, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :xl, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar widths
@@ -125,16 +127,16 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(width: :default, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(width: :default, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(width: :narrow, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(width: :wide, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar placement
@@ -144,12 +146,12 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(col_placement: :start, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new( mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(col_placement: :end, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar placement as row
@@ -163,16 +165,16 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(row_placement: :start, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(row_placement: :end, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(row_placement: :none, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Changing when to render `Layout` as columns
@@ -183,16 +185,16 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>

data/app/components/primer/alpha/segmented-control-element.js

@@ -3,19 +3,20 @@ export default class SegmentedControlElement extends HTMLElement {
     constructor() {
         super();
         this.addEventListener('click', (event) => {
-            const controls = Array.from(this.querySelectorAll('[role="toolbar"] button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
+            var _a, _b;
+            const controls = Array.from(this.querySelectorAll('ul button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
             if (!(event.target instanceof Element))
                 return;
             if (event.target.closest(this.tagName) !== this)
                 return;
             const selectedControl = event.target.closest('button');
-            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('[role="toolbar"]'))
+            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('ul'))
                 return;
             for (const control of controls) {
-                control.classList.remove('SegmentedControl-button--selected');
+                (_a = control.closest('li')) === null || _a === void 0 ? void 0 : _a.classList.remove('SegmentedControl-item--selected');
                 control.setAttribute('aria-current', 'false');
             }
-            selectedControl.classList.add('SegmentedControl-button--selected');
+            (_b = selectedControl.closest('li')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
             selectedControl.setAttribute('aria-current', 'true');
             selectedControl.focus();
         });

data/app/components/primer/alpha/tab_nav.rb

@@ -49,30 +49,30 @@ module Primer
       #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
       #   @code
       #     <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
-      #       <% c.tab(selected: true, href: "#") { "Tab 1" } %>
-      #       <% c.tab(href: "#") { "Tab 2" } %>
-      #       <% c.tab(href: "#") { "Tab 3" } %>
+      #       <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% c.with_tab(href: "#") { "Tab 2" } %>
+      #       <% c.with_tab(href: "#") { "Tab 3" } %>
       #     <% end %>
       #
       # @example Default with `<div>`
       #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #     <% component.with_tab(href: "#", selected: true) do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 1" } %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 2" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.text { "Item 3" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
@@ -80,20 +80,20 @@ module Primer
       #
       # @example With extra content
       #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
-      #     <% c.extra do %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_extra do %>
       #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Adding extra content after the tabs
       #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
-      #     <% c.extra(align: :right) do %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_extra(align: :right) do %>
       #       <div>
       #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
       #       </div>
@@ -102,9 +102,9 @@ module Primer
       #
       # @example Customizing the body
       #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>

data/app/components/primer/alpha/tab_panels.rb

@@ -43,13 +43,13 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
-      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |t| %>
       #       <% t.text { "Tab 1" } %>
       #       <% t.panel do %>
       #         Panel 1
       #       <% end %>
       #     <% end %>
-      #     <% component.tab(id: "tab-2") do |t| %>
+      #     <% component.with_tab(id: "tab-2") do |t| %>
       #       <% t.text { "Tab 2" } %>
       #       <% t.panel do %>
       #         Panel 2

data/app/components/primer/alpha/tool-tip-element.d.ts

@@ -9,13 +9,11 @@ declare class ToolTipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
-    set visibilityHidden(value: true | false);
-    get visibilityHidden(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
     static observedAttributes: string[];
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string): void;
 }
 declare global {
     interface Window {

data/app/components/primer/alpha/tool-tip-element.js

@@ -176,12 +176,6 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
-    set visibilityHidden(value) {
-        this.style.visibility = value ? 'hidden' : '';
-    }
-    get visibilityHidden() {
-        return this.style.visibility === 'hidden';
-    }
     connectedCallback() {
         var _a;
         if (!this.shadowRoot) {
@@ -194,7 +188,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `;
         }
-        this.visibilityHidden = true;
+        this.hidden = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
@@ -222,22 +216,22 @@ class ToolTipElement extends HTMLElement {
             return;
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
-            this.visibilityHidden = false;
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
+            this.hidden = false;
         }
         else if (event.type === 'blur') {
-            this.visibilityHidden = true;
+            this.hidden = true;
         }
         else if (event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this) {
-            this.visibilityHidden = true;
+            this.hidden = true;
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.visibilityHidden) {
-            this.visibilityHidden = true;
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
+            this.hidden = true;
         }
     }
-    attributeChangedCallback(name, oldValue, newValue) {
+    attributeChangedCallback(name) {
         if (name === 'id' || name === 'data-type') {
             if (!this.id || !this.control)
                 return;
@@ -251,7 +245,7 @@ class ToolTipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
+        else if (this.isConnected && name === 'hidden') {
             __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
         }
         else if (name === 'data-direction') {
@@ -293,21 +287,21 @@ class ToolTipElement extends HTMLElement {
     }
 }
 _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.visibilityHidden) {
+    if (this.hidden) {
         this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
     }
     else {
         this.classList.add(TOOLTIP_OPEN_CLASS);
         for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
             if (tooltip !== this)
-                tooltip.visibilityHidden = true;
+                tooltip.hidden = true;
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.visibilityHidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
@@ -351,7 +345,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'style'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

data/app/components/primer/alpha/tool-tip-element.ts

@@ -176,14 +176,6 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
-  set visibilityHidden(value: true | false) {
-    this.style.visibility = value ? 'hidden' : ''
-  }
-
-  get visibilityHidden() {
-    return this.style.visibility === 'hidden'
-  }
-
   connectedCallback() {
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
@@ -195,7 +187,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `
     }
-    this.visibilityHidden = true
+    this.hidden = true
     this.#allowUpdatePosition = true
 
     if (!this.id) {
@@ -228,36 +220,36 @@ class ToolTipElement extends HTMLElement {
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
-      this.visibilityHidden = false
+    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
+      this.hidden = false
     } else if (event.type === 'blur') {
-      this.visibilityHidden = true
+      this.hidden = true
     } else if (
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
     ) {
-      this.visibilityHidden = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.visibilityHidden) {
-      this.visibilityHidden = true
+      this.hidden = true
+    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hidden) {
+      this.hidden = true
     }
   }
 
-  static observedAttributes = ['data-type', 'data-direction', 'id', 'style']
+  static observedAttributes = ['data-type', 'data-direction', 'id', 'hidden']
 
   #update() {
-    if (this.visibilityHidden) {
+    if (this.hidden) {
       this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
     } else {
       this.classList.add(TOOLTIP_OPEN_CLASS)
-      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
-        if (tooltip !== this) tooltip.visibilityHidden = true
+      for (const tooltip of this.ownerDocument.querySelectorAll<HTMLElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.hidden = true
       }
       this.#updatePosition()
     }
   }
 
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+  attributeChangedCallback(name: string) {
     if (name === 'id' || name === 'data-type') {
       if (!this.id || !this.control) return
       if (this.type === 'label') {
@@ -268,7 +260,7 @@ class ToolTipElement extends HTMLElement {
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
         this.control.setAttribute('aria-describedby', describedBy)
       }
-    } else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
+    } else if (this.isConnected && name === 'hidden') {
       this.#update()
     } else if (name === 'data-direction') {
       this.classList.remove(...DIRECTION_CLASSES)
@@ -303,7 +295,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.visibilityHidden) return
+    if (!this.#allowUpdatePosition || this.hidden) return
 
     const TOOLTIP_OFFSET = 10