@threadlabs/looma 0.15.7 → 0.16.1

package/components/shared/icons.js

@@ -56,6 +56,7 @@ export const icons = {
   "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
   "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
   "table": [["path",{"d":"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"}]],
+  "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
   "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],
   "triangle-alert": [["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],
   "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],

package/components/ui-badge/ui-badge.html

@@ -61,8 +61,8 @@
     :host {
       --_badge-surface: var(--ui-surface-subtle);
       --_badge-text: var(--ui-text-secondary);
-      /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
-      --_badge-border: var(--ui-surface-subtle);
+      /* Sit between the soft fill and its stronger theme ink. */
+      --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
       /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
          surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
          mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
@@ -70,7 +70,7 @@
       --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
       --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
       --_badge-color-surface: var(--_badge-color-wash);
-      --_badge-color-border: var(--_badge-color-wash);
+      --_badge-color-border: color-mix(in srgb, var(--_badge-color-wash) 75%, var(--_badge-color-ink) 25%);
       --_badge-color-text: var(--_badge-color-ink);
       --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-surface)));
 
@@ -136,31 +136,26 @@
 
     :host-state([variant="subtle"][tone="accent"]) {
       --_badge-surface: var(--ui-accent-soft);
-      --_badge-border: var(--ui-accent-soft);
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
     :host-state([variant="subtle"][tone="danger"]) {
       --_badge-surface: var(--ui-danger-soft);
-      --_badge-border: var(--ui-danger-soft);
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
     :host-state([variant="subtle"][tone="success"]) {
       --_badge-surface: var(--ui-success-soft);
-      --_badge-border: var(--ui-success-soft);
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
     :host-state([variant="subtle"][tone="warning"]) {
       --_badge-surface: var(--ui-warning-soft);
-      --_badge-border: var(--ui-warning-soft);
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
     :host-state([variant="subtle"][tone="info"]) {
       --_badge-surface: var(--ui-info-soft);
-      --_badge-border: var(--ui-info-soft);
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 

package/components/ui-dialog/ui-dialog.html

@@ -1,10 +1,17 @@
 <template component="ui-dialog" controller="./ui-dialog.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the dialog is open initially or when set externally.</prop>
-    <prop name="modeless" type="boolean" default="false">Open without a backdrop or making the rest of the page inert; dialogs are modal by default.</prop>
-    <prop name="closedby" type="any | closerequest | none" default="closerequest"
-    >Which user close requests work: any includes outside presses, closerequest includes Escape, and none requires an action.</prop>
-    <prop name="alert" type="boolean" default="false">Use alert dialog semantics and require an explicit action instead of the header close button.</prop>
+    <prop name="modal" type="boolean" default="false"
+    >Open in the top layer with a backdrop and make the rest of the page inert until it closes, like native showModal(). Without it the dialog is non-modal,
+      like native show().</prop>
+    <prop name="modeless" type="boolean" default="false"
+    >Deprecated: does nothing, since dialogs are non-modal unless modal is set. Accepted so markup written for 0.15 keeps working; modal wins when both are
+      set.</prop>
+    <prop name="closedby" type="any | closerequest | none"
+    >Which user close requests work: any includes outside presses, closerequest includes Escape, and none requires an action. Unset follows native dialog:
+      closerequest when modal, none when not.</prop>
+    <prop name="alert" type="boolean" default="false"
+    >Use alert dialog semantics and require an explicit action instead of the header close button. An alert dialog is always modal.</prop>
     <prop name="size" type="sm | md | lg | fullscreen" default="md">Choose a compact, standard, wide, or viewport-filling dialog.</prop>
     <prop name="label" type="string">Visible title in the dialog header; also its accessible name.</prop>
     <prop name="for" type="string" default="">ID of the control that opens the dialog.</prop>

package/components/ui-dialog/ui-dialog.js

@@ -58,8 +58,10 @@ export default function controller(host) {
     else dialog?.removeAttribute("role");
     syncTrigger();
     const open = Boolean(host.state.internalOpen);
-    const modal = !host.state.modeless;
-    const requestedClosedBy = String(host.state.closedby ?? "closerequest");
+    // `modeless` is a deprecated no-op: non-modal is the default. An alert dialog is always modal (APG alertdialog).
+    const modal = Boolean(host.state.modal || host.state.alert);
+    // An unset or unknown closedby follows native <dialog>'s auto state: closerequest when modal, none otherwise.
+    const requestedClosedBy = ["any", "closerequest", "none"].includes(host.state.closedby) ? host.state.closedby : modal ? "closerequest" : "none";
     const closedBy = host.state.alert && requestedClosedBy === "any" ? "closerequest" : requestedClosedBy;
     trigger?.setAttribute("aria-expanded", String(open));
     if (!dialog) return;

package/components/ui-icon/ui-icon.html

@@ -63,6 +63,7 @@
         'split': [{ tag: 'path', d: 'M16 3h5v5' }, { tag: 'path', d: 'M8 3H3v5' }, { tag: 'path', d: 'M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3' }, { tag: 'path', d: 'm15 9 6-6' }],
         'strikethrough': [{ tag: 'path', d: 'M16 4H9a3 3 0 0 0-2.83 4' }, { tag: 'path', d: 'M14 12a4 4 0 0 1 0 8H6' }, { tag: 'line', x1: '4', x2: '20', y1: '12', y2: '12' }],
         'table': [{ tag: 'path', d: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18' }],
+        'tag': [{ tag: 'path', d: 'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' }, { tag: 'circle', cx: '7.5', cy: '7.5', r: '.5', fill: 'currentColor' }],
         'trash': [{ tag: 'path', d: 'M10 11v6' }, { tag: 'path', d: 'M14 11v6' }, { tag: 'path', d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6' }, { tag: 'path', d: 'M3 6h18' }, { tag: 'path', d: 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' }],
         'triangle-alert': [{ tag: 'path', d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' }, { tag: 'path', d: 'M12 9v4' }, { tag: 'path', d: 'M12 17h.01' }],
         'truck': [{ tag: 'path', d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' }, { tag: 'path', d: 'M15 18H9' }, { tag: 'path', d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' }, { tag: 'circle', cx: '17', cy: '18', r: '2' }, { tag: 'circle', cx: '7', cy: '18', r: '2' }],