@threadlabs/looma 0.33.1 → 0.35.0

package/vue/UiSlider.vue

@@ -0,0 +1,412 @@
+<!-- Generated by HTML Next 1.0.0-alpha.69 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 {
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  initializedState,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+  warnUnless,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  copyStateSeed,
+  evaluateInput,
+  type InputBindings,
+  inputDefault,
+  inputRead,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+import UiNumberInput from './UiNumberInput.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name for the editing control.',
+      default: 'Value',
+    },
+    max: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'max' },
+      description: 'Inclusive upper bound for dragging, keyboard steps and exact entry.',
+      default: 100,
+    },
+    min: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'min' },
+      description: 'Inclusive lower bound for dragging, keyboard steps and exact entry.',
+      default: 0,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description: 'Optional numeric form field name.',
+      default: '',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description: 'Shared field and button height.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    step: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'step' },
+      description: 'Positive native range and exact entry increment.',
+      default: 1,
+    },
+    unit: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'unit' },
+      description: 'Unit shown by the exact editor.',
+      default: '',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'Current numeric value. Native range and exact entry share bounds.',
+      default: 0,
+    },
+  },
+} as const
+const props = defineProps({
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  label: { type: null as unknown as PropType<string | null> },
+  max: { type: null as unknown as PropType<number | null> },
+  min: { type: null as unknown as PropType<number | null> },
+  name: { type: null as unknown as PropType<string | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
+  step: { type: null as unknown as PropType<number | null> },
+  unit: { type: null as unknown as PropType<string | null> },
+  value: { type: null as unknown as PropType<number | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  label: 'Value',
+  max: 100,
+  min: 0,
+  name: '',
+  size: 'md',
+  step: 1,
+  unit: '',
+  value: 0,
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  label: 'Value',
+  max: 100,
+  min: 0,
+  name: '',
+  size: 'md',
+  step: 1,
+  unit: '',
+  value: 0,
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'max':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    case 'min':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    case 'name':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'step':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    case 'unit':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'value':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    max: propInputs.value<number | null>('max', props['max'], props[BINDING_INPUTS_PROP]) as number,
+    min: propInputs.value<number | null>('min', props['min'], props[BINDING_INPUTS_PROP]) as number,
+    name: propInputs.value<string | null>(
+      'name',
+      props['name'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    size: propInputs.value<'sm' | 'md' | 'lg' | null>(
+      'size',
+      props['size'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'sm' | 'md' | 'lg',
+    step: propInputs.value<number | null>(
+      'step',
+      props['step'],
+      props[BINDING_INPUTS_PROP],
+    ) as number,
+    unit: propInputs.value<string | null>(
+      'unit',
+      props['unit'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    value: propInputs.value<number | null>(
+      'value',
+      props['value'],
+      props[BINDING_INPUTS_PROP],
+    ) as number,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:value': [value: number]
+  input: [event: CustomEvent<{ readonly value: number }>]
+  change: [event: CustomEvent<{ readonly value: number }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const rangeElement = useTemplateRef<HTMLElement>('rangeElement')
+const current = initializedState<number>(
+  () =>
+    evaluateInput(() => {
+      return inputRead(checkedProps.value.value, propInputs.status('value'))
+    }),
+  (next: unknown) => (typeof next === 'number' && Number.isFinite(next)),
+  copyStateSeed,
+  () =>
+    warnUnless(false, 'initializer:current', 'State `current` does not satisfy its declared type.'),
+)
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = concat(current.value, checkedProps.value.unit)
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedPrevious
+  return guardedPrevious = candidate
+})
+provide('html-next:ui-slider:current', current)
+const declarationStatuses = { current: () => current.status() } as Record<
+  string,
+  () => typeof READY_INPUT
+>
+const declarationStatus = (name: string) => declarationStatuses[name]!()
+current.start()
+checkHydratedRoot('span', 'ui-slider')
+
+/** The values the styles' :host() and :state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+  ].filter(Boolean).join(' ')
+)
+
+const isInputDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && (typeof (detail as Record<string, unknown>)['value'] === 'number'
+    && Number.isFinite((detail as Record<string, unknown>)['value']))
+  && Object.keys(detail as object).every((key) => ['value'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    input: isInputDetail,
+    change: isInputDetail,
+  },
+  modeled: ['value'],
+})
+
+useComponentHost(() => import('../components/ui-slider/ui-slider.js'), {
+  root,
+  module: true,
+  dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({ current: { kind: 'terminal', name: 'number' } } as Record<string, any>)[name],
+      keys,
+    ),
+  controllerSource: {
+    specifier: '../components/ui-slider/ui-slider.js',
+    definition: './components/ui-slider/ui-slider.html',
+  },
+  props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled', 'label', 'max', 'min', 'name', 'size', 'step', 'unit', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  refs: { range: rangeElement },
+  state: { current },
+  availability: { current: () => declarationStatus('current') },
+})
+</script>
+
+<template>
+  <span
+    class="ui-slider"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-slider-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-slider-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-slider-prop-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
+    :data-ui-slider-prop-min="reflectedProp('min', 'min', checkedProps.min, undefined, false)"
+    :data-ui-slider-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-slider-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-slider-prop-step="reflectedProp('step', 'step', checkedProps.step, undefined, false)"
+    :data-ui-slider-prop-unit="reflectedProp('unit', 'unit', checkedProps.unit, undefined, false)"
+    :data-ui-slider-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-slider-state="hostState || undefined"
+    ref="root"
+  ><input
+      type="range"
+      data-ui-field-control=""
+      :aria-label="checkedProps.label ?? undefined"
+      :aria-valuetext="guarded"
+      :value.attr="checkedProps.value?.toString()"
+      :min="checkedProps.min?.toString()"
+      :max="checkedProps.max?.toString()"
+      :step="checkedProps.step?.toString()"
+      :disabled="checkedProps.disabled ?? undefined"
+      :name="checkedProps.name ?? undefined"
+      ref="rangeElement"
+    >{{ ' ' }}<template
+      v-for="boundInput in [evaluateInput(
+        () =>
+          (concat(
+            inputRead(current, declarationStatus('current')),
+            inputRead(checkedProps.unit, inputStatus('unit', true)),
+          )) as any,
+        READY_INPUT,
+      )]"
+    ><UiNumberInput
+        class="ui-number-input"
+        data-slider-exact=""
+        :value="boundInput.value"
+        :unit="checkedProps.unit"
+        :min="checkedProps.min"
+        :max="checkedProps.max"
+        :step="checkedProps.step"
+        :size="checkedProps.size"
+        :disabled="checkedProps.disabled"
+        :label="checkedProps.label"
+        v-bind="{
+          [BINDING_INPUTS_PROP]: {
+            value: () => boundInput,
+            unit: () => ({ value: checkedProps.unit, status: inputStatus('unit', true) }),
+            min: () => ({ value: checkedProps.min, status: inputStatus('min', true) }),
+            max: () => ({ value: checkedProps.max, status: inputStatus('max', true) }),
+            step: () => ({ value: checkedProps.step, status: inputStatus('step', true) }),
+            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            label: () => ({ value: checkedProps.label, status: inputStatus('label', true) }),
+          },
+        }"
+      /></template></span>
+</template>
+
+<style scoped>
+@scope (.ui-slider) to ([data-hn]) {
+  :global(:scope) {
+    display: grid !important;
+    grid-template-columns: minmax(4rem, 1fr) minmax(8rem, 1fr) !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+  }
+  :global(input) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-control-size-md);
+    margin: 0 !important;
+    accent-color: var(--ui-accent-solid);
+    cursor: pointer;
+  }
+  :global(:scope[data-ui-slider-state~="size=sm"] input) {
+    min-block-size: var(--ui-control-size-sm);
+  }
+  :global(:scope[data-ui-slider-state~="size=lg"] input) {
+    min-block-size: var(--ui-control-size-lg);
+  }
+  :global(input:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+    outline-offset: var(--ui-space-1);
+    border-radius: var(--ui-radius-sm);
+  }
+  :global(input:disabled) {
+    cursor: not-allowed;
+  }
+  @media (pointer: coarse) {
+    :global(input) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
+  }
+  :global(:scope[hidden]) {
+    display: none !important;
+  }
+}
+</style>

package/vue/UiSwitch.vue

@@ -375,6 +375,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: var(--ui-radius-round);
     background-color: var(--ui-control-surface, var(--ui-surface-default));
+    background-image: var(--ui-surface-highlight, none);
     box-shadow: var(--ui-control-inset);
     cursor: pointer;
     transition:
@@ -400,6 +401,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
 
   :global(input:checked:where([data-hn-ui-switch])) {
     background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
     border-color: var(--ui-accent-solid);
   }
 
@@ -423,6 +425,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   :global(:scope[data-ui-switch-state~="disabled"] input:where([data-hn-ui-switch])) {
     border-color: var(--ui-disabled-border);
     background-color: var(--ui-disabled-surface);
+    background-image: none;
     box-shadow: none;
     cursor: not-allowed;
   }

package/vue/UiTabs.vue

@@ -348,6 +348,10 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   syntax: "*";
   inherits: false;
 }
+@property --ui-tabs-panel-padding {
+  syntax: "*";
+  inherits: false;
+}
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
 
@@ -363,6 +367,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
     --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
     --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+    --_ui-tabs-panel-padding: var(--ui-tabs-panel-padding);
 
     --_tab-min-block-size: var(--ui-control-size);
     --_tab-padding-block: var(--ui-space-2);
@@ -460,7 +465,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     min-inline-size: 0;
   }
   :global(.panels > :where(:not([data-hn-ui-tabs])):is(*)) {
-    padding: var(--ui-space-4) !important;
+    padding: var(--_ui-tabs-panel-padding, var(--ui-space-4)) !important;
   }
 
   :global(:scope[data-ui-tabs-state~="orientation=vertical"]:where([data-hn-ui-tabs])) {

package/vue/UiText.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { type InputBindings } from './props.js';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
@@ -23,13 +23,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
 } & {
     default?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     align: {
         type: PropType<"start" | "center" | null>;
     };
     as: {
-        type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
+        type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
     };
     font: {
         type: PropType<"inherit" | "sans" | null>;
@@ -50,7 +52,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
     };
     variant: {
-        type: PropType<"body" | "eyebrow" | "code" | null>;
+        type: PropType<"body" | "display" | "heading" | "label" | "caption" | "eyebrow" | "code" | null>;
     };
     weight: {
         type: PropType<"inherit" | "normal" | "medium" | "semibold" | null>;
@@ -66,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | null>;
     };
     as: {
-        type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
+        type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
     };
     font: {
         type: PropType<"inherit" | "sans" | null>;
@@ -87,7 +89,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
     };
     variant: {
-        type: PropType<"body" | "eyebrow" | "code" | null>;
+        type: PropType<"body" | "display" | "heading" | "label" | "caption" | "eyebrow" | "code" | null>;
     };
     weight: {
         type: PropType<"inherit" | "normal" | "medium" | "semibold" | null>;