@toyu-ui/elements 0.1.0

package/checkbox.js

@@ -0,0 +1,288 @@
+const a = new CSSStyleSheet();
+a.replaceSync(`
+  @layer ty.component-base {
+    :host {
+      display: inline-flex;
+      align-items: center;
+      color: var(--ty-checkbox-foreground, var(--ty-color-text, CanvasText));
+      font-family: var(--ty-font-family, inherit);
+      font-size: var(--ty-checkbox-font-size, var(--ty-control-font-size, 0.875rem));
+      line-height: var(--ty-checkbox-line-height, 1.25rem);
+      cursor: pointer;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    :host([disabled]) {
+      color: var(--ty-checkbox-disabled-foreground, var(--ty-color-disabled-text, GrayText));
+      cursor: not-allowed;
+    }
+
+    [part='control'] {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ty-checkbox-gap, var(--ty-control-gap, 0.5rem));
+      cursor: inherit;
+    }
+
+    input[type='checkbox'] {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    [part='box'] {
+      box-sizing: border-box;
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--ty-checkbox-size, 1rem);
+      block-size: var(--ty-checkbox-size, 1rem);
+      border:
+        var(--ty-checkbox-border-width, var(--ty-control-border-width, 1px))
+        solid
+        var(--ty-checkbox-border-color, var(--ty-color-border-strong, ButtonText));
+      border-radius: var(--ty-checkbox-radius, var(--ty-radius-1, 0.25rem));
+      background: var(--ty-checkbox-background, var(--ty-color-surface, Canvas));
+      color: var(--ty-checkbox-mark-color, transparent);
+      transition:
+        background-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
+        border-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
+        color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
+        box-shadow var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease);
+    }
+
+    :host(:hover:not([disabled]):not([checked]):not([indeterminate])) [part='box'] {
+      border-color: var(--ty-checkbox-border-color-hover, var(--ty-color-border-strong, ButtonText));
+    }
+
+    :host([checked]) [part='box'] {
+      --ty-checkbox-mark-color: var(--ty-checkbox-checked-foreground, var(--ty-color-on-accent, HighlightText));
+      background: var(--ty-checkbox-checked-background, var(--ty-color-accent, Highlight));
+      border-color: var(--ty-checkbox-checked-border-color, var(--ty-color-accent, Highlight));
+    }
+
+    :host([indeterminate]) [part='box'] {
+      --ty-checkbox-mark-color: var(--ty-checkbox-indeterminate-foreground, var(--ty-color-accent, Highlight));
+      background: var(--ty-checkbox-background, var(--ty-color-surface, Canvas));
+      border-color: var(--ty-checkbox-indeterminate-border-color, var(--ty-color-accent, Highlight));
+    }
+
+    :host(:hover:not([disabled])[checked]) [part='box'] {
+      background: var(--ty-checkbox-checked-background-hover, var(--ty-color-accent-hover, Highlight));
+      border-color: var(--ty-checkbox-checked-border-color-hover, var(--ty-color-accent-hover, Highlight));
+    }
+
+    :host(:active:not([disabled])[checked]) [part='box'] {
+      background: var(--ty-checkbox-checked-background-active, var(--ty-color-accent-pressed, Highlight));
+      border-color: var(--ty-checkbox-checked-border-color-active, var(--ty-color-accent-pressed, Highlight));
+    }
+
+    :host([disabled]) [part='box'] {
+      background: var(--ty-checkbox-disabled-background, var(--ty-color-disabled-surface, Canvas));
+      border-color: var(--ty-checkbox-disabled-border-color, var(--ty-color-disabled-border, GrayText));
+    }
+
+    :host([disabled][checked]) [part='box'],
+    :host([disabled][indeterminate]) [part='box'] {
+      --ty-checkbox-mark-color: var(--ty-checkbox-disabled-foreground, var(--ty-color-disabled-text, GrayText));
+      background: var(--ty-checkbox-disabled-selected-background, var(--ty-color-disabled-border, GrayText));
+      border-color: var(--ty-checkbox-disabled-border-color, var(--ty-color-disabled-border, GrayText));
+    }
+
+    [data-ty-checkbox-mark] {
+      inline-size: calc(var(--ty-checkbox-size, 1rem) * 0.75);
+      block-size: calc(var(--ty-checkbox-size, 1rem) * 0.75);
+      color: inherit;
+    }
+
+    [part='label'] {
+      min-inline-size: 0;
+    }
+
+    :host(:focus-within) [part='box'] {
+      outline: var(--ty-focus-width, 2px) solid var(--ty-focus-color, Highlight);
+      outline-offset: var(--ty-focus-offset, 2px);
+      box-shadow: 0 0 0 2px var(--ty-focus-inner-color, Canvas);
+    }
+
+    @media (forced-colors: active) {
+      [part='box'] {
+        forced-color-adjust: none;
+        background: ButtonFace;
+        border-color: ButtonText;
+      }
+
+      :host([checked]) [part='box'],
+      :host([indeterminate]) [part='box'] {
+        background: Highlight;
+        border-color: Highlight;
+        color: HighlightText;
+      }
+
+      :host([disabled]) {
+        color: GrayText;
+      }
+
+      :host([disabled]) [part='box'] {
+        border-color: GrayText;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [part='box'] {
+        transition-duration: 0ms;
+      }
+    }
+  }
+`);
+const c = document.createElement("template");
+c.innerHTML = `
+  <label part="control">
+    <input type="checkbox" />
+    <span part="box" aria-hidden="true"></span>
+    <span part="label"><slot></slot></span>
+  </label>
+`;
+function i(o, e) {
+  return o.hasAttribute(e);
+}
+class s extends HTMLElement {
+  static formAssociated = !0;
+  static observedAttributes = ["checked", "disabled", "indeterminate", "name", "required", "value"];
+  #e;
+  #o;
+  #i;
+  #t = "";
+  #r = "on";
+  constructor() {
+    super();
+    const e = this.attachShadow({ mode: "open", delegatesFocus: !0 });
+    e.adoptedStyleSheets = [a], e.append(c.content.cloneNode(!0));
+    const t = e.querySelector("input"), r = e.querySelector('[part="box"]');
+    if (!(t instanceof HTMLInputElement) || !(r instanceof HTMLElement))
+      throw new Error("TyuiCheckboxElement template is missing expected controls.");
+    this.#e = t, this.#o = r, this.#i = this.#s(), this.addEventListener("click", this.#d, { capture: !0 }), this.addEventListener("keydown", this.#h), this.#e.addEventListener("change", this.#l);
+  }
+  get checked() {
+    return i(this, "checked");
+  }
+  set checked(e) {
+    this.toggleAttribute("checked", e);
+  }
+  get disabled() {
+    return i(this, "disabled");
+  }
+  set disabled(e) {
+    this.toggleAttribute("disabled", e);
+  }
+  get indeterminate() {
+    return i(this, "indeterminate");
+  }
+  set indeterminate(e) {
+    this.toggleAttribute("indeterminate", e);
+  }
+  get name() {
+    return this.#t;
+  }
+  set name(e) {
+    this.#t = String(e), this.#t ? this.setAttribute("name", this.#t) : this.removeAttribute("name");
+  }
+  get required() {
+    return i(this, "required");
+  }
+  set required(e) {
+    this.toggleAttribute("required", e);
+  }
+  get value() {
+    return this.#r;
+  }
+  set value(e) {
+    this.#r = String(e), this.setAttribute("value", this.#r);
+  }
+  get validity() {
+    return this.#i?.validity ?? this.#e.validity;
+  }
+  connectedCallback() {
+    this.#n(), this.hasAttribute("tabindex") || (this.tabIndex = this.disabled ? -1 : 0), this.#c();
+  }
+  attributeChangedCallback(e, t, r) {
+    e === "name" ? this.#t = r ?? "" : e === "value" && (this.#r = r ?? "on"), this.#c();
+  }
+  focus(e) {
+    this.#e.focus(e);
+  }
+  checkValidity() {
+    return this.#i?.checkValidity() ?? this.#e.checkValidity();
+  }
+  reportValidity() {
+    return this.#i?.reportValidity() ?? this.#e.reportValidity();
+  }
+  #s() {
+    if (!("attachInternals" in this)) return null;
+    try {
+      return this.attachInternals();
+    } catch {
+      return null;
+    }
+  }
+  #n() {
+    this.#t = this.getAttribute("name") ?? this.#t, this.#r = this.getAttribute("value") ?? this.#r;
+  }
+  #d = (e) => {
+    if (this.disabled) {
+      e.preventDefault(), e.stopImmediatePropagation();
+      return;
+    }
+    e.composedPath()[0] === this && (e.stopImmediatePropagation(), this.#a());
+  };
+  #h = (e) => {
+    this.disabled || e.key !== " " && e.key !== "Enter" || e.isTrusted || (e.preventDefault(), this.#a());
+  };
+  #l = (e) => {
+    e.stopPropagation(), this.indeterminate && (this.#e.indeterminate = !1, this.#e.checked = !0), this.indeterminate = this.#e.indeterminate, this.checked = this.#e.checked, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  };
+  #a() {
+    this.checked = this.indeterminate ? !0 : !this.checked, this.indeterminate = !1, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  }
+  #c() {
+    this.tabIndex = this.disabled ? -1 : this.tabIndex < 0 ? 0 : this.tabIndex, this.#e.checked = this.checked, this.#e.indeterminate = this.indeterminate, this.#e.disabled = this.disabled, this.#e.required = this.required, this.#e.name = this.#t, this.#e.value = this.#r, this.#b(), this.#y();
+  }
+  #b() {
+    this.#o.replaceChildren(this.#u());
+  }
+  #u() {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    if (e.setAttribute("data-ty-checkbox-mark", ""), e.setAttribute("viewBox", "0 0 12 12"), e.setAttribute("aria-hidden", "true"), e.setAttribute("fill", "currentColor"), this.indeterminate) {
+      const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+      t.setAttribute("x", "2"), t.setAttribute("y", "2"), t.setAttribute("width", "8"), t.setAttribute("height", "8"), t.setAttribute("rx", "1"), e.append(t);
+    } else {
+      const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      t.setAttribute(
+        "d",
+        "M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+      ), e.append(t);
+    }
+    return e;
+  }
+  #y() {
+    if (this.#i?.setFormValue(
+      !this.disabled && this.checked && !this.indeterminate ? this.#r : null
+    ), this.required && !this.disabled && !this.checked) {
+      this.#i?.setValidity({ valueMissing: !0 }, "This field is required.", this.#e);
+      return;
+    }
+    this.#i?.setValidity({});
+  }
+}
+export {
+  s as TyuiCheckboxElement
+};

package/cluster/tyui-cluster.d.ts

@@ -0,0 +1,16 @@
+export type TyuiClusterAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type TyuiClusterJustify = 'start' | 'center' | 'end' | 'between';
+export declare class TyuiClusterElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get align(): TyuiClusterAlign;
+    set align(value: TyuiClusterAlign);
+    get justify(): TyuiClusterJustify;
+    set justify(value: TyuiClusterJustify);
+    get gap(): string;
+    set gap(value: string);
+    get rowGap(): string | null;
+    set rowGap(value: string | null);
+}

package/cluster.d.ts

@@ -0,0 +1 @@
+export * from './cluster/tyui-cluster';

package/cluster.js

@@ -0,0 +1,53 @@
+import { i as r, n as i, s as e, b as a, a as s } from "./layout-helpers-C2WgKm6F.js";
+const n = ["start", "center", "end", "baseline", "stretch"], l = ["start", "center", "end", "between"], u = {
+  baseline: "baseline",
+  center: "center",
+  end: "flex-end",
+  start: "flex-start",
+  stretch: "stretch"
+}, g = {
+  between: "space-between",
+  center: "center",
+  end: "flex-end",
+  start: "flex-start"
+};
+class o extends HTMLElement {
+  static observedAttributes = ["align", "gap", "justify", "row-gap"];
+  connectedCallback() {
+    r(), this.#t();
+  }
+  attributeChangedCallback() {
+    this.#t();
+  }
+  get align() {
+    return i(this.getAttribute("align"), n, "center");
+  }
+  set align(t) {
+    e(this, "align", t);
+  }
+  get justify() {
+    return i(this.getAttribute("justify"), l, "start");
+  }
+  set justify(t) {
+    e(this, "justify", t);
+  }
+  get gap() {
+    return this.getAttribute("gap") ?? "2";
+  }
+  set gap(t) {
+    e(this, "gap", t);
+  }
+  get rowGap() {
+    return this.getAttribute("row-gap");
+  }
+  set rowGap(t) {
+    t === null ? this.removeAttribute("row-gap") : e(this, "row-gap", t);
+  }
+  #t() {
+    const t = a(this.getAttribute("gap"), "2");
+    s(this, "--ty-cluster-align", u[this.align]), s(this, "--ty-cluster-justify", g[this.justify]), s(this, "--ty-cluster-gap", t), s(this, "--ty-cluster-row-gap", this.rowGap ? a(this.rowGap, "2") : t);
+  }
+}
+export {
+  o as TyuiClusterElement
+};

package/container/tyui-container.d.ts

@@ -0,0 +1,14 @@
+export type TyuiContainerSize = 'narrow' | 'medium' | 'wide' | 'full';
+export type TyuiContainerGutter = '0' | '1' | '2' | '3' | '4' | 'page';
+export declare class TyuiContainerElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get size(): TyuiContainerSize;
+    set size(value: TyuiContainerSize);
+    get gutter(): TyuiContainerGutter;
+    set gutter(value: TyuiContainerGutter);
+    get bleed(): boolean;
+    set bleed(value: boolean);
+}

package/container.d.ts

@@ -0,0 +1 @@
+export * from './container/tyui-container';

package/container.js

@@ -0,0 +1,44 @@
+import { i as n, n as i, s as t, a as s, b as u } from "./layout-helpers-C2WgKm6F.js";
+const l = ["narrow", "medium", "wide", "full"], a = ["0", "1", "2", "3", "4", "page"], o = {
+  full: "none",
+  medium: "var(--ty-container-medium, 60rem)",
+  narrow: "var(--ty-container-narrow, 42rem)",
+  wide: "var(--ty-container-wide, 72rem)"
+};
+function c(r) {
+  const e = i(r, a, "page");
+  return e === "page" ? "var(--ty-page-gutter, 1rem)" : u(e, "3");
+}
+class d extends HTMLElement {
+  static observedAttributes = ["bleed", "gutter", "size"];
+  connectedCallback() {
+    n(), this.#e();
+  }
+  attributeChangedCallback() {
+    this.#e();
+  }
+  get size() {
+    return i(this.getAttribute("size"), l, "wide");
+  }
+  set size(e) {
+    t(this, "size", e);
+  }
+  get gutter() {
+    return i(this.getAttribute("gutter"), a, "page");
+  }
+  set gutter(e) {
+    t(this, "gutter", e);
+  }
+  get bleed() {
+    return this.hasAttribute("bleed");
+  }
+  set bleed(e) {
+    t(this, "bleed", e);
+  }
+  #e() {
+    s(this, "--ty-container-max-inline-size", o[this.size]), s(this, "--ty-container-gutter", this.bleed ? "0" : c(this.gutter));
+  }
+}
+export {
+  d as TyuiContainerElement
+};