@toyu-ui/elements 0.1.0

package/skills/grid/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: grid
+description: Use tyui-grid for responsive peer-card and panel collections that auto-fit columns from container width.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/grid/tyui-grid.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-grid
+
+## Intent
+
+Use `tyui-grid` for repeated peer items that should form responsive columns from the container width and a minimum item size.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-grid min-item-size="14rem" gap="4">
+  <section>Alpha</section>
+  <section>Beta</section>
+  <section>Gamma</section>
+</tyui-grid>
+```
+
+## Selection Guidance
+
+- Use Grid for cards, tiles, metric panels, image groups, and settings panels.
+- Use Cluster for compact wrapping action rows and tags.
+- Use Flex for one-axis composition.
+- Use table or data-grid components for tabular data with row and column relationships.
+
+## Anti-Patterns
+
+- Do not use Grid for data tables or keyboard-navigable ARIA grids.
+- Do not use dense visual reordering when DOM order must match reading order.
+- Do not calculate columns in JavaScript.

package/skills/input/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: input
+description: Use and integrate the tyui-input custom element for accessible single-line text entry without confusing base component features with design-system variants.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/input/tyui-input.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-input
+
+## Intent
+
+Use `tyui-input` for short single-line text entry such as names, email addresses,
+search terms, telephone numbers, URLs, passwords, and numeric text.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Registration
+
+```ts
+import { defineTyuiInput } from '@toyu-ui/define/input';
+
+defineTyuiInput();
+```
+
+## Correct Usage
+
+```html
+<label for="email">Email</label>
+<tyui-input id="email" name="email" type="email" required></tyui-input>
+```
+
+## Design-System Variants
+
+The base component owns neutral appearances only. Product or design-system
+layers may add visual variants through public tokens, host classes, and
+documented parts. For example, Fluent's focused underline is a Fluent design
+layer feature, not a base `appearance` value.
+
+## Selection Guidance
+
+- Use Input for short single-line text entry.
+- Use a textarea component, when available, for multiline text.
+- Use Select, Combobox, RadioGroup, or Checkbox when the user chooses from known options.
+- Use Field or a visible native label to provide the accessible label.
+- Keep design-system-specific visuals in the design layer rather than adding base appearances.
+
+## Anti-Patterns
+
+- Do not rely on placeholder as the only label.
+- Do not put buttons, links, or other focusable controls in content slots.
+- Do not invent unsupported input appearances; use design-layer classes for
+  product-specific visuals.

package/skills/radio/SKILL.md

@@ -0,0 +1,49 @@
+---
+name: radio
+description: Use tyui-radio only as a radio option coordinated by tyui-radio-group, with native input focus and group-owned selection.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/radio/tyui-radio.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-radio
+
+## Intent
+
+Use `tyui-radio` to represent one option inside `tyui-radio-group`.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-radio-group label="Plan" name="plan" value="team">
+  <tyui-radio value="personal">Personal</tyui-radio>
+  <tyui-radio value="team">Team</tyui-radio>
+</tyui-radio-group>
+```
+
+## Focus And Keyboard
+
+`tyui-radio-group` owns value and roving tabindex. The active radio mirrors its
+tab stop to the native shadow input so real browser `Tab` enters the group and
+arrow keys move focus and selection.
+
+## Selection Guidance
+
+- Use Radio only as an option inside RadioGroup.
+- Use RadioGroup for the field label, name, value ownership, and keyboard coordination.
+- Use Checkbox for unrelated independent boolean choices.
+- Use Select or Combobox for larger option sets.
+
+## Anti-Patterns
+
+- Do not use standalone radio buttons for unrelated boolean choices.
+- Do not manage checked state independently when inside a group.
+- Do not replace native radio keyboard behavior with app-level key handlers.

package/skills/radio-group/SKILL.md

@@ -0,0 +1,51 @@
+---
+name: radio-group
+description: Use and integrate tyui-radio-group for mutually exclusive choices, including value ownership, keyboard behavior, and form participation.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/radio-group/tyui-radio-group.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-radio-group
+
+## Intent
+
+Use `tyui-radio-group` when the user must choose exactly one option from a small
+set.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-radio-group label="Notification frequency" name="frequency" required>
+  <tyui-radio value="daily">Daily</tyui-radio>
+  <tyui-radio value="weekly">Weekly</tyui-radio>
+  <tyui-radio value="never">Never</tyui-radio>
+</tyui-radio-group>
+```
+
+## Keyboard Contract
+
+- `Tab` enters the checked enabled radio, or the first enabled radio.
+- Arrow keys move focus and selection, wrapping and skipping disabled radios.
+- `Space` selects the focused radio.
+
+## Selection Guidance
+
+- Use RadioGroup when the user chooses exactly one option from a small set.
+- Use Checkbox for independent boolean choices or multi-select checklists.
+- Use Select or Combobox for long option lists, async options, or compact forms.
+- Keep only `tyui-radio` choices in the default slot.
+
+## Anti-Patterns
+
+- Do not place non-radio interactive elements in the default slot.
+- Do not use radio group for multi-select choices.
+- Do not create custom roving tabindex outside the group.

package/skills/sidebar/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: sidebar
+description: Use tyui-sidebar for two-region fixed-plus-fluid layouts such as filters beside results or navigation beside content.
+license: Apache-2.0
+metadata:
+  type: library
+  library: '@toyu-ui/elements'
+  library_version: '0.1.0'
+  source: src/sidebar/tyui-sidebar.ts
+  manifest: ../../custom-elements.json
+---
+
+# tyui-sidebar
+
+## Intent
+
+Use `tyui-sidebar` for a two-region layout where one child has a preferred fixed size and the other child takes remaining space.
+
+## API Source
+
+Authoritative API facts live in `@toyu-ui/elements/custom-elements.json`.
+
+## Correct Usage
+
+```html
+<tyui-sidebar side-size="16rem" content-min="55%" gap="4">
+  <aside>Filters</aside>
+  <main>Results</main>
+</tyui-sidebar>
+```
+
+## Selection Guidance
+
+- Use Sidebar for filters beside results, navigation beside content, metadata beside detail, or media beside body.
+- Use Grid when regions are peer cards or equal columns.
+- Use Container for page rails.
+- Use dialog or drawer components for overlay side panels.
+
+## Anti-Patterns
+
+- Do not add more than two direct children.
+- Do not use Sidebar for overlay drawer behavior.
+- Do not use `side="end"` to fix an incorrect DOM reading order.