@threadlabs/looma 0.26.16 → 0.26.18

package/vue/UiMenu.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: string;
     };
+    icons: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     inline: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -54,6 +58,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: string;
     };
+    icons: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     inline: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -94,6 +102,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     placement: string | null;
     inline: boolean | null;
     density: "comfortable" | "compact" | null;
+    icons: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiMenu.vue

@@ -25,6 +25,14 @@ const propValidityContract = {
       description: 'ID of the control that toggles and anchors the menu.',
       default: '',
     },
+    icons: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'icons' },
+      description:
+        'Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.',
+      default: false,
+    },
     inline: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -64,6 +72,7 @@ const props = defineProps({
     default: 'comfortable',
   },
   for: { type: null as unknown as PropType<string | null>, default: '' },
+  icons: { type: null as unknown as PropType<boolean | null>, default: false },
   inline: { type: null as unknown as PropType<boolean | null>, default: false },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
   placement: { type: null as unknown as PropType<string | null>, default: 'bottom-start' },
@@ -72,6 +81,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
   for: '',
+  icons: false,
   inline: false,
   open: false,
   placement: 'bottom-start',
@@ -92,6 +102,13 @@ const checkedProps = computed(() => ({
     'for',
     acceptedProps,
   ) as string,
+  icons: checkedProp<boolean>(
+    props['icons'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'icons',
+    acceptedProps,
+  ) as boolean,
   inline: checkedProp<boolean>(
     props['inline'],
     { kind: 'terminal', name: 'boolean' },
@@ -214,6 +231,7 @@ const hostState = computed(() =>
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.icons && 'icons',
     internalOpen.value && 'internalOpen',
     checkedProps.value.inline && 'inline',
   ].filter(Boolean).join(' ')
@@ -281,7 +299,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'for', 'inline', 'open', 'placement', 'size'],
+  propNames: ['density', 'for', 'icons', 'inline', 'open', 'placement', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
@@ -297,6 +315,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-icons="reflectedProp('icons', 'icons', checkedProps.icons, undefined, false)"
     :data-inline="reflectedProp('inline', 'inline', checkedProps.inline, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
@@ -355,6 +374,10 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   gap: 0;
 }
 
+[data-component~="ui-menu"][data-ui-menu-state~="icons"] {
+  --_ui-default-menu-icon-display: inline-flex;
+}
+
 [data-component~="ui-menu"] {
   --_ui-menu-surface: var(--ui-menu-surface);
   --_ui-menu-border: var(--ui-menu-border);
@@ -367,6 +390,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   --_ui-default-menu-item-radius: initial;
   --_ui-default-menu-item-min-block-size: initial;
   --_ui-default-menu-indicator-size: initial;
+  --_ui-default-menu-icon-display: none;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;

package/vue/UiMenuItem.d.ts

@@ -14,6 +14,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"neutral" | "danger" | null>;
+        default: string;
+    };
     type: {
         type: PropType<"action" | "checkbox" | "radio" | null>;
         default: string;
@@ -45,6 +49,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"neutral" | "danger" | null>;
+        default: string;
+    };
     type: {
         type: PropType<"action" | "checkbox" | "radio" | null>;
         default: string;
@@ -66,13 +74,18 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }>, {
     type: "checkbox" | "radio" | "action" | null;
     value: string | null;
+    tone: "neutral" | "danger" | null;
     disabled: boolean | null;
     href: string | null;
     checked: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    icon?: (props: {}) => any;
+} & {
     default?: (props: {}) => any;
 } & {
     shortcut?: (props: {}) => any;
+} & {
+    icon?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 } & {

package/vue/UiMenuItem.vue

@@ -45,6 +45,14 @@ const propValidityContract = {
         'A destination makes an action item a real link, with native navigation and link context actions.',
       default: '',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description: 'Danger identifies a destructive action without changing its behavior.',
+      values: ['neutral', 'danger'],
+      default: 'neutral',
+    },
     type: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -68,6 +76,7 @@ const props = defineProps({
   checked: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   href: { type: null as unknown as PropType<string | null>, default: '' },
+  tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
   type: {
     type: null as unknown as PropType<'action' | 'checkbox' | 'radio' | null>,
     default: 'action',
@@ -78,6 +87,7 @@ const acceptedProps: Record<string, unknown> = {
   checked: false,
   disabled: false,
   href: '',
+  tone: 'neutral',
   type: 'action',
   value: '',
 }
@@ -103,6 +113,13 @@ const checkedProps = computed(() => ({
     'href',
     acceptedProps,
   ) as string,
+  tone: checkedProp<'neutral' | 'danger'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ) as 'neutral' | 'danger',
   type: checkedProp<'action' | 'checkbox' | 'radio'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
@@ -250,6 +267,8 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.type && 'type',
     checkedProps.value.type != null && `type=${encodeURIComponent(checkedProps.value.type)}`,
   ].filter(Boolean).join(' ')
@@ -296,7 +315,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['checked', 'disabled', 'href', 'type', 'value'],
+  propNames: ['checked', 'disabled', 'href', 'tone', 'type', 'value'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalChecked },
@@ -347,11 +366,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="label"><slot /></span>
+  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
+    <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
   <div
     v-else
@@ -370,6 +391,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
@@ -379,6 +401,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         v-if="(checkedProps.type === 'checkbox' || checkedProps.type === 'radio') && internalChecked"
         name="check"
       /></span>
+    <span class="icon" aria-hidden="true"><slot name="icon" /></span>
     <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span>
   </div>
@@ -444,6 +467,29 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     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;
+}
+
+.icon :slotted(svg) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="tone=danger"] {
+  color: var(--ui-danger);
+}
+
 .label {
   display: flex;
   align-items: center;

package/vue/UiMeter.d.ts

@@ -10,6 +10,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<number | null>;
         default: number;
     };
+    parts: {
+        type: PropType<readonly ({
+            readonly value: number;
+            readonly color: string;
+        })[] | null>;
+        default: () => never[];
+    };
     segments: {
         type: PropType<number | null>;
         default: number;
@@ -30,6 +37,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<string | null>;
         default: string;
     };
+    variant: {
+        type: PropType<"progress" | "distribution" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: PropType<string | null>;
@@ -39,6 +50,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<number | null>;
         default: number;
     };
+    parts: {
+        type: PropType<readonly ({
+            readonly value: number;
+            readonly color: string;
+        })[] | null>;
+        default: () => never[];
+    };
     segments: {
         type: PropType<number | null>;
         default: number;
@@ -59,12 +77,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<string | null>;
         default: string;
     };
+    variant: {
+        type: PropType<"progress" | "distribution" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     label: string | null;
     value: number | null;
     size: "sm" | "md" | null;
     max: number | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
+    variant: "progress" | "distribution" | null;
+    parts: readonly {
+        readonly value: number;
+        readonly color: string;
+    }[] | null;
     segments: number | null;
     valueText: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;