@threadlabs/looma 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-cluster.css

@@ -50,6 +50,9 @@
     :scope[data-ui-cluster-state~="justify=between"] {
       justify-content: space-between;
     }
+    :scope[data-ui-cluster-state~="wrap=nowrap"] {
+      flex-wrap: nowrap;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {

package/vanilla/UiCluster.d.ts

@@ -9,6 +9,7 @@ export interface UiClusterProps {
   align?: "start" | "center" | "end" | "stretch" | null;
   gap?: "xs" | "s" | "m" | "l" | "xl" | null;
   justify?: "start" | "center" | "end" | "between" | null;
+  wrap?: "wrap" | "nowrap" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCluster.js

@@ -8,6 +8,7 @@ export function createUiCluster(options = {}) {
   const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
   const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
   const prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
+  const prop3 = componentProps["wrap"] === undefined ? undefined : componentProps["wrap"];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -26,6 +27,7 @@ export function createUiCluster(options = {}) {
     { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
     { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
     { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
+    { name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], type: ["wrap","nowrap"], required: false },
   ]);
   return element;
 }

package/vue/UiCluster.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     align?: 'start' | 'center' | 'end' | 'stretch';
     gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
     justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: 'wrap' | 'nowrap';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/vue/UiCluster.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   align?: 'start' | 'center' | 'end' | 'stretch'
   gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
   justify?: 'start' | 'center' | 'end' | 'between'
+  wrap?: 'wrap' | 'nowrap'
 }>()
 
 /** The values the styles' :host-state() rules test. */
@@ -16,6 +17,7 @@ const hostState = computed(() =>
     props.gap && `gap gap=${props.gap}`,
     props.align && `align align=${props.align}`,
     props.justify && `justify justify=${props.justify}`,
+    props.wrap && `wrap wrap=${props.wrap}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -77,6 +79,9 @@ const hostState = computed(() =>
 [data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"] {
   justify-content: space-between;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"] {
+  flex-wrap: nowrap;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-cluster"][hidden] {

package/vue/chunks/UiCluster.js

@@ -10,7 +10,8 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	props: {
 		align: {},
 		gap: {},
-		justify: {}
+		justify: {},
+		wrap: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -18,12 +19,13 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const hostState = computed(() => [
 			props.gap && `gap gap=${props.gap}`,
 			props.align && `align align=${props.align}`,
-			props.justify && `justify justify=${props.justify}`
+			props.justify && `justify justify=${props.justify}`,
+			props.wrap && `wrap wrap=${props.wrap}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-81b18ffc"]]);
+}), [["__scopeId", "data-v-b98d575c"]]);
 //#endregion
 export { UiCluster_default as t };

package/vue/components.css

@@ -1240,7 +1240,7 @@ input[data-v-5e151d99]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-cluster"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
@@ -1250,42 +1250,45 @@ input[data-v-5e151d99]:focus-visible {
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-b98d575c] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-b98d575c] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-b98d575c] {
   align-items: stretch;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-b98d575c] {
   justify-content: center;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-b98d575c] {
   justify-content: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-b98d575c] {
   justify-content: space-between;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"][data-v-b98d575c] {
+  flex-wrap: nowrap;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-81b18ffc] {
+[data-component~="ui-cluster"][hidden][data-v-b98d575c] {
   display: none;
 }