@openwarelabs/ui 0.3.1 → 0.4.0

package/dist/components.css

@@ -313,9 +313,8 @@
     padding: 0;
 }
 .ow-button--icon-only.ow-button--sm {
-    width: 28px;
-    height: 28px;
-    min-height: 28px;
+    width: 32px;
+    height: 32px;
 }
 .ow-button--icon-only.ow-button--md {
     width: 40px;
@@ -523,29 +522,38 @@
     flex-wrap: nowrap;
     gap: 0;
 }
-.ow-button-group--attached > .ow-button {
+/* A button joins its neighbours whether it's a direct child or wrapped one level down, by a Tooltip or a Menu's trigger. */
+.ow-button-group--attached > .ow-button,
+.ow-button-group--attached > * > .ow-button {
     position: relative;
 }
 .ow-button-group--attached > .ow-button:hover,
 .ow-button-group--attached > .ow-button:focus-visible,
-.ow-button-group--attached > .ow-button--pressed {
+.ow-button-group--attached > .ow-button--pressed,
+.ow-button-group--attached > * > .ow-button:hover,
+.ow-button-group--attached > * > .ow-button:focus-visible,
+.ow-button-group--attached > * > .ow-button--pressed {
     z-index: 1;
 }
-.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:first-child) {
+.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:first-child),
+.ow-button-group--attached:not(.ow-button-group--vertical) > :not(:first-child) > .ow-button {
     margin-left: -1px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:last-child) {
+.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:last-child),
+.ow-button-group--attached:not(.ow-button-group--vertical) > :not(:last-child) > .ow-button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
-.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:first-child) {
+.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:first-child),
+.ow-button-group--attached.ow-button-group--vertical > :not(:first-child) > .ow-button {
     margin-top: -1px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
-.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:last-child) {
+.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:last-child),
+.ow-button-group--attached.ow-button-group--vertical > :not(:last-child) > .ow-button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -589,6 +597,139 @@
     opacity: 0.5;
 }
 
+/* components/ToggleButtonGroup/ToggleButtonGroup.css */
+/* ToggleButtonGroup: toggles joined like an attached ButtonGroup, sharing borders, each pressed in while it's on.
+   An item is the button itself, or the Tooltip around an icon-only one. */
+.ow-toggle-group {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    vertical-align: middle;
+}
+
+.ow-toggle-group--vertical {
+    flex-direction: column;
+}
+
+.ow-toggle-group > * {
+    position: relative;
+}
+
+.ow-toggle-group > .ow-tooltip > .ow-button {
+    flex: 1;
+}
+
+/* Hovered and pressed buttons sit above their neighbours so their whole border shows; a focused one above all,
+   so nothing covers its ring. */
+.ow-toggle-group > :hover,
+.ow-toggle-group > .ow-button--pressed,
+.ow-toggle-group > :has(> .ow-button--pressed) {
+    z-index: 1;
+}
+
+.ow-toggle-group > :focus-visible,
+.ow-toggle-group > :has(> :focus-visible) {
+    z-index: 2;
+}
+
+/* Shared borders: each item overlaps the one before by a border's width, and only the ends keep their corners. */
+.ow-toggle-group:not(.ow-toggle-group--vertical) > :not(:first-child) {
+    margin-inline-start: -1px;
+}
+
+.ow-toggle-group:not(.ow-toggle-group--vertical) > .ow-button:not(:first-child),
+.ow-toggle-group:not(.ow-toggle-group--vertical) > :not(:first-child) > .ow-button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+}
+
+.ow-toggle-group:not(.ow-toggle-group--vertical) > .ow-button:not(:last-child),
+.ow-toggle-group:not(.ow-toggle-group--vertical) > :not(:last-child) > .ow-button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+
+.ow-toggle-group--vertical > :not(:first-child) {
+    margin-block-start: -1px;
+}
+
+.ow-toggle-group--vertical > .ow-button:not(:first-child),
+.ow-toggle-group--vertical > :not(:first-child) > .ow-button {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+}
+
+.ow-toggle-group--vertical > .ow-button:not(:last-child),
+.ow-toggle-group--vertical > :not(:last-child) > .ow-button {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+}
+
+/* An icon-only option among labelled ones matches their height. */
+.ow-toggle-group--sm:not(.ow-toggle-group--icon-only) .ow-button--icon-only {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+}
+
+/* components/Toolbar/Toolbar.css */
+/* Toolbar: a row (or column) of controls for one context, raised on its own surface or plain. */
+.ow-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    min-width: 0;
+}
+
+.ow-toolbar--sm {
+    gap: var(--ow-space-2xs);
+}
+
+.ow-toolbar--raised {
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-xs);
+    box-shadow: var(--ow-shadow-control);
+}
+
+/* 4px inside a 12px corner keeps the buttons' 8px corners concentric with the bar's. */
+.ow-toolbar--raised.ow-toolbar--sm {
+    padding: var(--ow-space-2xs);
+}
+
+.ow-toolbar--vertical {
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+
+/* The separator stops short of the bar's edges, so it divides groups without boxing them in. */
+.ow-toolbar__separator {
+    flex-shrink: 0;
+    align-self: center;
+    width: 1px;
+    height: 20px;
+    margin: 0 var(--ow-space-2xs);
+    background: var(--ow-border);
+}
+
+.ow-toolbar--sm .ow-toolbar__separator {
+    height: 16px;
+}
+
+.ow-toolbar--vertical .ow-toolbar__separator {
+    width: 20px;
+    height: 1px;
+    margin: var(--ow-space-2xs) 0;
+}
+
+.ow-toolbar--vertical.ow-toolbar--sm .ow-toolbar__separator {
+    width: 16px;
+}
+
 /* components/SegmentedControl/SegmentedControl.css */
 /* SegmentedControl and segmented Tabs: a well with the chosen segment raised. */
 .ow-segmented,
@@ -994,6 +1135,153 @@
     white-space: nowrap;
 }
 
+/* components/DateField/DateField.css */
+/* DateField and TimeField: typed segments in a field drawn like Input. The whole field shows focus while a segment
+   has it; the focused segment is tinted. */
+.ow-date-field {
+    display: flex;
+    width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
+    height: 40px;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-surface);
+    /* With the segments' own 2px, the digits start where Input's text does. */
+    padding: 0 var(--ow-space-md);
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-regular);
+    line-height: 1.45;
+    font-variant-numeric: tabular-nums;
+    cursor: text;
+    transition-property: border-color, background-color, box-shadow, opacity;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-date-field--sm {
+    height: 32px;
+    gap: var(--ow-space-2xs);
+    padding: 0 var(--ow-space-sm);
+    font-size: 13px;
+}
+
+.ow-date-field--with-start {
+    padding-left: var(--ow-space-lg);
+}
+
+.ow-date-field--sm.ow-date-field--with-start {
+    padding-left: var(--ow-space-md);
+}
+
+.ow-date-field:focus-within {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-date-field:has(.ow-date-field__segment:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-date-field--invalid {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-date-field--invalid:focus-within {
+    border-color: var(--ow-danger-solid);
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+.ow-date-field--readonly {
+    cursor: default;
+}
+
+.ow-date-field--disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-date-field__addon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-text-muted);
+    cursor: default;
+}
+
+.ow-date-field__segments {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    white-space: pre;
+}
+
+.ow-date-field__segment {
+    flex-shrink: 0;
+    border-radius: var(--ow-radius-sm);
+    padding: 2px;
+    color: var(--ow-text);
+    text-align: center;
+    caret-color: transparent;
+    outline: 0;
+    transition-property: color, background-color, box-shadow;
+    transition-duration: var(--ow-duration-fast);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-date-field__segment::selection {
+    background: transparent;
+}
+
+/* Tabular digits are 1ch wide, so a segment keeps its width while a value is half typed ("1" on the way to "12").
+   Placeholders keep their own width, so the letters sit evenly. */
+.ow-date-field__segment--digits-2:not(.ow-date-field__segment--placeholder) {
+    min-width: calc(2ch + 4px);
+}
+
+.ow-date-field__segment--digits-4:not(.ow-date-field__segment--placeholder) {
+    min-width: calc(4ch + 4px);
+}
+
+.ow-date-field__segment--placeholder {
+    color: var(--ow-text-muted);
+}
+
+/* The tint and edge of selected things, as on Pagination's current page. */
+.ow-date-field__segment:focus {
+    background: var(--ow-primary-subtle);
+    box-shadow: inset 0 0 0 1px var(--ow-primary-border);
+    color: var(--ow-primary-text);
+}
+
+.ow-date-field__segment--placeholder:focus {
+    color: var(--ow-text-muted);
+}
+
+.ow-date-field--disabled .ow-date-field__segment {
+    cursor: not-allowed;
+}
+
+.ow-date-field--readonly .ow-date-field__segment {
+    cursor: default;
+}
+
+.ow-date-field__literal {
+    color: var(--ow-text-muted);
+    user-select: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-date-field,
+    .ow-date-field__segment {
+        transition: none;
+    }
+}
+
 /* components/Textarea/Textarea.css */
 /* Textarea: the field look from Input.css, taller and resizable. */
 .ow-textarea {
@@ -1207,6 +1495,87 @@
     font-weight: var(--ow-weight-control);
 }
 
+/* components/ListBox/ListBox.css */
+/* ListBox: Select's list on the page. It wears Select.css's .ow-listbox and .ow-option (rows, checkmarks, group
+   labels, sizes), so the two stay in step; this file only undoes the floating and adds the field states. */
+.ow-listbox.ow-listbox--standalone {
+    position: relative;
+    z-index: auto;
+    min-width: 0;
+    box-shadow: none;
+    overscroll-behavior: auto;
+    outline: 0;
+    transition-property: border-color, box-shadow, opacity;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-listbox--standalone .ow-option {
+    user-select: none;
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+/* In a floating list the pointer moves the highlight; here hover is its own state, apart from the keyboard's. */
+.ow-listbox--standalone:not(.ow-listbox--disabled, .ow-listbox--readonly) .ow-option:not(.ow-option--disabled):hover {
+    background: var(--ow-hover);
+}
+
+.ow-listbox--readonly .ow-option {
+    cursor: default;
+}
+
+.ow-listbox--standalone.ow-listbox--focus-visible {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-listbox--standalone.ow-listbox--invalid {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-listbox--standalone.ow-listbox--invalid.ow-listbox--focus-visible {
+    border-color: var(--ow-danger-solid);
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+.ow-listbox--standalone.ow-listbox--disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-listbox--disabled .ow-option {
+    cursor: not-allowed;
+}
+
+/* An empty list is one option row tall. */
+.ow-listbox--standalone .ow-listbox__empty {
+    padding: var(--ow-space-md);
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.ow-listbox--standalone.ow-listbox--sm .ow-listbox__empty {
+    padding-block: var(--ow-space-sm);
+    font-size: 12px;
+}
+
+.ow-option__icon {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--ow-text-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-listbox.ow-listbox--standalone,
+    .ow-listbox--standalone .ow-option {
+        transition: none;
+    }
+}
+
 /* components/Combobox/Combobox.css */
 /* Combobox: a grouped field (Input.css) with a chevron, over Select's listbox. */
 .ow-combobox {
@@ -2013,9 +2382,32 @@
     line-height: 1.4;
 }
 
-/* components/Badge/Badge.css */
-/* Badge (the app's Pill): status in a bordered pill. */
-.ow-badge {
+/* A checkbox in a Field with an error (the terms, say) takes the invalid field's border until it's ticked. */
+.ow-field .ow-checkbox__input[aria-invalid="true"]:not(:checked, :disabled) {
+    border-color: var(--ow-danger-line);
+}
+
+/* components/Form/Form.css */
+/* Form: its rows sit ow-space-xl apart, as the README asks. */
+.ow-form {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: var(--ow-space-xl);
+}
+
+/* A button on a row of its own keeps its width, unless it's fullWidth. */
+.ow-form > .ow-button {
+    justify-self: start;
+}
+
+.ow-form > .ow-button--full {
+    justify-self: stretch;
+}
+
+/* components/Badge/Badge.css */
+/* Badge (the app's Pill): status in a bordered pill. */
+.ow-badge {
     display: inline-flex;
     width: fit-content;
     align-items: center;
@@ -2303,6 +2695,96 @@
     }
 }
 
+/* components/Meter/Meter.css */
+/* Meter: ProgressBar's header and track (Progress.css), for an amount within a range. Tones swap in a status colour. */
+.ow-meter {
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-sm);
+}
+
+.ow-meter--primary {
+    --ow-meter-fill: var(--ow-progress);
+}
+
+/* Status fills use the status text colours, which keep 3:1 against the track in both themes. */
+.ow-meter--success {
+    --ow-meter-fill: var(--ow-success-text);
+}
+
+.ow-meter--warning {
+    --ow-meter-fill: var(--ow-warning-text);
+}
+
+.ow-meter--danger {
+    --ow-meter-fill: var(--ow-danger-text);
+}
+
+.ow-meter__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ow-space-md);
+}
+
+.ow-meter__label {
+    min-width: 0;
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-meter__value {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-meter__track {
+    display: flex;
+    height: 4px;
+    overflow: hidden;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-meter-track);
+}
+
+.ow-meter--md .ow-meter__track {
+    height: 8px;
+}
+
+.ow-meter__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--ow-meter-fill);
+    transition:
+        width var(--ow-duration-slow) var(--ow-ease-standard),
+        background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+/* Segments: the track splits into blocks, each with its own track and a share of the fill. */
+.ow-meter__track--segmented {
+    gap: var(--ow-space-2xs);
+    overflow: visible;
+    border-radius: 0;
+    background: none;
+}
+
+.ow-meter__segment {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-meter-track);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-meter__fill {
+        transition: none;
+    }
+}
+
 /* components/Tooltip/Tooltip.css */
 /* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
@@ -2907,6 +3389,13 @@
     cursor: not-allowed;
 }
 
+/* Holds a missing button's place, so a month's name stays centred (RangeCalendar's months side by side). */
+.ow-calendar__nav-space {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+}
+
 .ow-calendar__grid {
     border-collapse: separate;
     border-spacing: 2px;
@@ -3040,6 +3529,200 @@
     padding: var(--ow-space-md);
 }
 
+/* components/Calendar/RangeCalendar.css */
+/* RangeCalendar: Calendar's month grid, with the range's ends as solid caps and a primary-subtle band between them. */
+.ow-range-calendar {
+    display: inline-flex;
+    max-width: 100%;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--ow-space-2xl) var(--ow-space-4xl);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+}
+
+.ow-range-calendar .ow-calendar__cell {
+    position: relative;
+}
+
+/* The band sits behind the day buttons and reaches 1px into the 2px gaps either side, so the days join up. */
+.ow-range-calendar__cell--in-range::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    left: -1px;
+    background: var(--ow-primary-subtle);
+}
+
+/* It rounds off at the ends of each week, and side by side at the ends of each month. */
+.ow-range-calendar__cell--row-start::before {
+    left: 0;
+    border-top-left-radius: var(--ow-radius-form);
+    border-bottom-left-radius: var(--ow-radius-form);
+}
+
+.ow-range-calendar__cell--row-end::before {
+    right: 0;
+    border-top-right-radius: var(--ow-radius-form);
+    border-bottom-right-radius: var(--ow-radius-form);
+}
+
+/* At the caps it starts and stops halfway, so it fills in behind their inner corners. */
+.ow-range-calendar__cell--start::before {
+    left: 50%;
+}
+
+.ow-range-calendar__cell--end::before {
+    right: 50%;
+}
+
+.ow-range-calendar__day--in-range:not(.ow-calendar__day--disabled):hover {
+    border-color: var(--ow-primary-border);
+    background: var(--ow-primary-soft);
+}
+
+/* components/Calendar/DateRangePicker.css */
+/* DateRangePicker: Select's trigger with a calendar icon and a clear button, opening a RangeCalendar and presets. */
+.ow-date-range-picker {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    vertical-align: middle;
+}
+
+.ow-date-range-picker--md {
+    min-width: 240px;
+}
+
+.ow-date-range-picker--sm {
+    min-width: 210px;
+}
+
+.ow-date-range-picker__trigger {
+    width: 100%;
+}
+
+.ow-date-range-picker__icon {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+/* The clear button sits over the trigger's right end (a button can't hold another), which leaves it room. */
+.ow-date-range-picker--clearable.ow-date-range-picker--md .ow-date-range-picker__trigger {
+    padding-right: 38px;
+}
+
+.ow-date-range-picker--clearable.ow-date-range-picker--sm .ow-date-range-picker__trigger {
+    padding-right: 30px;
+}
+
+.ow-date-range-picker__clear {
+    position: absolute;
+    top: 50%;
+    right: var(--ow-space-sm);
+    transform: translateY(-50%);
+}
+
+.ow-date-range-picker--sm .ow-date-range-picker__clear {
+    right: var(--ow-space-2xs);
+}
+
+/* Hovering the clear button still shows the field's hover edge. */
+.ow-date-range-picker:hover .ow-date-range-picker__trigger:not(:disabled):not(.ow-select--open):not(.ow-select--invalid):not(:focus-visible) {
+    border-color: var(--ow-border-hover);
+}
+
+.ow-date-range-picker__panel {
+    display: flex;
+    width: auto;
+    max-width: calc(100vw - 16px);
+    align-items: flex-start;
+    gap: var(--ow-space-lg);
+    padding: var(--ow-space-md);
+}
+
+.ow-date-range-picker__presets {
+    display: grid;
+    width: 148px;
+    flex-shrink: 0;
+    align-self: stretch;
+    align-content: start;
+    gap: var(--ow-space-2xs);
+    border-right: 1px solid var(--ow-border);
+    padding-right: var(--ow-space-md);
+}
+
+.ow-date-range-picker__preset {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    margin: 0;
+    border: 0;
+    border-radius: var(--ow-radius-lg);
+    background: transparent;
+    padding: var(--ow-space-xs) var(--ow-space-sm);
+    color: var(--ow-text);
+    font: inherit;
+    font-size: 14px;
+    font-weight: var(--ow-weight-control);
+    line-height: 1.1;
+    text-align: left;
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-date-range-picker__preset:hover {
+    background: var(--ow-hover);
+}
+
+.ow-date-range-picker__preset:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-date-range-picker__preset--current,
+.ow-date-range-picker__preset--current:hover {
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-date-range-picker__preset-label {
+    min-width: 0;
+    flex: 1;
+}
+
+.ow-date-range-picker__preset-check {
+    flex-shrink: 0;
+}
+
+/* On a phone the presets wrap in rows above the month, no wider than it. */
+@media (max-width: 479px) {
+    .ow-date-range-picker__panel {
+        width: min-content;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .ow-date-range-picker__presets {
+        display: flex;
+        width: auto;
+        flex-wrap: wrap;
+        border-right: 0;
+        border-bottom: 1px solid var(--ow-border);
+        padding: 0 0 var(--ow-space-md);
+    }
+
+    .ow-date-range-picker__preset {
+        border: 1px solid var(--ow-border);
+    }
+}
+
 /* components/ColorPicker/ColorPicker.css */
 /* ColorPicker: react-colorful's saturation area and hue slider in Openware's look, with a hex field,
    an eyedropper and swatches. react-colorful injects its own styles after this sheet, so these
@@ -3238,6 +3921,318 @@
     padding: var(--ow-space-lg);
 }
 
+/* components/ColorPicker/ColorArea.css */
+/* ColorArea: one hue's square, white to the hue across and down to black, in ColorPicker's look (its corners,
+   hairline and thumb), so the two can sit side by side. */
+.ow-color-area {
+    --ow-color-area-direction: to right;
+    position: relative;
+    width: var(--ow-color-area-width, 232px);
+    max-width: 100%;
+    height: var(--ow-color-area-height, 152px);
+    flex-shrink: 0;
+    border-radius: var(--ow-radius-form);
+    background: linear-gradient(to top, #000000, transparent), linear-gradient(var(--ow-color-area-direction), #ffffff, var(--ow-color-area-hue));
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.ow-color-area:dir(rtl) {
+    --ow-color-area-direction: to left;
+}
+
+.ow-color-area__thumb {
+    position: absolute;
+    top: var(--ow-color-area-y);
+    inset-inline-start: var(--ow-color-area-x);
+    width: 18px;
+    height: 18px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    background: var(--ow-color-area-color);
+    box-shadow:
+        0 0 0 1px rgba(15, 23, 42, 0.18),
+        0 2px 6px rgba(15, 23, 42, 0.28);
+    pointer-events: none;
+    translate: -50% -50%;
+    transition: scale var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-color-area:dir(rtl) .ow-color-area__thumb {
+    translate: 50% -50%;
+}
+
+.ow-color-area--dragging .ow-color-area__thumb {
+    scale: 1.15;
+}
+
+/* Focused by a press, it shows no ring until a key is used (useDrag's pointerFocus). */
+.ow-color-area:not(.ow-color-area--pointer) .ow-color-area__thumb:has(:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-color-area--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-color-area__thumb {
+        transition: none;
+    }
+}
+
+/* components/ColorPicker/ColorSlider.css */
+/* ColorSlider: a 12px pill track painted with the channel's range, and ColorPicker's thumb, which shows the colour.
+   The input is visually hidden inside the thumb, so a screen reader's focus box sits where the thumb is. */
+.ow-color-slider {
+    --ow-color-slider-direction: to right;
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-md);
+}
+
+.ow-color-slider--horizontal:dir(rtl) {
+    --ow-color-slider-direction: to left;
+}
+
+.ow-color-slider--vertical {
+    --ow-color-slider-direction: to top;
+    display: inline-flex;
+    height: 152px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ow-color-slider__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ow-space-md);
+}
+
+.ow-color-slider--vertical .ow-color-slider__header {
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+}
+
+.ow-color-slider__label {
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-color-slider__value {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-color-slider__track {
+    position: relative;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-color-slider-gradient);
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* A taller target than the 12px track, the thumb's full height. */
+.ow-color-slider__track::before {
+    position: absolute;
+    content: "";
+}
+
+.ow-color-slider--horizontal .ow-color-slider__track {
+    height: 12px;
+}
+
+.ow-color-slider--horizontal .ow-color-slider__track::before {
+    inset: -4px 0;
+}
+
+.ow-color-slider--vertical .ow-color-slider__track {
+    width: 12px;
+    min-height: 0;
+    flex: 1;
+}
+
+.ow-color-slider--vertical .ow-color-slider__track::before {
+    inset: 0 -4px;
+}
+
+.ow-color-slider--alpha .ow-color-slider__track {
+    background:
+        var(--ow-color-slider-gradient),
+        repeating-conic-gradient(var(--ow-gray-200) 0 25%, #ffffff 0 50%) 0 0 / 12px 12px;
+}
+
+.ow-color-slider__thumb {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    background:
+        linear-gradient(var(--ow-color-slider-thumb), var(--ow-color-slider-thumb)),
+        repeating-conic-gradient(var(--ow-gray-200) 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
+    box-shadow:
+        0 0 0 1px rgba(15, 23, 42, 0.18),
+        0 2px 6px rgba(15, 23, 42, 0.28);
+    pointer-events: none;
+    transition: scale var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-color-slider--horizontal .ow-color-slider__thumb {
+    top: 50%;
+    inset-inline-start: var(--ow-color-slider-position);
+    translate: -50% -50%;
+}
+
+.ow-color-slider--horizontal:dir(rtl) .ow-color-slider__thumb {
+    translate: 50% -50%;
+}
+
+.ow-color-slider--vertical .ow-color-slider__thumb {
+    bottom: var(--ow-color-slider-position);
+    left: 50%;
+    translate: -50% 50%;
+}
+
+.ow-color-slider--dragging .ow-color-slider__thumb {
+    scale: 1.15;
+}
+
+/* Focused by a press, it shows no ring until a key is used (useDrag's pointerFocus). */
+.ow-color-slider:not(.ow-color-slider--pointer) .ow-color-slider__thumb:has(:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-color-slider--disabled {
+    opacity: 0.55;
+}
+
+.ow-color-slider--disabled .ow-color-slider__track {
+    cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-color-slider__thumb {
+        transition: none;
+    }
+}
+
+/* components/ColorPicker/ColorSwatchPicker.css */
+/* ColorSwatchPicker: swatches in wrapping rows, like ColorPicker's. The chosen one gets ColorPicker's ring (a gap in
+   the surface colour, then a 2px ring in the text colour) and a check in white or slate, whichever reads on it.
+   The focus outline lands exactly on the ring, so a focused swatch's ring turns the focus colour. */
+.ow-color-swatch-picker {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-sm);
+}
+
+.ow-color-swatch-picker--sm {
+    gap: var(--ow-space-xs);
+}
+
+.ow-color-swatch-picker__swatch {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ow-radius-form);
+    background:
+        linear-gradient(var(--ow-color-swatch-picker-value), var(--ow-color-swatch-picker-value)),
+        repeating-conic-gradient(var(--ow-gray-200) 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+        transform var(--ow-duration-base) var(--ow-ease-spring),
+        box-shadow var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-color-swatch-picker--sm .ow-color-swatch-picker__swatch {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--ow-radius-md);
+}
+
+.ow-color-swatch-picker--circle .ow-color-swatch-picker__swatch {
+    border-radius: 50%;
+}
+
+.ow-color-swatch-picker__swatch:hover:not([aria-disabled="true"]) {
+    transform: scale(1.1);
+}
+
+.ow-color-swatch-picker__swatch[aria-checked="true"] {
+    box-shadow:
+        inset 0 0 0 1px rgba(15, 23, 42, 0.14),
+        0 0 0 2px var(--ow-surface),
+        0 0 0 4px var(--ow-text);
+}
+
+.ow-color-swatch-picker__swatch:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-color-swatch-picker__check {
+    opacity: 0;
+    scale: 0.5;
+    transition:
+        opacity var(--ow-duration-fast) var(--ow-ease-standard),
+        scale var(--ow-duration-base) var(--ow-ease-spring);
+}
+
+.ow-color-swatch-picker__swatch[data-ink="light"] .ow-color-swatch-picker__check {
+    color: #ffffff;
+}
+
+.ow-color-swatch-picker__swatch[data-ink="dark"] .ow-color-swatch-picker__check {
+    color: var(--ow-gray-900);
+}
+
+.ow-color-swatch-picker__swatch[aria-checked="true"] .ow-color-swatch-picker__check {
+    opacity: 1;
+    scale: 1;
+}
+
+.ow-color-swatch-picker__swatch[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+.ow-color-swatch-picker--disabled {
+    opacity: 0.55;
+}
+
+/* The group fades as a whole; its swatches don't fade again. */
+.ow-color-swatch-picker--disabled .ow-color-swatch-picker__swatch[aria-disabled="true"] {
+    opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-color-swatch-picker__swatch,
+    .ow-color-swatch-picker__check {
+        transition: none;
+    }
+}
+
 /* components/CommandPalette/CommandPalette.css */
 /* CommandPalette: a dialog 12vh from the top, 560px wide, with a search row and a results list. */
 .ow-palette {