@threadlabs/looma 0.13.6 → 0.14.1

package/package.json

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

package/styles/ui-button.css

@@ -274,8 +274,9 @@
       border-color: transparent;
     }
 
+    /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :scope {
+      :scope, :scope[data-ui-button-state~="size=sm"] {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -374,6 +375,7 @@
        the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
        hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
 
+    /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
     }
 

package/styles/ui-checkbox.css

@@ -120,6 +120,37 @@
       cursor: not-allowed;
     }
 
+    /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
+       and the first line centres in that control height, so the label shares a row's baseline.
+       Multi-line labels and descriptions still grow downward from that first line. */
+    :scope[data-ui-checkbox-state~="size=sm"] {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :scope[data-ui-checkbox-state~="size=lg"] {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :scope[data-ui-checkbox-state~="size=sm"],
+    :scope[data-ui-checkbox-state~="size=lg"] {
+      --_line: calc(var(--_font) * var(--ui-line-height-md));
+      font-size: var(--_font);
+      padding-block: calc((var(--_row) - var(--_line)) / 2);
+    }
+
+    :scope[data-ui-checkbox-state~="size=sm"] input,
+    :scope[data-ui-checkbox-state~="size=lg"] input {
+      margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :scope[data-ui-checkbox-state~="size=sm"] {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -132,5 +163,12 @@
 
     /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
 
+    /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
+       and the first line centres in that control height, so the label shares a row's baseline.
+       Multi-line labels and descriptions still grow downward from that first line. */
+
+    @media (pointer: coarse) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-combobox.css

@@ -149,9 +149,18 @@
       margin: 0;
       outline: none;
     }
+    :scope[data-ui-combobox-state~="size=sm"] {
+      --_row: var(--ui-control-size-sm);
+    }
     :scope[data-ui-combobox-state~="size=sm"] input {
-      min-block-size: calc(var(--ui-control-size-sm) - 2px);
+      min-block-size: calc(var(--_row) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+    :scope[data-ui-combobox-state~="size=lg"] input {
+      min-block-size: calc(var(--ui-control-size-lg) - 2px);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
     }
     button {
       appearance: none;
@@ -252,6 +261,14 @@
         min-inline-size: 2.75rem;
         min-block-size: 2.75rem;
       }
+      /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+         body-size text: below 16px, iOS zooms the page into the focused field. */
+      :scope[data-ui-combobox-state~="size=sm"] {
+        --_row: var(--ui-control-min-block-size);
+      }
+      :scope[data-ui-combobox-state~="size=sm"] input {
+        font-size: inherit;
+      }
     }
     @media (forced-colors: active) {
       .field, .popup {
@@ -309,6 +326,22 @@
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
     }
+    /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] .field {
+      min-block-size: 0;
+      padding: var(--ui-space-0-5);
+    }
+    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] input {
+      min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
+      padding: 0 var(--ui-space-1);
+    }
+    /* A large multiple field starts at the large control height, as sm starts at the small one. */
+    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] .field {
+      min-block-size: 0;
+    }
+    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] input {
+      min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+    }
     .item {
       appearance: none;
       display: inline-flex;
@@ -342,6 +375,8 @@
        not inside it, because a control's box holds its value. */
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     @media (pointer: coarse) {
+      /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+         body-size text: below 16px, iOS zooms the page into the focused field. */
     }
     @media (forced-colors: active) {
     }
@@ -351,6 +386,8 @@
        Longhands, not shorthands: lowering drops a shorthand that omits a component. */
 
     /* Multiple mode: chips wrap before the cursor on one flexible field line. */
+    /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+    /* A large multiple field starts at the large control height, as sm starts at the small one. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-description-list.css

@@ -3,24 +3,63 @@
 /* Named values: a term and what it is, for each item (ui-description-item). */
     /* Rows line every term up in one column and every value in the next, through subgrid. */
     :scope {
+      --_gap: var(--ui-space-2);
+      --_gap-compact: var(--ui-space-1);
+      --_column-gap: var(--ui-space-6);
+      --_min: 10rem;
+      --_track: var(--_min);
+      --_tile-padding: var(--ui-space-3);
       display: grid;
       grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-      gap: var(--ui-space-2) var(--ui-space-6);
+      gap: var(--_gap) var(--_column-gap);
       min-inline-size: 0;
       margin: 0;
     }
 
-    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+       private properties, which cross into each item. */
+    :scope[data-ui-description-list-state~="layout=stacked"],
+    :scope[data-ui-description-list-state~="layout=grid"],
     :scope[data-ui-description-list-state~="layout=tiles"] {
       --_ui-description-display: flex;
       --_ui-description-column: auto;
+      --_ui-description-align: stretch;
+      --_gap: var(--ui-space-4);
+      --_gap-compact: var(--ui-space-2);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+       than that many fit. */
+    :scope[data-ui-description-list-state~="layout=grid"],
+    :scope[data-ui-description-list-state~="layout=tiles"] {
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+    }
+
+    :scope[data-ui-description-list-state~="layout=tiles"] {
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
-      --_ui-description-padding: var(--ui-space-3);
+      --_ui-description-padding: var(--_tile-padding);
       --_ui-description-border-width: 1px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-      gap: var(--ui-space-3);
+      --_gap: var(--ui-space-3);
+      --_gap-compact: var(--ui-space-2);
+      --_column-gap: var(--_gap);
+    }
+
+    :scope[data-ui-description-list-state~="columns=2"] {
+      --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+    }
+    :scope[data-ui-description-list-state~="columns=3"] {
+      --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+    }
+    :scope[data-ui-description-list-state~="columns=4"] {
+      --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+    }
+
+    /* Compact takes each layout's closer spacing. */
+    :scope[data-ui-description-list-state~="density=compact"] {
+      --_gap: var(--_gap-compact);
+      --_tile-padding: var(--ui-space-2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -32,7 +71,13 @@
 /* Named values: a term and what it is, for each item (ui-description-item). */
     /* Rows line every term up in one column and every value in the next, through subgrid. */
 
-    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+       private properties, which cross into each item. */
+
+    /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+       than that many fit. */
+
+    /* Compact takes each layout's closer spacing. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-input-group.css

@@ -41,6 +41,21 @@
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
+    :scope:has(.field [data-ui-input-state~="size=sm"]) {
+      min-block-size: var(--ui-control-size-sm);
+    }
+
+    :scope:has(.field [data-ui-input-state~="size=lg"]) {
+      min-block-size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :scope:has(.field [data-ui-input-state~="size=sm"]) {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
     :scope:hover:not(:has(input:focus, input:disabled)) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
@@ -125,6 +140,11 @@
        thing the field is for ("Continue" after a site's address), so it reads as the field's action
        and not the form's. */
 
+    /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
+
+    @media (pointer: coarse) {
+    }
+
     /* The ring shows when the field's input would show its own: when it is focus-visible, which a
        text input is for a pointer as well as a keyboard. A focused action button draws its own. */
 

package/styles/ui-input.css

@@ -74,6 +74,28 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+    :scope[data-ui-input-state~="size=sm"] {
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope[data-ui-input-state~="size=lg"] {
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+      :scope[data-ui-input-state~="size=sm"] {
+        min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
+        font-size: inherit;
+      }
+    }
+
     /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
     :scope::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
@@ -139,6 +161,13 @@
 /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
 
+    /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+    }
+
     /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */

package/styles/ui-radio.css

@@ -67,6 +67,37 @@
       cursor: not-allowed;
     }
 
+    /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
+       and the first line centres in that control height, so the label shares a row's baseline.
+       Multi-line labels and descriptions still grow downward from that first line. */
+    :scope[data-ui-radio-state~="size=sm"] {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :scope[data-ui-radio-state~="size=lg"] {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :scope[data-ui-radio-state~="size=sm"],
+    :scope[data-ui-radio-state~="size=lg"] {
+      --_line: calc(var(--_font) * var(--ui-line-height-md));
+      font-size: var(--_font);
+      padding-block: calc((var(--_row) - var(--_line)) / 2);
+    }
+
+    :scope[data-ui-radio-state~="size=sm"] input,
+    :scope[data-ui-radio-state~="size=lg"] input {
+      margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :scope[data-ui-radio-state~="size=sm"] {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -77,5 +108,12 @@
 
     /* The label, and under it an optional line saying what the choice means. */
 
+    /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
+       and the first line centres in that control height, so the label shares a row's baseline.
+       Multi-line labels and descriptions still grow downward from that first line. */
+
+    @media (pointer: coarse) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-select.css

@@ -79,9 +79,30 @@
       cursor: not-allowed;
     }
 
-    :scope[size]:not([size="1"]) {
-      min-block-size: 7rem;
-      padding: var(--ui-space-2);
+    :scope[data-ui-select-state~="size=sm"] {
+      min-block-size: var(--ui-control-size-sm);
+      padding: var(--ui-space-1) var(--ui-space-2);
+      padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
+      background-position: right var(--ui-space-2) center;
+      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope[data-ui-select-state~="size=lg"] {
+      min-block-size: var(--ui-control-size-lg);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
+      background-position: right var(--ui-space-4) center;
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+      :scope[data-ui-select-state~="size=sm"] {
+        min-block-size: var(--ui-control-min-block-size);
+        font-size: inherit;
+      }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -97,5 +118,10 @@
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-switch.css

@@ -111,6 +111,38 @@
       }
     }
 
+    /* A sized switch keeps its track and aligns instead: the label takes that size's field type size,
+       and the first line centres in that control height, so the label shares a row's baseline.
+       Multi-line labels and descriptions still grow downward from that first line. */
+    :scope[data-ui-switch-state~="size=sm"] {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :scope[data-ui-switch-state~="size=lg"] {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :scope[data-ui-switch-state~="size=sm"],
+    :scope[data-ui-switch-state~="size=lg"] {
+      --_line: calc(var(--_font) * var(--ui-line-height-md));
+      font-size: var(--_font);
+      padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
+    }
+
+    /* The label centres on the track. */
+    :scope[data-ui-switch-state~="size=sm"] .text,
+    :scope[data-ui-switch-state~="size=lg"] .text {
+      margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :scope[data-ui-switch-state~="size=sm"] {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -124,5 +156,14 @@
     @media (prefers-reduced-motion: reduce) {
     }
 
+    /* A sized switch keeps its track and aligns instead: the label takes that size's field type size,
+       and the first line centres in that control height, so the label shares a row's baseline.
+       Multi-line labels and descriptions still grow downward from that first line. */
+
+    /* The label centres on the track. */
+
+    @media (pointer: coarse) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-table.css

@@ -0,0 +1,134 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@scope ([data-component~="ui-table"]) to ([data-component], [data-slotted]) {
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+    :scope {
+      --_pad-block: var(--ui-space-1);
+      --_pad-inline: var(--ui-space-3);
+      --_row-size: var(--ui-control-size);
+      display: block;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: 0;
+      overflow: auto;
+      overscroll-behavior-inline: contain;
+      /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+         fade, so a sticky header never fades. */
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :scope:dir(rtl) {
+      --_ui-scroll-fade-direction: to left;
+    }
+
+    :scope:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
+    :scope[data-ui-table-state~="density=compact"] {
+      --_pad-block: var(--ui-space-0-5);
+      --_pad-inline: var(--ui-space-2);
+      --_row-size: var(--ui-control-size-sm);
+    }
+
+    /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+
+    /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+       rhythm of the rows around it. A cell's height is its minimum. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-table"]) to ([data-component]) {
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+
+    /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+    :where([data-slotted], [data-slotted] *):is(table) {
+      inline-size: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+      font-variant-numeric: tabular-nums;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(caption) {
+      padding-block-end: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-weight: var(--ui-font-medium);
+      text-align: start;
+    }
+
+    /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+       rhythm of the rows around it. A cell's height is its minimum. */
+    :where([data-slotted], [data-slotted] *):is(th),
+    :where([data-slotted], [data-slotted] *):is(td) {
+      block-size: var(--_row-size);
+      padding: var(--_pad-block) var(--_pad-inline);
+      border-block-end: 1px solid var(--ui-border-subtle);
+      text-align: start;
+      vertical-align: middle;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(thead th) {
+      block-size: auto;
+      padding-block: var(--ui-space-2);
+      border-block-end-color: var(--ui-border-default);
+      background: var(--ui-surface);
+      color: var(--ui-text-muted);
+      font-weight: var(--ui-font-medium);
+      white-space: nowrap;
+      vertical-align: bottom;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(tbody th) {
+      font-weight: var(--ui-font-medium);
+    }
+
+    :where([data-slotted], [data-slotted] *):is(tbody tr:last-child > *) {
+      border-block-end-width: 0;
+    }
+
+    :where([data-slotted], [data-slotted] *):is([data-ui-align="center"]) {
+      text-align: center;
+    }
+
+    :where([data-slotted], [data-slotted] *):is([data-ui-align="end"]) {
+      text-align: end;
+    }
+
+    :scope[data-ui-table-state~="stickyHeader"] :where([data-slotted], [data-slotted] *):is(thead th) {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-textarea.css

@@ -77,6 +77,23 @@
       cursor: not-allowed;
     }
 
+    :scope[data-ui-textarea-state~="size=sm"] {
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope[data-ui-textarea-state~="size=lg"] {
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+    @media (pointer: coarse) {
+      :scope[data-ui-textarea-state~="size=sm"] {
+        font-size: inherit;
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -89,5 +106,9 @@
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
+    /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+    @media (pointer: coarse) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vanilla/UiCheckbox.d.ts

@@ -12,6 +12,7 @@ export interface UiCheckboxProps {
   indeterminate?: boolean | null;
   name?: string | null;
   required?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];