@threadlabs/looma 0.37.4 → 0.37.6

package/vue/UiButton.d.ts

@@ -53,6 +53,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | null>;
     };
+    square: {
+        type: PropType<boolean | null>;
+    };
     stretch: {
         type: PropType<boolean | null>;
     };
@@ -102,6 +105,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | null>;
     };
+    square: {
+        type: PropType<boolean | null>;
+    };
     stretch: {
         type: PropType<boolean | null>;
     };

package/vue/UiButton.vue

@@ -117,6 +117,14 @@ const propValidityContract = {
       values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
+    square: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'square' },
+      description:
+        'Gives short labels and icons the same square minimum footprint at each size. Longer labels grow naturally. Applies to boxed actions; link and card variants\n      keep their normal layout.',
+      default: false,
+    },
     stretch: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -174,6 +182,7 @@ const props = defineProps({
   rel: { type: null as unknown as PropType<string | null> },
   shape: { type: null as unknown as PropType<'rounded' | 'pill' | null> },
   size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null> },
+  square: { type: null as unknown as PropType<boolean | null> },
   stretch: { type: null as unknown as PropType<boolean | null> },
   target: { type: null as unknown as PropType<string | null> },
   tone: {
@@ -200,6 +209,7 @@ const acceptedProps: Record<string, unknown> = {
   rel: null,
   shape: 'rounded',
   size: 'md',
+  square: false,
   stretch: false,
   target: null,
   tone: 'accent',
@@ -215,6 +225,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   preset: 'none',
   shape: 'rounded',
   size: 'md',
+  square: false,
   stretch: false,
   tone: 'accent',
   type: 'button',
@@ -241,6 +252,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'size':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'square':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'stretch':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'target':
@@ -301,6 +314,11 @@ const checkedProps = computed(() => {
       props['size'],
       props[BINDING_INPUTS_PROP],
     ) as 'xs' | 'sm' | 'md' | 'lg',
+    square: propInputs.value<boolean | null>(
+      'square',
+      props['square'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
     stretch: propInputs.value<boolean | null>(
       'stretch',
       props['stretch'],
@@ -703,6 +721,7 @@ const hostState = computed(() =>
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     checkedProps.value.shape && 'shape',
     checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
+    checkedProps.value.square && 'square',
     checkedProps.value.loading && 'loading',
     checkedProps.value.pending && 'pending',
   ].filter(Boolean).join(' ')
@@ -739,6 +758,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     'rel',
     'shape',
     'size',
+    'square',
     'stretch',
     'target',
     'tone',
@@ -778,6 +798,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -822,6 +843,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -870,6 +892,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -908,6 +931,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -1007,6 +1031,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 /* A count is an adornment, not another line of label text. Keep the standard control height
    with enough inset for a 24px mark; large content can still grow the button naturally. */
 
+/* Short numeric and icon actions share a minimum box; large values remain readable. */
+
 /* Card actions inherit Button's palette and behavior; only their shared layout changes.
    The icon may contain any decorative composition. Empty icons remove their column. */
 
@@ -1103,6 +1129,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope:where([data-hn-ui-button])) {
+    --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     appearance: none;
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
@@ -1163,6 +1190,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])) {
+    --_button-square-size: 1.5rem;
     min-block-size: 1.5rem;
     padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25) !important;
     font-size: var(--ui-font-size-xs);
@@ -1173,6 +1201,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button])) {
+    --_button-square-size: var(--ui-control-size-sm);
     min-block-size: var(--ui-control-size-sm);
     padding: var(--ui-control-inset-block-sm, var(--ui-space-1))
       var(--ui-action-inset-sm, var(--ui-space-2)) !important;
@@ -1180,11 +1209,16 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="size=lg"]:where([data-hn-ui-button])) {
+    --_button-square-size: var(--ui-control-size-lg);
     min-block-size: var(--ui-control-size-lg);
     padding: var(--ui-control-inset-block-lg, var(--ui-space-3))
       var(--ui-action-inset-lg, var(--ui-space-4)) !important;
     font-size: var(--ui-font-size-md);
   }
+  :global(:scope[data-ui-button-state~="square"]:not([data-appearance="link"], [data-appearance="card"]):where([data-hn-ui-button])) {
+    min-inline-size: var(--_button-square-size);
+    padding-inline: var(--ui-space-1) !important;
+  }
   :global(:scope[data-appearance="card"]:where([data-hn-ui-button])) {
     display: grid !important;
     grid-template-columns: auto minmax(0, 1fr) auto;

package/vue/UiPagination.d.ts

@@ -0,0 +1,115 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare var __VLS_46: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_46) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    hasNext: {
+        type: PropType<boolean | null>;
+    };
+    hasPrevious: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    nextHref: {
+        type: PropType<string | null>;
+    };
+    nextLabel: {
+        type: PropType<string | null>;
+    };
+    page: {
+        type: PropType<number | null>;
+    };
+    pageLabel: {
+        type: PropType<string | null>;
+    };
+    pages: {
+        type: PropType<readonly ({
+            readonly value: number;
+            readonly href?: string | null;
+        })[] | null>;
+    };
+    previousHref: {
+        type: PropType<string | null>;
+    };
+    previousLabel: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+    navigate: (event: CustomEvent<{
+        readonly page: number;
+        readonly previousPage: number;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    hasNext: {
+        type: PropType<boolean | null>;
+    };
+    hasPrevious: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    nextHref: {
+        type: PropType<string | null>;
+    };
+    nextLabel: {
+        type: PropType<string | null>;
+    };
+    page: {
+        type: PropType<number | null>;
+    };
+    pageLabel: {
+        type: PropType<string | null>;
+    };
+    pages: {
+        type: PropType<readonly ({
+            readonly value: number;
+            readonly href?: string | null;
+        })[] | null>;
+    };
+    previousHref: {
+        type: PropType<string | null>;
+    };
+    previousLabel: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    onNavigate?: ((event: CustomEvent<{
+        readonly page: number;
+        readonly previousPage: number;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiPagination.js

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