@toyu-ui/elements 0.1.0

package/radio.js

@@ -0,0 +1,239 @@
+const a = new CSSStyleSheet();
+a.replaceSync(`
+  @layer ty.component-base {
+    :host {
+      display: inline-flex;
+      align-items: center;
+      color: var(--ty-radio-foreground, var(--ty-color-text, CanvasText));
+      font-family: var(--ty-font-family, inherit);
+      font-size: var(--ty-radio-font-size, var(--ty-control-font-size, 0.875rem));
+      line-height: var(--ty-radio-line-height, 1.25rem);
+      cursor: pointer;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    :host([disabled]),
+    :host([aria-disabled='true']) {
+      color: var(--ty-radio-disabled-foreground, var(--ty-color-disabled-text, GrayText));
+      cursor: not-allowed;
+    }
+
+    [part='root'] {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ty-radio-gap, var(--ty-control-gap, 0.5rem));
+      cursor: inherit;
+    }
+
+    [part='root'][data-label-position='below'] {
+      flex-direction: column;
+      align-items: center;
+      gap: var(--ty-radio-gap-below, var(--ty-space-1, 0.25rem));
+      text-align: center;
+    }
+
+    [part='indicator'] {
+      position: relative;
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [part='input'] {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    [part='circle'] {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--ty-radio-size, 1rem);
+      block-size: var(--ty-radio-size, 1rem);
+      border:
+        var(--ty-radio-border-width, var(--ty-control-border-width, 1px))
+        solid
+        var(--ty-radio-border-color, var(--ty-color-border-strong, ButtonText));
+      border-radius: var(--ty-radius-pill, 9999px);
+      background: var(--ty-radio-background, var(--ty-color-surface, Canvas));
+      transition:
+        background-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
+        border-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
+        box-shadow var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease);
+    }
+
+    :host(:hover:not([disabled]):not([aria-disabled='true'])) [part='circle'],
+    :host([checked]) [part='circle'] {
+      border-color: var(--ty-radio-checked-color, var(--ty-color-accent, Highlight));
+    }
+
+    :host([checked]) [part='circle'] {
+      background: var(--ty-radio-checked-color, var(--ty-color-accent, Highlight));
+    }
+
+    [part='dot'] {
+      inline-size: var(--ty-radio-dot-size, 0.5rem);
+      block-size: var(--ty-radio-dot-size, 0.5rem);
+      border-radius: var(--ty-radius-pill, 9999px);
+      background: var(--ty-radio-checked-dot-color, var(--ty-color-on-accent, HighlightText));
+      opacity: 0;
+      transition: opacity var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease);
+    }
+
+    :host([checked]) [part='dot'] {
+      opacity: 1;
+    }
+
+    [part='label'] {
+      min-inline-size: 0;
+    }
+
+    :host(:focus-within) [part='circle'] {
+      outline: var(--ty-focus-width, 2px) solid var(--ty-focus-color, Highlight);
+      outline-offset: var(--ty-focus-offset, 2px);
+      box-shadow: 0 0 0 2px var(--ty-focus-inner-color, Canvas);
+    }
+
+    @media (forced-colors: active) {
+      [part='circle'] {
+        forced-color-adjust: none;
+        background: ButtonFace;
+        border-color: ButtonText;
+      }
+
+      :host([checked]) [part='circle'] {
+        background: Highlight;
+        border-color: Highlight;
+      }
+
+      [part='dot'] {
+        background: HighlightText;
+      }
+
+      :host([disabled]),
+      :host([aria-disabled='true']) {
+        color: GrayText;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [part='circle'],
+      [part='dot'] {
+        transition-duration: 0ms;
+      }
+    }
+  }
+`);
+const s = document.createElement("template");
+s.innerHTML = `
+  <label part="root">
+    <span part="indicator">
+      <input part="input" type="radio" tabindex="-1" />
+      <span part="circle" aria-hidden="true"><span part="dot"></span></span>
+    </span>
+    <span part="label"><slot></slot></span>
+  </label>
+`;
+function o(r, t) {
+  return r.hasAttribute(t);
+}
+function n(r) {
+  return r === "below" ? "below" : "after";
+}
+class l extends HTMLElement {
+  static observedAttributes = [
+    "checked",
+    "disabled",
+    "label-position",
+    "name",
+    "required",
+    "tabindex",
+    "value"
+  ];
+  #t;
+  #o;
+  #e = "";
+  #i = "";
+  constructor() {
+    super();
+    const t = this.attachShadow({ mode: "open", delegatesFocus: !0 });
+    t.adoptedStyleSheets = [a], t.append(s.content.cloneNode(!0));
+    const e = t.querySelector("input"), i = t.querySelector('[part="root"]');
+    if (!(e instanceof HTMLInputElement) || !(i instanceof HTMLElement))
+      throw new Error("TyuiRadioElement template is missing expected controls.");
+    this.#t = e, this.#o = i, this.#t.addEventListener("change", this.#n);
+  }
+  get checked() {
+    return o(this, "checked");
+  }
+  set checked(t) {
+    this.toggleAttribute("checked", t);
+  }
+  get disabled() {
+    return o(this, "disabled");
+  }
+  set disabled(t) {
+    this.toggleAttribute("disabled", t);
+  }
+  get labelPosition() {
+    return n(this.getAttribute("label-position"));
+  }
+  set labelPosition(t) {
+    this.setAttribute("label-position", t);
+  }
+  get name() {
+    return this.#e;
+  }
+  set name(t) {
+    this.#e = String(t), this.#e ? this.setAttribute("name", this.#e) : this.removeAttribute("name");
+  }
+  get required() {
+    return o(this, "required");
+  }
+  set required(t) {
+    this.toggleAttribute("required", t);
+  }
+  get value() {
+    return this.#i;
+  }
+  set value(t) {
+    this.#i = String(t), this.setAttribute("value", this.#i);
+  }
+  connectedCallback() {
+    this.#r("checked"), this.#r("disabled"), this.#r("labelPosition"), this.#r("name"), this.#r("required"), this.#r("value"), this.#s(), !this.hasAttribute("tabindex") && this.tabIndex < 0 && (this.tabIndex = -1), this.#a();
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "name" ? this.#e = i ?? "" : t === "value" && (this.#i = i ?? ""), this.#a();
+  }
+  focus(t) {
+    this.#t.focus(t);
+  }
+  #s() {
+    this.#e = this.getAttribute("name") ?? this.#e, this.#i = this.getAttribute("value") ?? this.#i;
+  }
+  #r(t) {
+    if (!Object.prototype.hasOwnProperty.call(this, t)) return;
+    const e = this[t];
+    delete this[t], this[t] = e;
+  }
+  #n = (t) => {
+    t.stopPropagation(), this.checked = this.#t.checked;
+  };
+  #a() {
+    this.disabled && this.tabIndex !== -1 && (this.tabIndex = -1), this.#t.checked = this.checked, this.#t.disabled = this.disabled, this.#t.required = this.required, this.#t.name = this.#e, this.#t.value = this.#i, this.#t.tabIndex = !this.disabled && this.tabIndex === 0 ? 0 : -1, this.#o.dataset.labelPosition = this.labelPosition;
+  }
+}
+export {
+  l as TyuiRadioElement
+};

package/sidebar/tyui-sidebar.d.ts

@@ -0,0 +1,17 @@
+export type TyuiSidebarSide = 'start' | 'end';
+export declare class TyuiSidebarElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get side(): TyuiSidebarSide;
+    set side(value: TyuiSidebarSide);
+    get sideSize(): string;
+    set sideSize(value: string);
+    get contentMin(): string;
+    set contentMin(value: string);
+    get gap(): string;
+    set gap(value: string);
+    get noStretch(): boolean;
+    set noStretch(value: boolean);
+}

package/sidebar.d.ts

@@ -0,0 +1 @@
+export * from './sidebar/tyui-sidebar';

package/sidebar.js

@@ -0,0 +1,53 @@
+import { i as n, n as r, s as e, a as s, l as i, b as a } from "./layout-helpers-C2WgKm6F.js";
+const h = ["start", "end"];
+class l extends HTMLElement {
+  static observedAttributes = ["content-min", "gap", "no-stretch", "side", "side-size"];
+  connectedCallback() {
+    n(), this.#t(), this.#e();
+  }
+  attributeChangedCallback() {
+    this.#t();
+  }
+  get side() {
+    return r(this.getAttribute("side"), h, "start");
+  }
+  set side(t) {
+    e(this, "side", t);
+  }
+  get sideSize() {
+    return this.getAttribute("side-size") ?? "18rem";
+  }
+  set sideSize(t) {
+    e(this, "side-size", t);
+  }
+  get contentMin() {
+    return this.getAttribute("content-min") ?? "50%";
+  }
+  set contentMin(t) {
+    e(this, "content-min", t);
+  }
+  get gap() {
+    return this.getAttribute("gap") ?? "3";
+  }
+  set gap(t) {
+    e(this, "gap", t);
+  }
+  get noStretch() {
+    return this.hasAttribute("no-stretch");
+  }
+  set noStretch(t) {
+    e(this, "no-stretch", t);
+  }
+  #t() {
+    s(this, "--ty-sidebar-direction", this.side === "end" ? "row-reverse" : "row"), s(this, "--ty-sidebar-size", i(this.sideSize, "18rem")), s(
+      this,
+      "--ty-sidebar-content-min-inline-size",
+      i(this.contentMin, "50%")
+    ), s(this, "--ty-sidebar-gap", a(this.getAttribute("gap"), "3")), s(this, "--ty-sidebar-align", this.noStretch ? "flex-start" : "stretch");
+  }
+  #e() {
+  }
+}
+export {
+  l as TyuiSidebarElement
+};

package/skills/button/SKILL.md

@@ -0,0 +1,49 @@
+---
+name: button
+description: Use and integrate the tyui-button custom element correctly, including registration, intent, states, events, and anti-patterns.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/button/tyui-button.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-button
+
+## Intent
+
+Use `tyui-button` to trigger an immediate in-page action. Use a link for navigation.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`. Do not copy
+attribute or event types from memory.
+
+## Registration
+
+```ts
+import { defineTyuiButton } from '@toyu-ui/define/button';
+
+defineTyuiButton();
+```
+
+## Correct Usage
+
+```html
+<tyui-button appearance="primary">Save</tyui-button>
+```
+
+## Selection Guidance
+
+- Use one primary button for the dominant local action.
+- Use default or secondary styling for ordinary commands.
+- Use subtle or transparent styling for dense toolbars and repeated row actions.
+- Icon-only buttons must have an accessible name.
+
+## Anti-Patterns
+
+- Do not use button activation for navigation.
+- Do not place focusable controls inside the button label.
+- Do not restyle private shadow DOM; use public tokens, attributes, and parts.

package/skills/center/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: center
+description: Use tyui-center to constrain readable content to a centered measure with tokenized gutters.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/center/tyui-center.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-center
+
+## Intent
+
+Use `tyui-center` to constrain readable content to a maximum inline measure and center it inside the available space.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-center measure="60ch" gutter="page">
+  <tyui-flex direction="column" gap="3">
+    <h1>Profile</h1>
+    <tyui-input label="Display name"></tyui-input>
+  </tyui-flex>
+</tyui-center>
+```
+
+## Selection Guidance
+
+- Use Center for prose, forms, narrow settings pages, and focused empty states.
+- Use Container for page or section rails.
+- Use Grid or Sidebar when the content has multiple peer regions.
+- Use the `intrinsic` attribute when children should also center as a column.
+
+## Anti-Patterns
+
+- Do not wrap every individual control in Center.
+- Do not use Center as a card or surface.
+- Do not nest Center repeatedly without a specific measure change.

package/skills/checkbox/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: checkbox
+description: Use and integrate the tyui-checkbox custom element for independent boolean choices and avoid radio or command-button misuse.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/checkbox/tyui-checkbox.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-checkbox
+
+## Intent
+
+Use `tyui-checkbox` for an independent yes/no or on/off choice.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-checkbox name="notifications" value="enabled">Email notifications</tyui-checkbox>
+```
+
+## Selection Guidance
+
+- Use checkbox for independent choices.
+- Use radio group when exactly one option must be chosen from a set.
+- Use a switch component, when available, for immediate setting toggles.
+
+## Anti-Patterns
+
+- Do not use checkbox as a command button.
+- Do not use checkbox for mutually exclusive options.
+- Do not hide the label without providing an accessible name.

package/skills/cluster/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: cluster
+description: Use tyui-cluster for compact wrapping rows of intrinsic items such as actions, tags, chips, and toolbar-like groups.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/cluster/tyui-cluster.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-cluster
+
+## Intent
+
+Use `tyui-cluster` for compact groups of peer items that keep their intrinsic size and wrap to new lines when space runs out.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-cluster gap="2">
+  <tyui-button appearance="primary">Save</tyui-button>
+  <tyui-button>Cancel</tyui-button>
+  <tyui-button appearance="subtle">Reset</tyui-button>
+</tyui-cluster>
+```
+
+## Selection Guidance
+
+- Use Cluster for action rows, tags, chips, checkbox rows, radio rows, and short metadata groups.
+- Use Flex when one-axis distribution, direction, or optional wrapping matters more than wrap-first behavior.
+- Use Grid when children should form equal responsive tracks.
+- Preserve list markup when the items are a semantic list.
+
+## Anti-Patterns
+
+- Do not use Cluster for table rows or data grids.
+- Do not remove list semantics just to get a wrapping row.
+- Do not make Cluster responsible for toolbar keyboard behavior.

package/skills/components/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: components
+description: Load the TYUI component guidance set for choosing and using shipped custom elements and layout primitives.
+license: Apache-2.0
+requires:
+  - '@toyu-ui/elements#button'
+  - '@toyu-ui/elements#input'
+  - '@toyu-ui/elements#checkbox'
+  - '@toyu-ui/elements#radio'
+  - '@toyu-ui/elements#radio-group'
+  - '@toyu-ui/elements#flex'
+  - '@toyu-ui/elements#cluster'
+  - '@toyu-ui/elements#grid'
+  - '@toyu-ui/elements#center'
+  - '@toyu-ui/elements#container'
+  - '@toyu-ui/elements#frame'
+  - '@toyu-ui/elements#sidebar'
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: skills/components/SKILL.md
+  manifest: ../../custom-elements.json
+---
+
+# TYUI components
+
+## Intent
+
+Use `@toyu-ui/elements#components` when an agent or developer needs the complete shipped TYUI component guidance set before choosing controls or layout primitives.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`. This aggregate skill only gathers intent and selection guidance; individual component skills remain the source for component-specific advice.
+
+## Correct Usage
+
+```sh
+yarn dlx @tanstack/intent@latest load @toyu-ui/elements#components
+```
+
+## Selection Guidance
+
+- Load this skill at the start of a TYUI UI task when the component choice is not known yet.
+- Use the required component skills for exact intent, selection guidance, anti-patterns, and usage examples.
+- Use `@toyu-ui/solid#setup` as the companion setup skill for Solid apps.
+- Use `custom-elements.json` for exact attributes, events, slots, CSS parts, and CSS custom properties.
+
+## Anti-Patterns
+
+- Do not duplicate component selection rules in app docs when this aggregate skill can load the versioned component guidance.
+- Do not treat this skill as an API reference; use the manifest for exact API facts.
+- Do not load every component at runtime just because every component skill was loaded for agent guidance.

package/skills/container/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: container
+description: Use tyui-container to constrain page or section width with named rails and tokenized gutters.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/container/tyui-container.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-container
+
+## Intent
+
+Use `tyui-container` to create a page or section rail that controls maximum inline size and horizontal gutter.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-container size="wide" gutter="page">
+  <tyui-grid min-item-size="18rem" gap="4"></tyui-grid>
+</tyui-container>
+```
+
+## Selection Guidance
+
+- Use Container for page shells, section rails, dashboard content bounds, and full-width page regions.
+- Use Center for readable single-column content.
+- Use Frame for aspect-ratio media.
+- Use `bleed` only when content intentionally reaches the container edge.
+
+## Anti-Patterns
+
+- Do not use Container to set a button or input width.
+- Do not use card padding as page gutters.
+- Do not nest containers without a named rail change.

package/skills/flex/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: flex
+description: Use tyui-flex for one-axis sibling composition with tokenized direction, alignment, wrapping, and gap.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/flex/tyui-flex.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-flex
+
+## Intent
+
+Use `tyui-flex` when sibling content follows one axis and the parent owns direction, wrapping, alignment, justification, and gap.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-flex direction="column" gap="3">
+  <h2>Settings</h2>
+  <tyui-input label="Name"></tyui-input>
+  <tyui-button appearance="primary">Save</tyui-button>
+</tyui-flex>
+```
+
+## Selection Guidance
+
+- Use Flex for row or column composition of siblings.
+- Use Flex when the design may switch direction or wrapping through attributes.
+- Use Cluster for wrap-first action rows, chips, and tags.
+- Use Grid for repeated peer cards or panels.
+- Use native block flow for simple prose.
+
+## Anti-Patterns
+
+- Do not use Flex to create data tables or two-dimensional card grids.
+- Do not force every child to `flex: 1` unless equal distribution is the container intent.
+- Do not use visual reverse direction to fix incorrect DOM reading order.

package/skills/frame/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: frame
+description: Use tyui-frame to reserve aspect ratio for media, previews, charts, thumbnails, and embeds.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/frame/tyui-frame.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-frame
+
+## Intent
+
+Use `tyui-frame` to reserve a stable aspect ratio for one primary child while the parent owns width.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-frame ratio="16/9" fit="cover">
+  <img src="/preview.jpg" alt="Project preview" />
+</tyui-frame>
+```
+
+## Selection Guidance
+
+- Use Frame for images, video, canvas, iframe embeds, charts, thumbnails, and preview surfaces.
+- Use natural block flow for text-heavy cards.
+- Use Grid for collections of framed peers.
+- Apply `fit` and `position` only when the direct child is replaced media.
+
+## Anti-Patterns
+
+- Do not place full forms or complex scrollable interactive regions inside Frame.
+- Do not use Frame to crop text cards.
+- Do not expect `object-fit` to affect non-replaced elements.