@threadlabs/looma 0.23.5 → 0.23.7

package/components/shared/icons.js

@@ -4,6 +4,7 @@ export const icons = {
   "align-left": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
   "align-right": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
   "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "bell": [["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],
   "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
   "book-user": [["path",{"d":"M15 13a3 3 0 1 0-6 0"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["circle",{"cx":"12","cy":"8","r":"2"}]],
   "braces": [["path",{"d":"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"}],["path",{"d":"M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"}]],

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

@@ -7,10 +7,12 @@
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
       colour, which overrides the tone.</prop>
-    <prop name="shape" type="keyword" values="pill, tag, dot" default="pill"
+    <prop name="shape" type="keyword" values="pill, tag, dot, square" default="pill"
     >Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set
-      aria-hidden when the surrounding control already names that state.</prop>
-    <prop name="size" type="keyword" values="xs, md" default="md">Scale. xs is a compact count beside small controls; md is the usual text badge.</prop>
+      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a
+      decorative icon when adjacent words name it.</prop>
+    <prop name="size" type="keyword" values="xs, md" default="md"
+    >Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.</prop>
   </defs>
   <span><span class="label"><slot></slot></span></span>
   <style>
@@ -19,6 +21,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-badge-square-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -221,6 +227,31 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
+    :host-state([shape="square"]) {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
+      display: inline-flex;
+      box-sizing: border-box;
+      flex: none;
+      inline-size: var(--_badge-square-size);
+      block-size: var(--_badge-square-size);
+      min-inline-size: var(--_badge-square-size);
+      min-block-size: var(--_badge-square-size);
+      padding: 0;
+      border-radius: var(--ui-radius-md);
+      text-box-trim: none;
+    }
+
+    :host-state([shape="square"][size="xs"]) {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
+    }
+
+    :host-state([shape="square"]) .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :host-state([shape="dot"]) {
       position: relative;

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

@@ -11,6 +11,7 @@
         'align-left': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M15 12H3' }, { tag: 'path', d: 'M17 19H3' }],
         'align-right': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M21 12H9' }, { tag: 'path', d: 'M21 19H7' }],
         'arrow-left': [{ tag: 'path', d: 'm12 19-7-7 7-7' }, { tag: 'path', d: 'M19 12H5' }],
+        'bell': [{ tag: 'path', d: 'M10.268 21a2 2 0 0 0 3.464 0' }, { tag: 'path', d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' }],
         'bold': [{ tag: 'path', d: 'M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8' }],
         'book-user': [{ tag: 'path', d: 'M15 13a3 3 0 1 0-6 0' }, { tag: 'path', d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20' }, { tag: 'circle', cx: '12', cy: '8', r: '2' }],
         'braces': [{ tag: 'path', d: 'M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1' }, { tag: 'path', d: 'M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1' }],

package/components/ui-list-item/ui-list-item.html

@@ -3,6 +3,8 @@
     <prop name="variant" type="keyword" values="row, card" default="row"
     >How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,
       for items set in a grid (a List with layout="grid"). Both have the same parts: leading, title, description, and trailing.</prop>
+    <prop name="wrap" type="boolean" default="false"
+    >Lets the title and description wrap so explanatory text stays readable on narrow screens. Omit it for the default equal-height, one-line rows.</prop>
     <prop name="current" type="boolean" default="false"
     >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
       announces. Set it on one item at a time.</prop>
@@ -135,6 +137,12 @@
       white-space: nowrap;
     }
 
+    :host-state([wrap]) .title,
+    :host-state([wrap]) .description {
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
     .title {
       font-size: var(--ui-font-size-md);
       font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));