@telepath-computer/television 0.1.116 → 0.1.118

package/dist/canonical/v1/components.js

@@ -0,0 +1,157 @@
+// Artifact-safe custom elements bundled for /canonical/v1/components.js.
+// Keep this entrypoint small: artifacts import it in sandboxed iframes.
+const CHECK_ICON = `
+  <svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+    <path d="M10.2 3.1 5.1 8.2 2.4 5.5" />
+  </svg>
+`;
+const LIST_STYLES = `
+  :host {
+    display: block;
+    margin: var(--checkbox-list-margin, var(--space-12) 0);
+  }
+
+  [part~="list"] {
+    display: grid;
+    gap: var(--checkbox-list-gap, var(--space-6));
+  }
+`;
+const ITEM_STYLES = `
+  :host {
+    display: block;
+    --checkbox-size: 1em;
+    --checkbox-gap: var(--space-8);
+    --checkbox-color: var(--color-primary);
+    --checkbox-border-color: var(--color-border);
+    --checkbox-bg: transparent;
+    --checkbox-check-color: var(--color-bg);
+    --checkbox-checked-content-color: var(--color-text-muted);
+    --checkbox-checked-decoration: line-through;
+    --checkbox-checked-decoration-thickness: 0.08em;
+  }
+
+  [part~="label"] {
+    display: grid;
+    grid-template-columns: var(--checkbox-size) minmax(0, 1fr);
+    gap: var(--checkbox-gap);
+    align-items: baseline;
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+  }
+
+  [part~="box"] {
+    display: inline-grid;
+    place-items: center;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    border: 1px solid var(--checkbox-border-color);
+    border-radius: var(--checkbox-radius, var(--radius-4));
+    background: var(--checkbox-bg);
+    color: var(--checkbox-check-color);
+    transform: translateY(0.12em);
+    cursor: not-allowed;
+  }
+
+  [part~="check"] {
+    display: block;
+    width: calc(var(--checkbox-size) * 0.72);
+    height: calc(var(--checkbox-size) * 0.72);
+    opacity: 0;
+  }
+
+  [part~="check"] svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  [part~="check"] path {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  [part~="content"] {
+    min-width: 0;
+  }
+
+  :host([checked]) [part~="box"] {
+    border-color: var(--checkbox-color);
+    background: var(--checkbox-color);
+  }
+
+  :host([checked]) [part~="check"] {
+    opacity: 1;
+  }
+
+  :host([checked]) [part~="content"] {
+    color: var(--checkbox-checked-content-color);
+    text-decoration-line: var(--checkbox-checked-decoration);
+    text-decoration-thickness: var(--checkbox-checked-decoration-thickness);
+  }
+`;
+export class CheckboxListElement extends HTMLElement {
+    #root;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+        this.#root.innerHTML = `<style>${LIST_STYLES}</style><div part="list"><slot></slot></div>`;
+    }
+    connectedCallback() {
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "list");
+        }
+    }
+}
+export class CheckboxItemElement extends HTMLElement {
+    static observedAttributes = ["checked"];
+    #root;
+    #input;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+        this.#root.innerHTML = `
+      <style>${ITEM_STYLES}</style>
+      <label part="label">
+        <input type="checkbox" disabled tabindex="-1">
+        <span part="box"><span part="check">${CHECK_ICON}</span></span>
+        <span part="content"><slot></slot></span>
+      </label>
+    `;
+        const input = this.#root.querySelector("input");
+        if (!(input instanceof HTMLInputElement)) {
+            throw new Error("checkbox-item failed to initialize input");
+        }
+        this.#input = input;
+    }
+    connectedCallback() {
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "listitem");
+        }
+        this.setAttribute("aria-disabled", "true");
+        this.#syncChecked();
+    }
+    attributeChangedCallback() {
+        this.#syncChecked();
+    }
+    #syncChecked() {
+        const checked = this.hasAttribute("checked");
+        this.#input.checked = checked;
+        this.setAttribute("aria-checked", checked ? "true" : "false");
+    }
+}
+if (!customElements.get("checkbox-list")) {
+    customElements.define("checkbox-list", CheckboxListElement);
+}
+if (!customElements.get("checkbox-item")) {
+    customElements.define("checkbox-item", CheckboxItemElement);
+}
+