@threadlabs/looma 0.13.2 → 0.13.3

package/package.json

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

package/styles/ui-affordance-scope.css

@@ -3,17 +3,25 @@
 :scope {
       display: contents;
       --ui-affordance-scope-engaged: 0;
+      --ui-affordance-scope-guide: 1;
     }
 
     :scope[data-ui-affordance-scope-state~="engaged"] {
       --ui-affordance-scope-engaged: 1;
     }
 
+    /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+    :scope[data-ui-affordance-scope-state~="guide=none"] {
+      --ui-affordance-scope-guide: 0;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
     }
 }
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-editor-table-overlay.css

@@ -142,7 +142,7 @@
       height: var(--ui-affordance-guide-size);
       border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     }
 
@@ -231,7 +231,7 @@
       inset: 50% auto auto 50%;
       border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transform: translate(-50%, -50%);
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;

package/styles/ui-icon-button.css

@@ -96,7 +96,7 @@
       block-size: var(--ui-affordance-guide-size);
       border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transform: translate(-50%, -50%);
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;

package/styles/ui-sidebar.css

@@ -99,7 +99,7 @@
       inset-inline-start: 3px;
       inline-size: 2px;
       background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transition:
         background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
         opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);

package/vanilla/UiAffordanceScope.d.ts

@@ -6,6 +6,7 @@ export interface UiAffordanceScopeElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiAffordanceScopeEventMap>(type: K, listener: (this: UiAffordanceScopeElement, event: UiAffordanceScopeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiAffordanceScopeProps {
+  guide?: "dot" | "none" | null;
   nearRadius?: number | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiAffordanceScope.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-affordance-scope/ui-affordance-scope.js";
 import "../styles/ui-affordance-scope.css";
 
-const definition = {...{"contract":{"tag":"ui-affordance-scope","props":{"nearRadius":{"type":"number","required":false,"target":{"attribute":"nearradius"},"default":16}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}]},"declarations":[{"kind":"state","name":"engaged","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-affordance-scope","props":{"guide":{"type":{"enum":["dot","none"]},"required":false,"target":{"attribute":"guide"},"default":"dot"},"nearRadius":{"type":"number","required":false,"target":{"attribute":"nearradius"},"default":16}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}]},"declarations":[{"kind":"state","name":"engaged","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAffordanceScope(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiAffordanceScope.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    guide?: 'dot' | 'none';
     nearRadius?: number;
 };
 declare var __VLS_1: {};
@@ -6,6 +7,7 @@ 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<{}>, {
+    guide: "dot" | "none";
     nearRadius: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiAffordanceScope.vue

@@ -8,9 +8,11 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    guide?: 'dot' | 'none'
     nearRadius?: number
   }>(),
   {
+    guide: 'dot',
     nearRadius: 16,
   },
 )
@@ -22,6 +24,7 @@ const engaged = ref(false)
 const hostState = computed(() =>
   [
     engaged.value && 'engaged',
+    props.guide && `guide guide=${props.guide}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -48,12 +51,18 @@ useComponentHost(controllerModule.default, {
 [data-component~="ui-affordance-scope"] {
   display: contents;
   --ui-affordance-scope-engaged: 0;
+  --ui-affordance-scope-guide: 1;
 }
 
 [data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="engaged"] {
   --ui-affordance-scope-engaged: 1;
 }
 
+/* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="guide=none"] {
+  --ui-affordance-scope-guide: 0;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-affordance-scope"][hidden] {
   display: none;

package/vue/UiEditorTableOverlay.vue

@@ -408,7 +408,7 @@ useComponentHost(controllerModule.default, {
   height: var(--ui-affordance-guide-size);
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
@@ -497,7 +497,7 @@ useComponentHost(controllerModule.default, {
   inset: 50% auto auto 50%;
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transform: translate(-50%, -50%);
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;

package/vue/UiIconButton.vue

@@ -156,7 +156,7 @@ useComponentHost(controllerModule.default, {
   block-size: var(--ui-affordance-guide-size);
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transform: translate(-50%, -50%);
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;

package/vue/UiSidebar.vue

@@ -222,7 +222,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%,
     transparent
   );
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transition:
     background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);

package/vue/chunks/UiAffordanceScope.js

@@ -9,13 +9,16 @@ var _hoisted_1 = ["data-ui-affordance-scope-state"];
 var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiAffordanceScope",
-	props: { nearRadius: { default: 16 } },
+	props: {
+		guide: { default: "dot" },
+		nearRadius: { default: 16 }
+	},
 	setup(__props) {
 		const props = __props;
 		const root = ref(null);
 		const engaged = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [engaged.value && "engaged"].filter(Boolean).join(" "));
+		const hostState = computed(() => [engaged.value && "engaged", props.guide && `guide guide=${props.guide}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -31,6 +34,6 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0288ef7b"]]);
+}), [["__scopeId", "data-v-0ec8d3e6"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiEditorTableOverlay.js

@@ -181,6 +181,6 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-af4935bb"]]);
+}), [["__scopeId", "data-v-0de9cbcc"]]);
 //#endregion
 export { UiEditorTableOverlay_default as t };

package/vue/chunks/UiIconButton.js

@@ -59,6 +59,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-027d9fcb"]]);
+}), [["__scopeId", "data-v-a20a82b7"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiSidebar.js

@@ -85,6 +85,6 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-eff27033"]]);
+}), [["__scopeId", "data-v-6929aec9"]]);
 //#endregion
 export { UiSidebar_default as t };