fvn-ui 0.1.0-alpha.1

package/src/fvn-ui/components/svg.css

@@ -0,0 +1,5 @@
+.ui-icon {
+  width: var(--icon-size, var(--icon-size-default));
+  height: var(--icon-size, var(--icon-size-default));
+  stroke-width: var(--stroke-width, 1.5);
+}

package/src/fvn-ui/components/svg.js

@@ -0,0 +1,85 @@
+// https://feathericons.com/
+// https://lucide.dev/icons
+
+import './svg.css';
+
+const shapes = {
+  check: '<polyline points="20 6 9 17 4 12"></polyline>',
+  chevronDown: '<polyline points="6 9 12 15 18 9"></polyline>',
+  chevronUp: '<polyline points="18 15 12 9 6 15"></polyline>',
+  chevronLeft: '<polyline points="15 18 9 12 15 6"></polyline>',
+  chevronRight: '<polyline points="9 18 15 12 9 6"></polyline>',
+  arrowRight: '<line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline>',
+  arrowLeft: '<line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline>',
+  arrowUp: '<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>',
+  arrowDown: '<line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline>',
+  settings: '<path d="M10 5H3"/><path d="M12 19H3"/><path d="M14 3v4"/><path d="M16 17v4"/><path d="M21 12h-9"/><path d="M21 19h-5"/><path d="M21 5h-7"/><path d="M8 10v4"/><path d="M8 12H3"/>',
+  x: '<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>',
+  dots: '<circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle>',
+  dotsHorizontal: '<circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle>',
+  menu: '<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>',
+  code: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="m10 8 4 4-4 4"/>',
+  enter: '<path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H9a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z"/><path d="M4 9v6"/>',
+  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>',
+  chat: '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>',
+  moon: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>',
+  sun: '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>',
+  hexagon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>',
+  circle: '<circle cx="12" cy="12" r="10"></circle>',
+  plus: '<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>',
+  minus: '<line x1="5" y1="12" x2="19" y2="12"></line>',
+  search: '<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>',
+  edit: '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>',
+  trash: '<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>',
+  home: '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>',
+  user: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>',
+  users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>',
+  mail: '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>',
+  calendar: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line>',
+  clock: '<circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline>',
+  heart: '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>',
+  star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>',
+  bell: '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path>',
+  info: '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line>',
+  alertCircle: '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>',
+  alertTriangle: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line>',
+  checkCircle: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>',
+  xCircle: '<circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>',
+  eye: '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>',
+  eyeOff: '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line>',
+  copy: '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',
+  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>',
+  upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>',
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>',
+  externalLink: '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>',
+  filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>',
+  sliders: '<line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line>',
+  refresh: '<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>',
+  loader: '<line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>',
+  lock: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path>',
+  doc: '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
+  unlock: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path>',
+  save: '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline>',
+  file: '<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>',
+  folder: '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>',
+  image: '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline>',
+  grid: '<rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect>',
+  list: '<line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line>',
+  maximize: '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>',
+  minimize: '<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>',
+  zap: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>',
+  play: '<polygon points="5 3 19 12 5 21 5 3"></polygon>',
+  pause: '<rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect>',
+  rabbit: '<path d="M13 16a3 3 0 0 1 2.24 5"/><path d="M18 12h.01"/><path d="M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1 1 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1a3 3 0 0 0-3 3"/><path d="M20 8.54V4a2 2 0 1 0-4 0v3"/><path d="M7.612 12.524a3 3 0 1 0-1.6 4.3"/>',
+  bird: '<path d="M16 7h.01"/><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20"/><path d="m20 7 2 .5-2 .5"/><path d="M10 18v3"/><path d="M14 17.75V21"/><path d="M7 18a6 6 0 0 0 3.84-10.61"/>'
+};
+
+const wrap = (shape, n) => !shape
+  ? ''
+  : `
+  <svg class="ui-icon ui-icon-${n}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+    ${shape}
+  </svg>
+`;
+
+export const svg = n => wrap(shapes[n], n);

package/src/fvn-ui/components/switch.css

@@ -0,0 +1,34 @@
+.ui-switch {
+  --bg: var(--text);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ui-switch__button {
+  --switch-size: calc(1.75 * var(--space));
+  width: calc(2 * var(--switch-size));
+  height: var(--switch-size);
+  border-radius: 999px;
+  border: none;
+  background: hsl(var(--hsl-muted) / .25);
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  transition: var(--core-transition);
+}
+.ui-switch__thumb {
+  width: calc(.8 * var(--switch-size));
+  height: calc(.8 * var(--switch-size));
+  border-radius: 999px;
+  background: hsl(var(--hsl-white));
+  position: absolute;
+  top: 50%;
+  left: calc(.1 * var(--switch-size));
+  transform: translateY(-50%);
+  transition: left var(--core-transition);
+}
+.ui-switch[data-checked="true"] .ui-switch__button {
+  background: var(--bg);
+  border-color: var(--bg);
+}
+.ui-switch[data-checked="true"] .ui-switch__thumb { left: calc(1.1 * var(--switch-size)); }

package/src/fvn-ui/components/switch.js

@@ -0,0 +1,85 @@
+import { el, getCallback, withValue, parseArgs, configToClasses, bemFactory } from '../dom.js'
+import { label as textLabel } from './text.js'
+import './switch.css'
+
+const bem = bemFactory('switch');
+
+/**
+ * Creates a toggle switch
+ * @param {Object} config
+ * @param {string} [config.label] - Switch label (clickable)
+ * @param {boolean} [config.checked] - Initial checked state
+ * @param {boolean} [config.disabled] - Disabled state
+ * @param {'default'|'primary'|'red'|'green'|'blue'} [config.color='default'] - Switch color when checked
+ * @param {Function} [config.onChange] - Called with (checked, event)
+ * @param {string} [config.id] - Registers to dom.switch[id] and dom[id]
+ * @returns {HTMLDivElement} Switch element with .value getter/setter
+ * @example
+ * switchComponent({ label: 'Dark mode', checked: true })
+ * switchComponent({ label: 'Notifications', color: 'primary', onChange: (v) => save(v) })
+ */
+export function switchComponent(...args) {
+  const {
+    parent,
+    checked,
+    disabled,
+    color = 'default',
+    label,
+    id,
+    props,
+    ...rest
+  } = parseArgs(...args);
+
+  const cb = getCallback('onChange', rest);
+  let btnEl;
+  let state = !!checked;
+
+  const setState = (next, e) => {
+    state = !!next;
+    root.dataset.checked = state;
+    btnEl.setAttribute('aria-checked', state);
+    e && cb?.(state, e);
+  };
+
+  const toggle = (e) => {
+    if (disabled) {
+      return;
+    }
+    setState(!state, e);
+  };
+
+  const onKeydown = (e) => {
+    if (e.key !== ' ' && e.key !== 'Enter') {
+      return;
+    }
+    e.preventDefault();
+    toggle(e);
+  };
+
+  const root = el('div', parent, {
+    ...rest,
+    class: [bem(), configToClasses(props), rest.class],
+    data: { checked: state, uiCol: color },
+    children: [
+      el('button', {
+        type: 'button',
+        class: bem.el('button'),
+        attrs: { role: 'switch', 'aria-checked': state },
+        id,
+        disabled,
+        ref: (e) => btnEl = e,
+        children: [el('span', { class: bem.el('thumb') })],
+        onClick: toggle,
+        onKeydown
+      }),
+      label && textLabel({ 
+        text: label, 
+        small: true,
+        onClick: toggle,
+        style: { cursor: disabled ? 'default' : 'pointer' }
+      })
+    ]
+  });
+
+  return withValue(root, () => state, setState);
+}

package/src/fvn-ui/components/tabs.css

@@ -0,0 +1,168 @@
+.ui-tabs .ui-btn[aria-selected="true"] {
+  pointer-events: none;
+}
+
+.ui-tabs__buttons {
+  display: inline-flex;
+  gap: var(--space-1);
+  flex-wrap: wrap;
+  background: var(--shade);
+  padding: var(--space-1);
+  border-radius: calc(1.5 * var(--radius));  
+}
+.ui-tabs__panel {
+  width: 100%;
+  border-radius: var(--radius);
+}
+.ui-tabs__tab {
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: var(--core-transition);
+}
+
+/* --- */
+
+.ui-tabs--shade .ui-tabs__panel {
+  background: var(--shade);
+}
+.ui-tabs--shade .ui-btn[aria-selected="false"] {
+  --bg: var(--shade);
+}
+
+/* --- */
+
+.ui-tabs--round .ui-tabs--default {
+  border-radius: 999px;
+}
+.ui-tabs--round .ui-tabs--default .ui-btn {
+  --input-padding: calc(var(--space) * .5) calc(var(--space) * 1.5);
+  --bg: transparent;
+}
+
+/* --- */
+
+.ui-tabs--default .ui-btn {
+  --input-padding: calc(var(--space) * .5) calc(var(--space) * .75);
+}
+.ui-tabs--default .ui-btn[aria-selected="true"] {
+  background: hsl(var(--hsl-white)) !important;
+  color: hsl(var(--hsl-black)) !important;
+  box-shadow: 0 1px 4px rgba(0,0,0,.2);
+}
+
+/* --- */
+
+.ui-tabs--outline {
+    padding: 0;
+    background: none;
+    gap: 0;
+}
+.ui-tabs--outline:not(.justify-center) + .ui-tabs__panel {
+    border-top-left-radius: 0;
+}
+.ui-tabs--outline .ui-btn {
+    --core-transition: none;
+    border-color: transparent;
+    border-radius: 0;
+}
+.ui-tabs--outline .ui-btn:first-child {
+    border-top-left-radius: var(--radius);
+}
+.ui-tabs--outline .ui-btn:last-child {
+    border-top-right-radius: var(--radius);
+}
+.ui-tabs--outline .ui-btn[aria-selected="false"] {
+  --fg: var(--muted);
+  --bg: var(--shade);
+}
+.ui-tabs--outline .ui-btn[aria-selected="true"] {
+  --fg: var(--text);
+  --bg: var(--shade-back, var(--back));
+  border-color: var(--border);
+}
+.ui-tabs--outline .ui-btn[aria-selected="true"]:after {
+  content: '';
+  background: var(--bg);
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  position: absolute;
+  transform: translatey(100%);
+}
+
+/* --- */
+
+.ui-tabs--ghost {
+  gap: 0;
+  background: transparent;
+  padding: 0;
+}
+.ui-tabs--ghost .ui-btn[aria-selected="true"]:not([data-ui-col]) {
+  --bg: var(--hover);
+}
+
+/* --- */
+
+.ui-tabs--border {
+    padding: 0;
+    background: none;
+    gap: 0;
+}
+.ui-tabs--border:not(.justify-center) + .ui-tabs__panel {
+    border-top-left-radius: 0;
+}
+.ui-tabs--border .ui-btn {
+    border-color: transparent;
+    border-width: 2px;
+    border-radius: 0;
+}
+
+.ui-tabs--border .ui-btn:after {
+  content: '';
+  background: var(--bg);
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  transform: translatey(100%);
+  pointer-events: none;
+  opacity: 0;
+  transition: var(--core-transition);
+}
+.ui-tabs--border .ui-btn:hover {
+  background: transparent;
+}
+.ui-tabs--border .ui-btn:hover:after {
+  background: var(--fg);
+  opacity: .5;
+}
+.ui-tabs--border .ui-btn[aria-selected="true"]:after {
+  background: var(--fg);
+  opacity: 1;
+}
+.ui-tabs--border .ui-btn[aria-selected="false"] {
+  --fg: var(--muted);
+}
+
+/* --- */
+
+.ui-tabs--minimal {
+  gap: var(--space-4);
+  padding: var(--space-2) 0;
+  background: transparent;
+}
+.ui-tabs--minimal .ui-btn {
+  --fg: var(--muted);
+  background: transparent;
+  padding: 0;
+  --space: 0px;
+}
+.ui-tabs--minimal .ui-btn[aria-selected="true"] {
+  --fg: var(--text);
+  &:before {
+    opacity: 1;
+  }
+}

package/src/fvn-ui/components/tabs.js

@@ -0,0 +1,181 @@
+import { el, getCallback, withValue, parseArgs, configToClasses, bemFactory } from '../dom.js'
+import { button } from './button.js'
+import './tabs.css'
+
+const bem = bemFactory('tabs');
+
+const getItemValue = (item) => {
+  if (!item) {
+    return '';
+  }
+  return item.value !== undefined ? String(item.value) : String(item.label);
+};
+
+/**
+ * Creates a tabbed interface
+ * @param {Object} config
+ * @param {{label: string, value?: string, icon?: string, render?: Function}[]} config.items - Tab items
+ * @param {number} [config.active=0] - Initially active tab index
+ * @param {string} [config.value] - Initially active tab value
+ * @param {'default'|'outline'|'border'|'minimal'|'ghost'} [config.variant] - Tab style
+ * @param {'primary'|'red'|'green'|'blue'} [config.color] - Tab color
+ * @param {'round'} [config.shape] - Tab button shape
+ * @param {boolean} [config.center] - Center tabs
+ * @param {boolean} [config.shade] - Shaded background
+ * @param {Function} [config.onChange] - Called with (value, item)
+ * @returns {HTMLDivElement} Tabs element with .value getter/setter
+ * @example
+ * tabs({ variant: 'outline', items: [{ label: 'Tab 1', render: () => content1 }] })
+ * @see buttonGroup - Alias for tabs without content panel
+ */
+export function tabs(...args) {
+  const {
+    parent,
+    items: passedItems = [],
+    active = 0,
+    value,
+    variant,
+    color,
+    shape,
+    appendButtons,
+    appendContent,
+    border,
+    shade,
+    padding,
+    width,
+    asButtonGroup,
+    props,
+    ...rest
+  } = parseArgs(...args);
+
+  const cb = getCallback('onChange', rest);
+  const items = passedItems.flat();
+  const tabBtns = [];
+
+  const isCentered = rest.align === 'center' || rest.center;
+  const isColorizable = ['border', 'ghost'].includes(variant);
+  const buttonVariant = variant === 'border' ? 'outline' : (variant || 'none');
+  const withBorder = border !== false && !shade;
+
+  let output;
+  let current = value || getItemValue(items[active]) || '';
+
+  const renderPanel = (v) => {
+    output.innerHTML = '';    
+    const item = items.find((o) => getItemValue(o) === String(v));
+    if (!item?.render) {
+      return;
+    }
+
+    const out = item.render();
+    const tab = el('div', { class: bem.el('tab') });
+    
+    if (typeof out === 'string') {
+      tab.innerHTML = out;
+    } else if (Array.isArray(out)) {
+      for (const o of out) tab.appendChild(o);
+    } else {
+      tab.appendChild(out);
+    }
+
+    output.appendChild(tab);
+  };
+
+  const setActive = (v, skipCallback) => {
+    current = String(v);
+    for (const btn of tabBtns) {
+      const isActive = btn.dataset.value === current;
+      btn.setAttribute('aria-selected', isActive);
+      const item = items.find((o) => getItemValue(o) === btn.dataset.value) || {};
+      const col = item.color || color;
+      btn.dataset.uiCol = isActive && col && isColorizable
+        ? `${variant !== 'ghost' ? 'sub-' : ''}${col}` 
+        : '';
+      btn.tabIndex = isActive ? 0 : -1;
+    }
+    !asButtonGroup && renderPanel(current);
+    !skipCallback && cb?.(current);
+  };
+
+  const focusTabAt = (i) => {
+    if (!tabBtns.length) {
+      return;
+    }
+    tabBtns[(i + tabBtns.length) % tabBtns.length].focus();
+  };
+
+  const handleKeydown = (e, idx, val) => {
+    const keys = {
+      ArrowRight: () => focusTabAt(idx + 1),
+      ArrowLeft: () => focusTabAt(idx - 1),
+      Home: () => focusTabAt(0),
+      End: () => focusTabAt(tabBtns.length - 1),
+      Enter: () => setActive(val),
+      ' ': () => setActive(val)
+    };
+    
+    const action = keys[e.key];
+    if (!action) {
+      return;
+    }
+    e.preventDefault();
+    action();
+  };
+
+  const root = el('div', parent, {
+    ...rest,
+    class: [ 
+      bem(), 
+      shape && bem(shape),
+      `w-${width || 'full'}`, 
+      'flex', 
+      'flex-col', 
+      !withBorder && 'gap-2',
+      shade && bem('shade'),
+      configToClasses(props, ['shade']),
+      rest.class
+    ],
+    children: [
+      el('div', {
+        class: [
+          bem.el('buttons'), 
+          bem(variant || 'default'),
+          isCentered && ['justify-center', 'ma'],
+        ],
+        attrs: { role: 'tablist' },
+        children: items.map((o, i) => {
+          const val = getItemValue(o);
+          const btn = button({
+            variant: buttonVariant,
+            label: o.label,
+            icon: o.icon,
+            shape,
+            dataset: { value: val },
+            attrs: { role: 'tab' },
+            aria: { selected: 'false' },
+            onmousedown: () => setActive(val),
+            onkeydown: (e) => handleKeydown(e, i, val)
+          });
+          tabBtns.push(btn);
+          return btn;
+        })
+      }),
+      !asButtonGroup && el('div', { 
+        class: [
+          bem.el('panel'), 
+          withBorder && 'border',
+          Number.isInteger(padding) ? `pad-${padding}` : (withBorder || shade) && 'pad'
+        ],
+        ref: (e) => output = e 
+      })
+    ]
+  });
+
+  appendButtons?.append(root.children[0]);
+  appendContent?.append(root.children[1]);
+
+  setActive(current, true);
+  withValue(root, () => current, setActive);
+
+  return root;
+}

package/src/fvn-ui/components/text.css

@@ -0,0 +1,62 @@
+/* ====================================================
+   Text Primitives
+   Shared typography building blocks
+   ==================================================== */
+
+/* Title - primary headings */
+.ui-title {
+  line-height: 1.2;
+  font-weight: 650;
+  font-size: 1.1em;  
+  margin: 0;
+}
+
+.ui-title--large {
+  font-weight: 700;
+  font-size: 1.5em;
+}
+
+/* Description - secondary text, usually paired with title */
+.ui-description {
+  line-height: 1.4;
+  margin: 0;
+}
+
+/* Label - form labels and small headings */
+.ui-label {
+  display: block;
+  font-size: 0.875em;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.ui-label--soft {
+  font-weight: 400;
+  opacity: 0.7;
+}
+
+/* Truncate - single line text with ellipsis */
+.ui-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+/* Name - bold truncated text (for avatars, lists) */
+.ui-name {
+  font-weight: 500;
+  font-size: .95em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Subtitle - muted truncated text */
+.ui-subtitle {
+  font-size: .85em;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}