@threadlabs/looma 0.39.5 → 0.40.0

package/vanilla/UiPagination.js

@@ -32,7 +32,7 @@ export function createUiPagination(options = {}, html) {
     const s = document.createComment("html-next:item-start"), t = document.createComment("html-next:item-end");
     n.prepend(s);
     n.append(t);
-    const r = { k: undefined, i: o, n: s, t, x: 0, y: 0, j, l, a1: t1, a2: t2, w: 0, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: "", a0: t0, e0: t0.nextSibling, b0: undefined };
+    const r = { k: undefined, i: o, n: s, t, x: 0, y: 0, j, l, a1: t1, a2: t2, w: 0, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: "", a0: t0, e0: t0.nextSibling, b0: undefined };
     p1(r, -1, E);
     return r;
   };
@@ -62,35 +62,32 @@ export function createUiPagination(options = {}, html) {
       if (s3 !== r.v3) writeAttribute(r.a1, "disabled", r.v3 = s3);
     }
     if (c & 1073741824) {
-      const x4 = trackContainer(r, readIndex({ "true": "a", "false": "button" }, textCall("concat", [(defaultValue(readMember(o, "href"), "") !== "")])));
+      const x4 = trackContainer(r, readIndex({ "true": readMember(o, "href"), "false": null }, textCall("concat", [(defaultValue(readMember(o, "href"), "") !== "")])));
       if (x4 !== NONCONFORMING) {
-        const s4 = toAttribute(x4, "as");
-        if (s4 !== r.v4) writeAttribute(r.a1, "as", r.v4 = s4);
+        const s4 = toAttribute(x4, "href");
+        if (s4 !== r.v4) writeUrlAttribute(r.a1, "href", r.v4 = s4);
       }
-      const x5 = trackContainer(r, readMember(o, "href"));
-      const s5 = toAttribute(x5, "href");
-      if (s5 !== r.v5) writeUrlAttribute(r.a1, "href", r.v5 = s5);
-      const x6 = trackContainer(r, readMember(o, "value"));
-      const s6 = toAttribute(x6, "data-pagination-page");
-      if (s6 !== r.v6) writeAttribute(r.a1, "data-pagination-page", r.v6 = s6);
-      const x7 = formatCall("format", [trackContainer(r, readMember(o, "value")), "number"], "number");
-      if (x7 !== NONCONFORMING) {
-        const s9 = toText(x7);
-        if (s9 !== r.v9) r.a2.data = r.v9 = s9;
+      const x5 = trackContainer(r, readMember(o, "value"));
+      const s5 = toAttribute(x5, "data-pagination-page");
+      if (s5 !== r.v5) writeAttribute(r.a1, "data-pagination-page", r.v5 = s5);
+      const x6 = formatCall("format", [trackContainer(r, readMember(o, "value")), "number"], "number");
+      if (x6 !== NONCONFORMING) {
+        const s8 = toText(x6);
+        if (s8 !== r.v8) r.a2.data = r.v8 = s8;
       }
     }
     if (c & 1073741952) {
-      const x8 = textCall("concat", [v[7], " ", formatCall("format", [trackContainer(r, readMember(o, "value")), "number"], "number")]);
-      if (x8 !== NONCONFORMING) {
-        const s7 = toAttribute(x8, "aria-label");
-        if (s7 !== r.v7) writeAttribute(r.a1, "aria-label", r.v7 = s7);
+      const x7 = textCall("concat", [v[7], " ", formatCall("format", [trackContainer(r, readMember(o, "value")), "number"], "number")]);
+      if (x7 !== NONCONFORMING) {
+        const s6 = toAttribute(x7, "aria-label");
+        if (s6 !== r.v6) writeAttribute(r.a1, "aria-label", r.v6 = s6);
       }
     }
     if (c & 1073741888) {
-      const x9 = trackContainer(r, readIndex({ "true": "page", "false": null }, textCall("concat", [(readMember(o, "value") === v[6])])));
-      if (x9 !== NONCONFORMING) {
-        const s8 = toAttribute(x9, "aria-current");
-        if (s8 !== r.v8) writeAttribute(r.a1, "aria-current", r.v8 = s8);
+      const x8 = trackContainer(r, readIndex({ "true": "page", "false": null }, textCall("concat", [(readMember(o, "value") === v[6])])));
+      if (x8 !== NONCONFORMING) {
+        const s7 = toAttribute(x8, "aria-current");
+        if (s7 !== r.v7) writeAttribute(r.a1, "aria-current", r.v7 = s7);
       }
     }
     if (c & -1073741568 && !((truthy(binaryValue(">", r.j, 0)) && truthy(binaryValue(">", readMember(o, "value"), binaryValue("+", readMember(readIndex(v[8], binaryValue("-", r.j, 1, undefined, undefined, subtract)), "value"), 1, undefined, undefined, add))))) !== !r.b0) {
@@ -124,8 +121,8 @@ export function createUiPagination(options = {}, html) {
       const x1 = v[11];
       const s1 = toAttribute(x1, "size");
       if (s1 !== r.v1) writeAttribute(r.a1, "size", r.v1 = s1);
-      const s7 = toAttribute(x1, "size");
-      if (s7 !== r.v7) writeAttribute(r.a3, "size", r.v7 = s7);
+      const s6 = toAttribute(x1, "size");
+      if (s6 !== r.v6) writeAttribute(r.a3, "size", r.v6 = s6);
     }
     if (c & 69) {
       const x2 = ((truthy(v[0]) || !truthy(v[2])) || truthy(binaryValue("<=", v[6], 1)));
@@ -133,53 +130,43 @@ export function createUiPagination(options = {}, html) {
       if (s2 !== r.v2) writeAttribute(r.a1, "disabled", r.v2 = s2);
     }
     if (c & 1073742336) {
-      const x3 = readIndex({ "true": "a", "false": "button" }, textCall("concat", [(v[9] !== "")]));
+      const x3 = readIndex({ "true": v[9], "false": null }, textCall("concat", [(v[9] !== "")]));
       if (x3 !== NONCONFORMING) {
-        const s3 = toAttribute(x3, "as");
-        if (s3 !== r.v3) writeAttribute(r.a1, "as", r.v3 = s3);
+        const s3 = toAttribute(x3, "href");
+        if (s3 !== r.v3) writeUrlAttribute(r.a1, "href", r.v3 = s3);
       }
     }
-    if (c & 512) {
-      const x4 = v[9];
-      const s4 = toAttribute(x4, "href");
-      if (s4 !== r.v4) writeUrlAttribute(r.a1, "href", r.v4 = s4);
-    }
     if (c & 1024) {
-      const x5 = v[10];
-      const s5 = toAttribute(x5, "aria-label");
-      if (s5 !== r.v5) writeAttribute(r.a1, "aria-label", r.v5 = s5);
+      const x4 = v[10];
+      const s4 = toAttribute(x4, "aria-label");
+      if (s4 !== r.v4) writeAttribute(r.a1, "aria-label", r.v4 = s4);
     }
     if (c & 64) {
-      const x6 = binaryValue("-", v[6], 1, undefined, undefined, subtract);
-      const s6 = toAttribute(x6, "data-pagination-page");
-      if (s6 !== r.v6) writeAttribute(r.a1, "data-pagination-page", r.v6 = s6);
+      const x5 = binaryValue("-", v[6], 1, undefined, undefined, subtract);
+      const s5 = toAttribute(x5, "data-pagination-page");
+      if (s5 !== r.v5) writeAttribute(r.a1, "data-pagination-page", r.v5 = s5);
     }
     if (c & 3) {
-      const x7 = (truthy(v[0]) || !truthy(v[1]));
-      const s8 = toAttribute(x7, "disabled");
-      if (s8 !== r.v8) writeAttribute(r.a3, "disabled", r.v8 = s8);
+      const x6 = (truthy(v[0]) || !truthy(v[1]));
+      const s7 = toAttribute(x6, "disabled");
+      if (s7 !== r.v7) writeAttribute(r.a3, "disabled", r.v7 = s7);
     }
     if (c & 1073741840) {
-      const x8 = readIndex({ "true": "a", "false": "button" }, textCall("concat", [(v[4] !== "")]));
-      if (x8 !== NONCONFORMING) {
-        const s9 = toAttribute(x8, "as");
-        if (s9 !== r.v9) writeAttribute(r.a3, "as", r.v9 = s9);
+      const x7 = readIndex({ "true": v[4], "false": null }, textCall("concat", [(v[4] !== "")]));
+      if (x7 !== NONCONFORMING) {
+        const s8 = toAttribute(x7, "href");
+        if (s8 !== r.v8) writeUrlAttribute(r.a3, "href", r.v8 = s8);
       }
     }
-    if (c & 16) {
-      const x9 = v[4];
-      const s10 = toAttribute(x9, "href");
-      if (s10 !== r.v10) writeUrlAttribute(r.a3, "href", r.v10 = s10);
-    }
     if (c & 32) {
-      const x10 = v[5];
-      const s11 = toAttribute(x10, "aria-label");
-      if (s11 !== r.v11) writeAttribute(r.a3, "aria-label", r.v11 = s11);
+      const x8 = v[5];
+      const s9 = toAttribute(x8, "aria-label");
+      if (s9 !== r.v9) writeAttribute(r.a3, "aria-label", r.v9 = s9);
     }
     if (c & 64) {
-      const x11 = binaryValue("+", v[6], 1, undefined, undefined, add);
-      const s12 = toAttribute(x11, "data-pagination-page");
-      if (s12 !== r.v12) writeAttribute(r.a3, "data-pagination-page", r.v12 = s12);
+      const x9 = binaryValue("+", v[6], 1, undefined, undefined, add);
+      const s10 = toAttribute(x9, "data-pagination-page");
+      if (s10 !== r.v10) writeAttribute(r.a3, "data-pagination-page", r.v10 = s10);
     }
     if (c & 1073742080) r.L0.update(v[8], d, c);
     if (c !== -1 && c & 1073744321) r.L0.each(c, d);
@@ -192,7 +179,7 @@ export function createUiPagination(options = {}, html) {
   const t2 = t1.nextSibling.nextSibling;
   const t3 = t2.nextSibling.nextSibling.nextSibling;
   const t4 = t3.nextSibling.nextSibling;
-  const R = { n: element, a1: t1, a3: t3, v0: undefined, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, L0: new RangedPositionalList(t2, t2.nextSibling, m1, p1, (o) => readMember(o, "value"), "item"), a4: t4, e1: t4.nextSibling, b1: undefined, f1: undefined };
+  const R = { n: element, a1: t1, a3: t3, v0: undefined, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null, L0: new RangedPositionalList(t2, t2.nextSibling, m1, p1, (o) => readMember(o, "value"), "item"), a4: t4, e1: t4.nextSibling, b1: undefined, f1: undefined };
   const I = { B };
   const J = project(I, children, slots);
   attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);

package/vue/UiButton.d.ts

@@ -26,9 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     align: {
         type: PropType<"center" | "start" | null>;
     };
-    as: {
-        type: PropType<"button" | "a" | null>;
-    };
     disabled: {
         type: PropType<boolean | null>;
     };
@@ -78,9 +75,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     align: {
         type: PropType<"center" | "start" | null>;
     };
-    as: {
-        type: PropType<"button" | "a" | null>;
-    };
     disabled: {
         type: PropType<boolean | null>;
     };

package/vue/UiButton.vue

@@ -44,21 +44,12 @@ const propValidityContract = {
       values: ['center', 'start'],
       default: 'center',
     },
-    as: {
-      type: { kind: 'terminal', name: 'keyword' },
-      required: false,
-      target: { attribute: 'as' },
-      description:
-        'The native element the button renders: a button, or a link (a) that navigates to href.',
-      values: ['button', 'a'],
-      default: 'button',
-    },
     disabled: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
       target: { attribute: 'disabled' },
       description:
-        'Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as="a" with href) drops its\n      href and states aria-disabled="true" instead, because a link has no native disabled state.',
+        'Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and\n      states aria-disabled="true" instead, because a link has no native disabled state.',
       default: false,
     },
     href: {
@@ -66,7 +57,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'href' },
       description:
-        'The link\'s destination. Pair it with as="a" so the button renders as a real link that navigates. A disabled link drops its href and states\n      aria-disabled="true", so it cannot be followed.',
+        'The link\'s destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A\n      disabled link drops its href and states aria-disabled="true", so it cannot be followed.',
     },
     loading: {
       type: { kind: 'terminal', name: 'boolean' },
@@ -97,7 +88,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'rel' },
       description:
-        'The link\'s relationship to its destination, as on a native link. Only meaningful with as="a".',
+        'The link\'s relationship to its destination, as on a native link. Only meaningful with href.',
     },
     shape: {
       type: { kind: 'terminal', name: 'keyword' },
@@ -136,7 +127,7 @@ const propValidityContract = {
       type: { kind: 'terminal', name: 'string' },
       required: false,
       target: { attribute: 'target' },
-      description: 'Where a link opens, as on a native link. Only meaningful with as="a".',
+      description: 'Where a link opens, as on a native link. Only meaningful with href.',
     },
     tone: {
       type: { kind: 'terminal', name: 'keyword' },
@@ -169,7 +160,6 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   align: { type: null as unknown as PropType<'center' | 'start' | null> },
-  as: { type: null as unknown as PropType<'button' | 'a' | null> },
   disabled: { type: null as unknown as PropType<boolean | null> },
   href: { type: null as unknown as PropType<string | null> },
   loading: { type: null as unknown as PropType<boolean | null> },
@@ -200,7 +190,6 @@ const props = defineProps({
 })
 const acceptedProps: Record<string, unknown> = {
   align: 'center',
-  as: 'button',
   disabled: false,
   href: null,
   loading: false,
@@ -218,7 +207,6 @@ const acceptedProps: Record<string, unknown> = {
 }
 const inputTracking = vuePropInputs(acceptedProps, {
   align: 'center',
-  as: 'button',
   disabled: false,
   loading: false,
   pending: false,
@@ -234,8 +222,6 @@ const inputTracking = vuePropInputs(acceptedProps, {
   switch (name) {
     case 'align':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
-    case 'as':
-      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'disabled':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'href':
@@ -279,9 +265,6 @@ const checkedProps = computed(() => {
       props['align'],
       props[BINDING_INPUTS_PROP],
     ) as 'center' | 'start',
-    as: propInputs.value<'button' | 'a' | null>('as', props['as'], props[BINDING_INPUTS_PROP]) as
-      | 'button'
-      | 'a',
     disabled: propInputs.value<boolean | null>(
       'disabled',
       props['disabled'],
@@ -703,11 +686,11 @@ const guardedBinding7 = computed(() => {
       ))
 })
 checkHydratedRoot(
-  (appearance.get() === 'card' && checkedProps.value.as === 'a')
+  (appearance.get() === 'card' && checkedProps.value.href !== null)
     ? 'a'
     : ((appearance.get() === 'card')
       ? 'button'
-      : ((checkedProps.value.as === 'a') ? 'a' : ('button'))),
+      : ((checkedProps.value.href !== null) ? 'a' : ('button'))),
   'ui-button',
 )
 
@@ -749,7 +732,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   },
   propNames: [
     'align',
-    'as',
     'disabled',
     'href',
     'loading',
@@ -774,7 +756,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
 <template>
   <a
-    v-if="appearance.get() === 'card' && checkedProps.as === 'a'"
+    v-if="appearance.get() === 'card' && checkedProps.href !== null"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
     data-hn
@@ -789,7 +771,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :tabindex="guardedBinding2"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
@@ -834,7 +815,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :aria-busy="checkedProps.loading || checkedProps.pending"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
@@ -868,7 +848,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
         /></slot></span>
   </button>
   <a
-    v-else-if="checkedProps.as === 'a'"
+    v-else-if="checkedProps.href !== null"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
     data-hn
@@ -883,7 +863,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :tabindex="guardedBinding6"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
@@ -922,7 +901,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :aria-busy="checkedProps.loading || checkedProps.pending"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"

package/vue/UiCallout.vue

@@ -325,7 +325,7 @@ const hostState = computed(() =>
     --_ui-callout-icon: var(--ui-callout-icon);
     --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-    --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
+    --_callout-surface: oklch(from var(--_callout-border) l c h / 10%);
     --_ui-selection-context-surface: light-dark(
       oklch(
         from var(--ui-callout-surface, var(--_callout-surface))

package/vue/UiEditorLinkCard.vue

@@ -352,7 +352,6 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
           >{{ checkedProps.detail }}</UiText></UiStack>{{ ' ' }}<template
           v-if="checkedProps.openHref !== ''"
         >{{ ' ' }}<UiButton
-            as="a"
             variant="ghost"
             tone="neutral"
             size="sm"

package/vue/UiPagination.vue

@@ -73,7 +73,7 @@ const propValidityContract = {
     nextHref: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
-      target: { attribute: 'href' },
+      target: { attribute: 'nexthref' },
       description: 'Optional native destination for Next. Empty renders a request button.',
       default: '',
     },
@@ -122,7 +122,7 @@ const propValidityContract = {
     previousHref: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
-      target: { attribute: 'href' },
+      target: { attribute: 'previoushref' },
       description: 'Optional native destination for Previous. Empty renders a request button.',
       default: '',
     },
@@ -428,7 +428,10 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
                   || indexValue === Symbol.for('html-next.invalid-result')
                   ? Symbol.for('html-next.invalid-result')
                   : objectValue[indexValue])(
-                  { true: 'a', false: 'button' },
+                  {
+                    true: inputRead(checkedProps.previousHref, inputStatus('previousHref', true)),
+                    false: null,
+                  },
                   concat(inputRead(checkedProps.previousHref, inputStatus('previousHref', true)) !== ''),
                 )) as any,
             READY_INPUT,
@@ -439,8 +442,7 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
             tone="neutral"
             :size="checkedProps.size"
             :disabled="boundInput.value"
-            :as="boundInputSnapshot.value"
-            :href="checkedProps.previousHref"
+            :href="boundInputSnapshot.value"
             :aria-label="checkedProps.previousLabel"
             :data-pagination-page="number(checkedProps.page) === undefined || number(1) === undefined
             ? undefined
@@ -449,8 +451,7 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
               [BINDING_INPUTS_PROP]: {
                 size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
                 disabled: () => boundInput,
-                as: () => boundInputSnapshot,
-                href: () => ({ value: checkedProps.previousHref, status: inputStatus('previousHref', true) }),
+                href: () => boundInputSnapshot,
               },
             }"
           ><UiIcon name="chevron-left" /></UiButton></template></template>{{ ' ' }}<KeyedBoundary
@@ -510,12 +511,12 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
                 :tone="boundInputSnapshot3.value"
                 :size="checkedProps.size"
                 :disabled="checkedProps.disabled"
-                :as="((objectValue: any, indexValue: any) =>
+                :href="((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])(
-                  { true: 'a', false: 'button' },
+                  { true: item.href, false: null },
                   concat((() => {
                     const left: any = item.href ?? ''
                     if (left === Symbol.for('html-next.invalid-result')) return left
@@ -524,7 +525,6 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
                     return left !== right
                   })()),
                 )"
-                :href="item.href"
                 :data-pagination-page="item.value"
                 :aria-label="concat(checkedProps.pageLabel, ' ', formatValue(item.value, 'number', 'format', 'number'))"
                 :aria-current="((objectValue: any, indexValue: any) =>
@@ -566,7 +566,7 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
                   || indexValue === Symbol.for('html-next.invalid-result')
                   ? Symbol.for('html-next.invalid-result')
                   : objectValue[indexValue])(
-                  { true: 'a', false: 'button' },
+                  { true: inputRead(checkedProps.nextHref, inputStatus('nextHref', true)), false: null },
                   concat(inputRead(checkedProps.nextHref, inputStatus('nextHref', true)) !== ''),
                 )) as any,
             READY_INPUT,
@@ -577,8 +577,7 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
             tone="neutral"
             :size="checkedProps.size"
             :disabled="boundInputSnapshot4.value"
-            :as="boundInputSnapshot5.value"
-            :href="checkedProps.nextHref"
+            :href="boundInputSnapshot5.value"
             :aria-label="checkedProps.nextLabel"
             :data-pagination-page="number(checkedProps.page) === undefined || number(1) === undefined
             ? undefined
@@ -587,8 +586,7 @@ useComponentHost(() => import('../components/ui-pagination/ui-pagination.js'), {
               [BINDING_INPUTS_PROP]: {
                 size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
                 disabled: () => boundInputSnapshot4,
-                as: () => boundInputSnapshot5,
-                href: () => ({ value: checkedProps.nextHref, status: inputStatus('nextHref', true) }),
+                href: () => boundInputSnapshot5,
               },
             }"
           ><UiIcon name="chevron-right" /></UiButton></template></template>{{