ds-tis 1.0.0-beta.10

package/js/modal.js

@@ -0,0 +1,256 @@
+/* ============================================================
+   modal.js — runtime público para Modal / Dialog (required)
+
+   Anatomia e estados visuais: css/components/modal.css
+   Uso:
+     <button data-ds-modal-open="confirm-modal">Delete</button>
+     <div class="ds-modal-overlay" id="confirm-modal" hidden>
+       <div class="ds-modal" role="dialog" aria-modal="true" aria-labelledby="...">
+         ...
+         <button class="ds-modal__close" type="button" aria-label="Close modal">...</button>
+       </div>
+     </div>
+
+   Ciclo de vida:
+     const instances = initModals(root);
+     destroyModals(root); // ou instance.destroy()
+   ============================================================ */
+
+const instances = new Set();
+const triggerControllers = new Map();
+
+function getFocusable(container) {
+  return [...container.querySelectorAll(
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+  )].filter((el) => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true');
+}
+
+function trapFocus(overlay, dialog) {
+  function onKeyDown(e) {
+    if (e.key !== 'Tab') return;
+    const focusable = getFocusable(dialog);
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  overlay.addEventListener('keydown', onKeyDown);
+  return () => overlay.removeEventListener('keydown', onKeyDown);
+}
+
+function emit(overlay, name, detail) {
+  overlay.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+}
+
+function getBackgroundNodes(overlay) {
+  const nodes = [];
+  let current = overlay;
+  while (current && current !== document.body) {
+    const parent = current.parentElement;
+    if (!parent) break;
+    for (const sibling of parent.children) {
+      if (sibling !== current) nodes.push(sibling);
+    }
+    current = parent;
+  }
+  return [...new Set(nodes)];
+}
+
+function syncDocumentOpenClass() {
+  const hasOpenModal = [...instances].some((instance) => !instance.overlay.hidden);
+  document.documentElement.classList.toggle('ds-modal-open', hasOpenModal);
+}
+
+function createInstance(overlay) {
+  const dialog = overlay.querySelector('.ds-modal[role="dialog"], .ds-modal');
+  if (!dialog) return null;
+  if (!dialog.hasAttribute('tabindex')) dialog.setAttribute('tabindex', '-1');
+
+  let previousFocus = null;
+  let releaseFocusTrap = null;
+  let inertStates = [];
+  const cleanups = [];
+
+  const on = (target, type, handler, options) => {
+    target.addEventListener(type, handler, options);
+    cleanups.push(() => target.removeEventListener(type, handler, options));
+  };
+
+  const inst = {
+    overlay,
+    dialog,
+    open() {
+      if (!overlay.hidden) return;
+      previousFocus = document.activeElement;
+      overlay.hidden = false;
+      syncDocumentOpenClass();
+      inertStates = getBackgroundNodes(overlay).map((node) => ({
+        node,
+        inert: node.inert,
+        marker: node.getAttribute('data-ds-modal-inert'),
+      }));
+      for (const { node } of inertStates) {
+        node.dataset.dsModalInert = 'true';
+        node.inert = true;
+      }
+      releaseFocusTrap = trapFocus(overlay, dialog);
+      const focusable = getFocusable(dialog);
+      (focusable[0] || dialog).focus();
+      emit(overlay, 'ds-modal-open', {
+        overlay,
+        dialog,
+        trigger: previousFocus instanceof HTMLElement ? previousFocus : null,
+      });
+    },
+    close() {
+      if (overlay.hidden) return;
+      const returnFocus = previousFocus;
+      overlay.hidden = true;
+      for (const { node, inert, marker } of inertStates) {
+        if (marker === null) delete node.dataset.dsModalInert;
+        else node.setAttribute('data-ds-modal-inert', marker);
+        node.inert = inert;
+      }
+      inertStates = [];
+      if (typeof releaseFocusTrap === 'function') releaseFocusTrap();
+      releaseFocusTrap = null;
+      if (returnFocus && typeof returnFocus.focus === 'function') returnFocus.focus();
+      previousFocus = null;
+      syncDocumentOpenClass();
+      emit(overlay, 'ds-modal-close', {
+        overlay,
+        dialog,
+        returnFocus: returnFocus instanceof HTMLElement ? returnFocus : null,
+      });
+    },
+    destroy() {
+      inst.close();
+      while (cleanups.length) cleanups.pop()();
+      delete overlay.dataset.dsModalInit;
+      instances.delete(inst);
+    },
+  };
+
+  on(overlay, 'click', (e) => {
+    if (e.target === overlay) inst.close();
+  });
+
+  on(overlay, 'keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      inst.close();
+    }
+  });
+
+  for (const closeBtn of overlay.querySelectorAll('.ds-modal__close')) {
+    on(closeBtn, 'click', () => inst.close());
+  }
+
+  return inst;
+}
+
+function bindTrigger(trigger) {
+  if (triggerControllers.has(trigger)) return;
+  const controller = new AbortController();
+  trigger.addEventListener('click', (e) => {
+    e.preventDefault();
+    const targetId = trigger.getAttribute('data-ds-modal-open');
+    if (!targetId) return;
+    const overlay = document.getElementById(targetId.replace(/^#/, ''));
+    const inst = [...instances].find((item) => item.overlay === overlay);
+    inst?.open();
+  }, { signal: controller.signal });
+  trigger.dataset.dsModalTriggerInit = 'true';
+  triggerControllers.set(trigger, controller);
+}
+
+function unbindTrigger(trigger) {
+  const controller = triggerControllers.get(trigger);
+  if (!controller) return;
+  controller.abort();
+  triggerControllers.delete(trigger);
+  delete trigger.dataset.dsModalTriggerInit;
+}
+
+function isInside(root, node) {
+  return root === document || root === node || (typeof root.contains === 'function' && root.contains(node));
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export function initModals(root = document) {
+  const created = [];
+
+  const overlays = [
+    ...(root instanceof Element && root.matches('.ds-modal-overlay') ? [root] : []),
+    ...root.querySelectorAll('.ds-modal-overlay'),
+  ];
+  overlays.forEach((overlay) => {
+    if (overlay.dataset.dsModalInit === 'true') return;
+    const inst = createInstance(overlay);
+    if (inst) {
+      overlay.dataset.dsModalInit = 'true';
+      instances.add(inst);
+      created.push(inst);
+    }
+  });
+
+  const triggers = [
+    ...(root instanceof Element && root.matches('[data-ds-modal-open]') ? [root] : []),
+    ...root.querySelectorAll('[data-ds-modal-open]'),
+  ];
+  triggers.forEach((trigger) => bindTrigger(trigger));
+
+  return created;
+}
+
+/**
+ * Remove listeners e estado de init dentro de `root`.
+ * @param {ParentNode} [root]
+ */
+export function destroyModals(root = document) {
+  for (const inst of [...instances]) {
+    if (isInside(root, inst.overlay)) inst.destroy();
+  }
+  const triggers = [
+    ...(root instanceof Element && root.matches('[data-ds-modal-open]') ? [root] : []),
+    ...root.querySelectorAll('[data-ds-modal-open]'),
+  ];
+  triggers.forEach((trigger) => {
+    if (isInside(root, trigger)) unbindTrigger(trigger);
+  });
+}
+
+/**
+ * @param {string|HTMLElement} target
+ */
+export function openModal(target) {
+  const overlay = typeof target === 'string'
+    ? document.getElementById(target.replace(/^#/, ''))
+    : target;
+  const inst = [...instances].find((item) => item.overlay === overlay);
+  inst?.open();
+  return inst;
+}
+
+/**
+ * @param {string|HTMLElement} target
+ */
+export function closeModal(target) {
+  const overlay = typeof target === 'string'
+    ? document.getElementById(target.replace(/^#/, ''))
+    : target;
+  const inst = [...instances].find((item) => item.overlay === overlay);
+  inst?.close();
+  return inst;
+}

package/js/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/js/tabs.js

@@ -0,0 +1,200 @@
+/* ============================================================
+   tabs.js — runtime público para Tabs (required)
+
+   Anatomia e estados visuais: css/components/tabs.css
+   Uso:
+     <div class="ds-tabs" role="tablist" aria-label="…">
+       <button class="ds-tab ds-tab--active" role="tab"
+               aria-selected="true" aria-controls="panel-1"
+               id="tab-1">…</button>
+       <button class="ds-tab" role="tab"
+               aria-selected="false" aria-controls="panel-2"
+               id="tab-2" tabindex="-1">…</button>
+     </div>
+     <div class="ds-tab-panel" role="tabpanel" id="panel-1"
+          aria-labelledby="tab-1">…</div>
+     <div class="ds-tab-panel" role="tabpanel" id="panel-2"
+          aria-labelledby="tab-2" hidden>…</div>
+
+   Ciclo de vida:
+     const instances = initTabs(root);
+     destroyTabs(root); // ou instance.destroy()
+   ============================================================ */
+
+const instances = new Set();
+
+function getTabs(tablist) {
+  return [...tablist.querySelectorAll(':scope > .ds-tab[role="tab"]')];
+}
+
+function isDisabled(tab) {
+  return tab.disabled || tab.getAttribute('aria-disabled') === 'true';
+}
+
+function getEnabledTabs(tabs) {
+  return tabs.filter((tab) => !isDisabled(tab));
+}
+
+function getPanel(tab) {
+  const id = tab.getAttribute('aria-controls');
+  return id ? tab.ownerDocument.getElementById(id) : null;
+}
+
+function emit(tablist, name, detail) {
+  tablist.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+}
+
+function createInstance(tablist) {
+  const tabs = getTabs(tablist);
+  if (!tabs.length) return null;
+
+  const cleanups = [];
+  const on = (target, type, handler, options) => {
+    target.addEventListener(type, handler, options);
+    cleanups.push(() => target.removeEventListener(type, handler, options));
+  };
+
+  const inst = {
+    root: tablist,
+    select(tab, { focus = false } = {}) {
+      if (!tab || !tabs.includes(tab) || isDisabled(tab)) return;
+      const previous = tabs.find((item) => item.getAttribute('aria-selected') === 'true') || null;
+      if (previous === tab) {
+        if (focus) tab.focus();
+        return;
+      }
+
+      for (const item of tabs) {
+        const selected = item === tab;
+        item.setAttribute('aria-selected', String(selected));
+        item.classList.toggle('ds-tab--active', selected);
+        item.tabIndex = selected ? 0 : -1;
+        const panel = getPanel(item);
+        if (panel) panel.hidden = !selected;
+      }
+
+      if (focus) tab.focus();
+      emit(tablist, 'ds-tabs-change', {
+        root: tablist,
+        tab,
+        panel: getPanel(tab),
+        previousTab: previous,
+      });
+    },
+    destroy() {
+      while (cleanups.length) cleanups.pop()();
+      delete tablist.dataset.dsTabsInit;
+      instances.delete(inst);
+    },
+  };
+
+  function moveSelection(current, direction) {
+    const enabled = getEnabledTabs(tabs);
+    if (!enabled.length) return;
+    const currentIndex = enabled.indexOf(current);
+    if (currentIndex === -1) return;
+
+    let nextIndex;
+    if (direction === 'first') nextIndex = 0;
+    else if (direction === 'last') nextIndex = enabled.length - 1;
+    else nextIndex = (currentIndex + direction + enabled.length) % enabled.length;
+
+    inst.select(enabled[nextIndex], { focus: true });
+  }
+
+  // Sync initial state from markup (prefer aria-selected / --active).
+  let initial = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true' && !isDisabled(tab))
+    || tabs.find((tab) => tab.classList.contains('ds-tab--active') && !isDisabled(tab))
+    || getEnabledTabs(tabs)[0]
+    || null;
+
+  for (const tab of tabs) {
+    if (tab instanceof HTMLButtonElement && !tab.hasAttribute('type')) {
+      tab.type = 'button';
+    }
+    const selected = tab === initial;
+    tab.setAttribute('aria-selected', String(selected));
+    tab.classList.toggle('ds-tab--active', selected);
+    tab.tabIndex = selected ? 0 : -1;
+    const panel = getPanel(tab);
+    if (panel) {
+      panel.hidden = !selected;
+      if (!panel.hasAttribute('tabindex')) panel.tabIndex = 0;
+    }
+  }
+
+  for (const tab of tabs) {
+    on(tab, 'click', (event) => {
+      event.preventDefault();
+      if (isDisabled(tab)) return;
+      inst.select(tab, { focus: true });
+    });
+
+    on(tab, 'keydown', (e) => {
+      if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        moveSelection(tab, 1);
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        moveSelection(tab, -1);
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        moveSelection(tab, 'first');
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        moveSelection(tab, 'last');
+      }
+    });
+  }
+
+  return inst;
+}
+
+function isInside(root, node) {
+  return root === document || root === node || (typeof root.contains === 'function' && root.contains(node));
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export function initTabs(root = document) {
+  const created = [];
+  const tablists = [];
+
+  if (root instanceof Element && root.matches('.ds-tabs')) tablists.push(root);
+  if (typeof root.querySelectorAll === 'function') {
+    tablists.push(...root.querySelectorAll('.ds-tabs'));
+  }
+
+  tablists.forEach((tablist) => {
+    if (!tablist.hasAttribute('role')) tablist.setAttribute('role', 'tablist');
+    if (tablist.dataset.dsTabsInit === 'true') return;
+    const inst = createInstance(tablist);
+    if (inst) {
+      tablist.dataset.dsTabsInit = 'true';
+      instances.add(inst);
+      created.push(inst);
+    }
+  });
+
+  return created;
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export function destroyTabs(root = document) {
+  for (const inst of [...instances]) {
+    if (isInside(root, inst.root)) inst.destroy();
+  }
+}
+
+/**
+ * @param {HTMLElement} tab
+ */
+export function selectTab(tab) {
+  const tablist = tab?.closest?.('.ds-tabs');
+  const inst = [...instances].find((item) => item.root === tablist);
+  inst?.select(tab, { focus: true });
+  return inst;
+}

package/js/theme/apply.js

@@ -0,0 +1,75 @@
+/* ============================================================
+   apply.js — aplica o tema em runtime no DOM (browser only)
+
+   Escreve as CSS vars geradas no elemento raiz via inline style,
+   com precedência sobre os arquivos gerados. Reversível via reset.
+   ============================================================ */
+
+import { normalizeConfig } from './config-schema.js';
+import { mapThemeToVars } from './semantic-mapper.js';
+
+/** Vars inline setadas na última `applyTheme` por elemento raiz. */
+const appliedByRoot = new WeakMap();
+
+function getAppliedSet(el) {
+  if (!appliedByRoot.has(el)) appliedByRoot.set(el, new Set());
+  return appliedByRoot.get(el);
+}
+
+/** Lista de props que este engine controla — usada para reset limpo. */
+export function controlledVarNames(config) {
+  const cfg = normalizeConfig(config);
+  return Object.keys(mapThemeToVars(cfg, cfg.mode).vars);
+}
+
+/**
+ * Aplica o config no `root` (default: <html>). Também sincroniza o
+ * atributo data-mode. Retorna o relatório de contraste.
+ *
+ * @param {object} config - ThemeConfig (parcial ou completo).
+ * @param {object} [opts]
+ * @param {HTMLElement} [opts.root] - alvo (default: documentElement).
+ * @returns {{ contrast: object, vars: Record<string,string> }}
+ */
+export function applyTheme(config, { root } = {}) {
+  const el = root || (typeof document !== 'undefined' ? document.documentElement : null);
+  if (!el) throw new Error('applyTheme requer um DOM (browser) ou opts.root');
+
+  const cfg = normalizeConfig(config);
+  const { vars, contrast } = mapThemeToVars(cfg, cfg.mode);
+
+  const prev = getAppliedSet(el);
+  const next = new Set(Object.keys(vars));
+
+  for (const name of prev) {
+    if (!next.has(name)) el.style.removeProperty(name);
+  }
+
+  for (const [name, value] of Object.entries(vars)) {
+    el.style.setProperty(name, value);
+  }
+
+  appliedByRoot.set(el, next);
+
+  if (cfg.mode === 'dark') el.setAttribute('data-mode', 'dark');
+  else el.removeAttribute('data-mode');
+
+  return { contrast, vars };
+}
+
+/** Remove todas as props controladas, voltando aos tokens gerados. */
+export function resetTheme(config, { root } = {}) {
+  const el = root || (typeof document !== 'undefined' ? document.documentElement : null);
+  if (!el) return;
+
+  const prev = appliedByRoot.get(el);
+  if (prev) {
+    for (const name of prev) el.style.removeProperty(name);
+    appliedByRoot.delete(el);
+    return;
+  }
+
+  for (const name of controlledVarNames(config)) {
+    el.style.removeProperty(name);
+  }
+}

package/js/theme/brand-contrast-audit.js

@@ -0,0 +1,133 @@
+/* ============================================================
+   brand-contrast-audit.js — pares WCAG alinhados ao contrato semântico
+   ============================================================ */
+
+import { normalizeConfig } from './config-schema.js';
+import { mapThemeToVars } from './semantic-mapper.js';
+import { generateBrandScale } from './palette.js';
+import { auditPairs, WCAG_AA_TEXT, WCAG_AA_UI } from './contrast.js';
+
+/** Superfícies neutras (foundation.color.neutral) para composição de overlays. */
+const SURFACE = {
+  light: '#F8FAFC', // neutral-50 — background.default light
+  dark: '#070C17', // neutral-950 — background.default dark
+};
+
+/** Rótulos bilíngues indexados por chave estável. */
+export const CONTRAST_LABELS = {
+  brandFill: { pt: 'Fill brand / foreground', en: 'Brand fill / foreground' },
+  toned: { pt: 'Toned / conteúdo', en: 'Toned fill / content' },
+  contentBrand: { pt: 'Content brand / superfície', en: 'Brand content / surface' },
+  contentBrandTinted: { pt: 'Content brand / fundo tinted', en: 'Brand content / tinted bg' },
+  link: { pt: 'Link / superfície', en: 'Link / surface' },
+  focus: { pt: 'Focus ring / superfície', en: 'Focus ring / surface' },
+};
+
+/**
+ * Monta pares de contraste para um modo, espelhando tokens semânticos brand/toned/link.
+ * @param {object} config - ThemeConfig normalizado ou parcial.
+ * @param {'light'|'dark'} mode
+ * @returns {Array<{ key: string, name: string, fg: string, bg: string, under?: string, threshold: number }>}
+ */
+export function buildBrandContrastPairs(config, mode) {
+  const cfg = normalizeConfig({ ...config, mode });
+  const { vars, contrast } = mapThemeToVars(cfg, mode);
+  const scale = generateBrandScale(cfg.brand.seed, { chromaBoost: cfg.brand.chromaBoost ?? 1 });
+  const surface = SURFACE[mode];
+  const tintedBg = mode === 'light'
+    ? scale[50]
+    : vars['--ds-toned-background-default'];
+  const tintedUnder = mode === 'light' ? undefined : surface;
+
+  return [
+    {
+      key: 'brandFill',
+      name: CONTRAST_LABELS.brandFill.en,
+      fg: contrast.foreground,
+      bg: contrast.brandFill,
+      threshold: WCAG_AA_UI,
+    },
+    {
+      key: 'toned',
+      name: CONTRAST_LABELS.toned.en,
+      fg: vars['--ds-toned-content-default'],
+      bg: vars['--ds-toned-background-default'],
+      under: surface,
+      threshold: WCAG_AA_UI,
+    },
+    {
+      key: 'contentBrand',
+      name: CONTRAST_LABELS.contentBrand.en,
+      fg: vars['--ds-content-brand'],
+      bg: surface,
+      threshold: WCAG_AA_TEXT,
+    },
+    {
+      key: 'contentBrandTinted',
+      name: CONTRAST_LABELS.contentBrandTinted.en,
+      fg: vars['--ds-content-brand'],
+      bg: tintedBg,
+      ...(tintedUnder ? { under: tintedUnder } : {}),
+      threshold: WCAG_AA_TEXT,
+    },
+    {
+      key: 'link',
+      name: CONTRAST_LABELS.link.en,
+      fg: vars['--ds-link-content-default'],
+      bg: surface,
+      threshold: WCAG_AA_TEXT,
+    },
+    {
+      key: 'focus',
+      name: CONTRAST_LABELS.focus.en,
+      fg: vars['--ds-border-focus'],
+      bg: surface,
+      threshold: WCAG_AA_UI,
+    },
+  ];
+}
+
+/**
+ * Audita light e dark; retorna linhas flat com mode + resultado auditPairs.
+ * @param {object} config
+ * @returns {{ rows: Array, allPass: boolean, failCount: number }}
+ */
+export function auditBrandTheme(config) {
+  const rows = [];
+  for (const mode of ['light', 'dark']) {
+    const pairs = buildBrandContrastPairs(config, mode);
+    for (const p of pairs) {
+      const audited = auditPairs([{
+        name: p.name,
+        fg: p.fg,
+        bg: p.bg,
+        threshold: p.threshold,
+        ...(p.under ? { under: p.under } : {}),
+      }])[0];
+      rows.push({
+        mode,
+        key: p.key,
+        labelKey: p.key,
+        ...audited,
+        under: p.under,
+      });
+    }
+  }
+  const failCount = rows.filter((r) => !r.passes).length;
+  return { rows, allPass: failCount === 0, failCount };
+}
+
+/** Vars brand-related que o mapper deve emitir (paridade com theme-light/dark.css). */
+export const CANONICAL_BRAND_CSS_VARS = [
+  '--ds-color-brand-600',
+  '--ds-overlay-brand-600-12',
+  '--ds-brand-background-default',
+  '--ds-brand-content-default',
+  '--ds-toned-background-default',
+  '--ds-toned-content-default',
+  '--ds-content-brand',
+  '--ds-link-content-default',
+  '--ds-border-focus',
+  '--ds-border-brand',
+  '--ds-focus-ring-color',
+];