@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/command.css

@@ -0,0 +1,175 @@
+/* Searchable actions - spec: specs/command.md. Modal ownership stays with Dialog. */
+@layer vd.components {
+  .vd-command {
+    --vd-command-bg: var(--vd-color-surface);
+    --vd-command-border: var(--vd-color-border);
+    --vd-command-radius: var(--vd-radius-surface);
+    --vd-command-padding: var(--vd-space-2);
+    --vd-command-gap: var(--vd-space-2);
+    --vd-command-list-height: calc(var(--vd-space-16) * 4);
+    --vd-command-font-size: var(--vd-text-sm);
+    --vd-command-search-height: var(--vd-control-height-lg);
+    --vd-command-search-border: var(--vd-color-border-control);
+    --vd-command-search-bg: var(--vd-color-field);
+    --vd-command-item-padding: var(--vd-space-3);
+    --vd-command-item-gap: var(--vd-space-3);
+    --vd-command-item-height: var(--vd-control-height-md);
+    --vd-command-item-active-bg: var(--vd-color-fill-hover);
+    --vd-command-item-active-border: var(--vd-color-text-accent);
+
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    min-block-size: 0;
+    max-inline-size: 100%;
+    padding: var(--vd-command-padding);
+    gap: var(--vd-command-gap);
+    border: var(--vd-border-width) solid var(--vd-command-border);
+    border-radius: var(--vd-command-radius);
+    background: var(--vd-command-bg);
+    color: var(--vd-color-text);
+    font-size: var(--vd-command-font-size);
+  }
+
+  .vd-command__search {
+    display: flex;
+    flex: none;
+    align-items: center;
+    min-inline-size: 0;
+    min-block-size: var(--vd-command-search-height);
+    gap: var(--vd-command-item-gap);
+    padding-inline: var(--vd-command-item-padding);
+    border: var(--vd-border-width) solid var(--vd-command-search-border);
+    border-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-command-radius) - var(--vd-command-padding))
+    );
+    background: var(--vd-command-search-bg);
+  }
+
+  .vd-command__search > .vd-icon {
+    color: var(--vd-color-text-subtle);
+  }
+
+  .vd-command__search:has(.vd-command__input:focus-visible) {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+
+  .vd-command__input {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--vd-command-search-height);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+
+  .vd-command__input::placeholder {
+    color: var(--vd-color-text-subtle);
+    opacity: 1;
+  }
+
+  .vd-command__list {
+    min-block-size: 0;
+    max-block-size: var(--vd-command-list-height);
+    overflow: auto;
+    overscroll-behavior-block: contain;
+    scrollbar-width: thin;
+  }
+
+  .vd-command__status {
+    padding: var(--vd-command-item-padding);
+    color: var(--vd-color-text-muted);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  .vd-command__status:empty {
+    display: none;
+  }
+
+  .vd-command-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-inline-size: 0;
+    min-block-size: var(--vd-command-item-height);
+    gap: var(--vd-space-1) var(--vd-command-item-gap);
+    padding: var(--vd-command-item-padding);
+    border: var(--vd-border-width) solid transparent;
+    border-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-command-radius) - var(--vd-command-padding))
+    );
+    line-height: var(--vd-leading-snug);
+    cursor: pointer;
+    user-select: none;
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-command-item > .vd-icon {
+    color: var(--vd-color-text-muted);
+  }
+
+  .vd-command-item__content {
+    display: grid;
+    flex: 1 1 calc(var(--vd-space-16) * 2);
+    min-inline-size: 0;
+    gap: var(--vd-space-1);
+    overflow-wrap: anywhere;
+  }
+
+  .vd-command-item__label {
+    font-weight: var(--vd-weight-medium);
+  }
+
+  .vd-command-item__description,
+  .vd-command-item__shortcut {
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-xs);
+  }
+
+  .vd-command-item__shortcut {
+    margin-inline-start: auto;
+  }
+
+  .vd-command-item[data-active] {
+    background: var(--vd-command-item-active-bg);
+    border-color: var(--vd-command-item-active-border);
+  }
+
+  .vd-command-item[aria-disabled='true'] {
+    color: var(--vd-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-command-item[aria-disabled='true'] :is(.vd-icon, .vd-command-item__description) {
+    color: inherit;
+  }
+
+  .vd-command[data-disabled] .vd-command__search {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    .vd-command,
+    .vd-command__search {
+      border-color: CanvasText;
+    }
+
+    .vd-command-item[data-active] {
+      border-color: Highlight;
+      outline: var(--vd-border-width) solid Highlight;
+      outline-offset: calc(var(--vd-border-width) * -1);
+    }
+
+    .vd-command-item[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}

package/styles/components/copy-button.css

@@ -0,0 +1,58 @@
+@layer vd.components {
+  .vd-copy-button {
+    --vd-copy-button-success-ink: var(--vd-color-success-text);
+    --vd-copy-button-error-ink: var(--vd-color-danger-text);
+    position: relative;
+    display: inline-flex;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    vertical-align: middle;
+  }
+  .vd-copy-button__button {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  .vd-copy-button__labels {
+    display: grid;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-copy-button__labels > span {
+    grid-area: 1 / 1;
+    visibility: hidden;
+  }
+  .vd-copy-button__labels > span[data-visible] {
+    visibility: visible;
+  }
+  .vd-copy-button[data-state='copied'] .vd-copy-button__icon {
+    color: var(--vd-copy-button-success-ink);
+  }
+  .vd-copy-button[data-state='error'] .vd-copy-button__icon {
+    color: var(--vd-copy-button-error-ink);
+  }
+  .vd-copy-button__button[data-variant='primary'] .vd-copy-button__icon,
+  .vd-copy-button__button[data-variant='danger'] .vd-copy-button__icon {
+    color: inherit;
+  }
+  @media (width < 30rem) {
+    .vd-copy-button__button:not([data-icon-only]) {
+      --vd-button-padding-inline: var(--vd-space-1);
+      --vd-button-font-size: var(--vd-text-xs);
+      flex-wrap: wrap;
+    }
+    .vd-copy-button__button:not([data-icon-only]) > .vd-button__label {
+      flex: 1 1 12ch;
+      max-inline-size: 100%;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .vd-copy-button .vd-button__spinner .vd-icon__svg {
+      animation: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-copy-button[data-state] .vd-copy-button__icon {
+      color: ButtonText;
+    }
+  }
+}

package/styles/components/date-range-picker.css

@@ -0,0 +1,153 @@
+@layer vd.components {
+  .vd-date-range-picker {
+    --vd-date-range-picker-gap: var(--vd-space-3);
+    --vd-date-range-picker-fill: var(--vd-color-action-subtle);
+    --vd-date-range-picker-ink: var(--vd-color-action-text);
+    --vd-date-range-picker-error: var(--vd-color-danger-text);
+    display: block;
+    min-inline-size: 0;
+    container-type: inline-size;
+  }
+  .vd-date-range-picker__fields {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+    align-items: end;
+    gap: var(--vd-date-range-picker-gap);
+  }
+  .vd-date-range-picker__field {
+    display: grid;
+    gap: var(--vd-space-1-5);
+    min-inline-size: 0;
+  }
+  .vd-date-range-picker__field label {
+    font-size: var(--vd-text-sm);
+    overflow-wrap: anywhere;
+  }
+  .vd-date-range-picker__field .vd-input {
+    min-inline-size: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .vd-date-range-picker__error {
+    display: flex;
+    align-items: start;
+    gap: var(--vd-space-2);
+    margin-block: var(--vd-space-2) 0;
+    color: var(--vd-date-range-picker-error);
+    font-size: var(--vd-text-sm);
+    overflow-wrap: anywhere;
+  }
+  @container (inline-size < 24rem) {
+    .vd-date-range-picker__fields {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .vd-date-range-picker__field:first-child {
+      grid-column: 1 / -1;
+    }
+  }
+  @position-try --vd-date-range-center {
+    position-area: none;
+    inset: 0;
+    margin: auto;
+  }
+  .vd-date-range-picker__popup {
+    --vd-popover-padding: var(--vd-space-2);
+    inline-size: min(var(--vd-popover-width), 100vw - var(--vd-space-2) * 2);
+    position-try-fallbacks:
+      flip-block,
+      flip-inline,
+      flip-block flip-inline,
+      --vd-date-range-center;
+    block-size: fit-content;
+    container-type: inline-size;
+  }
+  .vd-date-range-picker__popup:popover-open {
+    display: grid;
+    gap: var(--vd-space-3);
+  }
+  .vd-date-range-picker__instruction,
+  .vd-date-range-picker__summary {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-date-range-picker__summary {
+    font-variant-numeric: tabular-nums;
+    color: var(--vd-color-text-muted);
+  }
+  .vd-date-range-picker__popup .vd-calendar {
+    display: grid;
+    min-inline-size: 0;
+    inline-size: 100%;
+  }
+  .vd-date-range-picker__popup .vd-calendar__grid {
+    inline-size: 100%;
+    margin: 0;
+    border-spacing: 0;
+  }
+  .vd-date-range-picker__popup .vd-calendar__day {
+    inline-size: auto;
+  }
+  .vd-date-range-picker__popup .vd-calendar__nav {
+    flex-shrink: 0;
+  }
+  .vd-date-range-picker__popup .vd-calendar__title {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-date-range-picker__popup
+    .vd-calendar__day[data-in-range]:not([data-range-start], [data-range-end]) {
+    background: var(--vd-date-range-picker-fill);
+    color: var(--vd-date-range-picker-ink);
+    box-shadow: none;
+    border-radius: 0;
+  }
+  .vd-date-range-picker__popup .vd-calendar__day:is([data-range-start], [data-range-end]) {
+    outline: var(--vd-border-width) solid var(--vd-date-range-picker-ink);
+    outline-offset: calc(-1 * var(--vd-border-width));
+  }
+  .vd-date-range-picker__popup .vd-calendar__day:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(-1 * var(--vd-focus-ring-width));
+  }
+  .vd-date-range-picker__popup
+    .vd-calendar__day:is([data-range-start], [data-range-end]):focus-visible {
+    outline-color: var(--vd-calendar-selected-fg);
+  }
+  @container (inline-size < 16rem) {
+    .vd-date-range-picker__popup .vd-calendar__header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    .vd-date-range-picker__popup .vd-calendar__title {
+      grid-row: 1;
+      grid-column: 1 / -1;
+      text-align: center;
+    }
+    .vd-date-range-picker__popup .vd-calendar__nav {
+      grid-row: 2;
+    }
+    .vd-date-range-picker__popup .vd-calendar__nav:last-child {
+      justify-self: end;
+    }
+    .vd-date-range-picker__popup .vd-calendar__day {
+      font-size: var(--vd-text-xs);
+      white-space: nowrap;
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-date-range-picker__popup
+      .vd-calendar__day[data-in-range]:not([data-range-start], [data-range-end]) {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-block: var(--vd-border-width) solid Highlight;
+    }
+    .vd-date-range-picker__popup .vd-calendar__day:is([data-range-start], [data-range-end]),
+    .vd-date-range-picker__popup .vd-calendar__day:focus-visible {
+      outline-color: Highlight;
+    }
+    .vd-date-range-picker__popup
+      .vd-calendar__day:is([data-range-start], [data-range-end]):focus-visible {
+      outline-color: HighlightText;
+    }
+  }
+}

package/styles/components/description-list.css

@@ -0,0 +1,69 @@
+@layer vd.components {
+  .vd-description-list {
+    --vd-description-list-gap: var(--vd-space-6);
+    --vd-description-list-value-gap: var(--vd-space-2);
+    --vd-description-list-padding: var(--vd-space-4);
+    --vd-description-list-border: var(--vd-color-border);
+    --vd-description-list-term: var(--vd-color-text-muted);
+    --vd-description-list-value: var(--vd-color-text);
+    --vd-description-list-font-size: var(--vd-text-sm);
+
+    container: vd-description-list / inline-size;
+    min-inline-size: 0;
+    margin: 0;
+    font-size: var(--vd-description-list-font-size);
+    line-height: var(--vd-leading-normal);
+  }
+
+  .vd-description-list > div {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--vd-description-list-value-gap) var(--vd-description-list-gap);
+    padding-block: var(--vd-description-list-padding);
+  }
+
+  .vd-description-list > div + div {
+    border-block-start: var(--vd-border-width) solid var(--vd-description-list-border);
+  }
+
+  .vd-description-list > div > :is(dt, dd) {
+    min-inline-size: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .vd-description-list > div > dt {
+    color: var(--vd-description-list-term);
+    font-weight: var(--vd-weight-medium);
+  }
+
+  .vd-description-list > div > dd {
+    color: var(--vd-description-list-value);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A stacked fallback remains readable without container-query support. */
+  @container vd-description-list (width >= 30rem) {
+    .vd-description-list[data-layout='horizontal'] > div {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+
+    .vd-description-list[data-layout='horizontal'] > div > dt {
+      grid-column: 1;
+    }
+
+    .vd-description-list[data-layout='horizontal'] > div > dd {
+      grid-column: 2;
+    }
+
+    .vd-description-list[data-layout='horizontal'] > div > dt + dd {
+      grid-row: 1;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-description-list > div + div {
+      border-color: CanvasText;
+    }
+  }
+}