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

package/src/card/card.css

@@ -13,7 +13,7 @@
    * The root does not clip. Media rounds the corners it touches and clips
    * itself, so an overlay opened inside a card is not cut off by the card.
    */
-  [data-ui='card'] {
+  [data-ui-card] {
     --_card-edge-width: var(--slotted-card-border-width, var(--slotted-border-width-thin, 1px));
     --_card-radius: var(--slotted-card-radius, var(--slotted-radius-lg, 8px));
     --_card-inset-block: var(--slotted-card-padding-block, var(--slotted-space-6, 1rem));
@@ -99,7 +99,7 @@
    * it survives `forced-colors`, where a shadow is removed outright, and it
    * changes width without moving a pixel of content because it is out of flow.
    */
-  [data-ui='card']::before {
+  [data-ui-card]::before {
     border: var(--_card-edge-width) solid var(--_card-edge);
     border-radius: inherit;
     content: '';
@@ -112,13 +112,13 @@
   /* Density is the application's choice and governs control geometry; `size`
      is this card's own inset, so a summary card and a card in a dense list can
      stand on the same page. */
-  [data-ui='card'][data-size='sm'] {
+  [data-ui-card][data-size='sm'] {
     --_card-inset-block: var(--slotted-card-padding-block-sm, var(--slotted-space-5, 0.75rem));
     --_card-inset-inline: var(--slotted-card-padding-inline-sm, var(--slotted-space-5, 0.75rem));
     --_card-region-gap: var(--slotted-card-region-gap-sm, var(--slotted-space-2, 0.25rem));
   }
 
-  [data-ui='card'][data-size='lg'] {
+  [data-ui-card][data-size='lg'] {
     --_card-inset-block: var(--slotted-card-padding-block-lg, var(--slotted-space-8, 1.5rem));
     --_card-inset-inline: var(--slotted-card-padding-inline-lg, var(--slotted-space-8, 1.5rem));
     --_card-region-gap: var(--slotted-card-region-gap-lg, var(--slotted-space-4, 0.5rem));
@@ -135,7 +135,7 @@
    * in both schemes. It keeps its hairline, because a shadow is removed under
    * forced colours and an edge is not.
    */
-  [data-ui='card'][data-fill='elevated'] {
+  [data-ui-card][data-fill='elevated'] {
     --_card-shadow-rest: var(--slotted-card-shadow, var(--slotted-shadow-md));
     /* The shadow moves and the edge holds still: elevation is what this fill
        is made of. */
@@ -158,7 +158,7 @@
    * being a card at all. A hairline that reads as slightly redundant in two
    * schemes fails more loudly than a card that disappears in the third.
    */
-  [data-ui='card'][data-fill='subtle'] {
+  [data-ui-card][data-fill='subtle'] {
     --_card-surface-rest: var(
       --slotted-card-background-subtle,
       var(--slotted-surface-sunken, Canvas)
@@ -182,15 +182,15 @@
 
   /**
    * A card is interactive when it holds a destination or a choice. Every state
-   * below was previously gated on `[data-part='link']` alone, so the chooser —
+   * below was previously gated on `[data-part-link]` alone, so the chooser —
    * a `<label>` around a native input, which is the whole-card selection this
    * family documents — answered no hover, no press and no ring.
    *
    * The two guards are the state precedence: a disabled card does not answer
    * the pointer, and neither does a card whose only control is disabled.
    */
-  [data-ui='card']:not([data-disabled]):has(
-      :is([data-part='link'], [data-part='selection'] :is(input, button)):not(:disabled)
+  [data-ui-card]:not([data-disabled]):has(
+      :is([data-part-link], [data-part-selection] :is(input, button)):not(:disabled)
     ):hover {
     --_card-surface: var(--_card-surface-hover);
     --_card-edge: var(--_card-edge-hover);
@@ -208,21 +208,19 @@
    * not make. Anything a consumer raises above the hit area — `actions`, the
    * `footer` — sets its own cursor, because it is its own target.
    */
-  [data-ui='card']:not([data-disabled]):has(
-      :is([data-part='link'], [data-part='selection'] :is(input, button)):not(:disabled)
+  [data-ui-card]:not([data-disabled]):has(
+      :is([data-part-link], [data-part-selection] :is(input, button)):not(:disabled)
     ) {
     cursor: pointer;
   }
 
-  [data-ui='card']:not([data-disabled]):has(
-      [data-part='selection'] :is(input, button):not(:disabled)
-    )
+  [data-ui-card]:not([data-disabled]):has([data-part-selection] :is(input, button):not(:disabled))
     :where(*) {
     cursor: inherit;
   }
 
-  [data-ui='card']:not([data-disabled]):has(
-      :is([data-part='link'], [data-part='selection'] :is(input, button)):not(:disabled)
+  [data-ui-card]:not([data-disabled]):has(
+      :is([data-part-link], [data-part-selection] :is(input, button)):not(:disabled)
     ):active {
     --_card-surface: var(--_card-surface-active);
     --_card-edge: var(--_card-edge-active);
@@ -235,7 +233,7 @@
    * nothing instead of leaving its gap behind — the case a three-region layout
    * usually gets wrong.
    */
-  [data-ui='card'] > :is([data-part='header'], [data-part='body'], [data-part='footer']) {
+  [data-ui-card] > :is([data-part-header], [data-part-body], [data-part-footer]) {
     min-inline-size: 0;
     padding-block: var(--_card-region-gap);
     padding-inline: var(--_card-inset-inline);
@@ -244,19 +242,16 @@
   /* A region at either end absorbs the padding its missing neighbour would
      have carried, so a card of only a body is not visibly tighter than a full
      one. Media bleeds, so the region next to it counts as an end. */
-  [data-ui='card']
-    > :is([data-part='header'], [data-part='body'], [data-part='footer']):first-child,
-  [data-ui='card']
-    > [data-part='media']
-    + :is([data-part='header'], [data-part='body'], [data-part='footer']) {
+  [data-ui-card] > :is([data-part-header], [data-part-body], [data-part-footer]):first-child,
+  [data-ui-card]
+    > [data-part-media]
+    + :is([data-part-header], [data-part-body], [data-part-footer]) {
     padding-block-start: var(--_card-inset-block);
   }
 
-  [data-ui='card'] > :is([data-part='header'], [data-part='body'], [data-part='footer']):last-child,
-  [data-ui='card']
-    > :is([data-part='header'], [data-part='body'], [data-part='footer']):has(
-      + [data-part='media']
-    ) {
+  [data-ui-card] > :is([data-part-header], [data-part-body], [data-part-footer]):last-child,
+  [data-ui-card]
+    > :is([data-part-header], [data-part-body], [data-part-footer]):has(+ [data-part-media]) {
     padding-block-end: var(--_card-inset-block);
   }
 
@@ -266,7 +261,7 @@
    * badge, a status, a menu button. Both are Typography and both are the
    * consumer's, so the header decides only the two distances and the corner.
    */
-  [data-ui='card'] > [data-part='header'] {
+  [data-ui-card] > [data-part-header] {
     align-items: start;
     column-gap: var(--slotted-card-header-column-gap, var(--slotted-space-5, 0.75rem));
     display: grid;
@@ -274,7 +269,7 @@
     row-gap: var(--slotted-card-header-gap, var(--slotted-space-2, 0.25rem));
   }
 
-  [data-ui='card'] > [data-part='header'] > * {
+  [data-ui-card] > [data-part-header] > * {
     grid-column: 1;
     min-inline-size: 0;
   }
@@ -282,7 +277,7 @@
   /* The corner. It stays on the first row, so a title that wraps to two lines
      does not drag the badge down with it, and it takes the last column whether
      the header has two or three. */
-  [data-ui='card'] > [data-part='header'] > [data-part='actions'] {
+  [data-ui-card] > [data-part-header] > [data-part-actions] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -307,15 +302,15 @@
    * Carbon, Fluent and Cloudscape trail only because none of them keeps a
    * corner in the header.
    */
-  [data-ui='card'] > [data-part='header']:has([data-part='selection']) {
+  [data-ui-card] > [data-part-header]:has([data-part-selection]) {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
-  [data-ui='card'] > [data-part='header']:has([data-part='selection']) > * {
+  [data-ui-card] > [data-part-header]:has([data-part-selection]) > * {
     grid-column: 2;
   }
 
-  [data-ui='card'] > [data-part='header'] > [data-part='selection'] {
+  [data-ui-card] > [data-part-header] > [data-part-selection] {
     /**
      * On the title's first line, not in the middle of its block (C1, the rule
      * R5 gives every mark beside a title): the slot is one line of the title's
@@ -359,7 +354,7 @@
    * is the card: the surface is the `<label>`, so the hit area is the whole
    * card, which is the correction the token foundation asks a family to make.
    */
-  [data-ui='card'] > [data-part='header'] > [data-part='selection'] > :is(input, button) {
+  [data-ui-card] > [data-part-header] > [data-part-selection] > :is(input, button) {
     block-size: var(--slotted-card-selection-size, var(--slotted-selection-size-md, 16px));
     inline-size: var(--slotted-card-selection-size, var(--slotted-selection-size-md, 16px));
     margin: 0;
@@ -367,12 +362,12 @@
 
   /* Cards stretched to a common height in a grid keep their footers on one
      line, because the body takes the leftover. */
-  [data-ui='card'] > [data-part='body'] {
+  [data-ui-card] > [data-part-body] {
     flex: 1 1 auto;
     min-block-size: 0;
   }
 
-  [data-ui='card'] > [data-part='footer'] {
+  [data-ui-card] > [data-part-footer] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -388,21 +383,21 @@
    * region's own, and `inset` on the rule lines it up with the text instead.
    * The regions on either side keep the distance they already had.
    */
-  [data-ui='card'] > [data-ui='divider'] {
+  [data-ui-card] > [data-ui-divider] {
     flex-shrink: 0;
   }
 
-  [data-ui='card'][data-orientation='horizontal'] > [data-ui='divider'] {
+  [data-ui-card][data-orientation='horizontal'] > [data-ui-divider] {
     grid-column: 2;
   }
 
-  [data-ui='card'] > [data-part='media'] {
+  [data-ui-card] > [data-part-media] {
     display: block;
     min-inline-size: 0;
     overflow: hidden;
   }
 
-  [data-ui='card'] > [data-part='media'] > :is(img, video, canvas, picture, svg) {
+  [data-ui-card] > [data-part-media] > :is(img, video, canvas, picture, svg) {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -411,12 +406,12 @@
 
   /* The media rounds the corners it touches and no others. The radius is the
      card's own, less the edge it sits inside. */
-  [data-ui='card'] > [data-part='media']:first-child {
+  [data-ui-card] > [data-part-media]:first-child {
     border-start-end-radius: var(--_card-radius);
     border-start-start-radius: var(--_card-radius);
   }
 
-  [data-ui='card'] > [data-part='media']:last-child {
+  [data-ui-card] > [data-part-media]:last-child {
     border-end-end-radius: var(--_card-radius);
     border-end-start-radius: var(--_card-radius);
   }
@@ -427,7 +422,7 @@
    * three of the second. The fourth row is empty until the card reflows, and
    * an empty row costs nothing because the rhythm is padding, not a gap.
    */
-  [data-ui='card'][data-orientation='horizontal'] {
+  [data-ui-card][data-orientation='horizontal'] {
     container-name: slotted-card;
     container-type: inline-size;
     display: grid;
@@ -443,7 +438,7 @@
     grid-template-rows: repeat(4, auto);
   }
 
-  [data-ui='card'][data-orientation='horizontal'] > [data-part='media'] {
+  [data-ui-card][data-orientation='horizontal'] > [data-part-media] {
     border-end-end-radius: 0;
     border-end-start-radius: var(--_card-radius);
     border-start-end-radius: 0;
@@ -451,15 +446,15 @@
     grid-area: 1 / 1 / -1 / 2;
   }
 
-  [data-ui='card'][data-orientation='horizontal'] > [data-part='header'] {
+  [data-ui-card][data-orientation='horizontal'] > [data-part-header] {
     grid-area: 1 / 2;
   }
 
-  [data-ui='card'][data-orientation='horizontal'] > [data-part='body'] {
+  [data-ui-card][data-orientation='horizontal'] > [data-part-body] {
     grid-area: 2 / 2;
   }
 
-  [data-ui='card'][data-orientation='horizontal'] > [data-part='footer'] {
+  [data-ui-card][data-orientation='horizontal'] > [data-part-footer] {
     grid-area: 3 / 2;
   }
 
@@ -470,21 +465,21 @@
    * a literal because CSS forbids a custom property in a container condition.
    */
   @container slotted-card (max-inline-size: 24rem) {
-    [data-ui='card'][data-orientation='horizontal'] > [data-part='media'] {
+    [data-ui-card][data-orientation='horizontal'] > [data-part-media] {
       border-end-start-radius: 0;
       border-start-end-radius: var(--_card-radius);
       grid-area: 1 / 1 / 2 / -1;
     }
 
-    [data-ui='card'][data-orientation='horizontal'] > [data-part='header'] {
+    [data-ui-card][data-orientation='horizontal'] > [data-part-header] {
       grid-area: 2 / 1 / 3 / -1;
     }
 
-    [data-ui='card'][data-orientation='horizontal'] > [data-part='body'] {
+    [data-ui-card][data-orientation='horizontal'] > [data-part-body] {
       grid-area: 3 / 1 / 4 / -1;
     }
 
-    [data-ui='card'][data-orientation='horizontal'] > [data-part='footer'] {
+    [data-ui-card][data-orientation='horizontal'] > [data-part-footer] {
       grid-area: 4 / 1 / 5 / -1;
     }
   }
@@ -495,7 +490,7 @@
    * Enter, the context menu and middle-click are the platform's, and the name
    * is the title rather than every string in the card.
    */
-  [data-ui='card'] [data-part='link']::after {
+  [data-ui-card] [data-part-link]::after {
     content: '';
     inset: 0;
     position: absolute;
@@ -508,8 +503,8 @@
    * the same hex, so a selected card and a focused card were the same image.
    * They now differ in colour, in width and in position.
    */
-  [data-ui='card']:has(
-    :is([data-part='link'], [data-part='selection'] :is(input, button)):focus-visible
+  [data-ui-card]:has(
+    :is([data-part-link], [data-part-selection] :is(input, button)):focus-visible
   ) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
@@ -525,10 +520,8 @@
    * surface. Carbon and Fluent avoid the pair by hiding the control outright,
    * which is not open here — the control is meant to be seen.
    */
-  [data-ui='card']:has([data-part='link']) [data-part='link']:focus-visible,
-  [data-ui='card']:has([data-part='selection'])
-    [data-part='selection']
-    :is(input, button):focus-visible {
+  [data-ui-card]:has([data-part-link]) [data-part-link]:focus-visible,
+  [data-ui-card]:has([data-part-selection]) [data-part-selection] :is(input, button):focus-visible {
     outline: none;
   }
 
@@ -550,7 +543,7 @@
    * accent's hover and active tints, as a selected row's does, and the edge
    * holds, because it is already saying the stronger thing.
    */
-  [data-ui='card'][data-selected] {
+  [data-ui-card][data-selected] {
     --_card-surface-rest: var(
       --slotted-card-background-selected,
       var(--slotted-tone-accent-surface, Canvas)
@@ -583,7 +576,7 @@
    * mute in every case, and the elevation drops to nothing — a card that cannot
    * be used does not float above the page.
    */
-  [data-ui='card'][data-disabled] {
+  [data-ui-card][data-disabled] {
     --_card-surface: var(--_card-surface-disabled);
     --_card-edge: var(
       --slotted-card-border-color-disabled,
@@ -596,7 +589,7 @@
 
   /* The card withdraws the hit area it added. Disabling the control itself is
      the consumer's, because only the control can refuse an interaction. */
-  [data-ui='card'][data-disabled] [data-part='link']::after {
+  [data-ui-card][data-disabled] [data-part-link]::after {
     display: none;
   }
 }