@db-vincent/components 0.0.0-stage → 0.1.1

package/src/styles/pagination.css

@@ -0,0 +1,81 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-pagination {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pagination-gap);
+  }
+
+  .ds-pagination__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pagination-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-pagination__link,
+  .ds-pagination__ellipsis {
+    align-items: center;
+    border: 0;
+    border-radius: var(--pagination-radius);
+    display: inline-flex;
+    font-family: inherit;
+    font-size: var(--pagination-font-size);
+    height: var(--pagination-item-size);
+    justify-content: center;
+    min-width: var(--pagination-item-size);
+    padding-inline: var(--space-2);
+  }
+
+  .ds-pagination__link {
+    background: var(--pagination-bg);
+    color: var(--pagination-fg);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .ds-pagination__link:hover {
+    background: var(--pagination-bg-hover);
+    color: var(--pagination-fg-hover);
+  }
+
+  .ds-pagination__link:focus-visible {
+    outline: var(--pagination-focus-width) solid var(--pagination-focus-color);
+    outline-offset: var(--pagination-focus-offset);
+  }
+
+  .ds-pagination__link[aria-disabled="true"],
+  .ds-pagination__link:disabled {
+    background: transparent;
+    color: var(--pagination-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .ds-pagination__link[aria-current="page"] {
+    background: var(--pagination-bg-current);
+    color: var(--pagination-fg-current);
+    cursor: default;
+    font-weight: var(--weight-semibold);
+  }
+
+  .ds-pagination__ellipsis {
+    color: var(--pagination-fg-disabled);
+  }
+
+  .ds-pagination__link--direction {
+    gap: var(--space-1-5);
+    padding-inline: var(--space-3);
+  }
+
+  @media (max-width: 700px) {
+    .ds-pagination__link--direction .ds-pagination__label {
+      display: none;
+    }
+  }
+}

package/src/styles/popover.css

@@ -0,0 +1,134 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  /* Wraps a trigger and its anchored surface. Each wrapper scopes the anchor
+     name, so any number of popovers, menus and tooltips can share it. */
+  .ds-anchor {
+    anchor-name: --ds-anchor;
+    anchor-scope: --ds-anchor;
+    display: inline-flex;
+  }
+
+  .ds-popover {
+    --ds-anchor-gap: var(--popover-gap);
+
+    background: var(--popover-bg);
+    border: 1px solid var(--popover-border);
+    border-radius: var(--popover-radius);
+    box-shadow: var(--popover-shadow);
+    color: var(--popover-fg);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    max-width: min(var(--popover-max-width), calc(100vw - var(--space-8)));
+    opacity: 0;
+    overflow: auto;
+    padding: var(--popover-padding);
+    transform: scale(var(--popover-scale-from));
+    transform-origin: top center;
+    transition:
+      opacity var(--popover-duration-exit) var(--popover-ease-exit),
+      transform var(--popover-duration-exit) var(--popover-ease-exit),
+      display var(--popover-duration-exit) allow-discrete,
+      overlay var(--popover-duration-exit) allow-discrete;
+  }
+
+  .ds-popover:popover-open {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--popover-duration-enter) var(--popover-ease-enter),
+      transform var(--popover-duration-enter) var(--popover-ease-enter),
+      display var(--popover-duration-enter) allow-discrete,
+      overlay var(--popover-duration-enter) allow-discrete;
+  }
+
+  /* Set by script when the surface opens from the keyboard. */
+  .ds-popover[data-instant]:popover-open {
+    transition-duration: 0s;
+  }
+
+  @starting-style {
+    .ds-popover:popover-open {
+      opacity: 0;
+      transform: scale(var(--popover-scale-from));
+    }
+  }
+
+  /* Anchor positioning. Every surface carries a placement modifier. Without
+     support the native popover stays centred in the viewport, which is still
+     usable. */
+  @supports (position-area: block-end) {
+    .ds-popover,
+    .ds-tooltip {
+      /* Centre on the anchor but never past the viewport edge. Held in a
+         variable because the CSS validator predates `safe anchor-center`. */
+      --ds-anchor-center: safe anchor-center;
+
+      inset: auto;
+      margin: 0;
+      position-anchor: --ds-anchor;
+    }
+
+    .ds-popover--bottom,
+    .ds-popover--top,
+    .ds-tooltip--bottom,
+    .ds-tooltip--top {
+      justify-self: var(--ds-anchor-center);
+      position-try-fallbacks: flip-block;
+    }
+
+    .ds-popover--bottom,
+    .ds-tooltip--bottom {
+      margin-block-start: var(--ds-anchor-gap);
+      position-area: block-end;
+      transform-origin: top center;
+    }
+
+    .ds-popover--top,
+    .ds-tooltip--top {
+      margin-block-end: var(--ds-anchor-gap);
+      position-area: block-start;
+      transform-origin: bottom center;
+    }
+
+    .ds-popover--start,
+    .ds-popover--end,
+    .ds-tooltip--start,
+    .ds-tooltip--end {
+      align-self: var(--ds-anchor-center);
+      position-try-fallbacks: flip-inline;
+    }
+
+    .ds-popover--start,
+    .ds-tooltip--start {
+      margin-inline-end: var(--ds-anchor-gap);
+      position-area: inline-start;
+      transform-origin: right center;
+    }
+
+    .ds-popover--end,
+    .ds-tooltip--end {
+      margin-inline-start: var(--ds-anchor-gap);
+      position-area: inline-end;
+      transform-origin: left center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-popover,
+    .ds-popover:popover-open {
+      transform: none;
+      transition:
+        opacity var(--popover-duration-reduced) var(--popover-ease-exit),
+        display var(--popover-duration-reduced) allow-discrete,
+        overlay var(--popover-duration-reduced) allow-discrete;
+    }
+
+    @starting-style {
+      .ds-popover:popover-open {
+        opacity: 0;
+        transform: none;
+      }
+    }
+  }
+}

package/src/styles/progress.css

@@ -0,0 +1,95 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-progress {
+    --ds-progress-height: var(--progress-height-md);
+    --ds-progress-fill: var(--progress-accent);
+    display: grid;
+    gap: var(--progress-gap);
+    width: 100%;
+  }
+
+  .ds-progress--sm {
+    --ds-progress-height: var(--progress-height-sm);
+  }
+
+  .ds-progress--success {
+    --ds-progress-fill: var(--progress-success);
+  }
+
+  .ds-progress--warning {
+    --ds-progress-fill: var(--progress-warning);
+  }
+
+  .ds-progress--danger {
+    --ds-progress-fill: var(--progress-danger);
+  }
+
+  .ds-progress__head {
+    align-items: baseline;
+    display: flex;
+    font-size: var(--progress-font-size);
+    gap: var(--space-3);
+    justify-content: space-between;
+    line-height: var(--leading-sm);
+  }
+
+  .ds-progress__label {
+    color: var(--progress-label-fg);
+    font-weight: var(--weight-medium);
+  }
+
+  .ds-progress__value {
+    color: var(--progress-value-fg);
+    font-family: var(--progress-value-font);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-progress__track {
+    background: var(--progress-track);
+    border-radius: var(--progress-radius);
+    height: var(--ds-progress-height);
+    overflow: hidden;
+  }
+
+  .ds-progress__bar {
+    background: var(--ds-progress-fill);
+    border-radius: var(--progress-radius);
+    height: 100%;
+    transform: scaleX(var(--ds-progress-value, 0));
+    transform-origin: left;
+    transition: transform var(--progress-duration) var(--progress-ease);
+    width: 100%;
+  }
+
+  .ds-progress--indeterminate .ds-progress__bar {
+    animation: ds-progress-slide var(--progress-indeterminate-duration)
+      var(--progress-ease) infinite;
+    transform: none;
+    transition: none;
+    width: var(--progress-indeterminate-width);
+  }
+
+  @keyframes ds-progress-slide {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(var(--progress-indeterminate-travel));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-progress__bar {
+      transition: none;
+    }
+
+    .ds-progress--indeterminate .ds-progress__bar {
+      animation: none;
+      background: var(--progress-indicator-static);
+      width: 100%;
+    }
+  }
+}

package/src/styles/section.css

@@ -0,0 +1,38 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-section {
+    border-top: 1px solid var(--section-border);
+    margin-block-start: var(--section-margin-top);
+    padding-block-start: var(--section-padding-top);
+  }
+
+  .ds-section__head {
+    align-items: baseline;
+    display: flex;
+    gap: var(--section-head-gap);
+    justify-content: space-between;
+  }
+
+  .ds-section__title {
+    font-size: var(--section-title-size);
+    letter-spacing: var(--type-title-sm-tracking);
+    line-height: var(--section-title-leading);
+    margin-block-end: var(--section-title-margin);
+  }
+
+  .ds-section__index {
+    color: var(--section-index-fg);
+    font-family: var(--font-mono);
+    font-size: var(--section-index-size);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-section__intro {
+    color: var(--section-intro-fg);
+    font-size: var(--section-intro-size);
+    line-height: var(--leading-base);
+    margin-block-end: var(--section-intro-margin);
+    max-width: var(--section-intro-max);
+  }
+}

package/src/styles/select.css

@@ -0,0 +1,246 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-select {
+    position: relative;
+    width: 100%;
+  }
+
+  .ds-select__control {
+    appearance: none;
+    background: var(--select-bg);
+    border: 1px solid var(--select-border);
+    border-radius: var(--select-radius);
+    color: var(--select-fg);
+    font-family: var(--font-body);
+    font-size: var(--text-sm);
+    height: var(--select-height);
+    line-height: var(--leading-sm);
+    padding-inline: var(--select-padding-x) var(--space-10);
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+    width: 100%;
+  }
+
+  .ds-select--sm .ds-select__control {
+    height: var(--select-height-sm);
+  }
+
+  .ds-select--lg .ds-select__control {
+    font-size: var(--text-base);
+    height: var(--select-height-lg);
+  }
+
+  .ds-select__control:hover:not(:disabled) {
+    border-color: var(--select-border-hover);
+  }
+
+  .ds-select__control:focus {
+    border-color: var(--select-border-focus);
+    box-shadow:
+      0 0 0 var(--select-focus-width) var(--select-focus-offset-color),
+      0 0 0 calc(var(--select-focus-width) * 2) var(--select-border-focus);
+    outline: 2px solid transparent;
+  }
+
+  .ds-select__control:disabled {
+    background: var(--select-bg-disabled);
+    color: var(--select-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  .ds-select__control.is-invalid {
+    border-color: var(--select-border-invalid);
+  }
+
+  .ds-select__anchor {
+    position: relative;
+  }
+
+  .ds-select__trigger {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: var(--space-2);
+    justify-content: space-between;
+    text-align: start;
+  }
+
+  .ds-select__trigger.is-placeholder .ds-select__value {
+    color: var(--select-placeholder);
+  }
+
+  .ds-select__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-select__chevron {
+    color: var(--select-chevron);
+    pointer-events: none;
+    position: absolute;
+    right: var(--select-padding-x);
+    top: 50%;
+    transform: translateY(-50%);
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-select.is-open .ds-select__chevron {
+    transform: translateY(-50%) rotate(180deg);
+  }
+
+  .ds-select [data-ds-values] {
+    display: none;
+  }
+
+  .ds-select__popup {
+    background: var(--select-popup-bg);
+    border: 1px solid var(--select-popup-border);
+    border-radius: var(--select-popup-radius);
+    box-shadow: var(--select-popup-shadow);
+    inset-inline: 0;
+    max-height: var(--select-popup-max-height);
+    overflow-y: auto;
+    padding: var(--select-popup-padding);
+    position: absolute;
+    top: calc(100% + var(--select-popup-gap));
+    transform-origin: top center;
+    z-index: var(--select-popup-z);
+    animation: ds-select-in var(--duration-base) var(--ease-enter);
+  }
+
+  @keyframes ds-select-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--space-1))) scale(0.97);
+    }
+  }
+
+  .ds-select__popup[hidden] {
+    display: none;
+  }
+
+  .ds-select__list {
+    display: grid;
+    gap: var(--space-0-5);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-select__option {
+    align-items: center;
+    border-radius: var(--select-option-radius);
+    color: var(--select-option-fg);
+    cursor: pointer;
+    display: flex;
+    gap: var(--space-3);
+    justify-content: space-between;
+    padding: var(--select-option-padding-y) var(--select-option-padding-x);
+  }
+
+  .ds-select__option:hover,
+  .ds-select__option.is-active {
+    background: var(--select-option-bg-hover);
+  }
+
+  .ds-select__option[aria-selected="true"] {
+    background: var(--select-option-bg-selected);
+    color: var(--select-option-fg-selected);
+  }
+
+  .ds-select__option[aria-disabled="true"] {
+    color: var(--select-option-fg-muted);
+    cursor: not-allowed;
+  }
+
+  .ds-select__option[aria-disabled="true"]:hover {
+    background: transparent;
+  }
+
+  .ds-select__option:focus-visible {
+    outline: var(--select-focus-width) solid var(--select-border-focus);
+    outline-offset: calc(-1 * var(--select-focus-offset));
+  }
+
+  .ds-select__option-text {
+    display: grid;
+    gap: var(--space-0-5);
+    min-width: 0;
+  }
+
+  .ds-select__option-label {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-select__option-description {
+    color: inherit;
+    color: var(--select-option-description);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-select__indicator {
+    align-items: center;
+    border: 1px solid var(--select-border);
+    border-radius: var(--radius-xs);
+    color: transparent;
+    display: inline-flex;
+    flex: none;
+    height: var(--select-indicator-size);
+    justify-content: center;
+    width: var(--select-indicator-size);
+  }
+
+  .ds-select__option[aria-selected="true"] .ds-select__indicator {
+    background: var(--select-indicator-bg);
+    border-color: var(--select-indicator-bg);
+    color: var(--select-indicator-fg);
+  }
+
+  .ds-select:not(.ds-select--multiple) .ds-select__indicator {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  .ds-select:not(.ds-select--multiple)
+    .ds-select__option[aria-selected="true"]
+    .ds-select__indicator {
+    background: transparent;
+    color: var(--select-option-fg-selected);
+  }
+
+  .ds-select__footer {
+    border-top: 1px solid var(--select-popup-footer-border);
+    margin-block-start: var(--select-popup-gap);
+    padding-block-start: var(--select-popup-gap);
+  }
+
+  .ds-select__done {
+    background: transparent;
+    border: 0;
+    border-radius: var(--select-option-radius);
+    color: var(--select-option-fg-selected);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    padding: var(--select-option-padding-y) var(--select-option-padding-x);
+    text-align: start;
+    width: 100%;
+  }
+
+  .ds-select__done:hover {
+    background: var(--select-option-bg-hover);
+  }
+
+  .ds-select__done:focus-visible {
+    outline: var(--select-focus-width) solid var(--select-border-focus);
+    outline-offset: calc(-1 * var(--select-focus-offset));
+  }
+}

package/src/styles/skeleton.css

@@ -0,0 +1,66 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-skeleton {
+    background: var(--skeleton-bg);
+    border-radius: var(--skeleton-radius);
+    display: block;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .ds-skeleton::after {
+    animation: ds-skeleton-shimmer var(--skeleton-duration) var(--ease-standard)
+      infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--skeleton-highlight),
+      transparent
+    );
+    content: "";
+    inset: 0;
+    position: absolute;
+    transform: translateX(-100%);
+  }
+
+  .ds-skeleton--heading {
+    border-radius: var(--radius-sm);
+    height: var(--skeleton-heading-height);
+    width: 42%;
+  }
+
+  .ds-skeleton--text {
+    height: var(--skeleton-text-height);
+    width: 100%;
+  }
+
+  .ds-skeleton--text:last-child {
+    width: 72%;
+  }
+
+  .ds-skeleton--image {
+    aspect-ratio: 16 / 9;
+    border-radius: var(--skeleton-image-radius);
+    width: 100%;
+  }
+
+  .ds-skeleton-stack {
+    display: grid;
+    gap: var(--skeleton-text-gap);
+  }
+
+  @keyframes ds-skeleton-shimmer {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-skeleton::after {
+      animation: none;
+      background: var(--skeleton-bg);
+      opacity: 0;
+    }
+  }
+}

package/src/styles/spinner.css

@@ -0,0 +1,44 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-spinner {
+    border: var(--spinner-stroke) solid var(--spinner-track);
+    border-radius: var(--radius-full);
+    border-top-color: var(--spinner-indicator);
+    display: inline-block;
+    height: var(--spinner-size-md);
+    width: var(--spinner-size-md);
+  }
+
+  .ds-spinner--sm {
+    height: var(--spinner-size-sm);
+    width: var(--spinner-size-sm);
+  }
+
+  .ds-spinner--lg {
+    height: var(--spinner-size-lg);
+    width: var(--spinner-size-lg);
+  }
+
+  .ds-spinner--slow {
+    animation: ds-spinner-rotate calc(var(--spinner-duration) * 2) linear
+      infinite;
+  }
+
+  .ds-spinner {
+    animation: ds-spinner-rotate var(--spinner-duration) linear infinite;
+  }
+
+  @keyframes ds-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-spinner,
+    .ds-spinner--slow {
+      animation-duration: 2.4s;
+    }
+  }
+}

package/src/styles/sr-only.css

@@ -0,0 +1,14 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+/* Visually hidden, still announced. Shared so components that emit
+   .ds-sr-only do not depend on base.css being loaded. */
+@layer components {
+  .ds-sr-only {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}