@adamarant/designsystem 0.11.2

package/src/components/toggle.css

@@ -0,0 +1,173 @@
+/* ==========================================================================
+   Toggle / Switch Component
+   ==========================================================================
+   A toggle (switch) control for binary on/off states.
+   Supports aria-checked attribute and modifier-class driven states.
+
+   ARIA requirements (consumer responsibility):
+   - Element: <button role="switch" aria-checked="false|true">
+   - Label: pair with visible label via aria-labelledby or wrap in <label>
+   - Keyboard: Space toggles state (native <button> handles this)
+   - State: update aria-checked on toggle
+
+   Usage:
+     <button class="ds-toggle" role="switch" aria-checked="false"></button>
+
+     <label class="ds-toggle-label">
+       <button class="ds-toggle" role="switch" aria-checked="true"></button>
+       <span class="ds-toggle-label__text">Dark mode</span>
+     </label>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Track
+   --------------------------------------------------------------------------- */
+
+.ds-toggle {
+  display: inline-flex;
+  position: relative;
+  width: 3.25rem;
+  height: 1.5rem;
+  /* Proportions locked: track 2.2:1, thumb 59%w 80%h of track */
+  padding: 2px;
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-surface-elevated);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  transition: background-color var(--ds-duration-normal) var(--ds-ease-out),
+              box-shadow var(--ds-duration-normal) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+  flex-shrink: 0;
+
+  /* ---------------------------------------------------------------------------
+     Thumb (pseudo-element)
+     --------------------------------------------------------------------------- */
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: 2px;
+    inset-block-start: 50%;
+    width: 1.875rem;
+    height: 1.25rem;
+    border-radius: var(--ds-radius-full);
+    background-color: var(--ds-color-static-white);
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.15),
+      0 0 0 0.5px rgba(0, 0, 0, 0.04);
+    transform: translateY(-50%);
+    transition: transform var(--ds-duration-normal) var(--ds-ease-out);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Checked state
+     --------------------------------------------------------------------------- */
+
+  &[aria-checked="true"],
+  &--checked {
+    background-color: var(--ds-color-brand);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  &[aria-checked="true"]::after,
+  &--checked::after {
+    transform: translateX(1.125rem) translateY(-50%);
+  }
+
+
+  /* ---------------------------------------------------------------------------
+     Hover
+     --------------------------------------------------------------------------- */
+
+  &:hover {
+    background-color: var(--ds-color-surface-elevated-hover);
+  }
+
+  &[aria-checked="true"]:hover,
+  &--checked:hover {
+    background-color: var(--ds-color-brand-hover);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Focus
+     --------------------------------------------------------------------------- */
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
+                0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Disabled
+     --------------------------------------------------------------------------- */
+
+  &:disabled,
+  &--disabled {
+    opacity: var(--ds-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Size: Small
+     --------------------------------------------------------------------------- */
+
+  &--sm {
+    width: 2.75rem;
+    height: 1.25rem;
+    padding: 2px;
+
+    &::after {
+      inset-inline-start: 2px;
+      width: 1.625rem;
+      height: 1rem;
+    }
+
+    &[aria-checked="true"]::after,
+    &.ds-toggle--checked::after {
+      transform: translateX(0.875rem) translateY(-50%);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Size: Large
+     --------------------------------------------------------------------------- */
+
+  &--lg {
+    width: 3.75rem;
+    height: 1.75rem;
+    padding: 2px;
+
+    &::after {
+      inset-inline-start: 2px;
+      width: 2.25rem;
+      height: 1.4rem;
+    }
+
+    &[aria-checked="true"]::after,
+    &.ds-toggle--checked::after {
+      transform: translateX(1.25rem) translateY(-50%);
+    }
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Label wrapper
+   --------------------------------------------------------------------------- */
+
+.ds-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+
+  &__text {
+    color: var(--ds-color-text-secondary);
+  }
+}

package/src/components/toolbar.css

@@ -0,0 +1,206 @@
+/* ==========================================================================
+   Component: Toolbar
+   Fixed bar with rows of actions: toolbar buttons, filter chips, segmented
+   controls, and scrollable groups. Common in data-heavy UIs below a header.
+
+   Usage:
+     <div class="ds-toolbar">
+       <div class="ds-toolbar__row">
+         <div class="ds-toolbar__group">...</div>
+         <div class="ds-toolbar__spacer"></div>
+         <div class="ds-toolbar__group">
+           <button class="ds-toolbar__btn ds-toolbar__btn--active">
+             <span>Filter</span>
+             <span class="ds-toolbar__badge">3</span>
+           </button>
+           <button class="ds-toolbar__btn">Sort</button>
+         </div>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-toolbar__row--scroll      — Horizontally scrollable row
+     .ds-toolbar__btn--active      — Active/toggled button
+     .ds-toolbar__group--scroll    — Scrollable group within a row
+
+   Segmented control:
+     <div class="ds-toolbar__segmented">
+       <button class="ds-toolbar__segmented-btn ds-toolbar__segmented-btn--active">Past</button>
+       <button class="ds-toolbar__segmented-btn">Future</button>
+     </div>
+   ========================================================================== */
+
+/* Container query: collapse button labels when toolbar is narrow */
+.ds-toolbar {
+  container-type: inline-size;
+
+  /* Row container */
+  &__row {
+    display: flex;
+    align-items: center;
+    height: var(--ds-toolbar-row-height, 2.5rem);
+    gap: var(--ds-space-3);
+    padding-inline: var(--ds-space-4);
+
+    &--scroll {
+      overflow-x: auto;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar { display: none; }
+    }
+  }
+
+  /* Group (flex row of items) */
+  &__group {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    &--scroll {
+      flex-shrink: 1;
+      min-width: 0;
+      overflow-x: auto;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar { display: none; }
+    }
+  }
+
+  /* Spacer */
+  &__spacer {
+    flex: 1 1 0;
+  }
+
+  /* Toolbar button */
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-space-1-5);
+    padding: var(--ds-space-1) var(--ds-space-2-5);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    font-family: inherit;
+    color: var(--ds-color-text-tertiary);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--ds-radius-md);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color var(--ds-duration-fast) var(--ds-ease-default),
+      background-color var(--ds-duration-fast) var(--ds-ease-default),
+      border-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      color: var(--ds-color-text-secondary);
+      background: var(--ds-color-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+
+    &--active,
+    &--active:hover {
+      color: var(--ds-color-text);
+      background: var(--ds-color-surface-elevated);
+      border-color: var(--ds-color-border);
+    }
+  }
+
+  /* Badge (count indicator inside button) */
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1rem;
+    height: 1rem;
+    padding: 0 0.25rem;
+    font-size: 0.625rem;
+    font-weight: var(--ds-weight-semibold);
+    line-height: 1;
+    color: var(--ds-color-on-inverted);
+    background: var(--ds-color-interactive);
+    border-radius: var(--ds-radius-full);
+  }
+
+  /* Eye toggle (visibility) */
+  &__eye {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  /* Segmented control */
+  &__segmented {
+    flex-shrink: 0;
+    display: flex;
+    background: var(--ds-color-surface);
+    border-radius: var(--ds-radius-md);
+    padding: 2px;
+  }
+
+  &__segmented-btn {
+    padding: var(--ds-space-1) var(--ds-space-3);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-tertiary);
+    border: none;
+    border-radius: var(--ds-radius-sm);
+    background: transparent;
+    cursor: pointer;
+    transition:
+      color var(--ds-duration-fast) var(--ds-ease-default),
+      background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      color: var(--ds-color-text-secondary);
+    }
+
+    &--active {
+      background: var(--ds-color-surface-elevated);
+      color: var(--ds-color-text);
+    }
+  }
+}
+
+@container (max-width: 480px) {
+  .ds-toolbar__btn-label { display: none; }
+
+  .ds-toolbar__btn {
+    padding: var(--ds-space-2);
+    min-width: var(--ds-size-2);
+    min-height: var(--ds-size-2);
+    justify-content: center;
+  }
+}
+
+/* Responsive: mobile */
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-toolbar__row {
+    padding-inline: var(--ds-space-3);
+    gap: var(--ds-space-2);
+  }
+
+  .ds-toolbar__btn-label { display: none; }
+
+  .ds-toolbar__btn {
+    padding: var(--ds-space-2);
+    min-width: var(--ds-size-2);
+    min-height: var(--ds-size-2);
+    justify-content: center;
+  }
+
+  .ds-toolbar__badge {
+    font-size: 0.5rem;
+    min-width: 0.875rem;
+    height: 0.875rem;
+  }
+}

package/src/components/tooltip.css

@@ -0,0 +1,167 @@
+/* ==========================================================================
+   Component: Tooltip
+   Inverted bubble with arrow, positioned via modifier classes.
+   Default placement: top.
+
+   ARIA requirements (consumer responsibility):
+   - Tooltip content: role="tooltip", id="[tooltip-id]"
+   - Trigger element: aria-describedby="[tooltip-id]"
+   - Keyboard: tooltip should show on focus as well as hover (CSS handles this via :hover)
+   - For focus support: also add :focus-within show logic if trigger is focusable
+   ========================================================================== */
+
+.ds-tooltip {
+  position: relative;
+  display: inline-flex;
+
+  /* --- Tooltip bubble --- */
+
+  &__content {
+    position: absolute;
+    z-index: var(--ds-z-tooltip);
+    background-color: var(--ds-color-inverted);
+    color: var(--ds-color-on-inverted);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    line-height: var(--ds-leading-snug);
+    padding: var(--ds-space-1) var(--ds-space-2);
+    border-radius: var(--ds-radius-md);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      visibility var(--ds-duration-fast) var(--ds-ease-default),
+      transform var(--ds-duration-fast) var(--ds-ease-out);
+
+    /* --- Arrow (shared base) --- */
+
+    &::after {
+      content: '';
+      position: absolute;
+      border: 4px solid transparent;
+    }
+  }
+
+  /* --- Show on hover --- */
+
+  &:hover .ds-tooltip__content {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* --- Delay modifier --- */
+
+  &--delay .ds-tooltip__content {
+    transition-delay: 0ms;
+  }
+
+  &--delay:hover .ds-tooltip__content {
+    transition-delay: 200ms;
+  }
+
+  /* =============================================
+     Placement: Top (default)
+     ============================================= */
+
+  & .ds-tooltip__content,
+  &--top .ds-tooltip__content {
+    inset-block-end: calc(100% + var(--ds-offset-md));
+    inset-inline-start: 50%;
+    transform: translateX(-50%) translateY(4px);
+  }
+
+  &:hover .ds-tooltip__content,
+  &--top:hover .ds-tooltip__content {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* Arrow — points down */
+  & .ds-tooltip__content::after,
+  &--top .ds-tooltip__content::after {
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--ds-color-inverted);
+  }
+
+  /* =============================================
+     Placement: Bottom
+     ============================================= */
+
+  &--bottom .ds-tooltip__content {
+    inset-block-start: calc(100% + var(--ds-offset-md));
+    inset-block-end: auto;
+    inset-inline-start: 50%;
+    transform: translateX(-50%) translateY(-4px);
+  }
+
+  &--bottom:hover .ds-tooltip__content {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* Arrow — points up */
+  &--bottom .ds-tooltip__content::after {
+    inset-block-end: 100%;
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    border-top-color: transparent;
+    border-bottom-color: var(--ds-color-inverted);
+  }
+
+  /* =============================================
+     Placement: Left
+     ============================================= */
+
+  &--left .ds-tooltip__content {
+    inset-inline-end: calc(100% + var(--ds-offset-md));
+    inset-inline-start: auto;
+    inset-block-end: auto;
+    inset-block-start: 50%;
+    transform: translateY(-50%) translateX(4px);
+  }
+
+  &--left:hover .ds-tooltip__content {
+    transform: translateY(-50%) translateX(0);
+  }
+
+  /* Arrow — points right */
+  &--left .ds-tooltip__content::after {
+    inset-inline-start: 100%;
+    inset-block-start: 50%;
+    inset-block-end: auto;
+    inset-inline-end: auto;
+    transform: translateY(-50%);
+    border-top-color: transparent;
+    border-inline-start-color: var(--ds-color-inverted);
+  }
+
+  /* =============================================
+     Placement: Right
+     ============================================= */
+
+  &--right .ds-tooltip__content {
+    inset-inline-start: calc(100% + var(--ds-offset-md));
+    inset-inline-end: auto;
+    inset-block-end: auto;
+    inset-block-start: 50%;
+    transform: translateY(-50%) translateX(-4px);
+  }
+
+  &--right:hover .ds-tooltip__content {
+    transform: translateY(-50%) translateX(0);
+  }
+
+  /* Arrow — points left */
+  &--right .ds-tooltip__content::after {
+    inset-inline-end: 100%;
+    inset-inline-start: auto;
+    inset-block-start: 50%;
+    inset-block-end: auto;
+    transform: translateY(-50%);
+    border-top-color: transparent;
+    border-inline-end-color: var(--ds-color-inverted);
+  }
+}

package/src/components/truncated-text.css

@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Component: Truncated Text
+   Display long text (hashes, addresses, IDs) with truncation from the middle
+   or end, with optional copy functionality styling.
+
+   Usage:
+     <!-- End truncation (CSS native) -->
+     <span class="ds-truncate">0x1a2b3c4d5e6f7890...</span>
+
+     <!-- Middle truncation (requires JS to split text) -->
+     <span class="ds-truncate ds-truncate--middle">
+       <span class="ds-truncate__start">0x1a2b3c</span>
+       <span class="ds-truncate__separator">...</span>
+       <span class="ds-truncate__end">7890abcd</span>
+     </span>
+
+     <!-- Hash display with copy button -->
+     <span class="ds-hash">
+       <span class="ds-hash__value">0x1a2b...7890</span>
+       <button class="ds-copy-btn ds-copy-btn--sm" aria-label="Copy address">...</button>
+     </span>
+
+   Modifiers:
+     .ds-truncate--middle   — Middle truncation layout
+   ========================================================================== */
+
+.ds-truncate {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.ds-truncate--middle {
+  display: inline-flex;
+  align-items: baseline;
+  overflow: visible;
+  text-overflow: clip;
+
+  & .ds-truncate__start {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
+    min-width: 3ch;
+  }
+
+  & .ds-truncate__separator {
+    flex-shrink: 0;
+    color: var(--ds-color-text-tertiary);
+  }
+
+  & .ds-truncate__end {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}
+
+/* --- Hash display (address/ID with copy) --- */
+.ds-hash {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+
+  &__value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/index.css

@@ -0,0 +1,21 @@
+/* ==========================================================================
+   @adamarant/designsystem
+
+   Import this one file to get everything.
+   Or import individual layers for fine-grained control:
+
+     import '@adamarant/designsystem/tokens'
+     import '@adamarant/designsystem/base'
+     import '@adamarant/designsystem/components'
+     import '@adamarant/designsystem/utilities'
+
+   To customize: override any --ds-* variable in your project CSS.
+   Your values always win. Nothing breaks.
+   ========================================================================== */
+
+@layer tokens, base, components, utilities;
+
+@import './tokens/index.css' layer(tokens);
+@import './base/index.css' layer(base);
+@import './components/index.css' layer(components);
+@import './utilities/index.css' layer(utilities);

package/src/js/theme.js

@@ -0,0 +1,67 @@
+/**
+ * @ds/designsystem — Theme Manager
+ *
+ * Handles light/dark theme toggling with localStorage persistence.
+ *
+ * Usage:
+ *   import { theme } from '@ds/designsystem/js';
+ *   theme.toggle();
+ *   theme.set('dark');
+ *   theme.get(); // 'light' | 'dark' | 'system'
+ */
+
+const STORAGE_KEY = 'ds-theme';
+
+function getSystemTheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function applyTheme(mode) {
+  const resolved = mode === 'system' ? getSystemTheme() : mode;
+  document.documentElement.setAttribute('data-theme', resolved);
+}
+
+export const theme = {
+  /** Initialize theme from stored preference or system default */
+  init() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      applyTheme(stored);
+    }
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const current = localStorage.getItem(STORAGE_KEY);
+      if (!current || current === 'system') {
+        applyTheme('system');
+      }
+    });
+  },
+
+  /** Set theme: 'light', 'dark', or 'system' */
+  set(mode) {
+    localStorage.setItem(STORAGE_KEY, mode);
+    applyTheme(mode);
+  },
+
+  /** Get current stored preference */
+  get() {
+    return localStorage.getItem(STORAGE_KEY) || 'system';
+  },
+
+  /** Toggle between light and dark */
+  toggle() {
+    const current = document.documentElement.getAttribute('data-theme');
+    const next = current === 'dark' ? 'light' : 'dark';
+    this.set(next);
+    return next;
+  }
+};
+
+// Auto-init if script is loaded directly
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => theme.init());
+  } else {
+    theme.init();
+  }
+}