@swiftwc/ui 0.0.0-dev.114 → 0.0.0-dev.117

package/generated/internal/class/navigation-path.js

@@ -2,7 +2,7 @@
  * Gets current host (closest)
  */
 function closestHost(any) {
-    return any?.closest('body-view,[is=sheet-view],navigation-stack,navigation-split-view') ?? undefined;
+    return any?.closest('content-view,[is=sheet-view],navigation-stack,navigation-split-view') ?? undefined;
 }
 export class NavigationPath {
     #component;
@@ -49,7 +49,7 @@ export class NavigationPath {
     }
     #querySlot() {
         this.#slot =
-            this.#component?.querySelector(':scope>body-view:not([hidden]),:scope>[is=sheet-view]:not([hidden]),:scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])') ?? null;
+            this.#component?.querySelector(':scope>content-view:not([hidden]),:scope>[is=sheet-view]:not([hidden]),:scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])') ?? null;
     }
     hydrate() {
         this.#queryBody();

package/generated/internal/privateNamespace.d.ts

@@ -1,7 +1,7 @@
 import type * as Components from '../components';
 import { NavigationPath } from '../internal/class/navigation-path';
 type TransitionType = 'forwards' | 'backwards' | 'reload';
-export type NavigationHost = Components.BodyView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
+export type NavigationHost = Components.ContentView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
 export type NavigationToolbarConfiguration = Components.ToolBarItem | Components.ToolBarItemGroup;
 export type NavigationPage = Components.SidebarView | Components.ScrollView;
 export declare function queryInsertPosition(frame?: NavigationHost): "afterend" | "beforebegin";

package/generated/internal/privateNamespace.js

@@ -4,7 +4,7 @@ import { Snapshot } from '../snapshot';
 export function queryInsertPosition(frame) {
     if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
         return 'beforebegin'; // lookFor = 'previousElementSibling'
-    else if ('NAVIGATION-SPLIT-VIEW' === frame?.parentElement?.tagName && frame?.parentElement.querySelector(':scope>[is=sidebar-view]') && 'BODY-VIEW' === frame?.tagName)
+    else if ('NAVIGATION-SPLIT-VIEW' === frame?.parentElement?.tagName && frame?.parentElement.querySelector(':scope>[is=sidebar-view]') && 'CONTENT-VIEW' === frame?.tagName)
         return 'beforebegin'; // lookFor = 'previousElementSibling'
     return 'afterend'; // lookFor = 'nextElementSibling'
 }
@@ -71,8 +71,8 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
             oldToolbar.classList.add('fwn'); // prepare navbs
         // prepare new
         const toolbarExclusion = 0 < modalViews.length
-            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,body-view ~ tool-bar)')
-            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
+            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,content-view ~ tool-bar)')
+            : (value, index, array) => value.parentElement?.matches('tool-bar:not(content-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
         for (const bti of newToolbars?.filter?.(toolbarExclusion) ?? [])
             bti.classList.add('fwnn'); // for (const ti of newToolbars ?? []) ti.classList.add('fwnn') //
         for (const bt of tos?.filter?.(bodyExclusion) ?? []) {

package/generated/internal/utils/debug.js

@@ -1,4 +1,4 @@
-import flags from '../flags';
+import devFlags from '../dev-flags';
 export default function (...args) {
-    flags.DEBUG && self.console.debug(...args);
+    devFlags.DEBUG && self.console.debug(...args);
 }

package/html-data/en.json

@@ -11,16 +11,6 @@
       ],
       "description": "A dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.\n---\n\n```ts\ninterface AlertDialogSignature {}\n\nclass AlertDialog extends HTMLDialogElement<AlertDialogSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'alert-dialog' // <dialog is=\"alert-dialog\"></dialog>\n  }\n}\n\n```\n"
     },
-    {
-      "name": "body-view",
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://swiftwc.github.io/ui/web-components/body-view"
-        }
-      ],
-      "description": "A container view that wraps a scroll view, marking it as a screen your app can navigate to.\n---\n\n```ts\ninterface BodyViewSignature {}\n\nclass BodyView extends HTMLElement<BodyViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'body-view': BodyView // <body-view></body-view>\n  }\n}\n\n```\n"
-    },
     {
       "name": "bordered-button",
       "references": [
@@ -139,7 +129,17 @@
           "name": "search"
         }
       ],
-      "description": "A message with a title and extra information that you show when part of your app can’t be used.\n---\n\n```ts\ninterface ContentUnavailableSignature {\n  Attributes: {\n    search?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    description: HTMLElement[]\n    actions: HTMLElement[]\n  }\n}\n\nclass ContentUnavailable extends HTMLElement<ContentUnavailableSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'content-unavailable': ContentUnavailable // <content-unavailable></content-unavailable>\n  }\n}\n\n```\n\n### **Examples:**\n**Example:**\n```html\n<content-unavailable search></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable search=\"foo\"></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n  <label-view title=\"No Mail\">\n    <i class=\"ph ph-tray\" slot=\"icon\" foreground=\"secondary\"></i>\n  </label-view>\n  <label-view\n    title=\"New mails you receive will appear here.\"\n    foreground=\"secondary\"\n    slot=\"description\"\n  ></label-view>\n  <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n    <label-view title=\"Switch Account\"></label-view>\n  </button>\n</content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n  <label-view title=\"No Mail\">\n    <svg slot=\"icon\" foreground=\"secondary\" ...>...</svg>\n  </label-view>\n  <label-view\n    title=\"New mails you receive will appear here.\"\n    foreground=\"secondary\"\n    slot=\"description\"\n  ></label-view>\n  <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n    <label-view title=\"Switch Account\"></label-view>\n  </button>\n</content-unavailable>\n\n```\n"
+      "description": "A message with a title and extra information that you show when part of your app can’t be used.\n---\n\n```ts\ninterface ContentUnavailableSignature {\n  Attributes: {\n    search?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    description: HTMLElement[]\n    actions: HTMLElement[]\n  }\n}\n\nclass ContentUnavailable extends HTMLElement<ContentUnavailableSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'content-unavailable': ContentUnavailable // <content-unavailable></content-unavailable>\n  }\n}\n\n```\n\n### **Examples:**\n**Example:**\n```html\n<content-unavailable search></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable search=\"foo\"></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n  <label-view title=\"No Mail\">\n    <i class=\"ph ph-tray\" slot=\"icon\" foreground=\"secondary\"></i>\n  </label-view>\n  <label-view\n    title=\"New mails you receive will appear here.\"\n    foreground=\"secondary\"\n    slot=\"description\"\n  ></label-view>\n  <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n    <label-view title=\"Switch Account\"></label-view>\n  </button>\n</content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n  <label-view title=\"No Mail\">\n    <svg slot=\"icon\" foreground=\"secondary\" ...>...</svg>\n  </label-view>\n  <label-view\n    title=\"New mails you receive will appear here.\"\n    foreground=\"secondary\"\n    slot=\"description\"\n  ></label-view>\n  <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n    <label-view title=\"Switch Account\"></label-view>\n  </button>\n</content-unavailable>\n\n```\n"
+    },
+    {
+      "name": "content-view",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/content-view"
+        }
+      ],
+      "description": "A container view that wraps a scroll view, marking it as a screen your app can navigate to.\n---\n\n```ts\ninterface ContentViewSignature {}\n\nclass ContentView extends HTMLElement<ContentViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'content-view': ContentView // <content-view></content-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "date-picker",
@@ -449,7 +449,7 @@
           "description": "Value Type: \"<format-type>:<locale?>:<format-options?>\"\nDescription: Use this to format the text inside the value attribute. For example `format=\"currency::currency=USD\" value=\"1234.5\"` produces a value of `$1,234.50`."
         }
       ],
-      "description": "A container view that pairs a label with a value.\n---\n\n```ts\ninterface LabeledContentSignature {\n  Attributes: {\n    value?: string\n    label?: string\n    header?: string\n    footer?: string\n    'labeled-content-style'?: 'vertical' | 'horizontal' // Use this to force a specific style.\n    format?: '<format-type>:<locale?>:<format-options?>' // Use this to format the text inside the value attribute. For example `format=\"currency::currency=USD\" value=\"1234.5\"` produces a value of `$1,234.50`.\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[] // Use the `slot=\"label\"` attribute to place childen in the label block.\n    header: HTMLElement[]\n    footer: HTMLElement[]\n  }\n\n  Parts: {\n    'labeled-content-container': never\n    'labeled-content-stack': never\n    'labeled-content-label-stack': never\n    'labeled-content-value-stack': never\n  }\n}\n\nclass LabeledContent extends HTMLElement<LabeledContentSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'labeled-content': LabeledContent // <labeled-content></labeled-content>\n  }\n}\n\n```\n\n### **Examples:**\n**Creates a standard labeled element, with a view that conveys the value of the element and a label:**\n```html\n<labeled-content label=\"Label\" value=\"Content\"></labeled-content>\n\n```\n**Creates a labeled element from a formatted value:**\n```html\n<labeled-content\n  label=\"Height\"\n  value=\"6\"\n  format=\"unit::unit=foot\"\n></labeled-content>\n\n```\n**Creates a labeled element that displays a custom label and a custom subtitle to the label:**\n```html\n<labeled-content value=\"Content\">\n  <label-view slot=\"label\" title=\"Custom Value\"></label-view>\n  <label-view slot=\"label\" title=\"Custom Subtitle Value\"></label-view>\n</labeled-content>\n\n```\n"
+      "description": "A container view that pairs a label with a value.\n---\n\n```ts\ninterface LabeledContentSignature {\n  Attributes: {\n    value?: string\n    label?: string\n    header?: string\n    footer?: string\n    'labeled-content-style'?: 'vertical' | 'horizontal' // Use this to force a specific style.\n    format?: '<format-type>:<locale?>:<format-options?>' // Use this to format the text inside the value attribute. For example `format=\"currency::currency=USD\" value=\"1234.5\"` produces a value of `$1,234.50`.\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    label: HTMLElement[] // Use the `slot=\"label\"` attribute to place childen in the label block.\n    header: HTMLElement[]\n    footer: HTMLElement[]\n  }\n\n  Parts: {\n    'labeled-content-container': never\n    'labeled-content-stack': never\n    'labeled-content-label-stack': never\n    'labeled-content-value-stack': never\n  }\n}\n\nclass LabeledContent extends HTMLElement<LabeledContentSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'labeled-content': LabeledContent // <labeled-content></labeled-content>\n  }\n}\n\n```\n\n### **Examples:**\n**Creates a standard labeled element, with a view that conveys the value of the element and a label:**\n```html\n<labeled-content label=\"Label\" value=\"Content\"></labeled-content>\n\n```\n**Creates a labeled element from a formatted value:**\n```html\n<labeled-content\n  label=\"Height\"\n  value=\"6\"\n  format=\"unit::unit=foot\"\n></labeled-content>\n\n```\n**Creates a labeled element that displays a custom label and a custom subtitle to the label:**\n```html\n<labeled-content value=\"Content\">\n  <label-view slot=\"label\" title=\"Custom Value\"></label-view>\n  <label-view slot=\"label\" title=\"Custom Subtitle Value\"></label-view>\n</labeled-content>\n\n```\n"
     },
     {
       "name": "list-view",
@@ -500,7 +500,7 @@
           "name": "label"
         }
       ],
-      "description": "A control that opens a menu of actions.\n---\n\n```ts\ninterface MenuViewSignature {\n  Attributes: {\n    open?: string\n    closing?: string\n    label?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[]\n  }\n}\n\nclass MenuView extends HTMLElement<MenuViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'menu-view': MenuView // <menu-view></menu-view>\n  }\n}\n\n```\n"
+      "description": "A control that opens a menu of actions.\n---\n\n```ts\ninterface MenuViewSignature {\n  Attributes: {\n    open?: string\n    closing?: string\n    label?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    label: HTMLElement[]\n  }\n}\n\nclass MenuView extends HTMLElement<MenuViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'menu-view': MenuView // <menu-view></menu-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "navigation-large-title",
@@ -657,7 +657,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n  Attributes: {\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n    'horizontal-radio-group-layout'?: boolean\n    prompt?: string\n    'prompt-icon'?: string\n    label?: string\n    name?: string\n    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    selection?: string\n    searchable?: boolean\n    'current-value-label'?: string\n    'current-value-icon'?: string\n    help?: string // Adds a help tooltip to the trigger of the picker, if style supports one\n    dictionary?: Array<DictEntry> // Renders all options using this array\n    required?: boolean\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[]\n    list: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n  static formAssociated = true\n\n  selection: string\n  readonly template: DocumentFragment\n  readonly pickerStyle:\n    | 'automatic'\n    | 'menu'\n    | 'inline'\n    | 'navigation-link'\n    | 'sheet'\n    | 'radio-group'\n  readonly name: string // Form participation property\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'picker-view': PickerView // <picker-view></picker-view>\n  }\n}\n\n```\n"
+      "description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n  Attributes: {\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n    'horizontal-radio-group-layout'?: boolean\n    prompt?: string\n    'prompt-icon'?: string\n    label?: string\n    name?: string\n    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    selection?: string\n    searchable?: boolean\n    'current-value-label'?: string\n    'current-value-icon'?: string\n    help?: string // Adds a help tooltip to the trigger of the picker, if style supports one\n    dictionary?: Array<DictEntry> // Renders all options using this array\n    required?: boolean\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    label: HTMLElement[]\n    list: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n  static formAssociated = true\n\n  selection: string\n  readonly template: DocumentFragment\n  readonly pickerStyle:\n    | 'automatic'\n    | 'menu'\n    | 'inline'\n    | 'navigation-link'\n    | 'sheet'\n    | 'radio-group'\n  readonly name: string // Form participation property\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'picker-view': PickerView // <picker-view></picker-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "plain-button",
@@ -682,7 +682,7 @@
           "name": "value"
         }
       ],
-      "description": "A view that shows how far along a task is.\n---\n\n```ts\ninterface ProgressViewSignature {\n  Attributes: {\n    label?: string\n    'current-value-label'?: string\n    value?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    'current-value': HTMLElement[]\n  }\n}\n\nclass ProgressView extends HTMLElement<ProgressViewSignature> {\n  readonly progressViewStyle: 'circular' | 'linear'\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'progress-view': ProgressView // <progress-view></progress-view>\n  }\n}\n\n```\n"
+      "description": "A view that shows how far along a task is.\n---\n\n```ts\ninterface ProgressViewSignature {\n  Attributes: {\n    label?: string\n    'current-value-label'?: string\n    value?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    'current-value': HTMLElement[]\n  }\n}\n\nclass ProgressView extends HTMLElement<ProgressViewSignature> {\n  readonly progressViewStyle: 'circular' | 'linear'\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'progress-view': ProgressView // <progress-view></progress-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "screen-view",
@@ -724,7 +724,7 @@
           "name": "navigation-bar-title-display-mode"
         }
       ],
-      "description": "A view that scrolls its content when it doesn’t fit the screen.\n---\n\n```ts\ninterface ScrollViewSignature {\n  Attributes: {\n    'navigation-title'?: string // Configures the view’s title for purposes of navigation. Shorthand for `<v-stack spacing=\"0\" alignment=\"fill\" slot=\"top-bar-principal\"><label-view line-limit=\"1\" truncation-mode=\"tail\" font=\"headline\"><span>Navigation Title</span></label-view></v-stack>`\n    'navigation-inline-title'?: string\n    'navigation-inline-subtitle'?: string\n    'navigation-icon'?: string\n    'navigation-bar-title-display-mode'?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    'top-bar-principal': HTMLElement[]\n    'bottom-bar-principal': HTMLElement[]\n  }\n}\n\nclass ScrollView extends HTMLElement<ScrollViewSignature> {\n  centerScrollToElement(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'scroll-view': ScrollView // <scroll-view></scroll-view>\n  }\n}\n\n```\n"
+      "description": "A view that scrolls its content when it doesn’t fit the screen.\n---\n\n```ts\ninterface ScrollViewSignature {\n  Attributes: {\n    'navigation-title'?: string // Configures the view’s title for purposes of navigation. Shorthand for `<v-stack spacing=\"0\" alignment=\"fill\" slot=\"top-bar-principal\"><label-view line-limit=\"1\" truncation-mode=\"tail\" font=\"headline\"><span>Navigation Title</span></label-view></v-stack>`\n    'navigation-inline-title'?: string\n    'navigation-inline-subtitle'?: string\n    'navigation-icon'?: string\n    'navigation-bar-title-display-mode'?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    'top-bar-principal': HTMLElement[]\n    'bottom-bar-principal': HTMLElement[]\n  }\n}\n\nclass ScrollView extends HTMLElement<ScrollViewSignature> {\n  centerScrollToElement(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'scroll-view': ScrollView // <scroll-view></scroll-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "search-view",
@@ -746,7 +746,7 @@
           "name": "footer"
         }
       ],
-      "description": "A container view that groups related content together.\n---\n\n```ts\ninterface SectionViewSignature {\n  Attributes: {\n    header?: string\n    footer?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    header: HTMLElement[]\n    footer: HTMLElement[]\n  }\n}\n\nclass SectionView extends HTMLElement<SectionViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'section-view': SectionView // <section-view></section-view>\n  }\n}\n\n```\n"
+      "description": "A container view that groups related content together.\n---\n\n```ts\ninterface SectionViewSignature {\n  Attributes: {\n    header?: string\n    footer?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    header: HTMLElement[]\n    footer: HTMLElement[]\n  }\n}\n\nclass SectionView extends HTMLElement<SectionViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'section-view': SectionView // <section-view></section-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "sheet-view",
@@ -840,7 +840,7 @@
           ]
         }
       ],
-      "description": "A container view that arranges data in rows and columns, optionally letting the user select one or more of them.\n---\n\n```ts\ninterface TableViewSignature {\n  Attributes: {\n    'preferred-compact-template'?:\n      | 'title:trailing:subtitle'\n      | 'trailing:title:subtitle'\n      | 'title:subtitle:trailing'\n      | '*' // Sets the template areas when the table is in compact mode\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    'header-leading': HTMLElement[]\n    'header-principal': HTMLElement[]\n    'header-trailing': HTMLElement[]\n    column: HTMLElement[]\n    'footer-leading': HTMLElement[]\n    'footer-principal': HTMLElement[]\n    'footer-trailing': HTMLElement[]\n  }\n}\n\nclass TableView extends HTMLElement<TableViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'table-view': TableView // <table-view></table-view>\n  }\n}\n\n```\n"
+      "description": "A container view that arranges data in rows and columns, optionally letting the user select one or more of them.\n---\n\n```ts\ninterface TableViewSignature {\n  Attributes: {\n    'preferred-compact-template'?:\n      | 'title:trailing:subtitle'\n      | 'trailing:title:subtitle'\n      | 'title:subtitle:trailing'\n      | '*' // Sets the template areas when the table is in compact mode\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    'header-leading': HTMLElement[]\n    'header-principal': HTMLElement[]\n    'header-trailing': HTMLElement[]\n    column: HTMLElement[]\n    'footer-leading': HTMLElement[]\n    'footer-principal': HTMLElement[]\n    'footer-trailing': HTMLElement[]\n  }\n}\n\nclass TableView extends HTMLElement<TableViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'table-view': TableView // <table-view></table-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "text-field",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.114",
+  "version": "0.0.0-dev.117",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -79,11 +79,9 @@
     "format:write": "prettier . --write",
     "lint:scripts": "tsc -p tsconfig.scripts.json --noEmit",
     "test": "vitest --dom",
-    "prepackage": "rm -rf generated && npm run debug:off",
-    "package": "npm run build:ts && npm run build:scss ; npm run debug:reset",
-    "postpublish": "git checkout dev",
-    "debug:off": "node -e \"const fs=require('node:fs');const f='./js/internal/flags.ts';const s=fs.readFileSync(f,'utf8');fs.writeFileSync(f,s.replace(/DEBUG:\\s*(true|false)/, 'DEBUG: false'))\"",
-    "debug:reset": "git checkout -- ./js/internal/flags.ts",
+    "prepackage": "rm -rf generated",
+    "package": "npm run build:ts && npm run build:scss && npm run debug:off",
+    "debug:off": "node -e \"const fs=require('node:fs');const f='./generated/internal/dev-flags.js';const s=fs.readFileSync(f,'utf8');fs.writeFileSync(f,s.replace(/DEBUG:\\s*(true|false)/, 'DEBUG: false'))\"",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {

package/scss/_components.scss

@@ -60,7 +60,7 @@
 
 // @forward 'components/button-view';
 
-@forward 'components/body-view';
+@forward 'components/content-view';
 
 @forward 'components/navigation-large-title';
 @forward 'components/navigation-title';

package/scss/_vars.scss

@@ -1,6 +1,7 @@
 @use 'sass:math';
 @use 'functions';
 
+$framework-layer: sw !default;
 $base-layer: sw-base !default;
 $components-layer: sw-components !default;
 $list-components-layer: sw-list-components !default;

package/scss/base/_layout.scss

@@ -2,8 +2,8 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
-  body-view,
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
+  content-view,
   navigation-stack,
   navigation-split-view,
   [is='full-screen'],
@@ -23,11 +23,11 @@
   }
 
   navigation-stack:has(> navigation-stack:not([hidden]),> navigation-split-view:not([hidden])),
-  navigation-stack:has(> body-view),
-  navigation-split-view:has(> body-view),
-  dialog:has(> body-view),
-  // body-view:has(> dialog),
-  body-view:has(> body-view) {
+  navigation-stack:has(> content-view),
+  navigation-split-view:has(> content-view),
+  dialog:has(> content-view),
+  // content-view:has(> dialog),
+  content-view:has(> content-view) {
     > scroll-view,
     > [is='sidebar-view'] > scroll-view {
       :where(&) {
@@ -55,7 +55,7 @@
 
   // NOTE: Going all the way back from deeply nested views forces an empty landing page.
   // NOTE: Refactor this to add a content-visibility:visible when bwd/fwd classes are present.
-  // :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+  // :is(navigation-stack, dialog, content-view):has(> content-view > content-view) {
   //   > scroll-view,
   //   > tool-bar {
   //     :where(&) {

package/scss/base/_reboot.scss

@@ -1,9 +1,11 @@
 @use '../vars';
 @use '../functions';
 
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$list-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+@layer #{vars.$framework-layer} {
+  @layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$list-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+}
 
-@layer #{vars.$base-layer} {
+@layer #{vars.$framework-layer}.#{vars.$base-layer} {
   // html,
   // body {
   //   overflow: auto;

package/scss/base/_root.scss

@@ -10,7 +10,7 @@
   initial-value: 16;
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   :root {
     color-scheme: light dark;
 

package/scss/colors/_index.scss

@@ -599,7 +599,7 @@ $colors: map.merge(
   inherits: true;
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   :root {
     // --background: light-dark(oklch(1 0 0), oklch(0 0 0)); // ✅
 
@@ -639,7 +639,7 @@ $colors: map.merge(
   [is='full-screen'],
   [is='confirmation-dialog'],
   [is='alert-dialog'],
-  body-view,
+  content-view,
   navigation-split-view,
   navigation-split-view > [is='sidebar-view'],
   navigation-stack {

package/scss/components/_alert-dialog.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='alert-dialog'] {
     :where(&) {
       @include mixins.reset-dialog;
@@ -86,7 +86,7 @@
   }
 }
 
-// @layer #{vars.$colors-layer} {
+// @layer #{vars.$framework-layer}.#{vars.$colors-layer} {
 //   // SECTION: componentize
 //   [is='alert-dialog'] {
 //     > button {
@@ -98,7 +98,7 @@
 //   }
 // }
 
-// @layer #{vars.$ui-layer} {
+// @layer #{vars.$framework-layer}.#{vars.$ui-layer} {
 //   // SECTION: componentize
 //   [is='alert-dialog'] {
 //     > button {

package/scss/components/_bordered-button.scss

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='bordered-button'] {
     @extend %button;
 
@@ -50,7 +50,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='bordered-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_bordered-prominent-button.scss

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='bordered-prominent-button'] {
     @extend %button;
 
@@ -46,7 +46,7 @@
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   [is='bordered-prominent-button'] > * {
     :where(&) {
       @include mixins.takeover-color-vars(btn);
@@ -56,7 +56,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='bordered-prominent-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_borderless-button.scss

@@ -2,7 +2,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='borderless-button'] {
     @extend %button;
 
@@ -36,7 +36,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='borderless-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_confirmation-dialog.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='confirmation-dialog'] {
     :where(&) {
       @include mixins.reset-dialog;

package/scss/components/_content-unavailable.scss

@@ -2,7 +2,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   content-unavailable {
     :where(&) {
       place-content: center;

package/scss/components/{_body-view.scss → _content-view.scss}

@@ -1,8 +1,8 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
-  // body-view {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
+  // content-view {
   //   :where(&) {
   //   }
   // }

package/scss/components/_date-picker.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   date-picker {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);

package/scss/components/_detail-placeholder.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   detail-placeholder {
     :where(&) {
       pointer-events: none;
@@ -105,7 +105,7 @@
     @include mixins.if-2col-split-view-fits {
       // also hide when in 2col mode with detail view
       &:not(:has(> [is='sidebar-view'])) {
-        &:has(> body-view) {
+        &:has(> content-view) {
           detail-placeholder {
             :where(&) {
               --nav-split-view--detail-placeholder-visibility: collapse;
@@ -117,7 +117,7 @@
         &:not([column-visibility='double-column']) {
           // hide when no content view
           &[preferred-compact-column='content'] {
-            &:not(:has(> body-view)) {
+            &:not(:has(> content-view)) {
               detail-placeholder {
                 :where(&) {
                   --nav-split-view--detail-placeholder-visibility: collapse;
@@ -127,7 +127,7 @@
           }
           // also hide when in 3col mode with detail view
           @include mixins.if-3col-split-view-fits {
-            &:has(> body-view > body-view) {
+            &:has(> content-view > content-view) {
               detail-placeholder {
                 :where(&) {
                   --nav-split-view--detail-placeholder-visibility: collapse;
@@ -139,7 +139,7 @@
 
         // also hide when in 2col mode with detail view
         &[column-visibility='double-column'] {
-          &:has(> body-view) {
+          &:has(> content-view) {
             detail-placeholder {
               :where(&) {
                 --nav-split-view--detail-placeholder-visibility: collapse;

package/scss/components/_disclosure-group.scss

@@ -2,7 +2,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='disclosure-group'] {
     :where(&) {
       overflow: clip;
@@ -135,7 +135,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='disclosure-group'] {
     @supports (x: #{string.unquote('attr(x type(*))')}) {
       :where(&) {

package/scss/components/_fine-tooltip.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$tab-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$tab-components-layer} {
   fine-tooltip {
     :where(&) {
       color: var(--text,);

package/scss/components/_form-view.scss

@@ -107,7 +107,7 @@ $form-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$list-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$list-components-layer} {
   [is='form-view'] {
     &:not(& &, list-view &, table-view &, [is='tab-bar'] > &) {
       @extend %list;
@@ -152,7 +152,7 @@ $form-elses: (
           :where(navigation-split-view [is='sidebar-view'] &[form-style]) {
             @include mixins.write-props(map.get($form-ifs, sidebar));
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             @include mixins.write-props(map.get($form-ifs, inset));
           }
         }
@@ -167,7 +167,7 @@ $form-elses: (
           :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
             --form-style: sidebar;
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             --form-style: inset;
           }
         }

package/scss/components/_full-screen.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='full-screen'] {
     :where(&) {
       @include mixins.reset-dialog;

package/scss/components/_glass-button.scss

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='glass-button'] {
     @extend %button;
 
@@ -52,7 +52,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='glass-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_glass-prominent-button.scss

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='glass-prominent-button'] {
     @extend %button;
 
@@ -52,7 +52,7 @@
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   [is='glass-prominent-button'] > * {
     :where(&) {
       @include mixins.takeover-color-vars(btn);
@@ -62,7 +62,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='glass-prominent-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_group-box.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   group-box {
     :where(&) {
       background: var(--groupbox--background);

package/scss/components/_h-divider.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   h-divider {
     :where(&) {
       inline-size: 100%;

package/scss/components/_h-flex-stack.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   h-flex-stack {
     :where(&) {
       display: flex;