@slotted/styles 0.1.0-beta.1 → 0.1.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/app-shell/app-shell.css

@@ -787,6 +787,20 @@
    * content card begins, and nothing to its left.
    */
   [data-ui='app-shell'][data-canvas='inset'] > [data-part='nav'] {
+    /* The navigation stands on the sunken frame, which the secondary tone's
+       hover is 0.011 lighter than in the light scheme: a row's hover was the
+       frame itself. Both steps are recomputed from the ground it stands on. */
+    --slotted-tone-secondary-subtle-hover: color-mix(
+      in oklab,
+      var(--slotted-app-shell-nav-surface, var(--_frame)),
+      var(--slotted-text) 4%
+    );
+    --slotted-tone-secondary-subtle-active: color-mix(
+      in oklab,
+      var(--slotted-app-shell-nav-surface, var(--_frame)),
+      var(--slotted-text) 7%
+    );
+
     /* Invisible on the transparent default; a product that paints the column
        gets a region with the plane's corners rather than a square block. */
     border-radius: var(--_radius);

package/src/combobox/combobox.css

@@ -746,6 +746,18 @@
 
   /* ── Options ──────────────────────────────────────────────────────────── */
 
+  /**
+   * An option the query rejected, and a group whose options all went. Both
+   * carry `hidden` — Angular hides each rejected option rather than leaving the
+   * list, and both bindings hide an emptied group — and `display: grid` on
+   * either beats the user agent's own `[hidden] { display: none }`, because an
+   * author rule wins over the user agent sheet.
+   */
+  [data-ui='combobox'] [data-part='item'][hidden],
+  [data-ui='combobox'] [data-part='group'][hidden] {
+    display: none;
+  }
+
   [data-ui='combobox'] [data-part='item'] {
     align-content: center;
     border-radius: var(--_item-radius);

package/src/dashboard-grid/dashboard-grid.css

@@ -350,8 +350,11 @@
   }
 
   /* While a widget is carried or pulled the lattice is what it snaps to, so
-     it comes forward. */
-  [data-ui='dashboard-grid'][data-gesture] > [data-part='grid']::before {
+     it comes forward. The attribute is on the grid, in the compound it styles:
+     a browser invalidates by attribute name, and on the root ahead of
+     `> [data-part='grid']` it restyled every element with a `data-part`
+     under the root as a widget was picked up and as it was dropped. */
+  [data-ui='dashboard-grid'] > [data-part='grid'][data-gesture]::before {
     opacity: 1;
   }
 
@@ -654,20 +657,18 @@
   /* ── Editing: a widget in hand ───────────────────────────────────────── */
 
   /**
-   * A widget carried or pulled leaves its cell and floats over the grid: it
-   * is placed where it was picked up, `--_dg-origin-*`, and follows the pointer
-   * by `--_dg-lift-*`, all written by script. The cell it would land in is the
-   * placeholder, and the widgets around it make room as the placeholder moves.
+   * A widget carried or pulled leaves its cell and floats over the grid. The
+   * script writes where it was picked up (`inset-inline-start`,
+   * `inset-block-start`, `inline-size`, `block-size`) and how far the pointer
+   * took it (`translate`) on the widget itself. A custom property in their
+   * place restyled everything under the widget on every frame. The cell it
+   * would land in is the placeholder, and the widgets around it make room as
+   * the placeholder moves.
    */
   [data-ui='dashboard-grid'] [data-part='widget']:is([data-dragging], [data-resizing]) {
-    block-size: var(--_dg-origin-block-size);
     grid-column: auto;
     grid-row: auto;
-    inline-size: var(--_dg-origin-inline-size);
-    inset-block-start: var(--_dg-origin-block-start);
-    inset-inline-start: var(--_dg-origin-inline-start);
     position: absolute;
-    translate: var(--_dg-lift-x, 0) var(--_dg-lift-y, 0);
     z-index: 3;
   }
 
@@ -746,3 +747,37 @@
     min-block-size: calc(var(--_row) * 2 + var(--_gap));
   }
 }
+
+/**
+ * A widget's cell, written on the widget by script and read only by the
+ * widget's own placement. Unregistered, each one inherited into the card and
+ * everything in it, and a preview that moved a widget restyled its whole
+ * content. Registered without inheritance and without a type, a widget no
+ * script placed still takes the fallback of `var()`. These sit outside
+ * `@layer slotted.components` because `@property` is a registration, not a
+ * rule a cascade layer holds.
+ */
+@property --_dg-x {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-y {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-w {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-h {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-span-medium {
+  syntax: '*';
+  inherits: false;
+}

package/src/number-field/number-field.css

@@ -323,6 +323,9 @@
     touch-action: none;
     transition: color var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
+    /* Its own bidi run: as a flex container its text is a new block, and a
+       mark of more than one character read backwards in a right-to-left page. */
+    unicode-bidi: plaintext;
     user-select: none;
     -webkit-user-select: none;
   }

package/src/progress-indicator/progress-indicator.css

@@ -123,8 +123,9 @@
      * scheme instead, because the ink is the far end of each scheme's own
      * range. Twenty-four per cent is measured rather than chosen: it is the
      * lowest ratio at which the track separates from the page in all three
-     * schemes at the 2-pixel `sm` thickness, and low enough that a column of
-     * bars does not read as a column of filled bars.
+     * schemes at a 2-pixel bar, half the thinnest one this family draws,
+     * and low enough that a column of bars does not read as a column of
+     * filled bars.
      */
     --_track-color: var(
       --slotted-progress-indicator-track-color,
@@ -152,14 +153,14 @@
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_text-gap: var(--slotted-space-4, 0.5rem);
     --_row-gap: var(--slotted-space-3, 0.375rem);
-    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-2, 0.25rem));
+    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-3, 0.375rem));
     --_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-md, 34px));
     --_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-full, 9999px));
     /**
      * M3's indicator–track gap, and the stop indicator's diameter, are both
      * 4dp at the 4dp track. Making them one thickness is the proportional form
-     * of that decision rather than a copy of the number: a 4-pixel gap in a
-     * 2-pixel bar would be wider than the bar is tall.
+     * of that decision rather than a copy of the number: a fixed 4-pixel gap
+     * would be the whole `sm` bar and half the `lg` one.
      */
     --_gap: var(--slotted-progress-indicator-gap, var(--_thickness));
 
@@ -278,7 +279,7 @@
   /* ── Size ─────────────────────────────────────────────────────────────
    *
    * One axis, three geometries. The bar reads a thickness from the space
-   * scale — 2, 4 and 8 pixels, and M3's own default track is the middle one —
+   * scale — 4, 6 and 8 pixels, so no step draws a hairline in a table cell —
    * while the circle and the loader read the control height scale, so a
    * spinner standing beside a button is the same height as the button at
    * every density. Neither needs a scale of this family's own, and the
@@ -288,7 +289,7 @@
   [data-ui='progress-indicator'][data-part='root'][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_text-gap: var(--slotted-space-3, 0.375rem);
-    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-1, 0.125rem));
+    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-2, 0.25rem));
     --_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-sm, 30px));
   }
 

package/src/progress-indicator/progress-indicator.tokens.json

@@ -35,7 +35,6 @@
   "--slotted-progress-indicator-wave-phase",
   "--slotted-radius-full",
   "--slotted-radius-none",
-  "--slotted-space-1",
   "--slotted-space-2",
   "--slotted-space-3",
   "--slotted-space-4",

package/src/stat-card/stat-card.css

@@ -383,6 +383,24 @@
     margin-inline-start: auto;
   }
 
+  /* On a finger the card's one control is a full target among 44-pixel
+     controls: a transparent `::before` centred on the link or button — the
+     part itself when `render` made it one — reaches
+     the comfortable size in both axes, and the header keeps its height. */
+  @media (pointer: coarse) {
+    [data-ui='stat-card']
+      :is([data-part='action']:is(a, button), [data-part='action'] > :is(a, button)) {
+      position: relative;
+    }
+
+    [data-ui='stat-card']
+      :is([data-part='action']:is(a, button), [data-part='action'] > :is(a, button))::before {
+      content: '';
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+      position: absolute;
+    }
+  }
+
   /* ── Figure: the value, its unit, the delta ───────────────────────────── */
 
   /**

package/src/stat-card/stat-card.tokens.json

@@ -85,6 +85,7 @@
   "--slotted-stat-card-value-line-height-sm",
   "--slotted-surface-raised",
   "--slotted-surface-sunken",
+  "--slotted-target-comfortable",
   "--slotted-text",
   "--slotted-text-muted",
   "--slotted-tone-accent-text",

package/src/tabs/tabs.css

@@ -631,12 +631,14 @@
    * through `aria-keyshortcuts`.
    *
    * It is aligned by its mark rather than by its box. The box overhangs the X
-   * on every side, so a box set flush against the label leaves a hole where the
-   * overhang is; both margins take the overhang back, which puts the mark one
-   * inner gap from the last letter and the tab's own inset from the end of the
-   * item. The first capture showed the other arrangement: a square the height of
-   * the control, hard against the words, with the whole tab's padding on the
-   * far side of it.
+   * on every side, and both margins take the overhang back, which puts the mark
+   * the tab's own inset from the last letter and from the end of the item. An
+   * inner gap before the mark left the round ground of the hover touching the
+   * words; the first capture showed a square the height of the control, hard
+   * against the words, with the whole tab's padding on the far side of it.
+   *
+   * Neutral, as the dialog's close and the paging controls: removing a tab
+   * closes a view and destroys nothing, so the danger tone overstated it.
    */
   [data-ui='tabs']
     > :where([data-part='list'])
@@ -650,7 +652,7 @@
     background-color: transparent;
     block-size: var(--_dismiss-size);
     border: 0;
-    border-radius: var(--slotted-control-radius, 4px);
+    border-radius: var(--slotted-radius-full, 9999px);
     color: var(--slotted-tabs-dismiss-color, var(--slotted-text-muted, GrayText));
     cursor: pointer;
     display: inline-flex;
@@ -658,7 +660,7 @@
     inline-size: var(--_dismiss-size);
     justify-content: center;
     margin-inline-end: calc(var(--_padding-inline) - var(--_dismiss-overhang));
-    margin-inline-start: max(0px, calc(var(--_inner-gap) - var(--_dismiss-overhang)));
+    margin-inline-start: calc(var(--_padding-inline) - var(--_dismiss-overhang));
     padding: 0;
     transition:
       background-color var(--slotted-control-transition-duration)
@@ -693,9 +695,9 @@
     > [data-part='dismiss']:not(:disabled):hover {
     background-color: var(
       --slotted-tabs-dismiss-hover-background,
-      var(--slotted-tone-danger-surface)
+      var(--slotted-tone-secondary-subtle-hover)
     );
-    color: var(--slotted-tabs-dismiss-hover-color, var(--slotted-tone-danger-text));
+    color: var(--slotted-tabs-dismiss-hover-color, var(--slotted-text, CanvasText));
   }
 
   [data-ui='tabs']
@@ -704,9 +706,9 @@
     > [data-part='dismiss']:not(:disabled):active {
     background-color: var(
       --slotted-tabs-dismiss-active-background,
-      var(--slotted-tone-danger-border)
+      var(--slotted-tone-secondary-subtle-active)
     );
-    color: var(--slotted-tabs-dismiss-active-color, var(--slotted-text-inverse));
+    color: var(--slotted-tabs-dismiss-active-color, var(--slotted-text, CanvasText));
   }
 
   [data-ui='tabs']

package/src/tabs/tabs.tokens.json

@@ -36,6 +36,7 @@
   "--slotted-focus-ring-color",
   "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
+  "--slotted-radius-full",
   "--slotted-radius-md",
   "--slotted-radius-sm",
   "--slotted-radius-xs",
@@ -70,13 +71,9 @@
   "--slotted-target-comfortable",
   "--slotted-target-min",
   "--slotted-text",
-  "--slotted-text-inverse",
   "--slotted-text-muted",
   "--slotted-tone-accent-solid",
   "--slotted-tone-accent-text",
-  "--slotted-tone-danger-border",
-  "--slotted-tone-danger-surface",
-  "--slotted-tone-danger-text",
   "--slotted-tone-secondary-subtle-active",
   "--slotted-tone-secondary-subtle-hover"
 ]