@lilydesignsystem/themes 0.5.0 → 0.6.0

package/dist/united-states-web-design-system.css

@@ -858,7 +858,7 @@
         color: var(--lily-text-muted);
     }
     /* Final crumb (the current page) — muted because it isn't a link. */
-    :where(.breadcrumb-list-item[aria-current="page"]) {
+    :where(.breadcrumb-list-item[data-current], .breadcrumb-list-item[aria-current="page"]) {
         color: var(--lily-text-muted);
     }
 
@@ -1127,11 +1127,114 @@
         background-color: var(--color-primary);
         color: var(--color-primary-content);
     }
-    /* Today — outlined rather than filled, so a selected non-today date
-       still reads as the "selected" one. */
+    /* Today — outlined and bold, never filled, so a selected non-today date still
+       reads as "selected". The ring takes the cell's own text colour (currentColor),
+       so it holds its contrast on a light page, a dark page and a selected cell
+       alike, and the bold number says it without colour. */
     :where(.calendar-table-td[aria-current="date"]) {
-        outline: 2px solid var(--color-primary);
-        outline-offset: -2px;
+        outline: 2px solid currentColor;
+        outline-offset: -3px;
+        font-weight: 700;
+    }
+    /* Fit a phone: day cells shrink and wrap instead of forcing the grid wider. */
+    :where(.calendar-table) {
+        table-layout: fixed;
+    }
+    :where(.calendar-table-td, .calendar-table-th) {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    /* --- Data grid: toolbar, sorting, pagination, column visibility, pinned columns ----- */
+    :where(.data-grid-toolbar) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--lily-space-sm);
+        align-items: center;
+        margin-block-end: var(--lily-space-sm);
+    }
+    :where(.data-grid-search, .data-grid-search-field) {
+        padding: var(--lily-space-xs) var(--lily-space-sm);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-sm);
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        font: inherit;
+    }
+    /* A sortable header is a button that looks like its text; the arrow follows aria-sort,
+       so the state is in the markup for assistive technology and on screen for everyone. */
+    :where(.data-grid-sort-button) {
+        padding: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
+        cursor: pointer;
+    }
+    :where(.data-grid-sort-button:focus-visible) {
+        outline: 2px solid var(--color-accent);
+        outline-offset: 2px;
+    }
+    :where([aria-sort="none"] .data-grid-sort-button)::after {
+        content: " \21C5";
+        opacity: 0.5;
+    }
+    :where([aria-sort="ascending"] .data-grid-sort-button)::after {
+        content: " \25B2";
+    }
+    :where([aria-sort="descending"] .data-grid-sort-button)::after {
+        content: " \25BC";
+    }
+    :where(.data-grid-pagination) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--lily-space-sm);
+        align-items: center;
+        justify-content: flex-end;
+        margin-block-start: var(--lily-space-sm);
+    }
+    :where(.data-grid-page-previous, .data-grid-page-next, .data-grid-export-button) {
+        padding: var(--lily-space-xs) var(--lily-space-md);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-sm);
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        font: inherit;
+        cursor: pointer;
+    }
+    :where(.data-grid-page-previous:disabled, .data-grid-page-next:disabled, .data-grid-export-button:disabled) {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    :where(.data-grid-column-visibility) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--lily-space-sm);
+        margin: 0;
+        padding: var(--lily-space-xs) var(--lily-space-sm);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-sm);
+    }
+    /* Pinned columns stay put while the rest scroll; the offset is logical, so it flips in right-to-left. */
+    :where([data-pinned="start"]) {
+        position: sticky;
+        inset-inline-start: 0;
+        z-index: 1;
+        background-color: var(--lily-surface);
+    }
+    :where([data-pinned="end"]) {
+        position: sticky;
+        inset-inline-end: 0;
+        z-index: 1;
+        background-color: var(--lily-surface);
+    }
+    :where(th[data-pinned]) {
+        z-index: 2;
+    }
+    /* A missing value: dimmed, and the grid's emptyValue text (for example a dash) reads as absence. */
+    :where(.data-table-td[data-empty]) {
+        opacity: 0.7;
     }
 
     /* --- Kanban specifics --------------------------------------------------- */
@@ -1145,6 +1248,20 @@
         min-width: 14rem;
     }
 
+    /* Dragging a card: the column it would land in is outlined; one that refuses it
+       (canMove, allowedColumns, a full strict WIP limit) is striped and shows the
+       not-allowed cursor, so "you can't drop here" is visible before the drop. */
+    :where(.kanban-table-td[data-drop-target]) {
+        outline: 2px dashed var(--color-accent);
+        outline-offset: -3px;
+    }
+    :where(.kanban-table-td[data-drop-blocked]) {
+        outline: 2px solid var(--color-error);
+        outline-offset: -3px;
+        cursor: not-allowed;
+        background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--color-error) 18%, transparent) 6px 8px);
+    }
+
     /* --- Gantt specifics ---------------------------------------------------- */
     /* Cells marked as bars are filled with the primary colour to render the
        schedule bar inline within the grid. */
@@ -1152,6 +1269,20 @@
         background-color: var(--color-primary);
     }
 
+    /* Weekend, holiday and time-off shading (Gantt chart and calendar). A weekend
+       is tinted; a day marked as a holiday or time off (data-unavailable /
+       data-range) is striped as well, so no day is told apart by colour alone;
+       a column only partly unavailable gets a bar under its header. */
+    :where(.gantt-table-th[data-weekend], .gantt-table-td[data-weekend], .calendar-table-th[data-weekend], .calendar-table-td[data-weekend]) {
+        background-color: color-mix(in srgb, var(--lily-surface) 92%, var(--lily-text));
+    }
+    :where(.gantt-table-th[data-unavailable], .gantt-table-td[data-unavailable], .calendar-table-td[data-range]) {
+        background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--lily-text) 14%, transparent) 4px 5px);
+    }
+    :where(.gantt-table-th[data-partly-unavailable]) {
+        box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--lily-text) 45%, transparent);
+    }
+
     /* ==========================================================================
      * Cards, panels, surfaces
      * --------------------------------------------------------------------------
@@ -2078,6 +2209,7 @@
         .theme-picker,
         .locale-picker,
         .text-size-picker,
+        .time-zone-picker,
         .search-picker,
         .link-picker,
         .menu-picker,
@@ -2093,6 +2225,7 @@
         .theme-picker-button,
         .locale-picker-button,
         .text-size-picker-button,
+        .time-zone-picker-button,
         .search-picker-button,
         .link-picker-button,
         .menu-picker-button,
@@ -2131,6 +2264,7 @@
         .theme-picker-icon,
         .locale-picker-icon,
         .text-size-picker-icon,
+        .time-zone-picker-icon,
         .motion-picker-icon,
         .link-picker-icon,
         .menu-picker-icon,
@@ -2498,6 +2632,7 @@
         .theme-picker-tooltip,
         .locale-picker-tooltip,
         .text-size-picker-tooltip,
+        .time-zone-picker-tooltip,
         .motion-picker-tooltip,
         .link-picker-tooltip,
         .menu-picker-tooltip,
@@ -2525,6 +2660,7 @@
         .theme-picker-tooltip,
         .locale-picker-tooltip,
         .text-size-picker-tooltip,
+        .time-zone-picker-tooltip,
         .motion-picker-tooltip,
         .link-picker-tooltip,
         .menu-picker-tooltip,
@@ -2544,6 +2680,7 @@
         .theme-picker-tooltip,
         .locale-picker-tooltip,
         .text-size-picker-tooltip,
+        .time-zone-picker-tooltip,
         .motion-picker-tooltip,
         .link-picker-tooltip,
         .menu-picker-tooltip,
@@ -2600,6 +2737,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .time-zone-picker-list,
         .motion-picker-list,
         .link-picker-list,
         .menu-picker-panel,
@@ -2629,6 +2767,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .time-zone-picker-list,
         .motion-picker-list,
         .link-picker-list,
         .menu-picker-panel,
@@ -2649,6 +2788,7 @@
         :where(.theme-picker) { anchor-name: --lily-theme-picker; }
         :where(.locale-picker) { anchor-name: --lily-locale-picker; }
         :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
+        :where(.time-zone-picker) { anchor-name: --lily-time-zone-picker; }
         :where(.motion-picker) { anchor-name: --lily-motion-picker; }
         :where(.link-picker) { anchor-name: --lily-link-picker; }
         :where(.menu-picker) { anchor-name: --lily-menu-picker; }
@@ -2658,6 +2798,7 @@
         :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
         :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
         :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
+        :where(.time-zone-picker-list) { position-anchor: --lily-time-zone-picker; }
         :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
         :where(.link-picker-list) { position-anchor: --lily-link-picker; }
         :where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
@@ -2668,6 +2809,7 @@
             .theme-picker-list,
             .locale-picker-list,
             .text-size-picker-list,
+            .time-zone-picker-list,
             .motion-picker-list,
             .link-picker-list,
             .menu-picker-panel,
@@ -2685,11 +2827,12 @@
         }
     }
 
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .time-zone-picker-list, .motion-picker-list)
         > :where(
             .theme-picker-option,
             .locale-picker-option,
             .text-size-picker-option,
+            .time-zone-picker-option,
             .motion-picker-option
         ) {
         padding: var(--lily-space-xs) var(--lily-space-sm);
@@ -2699,7 +2842,7 @@
 
     /* data-active is the keyboard cursor (aria-activedescendant); focus
        stays on the listbox, so this is the only visible cue for it. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .time-zone-picker-list, .motion-picker-list)
         > :where([data-active]) {
         background-color: var(--lily-surface-alt);
         outline: var(--lily-focus-ring);
@@ -2708,7 +2851,7 @@
 
     /* aria-selected marks the applied theme/locale, which is not the
        same thing as the keyboard cursor. Both can be visible at once. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .time-zone-picker-list, .motion-picker-list)
         > :where([aria-selected="true"]) {
         font-weight: 600;
         background-color: var(--lily-surface-sunken);
@@ -3061,7 +3204,7 @@
     }
     /* Screen-reader-only — visually hidden but available to AT. The
        classic clip-rect pattern (works in every screen reader). */
-    :where(.screen-reader-span) {
+    :where(.screen-reader-span, .middle-truncation-full) {
         position: absolute;
         width: 1px;
         height: 1px;
@@ -3072,6 +3215,42 @@
         white-space: nowrap;
         border: 0;
     }
+    /* Middle truncation — a bounded one-line block; the shortened string is aria-hidden and the full
+       text (hidden above) stays in the accessibility tree. */
+    :where(.middle-truncation) {
+        display: block;
+        position: relative;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    /* Wheel picker — a scrolling listbox that snaps the chosen option to the centre. The selected option is filled with the
+       primary colour (aria-selected, not colour alone: it is also the activedescendant and gets a bold weight). */
+    :where(.wheel-picker-list) {
+        max-block-size: 10em;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scroll-snap-type: y mandatory;
+        border: 1px solid var(--color-base-300);
+        border-radius: var(--lily-radius-md);
+    }
+    :where(.wheel-picker-list:focus-visible) {
+        outline: 2px solid var(--lily-focus-ring);
+        outline-offset: 2px;
+    }
+    :where(.wheel-picker-option) {
+        padding: 0.5rem 1rem;
+        scroll-snap-align: center;
+        cursor: pointer;
+    }
+    :where(.wheel-picker-option[aria-selected="true"]) {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+        font-weight: 600;
+    }
+    :where(.wheel-picker-option[aria-disabled="true"]) {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
 
     /* ==========================================================================
      * Hero, figure, photo, media
@@ -3631,3 +3810,153 @@
 :where(a, code) {
     overflow-wrap: anywhere;
 }
+
+/* ============================================================================
+ * Helper packages — layout and look, shared verbatim by all themes.
+ *
+ * The data grid, kanban board, Gantt chart and calendar view are wide by nature.
+ * Each root scrolls sideways inside its own box and its table sizes to its content,
+ * so a narrow screen scrolls the table instead of wrapping every cell to a letter
+ * (the overflow guard above lets cells break anywhere, which is right for prose and
+ * wrong for a table that has a scroller). The toolbar controls of all four helpers
+ * share the data grid's look, every button has a >=24px target (WCAG 2.2 2.5.8), and
+ * the Gantt chart draws its bars from `data-in-range`, a milestone as a diamond and
+ * today as a rule. :where() keeps specificity at zero, so any consumer rule wins.
+ * ========================================================================= */
+
+:where(.data-grid, .kanban-board, .gantt-chart, .calendar-view) {
+    max-inline-size: 100%;
+    overflow-x: auto;
+}
+
+:where(.data-grid table, .kanban-board table, .gantt-chart table, .calendar-view table) {
+    inline-size: max-content;
+    min-inline-size: 100%;
+}
+
+:where(.kanban-board-export, .gantt-chart-export, .gantt-chart-zoom, .calendar-view-export,
+       .calendar-view-toolbar, .calendar-view-nav, .calendar-view-switcher) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lily-space-sm);
+    align-items: center;
+    margin-block-end: var(--lily-space-sm);
+}
+
+:where(.kanban-board-search, .gantt-chart-search, .calendar-view-search) {
+    padding: var(--lily-space-xs) var(--lily-space-sm);
+    border: var(--border) solid var(--lily-border);
+    border-radius: var(--lily-radius-sm);
+    background-color: var(--lily-surface);
+    color: var(--lily-text);
+    font: inherit;
+    min-block-size: 24px;
+}
+
+:where(.kanban-board-export-button,
+       .kanban-board-add-button,
+       .kanban-board-undo-button,
+       .kanban-board-collapse-button,
+       .kanban-board-lane-toggle,
+       .kanban-board-move-button,
+       .gantt-chart-export-button,
+       .gantt-chart-zoom-in-button,
+       .gantt-chart-zoom-out-button,
+       .gantt-chart-collapse-button,
+       .gantt-chart-collapse-all-button,
+       .gantt-chart-expand-all-button,
+       .gantt-chart-save-button,
+       .gantt-chart-cancel-button,
+       .calendar-view-export-button,
+       .calendar-view-previous-button,
+       .calendar-view-next-button,
+       .calendar-view-today-button,
+       .calendar-view-switcher-button) {
+    padding: var(--lily-space-xs) var(--lily-space-md);
+    border: var(--border) solid var(--lily-border);
+    border-radius: var(--lily-radius-sm);
+    background-color: var(--lily-surface);
+    color: var(--lily-text);
+    font: inherit;
+    cursor: pointer;
+    min-inline-size: 24px;
+    min-block-size: 24px;
+}
+
+:where(.kanban-board-export-button:disabled,
+       .kanban-board-add-button:disabled,
+       .kanban-board-undo-button:disabled,
+       .gantt-chart-export-button:disabled,
+       .gantt-chart-zoom-in-button:disabled,
+       .gantt-chart-zoom-out-button:disabled,
+       .calendar-view-export-button:disabled,
+       .calendar-view-previous-button[aria-disabled="true"],
+       .calendar-view-next-button[aria-disabled="true"]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+:where(.calendar-view-switcher-button[aria-pressed="true"]) {
+    background-color: var(--color-base-300);
+    font-weight: 600;
+}
+
+:where(.kanban-board-status, .gantt-chart-status, .calendar-view-status) {
+    margin-block-start: var(--lily-space-sm);
+    font-size: 0.875em;
+    opacity: 0.8;
+}
+
+:where(.calendar-view-event) {
+    display: block;
+    padding: 0 var(--lily-space-xs);
+    border-radius: var(--lily-radius-sm);
+    background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    font-size: 0.75rem;
+}
+
+:where(.gantt-table-th) {
+    min-inline-size: 2rem;
+    padding-inline: 0.25rem;
+    font-size: 0.75rem;
+    text-align: center;
+    white-space: nowrap;
+}
+
+:where(.gantt-table-th[scope="row"], .gantt-table-th:first-child) {
+    min-inline-size: 10rem;
+    padding-inline: var(--lily-space-sm);
+    font-size: inherit;
+    text-align: start;
+    white-space: normal;
+}
+
+:where(.gantt-table-td) {
+    min-block-size: 1.7rem;
+    padding: 0;
+}
+
+:where(.gantt-table-td[data-in-range]) {
+    background-color: var(--color-primary);
+}
+
+:where(.gantt-table-td[data-in-range][data-milestone]) {
+    clip-path: polygon(50% 8%, 92% 50%, 50% 92%, 8% 50%);
+}
+
+:where(.gantt-table-td[data-today]) {
+    border-inline-start: 2px solid var(--color-accent);
+}
+
+/* The time zone picker's options are long ("UTC+10:30 – Lord Howe Daylight Time"): size the list to its widest
+   option up to a cap, then wrap, rather than clipping the name or running off a phone. */
+:where(.time-zone-picker-list) {
+    inline-size: max-content;
+    max-inline-size: min(26rem, 90vw);
+    max-block-size: min(24rem, 70vh);
+    overflow-y: auto;
+}
+
+:where(.time-zone-picker-option) {
+    overflow-wrap: anywhere;
+}