@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiCallout.vue

@@ -1,104 +1,171 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from "vue";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-};
-
-const props = withDefaults(defineProps<{
-  tone?: "info" | "note" | "warning" | "success" | "danger" | null;
-}>(), {
-  tone: "info",
-});
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["tone"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
-
-function read(name: string): unknown {
-  return (props as Record<string, unknown>)[name];
-}
-
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    tone?: 'info' | 'note' | 'warning' | 'success' | 'danger'
+  }>(),
+  {
+    tone: 'info',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.tone && `tone tone=${props.tone}`,
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <div data-component="ui-callout" role="note" v-bind="$attrs" :data-ui-callout-state="hostState || undefined"><span class="icon" aria-hidden="true"><template v-if="hn.t((props.tone === 'info'))"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></template><template v-if="hn.t((props.tone === 'note'))"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"></path><path d="M13 2v7h7"></path><path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path></svg></template><template v-if="hn.t((props.tone === 'warning'))"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></template><template v-if="hn.t((props.tone === 'success'))"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></template><template v-if="hn.t((props.tone === 'danger'))"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg></template></span><div class="content"><slot></slot></div></div>
+  <div
+    data-component="ui-callout"
+    role="note"
+    v-bind="$attrs"
+    :data-ui-callout-state="hostState || undefined"
+  >
+    <span class="icon" aria-hidden="true"><svg
+        v-if="tone === 'info'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="M12 16v-4"></path>
+        <path d="M12 8h.01"></path>
+      </svg>
+      <svg
+        v-if="tone === 'note'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"></path>
+        <path d="M13 2v7h7"></path>
+        <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path>
+      </svg>
+      <svg
+        v-if="tone === 'warning'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+        <path d="M12 9v4"></path>
+        <path d="M12 17h.01"></path>
+      </svg>
+      <svg
+        v-if="tone === 'success'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="m9 12 2 2 4-4"></path>
+      </svg>
+      <svg
+        v-if="tone === 'danger'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="m15 9-6 6"></path>
+        <path d="m9 9 6 6"></path>
+      </svg></span>
+    <div class="content"><slot /></div>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-callout"] {
-      --_callout-surface: var(--ui-info-soft);
-      --_callout-border: var(--ui-info-solid);
-      --_callout-icon: var(--ui-info-solid);
-
-      display: grid;
-      grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
-      gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
-      align-items: start;
-      max-width: 100%;
-      padding: var(--ui-callout-padding-block, var(--ui-space-2)) var(--ui-callout-padding-inline, var(--ui-space-3));
-      border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-      border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
-      border-radius: var(--ui-radius-2);
-      background: var(--ui-callout-surface, var(--_callout-surface));
-      color: var(--ui-callout-text, var(--ui-text-primary));
-      font-family: var(--ui-font-family-sans);
-      font-size: var(--ui-font-size-sm);
-      font-weight: var(--ui-font-normal);
-      line-height: var(--ui-line-height-md);
-    }
+  --_callout-surface: var(--ui-info-soft);
+  --_callout-border: var(--ui-info-solid);
+  --_callout-icon: var(--ui-info-solid);
+
+  display: grid;
+  grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
+  gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
+  align-items: start;
+  max-width: 100%;
+  padding: var(--ui-callout-padding-block, var(--ui-space-2))
+    var(--ui-callout-padding-inline, var(--ui-space-3));
+  border: var(--ui-callout-border-width, 1px) solid
+    color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+  border-inline-start: var(--ui-callout-leading-border-width, 4px) solid
+    var(--ui-callout-border, var(--_callout-border));
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-callout-surface, var(--_callout-surface));
+  color: var(--ui-callout-text, var(--ui-text-primary));
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
+}
 
-    /* One line box tall, so the icon centres on the first line of text. */
-    .icon {
-      display: grid;
-      place-items: center;
-      inline-size: var(--ui-callout-icon-column, 1.125rem);
-      block-size: 1lh;
-      color: var(--ui-callout-icon, var(--_callout-icon));
-    }
+/* One line box tall, so the icon centres on the first line of text. */
+.icon {
+  display: grid;
+  place-items: center;
+  inline-size: var(--ui-callout-icon-column, 1.125rem);
+  block-size: 1lh;
+  color: var(--ui-callout-icon, var(--_callout-icon));
+}
 
-    .icon svg {
-      inline-size: var(--ui-callout-icon-size, 1.125rem);
-      block-size: var(--ui-callout-icon-size, 1.125rem);
-    }
+.icon svg {
+  inline-size: var(--ui-callout-icon-size, 1.125rem);
+  block-size: var(--ui-callout-icon-size, 1.125rem);
+}
 
-    .content {
-      min-inline-size: 0;
-    }
+.content {
+  min-inline-size: 0;
+}
 
-    [data-component~="ui-callout"][data-ui-callout-state~="tone=note"] {
-      --_callout-surface: var(--ui-surface-muted);
-      --_callout-border: var(--ui-border-strong);
-      --_callout-icon: var(--ui-text-secondary);
-    }
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"] {
+  --_callout-surface: var(--ui-surface-muted);
+  --_callout-border: var(--ui-border-strong);
+  --_callout-icon: var(--ui-text-secondary);
+}
 
-    [data-component~="ui-callout"][data-ui-callout-state~="tone=warning"] {
-      --_callout-surface: var(--ui-warning-soft);
-      --_callout-border: var(--ui-warning-solid);
-      --_callout-icon: var(--ui-warning-solid);
-    }
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"] {
+  --_callout-surface: var(--ui-warning-soft);
+  --_callout-border: var(--ui-warning-solid);
+  --_callout-icon: var(--ui-warning-solid);
+}
 
-    [data-component~="ui-callout"][data-ui-callout-state~="tone=success"] {
-      --_callout-surface: var(--ui-success-soft);
-      --_callout-border: var(--ui-success-solid);
-      --_callout-icon: var(--ui-success-solid);
-    }
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"] {
+  --_callout-surface: var(--ui-success-soft);
+  --_callout-border: var(--ui-success-solid);
+  --_callout-icon: var(--ui-success-solid);
+}
 
-    [data-component~="ui-callout"][data-ui-callout-state~="tone=danger"] {
-      --_callout-surface: var(--ui-danger-soft);
-      --_callout-border: var(--ui-danger-solid);
-      --_callout-icon: var(--ui-danger-solid);
-    }
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"] {
+  --_callout-surface: var(--ui-danger-soft);
+  --_callout-border: var(--ui-danger-solid);
+  --_callout-icon: var(--ui-danger-solid);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-callout"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-callout"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiCheckbox.d.ts

@@ -1,9 +1,9 @@
 type __VLS_Props = {
-    checked?: boolean | null;
-    disabled?: boolean | null;
-    indeterminate?: boolean | null;
-    required?: boolean | null;
-    value?: string | null;
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    required?: boolean;
+    value?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -15,18 +15,22 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
+    "update:checked": (value: boolean) => any;
+    "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChange?: ((detail: {
         readonly checked: boolean;
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
-    disabled: boolean | null;
-    checked: boolean | null;
-    indeterminate: boolean | null;
-    required: boolean | null;
-    value: string | null;
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    required: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;