@threadlabs/looma 0.33.1 → 0.35.0

package/components/ui-tabs/ui-tabs.html

@@ -59,6 +59,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-tabs-panel-padding {
+      syntax: "*";
+      inherits: false;
+    }
 
     /* Density resolves into the tab row's own values; the public tokens still override them. */
     :host {
@@ -66,6 +70,7 @@
       --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
       --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
       --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+      --_ui-tabs-panel-padding: var(--ui-tabs-panel-padding);
 
       --_tab-min-block-size: var(--ui-control-size);
       --_tab-padding-block: var(--ui-space-2);
@@ -165,7 +170,7 @@
       min-inline-size: 0;
     }
     .panels > :slotted(*) {
-      padding: var(--ui-space-4) !important;
+      padding: var(--_ui-tabs-panel-padding, var(--ui-space-4)) !important;
     }
 
     :host([orientation="vertical"]) {

package/components/ui-text/ui-text.html

@@ -17,14 +17,16 @@
       does not carry the meaning, so the words must say it too.</prop>
     <prop name="weight" type="keyword" values="inherit, normal, medium, semibold" default="inherit"
     >The weight. inherit keeps the surrounding weight; medium and semibold emphasise a name or a figure.</prop>
-    <prop name="variant" type="keyword" values="body, eyebrow, code" default="body"
-    >body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read
-      exactly, such as an address, in the monospace face.</prop>
+    <prop name="variant" type="keyword" values="body, display, heading, label, caption, eyebrow, code" default="body"
+    >body is running text. display is a page title, heading names a section, label identifies a control, and caption is supporting text. These roles set their
+      shared type scale, weight and leading; pair heading or display with an appropriate as heading element. eyebrow is a short, uppercase, tracked label that
+      names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.</prop>
     <prop name="truncate" type="boolean" default="false">Keeps the text on one line, ending in an ellipsis when it does not fit.</prop>
     <prop name="align" type="keyword" values="start, center" default="start">Aligns the text within its line.</prop>
-    <prop name="as" type="keyword" values="p, span, div, small, strong, label, h2, h3, h4, h5, h6" default="p"
+    <prop name="as" type="keyword" values="p, span, div, small, strong, label, h1, h2, h3, h4, h5, h6" default="p"
     >The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a
-      heading, h2 to h6, below a Page Header's h1 and a Section's h2. A heading takes its size and weight from size and weight, like any other text.</prop>
+      heading, h1 to h6. Choose its document level independently from its visual variant. The default body variant keeps the existing size and weight
+      behavior.</prop>
   </defs>
   <template $match>
     <span $when="$as = 'span'"><slot></slot></span>
@@ -32,6 +34,7 @@
     <small $when="$as = 'small'"><slot></slot></small>
     <strong $when="$as = 'strong'"><slot></slot></strong>
     <label $when="$as = 'label'"><slot></slot></label>
+    <h1 $when="$as = 'h1'"><slot></slot></h1>
     <h2 $when="$as = 'h2'"><slot></slot></h2>
     <h3 $when="$as = 'h3'"><slot></slot></h3>
     <h4 $when="$as = 'h4'"><slot></slot></h4>
@@ -56,7 +59,7 @@
 
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
-    :host:is(h2, h3, h4, h5, h6) {
+    :host:is(h1, h2, h3, h4, h5, h6) {
       font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
@@ -119,10 +122,32 @@
       font-weight: var(--ui-font-semibold);
     }
 
+    :host([variant="display"]), :host([variant="heading"]) {
+      font-family: var(--ui-font-display, var(--ui-font-family-sans));
+      font-weight: var(--ui-font-semibold);
+      line-height: var(--ui-line-height-tight);
+    }
+    :host([variant="display"]) {
+      font-size: var(--ui-font-size-2xl);
+    }
+    :host([variant="heading"]) {
+      font-size: var(--ui-font-size-xl);
+    }
+    :host([variant="label"]) {
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height);
+    }
+    :host([variant="caption"]) {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
     :host([variant="eyebrow"]) {
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
       letter-spacing: 0.06em;
+      line-height: var(--ui-line-height);
       text-transform: uppercase;
     }
     :host([variant="code"]) {

package/components/ui-textarea/ui-textarea.html

@@ -93,7 +93,8 @@
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
         var(--ui-textarea-border, var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-textarea-radius, var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md))));
-      background: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-color: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-image: var(--_ui-default-textarea-highlight, var(--ui-surface-highlight, none));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);

package/components/ui-tooltip/ui-tooltip.html

@@ -81,6 +81,7 @@
     }
 
     :host {
+      --_ui-material-scale: 0.08;
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-tooltip-border: var(--ui-tooltip-border);
       --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -133,6 +134,65 @@
       box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
+    /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+       transparency, saturation and edge light belong to the surrounding decorative material. */
+    .surface {
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
+      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.08) * 8px);
+      --_ui-material-content-color: var(--_ui-tooltip-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
+      --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
+      background:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-tooltip-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-tooltip-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          var(--ui-elevation-tooltip, var(--ui-shadow-md))
+        )
+      );
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
     .shortcut {

package/components/ui-tooltip/ui-tooltip.js

@@ -160,7 +160,7 @@ export function connect(host) {
       attach();
     }
     surface?.destroy();
-    surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement, gap: offset });
+    surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement, gap: offset, materialRole: "tooltip" });
   };
   const close = (reason, input) => {
     if (reason !== "escape" && reason !== "light-dismiss" && reason !== "programmatic") return;