@threadlabs/looma 0.6.0-rc.1 → 0.6.0

package/package.json

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

package/styles/ui-button.css

@@ -113,6 +113,23 @@
       transform: translateY(0);
     }
 
+    /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
+       Solid and danger already carry their own intent. */
+    :scope[data-ui-button-state~="tone=accent"]:scope[data-ui-button-state~="variant=outline"] {
+      border-color: var(--ui-button-accent-border, var(--ui-accent));
+      background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
+      color: var(--ui-button-accent-text, var(--ui-accent-active));
+    }
+
+    :scope[data-ui-button-state~="tone=accent"]:scope[data-ui-button-state~="variant=outline"]:hover:enabled {
+      border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
+      background: var(--ui-button-accent-hover-surface, color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)));
+    }
+
+    :scope[data-ui-button-state~="tone=accent"]:is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"]) {
+      color: var(--ui-button-accent-text, var(--ui-accent-active));
+    }
+
     :scope[data-ui-button-state~="variant=ghost"] {
       border-color: transparent;
       background: transparent;
@@ -147,29 +164,29 @@
 
     /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
     :scope:disabled {
-      opacity: var(--ui-button-disabled-opacity, 0.6);
+      opacity: var(--ui-button-disabled-opacity, 1);
       cursor: not-allowed;
-      border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
-      background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
-      color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+      border-color: var(--ui-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope[data-ui-button-state~="variant=solid"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
-      background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
-      color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+      border-color: var(--ui-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope[data-ui-button-state~="variant=danger"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
-      background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
-      color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+      border-color: var(--ui-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope[data-ui-button-state~="variant=ghost"]:disabled {
+      background: none;
       border-color: transparent;
-      background-color: transparent;
-      color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     @media (pointer: coarse) {
@@ -211,7 +228,8 @@
 
     :scope[data-ui-button-state~="variant=link"]:disabled {
       background: none;
-      color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
+      border-color: transparent;
+      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope[data-ui-button-state~="variant=link"]:focus-visible {
@@ -230,6 +248,9 @@
 @supports (text-box-trim: trim-both) {
     }
 
+    /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
+       Solid and danger already carry their own intent. */
+
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */

package/styles/ui-icon-button.css

@@ -162,20 +162,21 @@
 
     /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
     :scope:disabled {
-      opacity: var(--ui-icon-button-disabled-opacity, 0.6);
-      color: var(--ui-icon-button-disabled-text, inherit);
+      opacity: var(--ui-icon-button-disabled-opacity, 1);
+      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
       cursor: not-allowed;
     }
 
     :scope[data-ui-icon-button-state~="variant=outline"]:disabled {
-      border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
-      background-color: var(--ui-icon-button-disabled-surface, var(--ui-icon-button-outline-surface, var(--ui-surface-default)));
-      color: var(--ui-icon-button-disabled-text, var(--ui-icon-button-outline-text, var(--ui-text-primary)));
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"]:disabled {
-      background-color: var(--ui-icon-button-disabled-surface, var(--ui-icon-button-solid-surface, var(--ui-accent-solid)));
-      color: var(--ui-icon-button-disabled-text, var(--ui-icon-button-solid-text, var(--ui-text-on-accent)));
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope {

package/theme-dark.css

@@ -9,6 +9,8 @@
       --ui-text: #f0f0ec;
       --ui-text-secondary: #a0a09c;
       --ui-text-muted: #6a6a66;
+      --ui-disabled-surface: #242424;
+      --ui-disabled-text: #6a6a66;
       --ui-on-accent: #1a1a1a;
       --ui-on-danger: #1a1a1a;
 
@@ -47,6 +49,8 @@
     --ui-text: #f0f0ec;
     --ui-text-secondary: #a0a09c;
     --ui-text-muted: #6a6a66;
+    --ui-disabled-surface: #242424;
+    --ui-disabled-text: #6a6a66;
     --ui-on-accent: #1a1a1a;
     --ui-on-danger: #1a1a1a;
 

package/theme-high-contrast.css

@@ -8,6 +8,8 @@
       --ui-text: #000000;
       --ui-text-secondary: #111111;
       --ui-text-muted: #222222;
+      --ui-disabled-surface: #e6e6e6;
+      --ui-disabled-text: #333333;
       --ui-border: #000000;
       --ui-border-strong: #000000;
       --ui-control-border: #000000;
@@ -29,6 +31,8 @@
     --ui-text: #000000;
     --ui-text-secondary: #111111;
     --ui-text-muted: #222222;
+    --ui-disabled-surface: #e6e6e6;
+    --ui-disabled-text: #333333;
     --ui-border: #000000;
     --ui-border-strong: #000000;
     --ui-control-border: #000000;

package/theme-light.css

@@ -9,6 +9,8 @@
     --ui-text: #1a1a1a;
     --ui-text-secondary: #5c5c5c;
     --ui-text-muted: #9b9b9b;
+    --ui-disabled-surface: #f0f0ec;
+    --ui-disabled-text: #8a8a86;
     --ui-on-accent: #ffffff;
     --ui-on-danger: #ffffff;
 

package/tokens.css

@@ -28,6 +28,11 @@
     --ui-border: #e4e4e0;
     --ui-border-strong: #c8c8c4;
 
+    /* Disabled is one decision, not a per-component one: a neutral surface and text, at full
+       opacity, so a disabled control reads as unavailable rather than as a faded variant. */
+    --ui-disabled-surface: #f0f0ec;
+    --ui-disabled-text: #9b9b9b;
+
     /* Focus. */
     --ui-focus-ring: #5b55d6;
     --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);

package/vanilla/UiButton.d.ts

@@ -10,6 +10,7 @@ export interface UiButtonProps {
   disabled?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
   stretch?: boolean | null;
+  tone?: "neutral" | "accent" | null;
   variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiButton.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-button.css";
 
-const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"tone":{"type":{"enum":["neutral","accent"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vue/UiButton.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     stretch?: boolean;
+    tone?: 'neutral' | 'accent';
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link';
 };
 declare var __VLS_1: {};
@@ -10,6 +11,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<{}>, {
+    tone: "neutral" | "accent";
     variant: "outline" | "solid" | "danger" | "ghost" | "link";
     align: "center" | "start";
     disabled: boolean;

package/vue/UiButton.vue

@@ -10,6 +10,7 @@ const props = withDefaults(
     disabled?: boolean
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
+    tone?: 'neutral' | 'accent'
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
   }>(),
   {
@@ -17,6 +18,7 @@ const props = withDefaults(
     disabled: false,
     size: 'md',
     stretch: false,
+    tone: 'neutral',
     variant: 'outline',
   },
 )
@@ -28,6 +30,7 @@ const hostState = computed(() =>
     props.align && `align align=${props.align}`,
     props.stretch && 'stretch',
     props.size && `size size=${props.size}`,
+    props.tone && `tone tone=${props.tone}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -166,6 +169,26 @@ const hostState = computed(() =>
   transform: translateY(0);
 }
 
+/* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
+   Solid and danger already carry their own intent. */
+[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"] {
+  border-color: var(--ui-button-accent-border, var(--ui-accent));
+  background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
+  color: var(--ui-button-accent-text, var(--ui-accent-active));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"]:hover:enabled {
+  border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
+  background: var(
+    --ui-button-accent-hover-surface,
+    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
+  );
+}
+
+[data-component~="ui-button"][data-ui-button-state~="tone=accent"]:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"]) {
+  color: var(--ui-button-accent-text, var(--ui-accent-active));
+}
+
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
   border-color: transparent;
   background: transparent;
@@ -206,44 +229,29 @@ const hostState = computed(() =>
 
 /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
 [data-component~="ui-button"]:disabled {
-  opacity: var(--ui-button-disabled-opacity, 0.6);
+  opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
-  border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
-  background-color: var(
-    --ui-button-disabled-surface,
-    var(--ui-button-surface, var(--ui-surface-elevated))
-  );
-  color: var(
-    --ui-button-disabled-text,
-    var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
-  );
+  border-color: var(--ui-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
-  border-color: var(
-    --ui-button-disabled-border,
-    var(--ui-action-primary-surface, var(--ui-accent-solid))
-  );
-  background-color: var(
-    --ui-button-disabled-surface,
-    var(--ui-action-primary-surface, var(--ui-accent-solid))
-  );
-  color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+  border-color: var(--ui-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
-  background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
-  color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+  border-color: var(--ui-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
+  background: none;
   border-color: transparent;
-  background-color: transparent;
-  color: var(
-    --ui-button-disabled-text,
-    var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
-  );
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 @media (pointer: coarse) {
@@ -287,7 +295,8 @@ const hostState = computed(() =>
 
 [data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
   background: none;
-  color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
+  border-color: transparent;
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=link"]:focus-visible {

package/vue/UiIconButton.vue

@@ -294,35 +294,21 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
 [data-component~="ui-icon-button"]:disabled {
-  opacity: var(--ui-icon-button-disabled-opacity, 0.6);
-  color: var(--ui-icon-button-disabled-text, inherit);
+  opacity: var(--ui-icon-button-disabled-opacity, 1);
+  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
   cursor: not-allowed;
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:disabled {
-  border-color: var(
-    --ui-icon-button-disabled-border,
-    var(--ui-icon-button-border, var(--ui-border-default))
-  );
-  background-color: var(
-    --ui-icon-button-disabled-surface,
-    var(--ui-icon-button-outline-surface, var(--ui-surface-default))
-  );
-  color: var(
-    --ui-icon-button-disabled-text,
-    var(--ui-icon-button-outline-text, var(--ui-text-primary))
-  );
+  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:disabled {
-  background-color: var(
-    --ui-icon-button-disabled-surface,
-    var(--ui-icon-button-solid-surface, var(--ui-accent-solid))
-  );
-  color: var(
-    --ui-icon-button-disabled-text,
-    var(--ui-icon-button-solid-text, var(--ui-text-on-accent))
-  );
+  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-icon-button"] {

package/vue/chunks/UiButton.js

@@ -18,6 +18,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
+		tone: { default: "neutral" },
 		variant: { default: "outline" }
 	},
 	setup(__props) {
@@ -27,7 +28,8 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			props.variant && `variant variant=${props.variant}`,
 			props.align && `align align=${props.align}`,
 			props.stretch && "stretch",
-			props.size && `size size=${props.size}`
+			props.size && `size size=${props.size}`,
+			props.tone && `tone tone=${props.tone}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
@@ -39,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d0355403"]]);
+}), [["__scopeId", "data-v-405b2c60"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiIconButton.js

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