@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/field.css

@@ -0,0 +1,148 @@
+/* Field (label, hint, error) - spec: specs/field.md */
+@layer vd.components {
+  .vd-field {
+    --vd-field-gap: var(--vd-space-1-5);
+
+    display: grid;
+    /* One column that never grows past the container: a nowrap control (select value) or a
+       long label must not widen the field through its min-content size. */
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--vd-field-gap);
+    min-inline-size: 0;
+  }
+
+  .vd-field__label {
+    display: flex;
+    gap: var(--vd-space-1);
+    inline-size: fit-content;
+    color: var(--vd-color-text);
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+  }
+
+  .vd-field__required {
+    color: var(--vd-color-danger-text);
+  }
+
+  .vd-field__hint,
+  .vd-field__error {
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-snug);
+    text-wrap: pretty;
+  }
+
+  .vd-field__hint {
+    color: var(--vd-color-text-muted);
+  }
+
+  .vd-field__error {
+    display: flex;
+    align-items: start;
+    gap: var(--vd-space-1-5);
+    color: var(--vd-color-danger-text);
+  }
+
+  .vd-field__error .vd-icon {
+    --vd-icon-size: 1.1em;
+
+    margin-block-start: 0.1em;
+  }
+
+  .vd-field[data-disabled] .vd-field__label {
+    color: var(--vd-color-text-muted);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-field__error {
+      transition:
+        opacity var(--vd-duration-base) var(--vd-ease-out),
+        translate var(--vd-duration-base) var(--vd-ease-out);
+
+      @starting-style {
+        opacity: 0;
+        translate: 0 calc(var(--vd-space-1) * -1);
+      }
+    }
+  }
+}
+
+/* Choice: a label wrapping a checkbox/switch/radio and its text. */
+@layer vd.components {
+  .vd-choice {
+    --vd-choice-gap: var(--vd-space-2);
+
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--vd-choice-gap);
+    max-inline-size: 100%;
+    color: var(--vd-color-text);
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-normal);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* Center the control on the first line of text. */
+  .vd-choice > .vd-checkbox {
+    margin-block-start: calc((1lh - var(--vd-checkbox-size)) / 2);
+  }
+
+  .vd-choice > .vd-switch {
+    margin-block-start: calc((1lh - var(--vd-switch-height)) / 2);
+  }
+
+  .vd-choice:has(> :disabled) {
+    color: var(--vd-color-text-muted);
+    cursor: not-allowed;
+  }
+}
+
+/* Fieldset: a group of choices with one legend, hint and error. */
+@layer vd.components {
+  .vd-fieldset {
+    --vd-fieldset-gap: var(--vd-space-3);
+
+    display: grid;
+    gap: var(--vd-space-1-5);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  /* Legends don't take part in grid layout until floated out of the fieldset border. */
+  .vd-fieldset__legend {
+    float: inline-start;
+    display: flex;
+    gap: var(--vd-space-1);
+    inline-size: 100%;
+    padding: 0;
+    color: var(--vd-color-text);
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+  }
+
+  .vd-fieldset__legend + * {
+    clear: both;
+  }
+
+  .vd-fieldset__options {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--vd-fieldset-gap);
+    margin-block-start: var(--vd-space-1-5);
+  }
+
+  .vd-fieldset[data-orientation='horizontal'] .vd-fieldset__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--vd-fieldset-gap) var(--vd-space-6);
+  }
+
+  .vd-fieldset:disabled .vd-fieldset__legend {
+    color: var(--vd-color-text-muted);
+  }
+}

package/styles/components/file-preview.css

@@ -0,0 +1,65 @@
+@layer vd.components {
+  .vd-file-preview {
+    --vd-file-preview-bg: var(--vd-color-surface-sunken);
+    --vd-file-preview-fg: var(--vd-color-text-muted);
+    --vd-file-preview-gap: var(--vd-space-4);
+    --vd-file-preview-height: calc(var(--vd-space-24) * 5);
+  }
+  .vd-file-preview__dialog .vd-dialog__header {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: var(--vd-file-preview-gap);
+  }
+  .vd-file-preview__heading {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
+    font-size: var(--vd-text-lg);
+    font-weight: var(--vd-weight-semibold);
+  }
+  .vd-file-preview__dialog .vd-file-preview__filename {
+    font-size: var(--vd-text-md);
+    font-weight: var(--vd-weight-medium);
+    margin: 0;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-file-preview__dialog .vd-dialog__header button {
+    flex-shrink: 0;
+  }
+  .vd-file-preview__body {
+    display: grid;
+    gap: var(--vd-file-preview-gap);
+    min-inline-size: 0;
+    background: var(--vd-file-preview-bg);
+  }
+  .vd-file-preview__body:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(-1 * var(--vd-focus-ring-width));
+  }
+  .vd-file-preview__size,
+  .vd-file-preview__notice {
+    margin: 0;
+    color: var(--vd-file-preview-fg);
+    overflow-wrap: anywhere;
+  }
+  .vd-file-preview__notice:empty {
+    display: none;
+  }
+  .vd-file-preview__image {
+    display: block;
+    margin-inline: auto;
+    max-inline-size: 100%;
+    max-block-size: var(--vd-file-preview-height);
+    object-fit: contain;
+  }
+  .vd-file-preview__image[hidden] {
+    display: none;
+  }
+  .vd-file-preview__pdf {
+    inline-size: 100%;
+    block-size: var(--vd-file-preview-height);
+    border: var(--vd-border-width) solid var(--vd-color-border-strong);
+  }
+}

package/styles/components/form-error-summary.css

@@ -0,0 +1,71 @@
+@layer vd.components {
+  .vd-form-error-summary {
+    --vd-form-error-summary-bg: var(--vd-color-danger-subtle);
+    --vd-form-error-summary-border: var(--vd-color-danger-border);
+    --vd-form-error-summary-fg: var(--vd-color-text);
+    --vd-form-error-summary-accent: var(--vd-color-danger-text);
+    --vd-form-error-summary-padding: var(--vd-space-4);
+    --vd-form-error-summary-gap: var(--vd-space-3);
+    --vd-form-error-summary-radius: var(--vd-radius-lg);
+    --vd-form-error-summary-title-size: var(--vd-text-base);
+
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--vd-form-error-summary-gap);
+    min-inline-size: 0;
+    padding: var(--vd-form-error-summary-padding);
+    padding-inline: min(var(--vd-form-error-summary-padding), 5%);
+    border: var(--vd-border-width) solid var(--vd-form-error-summary-border);
+    border-radius: var(--vd-form-error-summary-radius);
+    background: var(--vd-form-error-summary-bg);
+    color: var(--vd-form-error-summary-fg);
+    font-size: var(--vd-text-sm);
+    overflow-wrap: anywhere;
+  }
+  .vd-form-error-summary[hidden] {
+    display: none;
+  }
+  .vd-form-error-summary > * {
+    margin: 0;
+  }
+  .vd-form-error-summary__title {
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    gap: var(--vd-space-2);
+    color: var(--vd-form-error-summary-accent);
+    font-size: var(--vd-form-error-summary-title-size);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+  }
+  .vd-form-error-summary__title > span {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .vd-form-error-summary__title > .vd-icon {
+    flex: none;
+    block-size: 1lh;
+  }
+  .vd-form-error-summary__list {
+    padding: 0;
+    list-style: none;
+  }
+  .vd-form-error-summary__list a {
+    display: block;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    min-block-size: var(--vd-space-6);
+    padding-block: var(--vd-space-1);
+    color: var(--vd-form-error-summary-accent);
+    text-decoration: underline;
+    text-underline-offset: var(--vd-space-0-5);
+  }
+  .vd-form-error-summary__list a:hover {
+    text-decoration-thickness: var(--vd-focus-ring-width);
+  }
+  .vd-form-error-summary:focus,
+  .vd-form-error-summary__list a:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+}

package/styles/components/icon.css

@@ -0,0 +1,38 @@
+@layer vd.components {
+  .vd-icon {
+    --vd-icon-size: 1.25em;
+
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--vd-icon-size);
+    block-size: var(--vd-icon-size);
+    vertical-align: middle;
+    color: inherit;
+  }
+
+  .vd-icon__svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .vd-icon[data-directional]:dir(rtl) {
+    transform: scaleX(-1);
+  }
+
+  .vd-icon[data-name='loader'] .vd-icon__svg {
+    animation: vd-icon-spin var(--vd-duration-spin) linear infinite;
+  }
+
+  /* Reduced motion stops the spin (brief); the static loader glyph still reads as loading. */
+  @media (prefers-reduced-motion: reduce) {
+    .vd-icon[data-name='loader'] .vd-icon__svg {
+      animation: none;
+    }
+  }
+
+  @keyframes vd-icon-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+}

package/styles/components/index.css

@@ -0,0 +1,80 @@
+@import url('./icon.css');
+@import url('./button.css');
+@import url('./field.css');
+@import url('./input.css');
+@import url('./checkbox.css');
+@import url('./switch.css');
+@import url('./badge.css');
+@import url('./card.css');
+@import url('./skeleton.css');
+@import url('./tabs.css');
+@import url('./dialog.css');
+@import url('./tooltip.css');
+@import url('./toast.css');
+@import url('./select.css');
+@import url('./multi-select.css');
+@import url('./stepper.css');
+@import url('./command.css');
+@import url('./timeline.css');
+@import url('./number-input.css');
+@import url('./tag-input.css');
+@import url('./menu.css');
+@import url('./segmented.css');
+@import url('./alert.css');
+@import url('./avatar.css');
+@import url('./progress.css');
+@import url('./table.css');
+@import url('./pagination.css');
+@import url('./empty-state.css');
+@import url('./radio.css');
+@import url('./slider.css');
+@import url('./dropzone.css');
+@import url('./breadcrumbs.css');
+@import url('./accordion.css');
+@import url('./popover.css');
+@import url('./calendar.css');
+@import url('./tree.css');
+@import url('./toolbar.css');
+@import url('./password-input.css');
+@import url('./splitter.css');
+@import url('./otp-input.css');
+@import url('./scroll-area.css');
+@import url('./time-input.css');
+
+@import url('./rating.css');
+
+@import './color-picker.css';
+
+@import './date-range-picker.css';
+
+@import './copy-button.css';
+
+@import './range-slider.css';
+
+@import './upload-list.css';
+@import './description-list.css';
+@import './autocomplete.css';
+@import './navigation-list.css';
+@import './sidebar.css';
+@import './kbd.css';
+@import './progress-ring.css';
+@import './search-input.css';
+@import './stat.css';
+@import './chart.css';
+
+@import url('./editable-text.css');
+
+@import url('./form-error-summary.css');
+
+@import url('./character-count.css');
+
+@import url('./text-highlight.css');
+
+@import './file-preview.css';
+
+@import './alert-dialog.css';
+
+@import './expandable-text.css';
+
+@import './reorder-list.css';
+@import './active-filters.css';

package/styles/components/input.css

@@ -0,0 +1,171 @@
+/* Input, textarea, input group - spec: specs/input.md */
+@layer vd.components {
+  .vd-input,
+  .vd-input-group {
+    --vd-input-height: var(--vd-control-height-md);
+    --vd-input-padding-inline: var(--vd-space-3);
+    --vd-input-font-size: var(--vd-text-md);
+    --vd-input-radius: var(--vd-radius-md);
+    --vd-input-bg: var(--vd-color-field);
+    --vd-input-fg: var(--vd-color-text);
+    --vd-input-border: var(--vd-color-border-control);
+    --vd-input-border-hover: var(--vd-color-border-control-hover);
+    --vd-input-ring: var(--vd-color-focus);
+    --vd-input-placeholder: var(--vd-color-text-subtle);
+  }
+
+  /* Sizes: on the input itself, or on a group via the input inside it. */
+  .vd-input[data-size='sm'],
+  .vd-input-group:has(> .vd-input[data-size='sm']) {
+    --vd-input-height: var(--vd-control-height-sm);
+    --vd-input-padding-inline: var(--vd-space-2);
+    --vd-input-font-size: var(--vd-text-sm);
+    --vd-input-radius: var(--vd-radius-sm);
+  }
+
+  .vd-input[data-size='lg'],
+  .vd-input-group:has(> .vd-input[data-size='lg']) {
+    --vd-input-height: var(--vd-control-height-lg);
+    --vd-input-padding-inline: var(--vd-space-4);
+    --vd-input-radius: var(--vd-radius-lg);
+  }
+
+  /* Invalid: one switch for every boundary/ring color. */
+  .vd-input[data-invalid],
+  .vd-input-group:has(> .vd-input[data-invalid]) {
+    --vd-input-border: var(--vd-color-danger);
+    --vd-input-border-hover: var(--vd-color-danger);
+    --vd-input-ring: var(--vd-color-danger);
+  }
+
+  /* ------------------------------------------------------------ boundary */
+
+  .vd-input,
+  .vd-input-group {
+    inline-size: 100%;
+    min-block-size: var(--vd-input-height);
+    border: var(--vd-border-width) solid var(--vd-input-border);
+    border-radius: var(--vd-input-radius);
+    background-color: var(--vd-input-bg);
+    color: var(--vd-input-fg);
+    font-family: inherit;
+    font-size: var(--vd-input-font-size);
+    line-height: var(--vd-leading-snug);
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-input {
+    padding-block: var(--vd-space-1);
+    padding-inline: var(--vd-input-padding-inline);
+    appearance: none;
+  }
+
+  .vd-input::placeholder {
+    color: var(--vd-input-placeholder);
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .vd-input:not(:disabled, :read-only, :focus):hover,
+    .vd-input-group:not(:has(> .vd-input:is(:disabled, :read-only, :focus))):hover {
+      border-color: var(--vd-input-border-hover);
+    }
+  }
+
+  /* Focus: the outline sits on the border, so the ring reads as a crisp 2px edge. */
+  .vd-input:focus-visible,
+  .vd-input-group:has(> .vd-input:focus-visible) {
+    border-color: var(--vd-input-ring);
+    outline: var(--vd-focus-ring-width) solid var(--vd-input-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+
+  .vd-input:read-only:not(:disabled),
+  .vd-input-group:has(> .vd-input:read-only:not(:disabled)) {
+    --vd-input-bg: var(--vd-color-field-readonly);
+    --vd-input-border: var(--vd-color-border-strong);
+  }
+
+  .vd-input:disabled,
+  .vd-input-group:has(> .vd-input:disabled) {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Keep our colors when the browser autofills. */
+  .vd-input:autofill {
+    -webkit-text-fill-color: var(--vd-input-fg);
+    box-shadow: inset 0 0 0 100vmax var(--vd-color-surface-raised);
+    caret-color: var(--vd-input-fg);
+  }
+
+  /* ------------------------------------------------------------- textarea */
+
+  textarea.vd-input {
+    --vd-input-min-rows: 3;
+
+    display: block;
+    min-block-size: calc(
+      var(--vd-input-font-size) * var(--vd-leading-snug) * var(--vd-input-min-rows) +
+        var(--vd-space-2) * 2
+    );
+    max-block-size: 50vh;
+    padding-block: var(--vd-space-2);
+    resize: vertical;
+    field-sizing: content;
+  }
+
+  /* ---------------------------------------------------------------- group */
+
+  .vd-input-group {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-space-2);
+    padding-inline: var(--vd-input-padding-inline);
+    cursor: text;
+  }
+
+  .vd-input-group > .vd-input {
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: calc(var(--vd-input-height) - var(--vd-border-width) * 2);
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    outline: none;
+    opacity: 1;
+  }
+
+  .vd-input-group > .vd-icon {
+    color: var(--vd-color-text-subtle);
+  }
+
+  .vd-input-group:has(> .vd-input:focus-visible) > .vd-icon[slot='start'] {
+    color: var(--vd-color-text-muted);
+  }
+
+  /* Buttons inside sit 4px from the edge with a concentric radius. */
+  .vd-input-group > .vd-button {
+    --vd-button-height: calc(var(--vd-input-height) - var(--vd-space-2));
+    --vd-button-radius: max(var(--vd-radius-xs), calc(var(--vd-input-radius) - var(--vd-space-1)));
+
+    flex: none;
+    margin-inline: calc(var(--vd-space-1) - var(--vd-input-padding-inline));
+  }
+
+  .vd-input-group > .vd-button[slot='start'] {
+    margin-inline-end: 0;
+  }
+
+  .vd-input-group > .vd-button[slot='end'] {
+    margin-inline-start: 0;
+  }
+
+  @media (forced-colors: active) {
+    .vd-input:focus-visible,
+    .vd-input-group:has(> .vd-input:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
+}

package/styles/components/kbd.css

@@ -0,0 +1,42 @@
+/* Kbd - spec: specs/kbd.md. Key caps reuse the base `kbd` style. */
+@layer vd.components {
+  .vd-kbd {
+    --vd-kbd-gap: var(--vd-space-1);
+    --vd-kbd-step-gap: var(--vd-space-2);
+    --vd-kbd-plus-color: var(--vd-color-text-subtle);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vd-kbd-gap);
+    /* Reset the base key cap on the outer combination element. */
+    min-inline-size: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: inherit;
+    line-height: inherit;
+    /* Shortcuts read left to right in every direction. */
+    direction: ltr;
+    unicode-bidi: isolate;
+    /* Long combinations wrap between keys at narrow widths; a key cap never splits. */
+    flex-wrap: wrap;
+    max-inline-size: 100%;
+    vertical-align: baseline;
+  }
+  .vd-kbd > kbd {
+    white-space: nowrap;
+  }
+  .vd-kbd[data-platform='apple'] {
+    --vd-kbd-gap: var(--vd-space-0-5);
+  }
+  .vd-kbd[data-platform='apple'] .vd-kbd__plus {
+    display: none;
+  }
+  .vd-kbd__plus {
+    color: var(--vd-kbd-plus-color);
+    font-size: var(--vd-text-xs);
+  }
+  .vd-kbd__then {
+    inline-size: calc(var(--vd-kbd-step-gap) - var(--vd-kbd-gap));
+  }
+}