@oleksandr-94/aura-css 0.1.0

package/src/components/_tabs.scss

@@ -0,0 +1,150 @@
+// ============================================================
+// Aura — Tabs (segmented)
+// Container is a skin-aware well; the active tab is a skin-aware
+// filled control. Content switching is left to the app.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}tabs {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: var(--radius-md);
+    @include s.field;
+  }
+  .#{$p}tabs--block { display: flex; width: 100%; }
+  .#{$p}tabs--block .#{$p}tab { flex: 1; }
+
+  .#{$p}tab {
+    font: inherit;
+    font-weight: 700;
+    font-size: var(--fs-sm);
+    padding: 8px 14px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--on-surface-muted);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color .15s ease;
+
+    &:hover:not(.#{$p}tab--active) { color: var(--on-surface); }
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+  }
+
+  .#{$p}tab--active {
+    --_bg: var(--primary);
+    --_fg: var(--on-primary);
+    @include s.control;
+    color: var(--_fg);
+  }
+
+  // panel shown/hidden by the JS (or your framework) via the `hidden` attribute
+  .#{$p}tab-panel { margin-top: var(--space-4); }
+
+  // ---- underline variant ----
+  .#{$p}tabs--underline {
+    gap: 4px;
+    padding: 0;
+    background: none;
+    border: none;
+    border-bottom: 1px solid var(--outline);
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+
+    .#{$p}tab {
+      border-radius: 0;
+      padding: 10px 14px;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+    }
+    .#{$p}tab--active {
+      background: none;
+      box-shadow: none;
+      color: var(--primary);
+      border-bottom-color: var(--primary);
+    }
+  }
+
+  // ---- lift variant (raised "folder" tab that merges into its panel) ----
+  // Pair with .tab-panels (a surface-1 box). The active tab overlaps the
+  // panel's top border and shares its background → one connected surface.
+  .#{$p}tabs--lift {
+    gap: 4px;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+
+    .#{$p}tab {
+      position: relative;
+      z-index: 0;
+      border-radius: var(--radius-md) var(--radius-md) 0 0;
+      padding: 10px 16px;
+      border: 1px solid transparent;
+      border-bottom: none;
+      margin-bottom: -1px;          // overlap the panel's top border
+    }
+    .#{$p}tab--active {
+      z-index: 1;                   // sit above the panel border → merge
+      background: var(--surface-1);
+      box-shadow: none;
+      color: var(--on-surface);
+      border-color: var(--outline);
+    }
+  }
+
+  // Panel container — a surface card that works with any tab variant.
+  // Default: a standalone rounded card (a gap below pill/underline tabs).
+  // Default: a plain content area that flows under pill / underline tabs
+  // (no second box). After lift tabs it becomes a connected surface card.
+  .#{$p}tab-panels {
+    padding-top: var(--space-4);
+    .#{$p}tab-panel { margin-top: 0; }
+  }
+  .#{$p}tabs--lift + .#{$p}tab-panels {
+    padding: var(--space-6);
+    background: var(--surface-1);
+    border: 1px solid var(--outline);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  // ---- tabbed card: tabs are the header, panels the body — one card,
+  //      no gap. Works with pill / underline tabs inside. ----
+  .#{$p}tab-card {
+    background: var(--surface-1);
+    border: 1px solid var(--outline);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+
+    > .#{$p}tabs {
+      display: flex;                 // full width → divider spans the whole card
+      background: none;
+      border: none;
+      border-bottom: 1px solid var(--outline);
+      border-radius: 0;
+      box-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      padding: var(--space-2);
+    }
+    // underline tabs: drop bottom padding so the underline sits on the divider
+    > .#{$p}tabs--underline { padding: var(--space-1) var(--space-2) 0; }
+    > .#{$p}tab-panels {
+      margin-top: 0;
+      padding: var(--space-6);
+    }
+  }
+
+  // ---- sizes (compose with any variant) ----
+  .#{$p}tabs--sm .#{$p}tab { padding: 5px 10px;  font-size: var(--fs-xs); }
+  .#{$p}tabs--lg .#{$p}tab { padding: 11px 18px; font-size: var(--fs-md); }
+}

package/src/components/_toast.scss

@@ -0,0 +1,59 @@
+// ============================================================
+// Aura — Toast
+// Transient notification. Show it via the JS helper `toast(msg,
+// {type})`, or render the markup yourself and flip data-state.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: min(360px, calc(100vw - 40px));
+    pointer-events: none;
+  }
+  .#{$p}toast-container--bottom { top: auto; bottom: 20px; }
+
+  .#{$p}toast {
+    --_c: var(--primary);
+    pointer-events: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 14px;
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+    border: 1px solid var(--outline);
+    border-left: 3px solid var(--_c);
+    box-shadow: var(--shadow-2);
+    font-size: var(--fs-sm);
+    opacity: 0;
+    transform: translateX(12px);
+    transition: opacity .2s ease, transform .2s ease;
+  }
+  .#{$p}toast[data-state="open"] { opacity: 1; transform: none; }
+
+  .#{$p}toast--success { --_c: var(--success); }
+  .#{$p}toast--warning { --_c: var(--warning); }
+  .#{$p}toast--error   { --_c: var(--error); }
+  .#{$p}toast--info    { --_c: var(--info); }
+
+  .#{$p}toast__body { flex: 1; color: var(--on-surface); line-height: 1.4; }
+  .#{$p}toast__close {
+    flex: none;
+    border: none;
+    background: none;
+    color: var(--on-surface-muted);
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 2px;
+    &:hover { color: var(--on-surface); }
+  }
+}

package/src/components/_tooltip.scss

@@ -0,0 +1,60 @@
+// ============================================================
+// Aura — Tooltip
+// Pure-CSS, shown on hover/focus. Inverted vs. the theme
+// (light bubble on dark, dark bubble on light) via tip tokens.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}tooltip {
+    position: relative;
+    display: inline-flex;
+  }
+  .#{$p}tooltip__text {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    background: var(--tip-bg);
+    color: var(--tip-text);
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    box-shadow: 0 6px 20px rgba(0,0,0,.25);
+    z-index: var(--z-dropdown);
+    transition: opacity .15s ease, visibility .15s ease;
+  }
+  // caret
+  .#{$p}tooltip__text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: var(--tip-bg);
+  }
+
+  .#{$p}tooltip:hover .#{$p}tooltip__text,
+  .#{$p}tooltip:focus-within .#{$p}tooltip__text {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  // ---- placement: bottom ----
+  .#{$p}tooltip--bottom .#{$p}tooltip__text {
+    bottom: auto;
+    top: calc(100% + 8px);
+  }
+  .#{$p}tooltip--bottom .#{$p}tooltip__text::after {
+    top: auto;
+    bottom: 100%;
+    border-top-color: transparent;
+    border-bottom-color: var(--tip-bg);
+  }
+}

package/src/index.scss

@@ -0,0 +1,32 @@
+// ============================================================
+// Aura — entry point
+// Cascade-layer order (declared in _layers): host app styles
+// (unlayered) always win over Aura.
+// ============================================================
+@use "layers";
+@use "tokens";
+@use "base/reset";
+@use "base/a11y";
+@use "components/button";
+@use "components/card";
+@use "components/input";
+@use "components/badge";
+@use "components/alert";
+@use "components/switch";
+@use "components/checkbox";
+@use "components/radio";
+@use "components/range";
+@use "components/file";
+@use "components/rating";
+@use "components/tabs";
+@use "components/table";
+@use "components/group";
+@use "components/segmented";
+@use "components/progress";
+@use "components/tooltip";
+@use "components/modal";
+@use "components/dropdown";
+@use "components/avatar";
+@use "components/accordion";
+@use "components/toast";
+@use "components/pagination";

package/src/js/global.js

@@ -0,0 +1,7 @@
+// Global (IIFE) build entry: exposes the API on a window global and
+// auto-wires triggers. For <script src> without type="module".
+// The global name is set at build time (--global-name), so it is not
+// hard-tied to the library name.
+export * from './interactions.js';
+import { mount } from './interactions.js';
+mount();

package/src/js/interactions.auto.js

@@ -0,0 +1,5 @@
+// Zero-config auto-wiring for vanilla users:
+//   <script type="module" src="interactions.auto.js"></script>
+// Frameworks should import from interactions.js instead.
+import { mount } from './interactions.js';
+mount();

package/src/js/interactions.js

@@ -0,0 +1,192 @@
+// ============================================================
+// Aura interactions — framework-agnostic behaviour layer.
+//
+// State lives in the DOM: [data-state="open|closed"]. This module
+// only flips that attribute and adds a11y niceties. It is OPTIONAL:
+//   • Vanilla: load interactions.auto.js (auto-wires data-* triggers).
+//   • React/Vue/etc: bind data-state yourself; ignore this, or import
+//     open/close/trapFocus as pure helpers.
+//
+// Nothing here is tied to the library name — see configure({prefix}).
+// ============================================================
+
+let PFX = '';
+const A = (name) => `data-${PFX}${name}`;   // trigger attribute name
+const C = (name) => `${PFX}${name}`;        // class name (matches SCSS $prefix)
+
+/** Optional: namespace the trigger attributes, e.g. prefix:'ui' → data-ui-open. */
+export function configure(opts = {}) {
+  if (opts.prefix != null) PFX = opts.prefix ? opts.prefix + '-' : '';
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+const cleanups = new WeakMap(); // element -> teardown fn
+let scrollLocks = 0;
+
+const resolve = (t) => (!t ? null : typeof t === 'string' ? document.querySelector(t) : t);
+const stateEl = (el) => (el ? el.closest('[data-state]') : null);
+
+export function lockScroll() {
+  if (scrollLocks++ === 0) document.documentElement.style.overflow = 'hidden';
+}
+export function unlockScroll() {
+  if (--scrollLocks <= 0) { scrollLocks = 0; document.documentElement.style.overflow = ''; }
+}
+
+export function trapFocus(el) {
+  const nodes = el.querySelectorAll(FOCUSABLE);
+  (nodes[0] || el).focus?.();
+  const onKey = (e) => {
+    if (e.key !== 'Tab' || !nodes.length) return;
+    const first = nodes[0], last = nodes[nodes.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  };
+  el.addEventListener('keydown', onKey);
+  return () => el.removeEventListener('keydown', onKey);
+}
+
+function activate(el) {
+  const teardown = [];
+  const onEsc = (e) => { if (e.key === 'Escape') close(el); };
+  document.addEventListener('keydown', onEsc);
+  teardown.push(() => document.removeEventListener('keydown', onEsc));
+
+  if (el.hasAttribute('data-overlay')) {
+    // modal: backdrop click, scroll lock, focus trap
+    const onClick = (e) => { if (e.target === el) close(el); };
+    el.addEventListener('click', onClick);
+    teardown.push(() => el.removeEventListener('click', onClick));
+    lockScroll();
+    teardown.push(unlockScroll);
+    const prev = document.activeElement;
+    teardown.push(trapFocus(el));
+    teardown.push(() => prev && prev.focus && prev.focus());
+  } else {
+    // popover/dropdown: outside click closes; reflect aria-expanded;
+    // arrow-key navigation over the menu items.
+    const trg = el.querySelector('[' + A('toggle') + ']');
+    if (trg) {
+      trg.setAttribute('aria-expanded', 'true');
+      teardown.push(() => { trg.setAttribute('aria-expanded', 'false'); trg.focus(); });
+    }
+    const items = () => [...el.querySelectorAll(FOCUSABLE)].filter((n) => !n.hasAttribute(A('toggle')));
+    const list = items();
+    if (list.length) setTimeout(() => list[0].focus(), 0);
+    const onNav = (e) => {
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
+      const l = items(); if (!l.length) return;
+      e.preventDefault();
+      const i = l.indexOf(document.activeElement);
+      let n;
+      if (e.key === 'Home') n = 0;
+      else if (e.key === 'End') n = l.length - 1;
+      else if (e.key === 'ArrowDown') n = i < 0 ? 0 : (i + 1) % l.length;
+      else n = i <= 0 ? l.length - 1 : i - 1;
+      l[n].focus();
+    };
+    el.addEventListener('keydown', onNav);
+    teardown.push(() => el.removeEventListener('keydown', onNav));
+    const onDoc = (e) => { if (!el.contains(e.target)) close(el); };
+    setTimeout(() => document.addEventListener('click', onDoc), 0);
+    teardown.push(() => document.removeEventListener('click', onDoc));
+  }
+  cleanups.set(el, () => teardown.forEach((fn) => fn()));
+}
+
+export function open(target) {
+  const el = resolve(target);
+  if (!el || el.getAttribute('data-state') === 'open') return;
+  el.setAttribute('data-state', 'open');
+  el.dispatchEvent(new CustomEvent('ui:open', { bubbles: true }));
+  activate(el);
+}
+export function close(target) {
+  const el = resolve(target);
+  if (!el || el.getAttribute('data-state') !== 'open') return;
+  el.setAttribute('data-state', 'closed');
+  el.dispatchEvent(new CustomEvent('ui:close', { bubbles: true }));
+  const t = cleanups.get(el);
+  if (t) { t(); cleanups.delete(el); }
+}
+export function toggle(target) {
+  const el = resolve(target);
+  if (!el) return;
+  el.getAttribute('data-state') === 'open' ? close(el) : open(el);
+}
+
+/** Imperatively show a toast. Returns a dismiss() fn. */
+export function toast(message, opts = {}) {
+  const { type = '', timeout = 4000, position = 'top-right' } = opts;
+  let c = document.querySelector('[data-toast-container]');
+  if (!c) {
+    c = document.createElement('div');
+    c.className = C('toast-container') + (position.includes('bottom') ? ' ' + C('toast-container--bottom') : '');
+    c.setAttribute('data-toast-container', '');
+    c.setAttribute('role', 'region');
+    c.setAttribute('aria-live', 'polite');
+    c.setAttribute('aria-label', 'Notifications');
+    document.body.appendChild(c);
+  }
+  const el = document.createElement('div');
+  el.className = C('toast') + (type ? ' ' + C('toast--' + type) : '');
+  el.setAttribute('data-state', 'closed');
+  el.setAttribute('role', type === 'error' ? 'alert' : 'status');
+  el.innerHTML =
+    '<div class="' + C('toast__body') + '">' + message + '</div>' +
+    '<button class="' + C('toast__close') + '" aria-label="Dismiss">&times;</button>';
+  c.appendChild(el);
+  requestAnimationFrame(() => el.setAttribute('data-state', 'open'));
+  const dismiss = () => { el.setAttribute('data-state', 'closed'); setTimeout(() => el.remove(), 250); };
+  el.querySelector('.' + C('toast__close')).addEventListener('click', dismiss);
+  if (timeout) setTimeout(dismiss, timeout);
+  return dismiss;
+}
+
+/** Activate a tab: mark it active and show its panel (data-tab="#id"), hide siblings. */
+export function activateTab(tab) {
+  const bar = tab.closest('.' + C('tabs'));
+  if (!bar) return;
+  bar.querySelectorAll('.' + C('tab')).forEach((t) => {
+    const on = t === tab;
+    t.classList.toggle(C('tab--active'), on);
+    t.setAttribute('aria-selected', on ? 'true' : 'false');
+    t.tabIndex = on ? 0 : -1;
+    const sel = t.getAttribute(A('tab'));
+    if (sel) { const p = document.querySelector(sel); if (p) p.hidden = !on; }
+  });
+}
+
+let mounted = false;
+/** Install delegated listeners for data-open / data-close / data-toggle and tabs. */
+export function mount(root = document) {
+  if (mounted) return; mounted = true;
+  root.addEventListener('click', (e) => {
+    const tabEl = e.target.closest('.' + C('tab'));
+    if (tabEl && tabEl.hasAttribute(A('tab'))) return activateTab(tabEl);
+    const o = e.target.closest('[' + A('open') + ']');
+    if (o) { e.preventDefault(); return open(o.getAttribute(A('open'))); }
+    const c = e.target.closest('[' + A('close') + ']');
+    if (c) { const t = c.getAttribute(A('close')); return close(t || stateEl(c)); }
+    const t = e.target.closest('[' + A('toggle') + ']');
+    if (t) { e.preventDefault(); const v = t.getAttribute(A('toggle')); return toggle(v || stateEl(t)); }
+  });
+
+  // Arrow-key navigation across a .tabs bar (moves focus + activates).
+  root.addEventListener('keydown', (e) => {
+    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+    const tab = e.target.closest('.' + C('tab'));
+    if (!tab) return;
+    const bar = tab.closest('.' + C('tabs'));
+    if (!bar) return;
+    const tabs = [...bar.querySelectorAll('.' + C('tab'))];
+    const i = tabs.indexOf(tab);
+    e.preventDefault();
+    const n = e.key === 'ArrowRight' ? (i + 1) % tabs.length : (i - 1 + tabs.length) % tabs.length;
+    tabs[n].focus();
+    if (tabs[n].hasAttribute(A('tab'))) activateTab(tabs[n]);
+  });
+}
+
+export default { configure, mount, open, close, toggle, toast, activateTab, trapFocus, lockScroll, unlockScroll };

package/src/skins/_flat.scss

@@ -0,0 +1,29 @@
+// ============================================================
+// Skin: flat — solid fills, crisp borders, no blur, no shadow.
+// ============================================================
+@mixin surface($level: 1) {
+  background: var(--surface-#{$level});
+  border: 1px solid var(--outline);
+}
+
+@mixin field {
+  background: var(--surface-1);
+  border: 1px solid var(--outline-strong);
+}
+
+// Filled control — plain solid fill.
+@mixin control {
+  background: var(--_bg);
+  color: var(--_fg);
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+
+@mixin control-active {
+  transform: translateY(1px);
+}
+
+// Small tinted pill (badge) — flat: colour tint only.
+@mixin chip {
+  box-shadow: none;
+}

package/src/skins/_glass.scss

@@ -0,0 +1,40 @@
+// ============================================================
+// Skin: glass — frosted, translucent, blurred.
+// The frosted film is a LIGHT translucent layer (not the surface
+// colour) so a colourful backdrop shows through, blurred — that's
+// what reads as real glass.
+// ============================================================
+@mixin surface($level: 1) {
+  @if $level == 2 { background: var(--glass-film-2); }
+  @else           { background: var(--glass-film); }
+  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
+  backdrop-filter: blur(var(--blur)) saturate(180%);
+  border: 1px solid var(--outline);
+  box-shadow: var(--shadow-#{$level}), inset 0 1px 0 rgba(255,255,255,.12);
+}
+
+@mixin field {
+  background: var(--glass-film);
+  -webkit-backdrop-filter: blur(var(--blur));
+  backdrop-filter: blur(var(--blur));
+  border: 1px solid var(--outline-strong);
+}
+
+// Filled control — solid colour with a soft glow and a glassy top gloss.
+@mixin control {
+  background: var(--_bg);
+  color: var(--_fg);
+  border: 1px solid transparent;
+  box-shadow:
+    0 6px 18px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 40%, transparent),
+    inset 0 1px 0 rgba(255,255,255,.28);
+}
+
+@mixin control-active {
+  transform: translateY(1px);
+}
+
+// Small tinted pill (badge) — glass: tint + faint top gloss.
+@mixin chip {
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
+}

package/src/skins/_neu.scss

@@ -0,0 +1,49 @@
+// ============================================================
+// Skin: neu — soft neumorphism, extruded / inset shadows.
+// Works best when the page background matches --surface.
+// ============================================================
+
+// Panels / cards — extruded from the surface.
+@mixin surface($level: 1) {
+  background: var(--surface);
+  border: none;
+  box-shadow:
+    8px 8px 20px color-mix(in srgb, var(--surface) 45%, #000),
+    -8px -8px 20px color-mix(in srgb, var(--surface) 88%, #fff);
+}
+
+// Control wells (inputs, checkboxes, switch tracks) — pressed into
+// the surface. Sharp, small inset so it reads on tiny controls too.
+@mixin field {
+  background: var(--surface);
+  border: none;
+  box-shadow:
+    inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),
+    inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff);
+}
+
+// Filled controls (buttons) — extruded, coloured; shadows derived
+// from the control's own colour so any variant stays neumorphic.
+@mixin control {
+  background: var(--_bg);
+  color: var(--_fg);
+  border: none;
+  box-shadow:
+    3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),
+    -3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff);
+}
+
+// Pressed state — inset.
+@mixin control-active {
+  transform: none;
+  box-shadow:
+    inset 2px 2px 5px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),
+    inset -2px -2px 5px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff);
+}
+
+// Small tinted pill (badge) — neu: soft extrusion from the page surface.
+@mixin chip {
+  box-shadow:
+    2px 2px 5px color-mix(in srgb, var(--surface) 55%, #000),
+    -2px -2px 5px color-mix(in srgb, var(--surface) 88%, #fff);
+}