@editora/ui-core 0.1.9 → 0.1.10

package/dist/command.esm.js

@@ -0,0 +1,307 @@
+import { E as l } from "./ElementBase-909688f3.mjs";
+import "./listbox-308789a0.mjs";
+import "./collection-a1aac0c6.mjs";
+import "./collection.esm.js";
+const c = `
+  :host {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-inline-size: 0;
+    min-block-size: 0;
+    color-scheme: light dark;
+    --ui-command-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-command-text: var(--ui-color-text, #0f172a);
+    --ui-command-muted: var(--ui-color-muted, #64748b);
+    --ui-command-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-command-accent: var(--ui-color-primary, #2563eb);
+    --ui-command-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-command-radius: 16px;
+    --ui-command-shadow: none;
+    border: var(--ui-command-border);
+    border-radius: var(--ui-command-radius);
+    background: var(--ui-command-bg);
+    color: var(--ui-command-text);
+    box-shadow: var(--ui-command-shadow);
+    overflow: hidden;
+  }
+
+  .search {
+    border: none;
+    outline: none;
+    background: transparent;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px 16px;
+    font-size: 15px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
+    color: inherit;
+  }
+
+  .search:focus-visible {
+    outline: 2px solid var(--ui-command-focus);
+    outline-offset: -2px;
+  }
+
+  .list {
+    overflow: auto;
+    padding: 8px;
+    display: grid;
+    gap: 4px;
+    min-block-size: 0;
+  }
+
+  ::slotted([slot="command"]) {
+    display: block;
+    border-radius: 10px;
+    padding: 10px 10px;
+    font-size: 13px;
+    color: var(--ui-command-text);
+    line-height: 1.35;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: background-color 120ms ease;
+  }
+
+  ::slotted([slot="command"]:hover),
+  ::slotted([slot="command"]:focus-visible),
+  ::slotted([slot="command"][data-active="true"]) {
+    background: color-mix(in srgb, var(--ui-command-accent) 14%, transparent);
+  }
+
+  ::slotted([slot="command"][hidden]) {
+    display: none !important;
+  }
+
+  .empty {
+    padding: 12px 10px 14px;
+    color: var(--ui-command-muted);
+    font-size: 12px;
+    text-align: center;
+  }
+
+  .empty[hidden] {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted([slot="command"]) {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-command-bg: Canvas;
+      --ui-command-text: CanvasText;
+      --ui-command-muted: CanvasText;
+      --ui-command-border: 1px solid CanvasText;
+      --ui-command-accent: Highlight;
+      --ui-command-focus: Highlight;
+      --ui-command-shadow: none;
+    }
+
+    :host,
+    .search,
+    ::slotted([slot="command"]) {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    ::slotted([slot="command"]:hover),
+    ::slotted([slot="command"]:focus-visible),
+    ::slotted([slot="command"][data-active="true"]) {
+      border-color: Highlight;
+    }
+  }
+`;
+function r(o) {
+  return o.trim().toLowerCase();
+}
+function u(o) {
+  return r(
+    o.getAttribute("aria-label") || o.getAttribute("data-label") || [
+      o.getAttribute("data-value") || "",
+      o.getAttribute("data-keywords") || "",
+      o.textContent || ""
+    ].join(" ")
+  );
+}
+function a(o) {
+  if (!o)
+    return [];
+  const t = o.assignedElements({ flatten: !0 }), e = [];
+  for (const i of t) {
+    if (i instanceof HTMLSlotElement) {
+      e.push(...a(i));
+      continue;
+    }
+    i instanceof HTMLElement && i.getAttribute("slot") === "command" && e.push(i);
+  }
+  return e;
+}
+class d extends l {
+  constructor() {
+    super(), this._commands = [], this._visible = [], this._active = -1, this._input = null, this._listbox = null, this._slot = null, this._query = "", this._onSlotChange = this._onSlotChange.bind(this), this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onClick = this._onClick.bind(this);
+  }
+  static get observedAttributes() {
+    return ["placeholder", "empty-text"];
+  }
+  get query() {
+    return this._query;
+  }
+  set query(t) {
+    const e = t || "";
+    if (e === this._query)
+      return;
+    const i = this._query;
+    this._query = e, this._input && (this._input.value = e), this._applyFilter(), this.dispatchEvent(
+      new CustomEvent("query-change", {
+        detail: { value: e, previousValue: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  focusSearch() {
+    var t;
+    (t = this._input) == null || t.focus();
+  }
+  clearQuery() {
+    this.query = "";
+  }
+  refreshCommands() {
+    this._collectCommands(), this._applyFilter();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this._syncSlotListener(), this.refreshCommands();
+  }
+  disconnectedCallback() {
+    var t, e;
+    this.root.removeEventListener("click", this._onClick), (t = this._input) == null || t.removeEventListener("input", this._onInput), (e = this._input) == null || e.removeEventListener("keydown", this._onKeyDown), this._slot && this._slot.removeEventListener("slotchange", this._onSlotChange), this._slot = null, this._input = null, super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (t === "placeholder") {
+        this._input && (this._input.placeholder = i || "Search commands...");
+        return;
+      }
+      if (t === "empty-text") {
+        const s = this.root.querySelector(".empty");
+        s && (s.textContent = i || "No commands found.");
+      }
+    }
+  }
+  render() {
+    this._input && (this._input.removeEventListener("input", this._onInput), this._input.removeEventListener("keydown", this._onKeyDown));
+    const t = this.getAttribute("placeholder") || "Search commands...", e = this.getAttribute("empty-text") || "No commands found.";
+    this.setContent(`
+      <style>${c}</style>
+      <input class="search" part="search" type="text" placeholder="${t}" />
+      <ui-listbox class="list" part="list" role="listbox" aria-label="Command options" item-selector="[slot=&quot;command&quot;]" item-role="option" active-attribute="data-active">
+        <slot name="command"></slot>
+        <div class="empty" part="empty" hidden>${e}</div>
+      </ui-listbox>
+    `), this._input = this.root.querySelector(".search"), this._listbox = this.root.querySelector("ui-listbox"), this._listbox && (this._listbox.container = this), this._input && (this._input.value = this._query, this._input.addEventListener("input", this._onInput), this._input.addEventListener("keydown", this._onKeyDown)), this._syncSlotListener(), this.refreshCommands();
+  }
+  _syncSlotListener() {
+    const t = this.root.querySelector('slot[name="command"]');
+    this._slot && this._slot !== t && this._slot.removeEventListener("slotchange", this._onSlotChange), t && this._slot !== t && t.addEventListener("slotchange", this._onSlotChange), this._slot = t;
+  }
+  _onSlotChange() {
+    this.refreshCommands();
+  }
+  _collectCommands() {
+    var t;
+    this._commands = a(this._slot), this._commands.forEach((e, i) => {
+      e.setAttribute("data-index", String(i));
+    }), this._listbox && (this._listbox.items = this._commands), (t = this._listbox) == null || t.refresh();
+  }
+  _applyFilter() {
+    var i, s;
+    const t = r(this._query);
+    this._visible = this._commands.filter((n) => !t || u(n).includes(t)), this._commands.forEach((n) => {
+      this._visible.includes(n) ? n.removeAttribute("hidden") : n.setAttribute("hidden", "");
+    }), this._visible.length > 0 ? (this._active = Math.max(0, Math.min(this._active, this._visible.length - 1)), (i = this._listbox) == null || i.setActiveItem(this._visible[this._active], {
+      focus: !1,
+      owner: this._input,
+      scroll: !0
+    })) : (this._active = -1, (s = this._listbox) == null || s.clearActive(), this._input && this._input.removeAttribute("aria-activedescendant"));
+    const e = this.root.querySelector(".empty");
+    e && (this._visible.length === 0 ? e.removeAttribute("hidden") : e.setAttribute("hidden", ""));
+  }
+  _selectCommand(t) {
+    if (!t)
+      return;
+    const e = t.getAttribute("data-index"), i = e == null ? -1 : Number(e);
+    this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: {
+          index: i,
+          item: t,
+          label: t.getAttribute("data-label") || (t.textContent || "").trim(),
+          value: t.getAttribute("data-value") || void 0
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _move(t) {
+    var s;
+    if (this._visible.length === 0)
+      return;
+    const e = this._active >= 0 ? this._visible[this._active] : null, i = ((s = this._listbox) == null ? void 0 : s.move(t, {
+      current: e,
+      focus: !1,
+      owner: this._input,
+      scroll: !0
+    })) || null;
+    i && (this._active = this._visible.indexOf(i));
+  }
+  _onInput(t) {
+    this.query = t.target.value || "";
+  }
+  _onKeyDown(t) {
+    var e, i;
+    if (t.key === "ArrowDown") {
+      t.preventDefault(), this._move(1);
+      return;
+    }
+    if (t.key === "ArrowUp") {
+      t.preventDefault(), this._move(-1);
+      return;
+    }
+    if (t.key === "Home") {
+      t.preventDefault();
+      const s = ((e = this._listbox) == null ? void 0 : e.focusBoundary("first", { focus: !1, owner: this._input, scroll: !0 })) || null;
+      s && (this._active = this._visible.indexOf(s));
+      return;
+    }
+    if (t.key === "End") {
+      t.preventDefault();
+      const s = ((i = this._listbox) == null ? void 0 : i.focusBoundary("last", { focus: !1, owner: this._input, scroll: !0 })) || null;
+      s && (this._active = this._visible.indexOf(s));
+      return;
+    }
+    t.key === "Enter" && (t.preventDefault(), this._selectCommand(this._active >= 0 ? this._visible[this._active] : null));
+  }
+  _onClick(t) {
+    const e = t.composedPath(), i = this._commands.find((s) => e.includes(s));
+    !i || i.hasAttribute("hidden") || this._selectCommand(i);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-command") && customElements.define("ui-command", d);
+export {
+  d as UICommand
+};

package/dist/container.cjs.js

@@ -0,0 +1,115 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./ElementBase-1b301e7f.js"),o=`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    color-scheme: light dark;
+    --ui-container-padding: var(--ui-space-sm, 8px);
+    --ui-container-max-sm: 640px;
+    --ui-container-max-md: 960px;
+    --ui-container-max-lg: 1280px;
+    --ui-container-max-xl: 1440px;
+    --ui-container-bg: transparent;
+    --ui-container-border: transparent;
+    --ui-container-radius: 14px;
+    --ui-container-shadow: none;
+    --ui-container-color: inherit;
+  }
+  .container {
+    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    padding-left: var(--ui-container-padding);
+    padding-right: var(--ui-container-padding);
+    border: 1px solid var(--ui-container-border);
+    border-radius: var(--ui-container-radius);
+    background: var(--ui-container-bg);
+    color: var(--ui-container-color);
+    box-shadow: var(--ui-container-shadow);
+    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+  }
+  .container.sm { max-width: var(--ui-container-max-sm); }
+  .container.md { max-width: var(--ui-container-max-md); }
+  .container.lg { max-width: var(--ui-container-max-lg); }
+  .container.xl { max-width: var(--ui-container-max-xl); }
+
+  :host([variant="surface"]) {
+    --ui-container-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-container-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-container-shadow:
+      0 1px 2px rgba(2, 6, 23, 0.05),
+      0 12px 28px rgba(2, 6, 23, 0.08);
+    --ui-container-color: var(--ui-color-text, #0f172a);
+  }
+
+  :host([variant="elevated"]) {
+    --ui-container-bg: var(--ui-color-surface, #ffffff);
+    --ui-container-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 64%, transparent);
+    --ui-container-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.1),
+      0 30px 64px rgba(2, 6, 23, 0.15);
+    --ui-container-color: var(--ui-color-text, #0f172a);
+  }
+
+  :host([variant="glass"]) {
+    --ui-container-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, #ffffff 16%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, transparent)
+      );
+    --ui-container-border: color-mix(in srgb, #ffffff 64%, var(--ui-color-border, #cbd5e1));
+    --ui-container-shadow:
+      0 1px 2px rgba(2, 6, 23, 0.07),
+      0 20px 48px rgba(2, 6, 23, 0.14);
+    --ui-container-color: var(--ui-color-text, #0f172a);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-container-bg: #0f172a;
+    --ui-container-border: #334155;
+    --ui-container-color: #e2e8f0;
+    --ui-container-shadow: none;
+  }
+
+  :host([density="compact"]) {
+    --ui-container-padding: var(--ui-space-xs, 4px);
+    --ui-container-radius: 10px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-container-padding: var(--ui-space-md, 12px);
+    --ui-container-radius: 18px;
+  }
+
+  :host([headless]) .container { display: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .container {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .container {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-container-bg: Canvas;
+      --ui-container-border: CanvasText;
+      --ui-container-color: CanvasText;
+      --ui-container-shadow: none;
+    }
+
+    .container {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+  }
+`;class n extends a.ElementBase{constructor(){super(),this._headless=!1,this._resizeObserver=null}static get observedAttributes(){return["size","headless","variant","density"]}connectedCallback(){super.connectedCallback(),this._headless=this.hasAttribute("headless"),this._observeResize()}disconnectedCallback(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),super.disconnectedCallback()}attributeChangedCallback(e,r,i){r!==i&&(e==="headless"&&(this._headless=this.hasAttribute("headless")),(e==="headless"||e==="size"||e==="variant"||e==="density")&&this.requestRender())}render(){if(this._headless){this.setContent("");return}const e=["sm","md","lg","xl"];let r=this.getAttribute("size")||"md";e.includes(r)||(r="md");const i=`container ${r}`;this.setContent(`<style>${o}</style><div class="${i}" role="group" aria-label="Container"><slot></slot></div>`),this._observeResize()}_observeResize(){var r;this._resizeObserver&&this._resizeObserver.disconnect();const e=(r=this.root)==null?void 0:r.querySelector(".container");!e||typeof ResizeObserver>"u"||(this._resizeObserver=new ResizeObserver(()=>{this.dispatchEvent(new CustomEvent("resize",{bubbles:!0}))}),this._resizeObserver.observe(e))}}typeof customElements<"u"&&!customElements.get("ui-container")&&customElements.define("ui-container",n);exports.UIContainer=n;

package/dist/container.esm.js

@@ -0,0 +1,156 @@
+import { E as n } from "./ElementBase-909688f3.mjs";
+const a = `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    color-scheme: light dark;
+    --ui-container-padding: var(--ui-space-sm, 8px);
+    --ui-container-max-sm: 640px;
+    --ui-container-max-md: 960px;
+    --ui-container-max-lg: 1280px;
+    --ui-container-max-xl: 1440px;
+    --ui-container-bg: transparent;
+    --ui-container-border: transparent;
+    --ui-container-radius: 14px;
+    --ui-container-shadow: none;
+    --ui-container-color: inherit;
+  }
+  .container {
+    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    padding-left: var(--ui-container-padding);
+    padding-right: var(--ui-container-padding);
+    border: 1px solid var(--ui-container-border);
+    border-radius: var(--ui-container-radius);
+    background: var(--ui-container-bg);
+    color: var(--ui-container-color);
+    box-shadow: var(--ui-container-shadow);
+    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+  }
+  .container.sm { max-width: var(--ui-container-max-sm); }
+  .container.md { max-width: var(--ui-container-max-md); }
+  .container.lg { max-width: var(--ui-container-max-lg); }
+  .container.xl { max-width: var(--ui-container-max-xl); }
+
+  :host([variant="surface"]) {
+    --ui-container-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-container-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-container-shadow:
+      0 1px 2px rgba(2, 6, 23, 0.05),
+      0 12px 28px rgba(2, 6, 23, 0.08);
+    --ui-container-color: var(--ui-color-text, #0f172a);
+  }
+
+  :host([variant="elevated"]) {
+    --ui-container-bg: var(--ui-color-surface, #ffffff);
+    --ui-container-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 64%, transparent);
+    --ui-container-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.1),
+      0 30px 64px rgba(2, 6, 23, 0.15);
+    --ui-container-color: var(--ui-color-text, #0f172a);
+  }
+
+  :host([variant="glass"]) {
+    --ui-container-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, #ffffff 16%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, transparent)
+      );
+    --ui-container-border: color-mix(in srgb, #ffffff 64%, var(--ui-color-border, #cbd5e1));
+    --ui-container-shadow:
+      0 1px 2px rgba(2, 6, 23, 0.07),
+      0 20px 48px rgba(2, 6, 23, 0.14);
+    --ui-container-color: var(--ui-color-text, #0f172a);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-container-bg: #0f172a;
+    --ui-container-border: #334155;
+    --ui-container-color: #e2e8f0;
+    --ui-container-shadow: none;
+  }
+
+  :host([density="compact"]) {
+    --ui-container-padding: var(--ui-space-xs, 4px);
+    --ui-container-radius: 10px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-container-padding: var(--ui-space-md, 12px);
+    --ui-container-radius: 18px;
+  }
+
+  :host([headless]) .container { display: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .container {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .container {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-container-bg: Canvas;
+      --ui-container-border: CanvasText;
+      --ui-container-color: CanvasText;
+      --ui-container-shadow: none;
+    }
+
+    .container {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+  }
+`;
+class o extends n {
+  constructor() {
+    super(), this._headless = !1, this._resizeObserver = null;
+  }
+  static get observedAttributes() {
+    return ["size", "headless", "variant", "density"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._headless = this.hasAttribute("headless"), this._observeResize();
+  }
+  disconnectedCallback() {
+    this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, r, i) {
+    r !== i && (e === "headless" && (this._headless = this.hasAttribute("headless")), (e === "headless" || e === "size" || e === "variant" || e === "density") && this.requestRender());
+  }
+  render() {
+    if (this._headless) {
+      this.setContent("");
+      return;
+    }
+    const e = ["sm", "md", "lg", "xl"];
+    let r = this.getAttribute("size") || "md";
+    e.includes(r) || (r = "md");
+    const i = `container ${r}`;
+    this.setContent(`<style>${a}</style><div class="${i}" role="group" aria-label="Container"><slot></slot></div>`), this._observeResize();
+  }
+  _observeResize() {
+    var r;
+    this._resizeObserver && this._resizeObserver.disconnect();
+    const e = (r = this.root) == null ? void 0 : r.querySelector(".container");
+    !e || typeof ResizeObserver > "u" || (this._resizeObserver = new ResizeObserver(() => {
+      this.dispatchEvent(new CustomEvent("resize", { bubbles: !0 }));
+    }), this._resizeObserver.observe(e));
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-container") && customElements.define("ui-container", o);
+export {
+  o as UIContainer
+};