@adia-ai/web-components 0.6.6 → 0.6.7

package/components/stack/stack.examples.md

@@ -0,0 +1,10 @@
+# stack — Examples
+
+## Basic usage
+
+```html
+<stack-ui>
+  <image-ui src="/avatar.jpg"></image-ui>
+  <badge-ui text="3" variant="solid" color="danger"></badge-ui>
+</stack-ui>
+```

package/components/stat/stat.examples.md

@@ -0,0 +1,19 @@
+# stat — Examples
+
+## Basic
+
+```html
+<stat-ui value="1,234" label="Total Users"></stat-ui>
+```
+
+## value
+
+```html
+<stat-ui value="1,234" label="Users"></stat-ui>
+```
+
+## label
+
+```html
+<stat-ui value="847" label="Active Users"></stat-ui>
+```

package/components/step-progress/step-progress.examples.md

@@ -0,0 +1,19 @@
+# step-progress — Examples
+
+## value
+
+```html
+<step-progress-ui value="0" total="10" caption="Not started"></step-progress-ui>
+```
+
+## total
+
+```html
+<step-progress-ui value="3" total="3" caption="Short flow"></step-progress-ui>
+```
+
+## caption
+
+```html
+<step-progress-ui value="2" total="5"></step-progress-ui>
+```

package/components/stepper/stepper.examples.md

@@ -0,0 +1,37 @@
+# stepper — Examples
+
+## Horizontal (default)
+
+```html
+<stepper-ui step="2">
+  <stepper-item-ui text="Account"></stepper-item-ui>
+  <stepper-item-ui text="Details"></stepper-item-ui>
+  <stepper-item-ui text="Review"></stepper-item-ui>
+  <stepper-item-ui text="Confirm"></stepper-item-ui>
+</stepper-ui>
+```
+
+## Vertical
+
+```html
+<stepper-ui orientation="vertical" step="1">
+  <stepper-item-ui text="Select plan" description="Choose your subscription"></stepper-item-ui>
+  <stepper-item-ui text="Payment" description="Enter payment details"></stepper-item-ui>
+  <stepper-item-ui text="Confirmation" description="Review and submit"></stepper-item-ui>
+</stepper-ui>
+```
+
+## Interactive
+
+```html
+<stepper-ui id="stepper-interactive" step="1">
+  <stepper-item-ui text="Step 1"></stepper-item-ui>
+  <stepper-item-ui text="Step 2"></stepper-item-ui>
+  <stepper-item-ui text="Step 3"></stepper-item-ui>
+  <stepper-item-ui text="Step 4"></stepper-item-ui>
+</stepper-ui>
+<div style="display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);">
+  <button-ui id="stepper-prev" text="Previous" variant="outline"></button-ui>
+  <button-ui id="stepper-next" text="Next" variant="primary"></button-ui>
+</div>
+```

package/components/stream/stream.examples.md

@@ -0,0 +1,19 @@
+# stream — Examples
+
+## basic
+
+```html
+<stream-ui>This is static content inside a stream element. Assign an AsyncIterable to the .tokens property to begin streaming.</stream-ui>
+```
+
+## hide-cursor
+
+```html
+<stream-ui streaming>Streaming with cursor...</stream-ui>
+```
+
+## pace
+
+```html
+<stream-ui>Pace is set programmatically when assigning .tokens. A value of 0 renders tokens immediately; higher values create a typewriter effect.</stream-ui>
+```

package/components/swatch/swatch.examples.md

@@ -0,0 +1,23 @@
+# swatch — Examples
+
+## shapes
+
+```html
+<swatch-ui shape="dot" color="var(--a-data-0)" label="Revenue"></swatch-ui>
+```
+
+## sizes
+
+```html
+<row-ui gap="3" align="center">
+  <swatch-ui shape="dot" size="sm" color="var(--a-data-0)" label="sm"></swatch-ui>
+  <swatch-ui shape="dot" size="md" color="var(--a-data-0)" label="md"></swatch-ui>
+  <swatch-ui shape="dot" size="lg" color="var(--a-data-0)" label="lg"></swatch-ui>
+</row-ui>
+```
+
+## composition — chart-legend-ui
+
+```html
+<chart-legend-ui shape="dot" position="bottom" id="demo-legend-dot"></chart-legend-ui>
+```

package/components/swiper/swiper.examples.md

@@ -0,0 +1,139 @@
+# swiper — Examples
+
+## basic
+
+```html
+<swiper-ui aria-label="Product gallery">
+  <card-ui variant="outlined">
+    <img src="https://picsum.photos/seed/swiper1/800/360" alt="Mountain landscape" style="width:100%; height:200px; object-fit:cover;">
+    <section>
+      <col-ui gap="1">
+        <text-ui strong>Mountain Retreat</text-ui>
+        <text-ui color="subtle">Escape to the peaks with panoramic alpine views and fresh mountain air.</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <img src="https://picsum.photos/seed/swiper2/800/360" alt="Ocean sunset" style="width:100%; height:200px; object-fit:cover;">
+    <section>
+      <col-ui gap="1">
+        <text-ui strong>Coastal Paradise</text-ui>
+        <text-ui color="subtle">White sand beaches, turquoise waters, and stunning sunsets every evening.</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <img src="https://picsum.photos/seed/swiper3/800/360" alt="Forest path" style="width:100%; height:200px; object-fit:cover;">
+    <section>
+      <col-ui gap="1">
+        <text-ui strong>Forest Lodge</text-ui>
+        <text-ui color="subtle">Secluded cabins surrounded by ancient redwoods and winding trails.</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <img src="https://picsum.photos/seed/swiper4/800/360" alt="City skyline" style="width:100%; height:200px; object-fit:cover;">
+    <section>
+      <col-ui gap="1">
+        <text-ui strong>Urban Explorer</text-ui>
+        <text-ui color="subtle">Boutique hotels in the heart of the city with rooftop skyline views.</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+</swiper-ui>
+```
+
+## slides-per-view
+
+```html
+<swiper-ui slides-per-view="3" gap="4" aria-label="Feature cards">
+  <card-ui variant="outlined">
+    <section>
+      <col-ui gap="2">
+        <icon-ui name="lightning" color="primary"></icon-ui>
+        <text-ui strong>Fast</text-ui>
+        <text-ui color="subtle">Sub-ms renders</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <section>
+      <col-ui gap="2">
+        <icon-ui name="paint-brush" color="accent"></icon-ui>
+        <text-ui strong>Themeable</text-ui>
+        <text-ui color="subtle">Design tokens</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <section>
+      <col-ui gap="2">
+        <icon-ui name="wheelchair" color="success"></icon-ui>
+        <text-ui strong>Accessible</text-ui>
+        <text-ui color="subtle">ARIA built-in</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <section>
+      <col-ui gap="2">
+        <icon-ui name="code" color="warning"></icon-ui>
+        <text-ui strong>Simple</text-ui>
+        <text-ui color="subtle">Light DOM</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui variant="outlined">
+    <section>
+      <col-ui gap="2">
+        <icon-ui name="devices" color="danger"></icon-ui>
+        <text-ui strong>Responsive</text-ui>
+        <text-ui color="subtle">Container queries</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+</swiper-ui>
+```
+
+## peek
+
+```html
+<swiper-ui slides-per-view="2" peek gap="4" aria-label="Peek demo">
+  <card-ui>
+    <section>
+      <col-ui gap="2" align="center">
+        <avatar-ui text="Jordan Lee" size="lg"></avatar-ui>
+        <text-ui strong>Jordan Lee</text-ui>
+        <text-ui color="subtle">Engineer</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <col-ui gap="2" align="center">
+        <avatar-ui text="Emma Davis" size="lg"></avatar-ui>
+        <text-ui strong>Emma Davis</text-ui>
+        <text-ui color="subtle">Designer</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <col-ui gap="2" align="center">
+        <avatar-ui text="Tom Wright" size="lg"></avatar-ui>
+        <text-ui strong>Tom Wright</text-ui>
+        <text-ui color="subtle">DevOps</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <col-ui gap="2" align="center">
+        <avatar-ui text="Lisa Chang" size="lg"></avatar-ui>
+        <text-ui strong>Lisa Chang</text-ui>
+        <text-ui color="subtle">Staff Eng</text-ui>
+      </col-ui>
+    </section>
+  </card-ui>
+</swiper-ui>
+```

package/components/switch/switch.examples.md

@@ -0,0 +1,19 @@
+# switch — Examples
+
+## checked
+
+```html
+<switch-ui label="Off"></switch-ui>
+```
+
+## size
+
+```html
+<switch-ui label="Small" size="sm" checked></switch-ui>
+```
+
+## disabled
+
+```html
+<switch-ui label="Disabled Off" disabled></switch-ui>
+```

package/components/table/table.examples.md

@@ -0,0 +1,19 @@
+# table — Examples
+
+## sortable
+
+```html
+<table-ui id="api-sortable" sortable></table-ui>
+```
+
+## selectable
+
+```html
+<table-ui id="api-selectable" selectable></table-ui>
+```
+
+## expandable
+
+```html
+<table-ui id="api-expandable" expandable></table-ui>
+```

package/components/table-toolbar/table-toolbar.examples.md

@@ -0,0 +1,12 @@
+# table-toolbar — Examples
+
+## Wiring
+
+```html
+<table-toolbar-ui for="members" text="All employees" count="32"></table-toolbar-ui>
+<card-ui>
+  <section-ui bleed>
+    <table-ui id="members" sortable raw>…</table-ui>
+  </section-ui>
+</card-ui>
+```

package/components/tabs/tabs.examples.md

@@ -0,0 +1,49 @@
+# tabs — Examples
+
+## basic
+
+```html
+<tabs-ui value="overview">
+  <tab-ui value="overview" text="Overview">
+    <p>This is the overview panel. It provides a high-level summary of the feature.</p>
+  </tab-ui>
+  <tab-ui value="details" text="Details">
+    <p>This panel contains detailed specifications and technical information.</p>
+  </tab-ui>
+  <tab-ui value="changelog" text="Changelog">
+    <p>Version history and recent changes are listed here.</p>
+  </tab-ui>
+</tabs-ui>
+```
+
+## with icons
+
+```html
+<tabs-ui value="profile">
+  <tab-ui value="profile" text="Profile" icon="user">
+    <p>Edit your profile information, display name, and avatar.</p>
+  </tab-ui>
+  <tab-ui value="settings" text="Settings" icon="gear">
+    <p>Configure your account preferences, notifications, and privacy.</p>
+  </tab-ui>
+  <tab-ui value="billing" text="Billing" icon="credit-card">
+    <p>Manage your subscription, payment methods, and invoices.</p>
+  </tab-ui>
+</tabs-ui>
+```
+
+## disabled tab
+
+```html
+<tabs-ui value="active">
+  <tab-ui value="active" text="Active">
+    <p>This tab is active and selectable.</p>
+  </tab-ui>
+  <tab-ui value="also-active" text="Also Active">
+    <p>This tab is also selectable.</p>
+  </tab-ui>
+  <tab-ui value="locked" text="Locked" disabled>
+    <p>This content is locked.</p>
+  </tab-ui>
+</tabs-ui>
+```

package/components/tag/tag.examples.md

@@ -0,0 +1,19 @@
+# tag — Examples
+
+## variant
+
+```html
+<tag-ui text="Default"></tag-ui>
+```
+
+## size
+
+```html
+<tag-ui text="Small" size="sm"></tag-ui>
+```
+
+## removable
+
+```html
+<tag-ui text="Removable" removable></tag-ui>
+```

package/components/text/text.examples.md

@@ -0,0 +1,19 @@
+# text — Examples
+
+## Type Scale
+
+```html
+<text-ui variant="kicker">Kicker — Eyebrow / Overline</text-ui>
+```
+
+## Supplementary Type Scale
+
+```html
+<text-ui variant="subsection">Subsection — a sub-grouping inside a heading section</text-ui>
+```
+
+## Page Context
+
+```html
+<text-ui variant="kicker">Getting Started</text-ui>
+```

package/components/textarea/textarea.examples.md

@@ -0,0 +1,23 @@
+# textarea — Examples
+
+## label
+
+```html
+<field-ui label="Description">
+  <textarea-ui placeholder="Enter a description..."></textarea-ui>
+</field-ui>
+```
+
+## placeholder
+
+```html
+<textarea-ui placeholder="Write your message here..."></textarea-ui>
+```
+
+## rows
+
+```html
+<field-ui label="Compact (2 rows)">
+  <textarea-ui placeholder="Short input..." rows="2"></textarea-ui>
+</field-ui>
+```

package/components/timeline/timeline.examples.md

@@ -0,0 +1,35 @@
+# timeline — Examples
+
+## Vertical Timeline
+
+```html
+<timeline-ui>
+  <timeline-item-ui text="Order placed" time="2h ago" status="completed"></timeline-item-ui>
+  <timeline-item-ui text="Payment confirmed" time="1h ago" status="completed"></timeline-item-ui>
+  <timeline-item-ui text="Processing" status="active"></timeline-item-ui>
+  <timeline-item-ui text="Shipped"></timeline-item-ui>
+  <timeline-item-ui text="Delivered"></timeline-item-ui>
+</timeline-ui>
+```
+
+## With Icons
+
+```html
+<timeline-ui>
+  <timeline-item-ui text="Created" description="Issue opened" icon="plus" status="completed"></timeline-item-ui>
+  <timeline-item-ui text="In Review" description="PR submitted" icon="eye" status="active"></timeline-item-ui>
+  <timeline-item-ui text="Merged" icon="git-merge"></timeline-item-ui>
+  <timeline-item-ui text="Deployed" icon="rocket"></timeline-item-ui>
+</timeline-ui>
+```
+
+## Horizontal
+
+```html
+<timeline-ui orientation="horizontal">
+  <timeline-item-ui text="Draft" status="completed"></timeline-item-ui>
+  <timeline-item-ui text="Review" status="active"></timeline-item-ui>
+  <timeline-item-ui text="Approved"></timeline-item-ui>
+  <timeline-item-ui text="Published"></timeline-item-ui>
+</timeline-ui>
+```

package/components/toast/toast.examples.md

@@ -0,0 +1,19 @@
+# toast — Examples
+
+## text
+
+```html
+<toast-ui text="Changes saved successfully." variant="success" duration="0" position="top-right"></toast-ui>
+```
+
+## variant
+
+```html
+<button-ui text="Default" variant="outline" size="sm" onclick="customElements.whenDefined('toast-ui').then(()=>customElements.get('toast-ui').show({text:'Default notification',variant:'default'}))"></button-ui>
+```
+
+## position
+
+```html
+<button-ui text="Top Left" variant="outline" size="sm" onclick="customElements.whenDefined('toast-ui').then(()=>customElements.get('toast-ui').show({text:'Top left',variant:'info',position:'top-left'}))"></button-ui>
+```

package/components/toggle-group/toggle-group.examples.md

@@ -0,0 +1,33 @@
+# toggle-group — Examples
+
+## icon group
+
+```html
+<toggle-group-ui value="bold">
+  <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
+  <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
+  <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
+</toggle-group-ui>
+```
+
+## text group
+
+```html
+<toggle-group-ui value="week">
+  <toggle-option-ui value="day" text="Day"></toggle-option-ui>
+  <toggle-option-ui value="week" text="Week"></toggle-option-ui>
+  <toggle-option-ui value="month" text="Month"></toggle-option-ui>
+  <toggle-option-ui value="year" text="Year"></toggle-option-ui>
+</toggle-group-ui>
+```
+
+## single select
+
+```html
+<toggle-group-ui value="left" single>
+  <toggle-option-ui value="left" icon="text-align-left"></toggle-option-ui>
+  <toggle-option-ui value="center" icon="text-align-center"></toggle-option-ui>
+  <toggle-option-ui value="right" icon="text-align-right"></toggle-option-ui>
+  <toggle-option-ui value="justify" icon="text-align-justify"></toggle-option-ui>
+</toggle-group-ui>
+```

package/components/toggle-scheme/toggle-scheme.examples.md

@@ -0,0 +1,19 @@
+# toggle-scheme — Examples
+
+## default
+
+```html
+<toggle-scheme-ui></toggle-scheme-ui>
+```
+
+## variant
+
+```html
+<toggle-scheme-ui variant="ghost"></toggle-scheme-ui>
+```
+
+## size
+
+```html
+<toggle-scheme-ui size="sm"></toggle-scheme-ui>
+```

package/components/toolbar/toolbar.examples.md

@@ -0,0 +1,46 @@
+# toolbar — Examples
+
+## basic
+
+```html
+<toolbar-ui bordered>
+  <button-ui icon="text-b" variant="ghost" size="sm"></button-ui>
+  <button-ui icon="text-italic" variant="ghost" size="sm"></button-ui>
+  <button-ui icon="text-underline" variant="ghost" size="sm"></button-ui>
+  <button-ui icon="text-strikethrough" variant="ghost" size="sm"></button-ui>
+</toolbar-ui>
+```
+
+## bordered
+
+```html
+<toolbar-ui>
+  <button-ui icon="arrow-left" variant="ghost" size="sm"></button-ui>
+  <button-ui icon="arrow-right" variant="ghost" size="sm"></button-ui>
+  <divider-ui vertical></divider-ui>
+  <button-ui icon="arrow-clockwise" variant="ghost" size="sm"></button-ui>
+</toolbar-ui>
+```
+
+## with dividers
+
+```html
+<toolbar-ui>
+  <toolbar-group-ui>
+    <button-ui icon="text-b" variant="ghost" size="sm"></button-ui>
+    <button-ui icon="text-italic" variant="ghost" size="sm"></button-ui>
+    <button-ui icon="text-underline" variant="ghost" size="sm"></button-ui>
+  </toolbar-group-ui>
+  <divider-ui vertical></divider-ui>
+  <toolbar-group-ui>
+    <button-ui icon="text-align-left" variant="ghost" size="sm"></button-ui>
+    <button-ui icon="text-align-center" variant="ghost" size="sm"></button-ui>
+    <button-ui icon="text-align-right" variant="ghost" size="sm"></button-ui>
+  </toolbar-group-ui>
+  <divider-ui vertical></divider-ui>
+  <toolbar-group-ui>
+    <button-ui icon="list-bullets" variant="ghost" size="sm"></button-ui>
+    <button-ui icon="list-numbers" variant="ghost" size="sm"></button-ui>
+  </toolbar-group-ui>
+</toolbar-ui>
+```

package/components/tooltip/tooltip.examples.md

@@ -0,0 +1,25 @@
+# tooltip — Examples
+
+## text
+
+```html
+<tooltip-ui text="Save your changes">
+  <button-ui text="Save" variant="primary"></button-ui>
+</tooltip-ui>
+```
+
+## placement
+
+```html
+<tooltip-ui text="Appears on top" placement="top">
+  <button-ui text="Top" variant="outline"></button-ui>
+</tooltip-ui>
+```
+
+## delay
+
+```html
+<tooltip-ui text="Instant tooltip" delay="0">
+  <button-ui text="No Delay" variant="outline"></button-ui>
+</tooltip-ui>
+```