@adia-ai/web-components 0.0.1

package/components/table/table.yaml

@@ -0,0 +1,528 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaTable
+tag: table-ui
+component: Table
+category: agent
+version: 1
+description: Data table with sorting, selection, pagination, search, column resize, keyboard nav,
+  cell types, and CSV export. CSS grid + ARIA grid roles.
+props:
+  density:
+    description: Controls cell padding and row height. 'compact' for dense data, 'standard' for default
+      spacing, 'comfortable' for spacious rows.
+    type: string
+    default: standard
+    enum:
+      - compact
+      - standard
+      - comfortable
+  expandable:
+    description: Enable row expansion
+    type: boolean
+    default: false
+  loading:
+    description: Shows a loading overlay and skeleton rows. Sets aria-busy="true". Data updates are
+      deferred until loading is set back to false.
+    type: boolean
+    default: false
+    reflect: true
+  paginate:
+    description: Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar
+      below the table.
+    type: number
+    default: 0
+  raw:
+    description: Raw mode
+    type: boolean
+    default: false
+    reflect: true
+  search:
+    description: Global search/filter string. Filters visible rows across all columns using
+      case-insensitive substring matching. Resets to page 1 on change.
+    type: string
+    default: ""
+  selectable:
+    description: Show checkbox column for row selection. Select-all checkbox in header. Shift+click for
+      range select.
+    type: boolean
+    default: false
+  sortable:
+    description: Enable click-to-sort on column headers. Supports multi-sort via Shift+click.
+    type: boolean
+    default: false
+  striped:
+    description: Alternate row background colors for visual scanning.
+    type: boolean
+    default: false
+events:
+  cell-click:
+    description: Fired when a data cell is clicked.
+  page:
+    description: Fired when the user navigates to a different page.
+  resize:
+    description: Fired when a column is resized via drag.
+  select:
+    description: Fired when row selection changes.
+  sort:
+    description: Fired when sort state changes via header click.
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --table-accent:
+    description: Accent color for checkboxes and focus
+  --table-border-color:
+    description: Row/cell border color
+  --table-border-width:
+    description: Border width
+  --table-font-family:
+    description: Font family
+  --table-font-size:
+    description: Body font size
+  --table-foreground:
+    description: Body text color
+  --table-heading-background:
+    description: Header row background
+  --table-heading-color:
+    description: Header text color
+  --table-heading-size:
+    description: Header font size
+  --table-heading-weight:
+    description: Header font weight
+  --table-loading-overlay:
+    description: Loading overlay background
+  --table-padding-x:
+    description: Horizontal cell padding
+  --table-padding-y:
+    description: Vertical cell padding
+  --table-radius:
+    description: Border-radius for table container
+  --table-resize-handle-color:
+    description: Column resize drag handle color
+  --table-resize-handle-width:
+    description: Resize handle hit area width
+  --table-row-background:
+    description: Default row background
+  --table-row-background-hover:
+    description: Row hover background
+  --table-row-background-selected:
+    description: Selected row background
+  --table-row-background-striped:
+    description: Alternate row background
+  --table-search-highlight:
+    description: Search match highlight color
+  --table-sort-indicator-color:
+    description: Sort arrow color
+  --table-transition:
+    description: Transition timing
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: api-key-table
+    description: API key management table with actions and status badges.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "add"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "API Keys"
+        },
+        {
+          "id": "add",
+          "component": "Button",
+          "slot": "action",
+          "text": "Create Key",
+          "variant": "primary",
+          "size": "sm"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "tbl"
+          ]
+        },
+        {
+          "id": "tbl",
+          "component": "Table",
+          "sortable": true,
+          "columns": [
+            {
+              "key": "name",
+              "label": "Name",
+              "sortable": true
+            },
+            {
+              "key": "key",
+              "label": "Key"
+            },
+            {
+              "key": "created",
+              "label": "Created",
+              "sortable": true
+            },
+            {
+              "key": "lastUsed",
+              "label": "Last Used",
+              "sortable": true
+            },
+            {
+              "key": "status",
+              "label": "Status",
+              "component": "Badge"
+            }
+          ],
+          "rows": [
+            {
+              "name": "Production API",
+              "key": "sk-****-****-3a7f",
+              "created": "2025-01-15",
+              "lastUsed": "2025-04-16",
+              "status": {
+                "text": "Active",
+                "variant": "success"
+              }
+            },
+            {
+              "name": "Staging API",
+              "key": "sk-****-****-9b2e",
+              "created": "2025-03-01",
+              "lastUsed": "2025-04-10",
+              "status": {
+                "text": "Active",
+                "variant": "success"
+              }
+            },
+            {
+              "name": "Legacy Client",
+              "key": "sk-****-****-5d1c",
+              "created": "2024-06-20",
+              "lastUsed": "2024-12-01",
+              "status": {
+                "text": "Revoked",
+                "variant": "danger"
+              }
+            }
+          ]
+        }
+      ]
+  - name: data-table-view
+    description: Card with header containing title and search input, table component, and pagination footer.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "size": "lg",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title-row"
+          ]
+        },
+        {
+          "id": "title-row",
+          "component": "Row",
+          "children": [
+            "title",
+            "search"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Data Table",
+          "variant": "section"
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Search...",
+          "type": "search",
+          "name": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "tbl"
+          ]
+        },
+        {
+          "id": "tbl",
+          "component": "Table",
+          "sortable": true
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "pager"
+          ]
+        },
+        {
+          "id": "pager",
+          "component": "Pagination",
+          "totalPages": 10,
+          "currentPage": 1
+        }
+      ]
+keywords:
+  - table
+  - order
+  - invoice
+  - reporting
+  - spreadsheet
+  - grid
+  - listing
+  - records
+  - database
+  - csv
+  - excel
+  - rows
+  - columns
+  - datatable
+  - directory
+  - admin
+  - backoffice
+  - console
+  - crm
+  - paginate
+  - import
+  - export
+  - download
+  - billing
+  - api
+  - leaderboard
+  - ranking
+  - inventory
+  - stock
+  - warehouse
+  - supply
+  - log
+  - audit
+  - history
+  - file-manager
+  - files
+  - assets
+  - management
+  - manage
+synonyms:
+  admin:
+    - dashboard
+    - table
+    - data
+    - sidebar
+    - nav
+    - settings
+  api:
+    - api
+    - key
+    - table
+    - code
+  assets:
+    - data
+    - table
+    - file
+    - image
+    - gallery
+  audit:
+    - team
+    - activity
+    - table
+    - data
+  backoffice:
+    - dashboard
+    - table
+    - data
+    - sidebar
+    - settings
+  billing:
+    - pricing
+    - tier
+    - table
+  columns:
+    - split
+    - grid
+    - table
+  console:
+    - dashboard
+    - table
+    - data
+    - sidebar
+    - command
+  crm:
+    - dashboard
+    - table
+    - data
+    - user
+    - profile
+    - chart
+  csv:
+    - table
+    - data
+    - import
+  database:
+    - table
+    - data
+    - import
+  datatable:
+    - table
+    - data
+  directory:
+    - team
+    - avatar
+    - group
+    - table
+    - data
+  download:
+    - data
+    - table
+    - file
+  excel:
+    - table
+    - data
+    - import
+  export:
+    - data
+    - table
+    - download
+  file-manager:
+    - data
+    - table
+    - file
+    - upload
+  files:
+    - data
+    - table
+    - file
+    - upload
+  grid:
+    - table
+    - data
+    - card
+    - image
+    - feature
+    - grid
+  history:
+    - team
+    - activity
+    - table
+  import:
+    - data
+    - import
+    - file
+    - upload
+    - table
+  inventory:
+    - inventory
+    - table
+    - product
+    - data
+  invoice:
+    - table
+    - data
+    - pricing
+  leaderboard:
+    - leaderboard
+    - table
+    - rank
+  listing:
+    - table
+    - data
+    - list
+  log:
+    - team
+    - activity
+    - table
+    - data
+  manage:
+    - project
+    - board
+    - kanban
+    - team
+    - dashboard
+    - settings
+    - table
+  management:
+    - project
+    - board
+    - kanban
+    - team
+    - activity
+    - settings
+    - dashboard
+    - table
+  order:
+    - table
+    - data
+    - inventory
+    - form
+  paginate:
+    - pagination
+    - nav
+    - table
+  ranking:
+    - leaderboard
+    - table
+  records:
+    - table
+    - data
+  reporting:
+    - chart
+    - dashboard
+    - metric
+    - stat
+    - table
+    - data
+  rows:
+    - table
+    - data
+  spreadsheet:
+    - table
+    - data
+  stock:
+    - inventory
+    - table
+    - product
+  supply:
+    - inventory
+    - table
+  warehouse:
+    - inventory
+    - table
+related:
+  - button
+  - input
+  - pagination

package/components/tabs/tab.js

@@ -0,0 +1,34 @@
+/**
+ * <tab-ui value="tab1" text="Tab 1" icon="star">
+ *   Content for this tab panel.
+ * </tab-ui>
+ *
+ * Child of tabs-ui. Represents one tab panel.
+ * The tab button is rendered by the parent tabs-ui, not by tab-ui itself.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaTab extends AdiaElement {
+  static properties = {
+    text:     { type: String,  default: '', reflect: true },
+    value:    { type: String,  default: '', reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'tabpanel');
+  }
+
+  render() {
+    if (this.text) this.setAttribute('aria-label', this.text);
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+  }
+}
+customElements.define('tab-ui', AdiaTab);
+
+export { AdiaTab };