@stackific/md3 0.1.0 → 0.1.2

package/src/runtime/elements/dialogs.js

@@ -1,72 +0,0 @@
-import {
-  addClass, next, prev, hasTag, insertBefore, wait, create,
-  hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query, onWeak,
-} from "../utils.js";
-
-const _dialogs = [];
-
-function onKeydownDialog(e) {
-  if (e.key === "Escape") {
-    const dialog = e.currentTarget;
-    void updateDialog(dialog, dialog);
-  }
-}
-
-function focusOnDialogOrElement(dialog) {
-  const element = query("[autofocus]", dialog) ?? dialog;
-  element.focus();
-}
-
-function closeDialog(dialog, overlay) {
-  removeClass(queryAllDataUi(dialog.id), "active");
-  removeClass(dialog, "active");
-  removeClass(overlay, "active");
-
-  dialog.close();
-  _dialogs.pop();
-
-  const previousDialog = _dialogs[_dialogs.length - 1];
-  if (previousDialog) previousDialog.focus();
-}
-
-async function openDialog(dialog, overlay, isModal, from) {
-  if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
-  addClass(overlay, "active");
-  addClass(dialog, "active");
-
-  if (isModal) dialog.showModal();
-  else dialog.show();
-
-  await wait(90);
-
-  if (!isModal) on(dialog, "keydown", onKeydownDialog, false);
-  _dialogs.push(dialog);
-  focusOnDialogOrElement(dialog);
-}
-
-function onClickOverlay(e) {
-  const overlay = e.currentTarget;
-  const dialog = next(overlay);
-  if (hasTag(dialog, "dialog")) closeDialog(dialog, overlay);
-}
-
-export async function updateDialog(from, dialog) {
-  blurActiveElement();
-
-  let overlay = prev(dialog);
-  const isActive = hasClass(dialog, "active") || dialog.open;
-  const isModal = hasClass(dialog, "modal");
-
-  if (!isModal) off(dialog, "keydown", onKeydownDialog, false);
-
-  if (!hasClass(overlay, "overlay")) {
-    overlay = create({ class: "overlay" });
-    insertBefore(overlay, dialog);
-    await wait(90);
-  }
-
-  if (!isModal) onWeak(overlay, "click", onClickOverlay, false);
-
-  if (isActive) closeDialog(dialog, overlay);
-  else void openDialog(dialog, overlay, isModal, from);
-}

package/src/runtime/elements/fields.js

@@ -1,181 +0,0 @@
-import {
-  query, next, prev, hasType, parent, queryAll, onWeak,
-  isChrome, isMac, isIOS, rootSizeInPixels,
-} from "../utils.js";
-
-function updatePlaceholder(element) {
-  if (!element.placeholder) element.placeholder = " ";
-}
-
-function onClickLabel(e) {
-  const label = e.currentTarget;
-  const field = parent(label);
-  const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", field);
-  if (input) input.focus();
-}
-
-function onFocusInput(e) {
-  updateInput(e.currentTarget);
-}
-
-function onBlurInput(e) {
-  updateInput(e.currentTarget);
-}
-
-function onChangeFile(e) {
-  updateFile(e.currentTarget);
-}
-
-function onChangeColor(e) {
-  updateColor(e.currentTarget);
-}
-
-function onKeydownFile(e) {
-  updateFile(e.currentTarget, e);
-}
-
-function onKeydownColor(e) {
-  updateColor(e.currentTarget, e);
-}
-
-function onPasswordIconClick(e) {
-  const icon = e.currentTarget;
-  const input = query("input", parent(icon));
-  if (input && icon.textContent?.includes("visibility")) {
-    if (input.type === "password") {
-      input.type = "text";
-      icon.textContent = "visibility_off";
-    } else {
-      input.type = "password";
-      icon.textContent = "visibility";
-    }
-  }
-}
-
-function onInputTextarea(e) {
-  updateTextarea(e.currentTarget);
-}
-
-function onClickLabelDelegation(e) {
-  const from = e.target.closest(".field > label");
-  if (!from) return;
-
-  Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
-  onClickLabel(e);
-}
-
-function updateAllLabels() {
-  const body = document.body;
-  if (!body) return;
-
-  onWeak(body, "click", onClickLabelDelegation);
-}
-
-function updateAllInputs() {
-  const inputs = queryAll(".field > input:not([type=file], [type=color], [type=range])");
-  for (let i = 0; i < inputs.length; i++) {
-    onWeak(inputs[i], "focus", onFocusInput);
-    onWeak(inputs[i], "blur", onBlurInput);
-    updateInput(inputs[i]);
-  }
-}
-
-function updateAllSelects() {
-  const selects = queryAll(".field > select");
-  for (let i = 0; i < selects.length; i++) {
-    onWeak(selects[i], "focus", onFocusInput);
-    onWeak(selects[i], "blur", onBlurInput);
-  }
-}
-
-function updateAllFiles() {
-  const files = queryAll(".field > input[type=file]");
-  for (let i = 0; i < files.length; i++) {
-    onWeak(files[i], "change", onChangeFile);
-    updateFile(files[i]);
-  }
-}
-
-function updateAllColors() {
-  const colors = queryAll(".field > input[type=color]");
-  for (let i = 0; i < colors.length; i++) {
-    onWeak(colors[i], "change", onChangeColor);
-    updateColor(colors[i]);
-  }
-}
-
-function updateAllTextareas() {
-  const textareas = queryAll(".field > textarea");
-  for (let i = 0; i < textareas.length; i++) {
-    onWeak(textareas[i], "focus", onFocusInput);
-    onWeak(textareas[i], "blur", onBlurInput);
-    updatePlaceholder(textareas[i]);
-
-    if (isChrome && !isMac && !isIOS) continue;
-
-    onWeak(textareas[i], "input", onInputTextarea);
-    updateTextarea(textareas[i]);
-  }
-}
-
-function updateAllPasswordIcons() {
-  const icons = queryAll(".field:has(> input[type=password]) > i, a");
-  for (let i = 0; i < icons.length; i++) onWeak(icons[i], "click", onPasswordIconClick);
-}
-
-function updateInput(input) {
-  if (hasType(input, "number") && !input.value) input.value = "";
-  updatePlaceholder(input);
-}
-
-function updateFile(input, e) {
-  if (e?.key === "Enter") {
-    const previousInput = prev(input);
-    if (!hasType(previousInput, "file")) return;
-    previousInput.click();
-    return;
-  }
-
-  const nextInput = next(input);
-  if (!hasType(nextInput, "text")) return;
-  nextInput.value = input.files ? Array.from(input.files).map((x) => x.name).join(", ") : "";
-  nextInput.readOnly = true;
-  onWeak(nextInput, "keydown", onKeydownFile, false);
-  updateInput(nextInput);
-}
-
-function updateColor(input, e) {
-  if (e?.key === "Enter") {
-    const previousInput = prev(input);
-    if (!hasType(previousInput, "color")) return;
-    previousInput.click();
-    return;
-  }
-
-  const nextInput = next(input);
-  if (!hasType(nextInput, "text")) return;
-  nextInput.readOnly = true;
-  nextInput.value = input.value;
-  onWeak(nextInput, "keydown", onKeydownColor, false);
-  updateInput(nextInput);
-}
-
-function updateTextarea(textarea) {
-  updatePlaceholder(textarea);
-
-  if (textarea.hasAttribute("rows")) return;
-
-  const rootSize = rootSizeInPixels();
-  textarea.style.blockSize = "auto";
-  textarea.style.blockSize = `${textarea.scrollHeight - rootSize}px`;
-}
-
-export function updateAllFields() {
-  updateAllLabels();
-  updateAllInputs();
-  updateAllSelects();
-  updateAllFiles();
-  updateAllColors();
-  updateAllTextareas();
-  updateAllPasswordIcons();
-}

package/src/runtime/elements/menus.js

@@ -1,42 +0,0 @@
-import {
-  query, queryAll, addClass, on, off, hasTag, hasClass, removeClass, blurActiveElement,
-} from "../utils.js";
-
-let _timeoutMenu;
-
-function onClickDocument(e) {
-  off(document.body, "click", onClickDocument);
-  const body = e.target;
-  const menus = queryAll("menu.active");
-  for (let i = 0; i < menus.length; i++) updateMenu(body, menus[i], e);
-}
-
-function focusOnMenuOrInput(menu) {
-  setTimeout(() => {
-    const input = query(".field > input", menu);
-    if (input) input.focus();
-    else menu.focus();
-  }, 90);
-}
-
-export function updateMenu(from, menu, e) {
-  if (_timeoutMenu) clearTimeout(_timeoutMenu);
-
-  _timeoutMenu = setTimeout(() => {
-    on(document.body, "click", onClickDocument);
-    if (!hasTag(document.activeElement, "input")) blurActiveElement();
-
-    const isActive = hasClass(menu, "active");
-    const isEvent = e?.target === from;
-    const isChild = !!from.closest("menu");
-
-    if ((!isActive && isChild) || (isActive && isEvent)) {
-      removeClass(menu, "active");
-      return;
-    }
-
-    removeClass(queryAll("menu.active"), "active");
-    addClass(menu, "active");
-    focusOnMenuOrInput(menu);
-  }, 90);
-}

package/src/runtime/elements/pages.js

@@ -1,7 +0,0 @@
-import { addClass, parent, removeClass, queryAll } from "../utils.js";
-
-export function updatePage(page) {
-  const container = parent(page);
-  if (container) removeClass(queryAll(":scope > .page", container), "active");
-  addClass(page, "active");
-}

package/src/runtime/elements/progress.js

@@ -1,35 +0,0 @@
-import { queryAll, hasTag, off, on, isMac, isIOS, isChrome, hasClass } from "../utils.js";
-
-function onInputDocument(e) {
-  const progress = e.target;
-
-  if (hasTag(progress, "progress")) {
-    updateProgress(progress);
-  } else {
-    updateAllProgress();
-  }
-}
-
-function updateProgress(progress) {
-  requestAnimationFrame(() => {
-    if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
-      const value = hasClass(progress, "circle") ? "50" : "100";
-      progress.style.setProperty("--_value", value);
-      progress.setAttribute("value", value);
-      progress.setAttribute("max", "100");
-      progress.classList.add("indeterminate");
-    } else {
-      progress.style.setProperty("--_value", String(progress.value));
-    }
-  });
-}
-
-export function updateAllProgress() {
-  if (isChrome && !isMac && !isIOS) return;
-
-  const body = document.body;
-  const progresses = queryAll("progress");
-  if (!progresses.length) off(body, "input", onInputDocument, false);
-  else on(body, "input", onInputDocument, false);
-  for (let i = 0; i < progresses.length; i++) updateProgress(progresses[i]);
-}

package/src/runtime/elements/sliders.js

@@ -1,78 +0,0 @@
-import {
-  query, queryAll, hasClass, on, off, parent, hasTag, onWeak, rootSizeInPixels,
-} from "../utils.js";
-
-function onInputDocument(e) {
-  const input = e.target;
-  if (!hasTag(input, "input") && !hasTag(input, "select")) return;
-
-  if (input.type === "range") {
-    input.focus();
-    updateRange(input);
-  } else {
-    updateAllRanges();
-  }
-}
-
-function onChangeInput(e) {
-  const isCoarse = window.matchMedia("(pointer: coarse)").matches;
-  if (!isCoarse) return;
-
-  const input = e.target;
-  input.blur();
-}
-
-function updateAllRanges() {
-  const body = document.body;
-  const ranges = queryAll(".slider > input[type=range]");
-  if (!ranges.length) off(body, "input", onInputDocument, false);
-  else on(body, "input", onInputDocument, false);
-  for (let i = 0; i < ranges.length; i++) updateRange(ranges[i]);
-}
-
-function updateRange(input) {
-  onWeak(input, "change", onChangeInput);
-
-  const label = parent(input);
-  const bar = query("span", label);
-  const inputs = queryAll("input", label);
-  if (!inputs.length || !bar) return;
-
-  const rootSize = rootSizeInPixels();
-  const thumb = hasClass(label, "max") ? 0 : (0.25 * rootSize * 100) / inputs[0].offsetWidth;
-  const percents = [];
-  const values = [];
-  for (let i = 0, n = inputs.length; i < n; i++) {
-    const min = parseFloat(inputs[i].min) || 0;
-    const max = parseFloat(inputs[i].max) || 100;
-    const value = parseFloat(inputs[i].value) || 0;
-    const percent = ((value - min) * 100) / (max - min);
-    const fix = thumb / 2 - (thumb * percent) / 100;
-    percents.push(percent + fix);
-    values.push(value);
-  }
-
-  let percent = percents[0];
-  let start = 0;
-  let end = 100 - start - percent;
-  let value1 = values[0];
-  let value2 = values[1] || 0;
-  if (inputs.length > 1) {
-    percent = Math.abs(percents[1] - percents[0]);
-    start = percents[1] > percents[0] ? percents[0] : percents[1];
-    end = 100 - start - percent;
-
-    if (value2 > value1) {
-      value1 = values[1] || 0;
-      value2 = values[0];
-    }
-  }
-
-  requestAnimationFrame(() => {
-    label.style.cssText = `--_start: ${start}%; --_end: ${end}%; --_value1: '${value1}'; --_value2: '${value2}';`;
-  });
-}
-
-export function updateAllSliders() {
-  updateAllRanges();
-}

package/src/runtime/elements/snackbars.js

@@ -1,27 +0,0 @@
-import { queryAll, addClass, removeClass, blurActiveElement, onWeak } from "../utils.js";
-
-let _timeoutSnackbar;
-
-function onClickSnackbar(e) {
-  const snackbar = e.currentTarget;
-  removeClass(snackbar, "active");
-
-  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
-}
-
-export function updateSnackbar(snackbar, milliseconds) {
-  blurActiveElement();
-
-  const activeSnackbars = queryAll(".snackbar.active");
-  for (let i = 0; i < activeSnackbars.length; i++) removeClass(activeSnackbars[i], "active");
-  addClass(snackbar, "active");
-  onWeak(snackbar, "click", onClickSnackbar);
-
-  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
-
-  if (milliseconds === -1) return;
-
-  _timeoutSnackbar = setTimeout(() => {
-    removeClass(snackbar, "active");
-  }, milliseconds ?? 6000);
-}

package/src/runtime/helpers/ripples.js

@@ -1,46 +0,0 @@
-import { onWeak } from "../utils.js";
-
-function updateRipple(e) {
-  const isMouseEvent = e instanceof MouseEvent;
-  const element = e.currentTarget;
-  const rect = element.getBoundingClientRect();
-  const diameter = Math.max(rect.width, rect.height);
-  const radius = diameter / 2;
-  const x = isMouseEvent ? e.clientX - rect.left - radius : (rect.width / 2) - radius;
-  const y = isMouseEvent ? e.clientY - rect.top - radius : (rect.height / 2) - radius;
-  const rippleContainer = document.createElement("div");
-  rippleContainer.className = "ripple-js";
-
-  const ripple = document.createElement("div");
-  ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
-  ripple.style.left = `${x}px`;
-  ripple.style.top = `${y}px`;
-  onWeak(ripple, "animationend", () => { rippleContainer.remove(); });
-
-  rippleContainer.appendChild(ripple);
-  element.appendChild(rippleContainer);
-}
-
-function onMousedownRippleDelegation(e) {
-  const from = e.target.closest(".slow-ripple, .ripple, .fast-ripple");
-  if (!from) return;
-
-  Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
-  updateRipple(e);
-}
-
-function onKeydownRippleDelegation(e) {
-  const from = e.target.closest(".slow-ripple, .ripple, .fast-ripple");
-  if (!from || e.key !== " ") return;
-
-  Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
-  updateRipple(e);
-}
-
-export function updateAllRipples() {
-  const body = document.body;
-  if (!body) return;
-
-  onWeak(body, "mousedown", onMousedownRippleDelegation);
-  onWeak(body, "keydown", onKeydownRippleDelegation);
-}

package/src/runtime/md3.js

@@ -1,141 +0,0 @@
-import { updateAllFields } from "./elements/fields.js";
-import { updateAllSliders } from "./elements/sliders.js";
-import {
-  attachAutoListener,
-  getThemes,
-  readStoredMode,
-  readStoredTheme,
-  updateMode,
-  updateTheme,
-} from "./settings/theme.js";
-import {
-  addClass, guid, hasClass, hasTag, onWeak, query, removeClass, updateAllClickable,
-} from "./utils.js";
-import { updateDialog } from "./elements/dialogs.js";
-import { updateMenu } from "./elements/menus.js";
-import { updateSnackbar } from "./elements/snackbars.js";
-import { updatePage } from "./elements/pages.js";
-import { updateAllRipples } from "./helpers/ripples.js";
-import { updateAllProgress } from "./elements/progress.js";
-
-let _timeoutMutation;
-let _mutation = null;
-
-function onMutation() {
-  if (_timeoutMutation) clearTimeout(_timeoutMutation);
-  _timeoutMutation = setTimeout(() => _ui(), 180);
-}
-
-async function run(from, to, options, e) {
-  if (!to) {
-    to = query(from.getAttribute("data-ui"));
-    if (!to) {
-      from.classList.toggle("active");
-      return;
-    }
-  }
-
-  updateAllClickable(from);
-
-  if (hasTag(to, "dialog")) {
-    requestAnimationFrame(() => updateDialog(from, to));
-    return;
-  }
-
-  if (hasTag(to, "menu")) {
-    requestAnimationFrame(() => updateMenu(from, to, e));
-    return;
-  }
-
-  if (hasClass(to, "snackbar")) {
-    requestAnimationFrame(() => updateSnackbar(to, options));
-    return;
-  }
-
-  if (hasClass(to, "page")) {
-    requestAnimationFrame(() => updatePage(to));
-    return;
-  }
-
-  if (hasClass(to, "active")) {
-    removeClass(from, "active");
-    removeClass(to, "active");
-    return;
-  }
-
-  addClass(to, "active");
-}
-
-function setup() {
-  if (globalThis.ui || _mutation || !globalThis.MutationObserver) return;
-  _mutation = new MutationObserver(onMutation);
-  _mutation.observe(document.body, { childList: true, subtree: true });
-  onMutation();
-}
-
-function onClickDataUi(e) {
-  const from = e.target.closest("[data-ui]");
-  if (from) void run(from, null, null, e);
-}
-
-function onKeydownDataUi(e) {
-  const from = e.target.closest("[data-ui]");
-  if (from && hasTag(from, "a") && !from.getAttribute("href") && e.key === "Enter") {
-    void run(from, null, null, e);
-  }
-}
-
-function updateAllDataUis() {
-  const body = document.body;
-  if (!body) return;
-
-  onWeak(body, "click", onClickDataUi);
-  onWeak(body, "keydown", onKeydownDataUi);
-}
-
-function _ui(selector, options) {
-  if (selector) {
-    if (selector === "setup") { setup(); return undefined; }
-    if (selector === "guid") return guid();
-    if (selector === "mode") return updateMode(options);
-    if (selector === "theme") return updateTheme(options);
-    if (selector === "themes") return getThemes();
-
-    const to = query(selector);
-    if (!to) return undefined;
-    void run(to, to, options);
-  }
-
-  updateAllDataUis();
-  updateAllFields();
-  updateAllRipples();
-  updateAllSliders();
-  updateAllProgress();
-  return undefined;
-}
-
-function start() {
-  if (globalThis.ui) return;
-
-  // Stored preference wins over the HTML default — the user's last choice
-  // outranks `<html data-mode="…">` hardcoded in markup. If neither is set,
-  // default to "auto" so the OS theme drives.
-  const root = globalThis.document?.documentElement;
-  if (root) {
-    updateMode(readStoredMode() || root.dataset.mode || "auto");
-    // Theme persistence: stored choice beats the HTML default, same as mode.
-    // If neither is set, leave data-theme alone — bare :root carries the
-    // implicit default (first theme in $themes).
-    const storedTheme = readStoredTheme();
-    if (storedTheme) updateTheme(storedTheme);
-  }
-  attachAutoListener();
-
-  setup();
-  globalThis.ui = _ui;
-}
-
-start();
-
-export const ui = globalThis.ui;
-export default ui;

package/src/runtime/palette.js

@@ -1,64 +0,0 @@
-// Generated by scripts/build-palette.mjs from
-//   src/styles/_config.scss              ($material-palette)
-//   src/styles/settings/_themes.scss     ($themes)
-// DO NOT EDIT — re-run `pnpm build` (or `node scripts/build-palette.mjs`).
-
-export const palette = {
-  "red": "#F44336",
-  "pink": "#E91E63",
-  "purple": "#9C27B0",
-  "deep-purple": "#673AB7",
-  "blue": "#2196F3",
-  "light-blue": "#03A9F4",
-  "cyan": "#00BCD4",
-  "green": "#4CAF50",
-  "light-green": "#8BC34A",
-  "lime": "#CDDC39",
-  "yellow": "#FFEB3B",
-  "amber": "#FFC107",
-  "orange": "#FF9800",
-  "deep-orange": "#FF5722",
-  "brown": "#795548",
-  "blue-grey": "#607D8B",
-  "stackific": "#1447E6",
-  "hello-pumpkin": "#FF8F00",
-  "sea-lettuce": "#63A002",
-  "olive": "#7C7C67",
-  "nord": "#5E81AC",
-  "vega-violet": "#AD46FF",
-  "wild-strawberry": "#F6339A",
-  "heliotrope-magenta": "#E12AFB",
-  "voodoo-violet": "#804792",
-  "red-orchid": "#C0001C",
-  "green-brown": "#6E5D00",
-  "shakshuka": "#AB350F",
-  "purple-honeycreeper": "#8E51FF",
-  "maldives": "#00B8DB",
-  "verditer": "#00BBA7",
-  "fennel": "#00BC7D",
-  "gold": "#EFB100",
-  "vitamin-c": "#FD9A00",
-  "burtuqali": "#FF6900",
-};
-
-export const themes = [
-  "stackific",
-  "hello-pumpkin",
-  "sea-lettuce",
-  "olive",
-  "nord",
-  "vega-violet",
-  "wild-strawberry",
-  "heliotrope-magenta",
-  "voodoo-violet",
-  "red-orchid",
-  "green-brown",
-  "shakshuka",
-  "purple-honeycreeper",
-  "maldives",
-  "verditer",
-  "fennel",
-  "gold",
-  "vitamin-c",
-  "burtuqali",
-];