@pienter/ui 0.11.0 → 0.13.0

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.11.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/4-components/form-field.css

@@ -96,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);