@adia-ai/web-components 0.6.4 → 0.6.7

package/components/segment/segment.examples.md

@@ -0,0 +1,32 @@
+# segment — Examples
+
+## basic
+
+```html
+<segmented-ui>
+  <segment-ui value="overview" text="Overview"></segment-ui>
+  <segment-ui value="features" text="Features"></segment-ui>
+  <segment-ui value="pricing" text="Pricing"></segment-ui>
+</segmented-ui>
+```
+
+## text
+
+```html
+<segmented-ui>
+  <segment-ui value="d" text="Daily"></segment-ui>
+  <segment-ui value="w" text="Weekly"></segment-ui>
+  <segment-ui value="m" text="Monthly"></segment-ui>
+  <segment-ui value="y" text="Yearly"></segment-ui>
+</segmented-ui>
+```
+
+## disabled
+
+```html
+<segmented-ui>
+  <segment-ui value="free" text="Free"></segment-ui>
+  <segment-ui value="pro" text="Pro"></segment-ui>
+  <segment-ui value="enterprise" text="Enterprise" disabled></segment-ui>
+</segmented-ui>
+```

package/components/segmented/segmented.examples.md

@@ -0,0 +1,31 @@
+# segmented — Examples
+
+## basic (3 segments)
+
+```html
+<segmented-ui>
+  <segment-ui value="daily" text="Daily"></segment-ui>
+  <segment-ui value="weekly" text="Weekly"></segment-ui>
+  <segment-ui value="monthly" text="Monthly"></segment-ui>
+</segmented-ui>
+```
+
+## pre-selected
+
+```html
+<segmented-ui value="weekly">
+  <segment-ui value="daily" text="Daily"></segment-ui>
+  <segment-ui value="weekly" text="Weekly"></segment-ui>
+  <segment-ui value="monthly" text="Monthly"></segment-ui>
+</segmented-ui>
+```
+
+## disabled segment
+
+```html
+<segmented-ui value="list">
+  <segment-ui value="list" text="List"></segment-ui>
+  <segment-ui value="grid" text="Grid"></segment-ui>
+  <segment-ui value="kanban" text="Kanban" disabled></segment-ui>
+</segmented-ui>
+```

package/components/select/select.examples.md

@@ -0,0 +1,49 @@
+# select — Examples
+
+## basic
+
+```html
+<field-ui label="Fruit">
+  <select-ui placeholder="Pick a fruit">
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="cherry">Cherry</option>
+    <option value="dragonfruit">Dragonfruit</option>
+  </select-ui>
+</field-ui>
+```
+
+## size
+
+```html
+<field-ui label="Small">
+  <select-ui size="sm" placeholder="Pick a fruit">
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="cherry">Cherry</option>
+  </select-ui>
+</field-ui>
+```
+
+## grouped options
+
+```html
+<field-ui label="Location">
+  <select-ui placeholder="Choose a city">
+    <optgroup label="North America">
+      <option value="nyc">New York</option>
+      <option value="sf">San Francisco</option>
+      <option value="toronto">Toronto</option>
+    </optgroup>
+    <optgroup label="Europe">
+      <option value="london">London</option>
+      <option value="paris">Paris</option>
+      <option value="berlin">Berlin</option>
+    </optgroup>
+    <optgroup label="Asia">
+      <option value="tokyo">Tokyo</option>
+      <option value="singapore">Singapore</option>
+    </optgroup>
+  </select-ui>
+</field-ui>
+```

package/components/skeleton/skeleton.examples.md

@@ -0,0 +1,19 @@
+# skeleton — Examples
+
+## width / height
+
+```html
+<skeleton-ui width="100px" height="1em"></skeleton-ui>
+```
+
+## radius
+
+```html
+<skeleton-ui width="120px" height="2em" radius="none"></skeleton-ui>
+```
+
+## static
+
+```html
+<skeleton-ui width="150px" height="1.5em"></skeleton-ui>
+```

package/components/slider/slider.examples.md

@@ -0,0 +1,21 @@
+# slider — Examples
+
+## Sizes
+
+```html
+<slider-ui size="lg" value="60"></slider-ui>
+```
+
+## value (default)
+
+```html
+<slider-ui value="50"></slider-ui>
+```
+
+## label + value readout
+
+```html
+<field-ui label="Volume">
+  <slider-ui value="75"></slider-ui>
+</field-ui>
+```

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>
+```