@threadlabs/looma 0.4.0 → 0.5.0

package/vue/UiDisclosure.vue

@@ -0,0 +1,211 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-disclosure/ui-disclosure.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+};
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean | null;
+  open?: boolean | null;
+  summary?: string | null;
+}>(), {
+  disabled: false,
+  open: false,
+  summary: "Details",
+});
+const emit = defineEmits<{
+  "open": [detail: { readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "close": [detail: { readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_internalOpen = ref<any>(false);
+const state_contentId = ref<any>("");
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"open":{"bubbles":true,"composed":true,"cancelable":false},"close":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "open": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "programmatic" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["open","reason","trigger"].includes(key))),
+    "close": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "programmatic" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["open","reason","trigger"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["internalOpen"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  if (name === "internalOpen") return state_internalOpen.value;
+  if (name === "contentId") return state_contentId.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "internalOpen") { state_internalOpen.value = value; return true; }
+  if (name === "contentId") { state_contentId.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <div data-component="ui-disclosure" v-bind="$attrs" :data-ui-disclosure-state="hostState || undefined" ref="root"><button class="trigger" type="button" :aria-controls="hn.enumerated(state_contentId)" :aria-expanded="hn.enumerated(state_internalOpen)" :disabled="hn.attr(props.disabled)" :ref="(element) => { refs['trigger'] = element as Element }"><span>{{ hn.text(props.summary) }}</span><span class="chevron" aria-hidden="true"></span></button><div class="panel" :id="hn.attr(state_contentId)" :inert="hn.attr(!hn.t(state_internalOpen))"><div class="panel-inner"><slot></slot></div></div></div>
+</template>
+
+<style scoped>
+/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+     * select or combobox. Stacked disclosures share their dividers. */
+    [data-component~="ui-disclosure"] {
+      display: block;
+      inline-size: 100%;
+      overflow: clip;
+      border-block-end: 1px solid var(--ui-border-default);
+      color: var(--ui-text-primary);
+    }
+
+    .trigger {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: var(--ui-space-3);
+      align-items: center;
+      inline-size: 100%;
+      min-block-size: 2.5rem;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-weight: var(--ui-font-semibold, 600);
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--ui-radius-1);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--ui-surface-muted);
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    .trigger:disabled {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+
+    .chevron {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      transform: rotate(45deg) translate(-1px, -1px);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .panel {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--ui-motion-fast) var(--ui-motion-ease-out, var(--ui-motion-ease));
+    }
+
+    .panel-inner {
+      min-block-size: 0;
+      overflow: hidden;
+      padding-inline: var(--ui-space-3);
+    }
+
+    [data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel {
+      grid-template-rows: 1fr;
+    }
+    [data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner {
+      padding-block: 0 var(--ui-space-3);
+    }
+    [data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron {
+      transform: rotate(225deg) translate(-1px, -1px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .panel,
+      .chevron {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-disclosure"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiEditable.d.ts

@@ -0,0 +1,48 @@
+type __VLS_Props = {
+    actions?: boolean | null;
+    disabled?: boolean | null;
+    edit?: boolean | null;
+    hint?: string | null;
+    label?: string | null;
+    value?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (detail: {
+        readonly value: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    change: (detail: {
+        readonly value: string;
+        readonly previousValue: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    "edit-change": (detail: {
+        readonly edit: boolean;
+        readonly reason: "activate" | "commit" | "cancel" | "light-dismiss" | "escape" | "programmatic";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInput?: ((detail: {
+        readonly value: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    onChange?: ((detail: {
+        readonly value: string;
+        readonly previousValue: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    "onEdit-change"?: ((detail: {
+        readonly edit: boolean;
+        readonly reason: "activate" | "commit" | "cancel" | "light-dismiss" | "escape" | "programmatic";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    label: string | null;
+    disabled: boolean | null;
+    value: string | null;
+    actions: boolean | null;
+    edit: boolean | null;
+    hint: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditable.js

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

package/vue/UiEditable.vue

@@ -0,0 +1,267 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-editable/ui-editable.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+};
+
+const props = withDefaults(defineProps<{
+  actions?: boolean | null;
+  disabled?: boolean | null;
+  edit?: boolean | null;
+  hint?: string | null;
+  label?: string | null;
+  value?: string | null;
+}>(), {
+  actions: false,
+  disabled: false,
+  edit: false,
+  hint: "",
+  label: "Edit value",
+  value: "",
+});
+const emit = defineEmits<{
+  "input": [detail: { readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "change": [detail: { readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "edit-change": [detail: { readonly edit: boolean; readonly reason: "activate" | "commit" | "cancel" | "light-dismiss" | "escape" | "programmatic"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_internalEdit = ref<any>(false);
+const state_internalValue = ref<any>("");
+const state_draft = ref<any>("");
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"input":{"bubbles":true,"composed":true,"cancelable":false},"change":{"bubbles":true,"composed":true,"cancelable":false},"edit-change":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "input": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["value"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","trigger"].includes(key))),
+    "change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["value"] === "string" && typeof (detail as Record<string, unknown>)["previousValue"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","previousValue","trigger"].includes(key))),
+    "edit-change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["edit"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "activate" || (detail as Record<string, unknown>)["reason"] === "commit" || (detail as Record<string, unknown>)["reason"] === "cancel" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape" || (detail as Record<string, unknown>)["reason"] === "programmatic") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["edit","reason","trigger"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["internalEdit","disabled"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  if (name === "internalEdit") return state_internalEdit.value;
+  if (name === "internalValue") return state_internalValue.value;
+  if (name === "draft") return state_draft.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "internalEdit") { state_internalEdit.value = value; return true; }
+  if (name === "internalValue") { state_internalValue.value = value; return true; }
+  if (name === "draft") { state_draft.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <div data-component="ui-editable" v-bind="$attrs" :data-ui-editable-state="hostState || undefined" ref="root"><div class="field"><button class="preview" type="button" :disabled="hn.attr(props.disabled)" :ref="(element) => { refs['preview'] = element as Element }"><span class="text">{{ hn.text(state_internalValue) }}</span><template v-if="hn.t(props.hint)"><span class="hint" aria-hidden="true">{{ hn.text(props.hint) }}</span></template></button><input class="input" type="text" :value.prop="(state_draft) as any" :aria-label="hn.enumerated(props.label)" :disabled="hn.attr((hn.t(props.disabled) || hn.t(!hn.t(state_internalEdit))))" :ref="(element) => { refs['input'] = element as Element }"></div><template v-if="hn.t(props.actions)"><div class="actions"><button class="save" type="button">Save</button><button class="cancel" type="button">Cancel</button></div></template></div>
+</template>
+
+<style scoped>
+[data-component~="ui-editable"] {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+    }
+
+    /* The value and the input share one grid cell with identical box metrics, so switching between
+     * display and edit never changes the control's size or moves the text. */
+    .field {
+      display: inline-grid;
+      min-inline-size: 8rem;
+      max-inline-size: 100%;
+    }
+
+    .preview,
+    .input {
+      grid-area: 1 / 1;
+      box-sizing: border-box;
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      margin: 0;
+      padding: var(--ui-space-1) var(--ui-space-2);
+      border: 1px solid transparent;
+      border-radius: var(--ui-radius-2);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      color: inherit;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .preview {
+      display: inline-flex;
+      gap: var(--ui-space-2);
+      align-items: center;
+      background: transparent;
+      text-align: start;
+      cursor: pointer;
+    }
+
+    .preview:hover:not(:disabled) {
+      background: var(--ui-surface-muted);
+    }
+
+    .preview:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    .hint {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    /* Contained so it takes the value's width instead of its own default input width. */
+    .input {
+      contain: inline-size;
+      inline-size: 100%;
+      min-inline-size: 0;
+      visibility: hidden;
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+    }
+
+    .input:focus {
+      outline: none;
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    .input::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    }
+
+    [data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview {
+      visibility: hidden;
+    }
+    [data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input {
+      visibility: visible;
+    }
+
+    .actions {
+      display: none;
+      gap: var(--ui-space-1);
+    }
+    [data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions {
+      display: inline-flex;
+    }
+
+    .actions button {
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      padding: 0 var(--ui-space-3);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-surface-elevated);
+      background-image: var(--ui-raised-highlight, none);
+      box-shadow: var(--ui-raised, none);
+      color: inherit;
+      font: inherit;
+      font-size: var(--ui-font-size-sm);
+      cursor: pointer;
+    }
+
+    .actions .save {
+      border-color: var(--ui-accent-solid);
+      background: var(--ui-accent-solid);
+      color: var(--ui-text-on-accent);
+    }
+
+    .actions button:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    [data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-editable"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiEditorInsertTableGrid.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    headerRow?: boolean | null;
+    maxCols?: number | null;
+    maxRows?: number | null;
+    open?: boolean | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    insert: (detail: {
+        readonly rows: number;
+        readonly cols: number;
+        readonly withHeaderRow: boolean;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInsert?: ((detail: {
+        readonly rows: number;
+        readonly cols: number;
+        readonly withHeaderRow: boolean;
+    }) => any) | undefined;
+}>, {
+    open: boolean | null;
+    headerRow: boolean | null;
+    maxCols: number | null;
+    maxRows: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorInsertTableGrid.js

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