@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/menu.css

@@ -0,0 +1,168 @@
+/* Menu - spec: specs/menu.md */
+@layer vd.components {
+  .vd-menu {
+    --vd-menu-padding: var(--vd-space-1);
+    --vd-menu-radius: var(--vd-radius-lg);
+    --vd-menu-min-width: 12rem;
+
+    /* Geometry on the base rule (D45). */
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    margin-block-start: var(--vd-space-1);
+    position-area: block-end span-inline-end;
+    position-try-fallbacks:
+      flip-block,
+      flip-inline,
+      flip-block flip-inline;
+    /* Grow to the longest item, within limits; longer items wrap. */
+    inline-size: max-content;
+    min-inline-size: max(var(--vd-menu-min-width), anchor-size(inline));
+    max-inline-size: min(22rem, 100vw - var(--vd-space-4) * 2);
+    max-block-size: min(24rem, 70dvh);
+    padding: var(--vd-menu-padding);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: var(--vd-border-width) solid var(--vd-color-border-strong);
+    border-radius: var(--vd-menu-radius);
+    background-color: var(--vd-color-surface-overlay);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-lg);
+    color: var(--vd-color-text);
+
+    opacity: 0;
+    scale: 0.97;
+    transform-origin: top;
+    transition:
+      opacity var(--vd-duration-fast) var(--vd-ease-out),
+      scale var(--vd-duration-base) var(--vd-ease-spring),
+      display var(--vd-duration-fast) allow-discrete,
+      overlay var(--vd-duration-fast) allow-discrete;
+  }
+
+  .vd-menu:popover-open {
+    opacity: 1;
+    scale: 1;
+  }
+
+  @starting-style {
+    .vd-menu:popover-open {
+      opacity: 0;
+      scale: 0.97;
+    }
+  }
+
+  .vd-menu:focus {
+    outline: none;
+  }
+
+  .vd-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-space-2);
+    inline-size: 100%;
+    min-block-size: var(--vd-control-height-sm);
+    padding-block: var(--vd-space-1-5);
+    padding-inline: var(--vd-space-3) var(--vd-space-2);
+    border: 0;
+    border-radius: max(var(--vd-radius-xs), calc(var(--vd-menu-radius) - var(--vd-menu-padding)));
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-snug);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .vd-menu__item > .vd-icon {
+    --vd-icon-size: var(--vd-space-4);
+
+    color: var(--vd-color-text-muted);
+  }
+
+  /* Shortcut / meta text at the end, in the mono label style. */
+  .vd-menu__item > [slot='end'] {
+    margin-inline-start: auto;
+    padding-inline-start: var(--vd-space-4);
+    color: var(--vd-color-text-subtle);
+    font-family: var(--vd-font-mono);
+    font-size: var(--vd-text-xs);
+    letter-spacing: var(--vd-tracking-caps);
+  }
+
+  .vd-menu__item:focus {
+    outline: none;
+  }
+
+  .vd-menu__item:focus-visible,
+  .vd-menu__item:focus {
+    background-color: var(--vd-color-fill-hover);
+  }
+
+  .vd-menu__item[data-variant='danger'] {
+    color: var(--vd-color-danger-text);
+  }
+
+  .vd-menu__item[data-variant='danger'] > .vd-icon {
+    color: currentColor;
+  }
+
+  .vd-menu__item[data-variant='danger']:focus {
+    background-color: var(--vd-color-danger-subtle);
+  }
+
+  .vd-menu__item[aria-disabled='true'] {
+    color: var(--vd-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-menu__separator {
+    block-size: var(--vd-border-width);
+    margin-block: var(--vd-space-1);
+    margin-inline: calc(var(--vd-menu-padding) * -1);
+    border: 0;
+    background-color: var(--vd-color-border);
+  }
+
+  /* Signature: mono eyebrow as group heading. */
+  .vd-menu__label {
+    padding: var(--vd-space-2) var(--vd-space-3) var(--vd-space-1);
+    /* Muted, not subtle: small text on the overlay surface needs the stronger tone for AA. */
+    color: var(--vd-color-text-muted);
+    font-family: var(--vd-font-mono);
+    font-size: var(--vd-text-xs);
+    font-weight: var(--vd-weight-medium);
+    letter-spacing: var(--vd-tracking-caps);
+    text-transform: uppercase;
+  }
+
+  @media (forced-colors: active) {
+    .vd-menu {
+      border-color: CanvasText;
+    }
+
+    .vd-menu__item:focus {
+      outline: var(--vd-border-width) solid Highlight;
+    }
+  }
+
+  /* --------------------------------------------------------- context menu */
+
+  /* Zero-size point at the pointer (or focused element) that the menu anchors to, so the
+     regular position-try flipping keeps the menu on screen. Coordinates are set inline. */
+  .vd-context-menu__anchor {
+    position: fixed;
+    inset-block-start: var(--vd-context-y, 0);
+    inset-inline-start: var(--vd-context-x, 0);
+    inline-size: 0;
+    block-size: 0;
+    pointer-events: none;
+  }
+
+  /* Long-press opens the menu on touch; suppress the platform callout in that region. */
+  .vd-context-menu-target {
+    -webkit-touch-callout: none;
+  }
+}

package/styles/components/multi-select.css

@@ -0,0 +1,156 @@
+/* Multiple selection shares the select field tokens and listbox/option styles. */
+@layer vd.components {
+  .vd-multi-select {
+    --vd-multi-select-gap: var(--vd-space-1);
+    --vd-multi-select-chip-bg: var(--vd-color-action-subtle);
+    --vd-multi-select-chip-fg: var(--vd-color-action-text);
+    --vd-multi-select-chip-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-select-radius) - var(--vd-space-1))
+    );
+    --vd-multi-select-remove-size: var(--vd-space-6);
+    --vd-multi-select-input-width: calc(var(--vd-control-height-lg) * 2);
+  }
+
+  .vd-multi-select__field {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--vd-multi-select-gap);
+    min-block-size: var(--vd-select-height);
+    padding: var(--vd-space-1) var(--vd-select-padding-inline);
+    border: var(--vd-border-width) solid var(--vd-select-border);
+    border-radius: var(--vd-select-radius);
+    background: var(--vd-select-bg);
+    color: var(--vd-color-text);
+    font-size: var(--vd-select-font-size);
+    line-height: var(--vd-leading-snug);
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-multi-select__field:has(:focus-visible) {
+    border-color: var(--vd-select-ring);
+    outline: var(--vd-focus-ring-width) solid var(--vd-select-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+
+  .vd-multi-select__input {
+    flex: 1 1 var(--vd-multi-select-input-width);
+    inline-size: 0;
+    min-inline-size: min(var(--vd-multi-select-input-width), 100%);
+    min-block-size: var(--vd-multi-select-remove-size);
+    padding: 0;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  .vd-multi-select__input::placeholder {
+    color: var(--vd-color-text-subtle);
+    opacity: 1;
+  }
+
+  .vd-multi-select__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-multi-select-gap);
+    max-inline-size: 100%;
+    padding-inline-start: var(--vd-space-2);
+    border-radius: var(--vd-multi-select-chip-radius);
+    background: var(--vd-multi-select-chip-bg);
+    color: var(--vd-multi-select-chip-fg);
+    font-size: var(--vd-text-sm);
+  }
+
+  .vd-multi-select__label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .vd-multi-select__remove {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--vd-multi-select-remove-size);
+    block-size: var(--vd-multi-select-remove-size);
+    padding: 0;
+    border: 0;
+    border-radius: var(--vd-multi-select-chip-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-multi-select__remove vd-icon {
+    --vd-icon-size: var(--vd-space-3);
+  }
+
+  .vd-multi-select__remove:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-select-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+
+  .vd-multi-select__remove:disabled {
+    color: var(--vd-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-multi-select[data-disabled] .vd-multi-select__field {
+    cursor: not-allowed;
+  }
+
+  @media (hover: hover) {
+    .vd-multi-select:not([data-disabled]) .vd-multi-select__field:hover {
+      border-color: var(--vd-select-border-hover);
+    }
+
+    .vd-multi-select__remove:not(:disabled):hover {
+      background: var(--vd-color-fill-hover);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-multi-select__remove:not(:disabled):active {
+      scale: var(--vd-press-scale);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-multi-select__list {
+      translate: none;
+    }
+
+    @starting-style {
+      .vd-multi-select__list:popover-open {
+        translate: none;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-multi-select__field,
+    .vd-multi-select__chip {
+      border: var(--vd-border-width) solid CanvasText;
+    }
+
+    .vd-multi-select__remove:disabled {
+      color: GrayText;
+    }
+  }
+
+  /* An unanchored browser still gets a usable, viewport-bounded panel. */
+  @supports not (position-area: block-end) {
+    .vd-multi-select__list {
+      inset: var(--vd-space-4);
+      min-inline-size: 0;
+      block-size: fit-content;
+      margin: auto;
+      translate: none;
+    }
+  }
+}

package/styles/components/navigation-list.css

@@ -0,0 +1,147 @@
+@layer vd.components {
+  .vd-navigation-list {
+    --vd-navigation-list-gap: var(--vd-space-1);
+    --vd-navigation-list-group-gap: var(--vd-space-6);
+    --vd-navigation-list-padding: var(--vd-space-3);
+    --vd-navigation-list-font-size: var(--vd-text-sm);
+    --vd-navigation-list-label-size: var(--vd-text-xs);
+    --vd-navigation-list-radius: var(--vd-radius-control);
+    --vd-navigation-list-text: var(--vd-color-text-muted);
+    --vd-navigation-list-hover-text: var(--vd-color-text);
+    --vd-navigation-list-hover-bg: var(--vd-color-fill-hover);
+    --vd-navigation-list-active-bg: var(--vd-color-fill-active);
+    --vd-navigation-list-current-bg: var(--vd-color-action-subtle);
+    --vd-navigation-list-current-text: var(--vd-color-text);
+    --vd-navigation-list-current-indicator: var(--vd-color-text-accent);
+    --vd-navigation-list-icon-size: var(--vd-space-5);
+    --vd-navigation-list-focus: var(--vd-color-focus);
+
+    display: grid;
+    gap: var(--vd-navigation-list-group-gap);
+    container: vd-navigation-list / inline-size;
+    min-inline-size: 0;
+    font-size: var(--vd-navigation-list-font-size);
+    line-height: var(--vd-leading-normal);
+  }
+
+  .vd-navigation-list :where(section, li) {
+    min-inline-size: 0;
+  }
+  .vd-navigation-list ul {
+    display: grid;
+    gap: var(--vd-navigation-list-gap);
+    margin: 0;
+    padding: calc(var(--vd-focus-ring-width) + var(--vd-focus-ring-offset));
+    list-style: none;
+  }
+  .vd-navigation-label {
+    margin: 0;
+    padding-inline: calc(
+      var(--vd-navigation-list-padding) + var(--vd-focus-ring-width) + var(--vd-focus-ring-offset)
+    );
+    padding-block-end: var(--vd-navigation-list-gap);
+    color: var(--vd-navigation-list-text);
+    font-size: var(--vd-navigation-list-label-size);
+    font-weight: var(--vd-weight-semibold);
+    /* Heading tracking is tuned for display sizes; it collapses word gaps at label size. */
+    letter-spacing: var(--vd-tracking-normal);
+    overflow-wrap: anywhere;
+  }
+  .vd-navigation-link {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+    align-items: center;
+    gap: var(--vd-navigation-list-gap) var(--vd-navigation-list-padding);
+    min-inline-size: 0;
+    min-block-size: var(--vd-control-height-md);
+    padding: var(--vd-navigation-list-padding);
+    border-inline-start: var(--vd-focus-ring-width) solid transparent;
+    border-radius: var(--vd-navigation-list-radius);
+    color: var(--vd-navigation-list-text);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+    transition: var(--vd-transition-colors);
+  }
+  .vd-navigation-link:has(> [slot='start']) {
+    grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
+  }
+  .vd-navigation-link > :not([slot]) {
+    min-inline-size: 0;
+    grid-column: 1;
+  }
+  .vd-navigation-link:has(> [slot='start']) > :not([slot]) {
+    grid-column: 2;
+  }
+  .vd-navigation-link > [slot='start'] {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: start;
+  }
+  .vd-navigation-link > .vd-icon[slot='start'] {
+    --vd-icon-size: var(--vd-navigation-list-icon-size);
+  }
+  .vd-navigation-link > [slot='end'] {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    white-space: normal;
+  }
+  .vd-navigation-link:has(> [slot='start']) > [slot='end'] {
+    grid-column: 3;
+  }
+  @media (hover: hover) {
+    .vd-navigation-link:hover {
+      background: var(--vd-navigation-list-hover-bg);
+      color: var(--vd-navigation-list-hover-text);
+    }
+  }
+  .vd-navigation-link:is([aria-current='page'], [aria-current='location'], [aria-current='true']) {
+    border-inline-start-color: var(--vd-navigation-list-current-indicator);
+    background: var(--vd-navigation-list-current-bg);
+    color: var(--vd-navigation-list-current-text);
+    font-weight: var(--vd-weight-semibold);
+  }
+  .vd-navigation-link:active {
+    background: var(--vd-navigation-list-active-bg);
+  }
+  .vd-navigation-link:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-navigation-list-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+  @container vd-navigation-list (width < 14rem) {
+    .vd-navigation-link > [slot='end'] {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      justify-self: start;
+    }
+    .vd-navigation-link:has(> [slot='start']) > [slot='end'] {
+      grid-column: 2 / -1;
+    }
+  }
+  /* Decorative icons yield space to full labels under extreme text enlargement. */
+  @container vd-navigation-list (width < 12rem) {
+    .vd-navigation-link,
+    .vd-navigation-link:has(> [slot='start']) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .vd-navigation-link > [slot='start'] {
+      display: none;
+    }
+    .vd-navigation-link:has(> [slot='start']) > :not([slot]),
+    .vd-navigation-link > [slot='end'],
+    .vd-navigation-link:has(> [slot='start']) > [slot='end'] {
+      grid-column: 1;
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-navigation-link:is(
+      [aria-current='page'],
+      [aria-current='location'],
+      [aria-current='true']
+    ) {
+      border-inline-start-color: Highlight;
+    }
+  }
+}

package/styles/components/number-input.css

@@ -0,0 +1,33 @@
+@layer vd.components {
+  .vd-number-input {
+    --vd-number-input-button-size: calc(var(--vd-input-height) - var(--vd-space-2));
+    --vd-number-input-gap: var(--vd-space-1);
+    --vd-number-input-padding: var(--vd-space-1);
+    gap: var(--vd-number-input-gap);
+    padding-inline: var(--vd-number-input-padding);
+  }
+  .vd-number-input > .vd-button[slot] {
+    inline-size: min(var(--vd-number-input-button-size), 20%);
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+  .vd-number-input > .vd-button > vd-icon {
+    max-inline-size: 100%;
+    flex-shrink: 1;
+  }
+  .vd-number-input__input {
+    appearance: textfield;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  .vd-number-input__input::-webkit-inner-spin-button,
+  .vd-number-input__input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  @media (forced-colors: active) {
+    .vd-number-input {
+      border-color: CanvasText;
+    }
+  }
+}

package/styles/components/otp-input.css

@@ -0,0 +1,26 @@
+/* Native OTP editing and Field semantics: specs/otp-input.md. */
+@layer vd.components {
+  .vd-otp-input {
+    --vd-otp-input-font: var(--vd-font-mono);
+    --vd-otp-input-font-size: var(--vd-text-lg);
+    --vd-otp-input-tracking: var(--vd-space-2);
+
+    inline-size: min(
+      100%,
+      calc(
+        var(--vd-otp-input-length) * (1ch + var(--vd-otp-input-tracking)) +
+          var(--vd-input-padding-inline) * 2 + var(--vd-border-width) * 2
+      )
+    );
+    min-inline-size: 0;
+    font-family: var(--vd-otp-input-font);
+    font-size: var(--vd-otp-input-font-size);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: var(--vd-otp-input-tracking);
+    text-align: start;
+  }
+
+  .vd-otp-input[data-size='sm'] {
+    --vd-otp-input-font-size: var(--vd-text-md);
+  }
+}

package/styles/components/pagination.css

@@ -0,0 +1,127 @@
+/* Pagination - spec: specs/pagination.md */
+@layer vd.components {
+  .vd-pagination {
+    --vd-pagination-size: var(--vd-control-height-sm);
+    --vd-pagination-radius: var(--vd-radius-control);
+    --vd-pagination-gap: var(--vd-space-1);
+    --vd-pagination-fg: var(--vd-color-text-muted);
+    --vd-pagination-fg-hover: var(--vd-color-text);
+    --vd-pagination-bg-hover: var(--vd-color-fill);
+    --vd-pagination-bg-current: var(--vd-color-surface-raised);
+    --vd-pagination-border-current: var(--vd-color-border-strong);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-pagination-gap);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    /* Keep numbered pages intact and Tab-reachable in a bounded, named navigation area. */
+    overflow: auto;
+    scroll-padding: calc(var(--vd-focus-ring-width) + var(--vd-focus-ring-offset));
+    padding: calc(var(--vd-focus-ring-width) + var(--vd-focus-ring-offset));
+    font-size: var(--vd-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .vd-pagination[data-size='sm'] {
+    --vd-pagination-size: calc(var(--vd-control-height-sm) - var(--vd-space-2));
+    --vd-pagination-radius: var(--vd-radius-sm);
+
+    font-size: var(--vd-text-xs);
+  }
+
+  .vd-pagination__pages {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--vd-pagination-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .vd-pagination__page,
+  .vd-pagination__step {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    min-inline-size: var(--vd-pagination-size);
+    block-size: var(--vd-pagination-size);
+    padding-inline: var(--vd-space-2);
+    border: var(--vd-border-width) solid transparent;
+    border-radius: var(--vd-pagination-radius);
+    background: transparent;
+    color: var(--vd-pagination-fg);
+    font: inherit;
+    font-weight: var(--vd-weight-semibold);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      var(--vd-transition-colors),
+      scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-pagination__step {
+    padding-inline: 0;
+  }
+
+  @media (hover: hover) {
+    :is(.vd-pagination__page, .vd-pagination__step):not(
+        [aria-current='page'],
+        [aria-disabled='true']
+      ):hover {
+      background-color: var(--vd-pagination-bg-hover);
+      color: var(--vd-pagination-fg-hover);
+    }
+  }
+
+  :is(.vd-pagination__page, .vd-pagination__step):focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  :is(.vd-pagination__page, .vd-pagination__step):not([aria-disabled='true']):active {
+    scale: var(--vd-press-scale);
+  }
+
+  .vd-pagination__page[aria-current='page'] {
+    border-color: var(--vd-pagination-border-current);
+    background-color: var(--vd-pagination-bg-current);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-sm);
+    color: var(--vd-color-text);
+    cursor: default;
+  }
+
+  .vd-pagination__step[aria-disabled='true'] {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-pagination__ellipsis {
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: var(--vd-pagination-size);
+    color: var(--vd-color-text-muted);
+  }
+
+  .vd-pagination__status {
+    flex: none;
+    min-inline-size: 5ch;
+    padding-inline: var(--vd-space-2);
+    color: var(--vd-color-text-muted);
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(.vd-pagination__page, .vd-pagination__step):active {
+      scale: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-pagination__page[aria-current='page'] {
+      border-color: Highlight;
+    }
+  }
+}

package/styles/components/password-input.css

@@ -0,0 +1,20 @@
+@layer vd.components {
+  .vd-password-input {
+    --vd-password-input-button-size: calc(var(--vd-input-height) - var(--vd-space-2));
+    --vd-password-input-gap: var(--vd-space-2);
+    gap: var(--vd-password-input-gap);
+  }
+  .vd-password-input > .vd-button[slot='end'] {
+    inline-size: min(var(--vd-password-input-button-size), 25%);
+    padding-inline: 0;
+  }
+  .vd-password-input > .vd-button > vd-icon {
+    max-inline-size: 100%;
+    flex-shrink: 1;
+  }
+  @media (forced-colors: active) {
+    .vd-password-input {
+      border-color: CanvasText;
+    }
+  }
+}