@threadlabs/looma 0.1.1 → 0.1.3

package/tokens.css

@@ -86,16 +86,16 @@
     --ui-border-subtle: #ecece8;
     --ui-border-default: #e4e4e0;
     --ui-border-strong: #c8c8c4;
-    --ui-focus-ring: #0066cc;
+    --ui-focus-ring: #5b55d6;
 
-    --ui-accent-solid: #0066cc;
-    --ui-accent-hover: #0052a3;
-    --ui-accent-active: #003d7a;
-    --ui-accent-soft: #e8f0fb;
+    --ui-accent-solid: #5b55d6;
+    --ui-accent-hover: #4b45bd;
+    --ui-accent-active: #3e399e;
+    --ui-accent-soft: #efeffc;
 
-    --ui-danger-solid: #cc3300;
-    --ui-danger-hover: #a32900;
-    --ui-danger-soft: #fdf0ed;
+    --ui-danger-solid: #b4233f;
+    --ui-danger-hover: #941d35;
+    --ui-danger-soft: #fceef1;
     --ui-success-solid: #007a33;
     --ui-success-soft: #edf7f1;
     --ui-warning-solid: #cc8800;
@@ -120,16 +120,16 @@
       --ui-border-subtle: oklch(0.9 0.01 250);
       --ui-border-default: oklch(0.84 0.01 250);
       --ui-border-strong: oklch(0.7 0.02 250);
-      --ui-focus-ring: oklch(0.62 0.18 250);
+      --ui-focus-ring: oklch(0.57 0.17 285);
 
-      --ui-accent-solid: oklch(0.62 0.18 250);
-      --ui-accent-hover: oklch(0.57 0.2 250);
-      --ui-accent-active: oklch(0.52 0.2 250);
-      --ui-accent-soft: oklch(0.95 0.03 250);
+      --ui-accent-solid: oklch(0.57 0.17 285);
+      --ui-accent-hover: oklch(0.52 0.18 285);
+      --ui-accent-active: oklch(0.46 0.16 285);
+      --ui-accent-soft: oklch(0.96 0.025 285);
 
-      --ui-danger-solid: oklch(0.55 0.2 25);
-      --ui-danger-hover: oklch(0.5 0.2 25);
-      --ui-danger-soft: oklch(0.97 0.02 25);
+      --ui-danger-solid: oklch(0.5 0.17 18);
+      --ui-danger-hover: oklch(0.44 0.16 18);
+      --ui-danger-soft: oklch(0.97 0.025 18);
       --ui-success-solid: oklch(0.5 0.15 145);
       --ui-success-soft: oklch(0.96 0.03 145);
       --ui-warning-solid: oklch(0.7 0.15 85);

package/vue/{chunk-J4UBEIIL.js → chunk-P72L3GWE.js}

@@ -65,6 +65,7 @@ function createAdapterComponent(tagName, displayName, additionalEventBindings =
         return h(
           tagName,
           {
+            "data-allow-mismatch": forwardedAttrs["data-allow-mismatch"] ?? "class",
             ...forwardedAttrs,
             ref: (value) => {
               elementRef.value = toHTMLElement(value);

package/vue/editor/index.js

@@ -1,7 +1,7 @@
 import {
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-J4UBEIIL.js";
+} from "../chunk-P72L3GWE.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";

package/vue/index.js

@@ -1,6 +1,6 @@
 import {
   createAdapterComponent
-} from "./chunk-J4UBEIIL.js";
+} from "./chunk-P72L3GWE.js";
 
 // src/index.ts
 import "@threadlabs/looma/layout";

package/dist/looma/p-fa4659c4.entry.js

@@ -1 +0,0 @@
-import{r as t,g as o,h as a,H as r}from"./p-CEeiinfk.js";import{i as e}from"./p-JwSoedEO.js";const i=class{constructor(o){t(this,o)}get host(){return o(this)}variant;size;disabled=!1;slotRef;syncToButton(){const t=this.getButton();t&&(this.host.dataset.variant=this.variant||"",this.host.dataset.size=this.size||"",this.host.dataset.disabled=this.disabled?"true":"",t.disabled=this.disabled)}componentDidLoad(){this.slotRef?.addEventListener("slotchange",(()=>this.syncToButton())),this.syncToButton()}componentDidUpdate(){this.syncToButton()}getButton(){const t=this.host.shadowRoot?.querySelector("slot");return(t?.assignedElements()??Array.from(this.host.children)).find((t=>"BUTTON"===t.tagName))??null}onKeydown=t=>{this.getButton()||this.disabled||!e(t)||(t.preventDefault(),this.host.click())};render(){return a(r,{key:"01011aa13228b9e8d10ed11b99c95ef1df91326d","data-variant":this.variant||void 0,"data-size":this.size||void 0,"data-disabled":this.disabled?"":void 0,onKeyDown:this.onKeydown},a("slot",{key:"2bf0274d2732ea46fdf016a46d85bbe6e0d96bba",ref:t=>this.slotRef=t}))}static get watchers(){return{variant:[{syncToButton:0}],size:[{syncToButton:0}],disabled:[{syncToButton:0}]}}};i.style=":host{display:inline-flex;vertical-align:middle;color:var(--ui-text-primary)}::slotted(button){appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-default);color:inherit;font:inherit;font-weight:var(--ui-font-medium, 500);line-height:var(--ui-line-height-tight);padding:var(--ui-space-2) var(--ui-space-3);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host([data-size='sm'])::slotted(button){padding:var(--ui-space-1) var(--ui-space-2);font-size:0.875rem}:host([data-size='lg'])::slotted(button){padding:var(--ui-space-3) var(--ui-space-4);font-size:1rem}::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:var(--ui-border-strong)}::slotted(button:active:enabled){background:var(--ui-surface-subtle)}:host([data-variant='solid'])::slotted(button){border-color:var(--ui-accent-solid);background:var(--ui-accent-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-shadow-xs)}:host([data-variant='solid'])::slotted(button:hover:enabled){background:var(--ui-accent-hover);border-color:var(--ui-accent-hover);box-shadow:var(--ui-shadow-sm)}:host([data-variant='solid'])::slotted(button:active:enabled){background:var(--ui-accent-active);border-color:var(--ui-accent-active);box-shadow:none}:host([data-variant='destructive'])::slotted(button){border-color:var(--ui-danger-solid);background:var(--ui-danger-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-shadow-xs)}:host([data-variant='destructive'])::slotted(button:hover:enabled){background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);box-shadow:var(--ui-shadow-sm)}:host([data-variant='ghost'])::slotted(button){border-color:transparent;background:transparent}:host([data-variant='ghost'])::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:transparent}:host([data-variant='ghost'])::slotted(button:active:enabled){background:var(--ui-surface-subtle);border-color:transparent}::slotted(button:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(button:disabled),:host([data-disabled]){opacity:0.6;cursor:not-allowed}";export{i as ui_button}

package/dist/ui-button.entry-LNJBEJFE.js

@@ -1,72 +0,0 @@
-import {
-  isActivationKey
-} from "./chunk-UL7UIUJZ.js";
-import {
-  Host,
-  getElement,
-  h,
-  registerInstance
-} from "./chunk-YK4MTZGJ.js";
-
-// dist/esm/ui-button.entry.js
-var uiButtonCss = () => `:host{display:inline-flex;vertical-align:middle;color:var(--ui-text-primary)}::slotted(button){appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-default);color:inherit;font:inherit;font-weight:var(--ui-font-medium, 500);line-height:var(--ui-line-height-tight);padding:var(--ui-space-2) var(--ui-space-3);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host([data-size='sm'])::slotted(button){padding:var(--ui-space-1) var(--ui-space-2);font-size:0.875rem}:host([data-size='lg'])::slotted(button){padding:var(--ui-space-3) var(--ui-space-4);font-size:1rem}::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:var(--ui-border-strong)}::slotted(button:active:enabled){background:var(--ui-surface-subtle)}:host([data-variant='solid'])::slotted(button){border-color:var(--ui-accent-solid);background:var(--ui-accent-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-shadow-xs)}:host([data-variant='solid'])::slotted(button:hover:enabled){background:var(--ui-accent-hover);border-color:var(--ui-accent-hover);box-shadow:var(--ui-shadow-sm)}:host([data-variant='solid'])::slotted(button:active:enabled){background:var(--ui-accent-active);border-color:var(--ui-accent-active);box-shadow:none}:host([data-variant='destructive'])::slotted(button){border-color:var(--ui-danger-solid);background:var(--ui-danger-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-shadow-xs)}:host([data-variant='destructive'])::slotted(button:hover:enabled){background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);box-shadow:var(--ui-shadow-sm)}:host([data-variant='ghost'])::slotted(button){border-color:transparent;background:transparent}:host([data-variant='ghost'])::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:transparent}:host([data-variant='ghost'])::slotted(button:active:enabled){background:var(--ui-surface-subtle);border-color:transparent}::slotted(button:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(button:disabled),:host([data-disabled]){opacity:0.6;cursor:not-allowed}`;
-var UIButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  get host() {
-    return getElement(this);
-  }
-  variant;
-  size;
-  disabled = false;
-  slotRef;
-  syncToButton() {
-    const btn = this.getButton();
-    if (!btn)
-      return;
-    this.host.dataset.variant = this.variant || "";
-    this.host.dataset.size = this.size || "";
-    this.host.dataset.disabled = this.disabled ? "true" : "";
-    btn.disabled = this.disabled;
-  }
-  componentDidLoad() {
-    this.slotRef?.addEventListener("slotchange", () => this.syncToButton());
-    this.syncToButton();
-  }
-  componentDidUpdate() {
-    this.syncToButton();
-  }
-  getButton() {
-    const slot = this.host.shadowRoot?.querySelector("slot");
-    const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
-    return nodes.find((el) => el.tagName === "BUTTON") ?? null;
-  }
-  onKeydown = (e) => {
-    const btn = this.getButton();
-    if (btn || this.disabled || !isActivationKey(e))
-      return;
-    e.preventDefault();
-    this.host.click();
-  };
-  render() {
-    return h(Host, { key: "01011aa13228b9e8d10ed11b99c95ef1df91326d", "data-variant": this.variant || void 0, "data-size": this.size || void 0, "data-disabled": this.disabled ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "2bf0274d2732ea46fdf016a46d85bbe6e0d96bba", ref: (el) => this.slotRef = el }));
-  }
-  static get watchers() {
-    return {
-      "variant": [{
-        "syncToButton": 0
-      }],
-      "size": [{
-        "syncToButton": 0
-      }],
-      "disabled": [{
-        "syncToButton": 0
-      }]
-    };
-  }
-};
-UIButton.style = uiButtonCss();
-export {
-  UIButton as ui_button
-};