@slotted/styles 0.1.0-beta.0 → 0.1.0-beta.10

package/src/saved-views/saved-views.css

@@ -19,7 +19,7 @@
    * with child combinators so a `label` or a `root` of theirs is never
    * restyled.
    */
-  [data-ui='saved-views'] {
+  [data-ui-saved-views] {
     --_text: var(--slotted-text, CanvasText);
     --_muted: var(--slotted-text-muted, GrayText);
     --_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
@@ -48,7 +48,7 @@
    * The trigger and revert on one row that wraps: at 240 pixels the revert
    * control drops under the trigger rather than pushing it out of the box.
    */
-  [data-ui='saved-views'][data-part='root'] {
+  [data-ui-saved-views][data-part-root] {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
@@ -62,7 +62,7 @@
    * control shadow and the control surface, so the view in use reads as a
    * value the reader can change rather than as a heading.
    */
-  [data-ui='saved-views'] > [data-part='trigger'] {
+  [data-ui-saved-views] > [data-part-trigger] {
     display: inline-flex;
     align-items: center;
     gap: var(--_gap);
@@ -86,7 +86,7 @@
   }
 
   /** Truncated on one line; the whole name stays in the DOM and in the button's name. */
-  [data-ui='saved-views'] > [data-part='trigger'] > [data-label] {
+  [data-ui-saved-views] > [data-part-trigger] > [data-label] {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -94,21 +94,21 @@
   }
 
   /** The chevron, an `icon` after the name, turning over while the layer is open. */
-  [data-ui='saved-views'] > [data-part='trigger'] > [data-ui='icon'] {
+  [data-ui-saved-views] > [data-part-trigger] > [data-ui-icon] {
     margin-inline-end: calc(var(--slotted-space-2, 0.25rem) * -1);
     color: var(--_muted);
     transition: rotate var(--_duration) var(--_easing);
   }
 
-  [data-ui='saved-views'][data-open] > [data-part='trigger'] > [data-ui='icon'] {
+  [data-ui-saved-views][data-open] > [data-part-trigger] > [data-ui-icon] {
     rotate: 180deg;
   }
 
-  [data-ui='saved-views'] > [data-part='trigger']:hover:not(:disabled) {
+  [data-ui-saved-views] > [data-part-trigger]:hover:not(:disabled) {
     background: var(--_hover);
   }
 
-  [data-ui='saved-views'] > [data-part='trigger']:active:not(:disabled) {
+  [data-ui-saved-views] > [data-part-trigger]:active:not(:disabled) {
     background: var(--_active);
     transition-duration: var(--slotted-duration-instant);
   }
@@ -118,7 +118,7 @@
    * the regular weight, so the name stays the loudest thing in the control
    * and the state is never colour alone.
    */
-  [data-ui='saved-views'] > [data-part='trigger'] > [data-part='modified'] {
+  [data-ui-saved-views] > [data-part-trigger] > [data-part-modified] {
     display: inline-flex;
     flex: none;
     align-items: center;
@@ -130,7 +130,7 @@
     font-weight: var(--slotted-font-weight-regular, 400);
   }
 
-  [data-ui='saved-views'] > [data-part='trigger'] > [data-part='modified']::before {
+  [data-ui-saved-views] > [data-part-trigger] > [data-part-modified]::before {
     content: '';
     flex: none;
     inline-size: var(--slotted-space-4, 0.5rem);
@@ -140,7 +140,7 @@
   }
 
   /** Revert: a ghost control with the counter-clockwise arrow, at the trigger's height. */
-  [data-ui='saved-views'] > [data-part='revert'] {
+  [data-ui-saved-views] > [data-part-revert] {
     display: inline-flex;
     align-items: center;
     gap: var(--slotted-space-3, 0.375rem);
@@ -159,17 +159,17 @@
     transition: background-color var(--_duration) var(--_easing);
   }
 
-  [data-ui='saved-views'] > [data-part='revert']:hover:not(:disabled) {
+  [data-ui-saved-views] > [data-part-revert]:hover:not(:disabled) {
     background: var(--slotted-tone-accent-subtle-hover, ButtonFace);
   }
 
-  [data-ui='saved-views'] > [data-part='revert']:active:not(:disabled) {
+  [data-ui-saved-views] > [data-part-revert]:active:not(:disabled) {
     background: var(--slotted-tone-accent-subtle-active, ButtonFace);
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='saved-views'] > [data-part='trigger']:focus-visible,
-  [data-ui='saved-views'] > [data-part='revert']:focus-visible {
+  [data-ui-saved-views] > [data-part-trigger]:focus-visible,
+  [data-ui-saved-views] > [data-part-revert]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -182,7 +182,7 @@
    * would change width as views are renamed. The padding keeps a row's hover
    * ground off the popover's rounded edge.
    */
-  [data-ui='saved-views'][data-part='panel'] {
+  [data-ui-saved-views][data-part-panel] {
     display: grid;
     /* One track that grows to the token and gives way to zero: the panel's
        min-content is nothing and its max-content the token, so a popover
@@ -193,7 +193,7 @@
     padding: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='saved-views'][data-part='panel'] > [data-part='list'] {
+  [data-ui-saved-views][data-part-panel] > [data-part-list] {
     display: grid;
     gap: var(--slotted-space-1, 0.125rem);
     margin: 0;
@@ -202,7 +202,7 @@
   }
 
   /** A row: the view's name across, its actions at the inline end. */
-  [data-ui='saved-views'][data-part='panel'] > [data-part='list'] > [data-part='item'] {
+  [data-ui-saved-views][data-part-panel] > [data-part-list] > [data-part-item] {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: start;
@@ -210,9 +210,7 @@
     margin: 0;
   }
 
-  [data-ui='saved-views'][data-part='panel']
-    > [data-part='list']
-    > [data-part='item'][data-editing] {
+  [data-ui-saved-views][data-part-panel] > [data-part-list] > [data-part-item][data-editing] {
     grid-template-columns: minmax(0, 1fr);
   }
 
@@ -224,7 +222,7 @@
    * binding draws the check on the view in use alone, and the name keeps the
    * second column whether the check stands before it or not.
    */
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply'] {
+  [data-ui-saved-views][data-part-panel] [data-part-apply] {
     display: grid;
     grid-template-columns: var(--_icon-size-sm) minmax(0, max-content) auto;
     justify-content: start;
@@ -256,37 +254,35 @@
    * half the band, the midpoint of cap height and x-height, so its centre is
    * the band's.
    */
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply'] > [data-ui='icon'] {
+  [data-ui-saved-views][data-part-panel] [data-part-apply] > [data-ui-icon] {
     color: var(--slotted-tone-accent-text);
     translate: 0 calc(var(--_icon-size-sm) / 2 - (1cap + 1ex) / 4);
   }
 
-  [data-ui='saved-views'][data-part='panel']
-    [data-part='item'][data-current]
-    > [data-part='apply'] {
+  [data-ui-saved-views][data-part-panel] [data-part-item][data-current] > [data-part-apply] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
   /** A long name wraps inside the row; nothing is cut. */
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply'] > [data-label] {
+  [data-ui-saved-views][data-part-panel] [data-part-apply] > [data-label] {
     grid-column: 2;
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
 
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply']:hover:not(:disabled),
-  [data-ui='saved-views'][data-part='panel'] [data-part='actions']:hover:not(:disabled) {
+  [data-ui-saved-views][data-part-panel] [data-part-apply]:hover:not(:disabled),
+  [data-ui-saved-views][data-part-panel] [data-part-actions]:hover:not(:disabled) {
     background: var(--_hover);
   }
 
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply']:active:not(:disabled),
-  [data-ui='saved-views'][data-part='panel'] [data-part='actions']:active:not(:disabled) {
+  [data-ui-saved-views][data-part-panel] [data-part-apply]:active:not(:disabled),
+  [data-ui-saved-views][data-part-panel] [data-part-actions]:active:not(:disabled) {
     background: var(--_active);
     transition-duration: var(--slotted-duration-instant);
   }
 
   /** The pin: the view a visit opens on. The word beside it is for the ear only. */
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply'] > [data-part='default-mark'] {
+  [data-ui-saved-views][data-part-panel] [data-part-apply] > [data-part-default-mark] {
     /* A flex box, so the pin `icon` inside is laid out as an item and not on
        a line of its own that would stand taller than the mark. */
     display: flex;
@@ -299,9 +295,7 @@
     color: var(--_muted);
   }
 
-  [data-ui='saved-views'][data-part='panel']
-    [data-part='default-mark']
-    > span:not([data-ui='icon']) {
+  [data-ui-saved-views][data-part-panel] [data-part-default-mark] > span:not([data-ui-icon]) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -314,7 +308,7 @@
    * The row's menu: a square at the small control height with the ellipsis
    * `icon`, muted at rest and on the text ink under the pointer.
    */
-  [data-ui='saved-views'][data-part='panel'] [data-part='actions'] {
+  [data-ui-saved-views][data-part-panel] [data-part-actions] {
     display: inline-grid;
     place-items: center;
     box-sizing: border-box;
@@ -332,14 +326,14 @@
       color var(--_duration) var(--_easing);
   }
 
-  [data-ui='saved-views'][data-part='panel'] [data-part='actions'][data-open],
-  [data-ui='saved-views'][data-part='panel'] [data-part='actions']:hover:not(:disabled) {
+  [data-ui-saved-views][data-part-panel] [data-part-actions][data-open],
+  [data-ui-saved-views][data-part-panel] [data-part-actions]:hover:not(:disabled) {
     color: var(--_text);
   }
 
   /** Drawn inward: the rows sit one space step apart and an outward ring would cross the next. */
-  [data-ui='saved-views'][data-part='panel'] [data-part='apply']:focus-visible,
-  [data-ui='saved-views'][data-part='panel'] [data-part='actions']:focus-visible {
+  [data-ui-saved-views][data-part-panel] [data-part-apply]:focus-visible,
+  [data-ui-saved-views][data-part-panel] [data-part-actions]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
@@ -351,8 +345,8 @@
    * view; and the confirmation, in the row being deleted. Both stand on the
    * sunken surface so the row reads as one being edited.
    */
-  [data-ui='saved-views'][data-part='panel'] [data-part='form'],
-  [data-ui='saved-views'][data-part='panel'] [data-part='confirm'] {
+  [data-ui-saved-views][data-part-panel] [data-part-form],
+  [data-ui-saved-views][data-part-panel] [data-part-confirm] {
     display: grid;
     gap: var(--slotted-space-4, 0.5rem);
     margin: 0;
@@ -361,13 +355,13 @@
     background: var(--slotted-surface-sunken, Canvas);
   }
 
-  [data-ui='saved-views'][data-part='panel'] [data-part='confirm'] > p {
+  [data-ui-saved-views][data-part-panel] [data-part-confirm] > p {
     margin: 0;
     overflow-wrap: anywhere;
   }
 
-  [data-ui='saved-views'][data-part='panel']
-    :is([data-part='form'], [data-part='confirm'])
+  [data-ui-saved-views][data-part-panel]
+    :is([data-part-form], [data-part-confirm])
     > [data-buttons] {
     display: flex;
     flex-wrap: wrap;
@@ -376,7 +370,7 @@
   }
 
   /** Save as new view… then Save, at the inline end, under a rule. */
-  [data-ui='saved-views'][data-part='panel'] > [data-part='footer'] {
+  [data-ui-saved-views][data-part-panel] > [data-part-footer] {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
@@ -387,7 +381,7 @@
   }
 
   @media (forced-colors: active) {
-    [data-ui='saved-views'] > [data-part='trigger'] > [data-part='modified']::before {
+    [data-ui-saved-views] > [data-part-trigger] > [data-part-modified]::before {
       forced-color-adjust: none;
     }
   }

package/src/scroll-area/scroll-area.css

@@ -34,7 +34,7 @@
    * mask is not on. `root` is that element: it holds the border, the radius and
    * the maximum, and `viewport` inside it holds the scroll and the veil.
    */
-  [data-ui='scroll-area'] {
+  [data-ui-scroll-area] {
     /**
      * How far the veil reaches in from an edge that has content behind it.
      *
@@ -77,7 +77,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='scroll-area'] > [data-part='viewport'] {
+  [data-ui-scroll-area] > [data-part-viewport] {
     /**
      * One length per logical edge: the veil's reach where that end of the
      * content is out of view, and nothing where it is showing.
@@ -205,7 +205,7 @@
    * attribute form would then paint the veil on the edge the reader can already
    * see.
    */
-  [data-ui='scroll-area']:dir(rtl) > [data-part='viewport'] {
+  [data-ui-scroll-area]:dir(rtl) > [data-part-viewport] {
     --_fade-left: var(--_scroll-area-fade-inline-end);
     --_fade-right: var(--_scroll-area-fade-inline-start);
   }
@@ -220,21 +220,21 @@
    * `@supports` is needed for that — an unknown declaration is discarded at
    * parse time and the cascade does the rest.
    */
-  [data-ui='scroll-area'][data-axis='block'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-axis='block'] > [data-part-viewport] {
     overflow-x: hidden;
     overflow-y: auto;
     overflow-inline: hidden;
     overflow-block: auto;
   }
 
-  [data-ui='scroll-area'][data-axis='inline'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-axis='inline'] > [data-part-viewport] {
     overflow-x: auto;
     overflow-y: hidden;
     overflow-inline: auto;
     overflow-block: hidden;
   }
 
-  [data-ui='scroll-area'][data-axis='both'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-axis='both'] > [data-part-viewport] {
     overflow: auto;
   }
 
@@ -243,17 +243,17 @@
    * "reserve the bar whether or not it is needed". It is stated per axis so it
    * does not turn a one-axis area into a two-axis one.
    */
-  [data-ui='scroll-area'][data-scrollbars='always'][data-axis='block'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-scrollbars='always'][data-axis='block'] > [data-part-viewport] {
     overflow-y: scroll;
     overflow-block: scroll;
   }
 
-  [data-ui='scroll-area'][data-scrollbars='always'][data-axis='inline'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-scrollbars='always'][data-axis='inline'] > [data-part-viewport] {
     overflow-x: scroll;
     overflow-inline: scroll;
   }
 
-  [data-ui='scroll-area'][data-scrollbars='always'][data-axis='both'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-scrollbars='always'][data-axis='both'] > [data-part-viewport] {
     overflow: scroll;
   }
 
@@ -266,7 +266,7 @@
    * and why this value is worth having at all: an area with no bar and no veil
    * says nothing.
    */
-  [data-ui='scroll-area'][data-scrollbars='none'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-scrollbars='none'] > [data-part-viewport] {
     scrollbar-width: none;
   }
 
@@ -279,7 +279,7 @@
    * state — `packages/styles/src/states.test.mjs` — rather than a state this
    * family holds: a scrollport is not a control and has no disabled form.
    */
-  [data-ui='scroll-area'][data-scrollbars='hover'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-scrollbars='hover'] > [data-part-viewport] {
     scrollbar-color: transparent transparent;
     transition:
       scrollbar-color var(--slotted-duration-short) var(--slotted-easing-standard),
@@ -289,29 +289,28 @@
       --_scroll-area-fade-inline-end var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
-  [data-ui='scroll-area'][data-scrollbars='hover']:not([data-disabled]):hover
-    > [data-part='viewport'],
-  [data-ui='scroll-area'][data-scrollbars='hover']:focus-within > [data-part='viewport'] {
+  [data-ui-scroll-area][data-scrollbars='hover']:not([data-disabled]):hover > [data-part-viewport],
+  [data-ui-scroll-area][data-scrollbars='hover']:focus-within > [data-part-viewport] {
     scrollbar-color: var(--_thumb) var(--_track);
   }
 
   /* ── The gutter ────────────────────────────────────────────────────────── */
 
-  [data-ui='scroll-area'][data-gutter='auto'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-gutter='auto'] > [data-part-viewport] {
     scrollbar-gutter: auto;
   }
 
-  [data-ui='scroll-area'][data-gutter='both-edges'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-gutter='both-edges'] > [data-part-viewport] {
     scrollbar-gutter: stable both-edges;
   }
 
   /* ── Scroll chaining ───────────────────────────────────────────────────── */
 
-  [data-ui='scroll-area'][data-overscroll='auto'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-overscroll='auto'] > [data-part-viewport] {
     overscroll-behavior: auto;
   }
 
-  [data-ui='scroll-area'][data-overscroll='none'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-overscroll='none'] > [data-part-viewport] {
     overscroll-behavior: none;
   }
 
@@ -322,31 +321,31 @@
    * code block. These come after the two above, so a chosen `none` holds the
    * scrolling axis and lets the other through.
    */
-  [data-ui='scroll-area'][data-axis='inline'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-axis='inline'] > [data-part-viewport] {
     overscroll-behavior-y: auto;
     overscroll-behavior-block: auto;
   }
 
-  [data-ui='scroll-area'][data-axis='block'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-axis='block'] > [data-part-viewport] {
     overscroll-behavior-x: auto;
     overscroll-behavior-inline: auto;
   }
 
   /* ── The veil, edge by edge ────────────────────────────────────────────── */
 
-  [data-ui='scroll-area'][data-at-block-start] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-at-block-start] > [data-part-viewport] {
     --_scroll-area-fade-block-start: 0px;
   }
 
-  [data-ui='scroll-area'][data-at-block-end] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-at-block-end] > [data-part-viewport] {
     --_scroll-area-fade-block-end: 0px;
   }
 
-  [data-ui='scroll-area'][data-at-inline-start] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-at-inline-start] > [data-part-viewport] {
     --_scroll-area-fade-inline-start: 0px;
   }
 
-  [data-ui='scroll-area'][data-at-inline-end] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-at-inline-end] > [data-part-viewport] {
     --_scroll-area-fade-inline-end: 0px;
   }
 
@@ -355,7 +354,7 @@
    * scroller holds what the reader has already passed, and a product that
    * would rather not dim it says so here.
    */
-  [data-ui='scroll-area'][data-fade='end'] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-fade='end'] > [data-part-viewport] {
     --_scroll-area-fade-block-start: 0px;
     --_scroll-area-fade-inline-start: 0px;
   }
@@ -365,7 +364,7 @@
    * the element on its own compositing layer, and a long list pays for that on
    * every frame.
    */
-  [data-ui='scroll-area'][data-fade='none'] > [data-part='viewport'],
+  [data-ui-scroll-area][data-fade='none'] > [data-part-viewport],
   /**
    * A vertical writing mode turns the box, and a gradient cannot be given a
    * logical direction. Rather than veil the wrong two edges, the family veils
@@ -373,7 +372,7 @@
    * affordance there draws it from them. The binding writes `data-sideways`
    * because only script can read a writing mode.
    */
-  [data-ui='scroll-area'][data-sideways] > [data-part='viewport'] {
+  [data-ui-scroll-area][data-sideways] > [data-part-viewport] {
     mask-image: none;
   }
 
@@ -391,7 +390,7 @@
    * `min-inline-size: fit-content` so a row wider than the scrollport widens
    * this box with it, and the inset survives at the far end.
    */
-  [data-ui='scroll-area'] > [data-part='viewport'] > [data-part='content'] {
+  [data-ui-scroll-area] > [data-part-viewport] > [data-part-content] {
     box-sizing: border-box;
     min-inline-size: fit-content;
     padding: var(--slotted-scroll-area-inset, var(--slotted-space-5, 0.75rem));
@@ -410,8 +409,16 @@
    *
    * `:has()` rather than `:focus-within`, because a link inside the content is
    * focus *within* the area and is not the area being focused.
+   *
+   * The ring is drawn for a focus from the keyboard: a click on the content
+   * focuses the viewport too, and the next Shift would make it match
+   * `:focus-visible` (`createFocusOrigin`). The browser's own ring on the
+   * viewport is suppressed: the frame draws the one ring.
    */
-  [data-ui='scroll-area']:has(> [data-part='viewport']:focus-visible) {
+  [data-ui-scroll-area] > [data-part-viewport]:focus {
+    outline: none;
+  }
+  [data-ui-scroll-area]:has(> [data-part-viewport]:focus-visible[data-focus-origin='keyboard']) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -425,8 +432,8 @@
    * sentence.
    */
   @media print {
-    [data-ui='scroll-area'],
-    [data-ui='scroll-area'] > [data-part='viewport'] {
+    [data-ui-scroll-area],
+    [data-ui-scroll-area] > [data-part-viewport] {
       max-block-size: none;
       max-inline-size: none;
       overflow: visible;
@@ -440,7 +447,7 @@
    * the system's own, which is what `scrollbar-color: auto` means.
    */
   @media (forced-colors: active) {
-    [data-ui='scroll-area'] > [data-part='viewport'] {
+    [data-ui-scroll-area] > [data-part-viewport] {
       mask-image: none;
       scrollbar-color: auto;
     }