@vmz/ui 0.1.0 → 0.1.2

package/src/components/Table.vmz

@@ -1,134 +1,136 @@
 <template>
   <div class="vmz-ui-table-wrap" data-vmz-ui="table" data-sort-key={sortKey} data-sort-dir={sortDir}>
-    <table class="vmz-ui-table">
-      <thead onClick={onHeadClick}>
-        <tr>
-          <th each={columns} as="col" key={col.id} scope="col" data-vmz-col={col.id}>
-            <button type="button" class="vmz-ui-table__sort" data-vmz-sort={col.id}>
-              {col.title}
-            </button>
-          </th>
-          <th if={hasRowAction} scope="col">{actionTitle}</th>
-        </tr>
-      </thead>
-      <tbody onClick={onBodyClick}>
-        <tr each={rows} as="row" key={row.id} data-vmz-row={row.id}>
-          <td each={row.cells} as="cell">{cell}</td>
-          <td if={hasRowAction}>
-            <button
-              type="button"
-              class="vmz-ui-table__row-action"
-              data-vmz-row-action={row.id}
-              disabled={rowActionDisabled}
-            >
-              {actionLabel}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+      <table class="vmz-ui-table">
+        <thead onClick={onHeadClick}>
+          <tr>
+            <th each={columns} as="col" key={col.id} scope="col" data-vmz-col={col.id}>
+              <button type="button" class="vmz-ui-table__sort" data-vmz-sort={col.id}>
+                {col.title}
+              </button>
+            </th>
+            <th if={hasRowAction} scope="col">{actionTitle}</th>
+          </tr>
+        </thead>
+        <tbody onClick={onBodyClick}>
+          <tr each={rows} as="row" key={row.id} data-vmz-row={row.id}>
+            <td each={row.cells} as="cell">{cell}</td>
+            <td if={hasRowAction}>
+              <button
+                type="button"
+                class="vmz-ui-table__row-action"
+                data-vmz-row-action={row.id}
+                disabled={rowActionDisabled}
+              >
+                {actionLabel}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 </template>
 
 <style>
-.vmz-ui-table-wrap {
-  overflow-x: auto;
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-}
+  .vmz-ui-table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+  }
 
-.vmz-ui-table {
-  width: 100%;
-  border-collapse: collapse;
-  font: inherit;
-}
+  .vmz-ui-table {
+    width: 100%;
+    border-collapse: collapse;
+    font: inherit;
+  }
 
-.vmz-ui-table th,
-.vmz-ui-table td {
-  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-  text-align: left;
-  border-bottom: 1px solid var(--vmz-action-primary-background);
-  vertical-align: middle;
-}
+  .vmz-ui-table th,
+  .vmz-ui-table td {
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+    text-align: left;
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    vertical-align: middle;
+  }
 
-.vmz-ui-table th {
-  font-weight: 700;
-  color: var(--vmz-action-primary-active);
-  background: transparent;
-}
+  .vmz-ui-table th {
+    font-weight: 700;
+    color: var(--vmz-action-primary-active);
+    background: transparent;
+  }
 
-.vmz-ui-table__sort {
-  font: inherit;
-  font-weight: 700;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  outline: none;
-}
+  .vmz-ui-table__sort {
+    font: inherit;
+    font-weight: 700;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+  }
 
-.vmz-ui-table__sort:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-table__sort:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-table__row-action {
-  font: inherit;
-  font-weight: 600;
-  padding: 0.3rem 0.55rem;
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-  background: transparent;
-  color: var(--vmz-action-primary-active);
-  cursor: pointer;
-  outline: none;
-}
+  .vmz-ui-table__row-action {
+    font: inherit;
+    font-weight: 600;
+    padding: 0.3rem 0.55rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: transparent;
+    color: var(--vmz-action-primary-active);
+    cursor: pointer;
+    outline: none;
+  }
 
-.vmz-ui-table__row-action:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-table__row-action:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-table__row-action:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
+  .vmz-ui-table__row-action:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Table (UI5 Console Surface).
- * Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
- */
+* VMZ UI — Table (UI5 Console Surface).
+* Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
+*/
 export default class Table {
-  /** @type {{ id: string, title: string }[]} */
-  public columns: { id: string; title: string }[] = [];
-  /** @type {{ id: string, cells: string[] }[]} */
-  public rows: { id: string; cells: string[] }[] = [];
-  public hasRowAction: boolean = false;
-  public rowActionDisabled: boolean = false;
-  public actionTitle: string = 'Action';
-  public actionLabel: string = 'Open';
-  public sortKey: string = '';
-  public sortDir: string = 'asc';
-  public onRowAction: ((rowId: string) => void) | null = null;
-  public onSort: ((columnId: string) => void) | null = null;
-
-  onBodyClick(ev) {
-    const t = ev && ev.target;
-    const el =
-      t && typeof t.closest === 'function' ? t.closest('[data-vmz-row-action]') : null;
-    if (!el || el.disabled) return;
-    const id = el.getAttribute('data-vmz-row-action');
-    if (id && typeof this.onRowAction === 'function') this.onRowAction(id);
-  }
-
-  onHeadClick(ev) {
-    const t = ev && ev.target;
-    const el =
-      t && typeof t.closest === 'function' ? t.closest('[data-vmz-sort]') : null;
-    if (!el) return;
-    const id = el.getAttribute('data-vmz-sort');
-    if (id && typeof this.onSort === 'function') this.onSort(id);
-  }
+	/** @type {{ id: string, title: string }[]} */
+	public columns: {
+		id: string;
+		title: string;
+	}[] = [];
+	/** @type {{ id: string, cells: string[] }[]} */
+	public rows: {
+		id: string;
+		cells: string[];
+	}[] = [];
+	public hasRowAction: boolean = false;
+	public rowActionDisabled: boolean = false;
+	public actionTitle: string = "Action";
+	public actionLabel: string = "Open";
+	public sortKey: string = "";
+	public sortDir: string = "asc";
+	public onRowAction: ((rowId: string) => void) | null = null;
+	public onSort: ((columnId: string) => void) | null = null;
+	onBodyClick(ev) {
+		const t = ev && ev.target;
+		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-row-action]") : null;
+		if (!el || el.disabled) return;
+		const id = el.getAttribute("data-vmz-row-action");
+		if (id && typeof this.onRowAction === "function") this.onRowAction(id);
+	}
+	onHeadClick(ev) {
+		const t = ev && ev.target;
+		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-sort]") : null;
+		if (!el) return;
+		const id = el.getAttribute("data-vmz-sort");
+		if (id && typeof this.onSort === "function") this.onSort(id);
+	}
 }
 </script>

package/src/components/Tabs.vmz

@@ -1,132 +1,133 @@
 <template>
   <div class="vmz-ui-tabs" data-vmz-ui="tabs">
-    <div
-      class="vmz-ui-tabs__list"
-      role="tablist"
-      aria-label={label}
-      onKeyDown={onListKeyDown}
-      onClick={onListClick}
-    >
-      <button
-        each={items}
-        as="item"
-        key={item.id}
-        type="button"
-        class="vmz-ui-tabs__tab"
-        role="tab"
-        id={item.id}
-        data-vmz-tab={item.id}
-        aria-selected={selected === item.id ? 'true' : 'false'}
-        aria-controls={item.controls}
-        tabindex={selected === item.id ? 0 : -1}
+      <div
+        class="vmz-ui-tabs__list"
+        role="tablist"
+        aria-label={label}
+        onKeyDown={onListKeyDown}
+        onClick={onListClick}
       >
-        {item.title}
-      </button>
-    </div>
-    <div
-      class="vmz-ui-tabs__panel"
-      role="tabpanel"
-      id={panelId}
-      data-vmz-tab-panel={selected}
-      aria-labelledby={selected}
-      tabindex="0"
-    >
-      <slot />
+        <button
+          each={items}
+          as="item"
+          key={item.id}
+          type="button"
+          class="vmz-ui-tabs__tab"
+          role="tab"
+          id={item.id}
+          data-vmz-tab={item.id}
+          aria-selected={selected === item.id ? 'true' : 'false'}
+          aria-controls={item.controls}
+          tabindex={selected === item.id ? 0 : -1}
+        >
+          {item.title}
+        </button>
+      </div>
+      <div
+        class="vmz-ui-tabs__panel"
+        role="tabpanel"
+        id={panelId}
+        data-vmz-tab-panel={selected}
+        aria-labelledby={selected}
+        tabindex="0"
+      >
+        <slot />
+      </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-tabs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.65rem;
-  max-width: 36rem;
-}
+  .vmz-ui-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    max-width: 36rem;
+  }
 
-.vmz-ui-tabs__list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  border-bottom: 1px solid var(--vmz-action-primary-background);
-}
+  .vmz-ui-tabs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+  }
 
-.vmz-ui-tabs__tab {
-  font: inherit;
-  font-weight: 600;
-  padding: 0.45rem 0.75rem;
-  border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: 2px 2px 0 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  outline: none;
-}
+  .vmz-ui-tabs__tab {
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    padding: 0.5rem 0;
+    margin: 0 1rem 0 0;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+    outline: none;
+  }
 
-.vmz-ui-tabs__tab[aria-selected='true'] {
-  background: var(--vmz-action-primary-background);
-  color: var(--vmz-action-primary-foreground);
-}
+  .vmz-ui-tabs__tab[aria-selected='true'] {
+    background: transparent;
+    color: var(--vmz-action-primary-background);
+    font-weight: 500;
+    border-bottom-color: var(--vmz-action-primary-background);
+  }
 
-.vmz-ui-tabs__tab:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-tabs__tab:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-tabs__panel {
-  min-height: 2.5rem;
-  outline: none;
-}
+  .vmz-ui-tabs__panel {
+    min-height: 2.5rem;
+    outline: none;
+  }
 
-.vmz-ui-tabs__panel:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-tabs__panel:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Tabs (UI2).
- * Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
- * Panel content is the default slot (page chooses which body to show).
- */
+* VMZ UI — Tabs (UI2).
+* Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
+* Panel content is the default slot (page chooses which body to show).
+*/
 export default class Tabs {
-  public label: string = 'Tabs';
-  public selected: string = '';
-  public panelId: string = '';
-  /** @type {{ id: string, title: string, controls?: string }[]} */
-  public items: { id: string; title: string; controls?: string }[] = [];
-  public onSelect: ((id: string) => void) | null = null;
-
-  select(id) {
-    if (typeof this.onSelect === 'function') this.onSelect(id);
-  }
-
-  onListClick(ev) {
-    const t = ev && ev.target;
-    const el =
-      t && typeof t.closest === 'function' ? t.closest('[data-vmz-tab]') : null;
-    const id = el && typeof el.getAttribute === 'function' ? el.getAttribute('data-vmz-tab') : null;
-    if (id) this.select(id);
-  }
-
-  onListKeyDown(ev) {
-    if (!ev || !this.items?.length) return;
-    const ids = this.items.map((it) => it.id);
-    const idx = Math.max(0, ids.indexOf(this.selected));
-    let next = idx;
-    if (ev.key === 'ArrowRight') next = (idx + 1) % ids.length;
-    else if (ev.key === 'ArrowLeft') next = (idx - 1 + ids.length) % ids.length;
-    else if (ev.key === 'Home') next = 0;
-    else if (ev.key === 'End') next = ids.length - 1;
-    else return;
-    ev.preventDefault();
-    this.select(ids[next]);
-    const root = this.__vmzDomRoot;
-    const btn =
-      root && typeof root.querySelector === 'function'
-        ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`)
-        : null;
-    if (btn && typeof btn.focus === 'function') btn.focus();
-  }
+	public label: string = "Tabs";
+	public selected: string = "";
+	public panelId: string = "";
+	/** @type {{ id: string, title: string, controls?: string }[]} */
+	public items: {
+		id: string;
+		title: string;
+		controls?: string;
+	}[] = [];
+	public onSelect: ((id: string) => void) | null = null;
+	select(id) {
+		if (typeof this.onSelect === "function") this.onSelect(id);
+	}
+	onListClick(ev) {
+		const t = ev && ev.target;
+		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tab]") : null;
+		const id = el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-tab") : null;
+		if (id) this.select(id);
+	}
+	onListKeyDown(ev) {
+		if (!ev || !this.items?.length) return;
+		const ids = this.items.map((it) => it.id);
+		const idx = Math.max(0, ids.indexOf(this.selected));
+		let next = idx;
+		if (ev.key === "ArrowRight") next = (idx + 1) % ids.length;
+		else if (ev.key === "ArrowLeft") next = (idx - 1 + ids.length) % ids.length;
+		else if (ev.key === "Home") next = 0;
+		else if (ev.key === "End") next = ids.length - 1;
+		else return;
+		ev.preventDefault();
+		this.select(ids[next]);
+		const root = this.__vmzDomRoot;
+		const btn = root && typeof root.querySelector === "function" ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`) : null;
+		if (btn && typeof btn.focus === "function") btn.focus();
+	}
 }
 </script>

package/src/components/Tag.vmz

@@ -0,0 +1,8 @@
+<template><span class="vmz-ui-tag" data-vmz-ui="tag" data-status={status||undefined}><slot /></span></template>
+<style>
+.vmz-ui-tag{display:inline-flex;align-items:center;min-height:1.5rem;padding:0 .45rem;border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-sm,2px);background:var(--vmz-surface-mist);color:var(--vmz-text-steel);font-size:.75rem;line-height:1}
+.vmz-ui-tag[data-status='success']{color:var(--vmz-status-success-foreground);background:color-mix(in srgb,var(--vmz-status-success-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-success-accent) 45%,var(--vmz-line-default))}
+.vmz-ui-tag[data-status='warning']{color:var(--vmz-status-warning-foreground);background:color-mix(in srgb,var(--vmz-status-warning-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-warning-accent) 45%,var(--vmz-line-default))}
+.vmz-ui-tag[data-status='error']{color:var(--vmz-status-danger-foreground);background:color-mix(in srgb,var(--vmz-status-danger-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-danger-accent) 45%,var(--vmz-line-default))}
+</style>
+<script client>export default class Tag { public status: string = ''; }</script>