@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/time-input.css

@@ -0,0 +1,96 @@
+/* Native time editor: specs/time-input.md. */
+@layer vd.components {
+  .vd-time-input {
+    --vd-time-input-font: var(--vd-font-mono);
+
+    min-inline-size: 0;
+    font-family: var(--vd-time-input-font);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@layer vd.components {
+  vd-time-picker {
+    display: contents;
+  }
+  .vd-time-picker {
+    --vd-time-picker-width: 14rem;
+    --vd-time-picker-height: 16rem;
+    --vd-popover-width: var(--vd-time-picker-width);
+    --vd-popover-padding: var(--vd-space-2);
+    font-family: var(--vd-font-sans);
+    direction: inherit;
+  }
+  .vd-time-picker__heading {
+    padding: var(--vd-space-2) var(--vd-space-3);
+    font-weight: var(--vd-weight-semibold);
+    overflow-wrap: anywhere;
+  }
+  .vd-time-picker__columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--vd-space-2);
+  }
+  .vd-time-picker__column {
+    min-inline-size: 0;
+  }
+  .vd-time-picker__column-label {
+    padding: var(--vd-space-2) var(--vd-space-3);
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-sm);
+  }
+  .vd-time-picker__list {
+    max-block-size: min(var(--vd-time-picker-height), 50dvh);
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-color: var(--vd-color-border-control) var(--vd-color-surface-overlay);
+    padding: var(--vd-space-1);
+  }
+  .vd-time-picker__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--vd-space-1);
+    min-block-size: var(--vd-control-height-md);
+    padding-inline: var(--vd-space-1);
+    border-radius: var(--vd-radius-control);
+    font-family: var(--vd-time-input-font, var(--vd-font-mono));
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+  .vd-time-picker__option > span {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .vd-time-picker__option:hover {
+    background: var(--vd-color-fill-hover);
+  }
+  .vd-time-picker__option[aria-selected='true'] {
+    background: var(--vd-color-action-subtle);
+    color: var(--vd-color-action-text);
+  }
+  .vd-time-picker__option:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(-1 * var(--vd-focus-ring-width));
+  }
+  .vd-time-picker__mark {
+    --vd-icon-size: var(--vd-space-3);
+    visibility: hidden;
+  }
+  .vd-time-picker__option[aria-selected='true'] .vd-time-picker__mark {
+    visibility: visible;
+  }
+  .vd-time-picker__empty {
+    padding: var(--vd-space-3);
+  }
+  @media (forced-colors: active) {
+    .vd-time-picker__option[aria-selected='true'] {
+      color: HighlightText;
+      background: Highlight;
+      forced-color-adjust: none;
+    }
+    .vd-time-picker__option:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/styles/components/timeline.css

@@ -0,0 +1,182 @@
+/* Informational history. Native actions retain their own control behavior. */
+@layer vd.components {
+  .vd-timeline {
+    --vd-timeline-gap: var(--vd-space-4);
+    --vd-timeline-item-gap: var(--vd-space-6);
+    --vd-timeline-marker-size: var(--vd-space-8);
+    --vd-timeline-marker-radius: var(--vd-radius-full);
+    --vd-timeline-connector: var(--vd-color-border-control);
+    --vd-timeline-title-size: var(--vd-text-sm);
+    --vd-timeline-description-size: var(--vd-text-sm);
+    --vd-timeline-meta-size: var(--vd-text-xs);
+    --vd-timeline-marker-bg: var(--vd-color-surface-raised);
+    --vd-timeline-marker-fg: var(--vd-color-text-muted);
+    --vd-timeline-marker-border: var(--vd-color-border-control);
+    --vd-timeline-success-bg: var(--vd-color-success-subtle);
+    --vd-timeline-success-fg: var(--vd-color-success-text);
+    --vd-timeline-warning-bg: var(--vd-color-warning-subtle);
+    --vd-timeline-warning-fg: var(--vd-color-warning-text);
+    --vd-timeline-danger-bg: var(--vd-color-danger-subtle);
+    --vd-timeline-danger-fg: var(--vd-color-danger-text);
+    --vd-timeline-info-bg: var(--vd-color-info-subtle);
+    --vd-timeline-info-fg: var(--vd-color-info-text);
+
+    display: block;
+    container: vd-timeline / inline-size;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .vd-timeline-item {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--vd-timeline-marker-size) minmax(0, 1fr);
+    column-gap: var(--vd-timeline-gap);
+    min-inline-size: 0;
+    padding-block-end: var(--vd-timeline-item-gap);
+    color: var(--vd-color-text);
+  }
+
+  .vd-timeline-item:last-child {
+    padding-block-end: 0;
+  }
+
+  .vd-timeline-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: calc(var(--vd-timeline-marker-size) / 2);
+    inset-block-start: calc(var(--vd-timeline-marker-size) + var(--vd-space-1));
+    inset-block-end: var(--vd-space-1);
+    inline-size: var(--vd-border-width);
+    background: var(--vd-timeline-connector);
+    pointer-events: none;
+  }
+
+  .vd-timeline-item__marker {
+    display: grid;
+    place-items: center;
+    inline-size: var(--vd-timeline-marker-size);
+    block-size: var(--vd-timeline-marker-size);
+    border: var(--vd-border-width) solid var(--vd-timeline-marker-border);
+    border-radius: var(--vd-timeline-marker-radius);
+    background: var(--vd-timeline-marker-bg);
+    color: var(--vd-timeline-marker-fg);
+  }
+
+  .vd-timeline-item__marker .vd-icon {
+    --vd-icon-size: var(--vd-space-4);
+  }
+
+  .vd-timeline-item__dot {
+    inline-size: var(--vd-space-1-5);
+    block-size: var(--vd-space-1-5);
+    border-radius: var(--vd-radius-full);
+    background: currentColor;
+  }
+
+  .vd-timeline-item__content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    min-inline-size: 0;
+    gap: var(--vd-space-2);
+    padding-block-start: var(--vd-space-1);
+    overflow-wrap: anywhere;
+  }
+
+  .vd-timeline-item__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--vd-space-1) var(--vd-space-3);
+    font-size: var(--vd-timeline-meta-size);
+    line-height: var(--vd-leading-normal);
+  }
+
+  .vd-timeline-item__time {
+    color: var(--vd-color-text-muted);
+    font-family: var(--vd-font-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .vd-timeline-item__status {
+    color: var(--vd-timeline-marker-fg);
+    font-weight: var(--vd-weight-medium);
+  }
+
+  .vd-timeline-item__title {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    margin: 0;
+    font-size: var(--vd-timeline-title-size);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+  }
+
+  .vd-timeline-item__description {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    margin: 0;
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-timeline-description-size);
+    line-height: var(--vd-leading-normal);
+  }
+
+  .vd-timeline-item[data-status='success'] {
+    --vd-timeline-marker-bg: var(--vd-timeline-success-bg);
+    --vd-timeline-marker-fg: var(--vd-timeline-success-fg);
+    --vd-timeline-marker-border: var(--vd-timeline-success-fg);
+  }
+
+  .vd-timeline-item[data-status='warning'] {
+    --vd-timeline-marker-bg: var(--vd-timeline-warning-bg);
+    --vd-timeline-marker-fg: var(--vd-timeline-warning-fg);
+    --vd-timeline-marker-border: var(--vd-timeline-warning-fg);
+  }
+
+  .vd-timeline-item[data-status='danger'] {
+    --vd-timeline-marker-bg: var(--vd-timeline-danger-bg);
+    --vd-timeline-marker-fg: var(--vd-timeline-danger-fg);
+    --vd-timeline-marker-border: var(--vd-timeline-danger-fg);
+  }
+
+  .vd-timeline-item[data-status='info'] {
+    --vd-timeline-marker-bg: var(--vd-timeline-info-bg);
+    --vd-timeline-marker-fg: var(--vd-timeline-info-fg);
+    --vd-timeline-marker-border: var(--vd-timeline-info-fg);
+  }
+
+  /* Structural breakpoint: retain reading width when a narrow container enlarges text. */
+  @container vd-timeline (width < 12rem) {
+    .vd-timeline-item {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--vd-space-2);
+    }
+
+    .vd-timeline-item::after {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-timeline-item__dot {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    .vd-timeline-item__marker {
+      border-color: CanvasText;
+      color: CanvasText;
+    }
+
+    .vd-timeline-item__status {
+      color: CanvasText;
+    }
+
+    .vd-timeline-item::after {
+      background: CanvasText;
+    }
+  }
+}

package/styles/components/toast.css

@@ -0,0 +1,146 @@
+/* Toast - spec: specs/toast.md */
+@layer vd.components {
+  .vd-toaster {
+    --vd-toaster-gap: var(--vd-space-2);
+    --vd-toaster-margin: var(--vd-space-4);
+    --vd-toaster-width: 24rem;
+
+    /* Geometry on the base rule (D45); popover UA styles are replaced, not relied on. */
+    position: fixed;
+    inset: auto;
+    inset-block-end: max(var(--vd-toaster-margin), env(safe-area-inset-bottom));
+    inset-inline-end: var(--vd-toaster-margin);
+    inline-size: min(var(--vd-toaster-width), 100vw - var(--vd-toaster-margin) * 2);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    color: var(--vd-color-text);
+  }
+
+  .vd-toaster__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vd-toaster-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .vd-toast {
+    --vd-toast-icon: var(--vd-color-text-muted);
+
+    display: flex;
+    align-items: flex-start;
+    gap: var(--vd-space-3);
+    padding: var(--vd-space-3) var(--vd-space-3) var(--vd-space-3) var(--vd-space-4);
+    border: var(--vd-border-width) solid var(--vd-color-border-strong);
+    border-radius: var(--vd-radius-surface);
+    background-color: var(--vd-color-surface-overlay);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-lg);
+
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+    transition:
+      opacity var(--vd-duration-base) var(--vd-ease-out),
+      translate var(--vd-duration-slow) var(--vd-ease-spring),
+      scale var(--vd-duration-slow) var(--vd-ease-spring);
+
+    @starting-style {
+      opacity: 0;
+      translate: 0 var(--vd-space-4);
+      scale: 0.98;
+    }
+  }
+
+  .vd-toast[data-state='leaving'] {
+    opacity: 0;
+    translate: var(--vd-space-6) 0;
+    pointer-events: none;
+    transition:
+      opacity var(--vd-duration-base) var(--vd-ease-in),
+      translate var(--vd-duration-base) var(--vd-ease-in);
+  }
+
+  .vd-toast[data-state='leaving']:dir(rtl) {
+    translate: calc(var(--vd-space-6) * -1) 0;
+  }
+
+  .vd-toast[data-variant='success'] {
+    --vd-toast-icon: var(--vd-color-success-text);
+  }
+
+  .vd-toast[data-variant='warning'] {
+    --vd-toast-icon: var(--vd-color-warning-text);
+  }
+
+  .vd-toast[data-variant='danger'] {
+    --vd-toast-icon: var(--vd-color-danger-text);
+  }
+
+  .vd-toast[data-variant='info'] {
+    --vd-toast-icon: var(--vd-color-info-text);
+  }
+
+  .vd-toast__icon {
+    --vd-icon-size: var(--vd-space-5);
+
+    margin-block-start: var(--vd-space-1-5);
+    color: var(--vd-toast-icon);
+  }
+
+  .vd-toast__content {
+    display: grid;
+    flex: 1;
+    gap: var(--vd-space-0-5);
+    min-inline-size: 0;
+    padding-block: var(--vd-space-1-5);
+  }
+
+  .vd-toast__title {
+    margin: 0;
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+    text-wrap: pretty;
+  }
+
+  .vd-toast__description {
+    margin: 0;
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-snug);
+    text-wrap: pretty;
+  }
+
+  .vd-toast__action {
+    flex: none;
+  }
+
+  .vd-toast__close {
+    flex: none;
+    color: var(--vd-color-text-subtle);
+  }
+
+  /* Phones: full width at the bottom, newest closest to the thumb. */
+  @media (width < 40rem) {
+    .vd-toaster {
+      --vd-toaster-margin: var(--vd-space-3);
+
+      inset-inline: var(--vd-toaster-margin);
+      inline-size: auto;
+    }
+
+    .vd-toast[data-state='leaving'] {
+      translate: 0 var(--vd-space-6);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-toast {
+      border-color: CanvasText;
+    }
+  }
+}

package/styles/components/toolbar.css

@@ -0,0 +1,72 @@
+@layer vd.components {
+  .vd-toolbar {
+    --vd-toolbar-gap: var(--vd-space-2);
+    --vd-toolbar-padding: var(--vd-space-2);
+    --vd-toolbar-radius: var(--vd-radius-lg);
+    --vd-toolbar-bg: var(--vd-color-surface);
+    --vd-toolbar-border: var(--vd-color-border);
+    --vd-toolbar-separator: var(--vd-color-border-strong);
+    --vd-toolbar-pressed-bg: var(--vd-color-fill);
+    --vd-toolbar-pressed-fg: var(--vd-color-text);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--vd-toolbar-gap);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding: var(--vd-toolbar-padding);
+    padding-inline: min(var(--vd-toolbar-padding), 3%);
+    border: var(--vd-border-width) solid var(--vd-toolbar-border);
+    border-radius: var(--vd-toolbar-radius);
+    background: var(--vd-toolbar-bg);
+  }
+  .vd-toolbar__group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--vd-toolbar-gap);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  .vd-toolbar__item {
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  @media (width < 30rem) {
+    .vd-toolbar__item:not([data-icon-only]) {
+      padding-inline: min(var(--vd-button-padding-inline), 5%);
+    }
+  }
+  .vd-toolbar__item[aria-pressed='true'] {
+    --vd-button-bg: var(--vd-toolbar-pressed-bg);
+    --vd-button-fg: var(--vd-toolbar-pressed-fg);
+    --vd-button-border: var(--vd-toolbar-separator);
+  }
+  .vd-toolbar__separator {
+    flex: none;
+    inline-size: var(--vd-border-width);
+    block-size: var(--vd-space-6);
+    background: var(--vd-toolbar-separator);
+  }
+  .vd-toolbar[data-orientation='vertical'],
+  .vd-toolbar__group[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .vd-toolbar__separator[data-orientation='vertical'] {
+    inline-size: 100%;
+    block-size: var(--vd-border-width);
+  }
+  @media (forced-colors: active) {
+    .vd-toolbar {
+      border-color: CanvasText;
+    }
+    .vd-toolbar__separator {
+      background: CanvasText;
+    }
+    .vd-toolbar__item[aria-pressed='true'] {
+      border-color: Highlight;
+    }
+  }
+}

package/styles/components/tooltip.css

@@ -0,0 +1,93 @@
+/* Tooltip - spec: specs/tooltip.md */
+@layer vd.components {
+  .vd-tooltip {
+    --vd-tooltip-bg: var(--vd-color-surface-strong);
+    --vd-tooltip-fg: var(--vd-color-text-on-strong);
+    --vd-tooltip-offset: var(--vd-space-2);
+    --vd-tooltip-shift: var(--vd-space-1);
+    --vd-tooltip-max-width: 18rem;
+    /* Where it slides in from: a little away from the anchor. */
+    --vd-tooltip-from: 0 var(--vd-tooltip-shift);
+
+    /* Geometry on the base rule (never on :popover-open) - see DECISIONS D45. */
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    position-area: block-start;
+    margin-block-end: var(--vd-tooltip-offset);
+    position-try-fallbacks: flip-block;
+    max-inline-size: min(var(--vd-tooltip-max-width), 100vw - var(--vd-space-4) * 2);
+    padding: var(--vd-space-1-5) var(--vd-space-2);
+    border: var(--vd-border-width) solid var(--vd-color-border);
+    border-radius: var(--vd-radius-sm);
+    background-color: var(--vd-tooltip-bg);
+    box-shadow: var(--vd-shadow-md);
+    color: var(--vd-tooltip-fg);
+    font-family: var(--vd-font-sans);
+    font-size: var(--vd-text-xs);
+    font-weight: var(--vd-weight-medium);
+    line-height: var(--vd-leading-snug);
+    text-align: center;
+    text-wrap: balance;
+    overflow-wrap: break-word;
+
+    opacity: 0;
+    translate: var(--vd-tooltip-from);
+    transition:
+      opacity var(--vd-duration-fast) var(--vd-ease-out),
+      translate var(--vd-duration-base) var(--vd-ease-out),
+      display var(--vd-duration-fast) allow-discrete,
+      overlay var(--vd-duration-fast) allow-discrete;
+  }
+
+  .vd-tooltip[data-placement='bottom'] {
+    position-area: block-end;
+    margin-block: var(--vd-tooltip-offset) 0;
+    --vd-tooltip-from: 0 calc(var(--vd-tooltip-shift) * -1);
+  }
+
+  .vd-tooltip[data-placement='start'] {
+    position-area: inline-start;
+    margin: 0;
+    margin-inline-end: var(--vd-tooltip-offset);
+    position-try-fallbacks: flip-inline;
+    --vd-tooltip-from: var(--vd-tooltip-shift) 0;
+  }
+
+  .vd-tooltip[data-placement='end'] {
+    position-area: inline-end;
+    margin: 0;
+    margin-inline-start: var(--vd-tooltip-offset);
+    position-try-fallbacks: flip-inline;
+    --vd-tooltip-from: calc(var(--vd-tooltip-shift) * -1) 0;
+  }
+
+  .vd-tooltip:popover-open {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  @starting-style {
+    .vd-tooltip:popover-open {
+      opacity: 0;
+      translate: var(--vd-tooltip-from);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-tooltip {
+      border-color: CanvasText;
+    }
+  }
+}
+
+/* RTL: start/end sides swap, so the slide-in direction does too. */
+@layer vd.components {
+  .vd-tooltip[data-placement='start']:dir(rtl) {
+    --vd-tooltip-from: calc(var(--vd-tooltip-shift) * -1) 0;
+  }
+
+  .vd-tooltip[data-placement='end']:dir(rtl) {
+    --vd-tooltip-from: var(--vd-tooltip-shift) 0;
+  }
+}

package/styles/components/tree.css

@@ -0,0 +1,88 @@
+@layer vd.components {
+  .vd-tree {
+    --vd-tree-gap: var(--vd-space-1);
+    --vd-tree-indent: var(--vd-space-4);
+    --vd-tree-padding: var(--vd-space-2);
+    --vd-tree-radius: var(--vd-radius-sm);
+    --vd-tree-height: var(--vd-control-height-md);
+    --vd-tree-bg-hover: var(--vd-color-fill-hover);
+    --vd-tree-bg-selected: var(--vd-color-fill);
+    --vd-tree-fg: var(--vd-color-text);
+    --vd-tree-muted: var(--vd-color-text-muted);
+    --vd-tree-ring: var(--vd-color-focus);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--vd-tree-fg);
+    min-inline-size: 0;
+  }
+  .vd-tree__group {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: min(var(--vd-tree-indent), 10%);
+    list-style: none;
+  }
+  .vd-tree-item {
+    min-inline-size: 0;
+    outline: none;
+  }
+  .vd-tree-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-tree-gap);
+    min-block-size: var(--vd-tree-height);
+    padding: var(--vd-tree-padding);
+    border-radius: var(--vd-tree-radius);
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+  .vd-tree-item__label {
+    min-inline-size: 0;
+    flex: 1;
+    overflow-wrap: anywhere;
+  }
+  .vd-tree-item__toggle,
+  .vd-tree-item__check {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--vd-space-6);
+    block-size: var(--vd-space-6);
+    color: var(--vd-tree-muted);
+  }
+  .vd-tree-item__check {
+    inline-size: var(--vd-space-4);
+  }
+  .vd-tree-item:not([data-selected]) > .vd-tree-item__row > .vd-tree-item__check {
+    display: none;
+  }
+  .vd-tree-item[data-selected] > .vd-tree-item__row {
+    background: var(--vd-tree-bg-selected);
+  }
+  .vd-tree-item:focus-visible > .vd-tree-item__row,
+  .vd-tree:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-tree-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+  .vd-tree-item[data-disabled] > .vd-tree-item__row {
+    color: var(--vd-tree-muted);
+    cursor: not-allowed;
+  }
+  @media (hover: hover) {
+    .vd-tree-item:not([data-disabled]) > .vd-tree-item__row:hover {
+      background: var(--vd-tree-bg-hover);
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-tree-item[data-selected] > .vd-tree-item__row {
+      outline: var(--vd-border-width) solid Highlight;
+    }
+    .vd-tree-item:focus-visible > .vd-tree-item__row,
+    .vd-tree:focus-visible {
+      outline-color: Highlight;
+    }
+    .vd-tree-item[data-disabled] > .vd-tree-item__row {
+      color: GrayText;
+    }
+  }
+}