@pienter/ui 0.10.0 → 0.13.0

package/components/form/tags-input/TagsInput.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        :data-layout="layout === 'inline' ? 'inline' : undefined"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <label class="pui-field__label" :for="inputId"
             >{{ label
             }}<span
@@ -31,6 +36,7 @@
             >
                 <span class="pui-tags-input__tag-label">{{ tag }}</span>
                 <button
+                    v-if="!readonly"
                     type="button"
                     class="pui-tags-input__tag-remove"
                     :aria-label="`Remove tag ${tag}`"
@@ -48,8 +54,9 @@
                 class="pui-tags-input__entry"
                 type="text"
                 :name="name"
-                :placeholder="placeholder"
-                :disabled="disabled || maxReached"
+                :placeholder="readonly ? undefined : placeholder"
+                :disabled="disabled || (!readonly && maxReached)"
+                :readonly="readonly"
                 :aria-required="required ? 'true' : undefined"
                 :aria-invalid="hasErrors ? 'true' : undefined"
                 :aria-describedby="describedBy"
@@ -87,6 +94,8 @@ const props = withDefaults(
         /** Marks the field; set as `aria-required` on the entry input since the value is the tag list, not the typed text. */
         required?: boolean;
         disabled?: boolean;
+        /** Read-only: tags show without remove buttons and the entry is a focusable native `readonly` input. */
+        readonly?: boolean;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
@@ -100,6 +109,8 @@ const props = withDefaults(
          * `[',', 'Enter']`.
          */
         separators?: string[];
+        /** `inline` puts the label beside the control; hint and errors wrap below. */
+        layout?: 'stacked' | 'inline';
     }>(),
     {
         id: undefined,
@@ -107,11 +118,13 @@ const props = withDefaults(
         placeholder: undefined,
         required: false,
         disabled: false,
+        readonly: false,
         hint: undefined,
         errors: () => [],
         status: undefined,
         maxTags: undefined,
         separators: () => [',', 'Enter'],
+        layout: 'stacked',
     },
 );
 
@@ -156,7 +169,7 @@ function isSeparator(event: KeyboardEvent): boolean {
 
 function addTag(raw: string): boolean {
     const value = raw.trim();
-    if (!value) return false;
+    if (!value || props.readonly) return false;
     if (maxReached.value) return false;
     if (props.modelValue.includes(value)) return false;
     emit('update:modelValue', [...props.modelValue, value]);
@@ -164,7 +177,7 @@ function addTag(raw: string): boolean {
 }
 
 function removeTag(index: number): void {
-    if (props.disabled) return;
+    if (props.disabled || props.readonly) return;
     if (index < 0 || index >= props.modelValue.length) return;
     const tag = props.modelValue[index];
     const next = props.modelValue.filter((_, i) => i !== index);
@@ -175,7 +188,7 @@ function removeTag(index: number): void {
 }
 
 function onKeydown(event: KeyboardEvent): void {
-    if (props.disabled) return;
+    if (props.disabled || props.readonly) return;
     if (isSeparator(event)) {
         if (entryText.value.trim().length > 0) {
             event.preventDefault();

package/components/form/tags-input/tags-input.css

@@ -47,6 +47,11 @@
         cursor: not-allowed;
     }
 
+    .pui-field[data-readonly='true'] .pui-tags-input {
+        background: var(--bg-clr-surface-2);
+        cursor: default;
+    }
+
     /* Status states inherited from .pui-field — recolour to match
    * .pui-input / .pui-textarea when the parent carries `data-status`. */
     .pui-field[data-status='error'] .pui-tags-input {

package/components/form/text-input/TextInput.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        :data-layout="layout === 'inline' ? 'inline' : undefined"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <label class="pui-field__label" :for="inputId"
             >{{ label
             }}<span
@@ -19,7 +24,8 @@
             :autocomplete="autocomplete"
             :required="required"
             :disabled="disabled"
-            :placeholder="placeholder"
+            :readonly="readonly"
+            :placeholder="readonly ? undefined : placeholder"
             :aria-invalid="hasErrors ? 'true' : undefined"
             :aria-describedby="describedBy"
             @input="
@@ -58,10 +64,14 @@ const props = withDefaults(
         autocomplete?: string;
         required?: boolean;
         disabled?: boolean;
+        /** Read-only: the value shows in the field chrome, stays focusable and cannot be edited. */
+        readonly?: boolean;
         placeholder?: string;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
+        /** `inline` puts the label beside the control; hint and errors wrap below. */
+        layout?: 'stacked' | 'inline';
     }>(),
     {
         id: undefined,
@@ -70,10 +80,12 @@ const props = withDefaults(
         autocomplete: undefined,
         required: false,
         disabled: false,
+        readonly: false,
         placeholder: undefined,
         hint: undefined,
         errors: () => [],
         status: undefined,
+        layout: 'stacked',
     },
 );
 

package/components/form/textarea/Textarea.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        :data-layout="layout === 'inline' ? 'inline' : undefined"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <label class="pui-field__label" :for="inputId"
             >{{ label
             }}<span
@@ -18,7 +23,8 @@
             :autocomplete="autocomplete"
             :required="required"
             :disabled="disabled"
-            :placeholder="placeholder"
+            :readonly="readonly"
+            :placeholder="readonly ? undefined : placeholder"
             :style="autoResize ? 'field-sizing: content' : undefined"
             :aria-invalid="hasErrors ? 'true' : undefined"
             :aria-describedby="describedBy"
@@ -59,11 +65,15 @@ const props = withDefaults(
         autocomplete?: string;
         required?: boolean;
         disabled?: boolean;
+        /** Read-only: the value shows in the field chrome, stays focusable and cannot be edited. */
+        readonly?: boolean;
         placeholder?: string;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
         autoResize?: boolean;
+        /** `inline` puts the label beside the control; hint and errors wrap below. */
+        layout?: 'stacked' | 'inline';
     }>(),
     {
         id: undefined,
@@ -72,11 +82,13 @@ const props = withDefaults(
         autocomplete: undefined,
         required: false,
         disabled: false,
+        readonly: false,
         placeholder: undefined,
         hint: undefined,
         errors: () => [],
         status: undefined,
         autoResize: false,
+        layout: 'stacked',
     },
 );
 

package/components/form/textarea/textarea.css

@@ -6,4 +6,11 @@
     .pui-textarea[style*='field-sizing'] {
         resize: none;
     }
+
+    /* Read-only: `rows` becomes a minimum and the box grows, so a long value
+     * is read in place rather than scrolled inside a box nobody can type in. */
+    .pui-field[data-readonly='true'] .pui-textarea {
+        field-sizing: content;
+        resize: none;
+    }
 }

package/components/layout/index/Index.vue

@@ -140,6 +140,7 @@
                     <Select
                         :label="pageSizeLabel"
                         :aria-label="pageSizeLabel"
+                        layout="inline"
                         :model-value="String(query.page_size)"
                         :options="pageSizeOptions"
                         @update:model-value="

package/components/layout/index/index.css

@@ -47,14 +47,15 @@
         --pui-table-cell-padding-block: var(--space-2xs);
     }
 
-    .pui-index__page-size > .pui-field {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
+    /* Two-line primary cell: title (usually a link) over a muted subline. */
+    .pui-index__primary {
+        display: grid;
+        gap: var(--space-3xs);
+    }
 
-        & > .pui-field__label {
-            white-space: nowrap;
-        }
+    .pui-index__subline {
+        color: var(--text-clr-muted);
+        font-size: var(--step--2);
     }
 
     .pui-index__pagination {

package/components/layout/record-layout/Panel.vue

@@ -0,0 +1,44 @@
+<template>
+    <section class="pui-panel">
+        <header v-if="title || description" class="pui-panel__header">
+            <component
+                :is="`h${level}`"
+                v-if="title"
+                :id="titleId"
+                class="pui-panel__title"
+                >{{ title }}</component
+            >
+            <p v-if="description" class="pui-panel__description">
+                {{ description }}
+            </p>
+        </header>
+        <slot />
+    </section>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        title?: string;
+        description?: string;
+        /** Heading level of the title: `2` under a page heading, `3` under another section. */
+        level?: 2 | 3;
+        /** `id` for the title element, so the panel or a landmark can reference it through `aria-labelledby`. */
+        titleId?: string;
+    }>(),
+    {
+        title: undefined,
+        description: undefined,
+        level: 2,
+        titleId: undefined,
+    },
+);
+
+defineSlots<{
+    default?: () => unknown;
+}>();
+</script>
+
+<style>
+@import './record-layout.css';
+</style>

package/components/layout/record-layout/RecordLayout.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="pui-record-layout">
+        <aside
+            v-if="$slots.sidebar"
+            class="pui-record-layout__sidebar"
+            :aria-labelledby="sidebarLabelledby"
+        >
+            <slot name="sidebar" />
+        </aside>
+        <div class="pui-record-layout__main">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        /** `id` of the sidebar's heading; names the `<aside>` landmark through `aria-labelledby`. */
+        sidebarLabelledby?: string;
+    }>(),
+    {
+        sidebarLabelledby: undefined,
+    },
+);
+
+defineSlots<{
+    sidebar?: () => unknown;
+    default?: () => unknown;
+}>();
+</script>
+
+<style>
+@import './record-layout.css';
+</style>

package/components/layout/record-layout/record-layout.css

@@ -0,0 +1,94 @@
+@layer components {
+    .pui-record-layout {
+        display: grid;
+        grid-template-columns:
+            minmax(0, var(--space-sidebar-width))
+            minmax(0, 1fr);
+        gap: var(--space-m);
+        align-items: start;
+        min-inline-size: 0;
+
+        @media (max-width: 56em) {
+            grid-template-columns: minmax(0, 1fr);
+        }
+    }
+
+    .pui-record-layout__sidebar {
+        min-inline-size: 0;
+
+        & .pui-panel {
+            --pui-record-fields-columns: minmax(0, 1fr);
+        }
+
+        /* Same layer as record-details.css, so this has to outrank its field rule. */
+        & .pui-record-details .pui-record-details__field {
+            grid-template-columns: minmax(0, 1fr);
+            gap: var(--space-3xs);
+        }
+
+        @media (min-width: 24em) and (max-width: 56em) {
+            & .pui-panel {
+                --pui-record-fields-columns: repeat(2, minmax(0, 1fr));
+            }
+        }
+    }
+
+    .pui-record-layout__main {
+        display: grid;
+        gap: var(--space-s);
+        min-inline-size: 0;
+    }
+
+    .pui-panel {
+        --pui-record-fields-columns: minmax(0, 1fr);
+
+        display: grid;
+        gap: var(--space-s);
+        min-inline-size: 0;
+        padding: var(--space-m);
+        border: var(--stroke-sm) solid var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+        background: var(--bg-clr-surface);
+
+        &[hidden] {
+            display: none;
+        }
+
+        & .pui-field:has(textarea) {
+            grid-column: 1 / -1;
+        }
+
+        /* An editable block list draws its own boxes and needs the width for
+         * its controls; a read-only one is content and keeps the panel. */
+        &:has(> .pui-block-editor:not([data-readonly='true'])) {
+            padding: var(--space-2xs) 0 0;
+            border: 0;
+            background: transparent;
+        }
+
+        @media (min-width: 48em) {
+            --pui-record-fields-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        @media (max-width: 56em) {
+            padding: var(--space-s);
+        }
+    }
+
+    .pui-panel__header {
+        display: grid;
+        gap: var(--space-3xs);
+    }
+
+    .pui-panel__title {
+        margin: 0;
+        font-size: var(--step-0);
+        font-weight: var(--fw-semibold);
+    }
+
+    .pui-panel__description {
+        margin: 0;
+        font-size: var(--step--1);
+        color: var(--text-clr-muted);
+    }
+}

package/components/navigation/tabs/tabs.css

@@ -1,7 +1,9 @@
 @layer components {
     .pui-tabs {
         display: flex;
+        flex-wrap: wrap;
         gap: var(--space-s);
+        min-inline-size: 0;
         border-block-end: var(--stroke-sm) solid var(--border-clr-subtle);
     }
     .pui-tabs__item {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.10.0",
+  "version": "0.13.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",
@@ -64,6 +64,8 @@
     "./components/Collapsible.vue": "./components/layout/collapsible/Collapsible.vue",
     "./components/AppLayout.vue": "./components/layout/app-layout/AppLayout.vue",
     "./components/PageHeader.vue": "./components/layout/page-header/PageHeader.vue",
+    "./components/Panel.vue": "./components/layout/record-layout/Panel.vue",
+    "./components/RecordLayout.vue": "./components/layout/record-layout/RecordLayout.vue",
     "./components/Separator.vue": "./components/layout/separator/Separator.vue",
     "./components/Table.vue": "./components/layout/table/Table.vue",
     "./components/TableRow.vue": "./components/layout/table/TableRow.vue",

package/styles/2-base/base.css

@@ -33,10 +33,15 @@
 
     a {
         color: var(--text-clr-brand);
-        text-underline-offset: 0.14em;
+        text-underline-offset: var(--space-3xs);
     }
 
     a:hover {
         color: var(--text-clr-brand-hover);
     }
+
+    a:focus-visible {
+        outline: var(--outline-width) solid var(--outline-clr-base);
+        outline-offset: var(--outline-offset);
+    }
 }

package/styles/4-components/form-field.css

@@ -27,19 +27,15 @@
         float: none;
     }
 
-    /* `data-layout="inline"`: control first in DOM order, label beside it,
-     * hint and errors below spanning both columns. */
+    /* `data-layout="inline"`: label and control share a row in DOM order
+     * (control first for Checkbox/Switch, label first elsewhere); hint and
+     * errors drop below spanning both columns. */
     .pui-field[data-layout='inline'] {
         grid-template-columns: max-content 1fr;
         column-gap: var(--space-xs);
         align-items: center;
     }
 
-    .pui-field[data-layout='inline'] .pui-field__label {
-        cursor: pointer;
-        user-select: none;
-    }
-
     .pui-field[data-layout='inline'] .pui-field__hint {
         grid-column: 1 / -1;
     }
@@ -100,6 +96,13 @@
         cursor: not-allowed;
     }
 
+    /* `data-readonly="true"`: same border, text and focus ring as the
+     * default state on a muted surface; the control stays in the tab order. */
+    .pui-field[data-readonly='true'] .pui-input,
+    .pui-field[data-readonly='true'] .pui-textarea {
+        background: var(--bg-clr-surface-2);
+    }
+
     .pui-field[data-status='error'] .pui-input,
     .pui-field[data-status='error'] .pui-textarea {
         border-color: var(--border-clr-danger);