@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/alert.css

@@ -0,0 +1,159 @@
+/* Alert (inline callout) - spec: specs/alert.md */
+@layer vd.components {
+  .vd-alert {
+    --vd-alert-bg: var(--vd-color-fill);
+    --vd-alert-border: var(--vd-color-border-strong);
+    --vd-alert-icon: var(--vd-color-text-muted);
+    --vd-alert-fg: var(--vd-color-text-muted);
+    --vd-alert-title: var(--vd-color-text);
+    --vd-alert-radius: var(--vd-radius-lg);
+    --vd-alert-padding: var(--vd-space-3) var(--vd-space-4);
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--vd-space-3);
+    padding: var(--vd-alert-padding);
+    border: var(--vd-border-width) solid var(--vd-alert-border);
+    border-radius: var(--vd-alert-radius);
+    background-color: var(--vd-alert-bg);
+    color: var(--vd-alert-fg);
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-normal);
+  }
+
+  .vd-alert[data-variant='info'] {
+    --vd-alert-bg: var(--vd-color-info-subtle);
+    --vd-alert-border: var(--vd-color-info-border);
+    --vd-alert-icon: var(--vd-color-info-text);
+  }
+
+  .vd-alert[data-variant='success'] {
+    --vd-alert-bg: var(--vd-color-success-subtle);
+    --vd-alert-border: var(--vd-color-success-border);
+    --vd-alert-icon: var(--vd-color-success-text);
+  }
+
+  .vd-alert[data-variant='warning'] {
+    --vd-alert-bg: var(--vd-color-warning-subtle);
+    --vd-alert-border: var(--vd-color-warning-border);
+    --vd-alert-icon: var(--vd-color-warning-text);
+  }
+
+  .vd-alert[data-variant='danger'] {
+    --vd-alert-bg: var(--vd-color-danger-subtle);
+    --vd-alert-border: var(--vd-color-danger-border);
+    --vd-alert-icon: var(--vd-color-danger-text);
+  }
+
+  /* Optically centered on the first line of text. */
+  .vd-alert__icon {
+    flex: none;
+    block-size: calc(1em * var(--vd-leading-normal));
+    color: var(--vd-alert-icon);
+  }
+
+  .vd-alert__content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    flex: 1;
+    gap: var(--vd-space-1);
+    min-inline-size: 0;
+  }
+
+  .vd-alert__content > * {
+    margin: 0;
+  }
+
+  .vd-alert__title {
+    color: var(--vd-alert-title);
+    font-weight: var(--vd-weight-semibold);
+  }
+
+  /* Actions or a close button at the end; a ghost icon button sits flush with the corner. */
+  .vd-alert > [slot='end'] {
+    flex: none;
+    max-inline-size: 100%;
+    align-self: center;
+  }
+
+  .vd-alert > .vd-button[slot='end'][data-icon-only] {
+    align-self: flex-start;
+    margin-block: calc(var(--vd-space-1) * -1);
+    margin-inline-end: calc(var(--vd-space-2) * -1);
+  }
+
+  /* Built-in dismiss sits flush with the end edge like a consumer close button. */
+  .vd-alert > .vd-alert__dismiss {
+    align-self: flex-start;
+    margin-block: calc(var(--vd-space-1) * -1);
+    margin-inline-end: calc(var(--vd-space-2) * -1);
+  }
+
+  /* ------------------------------------------------------------- banner */
+
+  /* Full-width strip: edge to edge, separated from the page below by one rule. Title and text
+     share a line when there is room. */
+  .vd-alert[data-layout='banner'] {
+    --vd-alert-radius: 0;
+    --vd-alert-padding: var(--vd-space-2) clamp(var(--vd-space-4), 3vw, var(--vd-space-8));
+
+    align-items: center;
+    border-width: 0;
+    border-block-end-width: var(--vd-border-width);
+  }
+  .vd-alert[data-layout='banner'] > .vd-alert__content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--vd-space-2);
+  }
+  .vd-alert[data-layout='banner'] > .vd-alert__icon {
+    align-self: center;
+  }
+  .vd-alert[data-layout='banner'] > .vd-alert__dismiss {
+    align-self: center;
+    margin-block: 0;
+  }
+
+  /* Narrow banners: text keeps the first row beside the close button; actions drop below the
+     text instead of squeezing it into a one-word column. */
+  .vd-alert[data-layout='banner'] {
+    container-type: inline-size;
+  }
+  @container (width < 36rem) {
+    .vd-alert[data-layout='banner'] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+    }
+    .vd-alert[data-layout='banner']:has(> .vd-alert__icon) {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+    .vd-alert[data-layout='banner'] > .vd-alert__icon {
+      grid-column: 1;
+      grid-row: 1;
+      align-self: start;
+    }
+    .vd-alert[data-layout='banner'] > .vd-alert__content {
+      grid-column: -3;
+      grid-row: 1;
+    }
+    .vd-alert[data-layout='banner'] > .vd-alert__dismiss {
+      grid-column: -2;
+      grid-row: 1;
+      align-self: start;
+    }
+    .vd-alert[data-layout='banner'] > [slot='end']:not(.vd-alert__dismiss) {
+      grid-column: -3 / -1;
+      grid-row: 2;
+      justify-self: start;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-alert {
+      border-color: CanvasText;
+    }
+  }
+}

package/styles/components/autocomplete.css

@@ -0,0 +1,97 @@
+@layer vd.components {
+  .vd-autocomplete {
+    display: contents;
+  }
+
+  .vd-autocomplete__popup {
+    --vd-autocomplete-padding: var(--vd-space-1);
+    --vd-autocomplete-option-padding: var(--vd-space-3);
+    --vd-autocomplete-gap: var(--vd-space-1);
+    --vd-autocomplete-radius: var(--vd-radius-overlay);
+    --vd-autocomplete-border: var(--vd-color-border-strong);
+    --vd-autocomplete-background: var(--vd-color-surface-overlay);
+    --vd-autocomplete-text: var(--vd-color-text);
+    --vd-autocomplete-muted: var(--vd-color-text-muted);
+    --vd-autocomplete-active: var(--vd-color-fill-hover);
+    --vd-autocomplete-ring: var(--vd-color-focus);
+    --vd-autocomplete-font-size: var(--vd-text-sm);
+    --vd-autocomplete-max-height: calc(var(--vd-space-20) * 4);
+    --vd-autocomplete-shadow: var(--vd-shadow-lg);
+
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    min-inline-size: 0;
+    max-inline-size: calc(100dvw - var(--vd-autocomplete-padding) * 2);
+    max-block-size: min(
+      var(--vd-autocomplete-max-height),
+      50dvh,
+      var(--vd-autocomplete-available-block, 50dvh)
+    );
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--vd-autocomplete-padding);
+    border: var(--vd-border-width) solid var(--vd-autocomplete-border);
+    border-radius: var(--vd-autocomplete-radius);
+    background: var(--vd-autocomplete-background);
+    color: var(--vd-autocomplete-text);
+    box-shadow: var(--vd-highlight-top), var(--vd-autocomplete-shadow);
+    font-size: var(--vd-autocomplete-font-size);
+    line-height: var(--vd-leading-normal);
+    scrollbar-width: thin;
+  }
+
+  .vd-autocomplete__popup:not([data-open]) {
+    display: none;
+  }
+  .vd-autocomplete__popup[data-fallback][data-open] {
+    display: block;
+    z-index: 1;
+  }
+
+  .vd-autocomplete__option {
+    display: grid;
+    gap: var(--vd-autocomplete-gap);
+    min-inline-size: 0;
+    padding: var(--vd-autocomplete-option-padding);
+    border-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-autocomplete-radius) - var(--vd-autocomplete-padding))
+    );
+    overflow-wrap: anywhere;
+    cursor: pointer;
+    scroll-margin-block: var(--vd-autocomplete-padding);
+  }
+  .vd-autocomplete__option[data-active] {
+    background: var(--vd-autocomplete-active);
+    outline: var(--vd-border-width) solid var(--vd-autocomplete-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+  .vd-autocomplete__description {
+    color: var(--vd-autocomplete-muted);
+  }
+  .vd-autocomplete__option[aria-disabled='true'] .vd-text-highlight {
+    --vd-text-highlight-fg: currentColor;
+  }
+  .vd-autocomplete__option[aria-disabled='true'] {
+    color: var(--vd-autocomplete-muted);
+    cursor: not-allowed;
+  }
+  .vd-autocomplete__message {
+    padding: var(--vd-autocomplete-option-padding);
+    overflow-wrap: anywhere;
+    color: var(--vd-autocomplete-muted);
+  }
+
+  @media (forced-colors: active) {
+    .vd-autocomplete__popup {
+      border-color: CanvasText;
+    }
+    .vd-autocomplete__option[data-active] {
+      outline-color: Highlight;
+    }
+    .vd-autocomplete__option[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}

package/styles/components/avatar.css

@@ -0,0 +1,90 @@
+/* Avatar - spec: specs/avatar.md */
+@layer vd.components {
+  .vd-avatar {
+    --vd-avatar-size: var(--vd-space-8);
+    --vd-avatar-font-size: var(--vd-text-xs);
+    --vd-avatar-bg: var(--vd-color-action-subtle);
+    --vd-avatar-fg: var(--vd-color-action-text);
+    --vd-avatar-radius: var(--vd-radius-full);
+
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: var(--vd-avatar-size);
+    block-size: var(--vd-avatar-size);
+    overflow: hidden;
+    border-radius: var(--vd-avatar-radius);
+    background-color: var(--vd-avatar-bg);
+    color: var(--vd-avatar-fg);
+    font-size: var(--vd-avatar-font-size);
+    font-weight: var(--vd-weight-bold);
+    line-height: 1;
+    letter-spacing: var(--vd-tracking-tight);
+    vertical-align: middle;
+    user-select: none;
+  }
+
+  .vd-avatar[data-size='sm'] {
+    --vd-avatar-size: var(--vd-space-6);
+    --vd-avatar-font-size: calc(var(--vd-text-xs) * 0.85);
+  }
+
+  .vd-avatar[data-size='lg'] {
+    --vd-avatar-size: var(--vd-space-10);
+    --vd-avatar-font-size: var(--vd-text-sm);
+  }
+
+  .vd-avatar[data-size='xl'] {
+    --vd-avatar-size: var(--vd-space-16);
+    --vd-avatar-font-size: var(--vd-text-xl);
+  }
+
+  /* The image covers the initials once it loads; a broken one is removed. */
+  .vd-avatar__img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* Hairline inside the edge so photos don't bleed into same-colored backgrounds. */
+  .vd-avatar:has(.vd-avatar__img)::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--vd-border-width) var(--vd-color-border);
+  }
+
+  /* --------------------------------------------------------------- group */
+
+  .vd-avatar-group {
+    --vd-avatar-group-ring: var(--vd-color-bg);
+    /* Fraction of each avatar hidden under the next one (scales with size). */
+    --vd-avatar-group-overlap: 0.15;
+
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .vd-avatar-group > .vd-avatar {
+    box-shadow: 0 0 0 calc(var(--vd-border-width) * 2) var(--vd-avatar-group-ring);
+  }
+
+  .vd-avatar-group > .vd-avatar + .vd-avatar {
+    margin-inline-start: calc(var(--vd-avatar-size) * var(--vd-avatar-group-overlap) * -1);
+  }
+
+  /* Inside surfaces the ring matches the surface, so the cut-outs stay invisible. */
+  .vd-card .vd-avatar-group {
+    --vd-avatar-group-ring: var(--vd-card-bg, var(--vd-color-surface));
+  }
+
+  @media (forced-colors: active) {
+    .vd-avatar {
+      border: var(--vd-border-width) solid CanvasText;
+    }
+  }
+}

package/styles/components/badge.css

@@ -0,0 +1,91 @@
+/* Badge - spec: specs/badge.md. Signature: mono eyebrow label. */
+@layer vd.components {
+  .vd-badge {
+    --vd-badge-bg: var(--vd-color-fill);
+    --vd-badge-fg: var(--vd-color-text-muted);
+    --vd-badge-border: var(--vd-color-border);
+    --vd-badge-dot: var(--vd-color-text-subtle);
+    --vd-badge-radius: var(--vd-radius-sm);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-space-1-5);
+    max-inline-size: 100%;
+    min-block-size: var(--vd-space-6);
+    padding-block: var(--vd-space-0-5);
+    padding-inline: var(--vd-space-2);
+    border: var(--vd-border-width) solid var(--vd-badge-border);
+    border-radius: var(--vd-badge-radius);
+    background-color: var(--vd-badge-bg);
+    color: var(--vd-badge-fg);
+    font-family: var(--vd-font-mono);
+    font-size: var(--vd-text-xs);
+    font-weight: var(--vd-weight-medium);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: var(--vd-tracking-caps);
+    line-height: var(--vd-leading-snug);
+    text-transform: uppercase;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  .vd-badge > .vd-icon {
+    --vd-icon-size: 1.15em;
+
+    margin-inline-start: calc(var(--vd-space-0-5) * -1);
+  }
+
+  .vd-badge[data-dot]::before {
+    content: '';
+    flex: none;
+    inline-size: var(--vd-space-1-5);
+    block-size: var(--vd-space-1-5);
+    border-radius: var(--vd-radius-full);
+    background-color: var(--vd-badge-dot);
+  }
+
+  .vd-badge[data-variant='accent'] {
+    --vd-badge-bg: var(--vd-color-action-subtle);
+    --vd-badge-fg: var(--vd-color-action-text);
+    --vd-badge-border: color-mix(in oklch, var(--vd-color-action) 35%, transparent);
+    --vd-badge-dot: var(--vd-color-action);
+  }
+
+  .vd-badge[data-variant='success'] {
+    --vd-badge-bg: var(--vd-color-success-subtle);
+    --vd-badge-fg: var(--vd-color-success-text);
+    --vd-badge-border: var(--vd-color-success-border);
+    --vd-badge-dot: var(--vd-color-success);
+  }
+
+  .vd-badge[data-variant='warning'] {
+    --vd-badge-bg: var(--vd-color-warning-subtle);
+    --vd-badge-fg: var(--vd-color-warning-text);
+    --vd-badge-border: var(--vd-color-warning-border);
+    --vd-badge-dot: var(--vd-color-warning);
+  }
+
+  .vd-badge[data-variant='danger'] {
+    --vd-badge-bg: var(--vd-color-danger-subtle);
+    --vd-badge-fg: var(--vd-color-danger-text);
+    --vd-badge-border: var(--vd-color-danger-border);
+    --vd-badge-dot: var(--vd-color-danger);
+  }
+
+  .vd-badge[data-variant='info'] {
+    --vd-badge-bg: var(--vd-color-info-subtle);
+    --vd-badge-fg: var(--vd-color-info-text);
+    --vd-badge-border: var(--vd-color-info-border);
+    --vd-badge-dot: var(--vd-color-info);
+  }
+
+  @media (forced-colors: active) {
+    .vd-badge {
+      border-color: CanvasText;
+    }
+
+    .vd-badge[data-dot]::before {
+      background-color: CanvasText;
+    }
+  }
+}

package/styles/components/breadcrumbs.css

@@ -0,0 +1,94 @@
+/* Breadcrumbs - spec: specs/breadcrumbs.md */
+@layer vd.components {
+  .vd-breadcrumbs {
+    --vd-breadcrumbs-gap: var(--vd-space-1-5);
+    --vd-breadcrumbs-fg: var(--vd-color-text-muted);
+    --vd-breadcrumbs-fg-current: var(--vd-color-text);
+    --vd-breadcrumbs-separator: var(--vd-color-text-subtle);
+    /* Lucide chevron-right. */
+    --vd-breadcrumbs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+
+    font-size: var(--vd-text-sm);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    line-height: var(--vd-leading-snug);
+  }
+
+  .vd-breadcrumbs > ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--vd-space-1) var(--vd-breadcrumbs-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .vd-breadcrumbs li {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-breadcrumbs-gap);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--vd-breadcrumbs-fg);
+  }
+
+  /* Separator before every item but the first; decorative (list semantics carry the order). */
+  .vd-breadcrumbs li + li::before {
+    content: '';
+    flex: none;
+    inline-size: 0.875em;
+    block-size: 0.875em;
+    background-color: var(--vd-breadcrumbs-separator);
+    mask: var(--vd-breadcrumbs-icon) center / contain no-repeat;
+  }
+
+  .vd-breadcrumbs:dir(rtl) li + li::before {
+    scale: -1 1;
+  }
+
+  .vd-breadcrumbs a {
+    border-radius: var(--vd-radius-xs);
+    color: inherit;
+    text-decoration: none;
+    transition: var(--vd-transition-colors);
+  }
+
+  @media (hover: hover) {
+    .vd-breadcrumbs a:hover {
+      color: var(--vd-breadcrumbs-fg-current);
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  }
+
+  .vd-breadcrumbs a:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  /* Long names truncate; the current page keeps more room than the ancestors. */
+  .vd-breadcrumbs li > :is(a, [aria-current]) {
+    min-inline-size: 0;
+    overflow: hidden;
+    max-inline-size: 16ch;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .vd-breadcrumbs [aria-current='page'] {
+    max-inline-size: 32ch;
+    color: var(--vd-breadcrumbs-fg-current);
+    font-weight: var(--vd-weight-semibold);
+  }
+
+  .vd-breadcrumbs li > .vd-icon:first-child {
+    --vd-icon-size: 1.1em;
+  }
+
+  @media (forced-colors: active) {
+    .vd-breadcrumbs li + li::before {
+      background-color: CanvasText;
+    }
+  }
+}

package/styles/components/button.css

@@ -0,0 +1,174 @@
+/* Button - spec: specs/button.md */
+@layer vd.components {
+  .vd-button {
+    --vd-button-height: var(--vd-control-height-md);
+    --vd-button-padding-inline: var(--vd-space-4);
+    --vd-button-gap: var(--vd-space-2);
+    --vd-button-font-size: var(--vd-text-sm);
+    --vd-button-radius: var(--vd-radius-md);
+    --vd-button-bg: var(--vd-color-fill);
+    --vd-button-bg-hover: var(--vd-color-fill-hover);
+    --vd-button-bg-active: var(--vd-color-fill-active);
+    --vd-button-fg: var(--vd-color-text);
+    --vd-button-fg-hover: var(--vd-button-fg);
+    --vd-button-border: var(--vd-color-border-strong);
+    --vd-button-shadow: none;
+    --vd-button-shadow-hover: var(--vd-button-shadow);
+    --vd-button-sheen: none;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--vd-button-gap);
+    min-block-size: var(--vd-button-height);
+    padding-block: var(--vd-space-1);
+    padding-inline: var(--vd-button-padding-inline);
+    border: var(--vd-border-width) solid var(--vd-button-border);
+    border-radius: var(--vd-button-radius);
+    background-color: var(--vd-button-bg);
+    background-image: var(--vd-button-sheen);
+    box-shadow: var(--vd-button-shadow);
+    color: var(--vd-button-fg);
+    font-family: inherit;
+    font-size: var(--vd-button-font-size);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+    text-align: center;
+    text-decoration: none;
+    text-wrap: balance;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      var(--vd-transition-colors),
+      scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-button:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  .vd-button__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-button-gap);
+    min-inline-size: 0;
+  }
+
+  /* Empty label (icon-only with the icon in a slot) shouldn't add a gap. */
+  .vd-button__label:empty {
+    display: none;
+  }
+
+  /* Optical alignment: icons carry visual padding of their own. */
+  .vd-button > [slot='start'] {
+    margin-inline-start: calc(var(--vd-space-1) * -1);
+  }
+
+  .vd-button > [slot='end'] {
+    margin-inline-end: calc(var(--vd-space-1) * -1);
+  }
+
+  /* ---------------------------------------------------------------- variants */
+
+  .vd-button[data-variant='primary'] {
+    --vd-button-bg: var(--vd-color-action);
+    --vd-button-bg-hover: var(--vd-color-action-hover);
+    --vd-button-bg-active: var(--vd-color-action-active);
+    --vd-button-fg: var(--vd-color-on-action);
+    --vd-button-border: transparent;
+    --vd-button-sheen: linear-gradient(to bottom, var(--vd-color-sheen), transparent);
+    --vd-button-shadow: var(--vd-highlight-top), var(--vd-shadow-sm);
+    --vd-button-shadow-hover: var(--vd-highlight-top), var(--vd-shadow-glow-action);
+  }
+
+  .vd-button[data-variant='ghost'] {
+    --vd-button-bg: transparent;
+    --vd-button-border: transparent;
+    --vd-button-fg: var(--vd-color-text-muted);
+    --vd-button-fg-hover: var(--vd-color-text);
+  }
+
+  .vd-button[data-variant='danger'] {
+    --vd-button-bg: var(--vd-color-danger);
+    --vd-button-bg-hover: var(--vd-color-danger-hover);
+    --vd-button-bg-active: var(--vd-color-danger);
+    --vd-button-fg: var(--vd-color-on-status);
+    --vd-button-border: transparent;
+    --vd-button-sheen: linear-gradient(to bottom, var(--vd-color-sheen), transparent);
+    --vd-button-shadow: var(--vd-highlight-top), var(--vd-shadow-sm);
+  }
+
+  /* ------------------------------------------------------------------- sizes */
+
+  .vd-button[data-size='sm'] {
+    --vd-button-height: var(--vd-control-height-sm);
+    --vd-button-padding-inline: var(--vd-space-3);
+    --vd-button-gap: var(--vd-space-1-5);
+    --vd-button-radius: var(--vd-radius-sm);
+  }
+
+  .vd-button[data-size='lg'] {
+    --vd-button-height: var(--vd-control-height-lg);
+    --vd-button-padding-inline: var(--vd-space-5);
+    --vd-button-font-size: var(--vd-text-md);
+    --vd-button-radius: var(--vd-radius-lg);
+  }
+
+  .vd-button[data-icon-only] {
+    inline-size: var(--vd-button-height);
+    padding-inline: 0;
+  }
+
+  /* ------------------------------------------------------------------ states */
+
+  @media (hover: hover) {
+    .vd-button:not(:disabled, [aria-disabled='true']):hover {
+      background-color: var(--vd-button-bg-hover);
+      box-shadow: var(--vd-button-shadow-hover);
+      color: var(--vd-button-fg-hover);
+    }
+  }
+
+  .vd-button:not(:disabled, [aria-disabled='true']):active {
+    background-color: var(--vd-button-bg-active);
+    scale: var(--vd-press-scale);
+  }
+
+  .vd-button:is(:disabled, [aria-disabled='true']):not([data-loading]) {
+    opacity: var(--vd-opacity-disabled);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  /* Loading keeps the width: content stays in flow (and in the a11y tree), just invisible. */
+  .vd-button[data-loading] {
+    cursor: progress;
+  }
+
+  .vd-button[data-loading] > :not(.vd-button__spinner) {
+    opacity: 0;
+  }
+
+  .vd-button__spinner {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+
+  @media (forced-colors: active) {
+    .vd-button {
+      border-color: ButtonText;
+    }
+
+    .vd-button:is(:disabled, [aria-disabled='true']) {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+}