@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiFormField.vue

@@ -1,124 +1,156 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 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-form-field/ui-form-field.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(defineProps<{
-  disabled?: boolean | null;
-  invalid?: boolean | null;
-  required?: boolean | null;
-}>(), {
-  disabled: false,
-  invalid: false,
-  required: false,
-});
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import * as controllerModule from '../components/ui-form-field/ui-form-field.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    invalid?: boolean
+    required?: boolean
+  }>(),
+  {
+    disabled: false,
+    invalid: false,
+    required: false,
+  },
+)
+
+const root = ref<HTMLElement | null>(null)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
-};
+function dispatch(name: string, detail?: unknown): boolean {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
+    ?? true
+}
 
 function read(name: string): unknown {
-  return (props as Record<string, unknown>)[name];
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  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),
+    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>>,
+  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;
+      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);
+    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; },
-    };
+      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 };
+    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;
+      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;
+    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;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  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();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <div data-component="ui-form-field" v-bind="$attrs" ref="root"><slot name="label"></slot><slot></slot><slot name="help"></slot><slot name="error"></slot></div>
+  <div data-component="ui-form-field" v-bind="$attrs" ref="root">
+    <div class="label"><slot name="label" /></div>
+    <slot />
+    <div class="help"><slot name="help" /></div>
+    <div class="error"><slot name="error" /></div>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-form-field"] {
-      display: grid;
-      gap: var(--ui-space-2);
-      min-inline-size: 0;
-      align-content: start;
-      color: var(--ui-text-primary);
-    }
+  display: grid;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+  align-content: start;
+  color: var(--ui-text-primary);
+}
 
-    :slotted([slot="label"]) {
-      color: var(--ui-text-secondary);
-      font-size: 0.95rem;
-    }
+/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+   in Vue), and generates no box of its own, so an empty region adds no gap. */
+.label,
+.help,
+.error {
+  display: contents;
+}
 
-    :slotted([slot="help"]) {
-      min-block-size: var(--ui-form-field-help-min-block-size, 0);
-      color: var(--ui-text-muted);
-      font-size: 0.875rem;
-      line-height: var(--ui-line-height-md);
-    }
+.label {
+  color: var(--ui-text-secondary);
+  font-size: 0.95rem;
+}
 
-    :slotted([slot="error"]),
-    :slotted([role="alert"]) {
-      color: var(--ui-accent-active);
-      font-size: 0.875rem;
-    }
+.help {
+  color: var(--ui-text-muted);
+  font-size: 0.875rem;
+  line-height: var(--ui-line-height-md);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-form-field"][hidden] {
-      display: none;
-    }
+.help > :slotted(*) {
+  min-block-size: var(--ui-form-field-help-min-block-size, 0);
+}
+
+.error,
+:slotted([role="alert"]) {
+  color: var(--ui-accent-active);
+  font-size: 0.875rem;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-form-field"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiGrid.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
-    gap?: "xs" | "s" | "m" | "l" | "xl" | null;
-    min?: "sm" | "md" | "lg" | null;
+    gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    min?: 'sm' | 'md' | 'lg';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/vue/UiGrid.vue

@@ -1,72 +1,66 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'
 
-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),
-};
+defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
-  gap?: "xs" | "s" | "m" | "l" | "xl" | null;
-  min?: "sm" | "md" | "lg" | null;
-}>();
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["gap","min"] 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 {
-  return (props as Record<string, unknown>)[name];
-}
+  gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
+  min?: 'sm' | 'md' | 'lg'
+}>()
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.gap && `gap gap=${props.gap}`,
+    props.min && `min min=${props.min}`,
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <div data-component="ui-grid" v-bind="$attrs" :data-ui-grid-state="hostState || undefined"><slot></slot></div>
+  <div data-component="ui-grid" v-bind="$attrs" :data-ui-grid-state="hostState || undefined">
+    <slot />
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-grid"] {
-      --_grid-gap: var(--ui-space-4, 1rem);
-      --_grid-min: 12rem;
-      display: grid;
-      gap: var(--ui-grid-gap, var(--_grid-gap));
-      grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
-      min-inline-size: 0;
-      max-inline-size: 100%;
-      margin: 0;
-    }
+  --_grid-gap: var(--ui-space-4);
+  --_grid-min: 12rem;
+  display: grid;
+  gap: var(--ui-grid-gap, var(--_grid-gap));
+  grid-template-columns:
+    repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+}
 
-    [data-component~="ui-grid"][data-ui-grid-state~="gap=xs"] {
-      --_grid-gap: var(--ui-space-2, 0.5rem);
-    }
-    [data-component~="ui-grid"][data-ui-grid-state~="gap=s"] {
-      --_grid-gap: var(--ui-space-3, 0.75rem);
-    }
-    [data-component~="ui-grid"][data-ui-grid-state~="gap=m"] {
-      --_grid-gap: var(--ui-space-4, 1rem);
-    }
-    [data-component~="ui-grid"][data-ui-grid-state~="gap=l"] {
-      --_grid-gap: var(--ui-space-5, 1.5rem);
-    }
-    [data-component~="ui-grid"][data-ui-grid-state~="gap=xl"] {
-      --_grid-gap: var(--ui-space-6, 2rem);
-    }
-    [data-component~="ui-grid"][data-ui-grid-state~="min=md"] {
-      --_grid-min: 16rem;
-    }
-    [data-component~="ui-grid"][data-ui-grid-state~="min=lg"] {
-      --_grid-min: 20rem;
-    }
+[data-component~="ui-grid"][data-ui-grid-state~="gap=xs"] {
+  --_grid-gap: var(--ui-space-2);
+}
+[data-component~="ui-grid"][data-ui-grid-state~="gap=s"] {
+  --_grid-gap: var(--ui-space-3);
+}
+[data-component~="ui-grid"][data-ui-grid-state~="gap=m"] {
+  --_grid-gap: var(--ui-space-4);
+}
+[data-component~="ui-grid"][data-ui-grid-state~="gap=l"] {
+  --_grid-gap: var(--ui-space-5);
+}
+[data-component~="ui-grid"][data-ui-grid-state~="gap=xl"] {
+  --_grid-gap: var(--ui-space-6);
+}
+[data-component~="ui-grid"][data-ui-grid-state~="min=md"] {
+  --_grid-min: 16rem;
+}
+[data-component~="ui-grid"][data-ui-grid-state~="min=lg"] {
+  --_grid-min: 20rem;
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-grid"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-grid"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiIcon.d.ts

@@ -1,8 +1,8 @@
 type __VLS_Props = {
-    name?: string | null;
+    name?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    name: string | null;
+    name: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiIcon.vue

@@ -1,135 +1,164 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 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-icon/ui-icon.js";
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import * as controllerModule from '../components/ui-icon/ui-icon.js'
 
-defineOptions({ inheritAttrs: false });
+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),
-  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
-    let list = Array.isArray(items) ? items.slice() : [];
-    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
-    if (sort.length > 0) {
-      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
-        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
-        : item;
-      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-      list.sort((a, b) => {
-        for (const key of sort) {
-          const descending = key.startsWith("-");
-          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-          if (order !== 0) return descending ? -order : order;
-        }
-        return 0;
-      });
-    }
-    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+const props = withDefaults(
+  defineProps<{
+    name?: string
+  }>(),
+  {
+    name: '',
   },
-};
+)
 
-const props = withDefaults(defineProps<{
-  name?: string | null;
-}>(), {
-  name: "",
-});
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_shapes = ref<any>([]);
+const root = ref<HTMLElement | null>(null)
+const shapes = ref<
+  {
+    tag: 'path' | 'circle' | 'rect'
+    d?: string
+    cx?: string
+    cy?: string
+    r?: string
+    x?: string
+    y?: string
+    width?: string
+    height?: string
+    rx?: string
+  }[]
+>([])
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
-};
+function dispatch(name: string, detail?: unknown): boolean {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
+    ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "shapes") return state_shapes.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'shapes') return shapes.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "shapes") { state_shapes.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'shapes') {
+    shapes.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  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),
+    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>>,
+  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;
+      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);
+    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; },
-    };
+      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 };
+    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;
+      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;
+    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;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  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();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <span data-component="ui-icon" aria-hidden="true" v-bind="$attrs" ref="root"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><template v-for="(shape, index) in hn.shape(state_shapes, undefined, [], undefined)" :key="index"><g><template v-if="hn.t(((shape)?.tag === 'path'))"><path :d="hn.attr((shape)?.d)"></path></template><template v-if="hn.t(((shape)?.tag === 'circle'))"><circle :cx="hn.attr((shape)?.cx)" :cy="hn.attr((shape)?.cy)" :r="hn.attr((shape)?.r)"></circle></template><template v-if="hn.t(((shape)?.tag === 'rect'))"><rect :x="hn.attr((shape)?.x)" :y="hn.attr((shape)?.y)" :width="hn.attr((shape)?.width)" :height="hn.attr((shape)?.height)" :rx="hn.attr((shape)?.rx)"></rect></template></g></template></svg></span>
+  <span data-component="ui-icon" aria-hidden="true" v-bind="$attrs" ref="root"><svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      focusable="false"
+    >
+      <g v-for="(shape, index) in shapes" :key="index">
+        <path v-if="shape.tag === 'path'" :d="shape.d"></path>
+        <circle v-if="shape.tag === 'circle'" :cx="shape.cx" :cy="shape.cy" :r="shape.r"></circle>
+        <rect
+          v-if="shape.tag === 'rect'"
+          :x="shape.x"
+          :y="shape.y"
+          :width="shape.width"
+          :height="shape.height"
+          :rx="shape.rx"
+        >
+        </rect>
+      </g>
+    </svg></span>
 </template>
 
 <style scoped>
 [data-component~="ui-icon"] {
-      display: inline-flex;
-      flex: none;
-      inline-size: var(--ui-icon-size, 1em);
-      block-size: var(--ui-icon-size, 1em);
-    }
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--ui-icon-size, 1em);
+  block-size: var(--ui-icon-size, 1em);
+}
 
-    svg {
-      inline-size: 100%;
-      block-size: 100%;
-      stroke-width: var(--ui-icon-stroke-width, 2);
-    }
+svg {
+  inline-size: 100%;
+  block-size: 100%;
+  stroke-width: var(--ui-icon-stroke-width, 2);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-icon"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-icon"][hidden] {
+  display: none;
+}
 </style>