@vmz/ui 0.3.6 → 0.3.8

package/src/components/Prose.vmz

@@ -1,81 +1,180 @@
-<template>
-    <article data-vmz-ui="prose" class="vmz-ui-prose">
-        <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 :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(h2) {
-    font-size: 1.35rem;
-    margin-top: 0.5rem;
-}
-
-.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.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(li + li) {
-    margin-top: 0.375rem;
-}
-
-.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(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.
- */
-export default class Prose {}
-</script>
+<template>
+    <article data-vmz-ui="prose" class="vmz-ui-prose">
+        <slot />
+    </article>
+</template>
+<style>
+.vmz-ui-prose {
+    max-width: 46rem;
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-sans);
+    font-size: 1rem;
+    line-height: 1.625;
+}
+.vmz-ui-prose :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure, table, hr) {
+    margin: 0;
+}
+.vmz-ui-prose > * + * {
+    margin-top: 1em;
+}
+.vmz-ui-prose :where(div, section, article) > * + * {
+    margin-top: 1em;
+}
+.vmz-ui-prose :where(h1, h2, h3, h4, h5, h6) {
+    margin: 1.5em 0 0.5em;
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-display);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    scroll-margin-top: 5rem;
+}
+.vmz-ui-prose :where(h1) {
+    font-size: 1.875rem;
+    line-height: 1.2;
+}
+.vmz-ui-prose :where(h2) {
+    font-size: 1.5rem;
+    line-height: 1.33;
+}
+.vmz-ui-prose :where(h3) {
+    font-size: 1.25rem;
+    line-height: 1.4;
+}
+.vmz-ui-prose :where(h4) {
+    font-size: 1.0625rem;
+    line-height: 1.47;
+}
+.vmz-ui-prose :where(h5) {
+    font-size: 1rem;
+    line-height: 1.5;
+}
+.vmz-ui-prose :where(h6) {
+    font-size: 0.875rem;
+    line-height: 1.57;
+    color: var(--vmz-text-tertiary);
+}
+.vmz-ui-prose > :first-child,
+.vmz-ui-prose :where(div, section, article) > :first-child {
+    margin-top: 0;
+}
+.vmz-ui-prose > :last-child,
+.vmz-ui-prose :where(div, section, article) > :last-child {
+    margin-bottom: 0;
+}
+.vmz-ui-prose :where(p) {
+    color: var(--vmz-text-ink);
+}
+.vmz-ui-prose :where(p.lead) {
+    color: var(--vmz-text-steel);
+    font-size: 1.125rem;
+    line-height: 1.6;
+}
+.vmz-ui-prose :where(ul, ol) {
+    padding-left: 1.25em;
+    color: var(--vmz-text-ink);
+}
+.vmz-ui-prose :where(li + li) {
+    margin-top: 0.35em;
+}
+.vmz-ui-prose :where(dl) {
+    display: grid;
+    gap: 0.35em;
+}
+.vmz-ui-prose :where(dt) {
+    font-weight: 600;
+}
+.vmz-ui-prose :where(dd) {
+    margin: 0;
+    padding-left: 1.25em;
+    color: var(--vmz-text-steel);
+}
+.vmz-ui-prose :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.15em;
+    transition: color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.vmz-ui-prose :where(a:hover) {
+    color: var(--vmz-action-primary-hover);
+}
+.vmz-ui-prose :where(a:focus-visible) {
+    border-radius: var(--vmz-radius-xs, 2px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    outline: none;
+}
+.vmz-ui-prose :where(strong) {
+    font-weight: 600;
+}
+.vmz-ui-prose :where(small) {
+    color: var(--vmz-text-tertiary);
+    font-size: 0.875em;
+}
+.vmz-ui-prose :where(blockquote) {
+    padding: 0.25em 0 0.25em 1em;
+    border-left: 3px solid var(--vmz-line-default);
+    color: var(--vmz-text-steel);
+}
+.vmz-ui-prose :where(blockquote) :where(p) {
+    color: inherit;
+}
+.vmz-ui-prose :where(hr) {
+    margin: 2em 0;
+    border: 0;
+    border-top: 1px solid var(--vmz-line-default);
+}
+.vmz-ui-prose :where(img, video) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--vmz-radius-md, 6px);
+}
+.vmz-ui-prose :where(pre:not(.vmz-ui-code-block__pre)) {
+    padding: var(--vmz-space-4, 1rem);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-code);
+    color: var(--vmz-text-on-brand);
+    font-family: var(--vmz-font-mono);
+    font-size: 0.875rem;
+    line-height: 1.5714;
+    overflow-x: auto;
+}
+.vmz-ui-prose :where(pre:not(.vmz-ui-code-block__pre)) :where(code) {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font-size: inherit;
+}
+.vmz-ui-prose :where(p, li, td, th, blockquote, dd) :where(code, kbd, samp) {
+    padding: 0.15em 0.35em;
+    border-radius: var(--vmz-radius-xs, 2px);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-mono);
+    font-size: 0.875em;
+}
+.vmz-ui-prose :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9375rem;
+    line-height: 1.5;
+}
+.vmz-ui-prose :where(th, td) {
+    padding: 0.625em 0.75em;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    text-align: left;
+    vertical-align: top;
+}
+.vmz-ui-prose :where(thead th) {
+    color: var(--vmz-text-tertiary);
+    font-weight: 600;
+    border-bottom-color: var(--vmz-line-default);
+}
+</style>
+<script client>
+/**
+ * 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

@@ -5,22 +5,44 @@
 </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);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    align-items: end;
+    gap: 0.75rem;
+    padding: 1rem;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-query-form .vmz-ui-field__control,
+.vmz-ui-query-form .vmz-ui-select__control,
+.vmz-ui-query-form .vmz-ui-btn {
+    min-height: 2rem;
+}
+
+.vmz-ui-query-form > :has(.vmz-ui-btn),
+.vmz-ui-query-form > button.vmz-ui-btn {
+    justify-self: end;
+}
+
+.vmz-ui-query-form .vmz-ui-field {
+    min-width: 0;
+}
+
+@media (max-width: 640px) {
+    .vmz-ui-query-form {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
 <script client>
 /**
- * VMZ UI — QueryForm (UI5 Console Surface).
- * Dense multi-field query landmark; spacing from density.compact.* tokens.
+ * VMZ UI — QueryForm (Console composition).
+ * Dense multi-field query landmark; single column on narrow screens.
  */
 export default class QueryForm {
-    public label: string = "Query";
+    public label: string = "";
     public onSubmit: (() => void) | null = null;
     onSubmitGuard(ev) {
         if (ev && typeof ev.preventDefault === "function") ev.preventDefault();

package/src/components/RadioGroup.vmz

@@ -1,124 +1,204 @@
-<template>
-    <fieldset data-vmz-ui="radio-group" :data-invalid="invalidAttr" :aria-describedby="describedBy" :disabled="disabled" class="vmz-ui-radio-group">
-        <legend class="vmz-ui-radio-group__legend">
-            {{ label }}
-        </legend>
-        <div role="radiogroup" :aria-label="label" @click="onListClick" class="vmz-ui-radio-group__list">
-            <label v-for="item in items" :key="item.value" :for="item.id" class="vmz-ui-radio-group__option">
-                <input :id="item.id" type="radio" :name="name" :value="item.value" :checked="value === item.value" :disabled="disabled" :data-vmz-radio="item.value" class="vmz-ui-radio-group__input" />
-                <span class="vmz-ui-radio-group__text">
-                    {{ item.label }}
-                </span>
-            </label>
-        </div>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-radio-group__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-radio-group__error">
-            {{ error }}
-        </p>
-    </fieldset>
-</template>
-<style>
-.vmz-ui-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    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__list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-}
-
-.vmz-ui-radio-group__option {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    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:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-radio-group__input:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.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__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);
-}
-</style>
-<script client>
-/**
- * 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;
-        this.emit("change", next);
-        if (typeof this.onChange === "function") this.onChange(next);
-    }
-}
-</script>
+<template>
+    <fieldset data-vmz-ui="radio-group" :data-invalid="invalidAttr" :data-disabled="disabled ? 'true' : 'false'" :aria-describedby="describedBy" :disabled="disabled" class="vmz-ui-radio-group">
+        <legend class="vmz-ui-radio-group__legend">
+            {{ label }}
+        </legend>
+        <div role="radiogroup" :aria-label="label" @click="onListClick" class="vmz-ui-radio-group__list">
+            <label v-for="item in items" :key="item.value" :for="item.id" class="vmz-ui-radio-group__option">
+                <span class="vmz-ui-radio-group__box">
+                    <input :id="item.id" type="radio" :name="name" :value="item.value" :checked="value === item.value" :disabled="disabled" :data-vmz-radio="item.value" class="vmz-ui-radio-group__input" />
+                    <span aria-hidden="true" class="vmz-ui-radio-group__dot" />
+                </span>
+                <span class="vmz-ui-radio-group__text">
+                    {{ item.label }}
+                </span>
+            </label>
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-radio-group__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-radio-group__error">
+            {{ error }}
+        </p>
+    </fieldset>
+</template>
+<style>
+.vmz-ui-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2);
+    width: 100%;
+    max-width: 28rem;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+}
+
+.vmz-ui-radio-group__legend {
+    padding: 0;
+    font: inherit;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-radio-group__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2);
+}
+
+.vmz-ui-radio-group__option {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vmz-space-2);
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+}
+
+.vmz-ui-radio-group__box {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+}
+
+.vmz-ui-radio-group__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    appearance: none;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-pill);
+    background: var(--vmz-surface-paper);
+    outline: none;
+    cursor: pointer;
+    transition:
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-radio-group__input:hover:not(:disabled):not(:checked) {
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-radio-group__input:checked {
+    border-color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-radio-group__input:checked:hover:not(:disabled) {
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-radio-group__input:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-radio-group__input:disabled {
+    cursor: not-allowed;
+}
+
+.vmz-ui-radio-group__dot {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    width: 0.375rem;
+    height: 0.375rem;
+    margin: auto;
+    border-radius: var(--vmz-radius-pill);
+    background: var(--vmz-action-primary-foreground);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-radio-group__input:checked + .vmz-ui-radio-group__dot {
+    opacity: 1;
+}
+
+.vmz-ui-radio-group[data-disabled="true"] {
+    opacity: 0.55;
+}
+
+.vmz-ui-radio-group[data-disabled="true"] .vmz-ui-radio-group__option,
+.vmz-ui-radio-group[data-disabled="true"] .vmz-ui-radio-group__input {
+    cursor: not-allowed;
+}
+
+.vmz-ui-radio-group__text {
+    font-weight: 400;
+}
+
+.vmz-ui-radio-group__description {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+
+.vmz-ui-radio-group__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+
+.vmz-ui-radio-group[data-invalid="true"] .vmz-ui-radio-group__legend {
+    color: var(--vmz-status-danger-foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-radio-group__input,
+    .vmz-ui-radio-group__dot {
+        transition: none;
+    }
+}
+</style>
+<script client>
+/**
+ * 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;
+        this.emit("change", next);
+        if (typeof this.onChange === "function") this.onChange(next);
+    }
+}
+</script>