@threadlabs/looma 0.28.4 → 0.28.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.4",
+  "version": "0.28.5",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-editor-image-toolbar.css

@@ -0,0 +1 @@
+/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */

package/vanilla/UiEditorImageToolbar.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+export interface UiEditorImageToolbarEventMap {
+  placement: CustomEvent<{ readonly placement: "block" | "center" | "wrap-left" | "wrap-right" }>;
+  describe: CustomEvent<{ readonly alt: string }>;
+  delete: CustomEvent<Readonly<Record<string, unknown>>>;
+}
+export interface UiEditorImageToolbarElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiEditorImageToolbarEventMap>(type: K, listener: (this: UiEditorImageToolbarElement, event: UiEditorImageToolbarEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorImageToolbarEventMap>(type: K, listener: (this: UiEditorImageToolbarElement, event: UiEditorImageToolbarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorImageToolbarProps {
+  alt?: string | null;
+  placement?: "block" | "center" | "wrap-left" | "wrap-right" | null;
+  target?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorImageToolbar(props?: UiEditorImageToolbarProps): UiEditorImageToolbarElement;

package/vanilla/UiEditorImageToolbar.js

@@ -0,0 +1,171 @@
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, NONCONFORMING, readIndex, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, checkConstrained, checkFormat, checkObject, checkRecord, checkString, checkUnknown } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-editor-image-toolbar/ui-editor-image-toolbar.js";
+import "../styles/ui-editor-image-toolbar.css";
+
+const T0 = ["",[],["ui-text",["as","div","font","sans"],["ui-editor-toolbar",["aria-label","Image actions"],["ui-icon-button",["label","Image in line","size","sm","data-image-placement","block"],["ui-icon",["name","panel-top","size","sm"]]],["ui-icon-button",["label","Center image","size","sm","data-image-placement","center"],["ui-icon",["name","align-center","size","sm"]]],["ui-icon-button",["label","Wrap text to the right","size","sm","data-image-placement","wrap-left"],["ui-icon",["name","panel-left","size","sm"]]],["ui-icon-button",["label","Wrap text to the left","size","sm","data-image-placement","wrap-right"],["ui-icon",["name","panel-right","size","sm"]]],["ui-icon-button",["label","Image description","size","sm","variant","ghost"],["ui-icon",["name","file-text","size","sm"]]],["ui-icon-button",["label","Delete image","size","sm","variant","ghost","data-image-action","delete"],["ui-icon",["name","trash","size","sm"]]]],["ui-tooltip",[],"Image in line"],["ui-tooltip",[],"Center image"],["ui-tooltip",[],"Wrap text to the right"],["ui-tooltip",[],"Wrap text to the left"],["ui-tooltip",[],"Image description"],["ui-tooltip",[],"Delete image"],["ui-popover",["data-image-description","","size","sm","aria-label","Image description"],["form",["aria-label","Image description"],["ui-stack",["gap","s"],["ui-form-field",[],["label",["slot","label"],"Alt text"],["ui-input",["data-image-alt","","size","sm"]]],["ui-text",["size","xs","tone","secondary"],"Describe the image for people using a screen reader."],["ui-cluster",["justify","end","gap","xs"],["ui-button",["type","button","variant","ghost","tone","neutral","size","sm","data-image-action","cancel"],"Cancel"],["ui-button",["type","submit","variant","solid","size","sm"],"Save"]]]]]]];
+let P0;
+const S = { n: ["base","describing","draft"], t: ["s","b","s"], f: import.meta.url, g: "ui-editor-image-toolbar", d: { "placement": [detailCheck(checkObject([["placement", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["block","center","wrap-left","wrap-right"]}), false]], false)), true, true, false], "describe": [detailCheck(checkObject([["alt", checkString, false]], false)), true, true, false], "delete": [detailCheck(checkRecord(checkUnknown)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "alt": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "placement": { "required":false,"values":["block","center","wrap-left","wrap-right"],"default":"block", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "target": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
+
+export function createUiEditorImageToolbar(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-image-toolbar");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = ["ui-editor-image-toolbar", false, "", null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c === -1) {
+      const x0 = true;
+      const s0 = toAttribute(x0, "floating");
+      if (s0 !== r.v0) writeAttribute(r.a0, "floating", r.v0 = s0);
+    }
+    if (c & 1) {
+      const x1 = textCall("concat", [v[0], "-block"]);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "id");
+        if (s1 !== r.v1) writeAttribute(r.a1, "id", r.v1 = s1);
+      }
+      const x2 = textCall("concat", [v[0], "-center"]);
+      if (x2 !== NONCONFORMING) {
+        const s4 = toAttribute(x2, "id");
+        if (s4 !== r.v4) writeAttribute(r.a2, "id", r.v4 = s4);
+      }
+      const x3 = textCall("concat", [v[0], "-wrap-left"]);
+      if (x3 !== NONCONFORMING) {
+        const s7 = toAttribute(x3, "id");
+        if (s7 !== r.v7) writeAttribute(r.a3, "id", r.v7 = s7);
+      }
+      const x4 = textCall("concat", [v[0], "-wrap-right"]);
+      if (x4 !== NONCONFORMING) {
+        const s10 = toAttribute(x4, "id");
+        if (s10 !== r.v10) writeAttribute(r.a4, "id", r.v10 = s10);
+      }
+      const x5 = v[0];
+      const s13 = toAttribute(x5, "id");
+      if (s13 !== r.v13) writeAttribute(r.a5, "id", r.v13 = s13);
+      const x6 = textCall("concat", [v[0], "-delete"]);
+      if (x6 !== NONCONFORMING) {
+        const s14 = toAttribute(x6, "id");
+        if (s14 !== r.v14) writeAttribute(r.a6, "id", r.v14 = s14);
+      }
+      if (x1 !== NONCONFORMING) {
+        const s15 = toAttribute(x1, "for");
+        if (s15 !== r.v15) writeAttribute(r.a7, "for", r.v15 = s15);
+      }
+      if (x2 !== NONCONFORMING) {
+        const s16 = toAttribute(x2, "for");
+        if (s16 !== r.v16) writeAttribute(r.a8, "for", r.v16 = s16);
+      }
+      if (x3 !== NONCONFORMING) {
+        const s17 = toAttribute(x3, "for");
+        if (s17 !== r.v17) writeAttribute(r.a9, "for", r.v17 = s17);
+      }
+      if (x4 !== NONCONFORMING) {
+        const s18 = toAttribute(x4, "for");
+        if (s18 !== r.v18) writeAttribute(r.a10, "for", r.v18 = s18);
+      }
+      const s19 = toAttribute(x5, "for");
+      if (s19 !== r.v19) writeAttribute(r.a11, "for", r.v19 = s19);
+      if (x6 !== NONCONFORMING) {
+        const s20 = toAttribute(x6, "for");
+        if (s20 !== r.v20) writeAttribute(r.a12, "for", r.v20 = s20);
+      }
+      const s21 = toAttribute(x5, "for");
+      if (s21 !== r.v21) writeAttribute(r.a13, "for", r.v21 = s21);
+      const x7 = textCall("concat", [v[0], "-alt"]);
+      if (x7 !== NONCONFORMING) {
+        const s23 = toAttribute(x7, "for");
+        if (s23 !== r.v23) writeAttribute(r.a14, "for", r.v23 = s23);
+      }
+      if (x7 !== NONCONFORMING) {
+        const s24 = toAttribute(x7, "id");
+        if (s24 !== r.v24) writeAttribute(r.a15, "id", r.v24 = s24);
+      }
+    }
+    if (c & 1073741840) {
+      const x8 = readIndex({ "true": "outline", "false": "ghost" }, textCall("concat", [(v[4] === "block")]));
+      if (x8 !== NONCONFORMING) {
+        const s2 = toAttribute(x8, "variant");
+        if (s2 !== r.v2) writeAttribute(r.a1, "variant", r.v2 = s2);
+      }
+      const x9 = readIndex({ "true": "outline", "false": "ghost" }, textCall("concat", [(v[4] === "center")]));
+      if (x9 !== NONCONFORMING) {
+        const s5 = toAttribute(x9, "variant");
+        if (s5 !== r.v5) writeAttribute(r.a2, "variant", r.v5 = s5);
+      }
+      const x10 = readIndex({ "true": "outline", "false": "ghost" }, textCall("concat", [(v[4] === "wrap-left")]));
+      if (x10 !== NONCONFORMING) {
+        const s8 = toAttribute(x10, "variant");
+        if (s8 !== r.v8) writeAttribute(r.a3, "variant", r.v8 = s8);
+      }
+      const x11 = readIndex({ "true": "outline", "false": "ghost" }, textCall("concat", [(v[4] === "wrap-right")]));
+      if (x11 !== NONCONFORMING) {
+        const s11 = toAttribute(x11, "variant");
+        if (s11 !== r.v11) writeAttribute(r.a4, "variant", r.v11 = s11);
+      }
+    }
+    if (c & 16) {
+      const x12 = textCall("concat", [(v[4] === "block")]);
+      if (x12 !== NONCONFORMING) {
+        const s3 = toAttribute(x12, "aria-pressed");
+        if (s3 !== r.v3) writeAttribute(r.a1, "aria-pressed", r.v3 = s3);
+      }
+      const x13 = textCall("concat", [(v[4] === "center")]);
+      if (x13 !== NONCONFORMING) {
+        const s6 = toAttribute(x13, "aria-pressed");
+        if (s6 !== r.v6) writeAttribute(r.a2, "aria-pressed", r.v6 = s6);
+      }
+      const x14 = textCall("concat", [(v[4] === "wrap-left")]);
+      if (x14 !== NONCONFORMING) {
+        const s9 = toAttribute(x14, "aria-pressed");
+        if (s9 !== r.v9) writeAttribute(r.a3, "aria-pressed", r.v9 = s9);
+      }
+      const x15 = textCall("concat", [(v[4] === "wrap-right")]);
+      if (x15 !== NONCONFORMING) {
+        const s12 = toAttribute(x15, "aria-pressed");
+        if (s12 !== r.v12) writeAttribute(r.a4, "aria-pressed", r.v12 = s12);
+      }
+    }
+    if (c & 2) {
+      const x16 = v[1];
+      const s22 = toAttribute(x16, "open");
+      if (s22 !== r.v22) writeAttribute(r.a13, "open", r.v22 = s22);
+    }
+    if (c & 4) {
+      const x17 = v[2];
+      const s25 = toAttribute(x17, "value");
+      if (s25 !== r.v25) writeAttribute(r.a15, "value", r.v25 = s25);
+    }
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t1.firstChild;
+  const t3 = t2.nextSibling;
+  const t4 = t3.nextSibling;
+  const t5 = t4.nextSibling;
+  const t6 = t5.nextSibling;
+  const t7 = t6.nextSibling;
+  const t8 = t1.nextSibling;
+  const t9 = t8.nextSibling;
+  const t10 = t9.nextSibling;
+  const t11 = t10.nextSibling;
+  const t12 = t11.nextSibling;
+  const t13 = t12.nextSibling;
+  const t14 = t13.nextSibling;
+  const t15 = t14.firstChild.firstChild.firstChild;
+  const t16 = t15.firstChild;
+  const t17 = t16.nextSibling;
+  const R = { a0: t1, a1: t2, a2: t3, a3: t4, a4: t5, a5: t6, a6: t7, a7: t8, a8: t9, a9: t10, a10: t11, a11: t12, a12: t13, a13: t14, a14: t16, a15: t17, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, v13: null, v14: null, v15: null, v16: null, v17: null, v18: null, v19: null, v20: null, v21: null, v22: null, v23: null, v24: null, v25: null };
+  const I = { B };
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
+  manageProps(I);
+  return element;
+}

package/vanilla/index.js

@@ -19,6 +19,7 @@ export * from "./UiDescriptionList.js";
 export * from "./UiDialog.js";
 export * from "./UiDisclosure.js";
 export * from "./UiEditable.js";
+export * from "./UiEditorImageToolbar.js";
 export * from "./UiEditorInsertTableGrid.js";
 export * from "./UiEditorMentionMenu.js";
 export * from "./UiEditorMentionMenuItem.js";

package/vue/UiEditorImageToolbar.d.ts

@@ -0,0 +1,54 @@
+import type { PropType } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    alt: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    placement: {
+        type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
+        default: string;
+    };
+    target: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
+    placement: (event: CustomEvent<{
+        readonly placement: "block" | "center" | "wrap-left" | "wrap-right";
+    }>) => any;
+    "update:alt": (value: string) => any;
+    "update:placement": (value: string) => any;
+    describe: (event: CustomEvent<{
+        readonly alt: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    alt: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    placement: {
+        type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
+        default: string;
+    };
+    target: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    onDelete?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
+    onPlacement?: ((event: CustomEvent<{
+        readonly placement: "block" | "center" | "wrap-left" | "wrap-right";
+    }>) => any) | undefined;
+    "onUpdate:alt"?: ((value: string) => any) | undefined;
+    "onUpdate:placement"?: ((value: string) => any) | undefined;
+    onDescribe?: ((event: CustomEvent<{
+        readonly alt: string;
+    }>) => any) | undefined;
+}>, {
+    alt: string | null;
+    target: string | null;
+    placement: "center" | "block" | "wrap-left" | "wrap-right" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiEditorImageToolbar.js

@@ -0,0 +1,2 @@
+import { t as UiEditorImageToolbar_default } from "./chunks/UiEditorImageToolbar.js";
+export { UiEditorImageToolbar_default as default };