@threadlabs/looma 0.33.1 → 0.34.0

package/vue/UiNumberInput.vue

@@ -0,0 +1,370 @@
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  evaluateInput,
+  type InputBindings,
+  inputDefault,
+  inputRead,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
+import UiInput from './UiInput.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 applied to every editing path.',
+      default: 1000000,
+    },
+    min: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'min' },
+      description:
+        'Inclusive lower bound applied to typing, arithmetic, stepping and external values.',
+      default: -1000000,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description: 'Optional 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 increment used by arrows and step buttons; Shift multiplies it by ten.',
+      default: 1,
+    },
+    unit: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'unit' },
+      description:
+        'One accepted unit, such as px, rem, ms or %. Bare numbers use this unit. No automatic unit conversion.',
+      default: '',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'Exact value. Arithmetic is calculated on Enter or blur; the resulting value includes unit. Invalid expressions stay visible and expose invalid\n      state.',
+      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<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  label: 'Value',
+  max: 1000000,
+  min: -1000000,
+  name: '',
+  size: 'md',
+  step: 1,
+  unit: '',
+  value: '0',
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  label: 'Value',
+  max: 1000000,
+  min: -1000000,
+  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: 'string' }, 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<string | null>(
+      'value',
+      props['value'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+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: string]
+  input: [event: CustomEvent<{ readonly value: string }>]
+  change: [event: CustomEvent<{ readonly value: string }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+checkHydratedRoot('span', 'ui-number-input')
+
+const isInputDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && 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-number-input/ui-number-input.js'), {
+  root,
+  module: true,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-number-input/ui-number-input.js',
+    definition: './components/ui-number-input/ui-number-input.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),
+})
+</script>
+
+<template>
+  <span
+    class="ui-number-input"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-number-input-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-number-input-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-number-input-prop-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
+    :data-ui-number-input-prop-min="reflectedProp('min', 'min', checkedProps.min, undefined, false)"
+    :data-ui-number-input-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-number-input-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-number-input-prop-step="reflectedProp('step', 'step', checkedProps.step, undefined, false)"
+    :data-ui-number-input-prop-unit="reflectedProp('unit', 'unit', checkedProps.unit, undefined, false)"
+    :data-ui-number-input-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    ref="root"
+  ><template
+      v-for="boundInput in [evaluateInput(
+        () => (concat('Decrease ', inputRead(checkedProps.label, inputStatus('label', true)))) as any,
+        READY_INPUT,
+      )]"
+    ><UiIconButton
+        class="ui-icon-button"
+        data-number-step="decrease"
+        :match-button="true"
+        type="button"
+        :size="checkedProps.size"
+        :disabled="checkedProps.disabled"
+        :label="boundInput.value"
+        v-bind="{
+          [BINDING_INPUTS_PROP]: {
+            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            label: () => boundInput,
+          },
+        }"
+      ><UiIcon class="ui-icon" name="minus" /></UiIconButton></template>{{ ' ' }}<UiInput
+      class="ui-input"
+      data-ui-field-control=""
+      inputmode="decimal"
+      spellcheck="false"
+      aria-description="Enter calculates arithmetic. Arrow keys step; Shift changes ten steps."
+      :size="checkedProps.size"
+      :disabled="checkedProps.disabled"
+      :value="checkedProps.value"
+      :aria-label="checkedProps.label"
+      :name="checkedProps.name"
+      v-bind="{
+        [BINDING_INPUTS_PROP]: {
+          size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+          disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+          value: () => ({ value: checkedProps.value, status: inputStatus('value', true) }),
+        },
+      }"
+    />{{ ' ' }}<template
+      v-for="boundInputSnapshot in [evaluateInput(
+        () => (concat('Increase ', inputRead(checkedProps.label, inputStatus('label', true)))) as any,
+        READY_INPUT,
+      )]"
+    ><UiIconButton
+        class="ui-icon-button"
+        data-number-step="increase"
+        :match-button="true"
+        type="button"
+        :size="checkedProps.size"
+        :disabled="checkedProps.disabled"
+        :label="boundInputSnapshot.value"
+        v-bind="{
+          [BINDING_INPUTS_PROP]: {
+            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            label: () => boundInputSnapshot,
+          },
+        }"
+      ><UiIcon class="ui-icon" name="plus" /></UiIconButton></template></span>
+</template>
+
+<style scoped>
+@scope (.ui-number-input) to ([data-hn]) {
+  :global(:scope) {
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+  }
+  :global(:scope[hidden]) {
+    display: none !important;
+  }
+}
+@scope ([data-slotted~="ui-number-input"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-number-input):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-number-input"])))) {
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+  }
+  :global(:where(.ui-number-input)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-number-input"])))) {
+    display: none !important;
+  }
+}
+</style>

package/vue/UiPopover.vue

@@ -76,7 +76,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.',
+        'Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content. Shared\n      surface separation adapts to popover purpose and rendered size.',
       values: ['content', 'sm', 'md', 'lg'],
       default: 'content',
     },
@@ -334,10 +334,14 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   inherits: false;
 }
 
+/* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+   transparency, saturation and edge light belong to the surrounding decorative material. */
+
 /* A toolbar or card can supply its own surface, including an unclipped shadow. */
 
 @scope (.ui-popover) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-popover])) {
+    --_ui-material-scale: 0.55;
     --_ui-popover-surface: var(--ui-popover-surface);
     --_ui-popover-border: var(--ui-popover-border);
     --_ui-popover-radius: var(--ui-popover-radius);
@@ -373,12 +377,99 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
   }
+  :global(.surface:where([data-hn-ui-popover])) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 0.55) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --_ui-popover-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --_ui-popover-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --_ui-popover-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        var(--ui-elevation-overlay, var(--ui-shadow-lg))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(.surface:where([data-hn-ui-popover])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(.surface:where([data-hn-ui-popover])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(.surface:where([data-hn-ui-popover])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
   :global(:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover])) {
     overflow: visible;
     padding: 0 !important;
     border: 0;
     background: transparent;
     box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
 
   :global(:scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover])) {

package/vue/UiSlider.d.ts

@@ -0,0 +1,83 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    max: {
+        type: PropType<number | null>;
+    };
+    min: {
+        type: PropType<number | null>;
+    };
+    name: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    step: {
+        type: PropType<number | null>;
+    };
+    unit: {
+        type: PropType<string | null>;
+    };
+    value: {
+        type: PropType<number | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: CustomEvent<{
+        readonly value: number;
+    }>) => any;
+    change: (event: CustomEvent<{
+        readonly value: number;
+    }>) => any;
+    "update:value": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    max: {
+        type: PropType<number | null>;
+    };
+    min: {
+        type: PropType<number | null>;
+    };
+    name: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    step: {
+        type: PropType<number | null>;
+    };
+    unit: {
+        type: PropType<string | null>;
+    };
+    value: {
+        type: PropType<number | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    onInput?: ((event: CustomEvent<{
+        readonly value: number;
+    }>) => any) | undefined;
+    onChange?: ((event: CustomEvent<{
+        readonly value: number;
+    }>) => any) | undefined;
+    "onUpdate:value"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiSlider.js

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