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

package/src/section/section.css

@@ -1,13 +1,13 @@
 @layer slotted.components {
   /**
-   * One unit of content inside a page: a header — eyebrow, heading,
+   * One unit of content inside a page: a header — eyebrow, heading, tags,
    * description, actions — and a body one outline step deeper.
    *
-   *   ┌──────────────────────────────────────┬──────────┐
-   *   │ header ▸ title ▸ eyebrow             │ actions  │
-   *   │                  heading             │          │
-   *   │                  description         │          │
-   *   ├──────────────────────────────────────┴──────────┤
+   *   ┌─────────────────────────────────────────────────┐
+   *   │ header ▸ title ▸ eyebrow                        │
+   *   │                  heading  tags        actions   │  ← one baseline
+   *   │                  description                    │
+   *   ├─────────────────────────────────────────────────┤
    *   │ body                                            │
    *   └─────────────────────────────────────────────────┘
    *
@@ -15,13 +15,23 @@
    * sections, and the families inside it — a card, a description-list — have
    * a `header`, an `actions` and a `description` of their own.
    */
-  [data-ui='section'] {
+  [data-ui-section] {
     --_gap: var(--slotted-section-gap, var(--slotted-space-5, 0.75rem));
     --_text: var(--slotted-text, CanvasText);
     --_muted: var(--slotted-text-muted, GrayText);
     --_rule: var(--slotted-section-border, var(--slotted-border-subtle, ButtonBorder));
-    --_heading-size: var(--slotted-section-heading-size-md, var(--slotted-font-size-lg, 1rem));
-    --_heading-line-height: var(--slotted-line-height-lg, 1.5);
+    /**
+     * A section's heading is a label in small capitals; a subsection's, mixed
+     * case one step larger. Each section reads the pair for its own size and
+     * uses the one its depth calls for.
+     */
+    --_heading-size: var(--slotted-section-heading-size-md, var(--slotted-font-size-xs, 0.75rem));
+    --_heading-line-height: var(--slotted-line-height-xs, 1.4);
+    --_subheading-size: var(
+      --slotted-section-subheading-size-md,
+      var(--slotted-font-size-md, 0.875rem)
+    );
+    --_subheading-line-height: var(--slotted-line-height-md, 1.5);
     /**
      * The ground a sticky header paints, so the content passing under it is
      * covered rather than read through. The page states its own ground in
@@ -42,20 +52,49 @@
     scroll-margin-block-start: var(--slotted-page-sticky-top, 0px);
   }
 
-  [data-ui='section'][data-size='sm'] {
-    --_heading-size: var(--slotted-section-heading-size-sm, var(--slotted-font-size-md, 0.875rem));
-    --_heading-line-height: var(--slotted-line-height-md, 1.5);
+  [data-ui-section][data-size='sm'] {
+    --_heading-size: var(--slotted-section-heading-size-sm, var(--slotted-font-size-xs, 0.75rem));
+    --_heading-line-height: var(--slotted-line-height-xs, 1.4);
+    --_subheading-size: var(
+      --slotted-section-subheading-size-sm,
+      var(--slotted-font-size-sm, 0.8125rem)
+    );
+    --_subheading-line-height: var(--slotted-line-height-sm, 1.45);
+  }
+  [data-ui-section][data-size='lg'] {
+    --_heading-size: var(--slotted-section-heading-size-lg, var(--slotted-font-size-sm, 0.8125rem));
+    --_heading-line-height: var(--slotted-line-height-sm, 1.45);
+    --_subheading-size: var(
+      --slotted-section-subheading-size-lg,
+      var(--slotted-font-size-lg, 1rem)
+    );
+    --_subheading-line-height: var(--slotted-line-height-lg, 1.5);
+  }
+
+  /**
+   * The distance between sections is the family's where sections follow one
+   * another in flow: in a page's container, in the body of a drawer, a dialog,
+   * a card or another section. There no consumer margin or gap is written
+   * between them. One token after a section, another before a subsection
+   * that follows content in a body.
+   *
+   * Elsewhere the parent's layout decides. A stack's gap or a dashboard
+   * grid's areas already space their children, and a margin on a grid item
+   * would push its cell off the row; a section wrapped in a component of its
+   * own has no section beside it to follow.
+   */
+  :is([data-ui-container], [data-part-body]) > [data-ui-section] + [data-ui-section] {
+    margin-block-start: var(--slotted-section-spacing, var(--slotted-space-9, 2rem));
   }
-  [data-ui='section'][data-size='lg'] {
-    --_heading-size: var(--slotted-section-heading-size-lg, var(--slotted-font-size-xl, 1.125rem));
-    --_heading-line-height: var(--slotted-line-height-xl, 1.45);
+  [data-ui-section] > [data-part-body] > [data-ui-section]:not(:first-child) {
+    margin-block-start: var(--slotted-section-subsection-spacing, var(--slotted-space-7, 1.25rem));
   }
 
   /**
    * A surface and not a card: a raised ground, a subtle edge, the large
    * radius, one step of inset, and no shadow, no hover, no action.
    */
-  [data-ui='section'][data-ground='surface'] {
+  [data-ui-section][data-ground='surface'] {
     --_ground: var(--slotted-section-surface, var(--slotted-surface-raised, Canvas));
     /* Published, as a card's is, for the families that state a ground inside it. */
     --slotted-ground: var(--_ground);
@@ -67,15 +106,26 @@
 
   /* ── The header ──────────────────────────────────────────────────────── */
 
-  [data-ui='section'] > [data-part='header'] {
-    align-items: flex-start;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--slotted-space-3, 0.375rem) var(--slotted-space-6, 1rem);
+  /**
+   * Three rows — eyebrow, heading, description — and the actions in a column
+   * of their own on the heading's row. The title is a subgrid of those rows,
+   * so the heading, its tags and the actions are items of one row and share
+   * the heading's first baseline, whatever stands above or below the heading.
+   * A row with nothing in it takes no space: the distances between rows are
+   * margins on the parts, not a gap an empty row would still open.
+   *
+   * The header is a size container so the actions can leave the heading's
+   * row when the header is too narrow to hold both; the tags never do.
+   */
+  [data-ui-section] > [data-part-header] {
+    align-items: baseline;
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
     min-inline-size: 0;
   }
 
-  [data-ui='section'][data-divider] > [data-part='header'] {
+  [data-ui-section][data-divider] > [data-part-header] {
     border-block-end: var(--slotted-border-width-thin, 1px) solid var(--_rule);
     padding-block-end: var(--slotted-space-4, 0.5rem);
   }
@@ -85,7 +135,7 @@
    * The inset a surface section gives its header is kept by sticking the
    * header at the same distance the surface's padding put it at.
    */
-  [data-ui='section'][data-sticky] > [data-part='header'] {
+  [data-ui-section][data-sticky] > [data-part-header] {
     background-color: var(--_ground);
     inset-block-start: var(--slotted-page-sticky-top, 0px);
     /* Stuck, the header's text and buttons met the chrome's edge with no
@@ -108,32 +158,45 @@
    * The alias on the root is what keeps the redefinition from referring to
    * itself.
    */
-  [data-ui='section'][data-sticky] {
+  [data-ui-section][data-sticky] {
     --_above: var(--slotted-page-sticky-top, 0px);
   }
-  [data-ui='section'][data-sticky] > [data-part='body'] {
+  [data-ui-section][data-sticky] > [data-part-body] {
     --slotted-page-sticky-top: calc(var(--_above) + var(--slotted-section-header-size, 0px));
     --slotted-table-sticky-offset: var(--slotted-page-sticky-top);
   }
 
-  [data-ui='section'] > [data-part='header'] > [data-part='title'] {
-    display: flex;
-    flex: 1 1 16rem;
-    flex-direction: column;
-    gap: var(--slotted-space-1, 0.125rem);
+  /**
+   * The heading's column is as wide as its text and no wider, the tags' takes
+   * the rest, so a badge stands against the heading's last word. The tags'
+   * column is flexible, which is what keeps the eyebrow and the description,
+   * spanning both, from widening the heading's. When space runs out the
+   * heading wraps between words, never inside one, and the badges stack in
+   * their column; the tags never leave the heading's row.
+   */
+  [data-ui-section] > [data-part-header] > [data-part-title] {
+    align-items: baseline;
+    display: grid;
+    grid-column: 1;
+    grid-row: 1 / span 3;
+    grid-template-columns: minmax(min-content, max-content) 1fr;
+    grid-template-rows: subgrid;
     min-inline-size: 0;
   }
 
-  [data-ui='section'] > [data-part='header'] > [data-part='title'] > [data-part='eyebrow'] {
+  [data-ui-section] > [data-part-header] > [data-part-title] > [data-part-eyebrow] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-xs, 0.75rem);
+    grid-column: 1 / -1;
+    grid-row: 1;
+    margin-block-end: var(--slotted-space-1, 0.125rem);
     font-weight: var(--slotted-font-weight-semibold, 600);
     letter-spacing: 0.06em;
     line-height: var(--slotted-line-height-xs, 1.4);
     text-transform: uppercase;
   }
 
-  [data-ui='section'] > [data-part='header'] > [data-part='title'] > [data-part='heading'] {
+  [data-ui-section] > [data-part-header] > [data-part-title] > [data-part-heading] {
     color: var(--_text);
     font-family: var(
       --slotted-font-family-heading,
@@ -141,37 +204,94 @@
     );
     font-size: var(--_heading-size);
     font-weight: var(--slotted-font-weight-semibold, 600);
-    letter-spacing: -0.01em;
+    letter-spacing: 0.08em;
     line-height: var(--_heading-line-height);
+    text-transform: uppercase;
+    grid-column: 1;
+    grid-row: 2;
     margin: 0;
     min-inline-size: 0;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
     text-wrap: pretty;
   }
 
-  [data-ui='section'] > [data-part='header'] > [data-part='title'] > [data-part='description'] {
+  /**
+   * A subsection: the case, the size and the tone all change, so the level is
+   * read without the colour. The text stays the muted token, which the theme
+   * holds above 4.5:1 on every ground a section stands on.
+   */
+  [data-ui-section]
+    [data-ui-section]
+    > [data-part-header]
+    > [data-part-title]
+    > [data-part-heading] {
+    color: var(--_muted);
+    font-size: var(--_subheading-size);
+    letter-spacing: normal;
+    line-height: var(--_subheading-line-height);
+    text-transform: none;
+  }
+
+  /**
+   * Beside the heading and outside it, so a badge is not read into the
+   * region's name. A badge is a box around a line of text, and its label's
+   * baseline is the one the row aligns.
+   */
+  [data-ui-section] > [data-part-header] > [data-part-title] > [data-part-tags] {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--slotted-space-3, 0.375rem);
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    margin-inline-start: var(--slotted-space-4, 0.5rem);
+  }
+  [data-ui-section] > [data-part-header] > [data-part-title] > [data-part-tags]:empty {
+    display: none;
+  }
+
+  [data-ui-section] > [data-part-header] > [data-part-title] > [data-part-description] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
+    grid-column: 1 / -1;
+    grid-row: 3;
     line-height: var(--slotted-line-height-sm, 1.45);
-    margin: 0;
+    margin: var(--slotted-space-1, 0.125rem) 0 0;
     max-inline-size: var(--slotted-section-description-measure, 70ch);
     text-wrap: pretty;
   }
 
-  [data-ui='section'] > [data-part='header'] > [data-part='actions'] {
+  /* An implicit column: a header with no actions has one column and no gap. */
+  [data-ui-section] > [data-part-header] > [data-part-actions] {
     align-items: center;
     display: flex;
-    flex: none;
     gap: var(--slotted-control-gap-md, 8px);
-    margin-inline-start: auto;
+    grid-column: 2;
+    grid-row: 2;
+    margin-inline-start: var(--slotted-space-6, 1rem);
   }
-  [data-ui='section'] > [data-part='header'] > [data-part='actions']:empty {
+  [data-ui-section] > [data-part-header] > [data-part-actions]:empty {
     display: none;
   }
 
+  /**
+   * Too narrow for the heading, its tags and the actions on one row: the
+   * actions take a row of their own under the description, at the end. The
+   * tags stay beside the heading at every width.
+   */
+  @container (inline-size < 20rem) {
+    [data-ui-section] > [data-part-header] > [data-part-actions] {
+      grid-column: 1 / -1;
+      grid-row: 4;
+      justify-self: end;
+      margin: var(--slotted-space-3, 0.375rem) 0 0;
+    }
+  }
+
   /* ── The body ────────────────────────────────────────────────────────── */
 
-  [data-ui='section'] > [data-part='body'] {
+  [data-ui-section] > [data-part-body] {
     min-inline-size: 0;
   }
 }

package/src/section/section.tokens.json

@@ -7,13 +7,11 @@
   "--slotted-font-size-lg",
   "--slotted-font-size-md",
   "--slotted-font-size-sm",
-  "--slotted-font-size-xl",
   "--slotted-font-size-xs",
   "--slotted-font-weight-semibold",
   "--slotted-line-height-lg",
   "--slotted-line-height-md",
   "--slotted-line-height-sm",
-  "--slotted-line-height-xl",
   "--slotted-line-height-xs",
   "--slotted-page-ground",
   "--slotted-radius-lg",
@@ -25,12 +23,19 @@
   "--slotted-section-heading-size-sm",
   "--slotted-section-inset",
   "--slotted-section-radius",
+  "--slotted-section-spacing",
+  "--slotted-section-subheading-size-lg",
+  "--slotted-section-subheading-size-md",
+  "--slotted-section-subheading-size-sm",
+  "--slotted-section-subsection-spacing",
   "--slotted-section-surface",
   "--slotted-space-1",
   "--slotted-space-3",
   "--slotted-space-4",
   "--slotted-space-5",
   "--slotted-space-6",
+  "--slotted-space-7",
+  "--slotted-space-9",
   "--slotted-surface",
   "--slotted-surface-raised",
   "--slotted-text",