@ziyarago/ui 0.8.0 → 0.9.0

package/src/react/index.js

@@ -205,6 +205,13 @@ export const UiPageBilling = C.PageBilling;
 export const UiPageTeam = C.PageTeam;
 export const UiPageIntegrations = C.PageIntegrations;
 export const UiPageSearch = C.PageSearch;
+export const UiPageArticle = C.PageArticle;
+export const UiPageChangelog = C.PageChangelog;
+export const UiPageHelp = C.PageHelp;
+export const UiPageStates = C.PageStates;
+export const UiPageLegal = C.PageLegal;
+export const UiPageLocations = C.PageLocations;
+export const UiPageBookingFlow = C.PageBookingFlow;
 export const UiPageNotifications = C.PageNotifications;
 export const UiPageInbox = C.PageInbox;
 export const UiPageCheckout = C.PageCheckout;

package/src/styles/components8.css

@@ -91,3 +91,6 @@
 .zg-ash__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 24%,color-mix(in oklch,#fff 55%,transparent) 0,transparent 30%),radial-gradient(circle at 18% 78%,color-mix(in oklch,var(--ash-acc) 70%,transparent) 0,transparent 38%),conic-gradient(from 210deg at 62% 48%,transparent 0 .08turn,color-mix(in oklch,#fff 22%,transparent) .1turn .18turn,transparent .2turn 1turn)}
 .zg-ash__media[style*="url("]::after{display:none}
 .zg-ash--light .zg-ash__media{--ash-acc:oklch(.72 .08 80)}
+
+/* page templates: sticky region */
+.zg-pg__two--sticky{align-items:stretch}.zg-pg__stick{position:sticky;inset-block-start:16px;align-self:flex-start;width:100%}

package/src/vue/index.js

@@ -29,7 +29,7 @@ const wrap = (name, def) => defineComponent({
 });
 for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
 
-export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAnalytics: UiPageAnalytics, PageCalendar: UiPageCalendar, PageKanban: UiPageKanban, PageBilling: UiPageBilling, PageTeam: UiPageTeam, PageIntegrations: UiPageIntegrations, PageSearch: UiPageSearch, PageNotifications: UiPageNotifications, PageInbox: UiPageInbox, PageCheckout: UiPageCheckout, PageOnboarding: UiPageOnboarding, PageLanding: UiPageLanding, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
+export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAnalytics: UiPageAnalytics, PageCalendar: UiPageCalendar, PageKanban: UiPageKanban, PageBilling: UiPageBilling, PageTeam: UiPageTeam, PageIntegrations: UiPageIntegrations, PageSearch: UiPageSearch, PageArticle: UiPageArticle, PageChangelog: UiPageChangelog, PageHelp: UiPageHelp, PageStates: UiPageStates, PageLegal: UiPageLegal, PageLocations: UiPageLocations, PageBookingFlow: UiPageBookingFlow, PageNotifications: UiPageNotifications, PageInbox: UiPageInbox, PageCheckout: UiPageCheckout, PageOnboarding: UiPageOnboarding, PageLanding: UiPageLanding, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
 export const install = app => { for (const [n, c] of Object.entries(C)) app.component('Ui' + n, c); };
 export { fmt, setIconBase, rules } from '../core/index.js';
 export { useUiTheme } from '../theme.js';

package/types/react.d.ts

@@ -3150,6 +3150,66 @@ export interface UiPageAnalyticsProps {
 }
 export const UiPageAnalytics: ComponentType<UiPageAnalyticsProps>;
 
+/**
+ * Article template: cover, post body, sticky table of contents, share row and related posts.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Body, share and related share the main column; the table of contents stays visible on the right while the body scrolls and drops under the body below 860 px.
+ */
+export interface UiPageArticleProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Cover image area with title and author line; a gradient Card or LazyImage.
+   * @slot cover (React: pass as a prop)
+   */
+  cover?: ReactNode;
+  /**
+   * Article text; Heading, Text, Code, Alert.
+   * @slot body (React: pass as a prop)
+   */
+  body?: ReactNode;
+  /**
+   * Sticky table of contents; Card with a list of anchor links.
+   * @slot toc (React: pass as a prop)
+   */
+  toc?: ReactNode;
+  /**
+   * Share and reaction row; Button, IconButton, CopyButton.
+   * @slot share (React: pass as a prop)
+   */
+  share?: ReactNode;
+  /**
+   * Related posts; Card grid.
+   * @slot related (React: pass as a prop)
+   */
+  related?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageArticle: ComponentType<UiPageArticleProps>;
+
 /**
  * Sign-in page template without the app shell, as a centered card or a split layout.
  * Note: Designed for the dark theme and used without AppShell.
@@ -3300,6 +3360,61 @@ export interface UiPageBillingProps {
 }
 export const UiPageBilling: ComponentType<UiPageBillingProps>;
 
+/**
+ * Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px.
+ */
+export interface UiPageBookingFlowProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Progress; Stepper.
+   * @slot steps (React: pass as a prop)
+   */
+  steps?: ReactNode;
+  /**
+   * Content of the active step (search, pick, guests, confirm); Card, DatePicker, OptionCards, NumberInput.
+   * @slot content (React: pass as a prop)
+   */
+  content?: ReactNode;
+  /**
+   * Back and Continue buttons.
+   * @slot nav (React: pass as a prop)
+   */
+  nav?: ReactNode;
+  /**
+   * Booking summary; Card, Descriptions.
+   * @slot summary (React: pass as a prop)
+   */
+  summary?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageBookingFlow: ComponentType<UiPageBookingFlowProps>;
+
 /**
  * Bookings list template: stats, toolbar, bulk-action bar, table and pagination.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3469,6 +3584,56 @@ export interface UiPageCatalogProps {
 }
 export const UiPageCatalog: ComponentType<UiPageCatalogProps>;
 
+/**
+ * Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Filters and timeline share the main column; the subscribe card is a sticky side column.
+ */
+export interface UiPageChangelogProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Tag filter; FilterChips, SearchInput.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * Releases grouped by version; Card, Chip, Divider.
+   * @slot timeline (React: pass as a prop)
+   */
+  timeline?: ReactNode;
+  /**
+   * Sticky subscribe card; Card, TextField, Button.
+   * @slot subscribe (React: pass as a prop)
+   */
+  subscribe?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageChangelog: ComponentType<UiPageChangelogProps>;
+
 /**
  * Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3833,6 +3998,61 @@ export interface UiPageHeaderProps {
 }
 export const UiPageHeader: ComponentType<UiPageHeaderProps>;
 
+/**
+ * Help center home: search, category grid, popular articles and a contact card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Popular articles and contact share a row and wrap on narrow screens. For a single question list use PageFaq.
+ */
+export interface UiPageHelpProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Large search field; SearchInput.
+   * @slot search (React: pass as a prop)
+   */
+  search?: ReactNode;
+  /**
+   * Category tiles; Card with IconTile.
+   * @slot categories (React: pass as a prop)
+   */
+  categories?: ReactNode;
+  /**
+   * Popular articles list; Card.
+   * @slot popular (React: pass as a prop)
+   */
+  popular?: ReactNode;
+  /**
+   * Contact options; Card, Button.
+   * @slot contact (React: pass as a prop)
+   */
+  contact?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageHelp: ComponentType<UiPageHelpProps>;
+
 /**
  * Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4042,6 +4262,111 @@ export interface UiPageLandingProps {
 }
 export const UiPageLanding: ComponentType<UiPageLandingProps>;
 
+/**
+ * Legal document template: last-updated line, sticky table of contents, numbered sections and a contact card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The table of contents sits left of the document and stacks above it under 860 px.
+ */
+export interface UiPageLegalProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Version, last-updated date and print or download buttons; Chip, Button.
+   * @slot meta (React: pass as a prop)
+   */
+  meta?: ReactNode;
+  /**
+   * Sticky table of contents; Card with anchor links.
+   * @slot toc (React: pass as a prop)
+   */
+  toc?: ReactNode;
+  /**
+   * Document sections; Card, Heading, Text.
+   * @slot document (React: pass as a prop)
+   */
+  document?: ReactNode;
+  /**
+   * Questions card; Card, Button.
+   * @slot contact (React: pass as a prop)
+   */
+  contact?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageLegal: ComponentType<UiPageLegalProps>;
+
+/**
+ * Locations template: filters, a scrollable list of places and a sticky map panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The list is a fixed-width column left of the map; under 860 px the map goes below the list.
+ */
+export interface UiPageLocationsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Search and category filters; SearchInput, FilterChips.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * Places list; Card rows.
+   * @slot list (React: pass as a prop)
+   */
+  list?: ReactNode;
+  /**
+   * Map panel; Map, or a gradient placeholder.
+   * @slot map (React: pass as a prop)
+   */
+  map?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageLocations: ComponentType<UiPageLocationsProps>;
+
 /**
  * Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4512,6 +4837,76 @@ export interface UiPageSettingsProps {
 }
 export const UiPageSettings: ComponentType<UiPageSettingsProps>;
 
+/**
+ * State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The first six slots sit in two rows of auto-fit cards; success spans the full width.
+ */
+export interface UiPageStatesProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Empty list; EmptyState with a primary action.
+   * @slot empty (React: pass as a prop)
+   */
+  empty?: ReactNode;
+  /**
+   * No search results; EmptyState with a reset action.
+   * @slot noresults (React: pass as a prop)
+   */
+  noresults?: ReactNode;
+  /**
+   * No permission; EmptyState with a request-access action.
+   * @slot forbidden (React: pass as a prop)
+   */
+  forbidden?: ReactNode;
+  /**
+   * Offline; DataState state="offline".
+   * @slot offline (React: pass as a prop)
+   */
+  offline?: ReactNode;
+  /**
+   * Error with retry; DataState state="error".
+   * @slot error (React: pass as a prop)
+   */
+  error?: ReactNode;
+  /**
+   * Loading; Skeleton or DataState state="loading".
+   * @slot loading (React: pass as a prop)
+   */
+  loading?: ReactNode;
+  /**
+   * Success confirmation; Alert tone="success" or EmptyState.
+   * @slot success (React: pass as a prop)
+   */
+  success?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageStates: ComponentType<UiPageStatesProps>;
+
 /**
  * Full-page status screen (404, 401, maintenance, coming soon) with one action.
  * Note: Slots replace only their own part: fill message and the preset code and button remain; kind, title, description, onAction and actionLabel apply to the parts whose slot is empty.

package/types/vue-global.d.ts

@@ -103,11 +103,14 @@ declare module 'vue' {
     UiOptionCards: typeof Ui.UiOptionCards;
     UiPageAccount: typeof Ui.UiPageAccount;
     UiPageAnalytics: typeof Ui.UiPageAnalytics;
+    UiPageArticle: typeof Ui.UiPageArticle;
     UiPageAuth: typeof Ui.UiPageAuth;
     UiPageBilling: typeof Ui.UiPageBilling;
+    UiPageBookingFlow: typeof Ui.UiPageBookingFlow;
     UiPageBookings: typeof Ui.UiPageBookings;
     UiPageCalendar: typeof Ui.UiPageCalendar;
     UiPageCatalog: typeof Ui.UiPageCatalog;
+    UiPageChangelog: typeof Ui.UiPageChangelog;
     UiPageCheckout: typeof Ui.UiPageCheckout;
     UiPageCrm: typeof Ui.UiPageCrm;
     UiPageDashboard: typeof Ui.UiPageDashboard;
@@ -115,10 +118,13 @@ declare module 'vue' {
     UiPageFaq: typeof Ui.UiPageFaq;
     UiPageForm: typeof Ui.UiPageForm;
     UiPageHeader: typeof Ui.UiPageHeader;
+    UiPageHelp: typeof Ui.UiPageHelp;
     UiPageInbox: typeof Ui.UiPageInbox;
     UiPageIntegrations: typeof Ui.UiPageIntegrations;
     UiPageKanban: typeof Ui.UiPageKanban;
     UiPageLanding: typeof Ui.UiPageLanding;
+    UiPageLegal: typeof Ui.UiPageLegal;
+    UiPageLocations: typeof Ui.UiPageLocations;
     UiPageNotifications: typeof Ui.UiPageNotifications;
     UiPageOnboarding: typeof Ui.UiPageOnboarding;
     UiPageOrder: typeof Ui.UiPageOrder;
@@ -127,6 +133,7 @@ declare module 'vue' {
     UiPageProfile: typeof Ui.UiPageProfile;
     UiPageSearch: typeof Ui.UiPageSearch;
     UiPageSettings: typeof Ui.UiPageSettings;
+    UiPageStates: typeof Ui.UiPageStates;
     UiPageStatus: typeof Ui.UiPageStatus;
     UiPageTeam: typeof Ui.UiPageTeam;
     UiPageUserList: typeof Ui.UiPageUserList;