@openwarelabs/ui 0.14.1 → 0.15.0

package/dist/styles.css

@@ -1789,6 +1789,208 @@
     outline: 0;
 }
 
+/* components/InlineEdit/InlineEdit.css */
+/* InlineEdit: text that turns into a text box where it is. The button and the box share their font, padding and border,
+   and pull back by them, so the text lines up with what's around it and doesn't move when the box opens. */
+.ow-inline-edit {
+    --ow-inline-edit-x: 0.375em;
+    --ow-inline-edit-y: 0.125em;
+    --ow-inline-edit-icon: clamp(12px, 0.75em, 20px);
+    display: inline-grid;
+    max-width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ow-space-2xs);
+}
+
+.ow-inline-edit--multiline {
+    display: grid;
+}
+
+.ow-inline-edit__display,
+.ow-inline-edit__input,
+.ow-inline-edit__field::after {
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: var(--ow-radius-sm);
+    padding: var(--ow-inline-edit-y) var(--ow-inline-edit-x);
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+}
+
+.ow-inline-edit__display,
+.ow-inline-edit__editor {
+    margin-inline: calc(-1px - var(--ow-inline-edit-x));
+}
+
+.ow-inline-edit__display {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    align-items: baseline;
+    gap: 0.3em;
+    background: transparent;
+    cursor: pointer;
+    text-align: start;
+}
+
+.ow-inline-edit--multiline .ow-inline-edit__display {
+    display: flex;
+}
+
+.ow-inline-edit__display:hover:not(:disabled) {
+    background: var(--ow-hover);
+}
+
+.ow-inline-edit__display:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-inline-edit__display:disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-inline-edit__text {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.ow-inline-edit__text--empty {
+    color: var(--ow-text-muted);
+}
+
+/* The pencil shows on hover and focus; on touch screens, which can't hover, always. */
+.ow-inline-edit__icon {
+    width: var(--ow-inline-edit-icon);
+    height: var(--ow-inline-edit-icon);
+    flex: none;
+    align-self: center;
+    color: var(--ow-icon);
+    opacity: 0;
+}
+
+.ow-inline-edit__display:hover .ow-inline-edit__icon,
+.ow-inline-edit__display:focus-visible .ow-inline-edit__icon {
+    opacity: 1;
+}
+
+@media (hover: none) {
+    .ow-inline-edit__display:not(:disabled) .ow-inline-edit__icon {
+        opacity: 1;
+    }
+}
+
+.ow-inline-edit__editor {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
+/* The box is as wide as a hidden copy of its text, plus the pencil's room, in the same grid cell. */
+.ow-inline-edit__field {
+    display: inline-grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.ow-inline-edit__field::after {
+    overflow: hidden;
+    padding-inline-end: calc(var(--ow-inline-edit-x) + var(--ow-inline-edit-icon) + 0.3em);
+    content: attr(data-value) " ";
+    grid-area: 1 / 1;
+    visibility: hidden;
+    white-space: pre;
+}
+
+.ow-inline-edit__input {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    grid-area: 1 / 1;
+    border-color: var(--ow-border-strong);
+    background: var(--ow-surface);
+    outline: 0;
+}
+
+.ow-inline-edit__input::placeholder {
+    color: var(--ow-text-muted);
+    opacity: 1;
+}
+
+.ow-inline-edit__input:focus {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-inline-edit__input:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-inline-edit__input[aria-invalid="true"] {
+    border-color: var(--ow-danger-solid);
+}
+
+.ow-inline-edit__input[aria-invalid="true"]:focus {
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+/* An auto-growing textarea is as tall as its scrollHeight, which leaves out the border, so it draws its border inside. */
+textarea.ow-inline-edit__input {
+    border: 0;
+    padding: calc(var(--ow-inline-edit-y) + 1px) calc(var(--ow-inline-edit-x) + 1px);
+    box-shadow: inset 0 0 0 1px var(--ow-border-strong);
+}
+
+textarea.ow-inline-edit__input:focus {
+    box-shadow:
+        inset 0 0 0 1px var(--ow-focus-border),
+        var(--ow-shadow-focus);
+}
+
+textarea.ow-inline-edit__input[aria-invalid="true"] {
+    box-shadow: inset 0 0 0 1px var(--ow-danger-solid);
+}
+
+textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
+    box-shadow:
+        inset 0 0 0 1px var(--ow-danger-solid),
+        var(--ow-shadow-focus-danger);
+}
+
+.ow-inline-edit__actions {
+    display: inline-flex;
+    flex: none;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-inline-edit__spinner {
+    flex: none;
+}
+
+.ow-inline-edit__error {
+    color: var(--ow-danger-text);
+    font: var(--ow-weight-regular) 14px / 1.4 var(--ow-font-sans);
+    letter-spacing: normal;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .ow-inline-edit__display,
+    .ow-inline-edit__icon,
+    .ow-inline-edit__input {
+        transition-property: background-color, border-color, box-shadow, opacity;
+        transition-duration: var(--ow-duration-fast);
+        transition-timing-function: var(--ow-ease-standard);
+    }
+}
+
 /* components/Select/Select.css */
 /* Select: the trigger looks like a field; the listbox floats in the top layer. */
 .ow-select {
@@ -7036,6 +7238,125 @@
     font-size: 12px;
 }
 
+/* components/SortableList/SortableList.css */
+/* SortableList: rows (or chips, in a row) people put in order. The picked-up one lifts; the others slide aside. */
+.ow-sortable {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ow-space-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-sortable--horizontal {
+    flex-direction: row;
+    overflow-x: auto;
+    padding-block: var(--ow-space-2xs);
+}
+
+.ow-sortable__item {
+    position: relative;
+    display: flex;
+    flex: none;
+    min-height: 40px;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    padding: var(--ow-space-xs) var(--ow-space-lg);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface);
+    color: var(--ow-text);
+    font-size: 14px;
+    outline: none;
+}
+
+.ow-sortable--horizontal .ow-sortable__item {
+    min-height: 32px;
+    padding-block: var(--ow-space-2xs);
+}
+
+.ow-sortable__content {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Whatever picks it up: the row, or its grip. Touch drags it rather than scrolling the page. */
+.ow-sortable__item--row,
+.ow-sortable__handle {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.ow-sortable__handle {
+    display: inline-flex;
+    width: 24px;
+    height: 28px;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: calc(var(--ow-space-xs) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ow-radius-md);
+    background: none;
+    color: var(--ow-icon);
+}
+
+.ow-sortable__handle:hover {
+    background: var(--ow-hover);
+    color: var(--ow-text-muted);
+}
+
+.ow-sortable--horizontal .ow-sortable__grip {
+    rotate: 90deg;
+}
+
+.ow-sortable__item--row:focus-visible,
+.ow-sortable__handle:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 1px;
+}
+
+/* While one is picked up, the others slide to make room. */
+.ow-sortable--dragging .ow-sortable__item {
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-sortable .ow-sortable__item--dragging {
+    z-index: 1;
+    border-color: var(--ow-border-strong);
+    box-shadow: var(--ow-shadow-menu);
+    transition: none;
+}
+
+:root[data-ow-sortable-drag],
+:root[data-ow-sortable-drag] * {
+    cursor: grabbing !important;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.ow-sortable--disabled .ow-sortable__item {
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-muted);
+    cursor: default;
+}
+
+.ow-sortable--disabled .ow-sortable__handle {
+    background: none;
+    color: var(--ow-text-disabled);
+    cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-sortable--dragging .ow-sortable__item {
+        transition: none;
+    }
+}
+
 /* components/Table/Table.css */
 /* Table: a bordered card with a quiet header row and hairlines between rows. */
 .ow-table-wrap {
@@ -8002,6 +8323,134 @@
     font-size: 12px;
 }
 
+/* components/TreeView/TreeView.css */
+/* TreeView: rows that open, select and check. FileTree's hairline guides, NavList's 14px text. */
+.ow-treeview,
+.ow-treeview__group {
+    display: grid;
+    gap: 1px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-treeview {
+    color: var(--ow-text);
+    font-size: 14px;
+}
+
+/* The guide runs under the parent's chevron. */
+.ow-treeview__group {
+    margin-inline-start: 14px;
+    border-inline-start: 1px solid var(--ow-border);
+    padding-inline-start: var(--ow-space-2xs);
+}
+
+.ow-treeview__item {
+    outline: none;
+}
+
+.ow-treeview__row {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    border-radius: var(--ow-radius-form);
+    padding-block: var(--ow-space-2xs);
+    padding-inline: var(--ow-space-2xs) var(--ow-space-sm);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-treeview__row:hover {
+    background: var(--ow-surface-muted);
+}
+
+.ow-treeview__item:focus-visible > .ow-treeview__row {
+    box-shadow: 0 0 0 2px var(--ow-focus-ring);
+}
+
+.ow-treeview__row--selected,
+.ow-treeview__row--selected:hover {
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+}
+
+.ow-treeview__row--disabled,
+.ow-treeview__row--loading {
+    color: var(--ow-text-muted);
+    cursor: default;
+}
+
+.ow-treeview__toggle {
+    display: inline-flex;
+    width: 20px;
+    height: 24px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--ow-text-muted);
+}
+
+.ow-treeview__toggle svg {
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-treeview__toggle:dir(rtl) svg {
+    transform: scaleX(-1);
+}
+
+[aria-expanded="true"] > .ow-treeview__row .ow-treeview__toggle svg {
+    transform: rotate(90deg);
+}
+
+.ow-treeview .ow-checkbox__input {
+    pointer-events: none;
+}
+
+.ow-treeview__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+.ow-treeview__text {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+}
+
+.ow-treeview__label,
+.ow-treeview__description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-treeview__description,
+.ow-treeview__end {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+}
+
+.ow-treeview__end {
+    flex-shrink: 0;
+}
+
+.ow-treeview__row--selected :is(.ow-treeview__icon, .ow-treeview__description, .ow-treeview__end) {
+    color: inherit;
+}
+
+.ow-treeview__row--error {
+    color: var(--ow-danger-text);
+}
+
+.ow-treeview__retry {
+    font-weight: var(--ow-weight-emphasis);
+    text-decoration: underline;
+}
+
 /* components/EmptyState/EmptyState.css */
 /* EmptyState: centred, at most 360px of text, an icon tile above. */
 .ow-empty {
@@ -8212,6 +8661,148 @@
     font-weight: var(--ow-weight-regular);
 }
 
+/* components/NavigationMenu/NavigationMenu.css */
+/* NavigationMenu: a site's top links, with panels of links on Popover's surface. Rules are scoped under
+   .ow-navigation-menu so SiteHeader's `nav a` colours don't reach into the panels. */
+.ow-navigation-menu {
+    min-width: 0;
+    font-family: var(--ow-font-sans);
+}
+
+.ow-navigation-menu__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-navigation-menu .ow-navigation-menu__trigger {
+    display: inline-flex;
+    min-height: 32px;
+    align-items: center;
+    gap: var(--ow-space-3xs);
+    border: 0;
+    border-radius: var(--ow-radius-pill);
+    background: transparent;
+    padding: 0 var(--ow-space-sm);
+    color: var(--ow-text-soft);
+    font: inherit;
+    font-size: 14px;
+    font-weight: var(--ow-weight-control);
+    text-decoration: none;
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-navigation-menu .ow-navigation-menu__trigger:hover,
+.ow-navigation-menu__trigger[aria-expanded="true"] {
+    background: var(--ow-hover);
+    color: var(--ow-text);
+}
+
+.ow-navigation-menu__trigger[aria-current="page"],
+.ow-navigation-menu__trigger[data-active] {
+    color: var(--ow-text);
+}
+
+.ow-navigation-menu .ow-navigation-menu__trigger:focus-visible,
+.ow-navigation-menu .ow-navigation-menu__link:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-navigation-menu__chevron {
+    color: var(--ow-text-muted);
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+[aria-expanded="true"] > .ow-navigation-menu__chevron {
+    transform: rotate(180deg);
+}
+
+.ow-navigation-menu__panel {
+    grid-template-columns: repeat(var(--ow-navigation-menu-columns), minmax(0, 15rem));
+    max-width: calc(100vw - 16px);
+    padding: var(--ow-space-sm);
+    gap: var(--ow-space-sm);
+}
+
+.ow-navigation-menu__panel--full {
+    grid-template-columns: repeat(var(--ow-navigation-menu-columns), minmax(0, 1fr));
+}
+
+.ow-navigation-menu__group {
+    display: grid;
+    align-content: start;
+    gap: var(--ow-space-3xs);
+}
+
+.ow-navigation-menu__group-title {
+    padding: var(--ow-space-xs) var(--ow-space-sm) var(--ow-space-2xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-weight: var(--ow-weight-label);
+}
+
+.ow-navigation-menu .ow-navigation-menu__link {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ow-space-sm);
+    border-radius: var(--ow-radius-lg);
+    padding: var(--ow-space-sm);
+    color: var(--ow-text);
+    text-decoration: none;
+    transition: background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-navigation-menu .ow-navigation-menu__link:hover,
+.ow-navigation-menu__link[aria-current="page"] {
+    background: var(--ow-surface-muted);
+}
+
+.ow-navigation-menu__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+.ow-navigation-menu__text {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+}
+
+.ow-navigation-menu__title {
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.3;
+}
+
+.ow-navigation-menu__description {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.ow-navigation-menu .ow-navigation-menu__link--featured,
+.ow-navigation-menu .ow-navigation-menu__link--featured:hover {
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 9rem;
+    background: var(--ow-primary-subtle);
+    padding: var(--ow-space-lg);
+}
+
+@media (max-width: 640px) {
+    .ow-navigation-menu__panel {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
 /* components/AppShell/AppShell.css */
 /* AppShell: a sidebar down the left and the page beside it. It measures its own width (a container query), so it
    folds into a drawer under its breakpoint (900px by default) whether it fills the window or sits in a smaller frame. */
@@ -8727,6 +9318,52 @@
     }
 }
 
+/* components/VirtualList/VirtualList.css */
+/* VirtualList: a scrolling list that renders only the rows in view, each placed by its offset from the top. */
+.ow-virtual-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.ow-virtual-list__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    /* The list keeps its own place as rows are measured or added above; the browser's anchoring would double it. */
+    overflow-anchor: none;
+    border-radius: inherit;
+}
+
+.ow-virtual-list__scroll:focus-visible,
+.ow-virtual-list__item:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-virtual-list__inner {
+    position: relative;
+    flex-shrink: 0;
+    width: 100%;
+}
+
+.ow-virtual-list__item {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+    border-radius: var(--ow-radius-md);
+}
+
+.ow-virtual-list__footer {
+    display: flex;
+    justify-content: center;
+    padding: var(--ow-space-md);
+}
+
 /* components/AspectRatio/AspectRatio.css */
 /* AspectRatio: a box that keeps its shape, with whatever is inside filling it. The hidden overflow keeps the ratio
    when the content is taller than the box would be. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwarelabs/ui",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Openware UI: React components and design tokens — midnight and brass, tactile buttons and Inter, in light and dark.",
   "license": "MIT",
   "author": "Alexander Silver",