@adia-ai/web-components 0.6.6 → 0.6.8

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

package/components/tree/tree.examples.md

@@ -0,0 +1,57 @@
+# tree — Examples
+
+## nested items
+
+```html
+<tree-ui>
+  <tree-item-ui text="src" icon="folder">
+    <tree-item-ui text="components" icon="folder">
+      <tree-item-ui text="button.js" icon="file"></tree-item-ui>
+      <tree-item-ui text="input.js" icon="file"></tree-item-ui>
+      <tree-item-ui text="modal.js" icon="file"></tree-item-ui>
+    </tree-item-ui>
+    <tree-item-ui text="styles" icon="folder">
+      <tree-item-ui text="tokens.css" icon="file"></tree-item-ui>
+      <tree-item-ui text="styles.css" icon="file"></tree-item-ui>
+    </tree-item-ui>
+    <tree-item-ui text="index.js" icon="file"></tree-item-ui>
+  </tree-item-ui>
+</tree-ui>
+```
+
+## selection
+
+```html
+<tree-ui>
+  <tree-item-ui text="Dashboard" icon="chart-bar"></tree-item-ui>
+  <tree-item-ui text="Settings" icon="gear">
+    <tree-item-ui text="General" icon="sliders"></tree-item-ui>
+    <tree-item-ui text="Security" icon="lock"></tree-item-ui>
+    <tree-item-ui text="Notifications" icon="bell"></tree-item-ui>
+  </tree-item-ui>
+  <tree-item-ui text="Profile" icon="user"></tree-item-ui>
+  <tree-item-ui text="Help" icon="question"></tree-item-ui>
+</tree-ui>
+```
+
+## expand / collapse
+
+```html
+<tree-ui>
+  <tree-item-ui text="Page" icon="browser" open>
+    <tree-item-ui text="Header" icon="layout">
+      <tree-item-ui text="Logo" icon="image"></tree-item-ui>
+      <tree-item-ui text="Navigation" icon="list"></tree-item-ui>
+    </tree-item-ui>
+    <tree-item-ui text="Hero Section" icon="image" open>
+      <tree-item-ui text="Title" icon="text-aa"></tree-item-ui>
+      <tree-item-ui text="Subtitle" icon="text-aa"></tree-item-ui>
+      <tree-item-ui text="CTA Button" icon="cursor-click"></tree-item-ui>
+    </tree-item-ui>
+    <tree-item-ui text="Footer" icon="layout">
+      <tree-item-ui text="Links" icon="link"></tree-item-ui>
+      <tree-item-ui text="Copyright" icon="text-aa"></tree-item-ui>
+    </tree-item-ui>
+  </tree-item-ui>
+</tree-ui>
+```

package/components/upload/upload.examples.md

@@ -0,0 +1,19 @@
+# upload — Examples
+
+## Default
+
+```html
+<upload-ui></upload-ui>
+```
+
+## accept
+
+```html
+<upload-ui accept="image/*"></upload-ui>
+```
+
+## multiple
+
+```html
+<upload-ui multiple></upload-ui>
+```