@layer components {
    /* A label is an optional leading icon beside its title content. The title is
       a text() (or a caller-supplied stack of text() for multi-row), so a
       multi-row label — icon, then title over subtitle — works anywhere. */
    .label {
        align-items: center;
        display: flex;
        font-size: var(--font-size-body);
        gap: 0.75rem;
        min-inline-size: 0;

        /* The icon wrapper gives the leading graphic an identity the title
           rules can never match, so an icon that is itself a stack (a track
           number beside a cover) keeps its natural size instead of growing
           like title content. */
        & > .label__icon {
            align-items: center;
            display: flex;
            flex-shrink: 0;
            gap: 0.5rem;
        }

        /* Only a BARE svg icon gets the default size — a composite icon (a
           tile, a stack) owns its svg, so the child combinator must not reach
           through it. The icon scales with the label's text, as a symbol does
           with its text style, and takes the text's colour; inside a list or
           sidebar it is tinted instead. */
        & > svg,
        & > .label__icon > svg {
            block-size: 1.25em;
            color: currentColor;
            flex-shrink: 0;
            inline-size: 1.25em;
        }

        /* The title content fills the row so its own layout (a space-between
           hstack, a trailing value) spans the full width; the leading icon and
           any trailing accessory keep their natural size. */
        & > .text,
        & > .stack,
        & > .grid {
            flex: 1 1 auto;
            min-inline-size: 0;
        }
    }

    /* A stack that directly holds marquee text (e.g. the title/subtitle vstack)
       must shrink below that text so the marquee can clip and scroll instead of
       forcing the row to overflow. Scoped to a direct-child marquee so a fixed
       trailing stack beside it keeps its natural size and isn't squashed. */
    /* A label inside a control takes the control's text size. */
    :is(.button, .toolbar, .menu, .tab-bar) .label {
        font-size: inherit;
    }

    /* A value pushed to the trailing edge by a spacer is the same size as
       the title, in the secondary label colour, as in iOS Settings. */
    .label .stack--direction-row > .spacer ~ small {
        color: var(--secondary-label);
        font-size: inherit;
    }

    .label .stack:has(> .marquee) {
        min-inline-size: 0;
    }
}