inclusive-elements 0.5.5 → 0.6.1

package/src/popover/README.md

@@ -0,0 +1,94 @@
+# Popover
+
+**A native-first popover pattern using the Popover API.**
+
+## Example
+
+```html
+<button popovertarget="info-popover">More info</button>
+
+<div id="info-popover" popover data-placement="bottom-start">
+    This pattern no longer needs a library wrapper. Use the platform directly.
+</div>
+```
+
+## Platform Requirements
+
+-   Requires modern browser support for the Popover API.
+-   The styling examples use CSS anchor positioning.
+
+## Behavior
+
+-   The button uses `popovertarget` to control the popover surface.
+-   The browser manages opening, closing, and light dismiss behavior for the popover.
+-   CSS anchor positioning can be used to place the popover relative to its trigger.
+
+## Accessibility Notes
+
+-   `popover` gives you a surface and lifecycle, not a semantic role. Choose markup and ARIA that match the actual pattern, such as menu, tooltip, or generic descriptive content.
+-   Make sure the trigger has an accessible name and clearly communicates what will open.
+-   Keep the content structure appropriate to the job. A simple help popover can stay plain, while interactive or decision-heavy content may be better served by a dialog.
+
+## Styling
+
+As a simple recommendation, you can style all popover surfaces with the `popover` attribute and control placement with a `data-placement` attribute:
+
+```css
+[popover] {
+    position: fixed;
+    position-anchor: auto;
+}
+
+[popover][data-placement='bottom'] {
+    position-area: block-end;
+}
+
+[popover][data-placement='bottom-start'] {
+    position-area: block-end span-inline-start;
+}
+
+[popover][data-placement='bottom-end'] {
+    position-area: block-end span-inline-end;
+}
+
+[popover][data-placement='top'] {
+    position-area: block-start;
+}
+
+[popover][data-placement='top-start'] {
+    position-area: block-start span-inline-start;
+}
+
+[popover][data-placement='top-end'] {
+    position-area: block-start span-inline-end;
+}
+
+[popover][data-placement='right'] {
+    position-area: inline-end;
+}
+
+[popover][data-placement='right-start'] {
+    position-area: inline-end span-block-start;
+}
+
+[popover][data-placement='right-end'] {
+    position-area: inline-end span-block-end;
+}
+
+[popover][data-placement='left'] {
+    position-area: inline-start;
+}
+
+[popover][data-placement='left-start'] {
+    position-area: inline-start span-block-start;
+}
+
+[popover][data-placement='left-end'] {
+    position-area: inline-start span-block-end;
+}
+```
+
+## Further Reading
+
+-   [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)
+-   [MDN: CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)

package/src/tabs/README.md

@@ -0,0 +1,90 @@
+# Tabs
+
+**An accessible tabs pattern with a supporting custom element.**
+
+`ui-tabs` connects tabs and panels, keeps selection and focus state in sync, and adds the keyboard behavior the platform does not provide by itself.
+
+## Example
+
+```js
+import { TabsElement } from 'inclusive-elements';
+
+window.customElements.define('ui-tabs', TabsElement);
+```
+
+```html
+<ui-tabs>
+    <div role="tablist" aria-label="Account sections">
+        <button type="button" role="tab" aria-selected="true">Profile</button>
+        <button type="button" role="tab">Security</button>
+        <button type="button" role="tab">Billing</button>
+    </div>
+
+    <section role="tabpanel">
+        <h2>Profile</h2>
+        <p>Manage your public details.</p>
+    </section>
+
+    <section role="tabpanel" hidden>
+        <h2>Security</h2>
+        <p>Update your password and sign-in settings.</p>
+    </section>
+
+    <section role="tabpanel" hidden>
+        <h2>Billing</h2>
+        <p>View invoices and payment methods.</p>
+    </section>
+</ui-tabs>
+```
+
+## Behavior
+
+### Structure
+
+-   Add one descendant with `role="tablist"`. Use `button` elements with `role="tab"` inside it. Panels are read from owned descendants with `role="tabpanel"`, and `ui-tabs` pairs them strictly by document order.
+-   For initialized pairs, `ui-tabs` preserves existing `id` values where present, fills in missing `id` values, and normalizes `aria-controls` and `aria-labelledby` so each ordered pair stays wired together.
+
+### Selection And Panels
+
+-   Set `aria-selected="true"` on the tab that should be active by default. If none is marked selected, the first tab is selected automatically when the element connects.
+-   The active tab gets `aria-selected="true"` and stays in the normal tab order. Inactive tabs get `aria-selected="false"` and `tabindex="-1"`.
+-   Only the active panel remains visible. Other panels get `hidden = true`.
+-   If the active panel has no tabbable content and no author-provided `tabindex`, `ui-tabs` gives the panel `tabindex="0"` so keyboard users can still reach it.
+-   The element dispatches a `change` event on the `<ui-tabs>` element when user interaction or `selectTab()` changes the active tab.
+
+### Keyboard Navigation
+
+-   In a horizontal tablist, Left and Right move between tabs and wrap at the ends. Home and End jump to the first or last tab.
+-   In a vertical tablist, set `aria-orientation="vertical"` on the tablist. Then Up and Down move between tabs instead of Left and Right.
+-   Moving focus with the keyboard automatically activates the newly focused tab.
+
+### Dynamic Changes
+
+-   Adding, removing, or re-roleing tabs and panels after connection automatically re-syncs the ordered pairs. The current selected tab is preserved when its ordered slot still has a matching panel.
+
+## API
+
+```ts
+// Select a tab by index. Returns true when the active tab changed.
+tabs.selectTab(index, {
+    // Move focus to the selected tab.
+    focus: false,
+
+    // Emit a `change` event when selection changes.
+    emit: true,
+});
+```
+
+## Styling
+
+`ui-tabs` is unstyled. Style the selected tab from its ARIA state:
+
+```css
+[role='tab'][aria-selected='true'] {
+    font-weight: 600;
+}
+```
+
+## Further Reading
+
+-   [ARIA Authoring Practices Guide: Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)

package/src/toolbar/README.md

@@ -0,0 +1,68 @@
+# Toolbar
+
+**An accessible toolbar pattern with a supporting custom element.**
+
+`ui-toolbar` groups a set of controls into a single tab stop and adds the arrow-key focus management the platform does not provide by itself.
+
+## Example
+
+```js
+import { ToolbarElement } from 'inclusive-elements';
+
+window.customElements.define('ui-toolbar', ToolbarElement);
+```
+
+```html
+<ui-toolbar aria-label="Text formatting">
+    <button type="button">Bold</button>
+    <button type="button">Italic</button>
+    <button type="button">Underline</button>
+</ui-toolbar>
+
+<ui-toolbar aria-label="Alignment" aria-orientation="vertical">
+    <button type="button">Top</button>
+    <button type="button">Middle</button>
+    <button type="button">Bottom</button>
+</ui-toolbar>
+```
+
+## Behavior
+
+### Structure
+
+-   `ui-toolbar` adds `role="toolbar"` if it is not already present.
+
+### Focus Management
+
+-   The toolbar itself starts as the entry point into the widget. When it receives focus, focus moves to the current managed control inside it.
+-   The active control gets `tabindex="0"`. Other controls get `tabindex="-1"` so Tab leaves the toolbar instead of stepping through every control.
+
+### Keyboard Navigation
+
+-   By default, toolbars are horizontal. Left and Right move focus between controls and wrap at the ends.
+-   Set `aria-orientation="vertical"` when the toolbar is arranged vertically. Then Up and Down move focus between controls instead.
+-   Home and End move focus to the first or last control.
+
+### Dynamic Changes
+
+-   Adding or removing controls after connection keeps the roving tabindex state in sync so the toolbar remains a single managed widget in the tab order.
+
+## Styling
+
+`ui-toolbar` is unstyled. Lay out the controls however you like:
+
+```css
+ui-toolbar {
+    display: inline-flex;
+    gap: 0.5rem;
+}
+
+ui-toolbar[aria-orientation='vertical'] {
+    flex-direction: column;
+    align-items: start;
+}
+```
+
+## Further Reading
+
+-   [ARIA Authoring Practices Guide: Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)

package/src/tooltip/README.md

@@ -0,0 +1,97 @@
+# Tooltip
+
+**An accessible tooltip pattern built on native hint popovers with a supporting custom element.**
+
+`ui-tooltip` keeps the tooltip surface native and adds the ownership and interaction behavior the platform does not provide by itself.
+
+## Example
+
+```js
+import { TooltipElement } from 'inclusive-elements';
+
+window.customElements.define('ui-tooltip', TooltipElement);
+```
+
+```html
+<!-- Adjacent sibling tooltip -->
+<button type="button">Save</button>
+<ui-tooltip popover="hint" data-placement="top">Save changes</ui-tooltip>
+
+<!-- Explicit owner with for -->
+<button id="share-button" type="button">Share</button>
+<ui-tooltip for="share-button" popover="hint" data-placement="top">
+    Create a shareable link
+</ui-tooltip>
+```
+
+## Platform Requirements
+
+-   Requires modern browser support for the Popover API and hint popovers with `popover="hint"`.
+-   The styling examples use CSS anchor positioning.
+
+## Behavior
+
+### Structure
+
+-   `ui-tooltip` adds `popover="hint"` and `role="tooltip"` if they are not already present.
+-   The tooltip ensures it has an `id` and adds that value to the owner's `aria-describedby`.
+
+### Ownership
+
+-   Use whichever ownership style fits the markup best: if the tooltip has a `for` attribute, it targets the element with that `id`; otherwise, it targets its immediately preceding element sibling.
+-   Changing `for`, `id`, or `disabled` re-syncs the owner relationship automatically.
+
+### Visibility And Interaction
+
+-   The `disabled` attribute, or the reflected `tooltip.disabled` property, prevents the tooltip from showing and clears any current owner relationship.
+-   Tooltips do not show while the tooltip itself is `disabled`, or when the resolved owner is `disabled` or `aria-disabled="true"`.
+-   The tooltip shows on keyboard focus and pointer hover, hides on blur, pointer exit, click, and Escape, and stays open while the pointer moves between the owner and the tooltip.
+
+### Content Guidance
+
+-   Tooltip content should stay descriptive, supplemental, and non-interactive.
+-   Do not put required instructions or critical information in a tooltip, because hover is not reliably available on touch and other coarse-pointer devices.
+-   If you need buttons, links, form controls, or information the user must be able to discover, use a popover or dialog pattern instead.
+
+## API
+
+```ts
+// Default delay in milliseconds before the tooltip shows or hides.
+TooltipElement.delay = 100;
+
+// Override the delay for one tooltip instance.
+tooltip.setAttribute('delay', '200');
+
+// Reflect the disabled attribute as a property when convenient.
+tooltip.disabled = true;
+
+// Convenience methods for programmatic control.
+tooltip.show();
+tooltip.hide();
+```
+
+## Styling
+
+`ui-tooltip` is unstyled. Position the tooltip with native anchor positioning:
+
+```css
+[popover] {
+    position: fixed;
+    position-anchor: auto;
+}
+
+ui-tooltip[popover][data-placement='top'] {
+    position-area: block-start;
+    max-inline-size: 18rem;
+    padding: 0.5rem 0.75rem;
+}
+
+ui-tooltip[popover][data-placement='bottom'] {
+    position-area: block-end;
+}
+```
+
+## Further Reading
+
+-   [ARIA Authoring Practices Guide: Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
+-   [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)

package/dist/inclusive-elements.js

@@ -1,20 +0,0 @@
-import { default as o } from "./inclusive-elements2.js";
-import { default as r } from "./inclusive-elements3.js";
-import { default as f } from "./inclusive-elements4.js";
-import { default as s } from "./inclusive-elements5.js";
-import { default as u } from "./inclusive-elements6.js";
-import { default as n } from "./inclusive-elements7.js";
-import { default as E } from "./inclusive-elements8.js";
-import { default as i } from "./inclusive-elements9.js";
-import { default as b } from "./inclusive-elements10.js";
-export {
-  o as AccordionElement,
-  r as AlertsElement,
-  f as DisclosureElement,
-  s as MenuElement,
-  u as ModalElement,
-  n as PopupElement,
-  E as TabsElement,
-  i as ToolbarElement,
-  b as TooltipElement
-};

package/dist/inclusive-elements10.js

@@ -1,96 +0,0 @@
-var l = Object.defineProperty;
-var u = (n, s, t) => s in n ? l(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
-var e = (n, s, t) => (u(n, typeof s != "symbol" ? s + "" : s, t), t);
-import { autoUpdate as p, computePosition as c, shift as v, flip as m } from "@floating-ui/dom";
-import { hello as f, goodbye as b } from "hello-goodbye";
-const o = class o extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    e(this, "parent");
-    e(this, "tooltip");
-    e(this, "timeout");
-    e(this, "disabledObserver");
-    e(this, "showing", !1);
-    e(this, "cleanup");
-    e(this, "prevInnerHTML");
-    e(this, "focusKeyPressed", !1);
-    e(this, "onMouseEnter", () => {
-      window.matchMedia("(hover: hover) and (pointer: fine)").matches && this.afterDelay(this.show);
-    });
-    e(this, "onFocus", () => {
-      this.focusKeyPressed && this.show();
-    });
-    e(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
-    e(this, "onBlur", this.hide.bind(this));
-    e(this, "onKeyDown", (t) => {
-      this.isFocusTriggerKey(t.key) && (this.focusKeyPressed = !0), t.key === "Escape" && this.hide();
-    });
-    e(this, "onKeyUp", (t) => {
-      this.isFocusTriggerKey(t.key) && (this.focusKeyPressed = !1);
-    });
-  }
-  connectedCallback() {
-    this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("mouseleave", this.onMouseLeave), this.parent.addEventListener("blur", this.onBlur), this.parent.addEventListener("click", this.onBlur), this.disabledObserver = new MutationObserver((t) => {
-      t.forEach((i) => {
-        i.attributeName === "disabled" && this.hide();
-      });
-    }), this.disabledObserver.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("keyup", this.onKeyUp), document.addEventListener("scroll", this.onBlur);
-  }
-  disconnectedCallback() {
-    var t, i;
-    (t = this.cleanup) == null || t.call(this), this.tooltip && (this.tooltip.remove(), this.tooltip = void 0), this.parent && (this.parent.removeEventListener("mouseenter", this.onMouseEnter), this.parent.removeEventListener("focus", this.onFocus), this.parent.removeEventListener("mouseleave", this.onMouseLeave), this.parent.removeEventListener("blur", this.onBlur), this.parent.removeEventListener("click", this.onBlur), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keyup", this.onKeyUp), document.removeEventListener("scroll", this.onBlur), (i = this.disabledObserver) == null || i.disconnect(), clearTimeout(this.timeout);
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  isFocusTriggerKey(t) {
-    return t === "Tab" || t === "ArrowUp" || t === "ArrowDown" || t === "ArrowLeft" || t === "ArrowRight";
-  }
-  show() {
-    var i;
-    if (this.disabled)
-      return;
-    const t = this.createTooltip();
-    clearTimeout(this.timeout), this.showing || (t.hidden = !1, f(t), this.showing = !0), this.innerHTML !== this.prevInnerHTML && (this.prevInnerHTML = t.innerHTML = this.innerHTML), t.style.position = "absolute", (i = this.cleanup) == null || i.call(this), this.cleanup = p(
-      this.parent,
-      t,
-      () => c(this.parent, t, {
-        placement: this.getAttribute("placement") || o.placement,
-        middleware: [v(), m()]
-      }).then(({ x: h, y: a, placement: d }) => {
-        Object.assign(t.style, {
-          left: `${h}px`,
-          top: `${a}px`
-        }), t.dataset.placement = d;
-      })
-    ), this.dispatchEvent(new Event("open"));
-  }
-  hide() {
-    var t;
-    clearTimeout(this.timeout), (t = this.cleanup) == null || t.call(this), this.showing && (this.showing = !1, this.tooltip && b(this.tooltip).then(() => {
-      this.tooltip && (this.tooltip.hidden = !0);
-    }), this.dispatchEvent(new Event("close")));
-  }
-  afterDelay(t) {
-    clearTimeout(this.timeout);
-    const i = parseInt(this.getAttribute("delay") || "");
-    this.timeout = window.setTimeout(
-      t.bind(this),
-      isNaN(i) ? o.delay : i
-    );
-  }
-  createTooltip() {
-    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
-      "mouseleave",
-      this.afterDelay.bind(this, this.hide)
-    ), document.body.appendChild(this.tooltip)), this.tooltip.className = this.getAttribute("tooltip-class") || o.tooltipClass, this.tooltip;
-  }
-};
-e(o, "delay", 100), e(o, "placement", "top"), e(o, "tooltipClass", "tooltip");
-let r = o;
-export {
-  r as default
-};

package/dist/inclusive-elements11.js

@@ -1,6 +0,0 @@
-function n(t) {
-  return t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || t.button !== void 0 && t.button !== 0;
-}
-export {
-  n as shouldOpenInNewTab
-};

package/dist/inclusive-elements2.js

@@ -1,28 +0,0 @@
-var n = Object.defineProperty;
-var l = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var s = (r, e, t) => (l(r, typeof e != "symbol" ? e + "" : e, t), t);
-class a extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    s(this, "onToggle", (t) => {
-      const o = t.target;
-      o.open && this.querySelectorAll(
-        ":scope > :is(ui-disclosure, details)"
-      ).forEach((i) => {
-        i.toggleAttribute("open", i === o), this.required && i.toggleAttribute("disabled", i === o);
-      });
-    });
-  }
-  connectedCallback() {
-    this.addEventListener("toggle", this.onToggle, { capture: !0 });
-  }
-  disconnectedCallback() {
-    this.removeEventListener("toggle", this.onToggle, { capture: !0 });
-  }
-  get required() {
-    return this.hasAttribute("required");
-  }
-}
-export {
-  a as default
-};

package/dist/inclusive-elements3.js

@@ -1,71 +0,0 @@
-var d = Object.defineProperty;
-var u = (e, s, t) => s in e ? d(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var o = (e, s, t) => (u(e, typeof s != "symbol" ? s + "" : s, t), t);
-const r = class r extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    o(this, "timeouts", /* @__PURE__ */ new Map());
-    o(this, "index", 0);
-  }
-  connectedCallback() {
-    this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("aria-live") || this.setAttribute("aria-live", "polite"), this.hasAttribute("aria-relevant") || this.setAttribute("aria-relevant", "additions");
-    for (const t of this.children)
-      this.show(t);
-  }
-  show(t, i = {}) {
-    const h = i.key || t.dataset.key || String(this.index++);
-    this.dismiss(h), t.dataset.key = h, this.contains(t) || this.append(t);
-    const a = Number(
-      i.duration !== void 0 ? i.duration : t.dataset.duration || r.duration
-    );
-    return a > 0 && (this.startTimeout(t, a), t.addEventListener("mouseenter", this.clearTimeout.bind(this, t)), t.addEventListener("focusin", this.clearTimeout.bind(this, t)), t.addEventListener(
-      "mouseleave",
-      this.startTimeout.bind(this, t, a)
-    ), t.addEventListener(
-      "focusout",
-      this.startTimeout.bind(this, t, a)
-    )), h;
-  }
-  dismiss(t) {
-    if (typeof t == "string") {
-      this.querySelectorAll(
-        `[data-key="${t}"]`
-      ).forEach((i) => this.dismiss(i));
-      return;
-    }
-    t.remove(), this.clearTimeout(t);
-  }
-  clear() {
-    Array.from(this.children).forEach((t) => {
-      this.dismiss(t);
-    });
-  }
-  speak(t) {
-    const i = document.createElement("div");
-    Object.assign(i.style, {
-      clip: "rect(0 0 0 0)",
-      clipPath: "inset(50%)",
-      height: "1px",
-      overflow: "hidden",
-      position: "absolute",
-      whiteSpace: "nowrap",
-      width: "1px"
-    }), i.textContent = t, this.show(i);
-  }
-  startTimeout(t, i) {
-    this.clearTimeout(t), this.timeouts.set(
-      t,
-      window.setTimeout(() => {
-        this.dismiss(t);
-      }, i)
-    );
-  }
-  clearTimeout(t) {
-    this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
-  }
-};
-o(r, "duration", 1e4);
-let n = r;
-export {
-  n as default
-};

package/dist/inclusive-elements4.js

@@ -1,49 +0,0 @@
-var o = Object.defineProperty;
-var r = (n, e, t) => e in n ? o(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var i = (n, e, t) => (r(n, typeof e != "symbol" ? e + "" : e, t), t);
-import { cancel as h, hello as d, goodbye as a } from "hello-goodbye";
-import { shouldOpenInNewTab as l } from "./inclusive-elements11.js";
-class f extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    i(this, "onButtonClick", (t) => {
-      !l(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
-    });
-  }
-  static get observedAttributes() {
-    return ["open"];
-  }
-  connectedCallback() {
-    this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
-  }
-  disconnectedCallback() {
-    h(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
-  }
-  get open() {
-    return this.hasAttribute("open");
-  }
-  set open(t) {
-    t ? this.setAttribute("open", "") : this.removeAttribute("open");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  attributeChangedCallback(t, u, s) {
-    t === "open" && (s !== null ? this.wasOpened() : this.wasClosed());
-  }
-  wasOpened() {
-    this.content.hidden && (this.content.hidden = !1, d(this.content)), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("toggle"));
-  }
-  wasClosed() {
-    this.content.hidden || a(this.content).then(() => this.content.hidden = !0), this.button.setAttribute("aria-expanded", "false"), this.dispatchEvent(new Event("toggle"));
-  }
-  get button() {
-    return this.querySelector("button, [role=button]");
-  }
-  get content() {
-    return this.children[1];
-  }
-}
-export {
-  f as default
-};