@threadlabs/looma 0.39.6 → 0.41.0

package/vanilla/UiSiteHeader.js

@@ -0,0 +1,96 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, toAttribute, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkFormat, checkString, defineComponent } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-site-header.css";
+
+const T0 = ["",[],"\n    ",["span",["class","menu"],4],"\n    ",["div",["class","identity"],"\n      ",["div",["class","brand"],4],"\n      ",["nav",["class","navigation"],4],"\n    "],"\n    ",["div",["class","actions"],4],"\n  "];
+const T1 = ["",[]];
+const T2 = ["",[]];
+const T3 = ["",[]];
+const T4 = ["",[]];
+let P0, P1, P2, P3, P4;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-site-header", b: generatedInputs };
+const D = { g: "ui-site-header", props: { "breakpoint": { "required":false,"values":["sm","md","lg"],"default":"lg", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "label": { "required":false,"default":"Main", c: checkString, t: "string", j: 0, m: "s" }, "sticky": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+
+export function createUiSiteHeader(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("header");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-site-header");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const r = { n };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 2) {
+      const x0 = v[1];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a2, "aria-label", r.v0 = s0);
+    }
+    if (c & 5) {
+      const x1 = hostState(["sticky","breakpoint"], [v[2], v[0]]);
+      const s1 = x1;
+      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-site-header-state", (r.v1 = s1) === "" ? null : s1);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a0, r.e0, "menu", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a1, r.e1, "brand", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "navigation", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m3(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p3(r.b2, c, d);
+    if (r.f3 === undefined) { r.f3 = 1; const at = fillSlot(r.a4, r.e3, "actions", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b3 = m4(d); at.before(r.b3.n); } }
+    else if (r.b3 !== undefined) p4(r.b3, c, d);
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild;
+  const t2 = t0.nextSibling.nextSibling;
+  const t3 = t2.firstChild.nextSibling;
+  const t4 = t3.firstChild;
+  const t5 = t3.nextSibling.nextSibling;
+  const t6 = t5.firstChild;
+  const t7 = t2.nextSibling.nextSibling.firstChild;
+  const R = { n: element, a2: t5, v0: null, v1: undefined, a0: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a1: t4, e1: t4.nextSibling, b1: undefined, f1: undefined, a3: t6, e2: t6.nextSibling, b2: undefined, f2: undefined, a4: t7, e3: t7.nextSibling, b3: undefined, f3: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-site-header", createUiSiteHeader, ["breakpoint","label","sticky"]);

package/vanilla/index.js

@@ -71,6 +71,7 @@ export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSiteHeader.js";
 export * from "./UiSkeleton.js";
 export * from "./UiSlider.js";
 export * from "./UiSpinner.js";

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/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>{{

package/vue/UiSiteHeader.d.ts

@@ -0,0 +1,47 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    menu?: (props: typeof __VLS_1) => any;
+} & {
+    brand?: (props: typeof __VLS_3) => any;
+} & {
+    navigation?: (props: typeof __VLS_5) => any;
+} & {
+    actions?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    breakpoint: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    sticky: {
+        type: PropType<boolean | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    breakpoint: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    sticky: {
+        type: PropType<boolean | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, 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/UiSiteHeader.js

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