@digiko-npm/designsystem 0.1.0

package/src/components/input.css

@@ -0,0 +1,116 @@
+/* ==========================================================================
+   Component: Form Inputs
+   Surface bg, clean borders, focus ring.
+   ========================================================================== */
+
+.ds-label {
+  display: block;
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+  margin-bottom: var(--ds-space-1-5);
+}
+
+.ds-input,
+.ds-textarea,
+.ds-select {
+  width: 100%;
+  padding: var(--ds-space-2-5) var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  transition: all var(--ds-duration-fast) ease;
+}
+
+.ds-input:hover,
+.ds-textarea:hover,
+.ds-select:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+.ds-input:focus,
+.ds-textarea:focus,
+.ds-select:focus {
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 1px var(--ds-color-border-active);
+  outline: none;
+}
+
+.ds-input::placeholder,
+.ds-textarea::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* States */
+.ds-input--error,
+.ds-textarea--error {
+  border-color: var(--ds-color-error);
+}
+.ds-input--error:focus,
+.ds-textarea--error:focus {
+  box-shadow: 0 0 0 1px var(--ds-color-error);
+}
+
+.ds-input--success {
+  border-color: var(--ds-color-success);
+}
+
+/* Sizes */
+.ds-input--sm {
+  padding: var(--ds-space-1) var(--ds-space-2);
+  font-size: var(--ds-text-xs);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-input--lg {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-size: var(--ds-text-base);
+}
+
+/* Textarea */
+.ds-textarea {
+  min-height: 6rem;
+  padding: var(--ds-space-2-5) var(--ds-space-4);
+  resize: vertical;
+}
+
+/* Select */
+.ds-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ds-space-3) center;
+  padding-right: var(--ds-space-8);
+}
+
+/* Help text */
+.ds-help {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1-5);
+}
+.ds-help--error { color: var(--ds-color-error); }
+
+/* Form Group */
+.ds-form-group { margin-bottom: var(--ds-space-4); }
+
+/* Checkbox / Radio */
+.ds-checkbox,
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+}
+.ds-checkbox input,
+.ds-radio input {
+  accent-color: var(--ds-color-interactive);
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/src/components/kbd.css

@@ -0,0 +1,55 @@
+/* ==========================================================================
+ * Kbd
+ * ==========================================================================
+ *
+ * Keyboard shortcut display component with a raised 3D key appearance.
+ * Use individually or group multiple keys with ds-kbd-group for combos
+ * like "Cmd + K".
+ *
+ * Usage:
+ *   <kbd class="ds-kbd">Esc</kbd>
+ *
+ *   <span class="ds-kbd-group">
+ *     <kbd class="ds-kbd">Cmd</kbd>
+ *     <span class="ds-kbd-group__separator">+</span>
+ *     <kbd class="ds-kbd">K</kbd>
+ *   </span>
+ *
+ * Modifiers:
+ *   .ds-kbd--lg  — Larger key display
+ * ========================================================================== */
+
+.ds-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5);
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-xs);
+  background-color: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-bottom-width: 2px;
+  border-radius: var(--ds-radius-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+/* Large variant */
+.ds-kbd--lg {
+  font-size: var(--ds-text-sm);
+  padding: var(--ds-space-1) var(--ds-space-2);
+}
+
+/* Key group (for combos like Cmd + K) */
+.ds-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+}
+
+/* Separator between keys */
+.ds-kbd-group__separator {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}

package/src/components/modal.css

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   Component: Modal
+   Backdrop blur, shadow-2xl, rounded-xl. Smooth scale transition.
+   ========================================================================== */
+
+.ds-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-4);
+  background-color: var(--ds-color-overlay);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-slow) var(--ds-ease-default),
+    visibility var(--ds-duration-slow) var(--ds-ease-default);
+}
+
+.ds-modal[open],
+.ds-modal--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ds-modal__content {
+  width: 100%;
+  max-width: 28rem;
+  max-height: 90dvh;
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.96);
+  transition: transform var(--ds-duration-slow) var(--ds-ease-out-expo);
+}
+
+.ds-modal[open] .ds-modal__content,
+.ds-modal--open .ds-modal__content {
+  transform: scale(1);
+}
+
+.ds-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-modal__header h3 {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  color: var(--ds-color-text);
+}
+
+.ds-modal__header p {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: var(--ds-color-text-tertiary);
+  border-radius: var(--ds-radius-md);
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
+  flex-shrink: 0;
+}
+.ds-modal__close:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-modal__body {
+  padding: var(--ds-space-5);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.ds-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-top: 1px solid var(--ds-color-border);
+}
+
+/* Size variants */
+.ds-modal--md .ds-modal__content { max-width: var(--ds-container-md); }
+.ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }

package/src/components/nav.css

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   Component: Navigation
+   Fixed glass header, backdrop-blur, h-16. Clean links.
+   ========================================================================== */
+
+.ds-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--ds-z-sticky);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--ds-container-padding);
+  height: 4rem;
+  background-color: var(--ds-color-nav-bg);
+  border-bottom: 1px solid var(--ds-color-nav-border);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+}
+
+.ds-nav--static {
+  position: relative;
+}
+
+.ds-nav__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: var(--ds-container-max);
+  margin-inline: auto;
+}
+
+.ds-nav__brand {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  color: var(--ds-color-text);
+  letter-spacing: var(--ds-tracking-tight);
+}
+
+.ds-nav__menu {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-8);
+}
+
+.ds-nav__link {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  transition: color var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-nav__link:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-nav__link--active {
+  color: var(--ds-color-text);
+}
+
+/* Nav actions (theme toggle, etc) */
+.ds-nav__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+
+/* Icon button in nav */
+.ds-nav__icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--ds-radius-md);
+  color: var(--ds-color-text-secondary);
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+.ds-nav__icon-btn:hover {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-overlay-hover);
+}
+
+/* --- Mobile nav overlay --- */
+.ds-nav__mobile {
+  overflow: hidden;
+  max-height: 0;
+  border-bottom: 0 solid var(--ds-color-nav-border);
+  background-color: var(--ds-color-nav-bg);
+  backdrop-filter: blur(20px);
+  transition: all var(--ds-duration-slow) var(--ds-ease-out-expo);
+}
+
+.ds-nav__mobile--open {
+  max-height: 16rem;
+  border-bottom-width: 1px;
+}
+
+.ds-nav__mobile-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-4) var(--ds-container-padding);
+}
+
+/* --- Sidebar --- */
+
+.ds-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 16rem;
+  padding: var(--ds-space-5);
+  background-color: var(--ds-color-surface);
+  border-right: 1px solid var(--ds-color-border);
+  height: 100%;
+}
+
+.ds-sidebar__section {
+  margin-bottom: var(--ds-space-6);
+}
+
+.ds-sidebar__title {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  color: var(--ds-color-text-tertiary);
+  margin-bottom: var(--ds-space-3);
+}
+
+.ds-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  border-radius: var(--ds-radius-md);
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-sidebar__link:hover {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-overlay-hover);
+}
+
+.ds-sidebar__link--active {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg-elevated);
+}

package/src/components/pagination.css

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   Pagination Component
+   ==========================================================================
+   A row of page-number controls for navigating multi-page content.
+
+   Usage:
+     <nav class="ds-pagination" aria-label="Pagination">
+       <button class="ds-pagination__prev" aria-label="Previous page">&lsaquo;</button>
+       <button class="ds-pagination__item">1</button>
+       <button class="ds-pagination__item ds-pagination__item--active" aria-current="page">2</button>
+       <span class="ds-pagination__ellipsis">&hellip;</span>
+       <button class="ds-pagination__item">10</button>
+       <button class="ds-pagination__next" aria-label="Next page">&rsaquo;</button>
+     </nav>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-sans);
+}
+
+/* ---------------------------------------------------------------------------
+   Item (page number)
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 var(--ds-space-1);
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text-secondary);
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+  cursor: pointer;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-out),
+    color var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ds-pagination__item:hover {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-pagination__item:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------------------------------
+   Active page
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__item--active,
+.ds-pagination__item--active:hover {
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------------
+   Disabled item
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__item--disabled,
+.ds-pagination__item--disabled:hover {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Previous / Next navigation buttons
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__prev,
+.ds-pagination__next {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text-secondary);
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+  cursor: pointer;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-out),
+    color var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ds-pagination__prev:hover,
+.ds-pagination__next:hover {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-pagination__prev:focus-visible,
+.ds-pagination__next:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+}
+
+.ds-pagination__prev:disabled,
+.ds-pagination__next:disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Ellipsis
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  color: var(--ds-color-text-tertiary);
+  font-size: var(--ds-text-sm);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Page info text (e.g. "Page 1 of 10")
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__info {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Compact
+   --------------------------------------------------------------------------- */
+
+.ds-pagination--compact .ds-pagination__item,
+.ds-pagination--compact .ds-pagination__prev,
+.ds-pagination--compact .ds-pagination__next,
+.ds-pagination--compact .ds-pagination__ellipsis {
+  min-width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--ds-text-xs);
+}

package/src/components/popover.css

@@ -0,0 +1,112 @@
+/* ==========================================================================
+ * Popover
+ * ==========================================================================
+ *
+ * Flexible popover component for displaying complex content anchored to a
+ * trigger element. Supports four placement directions (top, bottom, left,
+ * right) and multiple size variants. Default placement is bottom.
+ *
+ * Usage:
+ *   <div class="ds-popover ds-popover--open">
+ *     <button>Trigger</button>
+ *     <div class="ds-popover__content">...</div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-popover--open         — Shows the popover content
+ *   .ds-popover--top          — Places content above the trigger
+ *   .ds-popover--bottom       — Places content below the trigger (default)
+ *   .ds-popover--left         — Places content to the left of the trigger
+ *   .ds-popover--right        — Places content to the right of the trigger
+ *   .ds-popover__content--sm  — Smaller popover (12rem min-width)
+ *   .ds-popover__content--lg  — Larger popover (24rem min-width)
+ * ========================================================================== */
+
+.ds-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+.ds-popover__content {
+  position: absolute;
+  z-index: var(--ds-z-dropdown);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: var(--ds-shadow-lg);
+  padding: var(--ds-space-4);
+  min-width: 16rem;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease),
+    visibility var(--ds-duration-fast) var(--ds-ease),
+    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+}
+
+/* Open state */
+.ds-popover--open .ds-popover__content {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+/* Placement: bottom (default) */
+.ds-popover__content,
+.ds-popover--bottom .ds-popover__content {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.96);
+}
+
+.ds-popover--open .ds-popover__content,
+.ds-popover--bottom.ds-popover--open .ds-popover__content {
+  transform: translateX(-50%) scale(1);
+}
+
+/* Placement: top */
+.ds-popover--top .ds-popover__content {
+  bottom: calc(100% + 8px);
+  top: auto;
+  left: 50%;
+  transform: translateX(-50%) scale(0.96);
+}
+
+.ds-popover--top.ds-popover--open .ds-popover__content {
+  transform: translateX(-50%) scale(1);
+}
+
+/* Placement: left */
+.ds-popover--left .ds-popover__content {
+  right: calc(100% + 8px);
+  top: 50%;
+  left: auto;
+  transform: translateY(-50%) scale(0.96);
+}
+
+.ds-popover--left.ds-popover--open .ds-popover__content {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Placement: right */
+.ds-popover--right .ds-popover__content {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%) scale(0.96);
+}
+
+.ds-popover--right.ds-popover--open .ds-popover__content {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Size: small */
+.ds-popover__content--sm {
+  min-width: 12rem;
+  padding: var(--ds-space-3);
+}
+
+/* Size: large */
+.ds-popover__content--lg {
+  min-width: 24rem;
+}