@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiMenuItem.vue

@@ -1,19 +1,17 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, preserveRootFocus, useComponentHost } from './host'
+import {
+  attribute,
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  preserveRootFocus,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
@@ -139,38 +137,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:checked': [value: boolean]
@@ -214,55 +181,11 @@ const guarded = computed(() => {
       concat(checkedProps.value.disabled),
     ))
 })
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalChecked.value == null || typeof internalChecked.value === 'boolean',
-      '{ action: null, checkbox: $internalChecked, radio: $internalChecked }[$type]:internalChecked',
-      './components/ui-menu-item/ui-menu-item.html: HR007: Reference internalChecked does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious =
-    typeof ((({
-        action: null,
-        checkbox: internalChecked.value,
-        radio: internalChecked.value,
-      }) as Record<string, any>)[checkedProps.value.type]) === 'boolean'
-      ? String(
-        (({
-          action: null,
-          checkbox: internalChecked.value,
-          radio: internalChecked.value,
-        }) as Record<string, any>)[checkedProps.value.type],
-      )
-      : attribute(
-        (({
-          action: null,
-          checkbox: internalChecked.value,
-          radio: internalChecked.value,
-        }) as Record<string, any>)[checkedProps.value.type],
-      )
-})
 provide('html-next:ui-menu-item:internalChecked', internalChecked)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element)
-    || hydrationNode.localName
-      !== ((checkedProps.value.href && checkedProps.value.type === 'action') ? 'a' : ('div')))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-menu-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-menu-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot(
+  (checkedProps.value.href && checkedProps.value.type === 'action') ? 'a' : ('div'),
+  'ui-menu-item',
+)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -320,43 +243,12 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalChecked },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
 </script>
 
 <template>
   <a
     v-if="checkedProps.href && checkedProps.type === 'action'"
-    data-component="ui-menu-item"
+    class="ui-menu-item"
     role="menuitem"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
@@ -376,7 +268,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
   <div
     v-else
-    data-component="ui-menu-item"
+    class="ui-menu-item"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
     :role="attribute(
@@ -385,7 +277,20 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         any
       >)[checkedProps.type],
     )"
-    :aria-checked="guardedBinding"
+    :aria-checked="typeof ((({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<
+      string,
+      any
+    >)[checkedProps.type]) === 'boolean'
+    ? String(
+      (({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<string, any>)[
+        checkedProps.type
+      ],
+    )
+    : attribute(
+      (({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<string, any>)[
+        checkedProps.type
+      ],
+    )"
     :aria-disabled="checkedProps.disabled ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
@@ -399,6 +304,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   >
     <span class="indicator" aria-hidden="true"><UiIcon
         v-if="(checkedProps.type === 'checkbox' || checkedProps.type === 'radio') && internalChecked"
+        class="ui-icon"
         name="check"
       /></span>
     <span class="icon" aria-hidden="true"><slot name="icon" /></span>
@@ -434,162 +340,163 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   inherits: false;
 }
 
-[data-component~="ui-menu-item"] {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(
-    --ui-menu-item-padding-block,
-    var(--_ui-default-menu-item-padding-block, var(--ui-space-2))
-  )
-    var(
-      --ui-menu-item-padding-inline,
-      var(--_ui-default-menu-item-padding-inline, var(--ui-space-3))
-    );
-  text-align: left;
-  border-radius: var(
-    --ui-menu-item-radius,
-    var(--_ui-default-menu-item-radius, var(--ui-selection-radius))
-  );
-  color: var(--ui-text-primary);
-  font-size: var(
-    --ui-menu-item-font-size,
-    var(--_ui-default-menu-item-font-size, var(--ui-font-size-md))
-  );
-  font-weight: var(--ui-font-medium);
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
 /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
-.icon {
-  display: var(--_ui-default-menu-icon-display, none);
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  inline-size: var(--ui-icon-size-sm);
-  block-size: var(--ui-icon-size-sm);
-}
 
-.icon:not(:empty) {
-  display: inline-flex;
-}
+/* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
+   as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
 
-.icon :slotted(svg) {
-  inline-size: 100%;
-  block-size: 100%;
-}
+/* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
 
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="tone=danger"] {
-  color: var(--ui-danger);
-}
+/* Keep the text row at the shared control height where cap trimming is available. */
 
-.label {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  flex: 1;
-  min-inline-size: 0;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  box-sizing: border-box;
-  inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
-  block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
-  border: var(--ui-border-width) solid var(--ui-control-border);
-  border-radius: var(--ui-radius-sm);
-  color: var(--ui-surface);
-  --_ui-default-icon-size: 0.75rem;
-}
+@scope (.ui-menu-item) to (.ui-icon) {
+  :scope:where(:scope) {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(
+      --ui-menu-item-padding-block,
+      var(--_ui-default-menu-item-padding-block, var(--ui-space-2))
+    )
+      var(
+        --ui-menu-item-padding-inline,
+        var(--_ui-default-menu-item-padding-inline, var(--ui-space-3))
+      );
+    text-align: left;
+    border-radius: var(
+      --ui-menu-item-radius,
+      var(--_ui-default-menu-item-radius, var(--ui-selection-radius))
+    );
+    color: var(--ui-text-primary);
+    font-size: var(
+      --ui-menu-item-font-size,
+      var(--_ui-default-menu-item-font-size, var(--ui-font-size-md))
+    );
+    font-weight: var(--ui-font-medium);
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  .icon {
+    display: var(--_ui-default-menu-icon-display, none);
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
+  }
 
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator {
-  display: none;
-}
+  .icon:not(:empty) {
+    display: inline-flex;
+  }
 
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
-  .indicator {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-}
+  .icon :slotted(svg) {
+    inline-size: 100%;
+    block-size: 100%;
+  }
 
-/* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
-   as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator {
-  border-color: transparent;
-  color: var(--ui-text-secondary);
-}
+  :scope:where(:scope):is([data-ui-menu-item-state~="tone=danger"]) {
+    color: var(--ui-danger);
+  }
 
-.shortcut {
-  margin-inline-start: auto;
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-normal);
-}
+  .label {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    flex: 1;
+    min-inline-size: 0;
+  }
 
-.shortcut:empty {
-  display: none;
-}
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+    block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-surface);
+    --_ui-default-icon-size: 0.75rem;
+  }
 
-/* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
-.shortcut :slotted(kbd) {
-  font: inherit;
-}
+  :scope[data-ui-menu-item-state~="type=action"] .indicator {
+    display: none;
+  }
 
-/* Keep the text row at the shared control height where cap trimming is available. */
-@supports (text-box-trim: trim-both) {
-  [data-component~="ui-menu-item"] {
-    min-block-size: var(
-      --ui-menu-item-min-block-size,
-      var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
-    );
-    text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+  :scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
+    border-color: var(--ui-accent);
+    background: var(--ui-accent);
+  }
+  :scope[data-ui-menu-item-state~="type=radio"] .indicator {
+    border-color: transparent;
+    color: var(--ui-text-secondary);
   }
-}
 
-[data-component~="ui-menu-item"]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
-  background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
-}
+  .shortcut {
+    margin-inline-start: auto;
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+  }
 
-[data-component~="ui-menu-item"]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: calc(-1 * var(--ui-focus-width));
-}
+  .shortcut:empty {
+    display: none;
+  }
+  .shortcut :slotted(kbd) {
+    font: inherit;
+  }
+  @supports (text-box-trim: trim-both) {
+    :scope:where(:scope) {
+      min-block-size: var(
+        --ui-menu-item-min-block-size,
+        var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
+      );
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+  }
 
-[data-component~="ui-menu-item"][aria-disabled="true"] {
-  background: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
+  :scope:where(:scope):is(:is(:hover, :focus-visible):not([aria-disabled="true"])) {
+    background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+  }
 
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator {
-  border-color: var(--ui-disabled-border);
-  background: transparent;
-  color: var(--ui-disabled-text);
-}
+  :scope:where(:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
+  }
 
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator::after {
-  background: var(--ui-disabled-text);
-}
+  :scope:where(:scope):is([aria-disabled="true"]) {
+    background: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
 
-@media (forced-colors: active) {
-  [data-component~="ui-menu-item"]:focus-visible {
-    outline-color: Highlight;
+  :scope[aria-disabled="true"] .indicator {
+    border-color: var(--ui-disabled-border);
+    background: transparent;
+    color: var(--ui-disabled-text);
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden] {
-  display: none;
+  :scope[aria-disabled="true"] .indicator::after {
+    background: var(--ui-disabled-text);
+  }
+
+  @media (forced-colors: active) {
+    :scope:where(:scope):is(:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiMeter.d.ts

@@ -1,6 +1,4 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: PropType<string | null>;
@@ -82,8 +80,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
 }>> & Readonly<{}>, {
-    label: string | null;
     value: number | null;
+    segments: number | null;
+    label: string | null;
     size: "sm" | "md" | null;
     max: number | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
@@ -92,6 +91,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly value: number;
         readonly color: string;
     }[] | null;
-    segments: number | null;
     valueText: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;