@vmz/ui 0.1.0 → 0.1.2

package/src/components/TextArea.vmz

@@ -1,91 +1,118 @@
 <template>
   <div class="vmz-ui-textarea" data-vmz-ui="textarea" data-invalid={invalidAttr}>
-    <label if={label} class="vmz-ui-textarea__label" for={controlId}>{label}</label>
-    <textarea
-      id={controlId}
-      class="vmz-ui-textarea__control"
-      rows={rows}
-      value={value}
-      disabled={disabled}
-      readonly={readonly}
-      aria-invalid={error ? 'true' : 'false'}
-      aria-describedby={describedBy}
-      onInput={onInput}
-    ></textarea>
-    <p if={description} id={descriptionId} class="vmz-ui-textarea__description">{description}</p>
-    <p if={error} id={errorId} class="vmz-ui-textarea__error" role="alert">{error}</p>
-  </div>
+      <label if={label} class="vmz-ui-textarea__label" for={controlId}>{label}</label>
+      <textarea
+        id={controlId}
+        class="vmz-ui-textarea__control"
+        rows={rows}
+        value={value}
+        disabled={disabled}
+        readonly={readonly}
+        aria-invalid={error ? 'true' : 'false'}
+        aria-describedby={describedBy}
+        onInput={onInput}
+      ></textarea>
+      <p if={description} id={descriptionId} class="vmz-ui-textarea__description">{description}</p>
+      <p if={error} id={errorId} class="vmz-ui-textarea__error" role="alert">{error}</p>
+    </div>
 </template>
 
 <style>
-.vmz-ui-textarea {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  max-width: 28rem;
-}
+  .vmz-ui-textarea {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    max-width: none;
+    width: 100%;
+  }
 
 .vmz-ui-textarea__label {
   font: inherit;
-  font-weight: 600;
+  font-weight: 500;
+  font-size: 0.875rem;
 }
 
 .vmz-ui-textarea__control {
-  font: inherit;
-  min-height: 6rem;
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-  background: transparent;
-  color: inherit;
+  box-sizing: border-box;
+  width: 100%;
+  font-family: var(--vmz-font-sans, inherit);
+  font-size: 0.875rem;
+  line-height: 1.5715;
+  min-height: 5.5rem;
+  padding: var(--vmz-density-control-padding-y, 0.25rem)
+    var(--vmz-density-control-padding-x, 0.75rem);
+  border: 1px solid var(--vmz-line-default, #d9d9d9);
+  border-radius: var(--vmz-radius-md, 6px);
+  background: var(--vmz-surface-paper, #fff);
+  color: var(--vmz-text-ink, inherit);
   outline: none;
   resize: vertical;
+  transition:
+    border-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear),
+    box-shadow var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear);
+}
+
+.vmz-ui-textarea__control::placeholder {
+  color: var(--vmz-text-steel, #8c8c8c);
+  opacity: 1;
 }
 
 .vmz-ui-textarea[data-invalid='true'] .vmz-ui-textarea__control {
   border-color: var(--vmz-status-danger-accent);
 }
 
+.vmz-ui-textarea__control:hover:not(:disabled):not(:focus-visible) {
+  border-color: var(--vmz-action-primary-background);
+}
+
 .vmz-ui-textarea__control:focus-visible {
+  border-color: var(--vmz-action-primary-background);
   box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
 
+.vmz-ui-textarea__control:disabled,
+.vmz-ui-textarea__control:read-only {
+  cursor: default;
+  background: var(--vmz-surface-mist, #fafafa);
+}
+
 .vmz-ui-textarea__control:disabled {
-  opacity: 0.55;
   cursor: not-allowed;
+  opacity: 0.55;
 }
 
 .vmz-ui-textarea__description {
   margin: 0;
-  opacity: 0.75;
-  font-size: 0.9em;
+  color: var(--vmz-text-steel, #8c8c8c);
+  font-size: 0.875rem;
+  line-height: 1.4;
 }
 
 .vmz-ui-textarea__error {
   margin: 0;
   color: var(--vmz-status-danger-foreground);
-  font-size: 0.9em;
+  font-size: 0.875rem;
 }
 </style>
 
 <script client>
 /**
- * VMZ UI — TextArea.
- * Same label/description/error ownership contract as Field; parent owns value.
- */
+* VMZ UI — TextArea.
+* Same label/description/error ownership contract as Field; parent owns value.
+*/
 export default class TextArea {
-  public label: string = '';
-  public description: string = '';
-  public error: string = '';
-  public value: string = '';
-  public rows: number = 4;
-  public disabled: boolean = false;
-  public readonly: boolean = false;
-  public invalidAttr: string = 'false';
-  public controlId: string = 'vmz-textarea';
-  public descriptionId: string = 'vmz-textarea-desc';
-  public errorId: string = 'vmz-textarea-err';
-  public describedBy: string = '';
-  public onInput: ((e: Event) => void) | null = null;
+	public label: string = "";
+	public description: string = "";
+	public error: string = "";
+	public value: string = "";
+	public rows: number = 4;
+	public disabled: boolean = false;
+	public readonly: boolean = false;
+	public invalidAttr: string = "false";
+	public controlId: string = "vmz-textarea";
+	public descriptionId: string = "vmz-textarea-desc";
+	public errorId: string = "vmz-textarea-err";
+	public describedBy: string = "";
+	public onInput: ((e: Event) => void) | null = null;
 }
 </script>

package/src/components/Timeline.vmz

@@ -1,67 +1,72 @@
 <template>
   <ol class="vmz-ui-timeline" data-vmz-ui="timeline" aria-label={label}>
-    <li each={items} as="item" key={item.id} class="vmz-ui-timeline__item" data-vmz-audit={item.id}>
-      <p class="vmz-ui-timeline__time">{item.time}</p>
-      <p class="vmz-ui-timeline__title">{item.title}</p>
-      <p if={item.detail} class="vmz-ui-timeline__detail">{item.detail}</p>
-    </li>
-  </ol>
+      <li each={items} as="item" key={item.id} class="vmz-ui-timeline__item" data-vmz-audit={item.id}>
+        <p class="vmz-ui-timeline__time">{item.time}</p>
+        <p class="vmz-ui-timeline__title">{item.title}</p>
+        <p if={item.detail} class="vmz-ui-timeline__detail">{item.detail}</p>
+      </li>
+    </ol>
 </template>
 
 <style>
-.vmz-ui-timeline {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--vmz-density-compact-gap);
-  border-left: 2px solid var(--vmz-action-primary-background);
-}
+  .vmz-ui-timeline {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-density-compact-gap);
+    border-left: 2px solid var(--vmz-line-default);
+  }
 
-.vmz-ui-timeline__item {
-  position: relative;
-  padding: 0.15rem 0 0.15rem 0.85rem;
-}
+  .vmz-ui-timeline__item {
+    position: relative;
+    padding: 0.15rem 0 0.15rem 0.85rem;
+  }
 
-.vmz-ui-timeline__item::before {
-  content: '';
-  position: absolute;
-  left: -0.35rem;
-  top: 0.45rem;
-  width: 0.55rem;
-  height: 0.55rem;
-  border-radius: 999px;
-  background: var(--vmz-action-primary-background);
-}
+  .vmz-ui-timeline__item::before {
+    content: '';
+    position: absolute;
+    left: -0.35rem;
+    top: 0.45rem;
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 999px;
+    background: var(--vmz-action-primary-background);
+  }
 
-.vmz-ui-timeline__time {
-  margin: 0;
-  font-size: 0.85em;
-  opacity: 0.75;
-  color: var(--vmz-action-primary-active);
-}
+  .vmz-ui-timeline__time {
+    margin: 0;
+    font-size: 0.85em;
+    opacity: 0.75;
+    color: var(--vmz-action-primary-active);
+  }
 
-.vmz-ui-timeline__title {
-  margin: 0.15rem 0 0;
-  font-weight: 700;
-  color: var(--vmz-action-primary-active);
-}
+  .vmz-ui-timeline__title {
+    margin: 0.15rem 0 0;
+    font-weight: 700;
+    color: var(--vmz-action-primary-active);
+  }
 
-.vmz-ui-timeline__detail {
-  margin: 0.2rem 0 0;
-  opacity: 0.9;
-}
+  .vmz-ui-timeline__detail {
+    margin: 0.2rem 0 0;
+    opacity: 0.9;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Timeline (UI5 Console audit trail).
- * Parent owns audit items; stable ids for list identity.
- */
+* VMZ UI — Timeline (UI5 Console audit trail).
+* Parent owns audit items; stable ids for list identity.
+*/
 export default class Timeline {
-  public label: string = 'Audit';
-  /** @type {{ id: string, time: string, title: string, detail?: string }[]} */
-  public items: { id: string; time: string; title: string; detail?: string }[] = [];
+	public label: string = "Audit";
+	/** @type {{ id: string, time: string, title: string, detail?: string }[]} */
+	public items: {
+		id: string;
+		time: string;
+		title: string;
+		detail?: string;
+	}[] = [];
 }
 </script>

package/src/components/Toc.vmz

@@ -1,77 +1,81 @@
 <template>
   <aside class="vmz-ui-toc" data-vmz-ui="toc" aria-label={label}>
-    <p class="vmz-ui-toc__title">{label}</p>
-    <nav class="vmz-ui-toc__nav">
-      <a
-        each={items}
-        as="item"
-        key={item.id}
-        class="vmz-ui-toc__link"
-        href={item.href}
-        data-vmz-toc={item.id}
-      >
-        {item.title}
-      </a>
-    </nav>
-  </aside>
+      <p class="vmz-ui-toc__title">{label}</p>
+      <nav class="vmz-ui-toc__nav">
+        <a
+          each={items}
+          as="item"
+          key={item.id}
+          class="vmz-ui-toc__link"
+          href={item.href}
+          data-vmz-toc={item.id}
+        >
+          {item.title}
+        </a>
+      </nav>
+    </aside>
 </template>
 
 <style>
-.vmz-ui-toc {
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-  min-width: 11rem;
-  padding: 0.85rem 0.75rem;
-  border: 1px solid var(--vmz-line-default);
-  border-radius: 2px;
-  background: var(--vmz-surface-mist);
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-toc {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    min-width: 11rem;
+    padding: 0.85rem 0.75rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-toc__title {
-  margin: 0;
-  font-family: var(--vmz-font-display);
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--vmz-text-steel);
-}
+  .vmz-ui-toc__title {
+    margin: 0;
+    font-family: var(--vmz-font-display);
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--vmz-text-steel);
+  }
 
-.vmz-ui-toc__nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
+  .vmz-ui-toc__nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
 
-.vmz-ui-toc__link {
-  font: inherit;
-  font-weight: 600;
-  font-size: 0.92rem;
-  text-decoration: none;
-  color: var(--vmz-action-primary-active);
-  outline: none;
-}
+  .vmz-ui-toc__link {
+    font: inherit;
+    font-weight: 600;
+    font-size: 0.92rem;
+    text-decoration: none;
+    color: var(--vmz-action-primary-active);
+    outline: none;
+  }
 
-.vmz-ui-toc__link:hover {
-  color: var(--vmz-action-primary-background);
-}
+  .vmz-ui-toc__link:hover {
+    color: var(--vmz-action-primary-background);
+  }
 
-.vmz-ui-toc__link:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  border-radius: 2px;
-}
+  .vmz-ui-toc__link:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    border-radius: var(--vmz-radius-md, 6px);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Toc (Document/Product composition).
- * In-page outline; parent supplies items. Readable without JS.
- */
+* VMZ UI — Toc (Document/Product composition).
+* In-page outline; parent supplies items. Readable without JS.
+*/
 export default class Toc {
-  public label: string = 'On this page';
-  /** @type {{ id: string, title: string, href: string }[]} */
-  public items: { id: string; title: string; href: string }[] = [];
+	public label: string = "On this page";
+	/** @type {{ id: string, title: string, href: string }[]} */
+	public items: {
+		id: string;
+		title: string;
+		href: string;
+	}[] = [];
 }
 </script>

package/src/components/Tooltip.vmz

@@ -1,68 +1,68 @@
 <template>
   <div
-    class="vmz-ui-tooltip"
-    data-vmz-ui="tooltip"
-    data-open={openAttr}
-  >
-    <div class="vmz-ui-tooltip__trigger" data-vmz-tooltip="trigger">
-      <slot />
-    </div>
-    <div
-      if={open}
-      class="vmz-ui-tooltip__bubble"
-      role="tooltip"
-      id={tooltipId}
-      data-vmz-tooltip="bubble"
+      class="vmz-ui-tooltip"
+      data-vmz-ui="tooltip"
+      data-open={openAttr}
     >
-      {content}
+      <div class="vmz-ui-tooltip__trigger" data-vmz-tooltip="trigger">
+        <slot />
+      </div>
+      <div
+        if={open}
+        class="vmz-ui-tooltip__bubble"
+        role="tooltip"
+        id={tooltipId}
+        data-vmz-tooltip="bubble"
+      >
+        {content}
+      </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-tooltip {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.35rem;
-  max-width: 28rem;
-}
+  .vmz-ui-tooltip {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.35rem;
+    max-width: 28rem;
+  }
 
-.vmz-ui-tooltip__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-}
+  .vmz-ui-tooltip__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
 
-.vmz-ui-tooltip__bubble {
-  box-sizing: border-box;
-  max-width: 18rem;
-  padding: 0.4rem 0.65rem;
-  border: 1px solid var(--vmz-line-default);
-  border-radius: 2px;
-  background: var(--vmz-surface-paper);
-  color: var(--vmz-text-ink);
-  font-size: 0.88rem;
-  line-height: 1.4;
-  box-shadow: 0 1px 0 color-mix(in srgb, var(--vmz-line-default) 70%, transparent);
-}
+  .vmz-ui-tooltip__bubble {
+    box-sizing: border-box;
+    max-width: 18rem;
+    padding: 0.4rem 0.65rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    font-size: 0.88rem;
+    line-height: 1.4;
+    box-shadow: 0 1px 0 color-mix(in srgb, var(--vmz-line-default) 70%, transparent);
+  }
 
-.vmz-ui-tooltip[data-open='true'] .vmz-ui-tooltip__trigger :where(button, a, [tabindex]):focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-tooltip[data-open='true'] .vmz-ui-tooltip__trigger :where(button, a, [tabindex]):focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Tooltip.
- * Parent owns live `open` + content string. Not a second overlay runtime;
- * Escape/outside policies stay with richer Popover/Dialog when needed.
- */
+* VMZ UI — Tooltip.
+* Parent owns live `open` + content string. Not a second overlay runtime;
+* Escape/outside policies stay with richer Popover/Dialog when needed.
+*/
 export default class Tooltip {
-  public open: boolean = false;
-  public openAttr: string = 'false';
-  public content: string = '';
-  public tooltipId: string = 'vmz-tooltip';
+	public open: boolean = false;
+	public openAttr: string = "false";
+	public content: string = "";
+	public tooltipId: string = "vmz-tooltip";
 }
 </script>