@threadlabs/looma 0.36.0 → 0.37.1

package/vue/UiCard.vue

@@ -51,7 +51,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the\n      surface hue; action controls retain their own intent.',
+        'accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the surface hue; action\n      controls retain their own intent.',
       values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
       default: 'neutral',
     },
@@ -60,7 +60,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'treatment' },
       description:
-        'How much of the theme\'s decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.\n      This does not add elevation or require glass.',
+        'How much of the theme\'s decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material\n      treatment. This does not add elevation or require glass.',
       values: ['standard', 'expressive'],
       default: 'standard',
     },
@@ -329,7 +329,9 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
-    --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-panel-glass: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-panel-rim: calc(
       (var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px

package/vue/UiCheckbox.vue

@@ -574,12 +574,6 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
       calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)
     ) !important;
   }
-
-  @media (pointer: coarse) {
-    :global(:scope[data-ui-checkbox-state~="size=sm"]:where([data-hn-ui-checkbox])) {
-      --_row: var(--ui-control-min-block-size);
-    }
-  }
   :global(:scope[hidden]:where([data-hn-ui-checkbox])) {
     display: none !important;
   }

package/vue/UiColorPicker.vue

@@ -409,14 +409,5 @@ useComponentHost(() => import('../components/ui-color-picker/ui-color-picker.js'
     padding: 0 !important;
     accent-color: var(--ui-accent-solid);
   }
-  @media (pointer: coarse) {
-    :global(:scope) {
-      --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-    }
-    :global(:scope[data-ui-color-picker-state~="size=sm"]) {
-      --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-      --_font: var(--ui-font-size-md);
-    }
-  }
 }
 </style>

package/vue/UiCombobox.vue

@@ -2378,20 +2378,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     white-space: nowrap;
   }
   @media (pointer: coarse) {
-    :global(:scope:where([data-hn-ui-combobox])) {
-      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-    }
-    :global(button:where([data-hn-ui-combobox])) {
-      min-inline-size: 2.75rem;
-      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-    }
-    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
-       body-size text: below 16px, iOS zooms the page into the focused field. */
-    :global(:scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox])) {
-      --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-    }
     :global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
-      font-size: inherit;
+      font-size: var(--ui-font-size-md);
     }
   }
   @media (forced-colors: active) {
@@ -2729,21 +2717,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     white-space: nowrap;
   }
   @media (pointer: coarse) {
-    :global(:where(.ui-combobox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-    }
-    :global(button:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-      min-inline-size: 2.75rem;
-      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-    }
-    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
-       body-size text: below 16px, iOS zooms the page into the focused field. */
-    :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-      --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-    }
     :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
       input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-      font-size: inherit;
+      font-size: var(--ui-font-size-md);
     }
   }
   @media (forced-colors: active) {

package/vue/UiCycleButton.d.ts

@@ -0,0 +1,69 @@
+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>;
+    };
+    index: {
+        type: PropType<number | null>;
+    };
+    items: {
+        type: PropType<readonly ({
+            readonly value: string;
+            readonly label: string;
+            readonly icon: string;
+        })[]>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    variant: {
+        type: PropType<"ghost" | "outline" | "solid" | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: CustomEvent<{
+        readonly value: string;
+        readonly index: number;
+    }>) => any;
+    "update:index": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    index: {
+        type: PropType<number | null>;
+    };
+    items: {
+        type: PropType<readonly ({
+            readonly value: string;
+            readonly label: string;
+            readonly icon: string;
+        })[]>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    variant: {
+        type: PropType<"ghost" | "outline" | "solid" | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    onChange?: ((event: CustomEvent<{
+        readonly value: string;
+        readonly index: number;
+    }>) => any) | undefined;
+    "onUpdate:index"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiCycleButton.js

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

package/vue/UiCycleButton.vue

@@ -0,0 +1,403 @@
+<!-- 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, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  cycleCheckedComputed,
+  initializedState,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+  warnUnless,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  copyStateSeed,
+  evaluateInput,
+  type InputBindings,
+  inputComputed,
+  inputDefault,
+  inputRead,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Prevents cycling while keeping the selected state visible.',
+      default: false,
+    },
+    index: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'index' },
+      description:
+        'Initial or externally selected zero-based state. The first state is the default.',
+      default: 0,
+    },
+    items: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [{ name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+            name: 'label',
+            type: { kind: 'terminal', name: 'string' },
+            optional: false,
+          }, { name: 'icon', type: { kind: 'terminal', name: 'string' }, optional: false }],
+          open: false,
+        },
+      },
+      required: true,
+      target: { attribute: 'items' },
+      description:
+        'Ordered states with a value, readable label and Looma icon name. Activation advances to the next state and wraps.',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'What the button changes, such as Appearance. The selected state is included in its accessible name.',
+      default: 'State',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description: 'Uses IconButton\'s compact visible sizes and adjustable invisible touch area.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description: 'Uses IconButton\'s standard emphasis.',
+      values: ['ghost', 'outline', 'solid'],
+      default: 'outline',
+    },
+  },
+} as const
+const props = defineProps({
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  index: { type: null as unknown as PropType<number | null> },
+  items: {
+    type: null as unknown as PropType<
+      readonly ({ readonly value: string; readonly label: string; readonly icon: string })[]
+    >,
+  },
+  label: { type: null as unknown as PropType<string | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
+  variant: { type: null as unknown as PropType<'ghost' | 'outline' | 'solid' | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  index: 0,
+  items: null,
+  label: 'State',
+  size: 'md',
+  variant: 'outline',
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  index: 0,
+  label: 'State',
+  size: 'md',
+  variant: 'outline',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'index':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    case 'items':
+      return checkPropInput(
+        value,
+        {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'icon', type: { kind: 'terminal', name: 'string' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        true,
+        false,
+      )
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'variant':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, 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,
+    index: propInputs.value<number | null>(
+      'index',
+      props['index'],
+      props[BINDING_INPUTS_PROP],
+    ) as number,
+    items: propInputs.value<
+      readonly ({ readonly value: string; readonly label: string; readonly icon: string })[]
+    >('items', props['items'], props[BINDING_INPUTS_PROP]),
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    size: propInputs.value<'sm' | 'md' | 'lg' | null>(
+      'size',
+      props['size'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'sm' | 'md' | 'lg',
+    variant: propInputs.value<'ghost' | 'outline' | 'solid' | null>(
+      'variant',
+      props['variant'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'ghost' | 'outline' | 'solid',
+  })
+})
+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:index': [value: number]
+  change: [event: CustomEvent<{ readonly value: string; readonly index: number }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const current = initializedState<number>(
+  () =>
+    evaluateInput(() => {
+      return inputRead(checkedProps.value.index, propInputs.status('index'))
+    }),
+  (next: unknown) => (typeof next === 'number' && Number.isFinite(next)),
+  copyStateSeed,
+  () =>
+    warnUnless(false, 'initializer:current', 'State `current` does not satisfy its declared type.'),
+)
+let selectedPrevious: { value: string; label: string; icon: string } | null = null
+const selected: ReturnType<
+  typeof inputComputed<{ value: string; label: string; icon: string } | null>
+> = inputComputed<{ value: string; label: string; icon: string } | null>(
+  () => {
+    return inputDefault(() =>
+      ((objectValue: any, indexValue: any) =>
+        objectValue === Symbol.for('html-next.invalid-result')
+          || indexValue === Symbol.for('html-next.invalid-result')
+          ? Symbol.for('html-next.invalid-result')
+          : objectValue[indexValue])(
+          inputRead(checkedProps.value.items, propInputs.status('items')),
+          inputDefault(() => inputRead(current.value, declarationStatus('current')), () => 0),
+        ), () =>
+      inputRead(checkedProps.value.items, propInputs.status('items'))[0]) as any
+  },
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+  next =>
+    (next as unknown) === Symbol.for('html-next.invalid-result')
+      ? selectedPrevious
+      : (selectedPrevious = next),
+)
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = concat(
+    checkedProps.value.label,
+    ': ',
+    selected.get()?.label ?? 'No choices',
+  )
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedPrevious
+  return guardedPrevious = candidate
+})
+provide('html-next:ui-cycle-button:current', current)
+const declarationStatuses = { current: () => current.status() } as Record<
+  string,
+  () => typeof READY_INPUT
+>
+const declarationStatus = (name: string) => declarationStatuses[name]!()
+current.start()
+checkHydratedRoot('span', 'ui-cycle-button')
+
+const isChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && (typeof (detail as Record<string, unknown>)['index'] === 'number'
+    && Number.isFinite((detail as Record<string, unknown>)['index']))
+  && Object.keys(detail as object).every((key) => ['value', 'index'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    change: isChangeDetail,
+  },
+  modeled: ['index'],
+})
+
+useComponentHost(() => import('../components/ui-cycle-button/ui-cycle-button.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-cycle-button/ui-cycle-button.js',
+    definition: './components/ui-cycle-button/ui-cycle-button.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', 'index', 'items', 'label', 'size', 'variant'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  state: { current },
+  computed: { selected },
+  availability: { current: () => declarationStatus('current'), selected: () => selected.status() },
+})
+</script>
+
+<template>
+  <span
+    class="ui-cycle-button"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-cycle-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-cycle-button-prop-index="reflectedProp('index', 'index', checkedProps.index, undefined, false)"
+    :data-ui-cycle-button-prop-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
+    :data-ui-cycle-button-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-cycle-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-cycle-button-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    ref="root"
+  ><template
+      v-for="boundInput in [evaluateInput(
+        () =>
+          (concat(
+            inputRead(checkedProps.label, inputStatus('label', true)),
+            ': ',
+            inputDefault(() => inputRead(selected.get(), selected.status())?.label, () => 'No choices'),
+          )) as any,
+        READY_INPUT,
+      )]"
+    ><template
+        v-for="boundInputSnapshot in [evaluateInput(
+          () =>
+            (inputRead(checkedProps.disabled, inputStatus('disabled', true))
+              || inputRead(checkedProps.items, inputStatus('items', true)).length < 2) as any,
+          READY_INPUT,
+        )]"
+      ><UiIconButton
+          class="ui-icon-button"
+          tone="neutral"
+          aria-description="Activate to choose the next state."
+          :label="boundInput.value"
+          :title="guarded"
+          :size="checkedProps.size"
+          :variant="checkedProps.variant"
+          :disabled="boundInputSnapshot.value"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              label: () => boundInput,
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              variant: () => ({ value: checkedProps.variant, status: inputStatus('variant', true) }),
+              disabled: () => boundInputSnapshot,
+            },
+          }"
+        ><template
+            v-for="boundInputSnapshot2 in [evaluateInput(
+              () => (inputDefault(() => inputRead(selected.get(), selected.status())?.icon, () => '')) as any,
+              READY_INPUT,
+            )]"
+          ><UiIcon
+              class="ui-icon"
+              :name="boundInputSnapshot2.value"
+              v-bind="{ [BINDING_INPUTS_PROP]: { name: () => boundInputSnapshot2 } }"
+            /></template></UiIconButton></template></template></span>
+</template>
+
+<style scoped>
+@scope (.ui-cycle-button) to ([data-hn]) {
+  :global(:scope) {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    vertical-align: middle;
+  }
+  :global(:scope[hidden]) {
+    display: none !important;
+  }
+}
+@scope ([data-slotted~="ui-cycle-button"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-cycle-button):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-cycle-button"])))) {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    vertical-align: middle;
+  }
+  :global(:where(.ui-cycle-button)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-cycle-button"])))) {
+    display: none !important;
+  }
+}
+</style>

package/vue/UiDialog.vue

@@ -428,7 +428,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
   :global(:scope:where([data-hn-ui-dialog])) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,
@@ -707,7 +709,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
   :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,

package/vue/UiIcon.vue

@@ -326,6 +326,17 @@ const shapes: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
         { tag: 'path', d: 'M12 7v4' },
       ],
       minus: [{ tag: 'path', d: 'M5 12h14' }],
+      monitor: [{ tag: 'rect', width: '20', height: '14', x: '2', y: '3', rx: '2' }, {
+        tag: 'line',
+        x1: '8',
+        x2: '16',
+        y1: '21',
+        y2: '21',
+      }, { tag: 'line', x1: '12', x2: '12', y1: '17', y2: '21' }],
+      moon: [{
+        tag: 'path',
+        d: 'M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401',
+      }],
       'notebook-pen': [
         { tag: 'path', d: 'M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4' },
         { tag: 'path', d: 'M2 6h4' },
@@ -413,6 +424,17 @@ const shapes: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
         tag: 'path',
         d: 'M14 12a4 4 0 0 1 0 8H6',
       }, { tag: 'line', x1: '4', x2: '20', y1: '12', y2: '12' }],
+      sun: [
+        { tag: 'circle', cx: '12', cy: '12', r: '4' },
+        { tag: 'path', d: 'M12 2v2' },
+        { tag: 'path', d: 'M12 20v2' },
+        { tag: 'path', d: 'm4.93 4.93 1.41 1.41' },
+        { tag: 'path', d: 'm17.66 17.66 1.41 1.41' },
+        { tag: 'path', d: 'M2 12h2' },
+        { tag: 'path', d: 'M20 12h2' },
+        { tag: 'path', d: 'm6.34 17.66-1.41 1.41' },
+        { tag: 'path', d: 'm19.07 4.93-1.41 1.41' },
+      ],
       superscript: [{ tag: 'path', d: 'm4 19 8-8' }, { tag: 'path', d: 'm12 19-8-8' }, {
         tag: 'path',
         d: 'M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06',

package/vue/UiIconButton.vue

@@ -77,7 +77,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'data-match-button' },
       description:
-        'Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row\'s height, including\n      touch-sized controls. Leave it off for compact toolbar and inline icon buttons.',
+        'Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row\'s height, on mouse and\n      touch alike. Leave it off for compact toolbar and inline icon buttons.',
       default: false,
     },
     pending: {
@@ -116,7 +116,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit\n      area of at least 44px.',
+        'Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. Touch can use an invisible hit area sized\n      by the adjustable control target preference.',
       values: ['sm', 'md', 'lg'],
       default: 'md',
     },
@@ -841,20 +841,6 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     --_size: var(--ui-control-size-lg);
   }
 
-  @media (pointer: coarse) {
-    :global(:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button])) {
-      inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-      min-inline-size: max(
-        var(--ui-icon-button-size, var(--_size)),
-        var(--ui-control-min-block-size)
-      );
-      min-block-size: max(
-        var(--ui-icon-button-size, var(--_size)),
-        var(--ui-control-min-block-size)
-      );
-    }
-  }
-
   :global(:scope[data-ui-icon-button-state~="round"]:where([data-hn-ui-icon-button])) {
     border-radius: var(--ui-radius-round);
   }