@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/popover.css

@@ -0,0 +1,93 @@
+/* Popover (non-modal, anchored) - spec: specs/popover.md */
+@layer vd.components {
+  .vd-popover {
+    --vd-popover-width: 20rem;
+    --vd-popover-padding: var(--vd-space-4);
+    --vd-popover-radius: var(--vd-radius-lg);
+    --vd-popover-offset: var(--vd-space-2);
+
+    /* Geometry on the base rule (D45). */
+    position: fixed;
+    inset: auto;
+    margin: var(--vd-popover-offset);
+    position-area: block-end span-inline-end;
+    position-try-fallbacks:
+      flip-block,
+      flip-inline,
+      flip-block flip-inline;
+    inline-size: min(var(--vd-popover-width), 100vw - var(--vd-space-4) * 2);
+    max-block-size: min(32rem, 80dvh);
+    padding: var(--vd-popover-padding);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: var(--vd-border-width) solid var(--vd-color-border-strong);
+    border-radius: var(--vd-popover-radius);
+    background-color: var(--vd-color-surface-overlay);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-lg);
+    color: var(--vd-color-text);
+    font-size: var(--vd-text-sm);
+
+    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-popover[data-placement='top'] {
+    position-area: block-start span-inline-end;
+    transform-origin: bottom;
+  }
+
+  .vd-popover[data-placement='start'] {
+    position-area: inline-start span-block-end;
+    position-try-fallbacks:
+      flip-inline,
+      flip-block,
+      flip-block flip-inline;
+  }
+
+  .vd-popover[data-placement='end'] {
+    position-area: inline-end span-block-end;
+    position-try-fallbacks:
+      flip-inline,
+      flip-block,
+      flip-block flip-inline;
+  }
+
+  .vd-popover:popover-open {
+    opacity: 1;
+    scale: 1;
+  }
+
+  @starting-style {
+    .vd-popover:popover-open {
+      opacity: 0;
+      scale: 0.97;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-popover {
+      scale: 1;
+      transition:
+        opacity var(--vd-duration-fast) linear,
+        display var(--vd-duration-fast) allow-discrete,
+        overlay var(--vd-duration-fast) allow-discrete;
+    }
+  }
+
+  .vd-popover:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  @media (forced-colors: active) {
+    .vd-popover {
+      border-color: CanvasText;
+    }
+  }
+}

package/styles/components/progress-ring.css

@@ -0,0 +1,112 @@
+/* Progress ring - spec: specs/progress.md */
+@layer vd.components {
+  .vd-progress-ring {
+    --vd-progress-ring-size: var(--vd-space-6);
+    --vd-progress-ring-stroke: 2.5;
+    --vd-progress-ring-track: var(--vd-color-fill-hover);
+    --vd-progress-ring-fill: var(--vd-color-action);
+
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--vd-progress-ring-size);
+    block-size: var(--vd-progress-ring-size);
+    vertical-align: middle;
+  }
+  .vd-progress-ring[data-size='sm'] {
+    --vd-progress-ring-size: var(--vd-space-4);
+    --vd-progress-ring-stroke: 3;
+  }
+  .vd-progress-ring[data-size='lg'] {
+    --vd-progress-ring-size: var(--vd-space-16);
+    --vd-progress-ring-stroke: 1.75;
+  }
+  .vd-progress-ring[data-variant='success'] {
+    --vd-progress-ring-fill: var(--vd-color-success);
+  }
+  .vd-progress-ring[data-variant='warning'] {
+    --vd-progress-ring-fill: var(--vd-color-warning);
+  }
+  .vd-progress-ring[data-variant='danger'] {
+    --vd-progress-ring-fill: var(--vd-color-danger);
+  }
+
+  .vd-progress-ring__svg {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+    /* Start at 12 o'clock and fill clockwise; mirrored in RTL like other progress. */
+    rotate: -90deg;
+    overflow: visible;
+  }
+  .vd-progress-ring:dir(rtl) .vd-progress-ring__svg {
+    scale: 1 -1;
+  }
+  .vd-progress-ring__track,
+  .vd-progress-ring__indicator {
+    fill: none;
+    stroke-width: var(--vd-progress-ring-stroke);
+  }
+  .vd-progress-ring__track {
+    stroke: var(--vd-progress-ring-track);
+  }
+  .vd-progress-ring__indicator {
+    stroke: var(--vd-progress-ring-fill);
+    stroke-linecap: round;
+    stroke-dasharray: calc(var(--vd-progress-ring-value, 0) * 1) 100;
+    transition: stroke-dasharray var(--vd-duration-slow) var(--vd-ease-out);
+  }
+  .vd-progress-ring__value {
+    grid-area: 1 / 1;
+    font-size: var(--vd-text-md);
+    font-weight: var(--vd-weight-semibold);
+    font-variant-numeric: tabular-nums;
+  }
+  /* Only the large ring has room for a percentage. */
+  .vd-progress-ring:not([data-size='lg']) .vd-progress-ring__value {
+    display: none;
+  }
+  /* A zero-length round-capped arc would paint a dot; show the bare track instead. */
+  .vd-progress-ring[aria-valuenow='0'] .vd-progress-ring__indicator {
+    visibility: hidden;
+  }
+
+  /* Indeterminate: a quarter arc spins. */
+  .vd-progress-ring[data-indeterminate] .vd-progress-ring__indicator {
+    stroke-dasharray: 25 100;
+    transition: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-progress-ring[data-indeterminate] .vd-progress-ring__svg {
+      animation: vd-progress-ring-spin var(--vd-duration-spin) linear infinite;
+    }
+  }
+  /* Reduced motion: no movement; a dashed, half-strength full ring reads as "waiting"
+     and cannot be mistaken for 25% done. */
+  @media (prefers-reduced-motion: reduce) {
+    .vd-progress-ring[data-indeterminate] .vd-progress-ring__indicator {
+      stroke: color-mix(in oklch, var(--vd-progress-ring-fill) 55%, var(--vd-progress-ring-track));
+      stroke-dasharray: 4 4;
+      stroke-linecap: butt;
+    }
+    .vd-progress-ring__indicator {
+      transition: none;
+    }
+  }
+
+  @keyframes vd-progress-ring-spin {
+    to {
+      rotate: 270deg;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-progress-ring__track {
+      stroke: GrayText;
+    }
+    .vd-progress-ring__indicator {
+      stroke: Highlight;
+    }
+  }
+}

package/styles/components/progress.css

@@ -0,0 +1,162 @@
+/* Progress and meter (native elements) - spec: specs/progress.md */
+/* Engine pseudo-elements can't share a rule (an unknown selector drops the whole rule), so
+   -webkit- and -moz- parts are written separately. */
+@layer vd.components {
+  .vd-progress,
+  .vd-meter {
+    --vd-progress-height: var(--vd-space-2);
+    --vd-progress-radius: var(--vd-radius-full);
+    --vd-progress-track: var(--vd-color-fill-hover);
+    --vd-progress-fill: var(--vd-color-action);
+
+    appearance: none;
+    display: block;
+    inline-size: 100%;
+    block-size: var(--vd-progress-height);
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-progress-track);
+    color: var(--vd-progress-fill);
+  }
+
+  :is(.vd-progress, .vd-meter)[data-size='sm'] {
+    --vd-progress-height: var(--vd-space-1);
+  }
+
+  .vd-progress[data-variant='success'] {
+    --vd-progress-fill: var(--vd-color-success);
+  }
+
+  .vd-progress[data-variant='warning'] {
+    --vd-progress-fill: var(--vd-color-warning);
+  }
+
+  .vd-progress[data-variant='danger'] {
+    --vd-progress-fill: var(--vd-color-danger);
+  }
+
+  /* ------------------------------------------------------------ progress */
+
+  .vd-progress::-webkit-progress-bar {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-progress-track);
+  }
+
+  .vd-progress::-webkit-progress-value {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-progress-fill);
+    transition: inline-size var(--vd-duration-slow) var(--vd-ease-out);
+  }
+
+  .vd-progress::-moz-progress-bar {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-progress-fill);
+  }
+
+  /* Indeterminate: a short segment sweeps across the track. */
+  .vd-progress:indeterminate {
+    background-image: linear-gradient(
+      to right,
+      transparent,
+      var(--vd-progress-fill) 35%,
+      var(--vd-progress-fill) 65%,
+      transparent
+    );
+    background-repeat: no-repeat;
+    background-size: 40% 100%;
+    background-position: -100% 0;
+  }
+
+  .vd-progress:indeterminate::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  .vd-progress:indeterminate::-moz-progress-bar {
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-progress:indeterminate {
+      animation: vd-progress-sweep var(--vd-duration-shimmer) var(--vd-ease-in-out) infinite;
+    }
+  }
+
+  /* Reduced motion: a steady, half-strength full bar still reads as "working". */
+  @media (prefers-reduced-motion: reduce) {
+    .vd-progress:indeterminate {
+      background-image: none;
+      background-color: color-mix(in oklch, var(--vd-progress-fill) 45%, var(--vd-progress-track));
+    }
+  }
+
+  @keyframes vd-progress-sweep {
+    from {
+      background-position: -100% 0;
+    }
+
+    to {
+      background-position: 200% 0;
+    }
+  }
+
+  /* --------------------------------------------------------------- meter */
+  /* optimum region -> accent, sub-optimum -> warning, worst -> danger (native low/high/optimum). */
+
+  .vd-meter::-webkit-meter-bar {
+    block-size: var(--vd-progress-height);
+    border: 0;
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-progress-track);
+  }
+
+  .vd-meter::-webkit-meter-optimum-value {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-color-action);
+    transition: inline-size var(--vd-duration-slow) var(--vd-ease-out);
+  }
+
+  .vd-meter::-webkit-meter-suboptimum-value {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-color-warning);
+    transition: inline-size var(--vd-duration-slow) var(--vd-ease-out);
+  }
+
+  .vd-meter::-webkit-meter-even-less-good-value {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-color-danger);
+    transition: inline-size var(--vd-duration-slow) var(--vd-ease-out);
+  }
+
+  .vd-meter::-moz-meter-bar {
+    border-radius: var(--vd-progress-radius);
+    background: var(--vd-color-action);
+  }
+
+  .vd-meter:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: var(--vd-color-warning);
+  }
+
+  .vd-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: var(--vd-color-danger);
+  }
+
+  @media (forced-colors: active) {
+    .vd-progress,
+    .vd-meter {
+      border: var(--vd-border-width) solid CanvasText;
+    }
+
+    .vd-progress::-webkit-progress-value,
+    .vd-meter::-webkit-meter-optimum-value,
+    .vd-meter::-webkit-meter-suboptimum-value,
+    .vd-meter::-webkit-meter-even-less-good-value {
+      background: Highlight;
+    }
+
+    .vd-progress::-moz-progress-bar,
+    .vd-meter::-moz-meter-bar {
+      background: Highlight;
+    }
+  }
+}

package/styles/components/radio.css

@@ -0,0 +1,117 @@
+/* Radio - spec: specs/radio.md */
+@layer vd.components {
+  .vd-radio {
+    --vd-radio-size: 1.125rem;
+    --vd-radio-bg: var(--vd-color-field);
+    --vd-radio-border: var(--vd-color-border-control);
+    --vd-radio-border-hover: var(--vd-color-border-control-hover);
+    --vd-radio-checked: var(--vd-color-action);
+    --vd-radio-checked-hover: var(--vd-color-action-hover);
+    --vd-radio-dot: var(--vd-color-on-action);
+
+    appearance: none;
+    display: inline-grid;
+    place-content: center;
+    flex: none;
+    inline-size: var(--vd-radio-size);
+    block-size: var(--vd-radio-size);
+    margin: 0;
+    border: var(--vd-border-width) solid var(--vd-radio-border);
+    border-radius: var(--vd-radius-full);
+    background-color: var(--vd-radio-bg);
+    vertical-align: middle;
+    cursor: pointer;
+    transition:
+      var(--vd-transition-colors),
+      scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-radio::before {
+    content: '';
+    inline-size: calc(var(--vd-radio-size) * 0.4);
+    block-size: calc(var(--vd-radio-size) * 0.4);
+    border-radius: var(--vd-radius-full);
+    background-color: var(--vd-radio-dot);
+    opacity: 0;
+    scale: 0.3;
+    transition:
+      opacity var(--vd-duration-fast) var(--vd-ease-out),
+      scale var(--vd-duration-base) var(--vd-ease-spring);
+  }
+
+  .vd-radio:checked {
+    --vd-radio-bg: var(--vd-radio-checked);
+    --vd-radio-border: var(--vd-radio-checked);
+    --vd-radio-border-hover: var(--vd-radio-checked-hover);
+
+    box-shadow: var(--vd-highlight-top);
+  }
+
+  .vd-radio:checked::before {
+    opacity: 1;
+    scale: 1;
+  }
+
+  @media (hover: hover) {
+    .vd-radio:not(:disabled):hover,
+    .vd-choice:has(> .vd-radio:not(:disabled)):hover > .vd-radio {
+      border-color: var(--vd-radio-border-hover);
+    }
+
+    .vd-radio:checked:not(:disabled):hover,
+    .vd-choice:hover > .vd-radio:checked:not(:disabled) {
+      background-color: var(--vd-radio-checked-hover);
+    }
+  }
+
+  .vd-radio:not(:disabled):active {
+    scale: var(--vd-press-scale);
+  }
+
+  .vd-radio:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  .vd-radio[data-invalid] {
+    --vd-radio-border: var(--vd-color-danger);
+    --vd-radio-border-hover: var(--vd-color-danger);
+  }
+
+  .vd-radio:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Center the control on the first line of text. */
+  .vd-choice > .vd-radio {
+    margin-block-start: calc((1lh - var(--vd-radio-size)) / 2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-radio:active {
+      scale: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-radio {
+      forced-color-adjust: none;
+      border-color: ButtonText;
+      background-color: Canvas;
+    }
+
+    .vd-radio:checked {
+      border-color: Highlight;
+      background-color: Canvas;
+    }
+
+    .vd-radio::before {
+      background-color: Highlight;
+    }
+
+    .vd-radio:disabled {
+      border-color: GrayText;
+    }
+  }
+}

package/styles/components/range-slider.css

@@ -0,0 +1,158 @@
+@layer vd.components {
+  .vd-range-slider {
+    --vd-range-slider-track: var(--vd-color-fill-hover);
+    --vd-range-slider-fill: var(--vd-color-action);
+    --vd-range-slider-border: var(--vd-color-action);
+    --vd-range-slider-thumb-bg: var(--vd-color-on-action);
+    --vd-range-slider-ring: var(--vd-color-focus);
+    --vd-range-slider-thumb-size: var(--vd-space-5);
+    --vd-range-slider-hit-size: var(--vd-space-8);
+    --vd-range-slider-track-size: var(--vd-space-1-5);
+    display: block;
+    min-inline-size: 0;
+    container-type: inline-size;
+  }
+  .vd-range-slider__group {
+    display: grid;
+    gap: var(--vd-space-3);
+    min-inline-size: 0;
+  }
+  .vd-range-slider__group > p {
+    margin: 0;
+  }
+  .vd-range-slider__values {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--vd-space-4);
+    font-size: var(--vd-text-sm);
+    color: var(--vd-color-text-muted);
+  }
+  .vd-range-slider__values > span {
+    display: grid;
+    gap: var(--vd-space-1);
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-range-slider__values > span:last-child {
+    text-align: end;
+  }
+  .vd-range-slider__number {
+    font-family: var(--vd-font-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--vd-color-text);
+  }
+  @container (inline-size < 16rem) {
+    .vd-range-slider__values {
+      flex-direction: column;
+    }
+    .vd-range-slider__values > span {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: var(--vd-space-2);
+    }
+    .vd-range-slider__values > span:last-child {
+      text-align: start;
+    }
+    .vd-range-slider__number {
+      overflow-wrap: normal;
+    }
+  }
+  .vd-range-slider__rail {
+    position: relative;
+    block-size: var(--vd-range-slider-hit-size);
+    margin-inline: calc(var(--vd-range-slider-hit-size) / 2);
+    touch-action: pan-y;
+    cursor: pointer;
+  }
+  .vd-range-slider__track,
+  .vd-range-slider__fill {
+    position: absolute;
+    inset-block-start: calc(
+      (var(--vd-range-slider-hit-size) - var(--vd-range-slider-track-size)) / 2
+    );
+    block-size: var(--vd-range-slider-track-size);
+    border-radius: var(--vd-radius-full);
+    pointer-events: none;
+  }
+  .vd-range-slider__track {
+    inset-inline: 0;
+    background: var(--vd-range-slider-track);
+  }
+  .vd-range-slider__fill {
+    inset-inline-start: var(--vd-range-start);
+    inset-inline-end: calc(100% - var(--vd-range-end));
+    background: var(--vd-range-slider-fill);
+  }
+  .vd-range-slider__thumb {
+    position: absolute;
+    inset-block-start: 0;
+    inline-size: var(--vd-range-slider-hit-size);
+    block-size: var(--vd-range-slider-hit-size);
+    margin-inline-start: calc(var(--vd-range-slider-hit-size) / -2);
+    padding: 0;
+    border: 0;
+    border-radius: var(--vd-radius-full);
+    background: transparent;
+    cursor: grab;
+  }
+  .vd-range-slider__thumb::after {
+    content: '';
+    display: block;
+    inline-size: var(--vd-range-slider-thumb-size);
+    block-size: var(--vd-range-slider-thumb-size);
+    margin: auto;
+    border: calc(var(--vd-border-width) * 2) solid var(--vd-range-slider-border);
+    border-radius: inherit;
+    background: var(--vd-range-slider-thumb-bg);
+    box-shadow: var(--vd-shadow-sm);
+  }
+  .vd-range-slider__thumb:focus-visible {
+    z-index: 1;
+    outline: var(--vd-focus-ring-width) solid var(--vd-range-slider-ring);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+  @media (hover: hover) {
+    .vd-range-slider__thumb:not(:disabled):hover::after {
+      border-color: var(--vd-color-focus);
+    }
+  }
+  .vd-range-slider[data-dragging] .vd-range-slider__thumb {
+    cursor: grabbing;
+  }
+  .vd-range-slider[data-invalid] {
+    --vd-range-slider-fill: var(--vd-color-danger);
+    --vd-range-slider-border: var(--vd-color-danger);
+    --vd-range-slider-ring: var(--vd-color-danger);
+  }
+  .vd-range-slider[data-disabled] .vd-range-slider__rail {
+    opacity: var(--vd-opacity-disabled);
+  }
+  .vd-range-slider[data-disabled] .vd-range-slider__rail,
+  .vd-range-slider__thumb:disabled {
+    cursor: not-allowed;
+  }
+  .vd-range-slider[data-readonly] .vd-range-slider__rail,
+  .vd-range-slider[data-readonly] .vd-range-slider__thumb {
+    cursor: default;
+  }
+  @media (forced-colors: active) {
+    .vd-range-slider {
+      --vd-range-slider-track: GrayText;
+      --vd-range-slider-fill: Highlight;
+      --vd-range-slider-border: ButtonText;
+      --vd-range-slider-thumb-bg: Canvas;
+      --vd-range-slider-ring: Highlight;
+    }
+    .vd-range-slider__track,
+    .vd-range-slider__fill {
+      forced-color-adjust: none;
+    }
+    .vd-range-slider[data-invalid] {
+      --vd-range-slider-fill: Highlight;
+      --vd-range-slider-border: ButtonText;
+      --vd-range-slider-ring: Highlight;
+    }
+  }
+}