@digiko-npm/designsystem 0.1.0

package/src/components/command.css

@@ -0,0 +1,185 @@
+/* ==========================================================================
+ * Command
+ * ==========================================================================
+ *
+ * Command palette / search overlay following the Cmd+K pattern. Provides a
+ * full-screen overlay with a centered search dialog, grouped results,
+ * keyboard-navigable items, and a footer with shortcut hints.
+ *
+ * Usage:
+ *   <div class="ds-command ds-command--open">
+ *     <div class="ds-command__content">
+ *       <div class="ds-command__input-wrapper">
+ *         <span class="ds-command__input-icon">...</span>
+ *         <input class="ds-command__input" placeholder="Search..." />
+ *       </div>
+ *       <div class="ds-command__list">
+ *         <div class="ds-command__group">
+ *           <div class="ds-command__group-heading">Results</div>
+ *           <div class="ds-command__item ds-command__item--active">
+ *             <span class="ds-command__item-icon">...</span>
+ *             <span class="ds-command__item-label">Item</span>
+ *             <span class="ds-command__item-shortcut">Ctrl+N</span>
+ *           </div>
+ *         </div>
+ *         <div class="ds-command__empty">No results found.</div>
+ *       </div>
+ *       <div class="ds-command__footer">...</div>
+ *     </div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-command--open  — Shows the command palette
+ * ========================================================================== */
+
+/* Overlay */
+.ds-command {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  background-color: var(--ds-color-overlay);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease),
+    visibility var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Open state */
+.ds-command--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Content panel */
+.ds-command__content {
+  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);
+  width: 100%;
+  max-width: 32rem;
+  overflow: hidden;
+  transform: scale(0.96) translateY(-8px);
+  transition:
+    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+}
+
+.ds-command--open .ds-command__content {
+  transform: scale(1) translateY(0);
+}
+
+/* Input wrapper */
+.ds-command__input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+/* Search icon */
+.ds-command__input-icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Search input */
+.ds-command__input {
+  flex: 1;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  font-size: var(--ds-text-base);
+  color: var(--ds-color-text);
+  font-family: var(--ds-font-sans);
+}
+
+.ds-command__input::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Results list */
+.ds-command__list {
+  max-height: 20rem;
+  overflow-y: auto;
+  padding: var(--ds-space-2);
+}
+
+/* Group of results */
+.ds-command__group {
+  /* structural grouping — no additional visual styles needed */
+}
+
+/* Group heading */
+.ds-command__group-heading {
+  font-size: var(--ds-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ds-color-text-tertiary);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* Individual item */
+.ds-command__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  border-radius: var(--ds-radius-lg);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease),
+    color var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Item hover & active states */
+.ds-command__item:hover,
+.ds-command__item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+/* Item icon */
+.ds-command__item-icon {
+  flex-shrink: 0;
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Item label */
+.ds-command__item-label {
+  flex: 1;
+}
+
+/* Item shortcut hint */
+.ds-command__item-shortcut {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Empty state */
+.ds-command__empty {
+  padding: var(--ds-space-8);
+  text-align: center;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Footer */
+.ds-command__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  border-top: 1px solid var(--ds-color-border);
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}

package/src/components/divider.css

@@ -0,0 +1,66 @@
+/* ==========================================================================
+   Component: Divider
+   Horizontal and vertical separators with optional centered label.
+   ========================================================================== */
+
+.ds-divider {
+  border: none;
+  border-top: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-4);
+  width: 100%;
+}
+
+/* --- Vertical --- */
+
+.ds-divider--vertical {
+  border-top: none;
+  border-left: 1px solid var(--ds-color-border);
+  display: inline-block;
+  width: auto;
+  height: auto;
+  min-height: 1rem;
+  align-self: stretch;
+  margin-block: var(--ds-space-0);
+  margin-inline: var(--ds-space-3);
+}
+
+/* --- Subtle --- */
+
+.ds-divider--subtle {
+  border-color: var(--ds-color-border-subtle);
+}
+
+/* --- Spacious --- */
+
+.ds-divider--spacious {
+  margin-block: var(--ds-space-8);
+}
+
+.ds-divider--spacious.ds-divider--vertical {
+  margin-block: var(--ds-space-0);
+  margin-inline: var(--ds-space-6);
+}
+
+/* --- Label (centered text with lines on either side) --- */
+
+.ds-divider--label {
+  border-top: none;
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  white-space: nowrap;
+}
+
+.ds-divider--label::before,
+.ds-divider--label::after {
+  content: '';
+  flex: 1;
+  height: 0;
+  border-top: 1px solid var(--ds-color-border);
+}

package/src/components/drawer.css

@@ -0,0 +1,209 @@
+/* ==========================================================================
+ * Drawer / Sheet
+ * ==========================================================================
+ *
+ * A sliding overlay panel anchored to the edge of the viewport.
+ * Default direction is right; use `--left` or `--bottom` modifiers
+ * to change the slide origin.
+ *
+ * Sizes:
+ *   --sm   18 rem
+ *   (default)  24 rem
+ *   --lg   36 rem
+ *
+ * Markup:
+ *   <div class="ds-drawer ds-drawer--right ds-drawer--open">
+ *     <div class="ds-drawer__content">
+ *       <div class="ds-drawer__header">
+ *         <h3>Title</h3>
+ *         <button class="ds-drawer__close" aria-label="Close">&times;</button>
+ *       </div>
+ *       <div class="ds-drawer__body">…</div>
+ *       <div class="ds-drawer__footer">…</div>
+ *     </div>
+ *   </div>
+ * ========================================================================== */
+
+/* Overlay backdrop
+ * -------------------------------------------------------------------------- */
+
+.ds-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: var(--ds-color-overlay);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-normal) var(--ds-ease-default),
+    visibility var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-drawer--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Sliding panel
+ * -------------------------------------------------------------------------- */
+
+.ds-drawer__content {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-lg);
+  overflow-y: auto;
+  transition: transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+}
+
+/* ==========================================================================
+ * Direction: Right (default)
+ * ========================================================================== */
+
+.ds-drawer__content,
+.ds-drawer--right .ds-drawer__content {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 24rem;
+  max-width: 90vw;
+  border-left: 1px solid var(--ds-color-border);
+  transform: translateX(100%);
+}
+
+.ds-drawer--open .ds-drawer__content,
+.ds-drawer--right.ds-drawer--open .ds-drawer__content {
+  transform: translateX(0);
+}
+
+/* ==========================================================================
+ * Direction: Left
+ * ========================================================================== */
+
+.ds-drawer--left .ds-drawer__content {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: auto;
+  width: 24rem;
+  max-width: 90vw;
+  border-left: 0;
+  border-right: 1px solid var(--ds-color-border);
+  transform: translateX(-100%);
+}
+
+.ds-drawer--left.ds-drawer--open .ds-drawer__content {
+  transform: translateX(0);
+}
+
+/* ==========================================================================
+ * Direction: Bottom
+ * ========================================================================== */
+
+.ds-drawer--bottom .ds-drawer__content {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: auto;
+  width: auto;
+  max-height: 90dvh;
+  border-left: 0;
+  border-top: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
+  transform: translateY(100%);
+}
+
+.ds-drawer--bottom.ds-drawer--open .ds-drawer__content {
+  transform: translateY(0);
+}
+
+/* ==========================================================================
+ * Sizes
+ * ========================================================================== */
+
+.ds-drawer--sm .ds-drawer__content {
+  width: 18rem;
+}
+
+.ds-drawer--lg .ds-drawer__content {
+  width: 36rem;
+}
+
+/* Bottom drawers should not have a fixed width */
+.ds-drawer--bottom.ds-drawer--sm .ds-drawer__content,
+.ds-drawer--bottom.ds-drawer--lg .ds-drawer__content {
+  width: auto;
+}
+
+/* ==========================================================================
+ * Header
+ * ========================================================================== */
+
+.ds-drawer__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-drawer__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);
+  margin: 0;
+}
+
+/* ==========================================================================
+ * Close button
+ * ========================================================================== */
+
+.ds-drawer__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ds-radius-md);
+  background-color: transparent;
+  color: var(--ds-color-text-tertiary);
+  font-size: var(--ds-text-lg);
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-drawer__close:hover {
+  background-color: var(--ds-color-overlay);
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+ * Body
+ * ========================================================================== */
+
+.ds-drawer__body {
+  padding: var(--ds-space-5);
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ==========================================================================
+ * Footer
+ * ========================================================================== */
+
+.ds-drawer__footer {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-top: 1px solid var(--ds-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-2);
+}

package/src/components/dropdown.css

@@ -0,0 +1,139 @@
+/* ==========================================================================
+   Component: Dropdown
+   Floating menu with surface bg, scale transition, keyboard-friendly items.
+   ========================================================================== */
+
+.ds-dropdown {
+  position: relative;
+}
+
+.ds-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* --- Menu panel --- */
+
+.ds-dropdown__menu {
+  position: absolute;
+  top: calc(100% + var(--ds-space-1));
+  left: 0;
+  z-index: var(--ds-z-dropdown);
+  min-width: 12rem;
+  padding-block: var(--ds-space-1);
+  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);
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transform-origin: top left;
+  transition:
+    opacity var(--ds-duration-normal) var(--ds-ease-default),
+    visibility var(--ds-duration-normal) var(--ds-ease-default),
+    transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+}
+
+/* Open state — modifier on menu or parent */
+
+.ds-dropdown__menu--open,
+.ds-dropdown--open .ds-dropdown__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+/* --- Alignment variants --- */
+
+.ds-dropdown__menu--right {
+  left: auto;
+  right: 0;
+  transform-origin: top right;
+}
+
+.ds-dropdown__menu--up {
+  top: auto;
+  bottom: calc(100% + var(--ds-space-1));
+  transform-origin: bottom left;
+}
+
+.ds-dropdown__menu--up.ds-dropdown__menu--right {
+  transform-origin: bottom right;
+}
+
+/* --- Menu item --- */
+
+.ds-dropdown__item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  margin-inline: var(--ds-space-1);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--ds-radius-md);
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-dropdown__item:hover {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-dropdown__item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-dropdown__item--danger:hover {
+  color: var(--ds-color-error);
+}
+
+.ds-dropdown__item--disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}
+
+/* --- Item slots --- */
+
+.ds-dropdown__item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.ds-dropdown__item-label {
+  flex: 1;
+}
+
+.ds-dropdown__item-shortcut {
+  margin-left: auto;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* --- Divider --- */
+
+.ds-dropdown__divider {
+  margin-block: var(--ds-space-1);
+  border: 0;
+  border-top: 1px solid var(--ds-color-border);
+}
+
+/* --- Section header --- */
+
+.ds-dropdown__header {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  margin-inline: var(--ds-space-1);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  color: var(--ds-color-text-tertiary);
+}

package/src/components/empty-state.css

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   Component: Empty State
+   Centered message for when there's no data to display.
+   ========================================================================== */
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--ds-space-12);
+  gap: var(--ds-space-4);
+}
+
+.ds-empty-state__icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--ds-color-text-tertiary);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-empty-state__title {
+  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);
+  line-height: var(--ds-leading-tight);
+}
+
+.ds-empty-state__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  max-width: 20rem;
+  line-height: var(--ds-leading-relaxed);
+}
+
+.ds-empty-state__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-3);
+  margin-top: var(--ds-space-2);
+}
+
+/* --- Compact variant --- */
+
+.ds-empty-state--compact {
+  padding: var(--ds-space-8);
+}
+
+.ds-empty-state--compact .ds-empty-state__icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.ds-empty-state--compact .ds-empty-state__title {
+  font-size: var(--ds-text-base);
+}
+
+/* --- Card variant --- */
+
+.ds-empty-state--card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+}

package/src/components/index.css

@@ -0,0 +1,35 @@
+/* === Core === */
+@import './button.css';
+@import './card.css';
+@import './input.css';
+@import './badge.css';
+@import './nav.css';
+@import './modal.css';
+@import './toast.css';
+@import './table.css';
+
+/* === Tier 1 — Essential === */
+@import './tabs.css';
+@import './alert.css';
+@import './divider.css';
+@import './dropdown.css';
+@import './tooltip.css';
+@import './avatar.css';
+@import './skeleton.css';
+@import './empty-state.css';
+
+/* === Tier 2 — Common === */
+@import './toggle.css';
+@import './breadcrumb.css';
+@import './pagination.css';
+@import './tag.css';
+@import './accordion.css';
+@import './drawer.css';
+@import './progress.css';
+
+/* === Tier 3 — Advanced === */
+@import './popover.css';
+@import './slider.css';
+@import './timeline.css';
+@import './kbd.css';
+@import './command.css';