@vmz/ui 0.1.0 → 0.1.2

package/src/components/Prose.vmz

@@ -1,83 +1,83 @@
 <template>
   <article class="vmz-ui-prose" data-vmz-ui="prose">
-    <slot />
-  </article>
+      <slot />
+    </article>
 </template>
 
 <style>
-.vmz-ui-prose {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  max-width: 42rem;
-  color: var(--vmz-text-ink);
-  font-family: var(--vmz-font-sans);
-  line-height: 1.65;
-}
+  .vmz-ui-prose {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 42rem;
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-sans);
+    line-height: 1.65;
+  }
 
-.vmz-ui-prose :where(h1, h2, h3) {
-  margin: 0;
-  font-family: var(--vmz-font-display);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-  color: var(--vmz-text-ink);
-  scroll-margin-top: 1.25rem;
-}
+  .vmz-ui-prose :where(h1, h2, h3) {
+    margin: 0;
+    font-family: var(--vmz-font-display);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    color: var(--vmz-text-ink);
+    scroll-margin-top: 1.25rem;
+  }
 
-.vmz-ui-prose :where(h1) {
-  font-size: clamp(1.85rem, 4vw, 2.35rem);
-}
+  .vmz-ui-prose :where(h1) {
+    font-size: clamp(1.85rem, 4vw, 2.35rem);
+  }
 
-.vmz-ui-prose :where(h2) {
-  font-size: 1.35rem;
-  margin-top: 0.5rem;
-}
+  .vmz-ui-prose :where(h2) {
+    font-size: 1.35rem;
+    margin-top: 0.5rem;
+  }
 
-.vmz-ui-prose :where(h3) {
-  font-size: 1.1rem;
-}
+  .vmz-ui-prose :where(h3) {
+    font-size: 1.1rem;
+  }
 
-.vmz-ui-prose :where(p) {
-  margin: 0;
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-prose :where(p) {
+    margin: 0;
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-prose :where(p.lead) {
-  font-size: 1.05rem;
-  color: var(--vmz-text-steel);
-}
+  .vmz-ui-prose :where(p.lead) {
+    font-size: 1.05rem;
+    color: var(--vmz-text-steel);
+  }
 
-.vmz-ui-prose :where(ul, ol) {
-  margin: 0;
-  padding-left: 1.25rem;
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-prose :where(ul, ol) {
+    margin: 0;
+    padding-left: 1.25rem;
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-prose :where(li + li) {
-  margin-top: 0.35rem;
-}
+  .vmz-ui-prose :where(li + li) {
+    margin-top: 0.35rem;
+  }
 
-.vmz-ui-prose :where(a) {
-  color: var(--vmz-action-primary-background);
-  text-underline-offset: 0.15em;
-}
+  .vmz-ui-prose :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-underline-offset: 0.15em;
+  }
 
-.vmz-ui-prose :where(a:hover) {
-  color: var(--vmz-action-primary-hover);
-}
+  .vmz-ui-prose :where(a:hover) {
+    color: var(--vmz-action-primary-hover);
+  }
 
-.vmz-ui-prose :where(hr) {
-  border: 0;
-  border-top: 1px solid var(--vmz-line-default);
-  margin: 0.5rem 0;
-}
+  .vmz-ui-prose :where(hr) {
+    border: 0;
+    border-top: 1px solid var(--vmz-line-default);
+    margin: 0.5rem 0;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Prose (Document/Product composition).
- * Typography measure for long-form content; values from Style Theme only.
- */
+* VMZ UI — Prose (Document/Product composition).
+* Typography measure for long-form content; values from Style Theme only.
+*/
 export default class Prose {}
 </script>

package/src/components/QueryForm.vmz

@@ -1,39 +1,38 @@
 <template>
   <form
-    class="vmz-ui-query-form"
-    data-vmz-ui="query-form"
-    data-dense="true"
-    aria-label={label}
-    onSubmit={onSubmitGuard}
-  >
-    <slot />
-  </form>
+      class="vmz-ui-query-form"
+      data-vmz-ui="query-form"
+      data-dense="true"
+      aria-label={label}
+      onSubmit={onSubmitGuard}
+    >
+      <slot />
+    </form>
 </template>
 
 <style>
-.vmz-ui-query-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: var(--vmz-density-compact-gap);
-  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-}
+  .vmz-ui-query-form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--vmz-density-compact-gap);
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — QueryForm (UI5 Console Surface).
- * Dense multi-field query landmark; spacing from density.compact.* tokens.
- */
+* VMZ UI — QueryForm (UI5 Console Surface).
+* Dense multi-field query landmark; spacing from density.compact.* tokens.
+*/
 export default class QueryForm {
-  public label: string = 'Query';
-  public onSubmit: (() => void) | null = null;
-
-  onSubmitGuard(ev) {
-    if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
-    if (typeof this.onSubmit === 'function') this.onSubmit();
-  }
+	public label: string = "Query";
+	public onSubmit: (() => void) | null = null;
+	onSubmitGuard(ev) {
+		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+		if (typeof this.onSubmit === "function") this.onSubmit();
+	}
 }
 </script>

package/src/components/RadioGroup.vmz

@@ -1,135 +1,138 @@
 <template>
   <fieldset
-    class="vmz-ui-radio-group"
-    data-vmz-ui="radio-group"
-    data-invalid={invalidAttr}
-    aria-describedby={describedBy}
-    disabled={disabled}
-  >
-    <legend class="vmz-ui-radio-group__legend">{label}</legend>
-    <div class="vmz-ui-radio-group__list" role="radiogroup" aria-label={label} onClick={onListClick}>
-      <label
-        each={items}
-        as="item"
-        key={item.value}
-        class="vmz-ui-radio-group__option"
-        for={item.id}
-      >
-        <input
-          id={item.id}
-          class="vmz-ui-radio-group__input"
-          type="radio"
-          name={name}
-          value={item.value}
-          checked={value === item.value}
-          disabled={disabled}
-          data-vmz-radio={item.value}
-        />
-        <span class="vmz-ui-radio-group__text">{item.label}</span>
-      </label>
-    </div>
-    <p if={description} id={descriptionId} class="vmz-ui-radio-group__description">{description}</p>
-    <p if={error} id={errorId} class="vmz-ui-radio-group__error" role="alert">{error}</p>
-  </fieldset>
+      class="vmz-ui-radio-group"
+      data-vmz-ui="radio-group"
+      data-invalid={invalidAttr}
+      aria-describedby={describedBy}
+      disabled={disabled}
+    >
+      <legend class="vmz-ui-radio-group__legend">{label}</legend>
+      <div class="vmz-ui-radio-group__list" role="radiogroup" aria-label={label} onClick={onListClick}>
+        <label
+          each={items}
+          as="item"
+          key={item.value}
+          class="vmz-ui-radio-group__option"
+          for={item.id}
+        >
+          <input
+            id={item.id}
+            class="vmz-ui-radio-group__input"
+            type="radio"
+            name={name}
+            value={item.value}
+            checked={value === item.value}
+            disabled={disabled}
+            data-vmz-radio={item.value}
+          />
+          <span class="vmz-ui-radio-group__text">{item.label}</span>
+        </label>
+      </div>
+      <p if={description} id={descriptionId} class="vmz-ui-radio-group__description">{description}</p>
+      <p if={error} id={errorId} class="vmz-ui-radio-group__error" role="alert">{error}</p>
+    </fieldset>
 </template>
 
 <style>
-.vmz-ui-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-  max-width: 28rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
+  .vmz-ui-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    max-width: 28rem;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+  }
 
-.vmz-ui-radio-group__legend {
-  padding: 0;
-  font: inherit;
-  font-weight: 600;
-}
+  .vmz-ui-radio-group__legend {
+    padding: 0;
+    font: inherit;
+    font-weight: 600;
+  }
 
-.vmz-ui-radio-group__list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
+  .vmz-ui-radio-group__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
 
-.vmz-ui-radio-group__option {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  font: inherit;
-  cursor: pointer;
-}
+  .vmz-ui-radio-group__option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font: inherit;
+    cursor: pointer;
+  }
 
-.vmz-ui-radio-group__input {
-  width: 1rem;
-  height: 1rem;
-  accent-color: var(--vmz-action-primary-background);
-  outline: none;
-}
+  .vmz-ui-radio-group__input {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--vmz-action-primary-background);
+    outline: none;
+  }
 
-.vmz-ui-radio-group__input:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-radio-group__input:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-radio-group__input:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
+  .vmz-ui-radio-group__input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
 
-.vmz-ui-radio-group__text {
-  font-weight: 600;
-}
+  .vmz-ui-radio-group__text {
+    font-weight: 600;
+  }
 
-.vmz-ui-radio-group__description {
-  margin: 0;
-  opacity: 0.75;
-  font-size: 0.9em;
-}
+  .vmz-ui-radio-group__description {
+    margin: 0;
+    opacity: 0.75;
+    font-size: 0.9em;
+  }
 
-.vmz-ui-radio-group__error {
-  margin: 0;
-  color: var(--vmz-status-danger-foreground);
-  font-size: 0.9em;
-}
+  .vmz-ui-radio-group__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.9em;
+  }
 
-.vmz-ui-radio-group[data-invalid='true'] .vmz-ui-radio-group__legend {
-  color: var(--vmz-status-danger-foreground);
-}
+  .vmz-ui-radio-group[data-invalid='true'] .vmz-ui-radio-group__legend {
+    color: var(--vmz-status-danger-foreground);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — RadioGroup.
- * Parent owns selected value; click path updates via onChange (live prop remains authoritative).
- */
+* VMZ UI — RadioGroup.
+* Parent owns selected value; click path updates via onChange (live prop remains authoritative).
+*/
 export default class RadioGroup {
-  public label: string = '';
-  public description: string = '';
-  public error: string = '';
-  public name: string = 'vmz-radio';
-  public value: string = '';
-  public items: Array<{ id: string; value: string; label: string }> = [];
-  public disabled: boolean = false;
-  public invalidAttr: string = 'false';
-  public descriptionId: string = 'vmz-radio-desc';
-  public errorId: string = 'vmz-radio-err';
-  public describedBy: string = '';
-  public onChange: ((value: string) => void) | null = null;
-
-  onListClick(ev) {
-    if (this.disabled) return;
-    const t = ev && ev.target;
-    if (!t || typeof t.closest !== 'function') return;
-    const input = t.closest('input[data-vmz-radio]');
-    if (!input) return;
-    const next = input.getAttribute('data-vmz-radio') || input.value || '';
-    if (!next || next === this.value) return;
-    if (typeof this.onChange === 'function') this.onChange(next);
-  }
+	public label: string = "";
+	public description: string = "";
+	public error: string = "";
+	public name: string = "vmz-radio";
+	public value: string = "";
+	public items: Array<{
+		id: string;
+		value: string;
+		label: string;
+	}> = [];
+	public disabled: boolean = false;
+	public invalidAttr: string = "false";
+	public descriptionId: string = "vmz-radio-desc";
+	public errorId: string = "vmz-radio-err";
+	public describedBy: string = "";
+	public onChange: ((value: string) => void) | null = null;
+	onListClick(ev) {
+		if (this.disabled) return;
+		const t = ev && ev.target;
+		if (!t || typeof t.closest !== "function") return;
+		const input = t.closest("input[data-vmz-radio]");
+		if (!input) return;
+		const next = input.getAttribute("data-vmz-radio") || input.value || "";
+		if (!next || next === this.value) return;
+		if (typeof this.onChange === "function") this.onChange(next);
+	}
 }
 </script>

package/src/components/Result.vmz

@@ -1,84 +1,84 @@
 <template>
   <section
-    class="vmz-ui-result"
-    data-vmz-ui="result"
-    data-status={status}
-  >
-    <p class="vmz-ui-result__title">{title}</p>
-    <p if={description} class="vmz-ui-result__description">{description}</p>
-    <div class="vmz-ui-result__actions">
-      <slot />
-    </div>
-  </section>
+      class="vmz-ui-result"
+      data-vmz-ui="result"
+      data-status={status}
+    >
+      <p class="vmz-ui-result__title">{title}</p>
+      <p if={description} class="vmz-ui-result__description">{description}</p>
+      <div class="vmz-ui-result__actions">
+        <slot />
+      </div>
+    </section>
 </template>
 
 <style>
-.vmz-ui-result {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--vmz-density-control-gap);
-  padding: calc(var(--vmz-density-control-padding-y) * 1.5) var(--vmz-density-control-padding-x);
-  border: 1px solid var(--vmz-status-info-accent);
-  border-radius: 2px;
-  color: var(--vmz-status-info-foreground);
-}
+  .vmz-ui-result {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--vmz-density-control-gap);
+    padding: calc(var(--vmz-density-control-padding-y) * 1.5) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-status-info-accent);
+    border-radius: var(--vmz-radius-md, 6px);
+    color: var(--vmz-status-info-foreground);
+  }
 
-.vmz-ui-result[data-status='info'] {
-  border-color: var(--vmz-status-info-accent);
-  color: var(--vmz-status-info-foreground);
-}
+  .vmz-ui-result[data-status='info'] {
+    border-color: var(--vmz-status-info-accent);
+    color: var(--vmz-status-info-foreground);
+  }
 
-.vmz-ui-result[data-status='success'] {
-  border-color: var(--vmz-status-success-accent);
-  color: var(--vmz-status-success-foreground);
-}
+  .vmz-ui-result[data-status='success'] {
+    border-color: var(--vmz-status-success-accent);
+    color: var(--vmz-status-success-foreground);
+  }
 
-.vmz-ui-result[data-status='warning'] {
-  border-color: var(--vmz-status-warning-accent);
-  color: var(--vmz-status-warning-foreground);
-}
+  .vmz-ui-result[data-status='warning'] {
+    border-color: var(--vmz-status-warning-accent);
+    color: var(--vmz-status-warning-foreground);
+  }
 
-.vmz-ui-result[data-status='danger'] {
-  border-color: var(--vmz-status-danger-accent);
-  color: var(--vmz-status-danger-foreground);
-}
+  .vmz-ui-result[data-status='danger'] {
+    border-color: var(--vmz-status-danger-accent);
+    color: var(--vmz-status-danger-foreground);
+  }
 
-:where([data-density='compact']) .vmz-ui-result {
-  gap: var(--vmz-density-compact-gap);
-  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-}
+  :where([data-density='compact']) .vmz-ui-result {
+    gap: var(--vmz-density-compact-gap);
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+  }
 
-.vmz-ui-result__title {
-  margin: 0;
-  font-size: 1.15rem;
-  font-weight: 700;
-}
+  .vmz-ui-result__title {
+    margin: 0;
+    font-size: 1.15rem;
+    font-weight: 700;
+  }
 
-.vmz-ui-result__description {
-  margin: 0;
-  opacity: 0.9;
-}
+  .vmz-ui-result__description {
+    margin: 0;
+    opacity: 0.9;
+  }
 
-.vmz-ui-result__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
+  .vmz-ui-result__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
 
-.vmz-ui-result__actions:empty {
-  display: none;
-}
+  .vmz-ui-result__actions:empty {
+    display: none;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Result (UI4 Commercial Surface).
- * Outcome block for success/error flows; status → status.* tokens.
- */
+* VMZ UI — Result (UI4 Commercial Surface).
+* Outcome block for success/error flows; status → status.* tokens.
+*/
 export default class Result {
-  public title: string = '';
-  public description: string = '';
-  public status: string = 'info';
+	public title: string = "";
+	public description: string = "";
+	public status: string = "info";
 }
 </script>

package/src/components/Segmented.vmz

@@ -0,0 +1,29 @@
+<template>
+  <div class="vmz-ui-segmented" data-vmz-ui="segmented" role="group" aria-label={label}>
+    <button
+      each={options}
+      as="opt"
+      key={opt.value}
+      type="button"
+      aria-pressed={opt.value === value ? 'true' : 'false'}
+      onClick={() => onPick(opt.value)}
+    >{opt.label}</button>
+  </div>
+</template>
+<style>
+.vmz-ui-segmented{display:inline-flex;max-width:100%;padding:.2rem;border-radius:var(--vmz-radius-md,6px);background:var(--vmz-surface-mist);overflow-x:auto}
+.vmz-ui-segmented button{min-height:2rem;padding:.3rem .75rem;border:0;border-radius:calc(var(--vmz-radius-md,6px) - 2px);background:transparent;color:var(--vmz-text-steel);font:inherit;font-size:.875rem;font-weight:550;white-space:nowrap;cursor:pointer}
+.vmz-ui-segmented button[aria-pressed='true']{background:var(--vmz-surface-paper);color:var(--vmz-text-ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
+.vmz-ui-segmented button:focus-visible{outline:2px solid var(--vmz-focus-ring);outline-offset:-2px}
+</style>
+<script client>
+export default class Segmented {
+  public label: string = 'Segments';
+  public value: string = '';
+  public options: Array<{ value: string; label: string }> = [];
+  public onChange: ((value: string) => void) | null = null;
+  onPick(next: string) {
+    if (typeof this.onChange === 'function') this.onChange(next);
+  }
+}
+</script>