@vadem/ui 0.0.0-stage → 0.0.2

package/styles/components/switch.css

@@ -0,0 +1,107 @@
+/* Switch - spec: specs/switch.md */
+@layer vd.components {
+  .vd-switch {
+    --vd-switch-width: 2.25rem;
+    --vd-switch-height: 1.25rem;
+    --vd-switch-padding: var(--vd-space-0-5);
+    --vd-switch-thumb: calc(
+      var(--vd-switch-height) - var(--vd-switch-padding) * 2 - var(--vd-border-width) * 2
+    );
+    --vd-switch-travel: calc(var(--vd-switch-width) - var(--vd-switch-height));
+    --vd-switch-track: var(--vd-color-border-control);
+    --vd-switch-track-hover: var(--vd-color-border-control-hover);
+    --vd-switch-track-on: var(--vd-color-action);
+    --vd-switch-track-on-hover: var(--vd-color-action-hover);
+    --vd-switch-thumb-color: var(--vd-neutral-0);
+    --vd-switch-direction: 1;
+
+    appearance: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    inline-size: var(--vd-switch-width);
+    block-size: var(--vd-switch-height);
+    margin: 0;
+    padding: var(--vd-switch-padding);
+    border: var(--vd-border-width) solid transparent;
+    border-radius: var(--vd-radius-full);
+    background-color: var(--vd-switch-track);
+    vertical-align: middle;
+    cursor: pointer;
+    transition:
+      var(--vd-transition-colors),
+      scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-switch:dir(rtl) {
+    --vd-switch-direction: -1;
+  }
+
+  .vd-switch::before {
+    content: '';
+    inline-size: var(--vd-switch-thumb);
+    block-size: var(--vd-switch-thumb);
+    border-radius: var(--vd-radius-full);
+    background-color: var(--vd-switch-thumb-color);
+    box-shadow: var(--vd-shadow-sm);
+    transition: translate var(--vd-duration-base) var(--vd-ease-spring);
+  }
+
+  .vd-switch:checked {
+    --vd-switch-track: var(--vd-switch-track-on);
+    --vd-switch-track-hover: var(--vd-switch-track-on-hover);
+
+    box-shadow: var(--vd-highlight-top);
+  }
+
+  .vd-switch:checked::before {
+    translate: calc(var(--vd-switch-travel) * var(--vd-switch-direction)) 0;
+  }
+
+  @media (hover: hover) {
+    .vd-switch:not(:disabled):hover,
+    .vd-choice:has(> .vd-switch:not(:disabled)):hover > .vd-switch {
+      background-color: var(--vd-switch-track-hover);
+    }
+  }
+
+  .vd-switch:not(:disabled):active {
+    scale: var(--vd-press-scale);
+  }
+
+  .vd-switch:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  .vd-switch[data-invalid] {
+    border-color: var(--vd-color-danger);
+  }
+
+  .vd-switch:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    .vd-switch {
+      forced-color-adjust: none;
+      border-color: ButtonText;
+      background-color: Canvas;
+    }
+
+    .vd-switch::before {
+      background-color: ButtonText;
+    }
+
+    .vd-switch:checked {
+      border-color: Highlight;
+      background-color: Highlight;
+    }
+
+    .vd-switch:checked::before {
+      background-color: HighlightText;
+    }
+  }
+}

package/styles/components/table.css

@@ -0,0 +1,195 @@
+/* Table (native) - spec: specs/table.md */
+@layer vd.components {
+  .vd-table {
+    --vd-table-font-size: var(--vd-text-sm);
+    --vd-table-cell-padding-block: var(--vd-space-3);
+    --vd-table-cell-padding-inline: var(--vd-space-4);
+    --vd-table-border: var(--vd-color-border);
+    --vd-table-header-fg: var(--vd-color-text-muted);
+    --vd-table-header-bg: var(--vd-color-surface);
+    --vd-table-row-hover: var(--vd-color-fill);
+    --vd-table-row-selected: var(--vd-color-action-subtle);
+
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--vd-table-font-size);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .vd-table[data-size='sm'] {
+    --vd-table-cell-padding-block: var(--vd-space-2);
+    --vd-table-cell-padding-inline: var(--vd-space-3);
+  }
+
+  .vd-table caption {
+    padding-block-end: var(--vd-space-3);
+    color: var(--vd-color-text-muted);
+    text-align: start;
+  }
+
+  .vd-table :is(th, td) {
+    padding: var(--vd-table-cell-padding-block) var(--vd-table-cell-padding-inline);
+    border-block-end: var(--vd-border-width) solid var(--vd-table-border);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  /* Header: mono eyebrow labels. */
+  .vd-table thead th {
+    color: var(--vd-table-header-fg);
+    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;
+    white-space: nowrap;
+  }
+
+  /* Row headers (`<th scope="row">`) read as the strongest cell of the row. */
+  .vd-table tbody th {
+    font-weight: var(--vd-weight-semibold);
+  }
+
+  .vd-table tbody tr:last-child > :is(th, td) {
+    border-block-end: 0;
+  }
+
+  .vd-table :is(th, td)[data-numeric] {
+    text-align: end;
+  }
+
+  /* Checkbox (or other control) columns stay as narrow as their content. */
+  .vd-table :is(th, td):has(> .vd-checkbox:only-child) {
+    inline-size: 1%;
+    padding-inline-end: 0;
+  }
+
+  .vd-table tbody tr {
+    transition: var(--vd-transition-colors);
+  }
+
+  @media (hover: hover) {
+    .vd-table tbody tr:not(:has(> .vd-table__empty)):hover {
+      background-color: var(--vd-table-row-hover);
+    }
+  }
+
+  .vd-table tbody tr[data-selected],
+  .vd-table tbody tr[data-selected]:hover {
+    background-color: var(--vd-table-row-selected);
+  }
+
+  /* ---------------------------------------------------------------- sort */
+
+  .vd-table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-space-1);
+    margin-inline: calc(var(--vd-space-1) * -1);
+    padding: var(--vd-space-0-5) var(--vd-space-1);
+    border: 0;
+    border-radius: var(--vd-radius-xs);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+
+  /* Numeric columns align to the end: the icon goes first so the labels line up with values. */
+  [data-numeric] > .vd-table__sort {
+    flex-direction: row-reverse;
+  }
+
+  .vd-table__sort:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: 0;
+  }
+
+  .vd-table__sort-icon {
+    --vd-icon-size: calc(var(--vd-space-3) + var(--vd-space-0-5));
+
+    opacity: 0;
+    transition: opacity var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  @media (hover: hover) {
+    .vd-table__sort:hover {
+      color: var(--vd-color-text);
+    }
+
+    .vd-table__sort:hover .vd-table__sort-icon {
+      opacity: 0.6;
+    }
+  }
+
+  .vd-table__sort:focus-visible .vd-table__sort-icon {
+    opacity: 0.6;
+  }
+
+  th[data-sorted] {
+    color: var(--vd-color-text);
+  }
+
+  th[data-sorted] .vd-table__sort-icon {
+    opacity: 1;
+    color: var(--vd-color-text-accent);
+  }
+
+  /* --------------------------------------------------------------- empty */
+
+  .vd-table__empty {
+    padding-block: var(--vd-space-12);
+    color: var(--vd-color-text-muted);
+    text-align: center;
+  }
+
+  /* -------------------------------------------------------------- scroll */
+
+  .vd-table-scroll {
+    max-inline-size: 100%;
+    overflow: auto;
+    overscroll-behavior-inline: contain;
+    border-radius: inherit;
+  }
+
+  .vd-table-scroll:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-focus-ring-width) * -1);
+  }
+
+  .vd-table[data-sticky-header] thead th {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    background-color: var(--vd-table-header-bg);
+  }
+
+  /* A card holding only a table: edge-to-edge rows, header matches the card surface. */
+  .vd-card:has(> :is(.vd-table-scroll, .vd-table):only-child) {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .vd-card .vd-table {
+    --vd-table-header-bg: var(--vd-card-bg);
+  }
+
+  .vd-card:has(> :is(.vd-table-scroll, .vd-table):only-child) .vd-table :is(th, td):first-child {
+    padding-inline-start: var(--vd-card-padding);
+  }
+
+  .vd-card:has(> :is(.vd-table-scroll, .vd-table):only-child) .vd-table :is(th, td):last-child {
+    padding-inline-end: var(--vd-card-padding);
+  }
+
+  @media (forced-colors: active) {
+    .vd-table tbody tr[data-selected] {
+      outline: var(--vd-border-width) solid Highlight;
+      outline-offset: calc(var(--vd-border-width) * -1);
+    }
+  }
+}

package/styles/components/tabs.css

@@ -0,0 +1,198 @@
+/* Tabs - spec: specs/tabs.md */
+@layer vd.components {
+  .vd-tabs {
+    --vd-tabs-gap: var(--vd-space-1);
+    --vd-tabs-tab-height: var(--vd-control-height-md);
+    --vd-tabs-tab-padding: var(--vd-space-3);
+    --vd-tabs-fg: var(--vd-color-text-muted);
+    --vd-tabs-fg-hover: var(--vd-color-text);
+    --vd-tabs-fg-active: var(--vd-color-text);
+    --vd-tabs-indicator: var(--vd-color-action);
+    --vd-tabs-indicator-size: calc(var(--vd-border-width) * 2);
+    --vd-tabs-radius: var(--vd-radius-md);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--vd-space-4);
+    min-inline-size: 0;
+  }
+
+  .vd-tabs[data-orientation='vertical'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .vd-tabs__list {
+    display: flex;
+    gap: var(--vd-tabs-gap);
+    max-inline-size: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+  }
+
+  .vd-tabs[data-orientation='vertical'] > .vd-tabs__list {
+    flex-direction: column;
+    flex: 0 1 auto;
+    min-inline-size: 0;
+  }
+
+  .vd-tabs__tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--vd-space-2);
+    flex: none;
+    min-block-size: var(--vd-tabs-tab-height);
+    padding-inline: var(--vd-tabs-tab-padding);
+    border: 0;
+    border-radius: var(--vd-tabs-radius);
+    background: transparent;
+    color: var(--vd-tabs-fg);
+    font-family: inherit;
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+
+  @media (hover: hover) {
+    .vd-tabs__tab:not(:disabled, [aria-selected='true']):hover {
+      color: var(--vd-tabs-fg-hover);
+    }
+  }
+
+  .vd-tabs__tab[aria-selected='true'] {
+    color: var(--vd-tabs-fg-active);
+  }
+
+  .vd-tabs__tab:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-focus-ring-width) * -1);
+  }
+
+  .vd-tabs__tab:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-tabs__tab > .vd-badge {
+    min-block-size: auto;
+    padding-block: 0;
+  }
+
+  /* Library-level guarantee even without the reset layer. */
+  .vd-tabs__panel[hidden] {
+    display: none;
+  }
+
+  .vd-tabs__panel {
+    min-inline-size: 0;
+  }
+
+  .vd-tabs__panel:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+    border-radius: var(--vd-radius-sm);
+  }
+
+  /* -------------------------------------------------------------- line */
+
+  .vd-tabs[data-variant='line'] > .vd-tabs__list {
+    border-block-end: var(--vd-border-width) solid var(--vd-color-border);
+  }
+
+  .vd-tabs[data-variant='line'] .vd-tabs__tab {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  @media (hover: hover) {
+    .vd-tabs[data-variant='line'] .vd-tabs__tab:not(:disabled, [aria-selected='true']):hover {
+      background-color: var(--vd-color-fill);
+    }
+  }
+
+  .vd-tabs[data-variant='line'] .vd-tabs__tab::after {
+    content: '';
+    position: absolute;
+    inset-inline: var(--vd-tabs-tab-padding);
+    inset-block-end: calc(var(--vd-border-width) * -1);
+    block-size: var(--vd-tabs-indicator-size);
+    border-radius: var(--vd-radius-full);
+    background-color: var(--vd-tabs-indicator);
+    opacity: 0;
+    scale: 0.4 1;
+    transition:
+      opacity var(--vd-duration-fast) var(--vd-ease-out),
+      scale var(--vd-duration-base) var(--vd-ease-spring);
+  }
+
+  .vd-tabs[data-variant='line'] .vd-tabs__tab[aria-selected='true']::after {
+    opacity: 1;
+    scale: 1 1;
+  }
+
+  .vd-tabs[data-variant='line'][data-orientation='vertical'] > .vd-tabs__list {
+    border-block-end: 0;
+    border-inline-end: var(--vd-border-width) solid var(--vd-color-border);
+  }
+
+  .vd-tabs[data-variant='line'][data-orientation='vertical'] .vd-tabs__tab {
+    justify-content: flex-start;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: var(--vd-tabs-radius);
+  }
+
+  .vd-tabs[data-variant='line'][data-orientation='vertical'] .vd-tabs__tab::after {
+    inset-block: var(--vd-space-2);
+    inset-inline: auto calc(var(--vd-border-width) * -1);
+    inline-size: var(--vd-tabs-indicator-size);
+    block-size: auto;
+    scale: 1 0.4;
+  }
+
+  .vd-tabs[data-variant='line'][data-orientation='vertical']
+    .vd-tabs__tab[aria-selected='true']::after {
+    scale: 1 1;
+  }
+
+  /* -------------------------------------------------------------- pill */
+  /* Segmented control. Concentric: inner radius = outer - padding. */
+
+  .vd-tabs[data-variant='pill'] > .vd-tabs__list {
+    --vd-tabs-list-padding: var(--vd-space-1);
+
+    inline-size: fit-content;
+    padding: var(--vd-tabs-list-padding);
+    border: var(--vd-border-width) solid var(--vd-color-border);
+    border-radius: var(--vd-radius-lg);
+    background-color: var(--vd-color-fill);
+  }
+
+  .vd-tabs[data-variant='pill'] .vd-tabs__tab {
+    --vd-tabs-tab-height: var(--vd-control-height-sm);
+
+    border-radius: calc(var(--vd-radius-lg) - var(--vd-tabs-list-padding));
+  }
+
+  .vd-tabs[data-variant='pill'] .vd-tabs__tab[aria-selected='true'] {
+    background-color: var(--vd-color-surface-raised);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-sm);
+  }
+
+  @media (forced-colors: active) {
+    .vd-tabs__tab[aria-selected='true'] {
+      outline: var(--vd-border-width) solid Highlight;
+    }
+
+    .vd-tabs .vd-tabs__tab::after {
+      background-color: Highlight;
+    }
+  }
+}

package/styles/components/tag-input.css

@@ -0,0 +1,138 @@
+@layer vd.components {
+  .vd-tag-input {
+    --vd-tag-input-radius: var(--vd-radius-md);
+    --vd-tag-input-gap: var(--vd-space-1);
+    --vd-tag-input-padding: var(--vd-space-1-5);
+    --vd-tag-input-tag-bg: var(--vd-color-fill);
+    --vd-tag-input-tag-fg: var(--vd-color-text);
+    --vd-tag-input-tag-border: var(--vd-color-border);
+    --vd-tag-input-tag-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-tag-input-radius) - var(--vd-space-1))
+    );
+    --vd-tag-input-remove-size: var(--vd-space-6);
+    --vd-tag-input-input-width: calc(var(--vd-control-height-lg) * 2);
+    display: block;
+    min-inline-size: 0;
+  }
+  .vd-tag-input[data-size='sm'] {
+    --vd-tag-input-radius: var(--vd-radius-sm);
+  }
+  .vd-tag-input[data-size='lg'] {
+    --vd-tag-input-radius: var(--vd-radius-lg);
+  }
+  .vd-tag-input__field {
+    flex-wrap: wrap;
+    gap: var(--vd-tag-input-gap);
+    padding-block: var(--vd-tag-input-padding);
+  }
+  .vd-tag-input__tags {
+    display: flex;
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+    gap: var(--vd-tag-input-gap);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .vd-tag-input__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-tag-input-gap);
+    max-inline-size: 100%;
+    padding-inline-start: var(--vd-space-2);
+    border: var(--vd-border-width) solid var(--vd-tag-input-tag-border);
+    border-radius: var(--vd-tag-input-tag-radius);
+    background: var(--vd-tag-input-tag-bg);
+    color: var(--vd-tag-input-tag-fg);
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-snug);
+  }
+  .vd-tag-input__label {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-tag-input__remove {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--vd-tag-input-remove-size);
+    block-size: var(--vd-tag-input-remove-size);
+    padding: 0;
+    border: 0;
+    border-radius: var(--vd-tag-input-tag-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+  .vd-tag-input__remove vd-icon {
+    --vd-icon-size: var(--vd-space-3);
+  }
+  .vd-tag-input__remove:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+  .vd-tag-input__remove:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+  @media (hover: hover) {
+    .vd-tag-input__remove:not(:disabled):hover {
+      background: var(--vd-color-fill-hover);
+    }
+  }
+  .vd-tag-input__field:has(:focus-visible) {
+    outline: var(--vd-focus-ring-width) solid var(--vd-input-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+  .vd-tag-input__field > .vd-input {
+    flex: 1 1 var(--vd-tag-input-input-width);
+    inline-size: 0;
+    min-inline-size: min(100%, var(--vd-tag-input-input-width));
+    min-block-size: calc(var(--vd-input-height) - var(--vd-space-1) - var(--vd-border-width) * 2);
+    padding-block: 0;
+  }
+  .vd-tag-input__field > .vd-tag-input__add {
+    --vd-button-height: calc(
+      var(--vd-input-height) - var(--vd-space-1) - var(--vd-border-width) * 2
+    );
+    margin-inline: 0;
+    max-inline-size: 100%;
+    padding-inline: var(--vd-space-2);
+  }
+  .vd-tag-input[data-disabled] > .vd-tag-input__field {
+    opacity: 1;
+    --vd-input-bg: var(--vd-color-field-readonly);
+  }
+  .vd-tag-input[data-disabled] .vd-tag-input__input {
+    opacity: var(--vd-opacity-disabled);
+  }
+  .vd-tag-input__feedback {
+    margin: 0;
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-sm);
+    overflow-wrap: anywhere;
+  }
+  .vd-tag-input__feedback:not(:empty) {
+    margin-block-start: var(--vd-space-2);
+  }
+  @media (forced-colors: active) {
+    .vd-tag-input__field,
+    .vd-tag-input__tag {
+      border-color: CanvasText;
+    }
+    .vd-tag-input__remove {
+      border: var(--vd-border-width) solid ButtonText;
+    }
+    .vd-tag-input__remove:disabled {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .vd-tag-input__remove:focus-visible,
+    .vd-tag-input__field:has(:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
+}

package/styles/components/text-highlight.css

@@ -0,0 +1,22 @@
+@layer vd.components {
+  .vd-text-highlight {
+    --vd-text-highlight-bg: var(--vd-color-action-subtle);
+    --vd-text-highlight-fg: var(--vd-color-action-text);
+    --vd-text-highlight-radius: var(--vd-radius-xs);
+
+    display: inline;
+  }
+  .vd-text-highlight__match {
+    padding: 0;
+    border-radius: var(--vd-text-highlight-radius);
+    background: var(--vd-text-highlight-bg);
+    color: var(--vd-text-highlight-fg);
+    font: inherit;
+  }
+  @media (forced-colors: active) {
+    .vd-text-highlight__match {
+      text-decoration: underline;
+      text-decoration-thickness: var(--vd-border-width);
+    }
+  }
+}