@threadlabs/looma 0.32.1 → 0.33.0

package/vue/UiCheckbox.vue

@@ -382,15 +382,15 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 @keyframes ui-checkbox-check {
   from {
     opacity: 0;
-    transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
+    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
   }
   65% {
     opacity: 1;
-    transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
+    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
   }
   to {
     opacity: 1;
-    transform: translateY(-0.09rem) rotate(45deg) scale(1);
+    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
   }
 }
 
@@ -403,29 +403,47 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 @scope (.ui-checkbox) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-checkbox])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-checkbox-size: var(--ui-checkbox-size);
+    --_ui-checkbox-size: var(--ui-checkbox-size, var(--ui-choice-mark-size));
     --_ui-checkbox-invalid-border: var(
       --ui-checkbox-invalid-border,
       var(--ui-field-danger, var(--ui-danger-solid))
     );
 
-    display: inline-flex;
-    align-items: flex-start;
-    gap: var(--ui-checkbox-gap, var(--ui-space-2));
+    display: inline-flex !important;
+    align-items: flex-start !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
+    padding: 0 !important;
+    gap: var(--ui-checkbox-gap, var(--ui-space-2)) !important;
     max-inline-size: 100%;
     color: var(--ui-text-primary);
+    line-height: var(--ui-line-height-md) !important;
     cursor: pointer;
   }
   :global(.text:where([data-hn-ui-checkbox])) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-1);
+    font: inherit !important;
+    align-self: auto !important;
+    order: 1 !important;
+    position: static !important;
+    transform: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--ui-space-1) !important;
     min-inline-size: 0;
   }
 
   :global(.label:where([data-hn-ui-checkbox])) {
+    position: static !important;
+    transform: none !important;
+    margin: 0 !important;
+    padding-inline: 0 !important;
+    font: inherit !important;
     min-inline-size: 0;
-    line-height: var(--ui-line-height-md);
+    line-height: var(--ui-line-height-md) !important;
+    padding-block: max(0px, calc((var(--_ui-checkbox-size, 1.125rem) - 1lh) / 2)) !important;
   }
 
   :global(.description:where([data-hn-ui-checkbox])) {
@@ -435,19 +453,25 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   }
 
   :global(.description:empty:where([data-hn-ui-checkbox])) {
-    display: none;
+    display: none !important;
   }
 
   :global(input:where([data-hn-ui-checkbox])) {
     appearance: none;
     -webkit-appearance: none;
-    position: relative;
+    position: relative !important;
+    transform: none !important;
+    order: 0 !important;
+    box-sizing: border-box !important;
+    padding: 0 !important;
     flex: 0 0 auto;
-    inline-size: var(--_ui-checkbox-size, 1.125rem);
-    block-size: var(--_ui-checkbox-size, 1.125rem);
-    margin: 0.125em 0 0;
+    align-self: auto !important;
+    inline-size: var(--_ui-checkbox-size, 1.125rem) !important;
+    block-size: var(--_ui-checkbox-size, 1.125rem) !important;
+    font: inherit !important;
+    margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-    border-radius: var(--ui-radius-sm);
+    border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
     background: var(--ui-control-surface, var(--ui-surface-default));
     box-shadow: var(--ui-control-inset);
     cursor: pointer;
@@ -461,7 +485,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     content: "";
     position: absolute;
     opacity: 0;
-    transition: opacity 120ms var(--ui-motion-ease);
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
   :global(input:checked:where([data-hn-ui-checkbox])),
@@ -472,23 +496,24 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   }
   :global(input:checked:where([data-hn-ui-checkbox])::after) {
     inset: 0;
-    margin: auto;
-    inline-size: 0.28rem;
-    block-size: 0.5rem;
+    margin: auto !important;
+    inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
+    block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
     /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
        component, which left the tick with no style and no colour. */
     border-style: solid;
     border-color: var(--ui-text-on-accent);
-    border-width: 0 0.125rem 0.125rem 0;
+    border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125)
+      calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
     opacity: 1;
-    transform: translateY(-0.09rem) rotate(45deg);
-    animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
-      both;
+    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
+    animation: ui-checkbox-check var(--ui-motion-base)
+      var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
   }
 
   :global(input:indeterminate:where([data-hn-ui-checkbox])::after) {
-    inset: 50% 0.23rem auto;
-    block-size: 0.125rem;
+    inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
+    block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
     border-radius: var(--ui-radius-round);
     background: var(--ui-text-on-accent);
     opacity: 1;
@@ -542,12 +567,10 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   :global(:scope[data-ui-checkbox-state~="size=lg"]:where([data-hn-ui-checkbox])) {
     --_line: calc(var(--_font) * var(--ui-line-height-md));
     font-size: var(--_font);
-    padding-block: calc((var(--_row) - var(--_line)) / 2);
-  }
-
-  :global(:scope[data-ui-checkbox-state~="size=sm"] input:where([data-hn-ui-checkbox])),
-  :global(:scope[data-ui-checkbox-state~="size=lg"] input:where([data-hn-ui-checkbox])) {
-    margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+    padding-block: max(
+      0px,
+      calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)
+    ) !important;
   }
 
   @media (pointer: coarse) {
@@ -556,7 +579,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-checkbox])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiCluster.vue

@@ -233,38 +233,38 @@ const hostState = computed(() =>
 @scope (.ui-cluster) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-3);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-cluster-gap, var(--_layout-gap));
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--ui-cluster-gap, var(--_layout-gap)) !important;
     min-inline-size: 0;
     max-inline-size: 100%;
-    margin: 0;
+    margin: 0 !important;
   }
 
   :global(:scope[data-ui-cluster-state~="fixed"]:where([data-hn-ui-cluster])) {
     flex: none;
   }
   :global(:scope[data-ui-cluster-state~="padding=s"]:where([data-hn-ui-cluster])) {
-    padding: var(--ui-space-2);
+    padding: var(--ui-space-2) !important;
   }
   :global(:scope[data-ui-cluster-state~="padding=m"]:where([data-hn-ui-cluster])) {
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !important;
   }
   :global(:scope[data-ui-cluster-state~="padding=l"]:where([data-hn-ui-cluster])) {
-    padding: var(--ui-space-4);
+    padding: var(--ui-space-4) !important;
   }
   :global(:scope[data-ui-cluster-state~="paddingEnd=s"]:where([data-hn-ui-cluster])) {
-    padding-inline-end: var(--ui-space-2);
+    padding-inline-end: var(--ui-space-2) !important;
   }
   :global(:scope[data-ui-cluster-state~="paddingEnd=m"]:where([data-hn-ui-cluster])) {
-    padding-inline-end: var(--ui-space-3);
+    padding-inline-end: var(--ui-space-3) !important;
   }
   :global(:scope[data-ui-cluster-state~="paddingEnd=l"]:where([data-hn-ui-cluster])) {
-    padding-inline-end: var(--ui-space-4);
+    padding-inline-end: var(--ui-space-4) !important;
   }
   :global(:scope[data-ui-cluster-state~="paddingEnd=xl"]:where([data-hn-ui-cluster])) {
-    padding-inline-end: calc(var(--ui-space-4) * 4);
+    padding-inline-end: calc(var(--ui-space-4) * 4) !important;
   }
 
   :global(:scope[data-ui-cluster-state~="gap=xs"]:where([data-hn-ui-cluster])) {
@@ -283,31 +283,31 @@ const hostState = computed(() =>
     --_layout-gap: var(--ui-space-6);
   }
   :global(:scope[data-ui-cluster-state~="align=start"]:where([data-hn-ui-cluster])) {
-    align-items: flex-start;
+    align-items: flex-start !important;
   }
   :global(:scope[data-ui-cluster-state~="align=end"]:where([data-hn-ui-cluster])) {
-    align-items: flex-end;
+    align-items: flex-end !important;
   }
   :global(:scope[data-ui-cluster-state~="align=baseline"]:where([data-hn-ui-cluster])) {
-    align-items: baseline;
+    align-items: baseline !important;
   }
   :global(:scope[data-ui-cluster-state~="align=stretch"]:where([data-hn-ui-cluster])) {
-    align-items: stretch;
+    align-items: stretch !important;
   }
   :global(:scope[data-ui-cluster-state~="justify=center"]:where([data-hn-ui-cluster])) {
-    justify-content: center;
+    justify-content: center !important;
   }
   :global(:scope[data-ui-cluster-state~="justify=end"]:where([data-hn-ui-cluster])) {
-    justify-content: flex-end;
+    justify-content: flex-end !important;
   }
   :global(:scope[data-ui-cluster-state~="justify=between"]:where([data-hn-ui-cluster])) {
-    justify-content: space-between;
+    justify-content: space-between !important;
   }
   :global(:scope[data-ui-cluster-state~="wrap=nowrap"]:where([data-hn-ui-cluster])) {
-    flex-wrap: nowrap;
+    flex-wrap: nowrap !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-cluster])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiColorPicker.d.ts

@@ -0,0 +1,65 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    name: {
+        type: PropType<string | null>;
+    };
+    round: {
+        type: PropType<boolean | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    value: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    change: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    "update:value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    name: {
+        type: PropType<string | null>;
+    };
+    round: {
+        type: PropType<boolean | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    value: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    onInput?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    onChange?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiColorPicker.js

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