@digiko-npm/designsystem 0.1.0

package/src/components/progress.css

@@ -0,0 +1,214 @@
+/* ==========================================================================
+ * Progress Bar & Step Indicator
+ * ==========================================================================
+ *
+ * Two related components for communicating progress:
+ *
+ * 1. **Progress bar** — a horizontal fill bar with optional label row.
+ *    Sizes: --sm, (default), --lg
+ *    Statuses: --success, --warning, --error, --info
+ *
+ * 2. **Step indicator** — a numbered sequence of steps with connectors.
+ *    States: --completed, --current, --error
+ *    Layout: horizontal (default), --vertical
+ *
+ * Progress bar markup:
+ *   <div class="ds-progress__label">
+ *     <span>Uploading…</span><span>64 %</span>
+ *   </div>
+ *   <div class="ds-progress">
+ *     <div class="ds-progress__bar" style="width: 64%"></div>
+ *   </div>
+ *
+ * Step indicator markup:
+ *   <div class="ds-steps">
+ *     <div class="ds-step ds-step--completed">
+ *       <div class="ds-step__indicator">1</div>
+ *       <div class="ds-step__content">
+ *         <span class="ds-step__title">Account</span>
+ *         <span class="ds-step__description">Create your account</span>
+ *       </div>
+ *     </div>
+ *     <div class="ds-step__connector"></div>
+ *     <div class="ds-step ds-step--current">…</div>
+ *   </div>
+ * ========================================================================== */
+
+/* ==========================================================================
+ * Progress Bar
+ * ========================================================================== */
+
+/* Label row (sits above the bar) */
+.ds-progress__label {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-bottom: var(--ds-space-1-5);
+}
+
+/* Track */
+.ds-progress {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-full);
+  overflow: hidden;
+}
+
+/* Fill */
+.ds-progress__bar {
+  height: 100%;
+  min-width: 0.25rem;
+  background-color: var(--ds-color-inverted);
+  border-radius: var(--ds-radius-full);
+  transition: width var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* Sizes
+ * -------------------------------------------------------------------------- */
+
+.ds-progress--sm {
+  height: 0.25rem;
+}
+
+.ds-progress--lg {
+  height: 0.75rem;
+}
+
+/* Status colours
+ * -------------------------------------------------------------------------- */
+
+.ds-progress--success .ds-progress__bar {
+  background-color: var(--ds-color-success);
+}
+
+.ds-progress--warning .ds-progress__bar {
+  background-color: var(--ds-color-warning);
+}
+
+.ds-progress--error .ds-progress__bar {
+  background-color: var(--ds-color-error);
+}
+
+.ds-progress--info .ds-progress__bar {
+  background-color: var(--ds-color-info);
+}
+
+/* ==========================================================================
+ * Step Indicator
+ * ========================================================================== */
+
+/* Steps container (horizontal by default) */
+.ds-steps {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+}
+
+/* Vertical variant */
+.ds-steps--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* Single step
+ * -------------------------------------------------------------------------- */
+
+.ds-step {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+}
+
+/* Circle indicator */
+.ds-step__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--ds-radius-full);
+  border: 2px solid var(--ds-color-border);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  background-color: var(--ds-color-surface);
+  flex-shrink: 0;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+/* Completed step */
+.ds-step--completed .ds-step__indicator {
+  background-color: var(--ds-color-inverted);
+  border-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+}
+
+/* Current step */
+.ds-step--current .ds-step__indicator {
+  border-color: var(--ds-color-interactive);
+  color: var(--ds-color-text);
+}
+
+/* Error step */
+.ds-step--error .ds-step__indicator {
+  border-color: var(--ds-color-error);
+  color: var(--ds-color-error);
+}
+
+/* Step content
+ * -------------------------------------------------------------------------- */
+
+.ds-step__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-step__title {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+.ds-step__description {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Connector (line between steps)
+ * -------------------------------------------------------------------------- */
+
+/* Horizontal connector */
+.ds-step__connector {
+  flex: 1;
+  height: 2px;
+  min-width: var(--ds-space-4);
+  background-color: var(--ds-color-border);
+  margin-inline: var(--ds-space-2);
+}
+
+/* Filled connector after a completed step */
+.ds-step--completed + .ds-step__connector {
+  background-color: var(--ds-color-inverted);
+}
+
+/* Vertical connector */
+.ds-steps--vertical .ds-step__connector {
+  flex: none;
+  width: 2px;
+  height: 2rem;
+  min-width: auto;
+  margin-inline: 0;
+  margin-left: calc(1rem - 1px); /* center under the 2 rem indicator */
+  margin-block: var(--ds-space-1);
+  background-color: var(--ds-color-border-subtle);
+}
+
+.ds-steps--vertical .ds-step--completed + .ds-step__connector {
+  background-color: var(--ds-color-inverted);
+}

package/src/components/skeleton.css

@@ -0,0 +1,96 @@
+/* ==========================================================================
+   Component: Skeleton
+   Loading placeholders with a subtle pulse animation.
+   ========================================================================== */
+
+.ds-skeleton {
+  display: block;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-md);
+  animation: ds-skeleton-pulse var(--ds-duration-slower) var(--ds-ease-default) infinite;
+}
+
+/* --- Text variants --- */
+
+.ds-skeleton--text {
+  height: 1rem;
+  width: 100%;
+  border-radius: var(--ds-radius-sm);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-skeleton--text-sm {
+  height: 0.75rem;
+  width: 100%;
+  border-radius: var(--ds-radius-sm);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-skeleton--text-lg {
+  height: 1.5rem;
+  width: 100%;
+  border-radius: var(--ds-radius-sm);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-skeleton--heading {
+  height: 2rem;
+  width: 60%;
+  border-radius: var(--ds-radius-md);
+  margin-bottom: var(--ds-space-3);
+}
+
+/* --- Shape variants --- */
+
+.ds-skeleton--circle,
+.ds-skeleton--avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ds-radius-full);
+}
+
+.ds-skeleton--card {
+  height: 12rem;
+  width: 100%;
+  border-radius: var(--ds-radius-xl);
+}
+
+/* --- UI element variants --- */
+
+.ds-skeleton--btn {
+  height: 2.25rem;
+  width: 6rem;
+  border-radius: var(--ds-radius-lg);
+}
+
+.ds-skeleton--input {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--ds-radius-lg);
+}
+
+/* --- Width modifiers --- */
+
+.ds-skeleton--w-1\/2 {
+  width: 50%;
+}
+
+.ds-skeleton--w-3\/4 {
+  width: 75%;
+}
+
+.ds-skeleton--w-1\/3 {
+  width: 33%;
+}
+
+/* --- Pulse animation --- */
+
+@keyframes ds-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}

package/src/components/slider.css

@@ -0,0 +1,125 @@
+/* ==========================================================================
+ * Slider
+ * ==========================================================================
+ *
+ * Range slider input component with customizable thumb and track styling.
+ * Supports labels, value display, size variants, and disabled state.
+ *
+ * Usage:
+ *   <div class="ds-slider">
+ *     <input type="range" min="0" max="100" value="50" />
+ *     <div class="ds-slider__labels">
+ *       <span>0</span>
+ *       <span>100</span>
+ *     </div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-slider--sm        — Smaller track and thumb
+ *   .ds-slider--disabled  — Reduced opacity, no interaction
+ * ========================================================================== */
+
+.ds-slider {
+  width: 100%;
+  position: relative;
+}
+
+.ds-slider input[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.375rem;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-full);
+  outline: none;
+  cursor: pointer;
+}
+
+/* Webkit thumb */
+.ds-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-inverted);
+  border: 2px solid var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Firefox thumb */
+.ds-slider input[type="range"]::-moz-range-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-inverted);
+  border: 2px solid var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Hover: scale up thumb */
+.ds-slider input[type="range"]:hover::-webkit-slider-thumb {
+  transform: scale(1.1);
+}
+
+.ds-slider input[type="range"]:hover::-moz-range-thumb {
+  transform: scale(1.1);
+}
+
+/* Focus ring */
+.ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+.ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* Labels row */
+.ds-slider__labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1);
+}
+
+/* Current value display */
+.ds-slider__value {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+/* Size: small */
+.ds-slider--sm input[type="range"] {
+  height: 0.25rem;
+}
+
+.ds-slider--sm input[type="range"]::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ds-slider--sm input[type="range"]::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Disabled state */
+.ds-slider--disabled {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.ds-slider--disabled input[type="range"] {
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/src/components/table.css

@@ -0,0 +1,48 @@
+/* ==========================================================================
+   Component: Table
+   ========================================================================== */
+
+.ds-table {
+  width: 100%;
+  text-align: left;
+  font-size: var(--ds-text-sm);
+}
+
+.ds-table th {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-weight: var(--ds-weight-medium);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-table td {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  color: var(--ds-color-text);
+  border-bottom: 1px solid var(--ds-color-border-subtle);
+}
+
+.ds-table tbody tr {
+  transition: background-color var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-table tbody tr:hover {
+  background-color: var(--ds-color-overlay-subtle);
+}
+
+.ds-table--compact th,
+.ds-table--compact td {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-text-xs);
+}
+
+.ds-table-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  background-color: var(--ds-color-surface);
+}
+
+.ds-table-wrapper .ds-table { margin: 0; }

package/src/components/tabs.css

@@ -0,0 +1,163 @@
+/* ==========================================================================
+   Component: Tabs
+   Horizontal/vertical tab navigation with pill, small, and full-width variants.
+   ========================================================================== */
+
+.ds-tabs {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  border-bottom: 1px solid var(--ds-color-border);
+  gap: var(--ds-space-0);
+}
+
+/* --- Pill variant --- */
+
+.ds-tabs--pills {
+  border-bottom: none;
+  gap: var(--ds-space-1);
+  background-color: var(--ds-color-bg-elevated);
+  border-radius: var(--ds-radius-lg);
+  padding: var(--ds-space-1);
+}
+
+.ds-tabs--pills .ds-tab {
+  border-bottom: none;
+  border-radius: var(--ds-radius-md);
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+}
+
+.ds-tabs--pills .ds-tab:hover {
+  background-color: var(--ds-color-overlay-hover);
+}
+
+.ds-tabs--pills .ds-tab--active {
+  background-color: var(--ds-color-surface);
+  color: var(--ds-color-text);
+  box-shadow: var(--ds-shadow-sm);
+  border-bottom: none;
+}
+
+/* --- Vertical variant --- */
+
+.ds-tabs--vertical {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--ds-color-border);
+  gap: var(--ds-space-0-5);
+}
+
+.ds-tabs--vertical .ds-tab {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  padding: var(--ds-space-2) var(--ds-space-4);
+  text-align: left;
+}
+
+.ds-tabs--vertical .ds-tab--active {
+  border-bottom: none;
+  border-right-color: var(--ds-color-interactive);
+  color: var(--ds-color-text);
+}
+
+/* --- Small variant --- */
+
+.ds-tabs--sm .ds-tab {
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  font-size: var(--ds-text-xs);
+}
+
+/* --- Full width variant --- */
+
+.ds-tabs--full {
+  width: 100%;
+}
+
+.ds-tabs--full .ds-tab {
+  flex: 1;
+  justify-content: center;
+}
+
+/* --- Individual Tab --- */
+
+.ds-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-2) var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  white-space: nowrap;
+  transition: all var(--ds-duration-fast) ease;
+  margin-bottom: -1px;
+}
+
+.ds-tab:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-tab:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+  border-radius: var(--ds-radius-sm);
+}
+
+.ds-tab--active {
+  color: var(--ds-color-text);
+  border-bottom-color: var(--ds-color-interactive);
+}
+
+.ds-tab:disabled,
+.ds-tab[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* --- Tab Icon --- */
+
+.ds-tab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+/* --- Tab Count Badge --- */
+
+.ds-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-0) var(--ds-space-1-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text-tertiary);
+  background-color: var(--ds-color-bg-elevated);
+  border-radius: var(--ds-radius-full);
+  min-width: 1.25rem;
+}
+
+.ds-tab--active .ds-tab__count {
+  color: var(--ds-color-text-secondary);
+  background-color: var(--ds-color-overlay-active);
+}
+
+/* --- Tab Panel --- */
+
+.ds-tab-panel {
+  padding-top: var(--ds-space-5);
+}