@peektravel/app-utilities 0.1.2 → 0.1.5

package/dist/ui/index.d.cts

@@ -173,6 +173,8 @@ declare class OdyAlert extends OdyElement {
  * Attributes:
  * - `bar-color` — CSS colour for the accent bar (default neutral-200).
  * - `clickable` — adds pointer affordance (emit your own click handling).
+ * - `no-bar` — omits the accent bar entirely, rendering a plain bordered
+ *   container (the default generic card).
  */
 declare class OdyCard extends OdyElement {
     static observedAttributes: string[];
@@ -550,6 +552,48 @@ declare class OdyTwoColumnSecondaryHeader extends OdyElement {
     protected render(): void;
 }
 
+/**
+ * `<ody-page-container>` — the standard responsive page wrapper. **Every app
+ * settings UI must wrap its content in this element** so the page matches the
+ * two canonical iframe widths the settings host 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 ensure it *also* renders correctly
+ * when the host expands it to 1310px. Treat 868px as the baseline that must
+ * always look right and progressively enhance for the wider view; never design
+ * 1310px-first and let it degrade, and never assume the extra width is present.
+ *
+ * The container is `width: 100%`, so it simply fills whichever of those two
+ * widths the parent iframe gives it; a `max-width` of 1310px caps it (and
+ * centres it) if it is ever embedded somewhere wider. Content is **full-bleed**
+ * — it spans the container edge-to-edge with no side gutters.
+ *
+ * It also establishes a CSS **container context** named `ody-page`, so the
+ * settings content inside can adapt between the two widths with container
+ * queries instead of viewport media queries — base styles target 868px, then
+ * enhance for 1310px:
+ *
+ * ```css
+ * .my-settings-grid { grid-template-columns: 1fr; }            // default 868px
+ * @container ody-page (min-width: 1310px) {                    // expanded view
+ *   .my-settings-grid { grid-template-columns: 1fr 1fr; }
+ * }
+ * ```
+ *
+ * No attributes — the width is driven entirely by the parent.
+ *
+ * Example:
+ * ```html
+ * <ody-page-container>
+ *   …settings UI…
+ * </ody-page-container>
+ * ```
+ */
+declare class OdyPageContainer extends OdyElement {
+    protected render(): void;
+}
+
 /**
  * `<ody-collapsible-section>` — a titled section that expands/collapses on
  * header click. Place the expandable body in an `<ody-collapsible-content>`
@@ -1476,4 +1520,4 @@ declare function removePortal(node: Node): void;
  */
 declare function position(anchor: Element, floating: Element, placement?: OdyPlacement, gap?: number): OdyPosition;
 
-export { OdyAccordion, OdyAlert, type OdyAlertVariant, OdyBrandIcon, type OdyBrandIconSize, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, type OdyButtonAppearance, type OdyButtonSize, type OdyButtonVariant, OdyCard, OdyCheckInStatus, type OdyCheckInStatusValue, OdyCheckbox, OdyCheckboxGroup, type OdyCheckboxGroupSize, type OdyCheckboxOption, type OdyCheckboxSize, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, type OdyDateDisallowed, OdyDatePicker, type OdyDatePreset, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, type OdyEmptyStateVariant, OdyIcon, type OdyIconData, type OdyIconSize, OdyInlineInput, type OdyInlineInputSize, OdyInlineList, OdyInlineListItem, type OdyInlineListSeparator, OdyInput, type OdyInputSize, type OdyInputState, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, type OdyModalSize, OdyMoneyInput, type OdyMoneyInputSize, OdyOption, OdyPanel, OdyPercentageInput, type OdyPercentageInputSize, type OdyPlacement, OdyPopover, type OdyPosition, OdyProductIndicator, type OdyProductIndicatorSize, OdyRadioButtonGroup, type OdyRadioButtonGroupSize, type OdyRadioOption, OdySearchInput, type OdySearchInputSize, OdySectionColumnItem, OdySectionColumns, type OdySectionGap, OdySectionRowItem, OdySectionRows, type OdySectionVerticalAlign, OdySelectBase, type OdySelectOption, type OdySortDirection$1 as OdySortDirection, type OdySpinnerSize, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, type OdyStatTone, OdyStatusDot, type OdyStatusDotColor, type OdyTabDef, OdyTable, type OdyTableAlign, type OdyTableColumn, OdyTableHeader, type OdyTableRow, type OdyTableRowClickDetail, type OdyTableSelectionChangeDetail, type OdyTableSortChangeDetail, type OdySortDirection as OdyTableSortDirection, OdyTabs, type OdyTabsPosition, type OdyTabsSize, OdyTag, type OdyTagColor, type OdyTagSize, type OdyTagVariant, type OdyTermKey, type OdyTerms, OdyToastHost, type OdyToastOptions, type OdyToastVariant, OdyToggleButton, type OdyToggleButtonSize, type OdyToggleOption, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };
+export { OdyAccordion, OdyAlert, type OdyAlertVariant, OdyBrandIcon, type OdyBrandIconSize, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, type OdyButtonAppearance, type OdyButtonSize, type OdyButtonVariant, OdyCard, OdyCheckInStatus, type OdyCheckInStatusValue, OdyCheckbox, OdyCheckboxGroup, type OdyCheckboxGroupSize, type OdyCheckboxOption, type OdyCheckboxSize, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, type OdyDateDisallowed, OdyDatePicker, type OdyDatePreset, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, type OdyEmptyStateVariant, OdyIcon, type OdyIconData, type OdyIconSize, OdyInlineInput, type OdyInlineInputSize, OdyInlineList, OdyInlineListItem, type OdyInlineListSeparator, OdyInput, type OdyInputSize, type OdyInputState, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, type OdyModalSize, OdyMoneyInput, type OdyMoneyInputSize, OdyOption, OdyPageContainer, OdyPanel, OdyPercentageInput, type OdyPercentageInputSize, type OdyPlacement, OdyPopover, type OdyPosition, OdyProductIndicator, type OdyProductIndicatorSize, OdyRadioButtonGroup, type OdyRadioButtonGroupSize, type OdyRadioOption, OdySearchInput, type OdySearchInputSize, OdySectionColumnItem, OdySectionColumns, type OdySectionGap, OdySectionRowItem, OdySectionRows, type OdySectionVerticalAlign, OdySelectBase, type OdySelectOption, type OdySortDirection$1 as OdySortDirection, type OdySpinnerSize, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, type OdyStatTone, OdyStatusDot, type OdyStatusDotColor, type OdyTabDef, OdyTable, type OdyTableAlign, type OdyTableColumn, OdyTableHeader, type OdyTableRow, type OdyTableRowClickDetail, type OdyTableSelectionChangeDetail, type OdyTableSortChangeDetail, type OdySortDirection as OdyTableSortDirection, OdyTabs, type OdyTabsPosition, type OdyTabsSize, OdyTag, type OdyTagColor, type OdyTagSize, type OdyTagVariant, type OdyTermKey, type OdyTerms, OdyToastHost, type OdyToastOptions, type OdyToastVariant, OdyToggleButton, type OdyToggleButtonSize, type OdyToggleOption, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };

package/dist/ui/index.d.ts

@@ -173,6 +173,8 @@ declare class OdyAlert extends OdyElement {
  * Attributes:
  * - `bar-color` — CSS colour for the accent bar (default neutral-200).
  * - `clickable` — adds pointer affordance (emit your own click handling).
+ * - `no-bar` — omits the accent bar entirely, rendering a plain bordered
+ *   container (the default generic card).
  */
 declare class OdyCard extends OdyElement {
     static observedAttributes: string[];
@@ -550,6 +552,48 @@ declare class OdyTwoColumnSecondaryHeader extends OdyElement {
     protected render(): void;
 }
 
+/**
+ * `<ody-page-container>` — the standard responsive page wrapper. **Every app
+ * settings UI must wrap its content in this element** so the page matches the
+ * two canonical iframe widths the settings host 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 ensure it *also* renders correctly
+ * when the host expands it to 1310px. Treat 868px as the baseline that must
+ * always look right and progressively enhance for the wider view; never design
+ * 1310px-first and let it degrade, and never assume the extra width is present.
+ *
+ * The container is `width: 100%`, so it simply fills whichever of those two
+ * widths the parent iframe gives it; a `max-width` of 1310px caps it (and
+ * centres it) if it is ever embedded somewhere wider. Content is **full-bleed**
+ * — it spans the container edge-to-edge with no side gutters.
+ *
+ * It also establishes a CSS **container context** named `ody-page`, so the
+ * settings content inside can adapt between the two widths with container
+ * queries instead of viewport media queries — base styles target 868px, then
+ * enhance for 1310px:
+ *
+ * ```css
+ * .my-settings-grid { grid-template-columns: 1fr; }            // default 868px
+ * @container ody-page (min-width: 1310px) {                    // expanded view
+ *   .my-settings-grid { grid-template-columns: 1fr 1fr; }
+ * }
+ * ```
+ *
+ * No attributes — the width is driven entirely by the parent.
+ *
+ * Example:
+ * ```html
+ * <ody-page-container>
+ *   …settings UI…
+ * </ody-page-container>
+ * ```
+ */
+declare class OdyPageContainer extends OdyElement {
+    protected render(): void;
+}
+
 /**
  * `<ody-collapsible-section>` — a titled section that expands/collapses on
  * header click. Place the expandable body in an `<ody-collapsible-content>`
@@ -1476,4 +1520,4 @@ declare function removePortal(node: Node): void;
  */
 declare function position(anchor: Element, floating: Element, placement?: OdyPlacement, gap?: number): OdyPosition;
 
-export { OdyAccordion, OdyAlert, type OdyAlertVariant, OdyBrandIcon, type OdyBrandIconSize, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, type OdyButtonAppearance, type OdyButtonSize, type OdyButtonVariant, OdyCard, OdyCheckInStatus, type OdyCheckInStatusValue, OdyCheckbox, OdyCheckboxGroup, type OdyCheckboxGroupSize, type OdyCheckboxOption, type OdyCheckboxSize, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, type OdyDateDisallowed, OdyDatePicker, type OdyDatePreset, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, type OdyEmptyStateVariant, OdyIcon, type OdyIconData, type OdyIconSize, OdyInlineInput, type OdyInlineInputSize, OdyInlineList, OdyInlineListItem, type OdyInlineListSeparator, OdyInput, type OdyInputSize, type OdyInputState, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, type OdyModalSize, OdyMoneyInput, type OdyMoneyInputSize, OdyOption, OdyPanel, OdyPercentageInput, type OdyPercentageInputSize, type OdyPlacement, OdyPopover, type OdyPosition, OdyProductIndicator, type OdyProductIndicatorSize, OdyRadioButtonGroup, type OdyRadioButtonGroupSize, type OdyRadioOption, OdySearchInput, type OdySearchInputSize, OdySectionColumnItem, OdySectionColumns, type OdySectionGap, OdySectionRowItem, OdySectionRows, type OdySectionVerticalAlign, OdySelectBase, type OdySelectOption, type OdySortDirection$1 as OdySortDirection, type OdySpinnerSize, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, type OdyStatTone, OdyStatusDot, type OdyStatusDotColor, type OdyTabDef, OdyTable, type OdyTableAlign, type OdyTableColumn, OdyTableHeader, type OdyTableRow, type OdyTableRowClickDetail, type OdyTableSelectionChangeDetail, type OdyTableSortChangeDetail, type OdySortDirection as OdyTableSortDirection, OdyTabs, type OdyTabsPosition, type OdyTabsSize, OdyTag, type OdyTagColor, type OdyTagSize, type OdyTagVariant, type OdyTermKey, type OdyTerms, OdyToastHost, type OdyToastOptions, type OdyToastVariant, OdyToggleButton, type OdyToggleButtonSize, type OdyToggleOption, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };
+export { OdyAccordion, OdyAlert, type OdyAlertVariant, OdyBrandIcon, type OdyBrandIconSize, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, type OdyButtonAppearance, type OdyButtonSize, type OdyButtonVariant, OdyCard, OdyCheckInStatus, type OdyCheckInStatusValue, OdyCheckbox, OdyCheckboxGroup, type OdyCheckboxGroupSize, type OdyCheckboxOption, type OdyCheckboxSize, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, type OdyDateDisallowed, OdyDatePicker, type OdyDatePreset, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, type OdyEmptyStateVariant, OdyIcon, type OdyIconData, type OdyIconSize, OdyInlineInput, type OdyInlineInputSize, OdyInlineList, OdyInlineListItem, type OdyInlineListSeparator, OdyInput, type OdyInputSize, type OdyInputState, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, type OdyModalSize, OdyMoneyInput, type OdyMoneyInputSize, OdyOption, OdyPageContainer, OdyPanel, OdyPercentageInput, type OdyPercentageInputSize, type OdyPlacement, OdyPopover, type OdyPosition, OdyProductIndicator, type OdyProductIndicatorSize, OdyRadioButtonGroup, type OdyRadioButtonGroupSize, type OdyRadioOption, OdySearchInput, type OdySearchInputSize, OdySectionColumnItem, OdySectionColumns, type OdySectionGap, OdySectionRowItem, OdySectionRows, type OdySectionVerticalAlign, OdySelectBase, type OdySelectOption, type OdySortDirection$1 as OdySortDirection, type OdySpinnerSize, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, type OdyStatTone, OdyStatusDot, type OdyStatusDotColor, type OdyTabDef, OdyTable, type OdyTableAlign, type OdyTableColumn, OdyTableHeader, type OdyTableRow, type OdyTableRowClickDetail, type OdyTableSelectionChangeDetail, type OdyTableSortChangeDetail, type OdySortDirection as OdyTableSortDirection, OdyTabs, type OdyTabsPosition, type OdyTabsSize, OdyTag, type OdyTagColor, type OdyTagSize, type OdyTagVariant, type OdyTermKey, type OdyTerms, OdyToastHost, type OdyToastOptions, type OdyToastVariant, OdyToggleButton, type OdyToggleButtonSize, type OdyToggleOption, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };

package/dist/ui/index.js

@@ -809,13 +809,19 @@ define("ody-alert", OdyAlert);
 
 // src/ui/components/card.ts
 var OdyCard = class extends OdyElement {
-  static observedAttributes = ["bar-color", "clickable"];
+  static observedAttributes = ["bar-color", "clickable", "no-bar"];
   render() {
+    const noBar = this.flag("no-bar");
     const barColor = this.attr("bar-color");
     const barStyle = barColor ? ` style="background-color:${this.esc(barColor)}"` : "";
-    const cls = classes("ody-card__container", this.flag("clickable") && "ody-card--clickable");
+    const cls = classes(
+      "ody-card__container",
+      this.flag("clickable") && "ody-card--clickable",
+      noBar && "ody-card--no-bar"
+    );
+    const bar = noBar ? "" : `<div class="ody-card__container__bar"${barStyle}></div>`;
     this.mount(
-      `<div class="${cls}" style="display:flex"><div class="ody-card__container__bar"${barStyle}></div><div class="ody-card__container__content" data-ody-slot></div></div>`
+      `<div class="${cls}" style="display:flex">` + bar + `<div class="ody-card__container__content" data-ody-slot></div></div>`
     );
   }
 };
@@ -1258,6 +1264,14 @@ define("ody-two-column-main", OdyTwoColumnMain);
 define("ody-two-column-secondary", OdyTwoColumnSecondary);
 define("ody-two-column-secondary-header", OdyTwoColumnSecondaryHeader);
 
+// src/ui/components/page-container.ts
+var OdyPageContainer = class extends OdyElement {
+  render() {
+    this.mount(`<div class="ody-page-container" data-ody-slot></div>`);
+  }
+};
+define("ody-page-container", OdyPageContainer);
+
 // src/ui/components/collapsible-section.ts
 var OdyCollapsibleSection = class extends OdyElement {
   static observedAttributes = ["header-text", "secondary-header-text", "icon", "expanded"];
@@ -3842,6 +3856,6 @@ var OdyBrandIcon = class extends OdyElement {
 };
 define("ody-brand-icon", OdyBrandIcon);
 
-export { OdyAccordion, OdyAlert, OdyBrandIcon, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, OdyCard, OdyCheckInStatus, OdyCheckbox, OdyCheckboxGroup, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, OdyDatePicker, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, OdyIcon, OdyInlineInput, OdyInlineList, OdyInlineListItem, OdyInput, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, OdyMoneyInput, OdyOption, OdyPanel, OdyPercentageInput, OdyPopover, OdyProductIndicator, OdyRadioButtonGroup, OdySearchInput, OdySectionColumnItem, OdySectionColumns, OdySectionRowItem, OdySectionRows, OdySelectBase, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, OdyStatusDot, OdyTable, OdyTableHeader, OdyTabs, OdyTag, OdyToastHost, OdyToggleButton, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions3 as parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };
+export { OdyAccordion, OdyAlert, OdyBrandIcon, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, OdyCard, OdyCheckInStatus, OdyCheckbox, OdyCheckboxGroup, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, OdyDatePicker, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, OdyIcon, OdyInlineInput, OdyInlineList, OdyInlineListItem, OdyInput, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, OdyMoneyInput, OdyOption, OdyPageContainer, OdyPanel, OdyPercentageInput, OdyPopover, OdyProductIndicator, OdyRadioButtonGroup, OdySearchInput, OdySectionColumnItem, OdySectionColumns, OdySectionRowItem, OdySectionRows, OdySelectBase, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, OdyStatusDot, OdyTable, OdyTableHeader, OdyTabs, OdyTag, OdyToastHost, OdyToggleButton, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions3 as parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map