@threadlabs/looma 0.5.0 → 0.5.2

package/vue/UiEditorToolbar.d.ts

@@ -1,12 +1,12 @@
 type __VLS_Props = {
-    floating?: boolean | null;
+    floating?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    floating: boolean | null;
+    floating: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiEditorToolbar.vue

@@ -1,138 +1,151 @@
-<!-- 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<{
-  floating?: boolean | null;
-}>(), {
-  floating: false,
-});
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["floating"] 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<{
+    floating?: boolean
+  }>(),
+  {
+    floating: false,
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.floating && 'floating',
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <div data-component="ui-editor-toolbar" role="toolbar" aria-label="Editor toolbar" v-bind="$attrs" :data-ui-editor-toolbar-state="hostState || undefined"><slot></slot></div>
+  <div
+    data-component="ui-editor-toolbar"
+    role="toolbar"
+    aria-label="Editor toolbar"
+    v-bind="$attrs"
+    :data-ui-editor-toolbar-state="hostState || undefined"
+  >
+    <slot />
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-editor-toolbar"] {
-      position: sticky;
-      top: 0;
-      z-index: var(--ui-editor-toolbar-z-index, 10);
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: var(--ui-editor-toolbar-gap, 2px);
-      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
-      min-height: var(--ui-editor-toolbar-min-height, 48px);
-      overflow-x: auto;
-      scrollbar-width: none;
-      white-space: nowrap;
-      background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
-      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-    }
-
-    [data-component~="ui-editor-toolbar"]::-webkit-scrollbar {
-      display: none;
-    }
+  position: sticky;
+  top: 0;
+  z-index: var(--ui-editor-toolbar-z-index, 10);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--ui-editor-toolbar-gap, 2px);
+  padding: var(--ui-editor-toolbar-padding-block, 6px)
+    var(--ui-editor-toolbar-padding-inline, 12px);
+  min-height: var(--ui-editor-toolbar-min-height, 48px);
+  overflow-x: auto;
+  scrollbar-width: none;
+  white-space: nowrap;
+  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+}
 
-    [data-component~="ui-editor-toolbar"] > :slotted(*) {
-      flex: 0 0 auto;
-    }
+[data-component~="ui-editor-toolbar"]::-webkit-scrollbar {
+  display: none;
+}
 
-    :slotted(.divider) {
-      width: 1px;
-      height: 20px;
-      background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
-      flex-shrink: 0;
-      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
-    }
+[data-component~="ui-editor-toolbar"] > :slotted(*) {
+  flex: 0 0 auto;
+}
 
-    [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-      position: static;
-      top: auto;
-      width: max-content;
-      max-width: min(calc(100vw - 24px), 100%);
-      min-height: auto;
-      padding: var(--ui-editor-toolbar-floating-padding, 4px);
-      overflow-x: visible;
-      background: color-mix(in srgb, var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%, transparent);
-      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
-      box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
-      backdrop-filter: blur(10px);
-    }
+:slotted(.divider) {
+  width: 1px;
+  height: 20px;
+  background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
+  flex-shrink: 0;
+  margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+}
 
-    @media (max-width: 767px) {
-      [data-component~="ui-editor-toolbar"] {
-        position: fixed;
-        top: auto;
-        bottom: env(safe-area-inset-bottom);
-        left: 0;
-        right: 0;
-        min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-        border-bottom: none;
-        box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
-      }
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+  position: static;
+  top: auto;
+  width: max-content;
+  max-width: min(calc(100vw - 24px), 100%);
+  min-height: auto;
+  padding: var(--ui-editor-toolbar-floating-padding, 4px);
+  overflow-x: visible;
+  background: color-mix(
+    in srgb,
+    var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%,
+    transparent
+  );
+  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+  box-shadow: var(
+    --ui-editor-toolbar-floating-shadow,
+    var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+  );
+  backdrop-filter: blur(10px);
+}
 
-      [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-        position: static;
-        inset: auto;
-        min-height: auto;
-        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-        border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
-        box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
-      }
-    }
+@media (max-width: 767px) {
+  [data-component~="ui-editor-toolbar"] {
+    position: fixed;
+    top: auto;
+    bottom: env(safe-area-inset-bottom);
+    left: 0;
+    right: 0;
+    min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+    border-bottom: none;
+    box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+  }
+
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+    position: static;
+    inset: auto;
+    min-height: auto;
+    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+    box-shadow: var(
+      --ui-editor-toolbar-floating-shadow,
+      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+    );
+  }
+}
 
-    /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-    .looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"] {
-      position: static;
-      min-height: var(--ui-editor-toolbar-min-height, 48px);
-      overscroll-behavior-inline: contain;
-      background: transparent;
-      border: 0;
-      box-shadow: none;
-    }
+/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"] {
+  position: static;
+  min-height: var(--ui-editor-toolbar-min-height, 48px);
+  overscroll-behavior-inline: contain;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
 
-    /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-      width: 100%;
-      max-width: none;
-      min-height: 100%;
-      padding: 0;
-      overflow-x: auto;
-      overflow-y: hidden;
-      overscroll-behavior-inline: contain;
-      scroll-snap-type: x mandatory;
-      background: transparent;
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      backdrop-filter: none;
-    }
+/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+.looma-editor__mobile-toolbar-shell
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: x mandatory;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-editor-toolbar"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-editor-toolbar"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiFloatingActionButton.d.ts

@@ -1,16 +1,16 @@
 type __VLS_Props = {
-    disabled?: boolean | null;
-    label?: string | null;
-    mobileOnly?: boolean | null;
+    disabled?: boolean;
+    label?: string;
+    mobileOnly?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string | null;
-    disabled: boolean | null;
-    mobileOnly: boolean | null;
+    label: string;
+    disabled: boolean;
+    mobileOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiFloatingActionButton.vue

@@ -1,116 +1,117 @@
-<!-- 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),
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-};
-
-const props = withDefaults(defineProps<{
-  disabled?: boolean | null;
-  label?: string | null;
-  mobileOnly?: boolean | null;
-}>(), {
-  disabled: false,
-  label: "",
-  mobileOnly: false,
-});
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["mobileOnly"] 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<{
+    disabled?: boolean
+    label?: string
+    mobileOnly?: boolean
+  }>(),
+  {
+    disabled: false,
+    label: '',
+    mobileOnly: false,
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.mobileOnly && 'mobileOnly',
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <button data-component="ui-floating-action-button" type="button" v-bind="$attrs" :aria-label="hn.enumerated(props.label)" :disabled="hn.attr(props.disabled)" :data-ui-floating-action-button-state="hostState || undefined"><slot></slot></button>
+  <button
+    data-component="ui-floating-action-button"
+    type="button"
+    v-bind="$attrs"
+    :aria-label="label"
+    :disabled="disabled"
+    :data-ui-floating-action-button-state="hostState || undefined"
+  >
+    <slot />
+  </button>
 </template>
 
 <style scoped>
 [data-component~="ui-floating-action-button"] {
-      position: fixed;
-      inset-block-end: calc(var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom));
-      inset-inline-end: max(
-        var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
-        env(safe-area-inset-right)
-      );
-      inline-size: var(--ui-floating-action-button-size, 56px);
-      block-size: var(--ui-floating-action-button-size, 56px);
-      display: inline-flex;
-      z-index: var(--ui-floating-action-button-z-index, 100);
-    }
+  position: fixed;
+  inset-block-end: calc(
+    var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)
+  );
+  inset-inline-end: max(
+    var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+    env(safe-area-inset-right)
+  );
+  inline-size: var(--ui-floating-action-button-size, 56px);
+  block-size: var(--ui-floating-action-button-size, 56px);
+  display: inline-flex;
+  z-index: var(--ui-floating-action-button-z-index, 100);
+}
 
-    [data-component~="ui-floating-action-button"] {
-      appearance: none;
-      border: none;
-      border-radius: 999px;
-      margin: 0;
-      padding: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
-      color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
-      box-shadow: var(
-        --ui-floating-action-button-shadow,
-        0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
-      );
-      cursor: pointer;
-      transition:
-        background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
-        transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
-        box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
-    }
+[data-component~="ui-floating-action-button"] {
+  appearance: none;
+  border: none;
+  border-radius: 999px;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
+  color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
+  box-shadow: var(
+    --ui-floating-action-button-shadow,
+    0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
+  );
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+    transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+    box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+}
 
-    [data-component~="ui-floating-action-button"]:hover:enabled {
-      background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
-      box-shadow: var(
-        --ui-floating-action-button-hover-shadow,
-        0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
-      );
-    }
+[data-component~="ui-floating-action-button"]:hover:enabled {
+  background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
+  box-shadow: var(
+    --ui-floating-action-button-hover-shadow,
+    0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
+  );
+}
 
-    [data-component~="ui-floating-action-button"]:active:enabled {
-      transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
-    }
+[data-component~="ui-floating-action-button"]:active:enabled {
+  transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+}
 
-    [data-component~="ui-floating-action-button"]:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
-      outline-offset: 2px;
-    }
+[data-component~="ui-floating-action-button"]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline-offset: 2px;
+}
 
-    [data-component~="ui-floating-action-button"]:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
+[data-component~="ui-floating-action-button"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 
-    :slotted(svg) {
-      inline-size: var(--ui-floating-action-button-icon-size, 24px);
-      block-size: var(--ui-floating-action-button-icon-size, 24px);
-      flex-shrink: 0;
-    }
+:slotted(svg) {
+  inline-size: var(--ui-floating-action-button-icon-size, 24px);
+  block-size: var(--ui-floating-action-button-icon-size, 24px);
+  flex-shrink: 0;
+}
 
-    @media (min-width: 768px) {
-      [data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"] {
-        display: none;
-      }
-    }
+@media (min-width: 768px) {
+  [data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"] {
+    display: none;
+  }
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-floating-action-button"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-floating-action-button"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiFormField.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
-    disabled?: boolean | null;
-    invalid?: boolean | null;
-    required?: boolean | null;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
@@ -14,9 +14,9 @@ type __VLS_Slots = {} & {
     error?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    invalid: boolean | null;
-    disabled: boolean | null;
-    required: boolean | null;
+    invalid: boolean;
+    disabled: 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;