@toyu-ui/elements 0.1.0

package/flex/tyui-flex.d.ts

@@ -0,0 +1,22 @@
+export type TyuiFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type TyuiFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type TyuiFlexAlign = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+export type TyuiFlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export declare class TyuiFlexElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get direction(): TyuiFlexDirection;
+    set direction(value: TyuiFlexDirection);
+    get wrap(): TyuiFlexWrap;
+    set wrap(value: TyuiFlexWrap);
+    get align(): TyuiFlexAlign;
+    set align(value: TyuiFlexAlign);
+    get justify(): TyuiFlexJustify;
+    set justify(value: TyuiFlexJustify);
+    get gap(): string;
+    set gap(value: string);
+    get inline(): boolean;
+    set inline(value: boolean);
+}

package/flex.d.ts

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

package/flex.js

@@ -0,0 +1,66 @@
+import { i as n, n as s, s as e, a as i, b as r } from "./layout-helpers-C2WgKm6F.js";
+const a = ["row", "row-reverse", "column", "column-reverse"], l = ["nowrap", "wrap", "wrap-reverse"], c = ["stretch", "start", "center", "end", "baseline"], u = ["start", "center", "end", "between", "around", "evenly"], h = {
+  baseline: "baseline",
+  center: "center",
+  end: "flex-end",
+  start: "flex-start",
+  stretch: "stretch"
+}, o = {
+  around: "space-around",
+  between: "space-between",
+  center: "center",
+  end: "flex-end",
+  evenly: "space-evenly",
+  start: "flex-start"
+};
+class y extends HTMLElement {
+  static observedAttributes = ["align", "direction", "gap", "inline", "justify", "wrap"];
+  connectedCallback() {
+    n(), this.#t();
+  }
+  attributeChangedCallback() {
+    this.#t();
+  }
+  get direction() {
+    return s(this.getAttribute("direction"), a, "row");
+  }
+  set direction(t) {
+    e(this, "direction", t);
+  }
+  get wrap() {
+    return s(this.getAttribute("wrap"), l, "nowrap");
+  }
+  set wrap(t) {
+    e(this, "wrap", t);
+  }
+  get align() {
+    return s(this.getAttribute("align"), c, "stretch");
+  }
+  set align(t) {
+    e(this, "align", t);
+  }
+  get justify() {
+    return s(this.getAttribute("justify"), u, "start");
+  }
+  set justify(t) {
+    e(this, "justify", t);
+  }
+  get gap() {
+    return this.getAttribute("gap") ?? "3";
+  }
+  set gap(t) {
+    e(this, "gap", t);
+  }
+  get inline() {
+    return this.hasAttribute("inline");
+  }
+  set inline(t) {
+    e(this, "inline", t);
+  }
+  #t() {
+    i(this, "--ty-flex-display", this.inline ? "inline-flex" : "flex"), i(this, "--ty-flex-direction", this.direction), i(this, "--ty-flex-wrap", this.wrap), i(this, "--ty-flex-align", h[this.align]), i(this, "--ty-flex-justify", o[this.justify]), i(this, "--ty-flex-gap", r(this.getAttribute("gap"), "3"));
+  }
+}
+export {
+  y as TyuiFlexElement
+};

package/frame/tyui-frame.d.ts

@@ -0,0 +1,13 @@
+export type TyuiFrameFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none';
+export declare class TyuiFrameElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get ratio(): string;
+    set ratio(value: string);
+    get fit(): TyuiFrameFit;
+    set fit(value: TyuiFrameFit);
+    get position(): string;
+    set position(value: string);
+}

package/frame.d.ts

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

package/frame.js

@@ -0,0 +1,35 @@
+import { i as s, s as i, n as r, a as e, r as o } from "./layout-helpers-C2WgKm6F.js";
+const a = ["cover", "contain", "fill", "scale-down", "none"];
+class c extends HTMLElement {
+  static observedAttributes = ["fit", "position", "ratio"];
+  connectedCallback() {
+    s(), this.#t();
+  }
+  attributeChangedCallback() {
+    this.#t();
+  }
+  get ratio() {
+    return this.getAttribute("ratio") ?? "16/9";
+  }
+  set ratio(t) {
+    i(this, "ratio", t);
+  }
+  get fit() {
+    return r(this.getAttribute("fit"), a, "cover");
+  }
+  set fit(t) {
+    i(this, "fit", t);
+  }
+  get position() {
+    return this.getAttribute("position") ?? "center";
+  }
+  set position(t) {
+    i(this, "position", t);
+  }
+  #t() {
+    e(this, "--ty-frame-ratio", o(this.ratio, "16 / 9")), e(this, "--ty-frame-fit", this.fit), e(this, "--ty-frame-position", this.position.trim() || "center");
+  }
+}
+export {
+  c as TyuiFrameElement
+};

package/grid/tyui-grid.d.ts

@@ -0,0 +1,20 @@
+export type TyuiGridAlign = 'stretch' | 'start' | 'center' | 'end';
+export type TyuiGridJustify = 'stretch' | 'start' | 'center' | 'end';
+export declare class TyuiGridElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get minItemSize(): string;
+    set minItemSize(value: string);
+    get align(): TyuiGridAlign;
+    set align(value: TyuiGridAlign);
+    get justify(): TyuiGridJustify;
+    set justify(value: TyuiGridJustify);
+    get gap(): string;
+    set gap(value: string);
+    get rowGap(): string | null;
+    set rowGap(value: string | null);
+    get dense(): boolean;
+    set dense(value: boolean);
+}

package/grid.d.ts

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

package/grid.js

@@ -0,0 +1,59 @@
+import { i as g, s as e, n as s, b as r, a as i, l as h } from "./layout-helpers-C2WgKm6F.js";
+const a = ["stretch", "start", "center", "end"], n = {
+  center: "center",
+  end: "end",
+  start: "start",
+  stretch: "stretch"
+};
+class m extends HTMLElement {
+  static observedAttributes = ["align", "dense", "gap", "justify", "min-item-size", "row-gap"];
+  connectedCallback() {
+    g(), this.#t();
+  }
+  attributeChangedCallback() {
+    this.#t();
+  }
+  get minItemSize() {
+    return this.getAttribute("min-item-size") ?? "16rem";
+  }
+  set minItemSize(t) {
+    e(this, "min-item-size", t);
+  }
+  get align() {
+    return s(this.getAttribute("align"), a, "stretch");
+  }
+  set align(t) {
+    e(this, "align", t);
+  }
+  get justify() {
+    return s(this.getAttribute("justify"), a, "stretch");
+  }
+  set justify(t) {
+    e(this, "justify", t);
+  }
+  get gap() {
+    return this.getAttribute("gap") ?? "4";
+  }
+  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);
+  }
+  get dense() {
+    return this.hasAttribute("dense");
+  }
+  set dense(t) {
+    e(this, "dense", t);
+  }
+  #t() {
+    const t = r(this.getAttribute("gap"), "4");
+    i(this, "--ty-grid-min-item-size", h(this.minItemSize, "16rem")), i(this, "--ty-grid-align", n[this.align]), i(this, "--ty-grid-justify", n[this.justify]), i(this, "--ty-grid-gap", t), i(this, "--ty-grid-row-gap", this.rowGap ? r(this.rowGap, "4") : t), i(this, "--ty-grid-auto-flow", this.dense ? "row dense" : "row");
+  }
+}
+export {
+  m as TyuiGridElement
+};

package/index.d.ts

@@ -0,0 +1,12 @@
+export * from './button';
+export * from './center';
+export * from './checkbox';
+export * from './cluster';
+export * from './container';
+export * from './flex';
+export * from './frame';
+export * from './grid';
+export * from './input';
+export * from './radio';
+export * from './radio-group';
+export * from './sidebar';

package/index.js

@@ -0,0 +1,26 @@
+import { TyuiButtonElement as o } from "./button.js";
+import { TyuiCenterElement as m } from "./center.js";
+import { TyuiCheckboxElement as n } from "./checkbox.js";
+import { TyuiClusterElement as l } from "./cluster.js";
+import { TyuiContainerElement as x } from "./container.js";
+import { TyuiFlexElement as y } from "./flex.js";
+import { TyuiFrameElement as T } from "./frame.js";
+import { TyuiGridElement as d } from "./grid.js";
+import { TyuiInputElement as b } from "./input.js";
+import { TyuiRadioElement as G } from "./radio.js";
+import { TyuiRadioGroupElement as c } from "./radio-group.js";
+import { TyuiSidebarElement as k } from "./sidebar.js";
+export {
+  o as TyuiButtonElement,
+  m as TyuiCenterElement,
+  n as TyuiCheckboxElement,
+  l as TyuiClusterElement,
+  x as TyuiContainerElement,
+  y as TyuiFlexElement,
+  T as TyuiFrameElement,
+  d as TyuiGridElement,
+  b as TyuiInputElement,
+  G as TyuiRadioElement,
+  c as TyuiRadioGroupElement,
+  k as TyuiSidebarElement
+};

package/input/tyui-input.d.ts

@@ -0,0 +1,40 @@
+export type TyuiInputAppearance = 'outline' | 'filled-darker' | 'filled-lighter';
+export type TyuiInputSize = 'small' | 'medium' | 'large';
+export type TyuiInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+export type TyuiInputEventDetail = {
+    value: string;
+};
+export type TyuiInputEvent = CustomEvent<TyuiInputEventDetail>;
+export declare class TyuiInputElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    get appearance(): TyuiInputAppearance;
+    set appearance(value: TyuiInputAppearance);
+    get defaultValue(): string;
+    set defaultValue(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get size(): TyuiInputSize;
+    set size(value: TyuiInputSize);
+    get type(): TyuiInputType;
+    set type(value: TyuiInputType);
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    focus(options?: FocusOptions): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+}

package/input.d.ts

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

package/input.js

@@ -0,0 +1,345 @@
+const s = new CSSStyleSheet();
+s.replaceSync(`
+  @layer ty.component-base {
+    :host {
+      display: inline-block;
+      color: var(--ty-input-foreground, var(--ty-color-text, FieldText));
+      font-family: var(--ty-font-family, inherit);
+      font-size: var(--ty-input-font-size, var(--ty-control-font-size, 0.875rem));
+      --_ty-input-icon-size: 1.25rem;
+    }
+
+    :host([size='small']) {
+      --ty-input-min-block-size: 1.5rem;
+      --ty-input-padding-inline: var(--ty-space-2, 0.5rem);
+      --ty-input-padding-block: var(--ty-space-1, 0.25rem);
+      --ty-input-font-size: var(--ty-font-size-100, 0.75rem);
+      --ty-input-gap: var(--ty-space-1, 0.25rem);
+      --_ty-input-icon-size: 1rem;
+    }
+
+    :host(:not([size='small']):not([size='large'])),
+    :host([size='medium']) {
+      --ty-input-min-block-size: 2rem;
+      --ty-input-padding-inline: var(--ty-space-3, 0.75rem);
+      --ty-input-padding-block: var(--ty-space-2, 0.5rem);
+      --ty-input-font-size: var(--ty-font-size-200, 0.875rem);
+      --ty-input-gap: var(--ty-space-1, 0.25rem);
+      --_ty-input-icon-size: 1.25rem;
+    }
+
+    :host([size='large']) {
+      --ty-input-min-block-size: 2.5rem;
+      --ty-input-padding-inline: var(--ty-space-4, 1rem);
+      --ty-input-padding-block: var(--ty-space-3, 0.75rem);
+      --ty-input-font-size: var(--ty-font-size-300, 1rem);
+      --ty-input-gap: var(--ty-space-2, 0.5rem);
+      --_ty-input-icon-size: 1.5rem;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    [part='control'] {
+      position: relative;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: var(--ty-input-gap, var(--ty-control-gap, 0.25rem));
+      min-block-size: var(--ty-input-min-block-size, var(--ty-control-min-block-size, 2rem));
+      min-inline-size: var(--ty-input-min-inline-size, 12.5rem);
+      padding-inline: var(--ty-input-padding-inline, var(--ty-control-padding-inline, 0.75rem));
+      border:
+        var(--ty-input-border-width, var(--ty-control-border-width, 1px))
+        solid
+        var(--ty-input-border-color, var(--ty-color-border, ButtonBorder));
+      border-radius: var(--ty-input-radius, var(--ty-control-radius, 0.5rem));
+      background: var(--ty-input-background, var(--ty-color-surface, Field));
+      color: var(--ty-input-foreground, var(--ty-color-text, FieldText));
+      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),
+        box-shadow var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease);
+    }
+
+    :host([appearance='filled-darker']) [part='control'] {
+      --ty-input-background: var(--ty-input-background-filled-darker, var(--ty-color-surface-pressed, Field));
+      --ty-input-border-color: transparent;
+    }
+
+    :host([appearance='filled-lighter']) [part='control'] {
+      --ty-input-background: var(--ty-input-background-filled-lighter, var(--ty-color-surface-hover, Field));
+      --ty-input-border-color: transparent;
+    }
+
+    [part='control']:hover:not(:has(input:disabled)) {
+      border-color: var(--ty-input-border-color-strong, var(--ty-color-border-strong, ButtonText));
+    }
+
+    [part='control']:focus-within {
+      outline: var(--ty-focus-width, 2px) solid var(--ty-input-focus-indicator-color, var(--ty-focus-color, Highlight));
+      outline-offset: var(--ty-focus-offset, 2px);
+      box-shadow: 0 0 0 2px var(--ty-focus-inner-color, Canvas);
+    }
+
+    :host([invalid]) [part='control'] {
+      border-color: var(--ty-input-invalid-border-color, var(--ty-color-danger, Mark));
+    }
+
+    [part='input'] {
+      all: unset;
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      min-inline-size: 0;
+      padding-block: var(--ty-input-padding-block, var(--ty-control-padding-block, 0.5rem));
+      color: inherit;
+      font: inherit;
+      background: transparent;
+    }
+
+    [part='input']::placeholder {
+      color: var(--ty-input-placeholder-color, var(--ty-color-text-muted, GrayText));
+      opacity: 1;
+    }
+
+    [part='input']:disabled {
+      color: var(--ty-input-disabled-foreground, var(--ty-color-disabled-text, GrayText));
+      cursor: not-allowed;
+    }
+
+    [part='content-before'],
+    [part='content-after'] {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      color: var(--ty-input-content-color, var(--ty-color-text-muted, GrayText));
+    }
+
+    ::slotted(svg),
+    ::slotted([slot='contentBefore']),
+    ::slotted([slot='contentAfter']) {
+      max-inline-size: var(--_ty-input-icon-size, 1.25rem);
+      max-block-size: var(--_ty-input-icon-size, 1.25rem);
+    }
+
+    @media (forced-colors: active) {
+      [part='control'] {
+        forced-color-adjust: none;
+        background: Field;
+        border-color: FieldText;
+        color: FieldText;
+      }
+
+      :host([disabled]) [part='control'],
+      [part='input']:disabled {
+        color: GrayText;
+      }
+
+      [part='control']:focus-within {
+        outline-color: Highlight;
+        box-shadow: none;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [part='control'] {
+        transition-duration: 0ms;
+      }
+    }
+  }
+`);
+const o = document.createElement("template");
+o.innerHTML = `
+  <span part="control">
+    <span part="content-before"><slot name="contentBefore"></slot></span>
+    <input part="input" />
+    <span part="content-after"><slot name="contentAfter"></slot></span>
+  </span>
+`;
+function n(i, t, e) {
+  return t.includes(i) ? i : e;
+}
+function a(i, t) {
+  return i.hasAttribute(t);
+}
+class l extends HTMLElement {
+  static formAssociated = !0;
+  static observedAttributes = [
+    "appearance",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-label",
+    "aria-labelledby",
+    "default-value",
+    "disabled",
+    "invalid",
+    "name",
+    "placeholder",
+    "readonly",
+    "required",
+    "size",
+    "type",
+    "value"
+  ];
+  #t;
+  #n;
+  #c = !1;
+  #o = !1;
+  #s = !1;
+  #e = "";
+  #i = "";
+  #a = "";
+  #r = "";
+  constructor() {
+    super();
+    const t = this.attachShadow({ mode: "open", delegatesFocus: !0 });
+    t.adoptedStyleSheets = [s], t.append(o.content.cloneNode(!0));
+    const e = t.querySelector("input");
+    if (!(e instanceof HTMLInputElement))
+      throw new Error("TyuiInputElement template is missing its input.");
+    this.#t = e, this.#t.addEventListener("input", this.#f), this.#t.addEventListener("change", this.#m), this.#n = this.#p();
+  }
+  get appearance() {
+    return n(
+      this.getAttribute("appearance"),
+      ["outline", "filled-darker", "filled-lighter"],
+      "outline"
+    );
+  }
+  set appearance(t) {
+    this.setAttribute("appearance", t);
+  }
+  get defaultValue() {
+    return this.#i;
+  }
+  set defaultValue(t) {
+    this.#i = String(t), this.setAttribute("default-value", this.#i);
+  }
+  get disabled() {
+    return a(this, "disabled");
+  }
+  set disabled(t) {
+    this.toggleAttribute("disabled", t);
+  }
+  get invalid() {
+    return a(this, "invalid");
+  }
+  set invalid(t) {
+    this.toggleAttribute("invalid", t);
+  }
+  get name() {
+    return this.#a;
+  }
+  set name(t) {
+    this.#a = String(t), this.#a ? this.setAttribute("name", this.#a) : this.removeAttribute("name");
+  }
+  get placeholder() {
+    return this.#r;
+  }
+  set placeholder(t) {
+    this.#r = String(t), this.#r ? this.setAttribute("placeholder", this.#r) : this.removeAttribute("placeholder");
+  }
+  get readonly() {
+    return a(this, "readonly");
+  }
+  set readonly(t) {
+    this.toggleAttribute("readonly", t);
+  }
+  get required() {
+    return a(this, "required");
+  }
+  set required(t) {
+    this.toggleAttribute("required", t);
+  }
+  get size() {
+    return n(this.getAttribute("size"), ["small", "medium", "large"], "medium");
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get type() {
+    return n(
+      this.getAttribute("type"),
+      ["text", "email", "password", "search", "tel", "url", "number"],
+      "text"
+    );
+  }
+  set type(t) {
+    this.setAttribute("type", t);
+  }
+  get value() {
+    return this.#e;
+  }
+  set value(t) {
+    this.#l(String(t));
+  }
+  connectedCallback() {
+    this.#y(), this.#b(), this.#v(), this.#u();
+  }
+  attributeChangedCallback(t, e, r) {
+    t === "invalid" && this.#s || (t === "value" ? this.#l(r ?? "") : t === "default-value" ? this.#i = r ?? "" : t === "name" ? this.#a = r ?? "" : t === "placeholder" && (this.#r = r ?? ""), this.#u());
+  }
+  focus(t) {
+    this.#t.focus(t);
+  }
+  checkValidity() {
+    return this.#n?.checkValidity() ?? this.#t.checkValidity();
+  }
+  reportValidity() {
+    return this.#n?.reportValidity() ?? this.#t.reportValidity();
+  }
+  #p() {
+    if (!("attachInternals" in this)) return null;
+    try {
+      return this.attachInternals();
+    } catch {
+      return null;
+    }
+  }
+  #y() {
+    this.#e = this.getAttribute("value") ?? this.#e, this.#i = this.getAttribute("default-value") ?? this.#i, this.#a = this.getAttribute("name") ?? this.#a, this.#r = this.getAttribute("placeholder") ?? this.#r;
+  }
+  #b() {
+    this.#c || (this.#c = !0, !this.#e && this.#i && (this.#e = this.#i));
+  }
+  #v() {
+    this.hasAttribute("appearance") || this.setAttribute("appearance", "outline"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("type") || this.setAttribute("type", "text");
+  }
+  #f = (t) => {
+    t.stopPropagation(), this.#l(this.#t.value), this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.#e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  };
+  #m = (t) => {
+    t.stopPropagation(), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  };
+  #l(t) {
+    this.#e = t, this.#u();
+  }
+  #u() {
+    this.#t.value = this.#e, this.#t.type = this.type, this.#t.placeholder = this.#r, this.#t.disabled = this.disabled, this.#t.readOnly = this.readonly, this.#t.required = this.required, this.#d("aria-label"), this.#d("aria-labelledby"), this.#d("aria-describedby"), this.invalid ? this.#t.setAttribute("aria-invalid", "true") : this.getAttribute("aria-invalid") === "true" ? this.#t.setAttribute("aria-invalid", "true") : this.#t.removeAttribute("aria-invalid"), this.#g();
+  }
+  #d(t) {
+    const e = this.getAttribute(t);
+    e === null || e === "" ? this.#t.removeAttribute(t) : this.#t.setAttribute(t, e);
+  }
+  #g() {
+    if (this.#n?.setFormValue(this.disabled ? null : this.#e), this.required && !this.disabled && this.#e.length === 0) {
+      this.#n?.setValidity({ valueMissing: !0 }, "This field is required.", this.#t), this.#o = !0, this.#h(!0);
+      return;
+    }
+    this.#n?.setValidity({}), this.#o && (this.#o = !1, this.#h(!1));
+  }
+  #h(t) {
+    this.#s || (this.#s = !0, this.toggleAttribute("invalid", t), this.#s = !1);
+  }
+}
+export {
+  l as TyuiInputElement
+};

package/layout/layout-helpers.d.ts

@@ -0,0 +1,9 @@
+export type TyuiSpace = '0' | '1' | '2' | '3' | '4';
+export declare const tyuiLayoutStylesText = "\n  @layer reset, tokens, product-theme, components, product-components, utilities, overrides;\n\n  @layer utilities {\n    .ty-flex,\n    tyui-flex {\n      box-sizing: border-box;\n      display: var(--ty-flex-display, flex);\n      flex-direction: var(--ty-flex-direction, row);\n      flex-wrap: var(--ty-flex-wrap, nowrap);\n      align-items: var(--ty-flex-align, stretch);\n      justify-content: var(--ty-flex-justify, flex-start);\n      gap: var(--ty-flex-gap, var(--ty-layout-gap, var(--ty-space-3, 0.75rem)));\n    }\n\n    .ty-cluster,\n    tyui-cluster {\n      box-sizing: border-box;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: var(--ty-cluster-align, center);\n      justify-content: var(--ty-cluster-justify, flex-start);\n      gap:\n        var(--ty-cluster-row-gap, var(--ty-cluster-gap, var(--ty-space-2, 0.5rem)))\n        var(--ty-cluster-gap, var(--ty-space-2, 0.5rem));\n    }\n\n    .ty-grid,\n    tyui-grid {\n      box-sizing: border-box;\n      display: grid;\n      grid-template-columns: repeat(\n        auto-fit,\n        minmax(min(100%, var(--ty-grid-min-item-size, 16rem)), 1fr)\n      );\n      align-items: var(--ty-grid-align, stretch);\n      justify-items: var(--ty-grid-justify, stretch);\n      grid-auto-flow: var(--ty-grid-auto-flow, row);\n      gap:\n        var(--ty-grid-row-gap, var(--ty-grid-gap, var(--ty-space-4, 1rem)))\n        var(--ty-grid-gap, var(--ty-space-4, 1rem));\n    }\n\n    .ty-center,\n    tyui-center {\n      box-sizing: content-box;\n      display: var(--ty-center-display, block);\n      margin-inline: auto;\n      max-inline-size: var(--ty-center-measure, var(--ty-layout-content-measure, 65ch));\n      padding-inline: var(--ty-center-gutter, var(--ty-page-gutter, 1rem));\n    }\n\n    tyui-center[intrinsic],\n    .ty-center[data-intrinsic='true'] {\n      --ty-center-display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .ty-container,\n    tyui-container {\n      box-sizing: border-box;\n      display: block;\n      inline-size: 100%;\n      max-inline-size: var(--ty-container-max-inline-size, var(--ty-container-wide, 72rem));\n      margin-inline: auto;\n      padding-inline: var(--ty-container-gutter, var(--ty-page-gutter, 1rem));\n    }\n\n    tyui-container[bleed],\n    .ty-container[data-bleed='true'] {\n      max-inline-size: none;\n      padding-inline: 0;\n    }\n\n    .ty-frame,\n    tyui-frame {\n      box-sizing: border-box;\n      aspect-ratio: var(--ty-frame-ratio, 16 / 9);\n      display: block;\n      overflow: hidden;\n    }\n\n    .ty-frame > *,\n    tyui-frame > * {\n      box-sizing: border-box;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n\n    .ty-frame > img,\n    .ty-frame > video,\n    .ty-frame > iframe,\n    .ty-frame > canvas,\n    tyui-frame > img,\n    tyui-frame > video,\n    tyui-frame > iframe,\n    tyui-frame > canvas {\n      object-fit: var(--ty-frame-fit, cover);\n      object-position: var(--ty-frame-position, center);\n    }\n\n    .ty-sidebar,\n    tyui-sidebar {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: var(--ty-sidebar-direction, row);\n      flex-wrap: wrap;\n      align-items: var(--ty-sidebar-align, stretch);\n      gap: var(--ty-sidebar-gap, var(--ty-layout-gap, var(--ty-space-3, 0.75rem)));\n    }\n\n    .ty-sidebar > :first-child,\n    tyui-sidebar > :first-child {\n      flex-basis: var(--ty-sidebar-size, 18rem);\n      flex-grow: 1;\n    }\n\n    .ty-sidebar > :last-child,\n    tyui-sidebar > :last-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-inline-size: min(100%, var(--ty-sidebar-content-min-inline-size, 50%));\n    }\n  }\n";
+export declare function installTyuiLayoutStyles(): void;
+export declare function normalizeAttribute<T extends string>(value: string | null, allowed: readonly T[], fallback: T): T;
+export declare function setReflectedAttribute(element: HTMLElement, name: string, value: string | boolean): void;
+export declare function spaceValue(value: string | null, fallback: TyuiSpace): string;
+export declare function lengthOrFallback(value: string | null, fallback: string): string;
+export declare function ratioOrFallback(value: string | null, fallback: string): string;
+export declare function setStyleVar(element: HTMLElement, name: string, value: string): void;