@peektravel/app-utilities 0.1.2 → 0.1.5

package/dist/ui/odyssey.css

@@ -178,6 +178,7 @@ ody-alert, ody-card, ody-divider, ody-loading-bar { display: block; }
 .ody-card__container { min-height: 2rem; color: var(--color-neutral-300); }
 .ody-card__container__bar { background-color: var(--color-neutral-200); width: 4px; border-radius: 16px 0 0 16px; height: auto; }
 .ody-card__container__content { padding: 10px 12px; border-radius: 0 4px 4px 0; border: 1px solid var(--color-neutral-100); border-left: none; width: 100%; }
+.ody-card--no-bar .ody-card__container__content { border-radius: 4px; border-left: 1px solid var(--color-neutral-100); }
 .ody-card--clickable { cursor: pointer; }
 
 /* ---- divider ------------------------------------------------------------- */
@@ -222,6 +223,7 @@ ody-alert, ody-card, ody-divider, ody-loading-bar { display: block; }
   ody-list-item, ody-product-indicator, ody-toggle-button, ody-section-columns,
   ody-section-column-item, ody-section-rows, ody-section-row-item, ody-two-column,
   ody-two-column-main, ody-two-column-secondary, ody-two-column-secondary-header,
+  ody-page-container,
   ody-collapsible-section, ody-collapsible-collapsed, ody-collapsible-content,
   ody-input, ody-inline-input, ody-search-input, ody-money-input, ody-percentage-input,
   ody-checkbox, ody-radio-button-group, ody-checkbox-group, ody-accordion, ody-collapsible,
@@ -379,6 +381,10 @@ ody-percentage-input, ody-checkbox, ody-radio-button-group, ody-checkbox-group {
 .ody-two-column .ody-two-column__secondary .ody-two-column__secondary__close-button { background: none; border: none; cursor: pointer; color: var(--color-neutral-300); }
 .ody-two-column .ody-two-column__secondary .ody-two-column__secondary__close-button .icon { width: 20px; height: 20px; }
 
+/* ===== page-container ===== */
+ody-page-container { display: block; width: 100%; }
+.ody-page-container { width: 100%; max-width: 1310px; margin: 0 auto; container-type: inline-size; container-name: ody-page; }
+
 /* ===== collapsible-section ===== */
 .ody-collapsible-section .ody-collapsible-container .ody-collapsible { margin: 0; }
 .ody-collapsible-section .ody-collapsible__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }

package/docs/ui.md

@@ -161,6 +161,7 @@ function Guests({ columns, rows, onSort }) {
 | Empty / error / no-results view | `ody-empty-state` |
 | KPI figures | `ody-stat-summary` + `ody-stat` |
 | Expand/collapse | `ody-accordion`, `ody-collapsible`, `ody-collapsible-section` |
+| Full-page wrapper for an **app settings UI** | `ody-page-container` (required — see below) |
 | Master/detail page layout | `ody-two-column` |
 | Row/column section layout | `ody-section-rows` / `ody-section-columns` |
 | Progress | `ody-loading-bar`, `ody-loading-spinner` |
@@ -232,13 +233,22 @@ be set on the element object; **Events** bubble and are read via `event.detail`;
 ```
 
 #### `<ody-card>`
-**Use when** grouping content in a bordered container with a left accent bar.
+**Use when** grouping content in a bordered container. Reach for the plain
+`no-bar` card by default; add a left accent bar only when the bar's colour
+carries meaning (e.g. status).
 **Attributes**
-- `bar-color` — CSS colour for the accent bar (default neutral-200).
+- `no-bar` — boolean; omits the accent bar, rendering a plain bordered
+  container. **This is the default card to use.**
+- `bar-color` — CSS colour for the accent bar (default neutral-200). Ignored
+  when `no-bar` is set.
 - `clickable` — boolean; adds pointer affordance (handle `click` yourself).
 **Slots / content** — child nodes are the card content.
 **Example**
 ```html
+<!-- Default: plain bordered card -->
+<ody-card no-bar><p>Card body</p></ody-card>
+
+<!-- Accent bar when the colour is meaningful -->
 <ody-card bar-color="var(--color-interaction-300)"><p>Card body</p></ody-card>
 ```
 
@@ -440,6 +450,47 @@ Extra content (e.g. a tag) is the child content.
 </ody-two-column>
 ```
 
+#### `<ody-page-container>`
+> [!IMPORTANT]
+> **Every app settings UI must wrap its content in `<ody-page-container>`.** It is
+> the standard responsive page wrapper that keeps the settings page sized to the
+> two widths the settings host iframe renders at — **868px** (narrow) and
+> **1310px** (wide).
+>
+> **Design for 868px first — it is the default.** Optimise every settings layout
+> for the narrow 868px width, then make sure it *also* renders correctly when the
+> host expands it to 1310px (e.g. progressively widen or add columns; never
+> assume the extra width is present). Do **not** design 1310px-first and let it
+> degrade — 868px is the baseline that must always look right.
+
+**Use when** building the top-level layout of an app settings page (or any
+full-page UI embedded in the settings host).
+The container is `width: 100%`, so it fills whichever of the two widths the
+parent iframe gives it; a `max-width` of `1310px` caps and centres it if it is
+ever embedded somewhere wider. Content is **full-bleed** (edge-to-edge, no side
+gutters). It also establishes a CSS **container context** named `ody-page`, so
+the content inside can adapt between the two widths with container queries
+instead of viewport media queries — treat 868px as the base styles and use a
+container query to *enhance* for the wider view.
+**Attributes** — none; the width is driven entirely by the parent.
+**Slots / content** — child nodes are the page content.
+**Example**
+```html
+<ody-page-container>
+  <ody-section-rows gap-size="24">
+    …settings UI…
+  </ody-section-rows>
+</ody-page-container>
+```
+```css
+/* Base styles target the default 868px width… */
+.my-settings-grid { grid-template-columns: 1fr; }
+/* …then progressively enhance for the expanded 1310px view. */
+@container ody-page (min-width: 1310px) {
+  .my-settings-grid { grid-template-columns: 1fr 1fr; }
+}
+```
+
 #### `<ody-collapsible-section>` + `<ody-collapsible-collapsed>` + `<ody-collapsible-content>`
 **Use when** a titled section that expands/collapses on header click.
 - `ody-collapsible-section` **Attributes**: `header-text`, `secondary-header-text`, `icon` (icon name), `expanded` (boolean; reflected). **Events**: `expanded` → `{ expanded }`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peektravel/app-utilities",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "GraphQL JS mapping utilities extracted from the Peek Pro Autopilot connector.",
   "license": "MIT",
   "repository": {