@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.0

package/{web-components.html-data → 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",
@@ -200,6 +200,10 @@
       ],
       "description": "A control that selects an absolute date.\n---\n\n```ts\ninterface DatePickerSignature {\n  Attributes: {\n    'date-picker-style'?: 'graphical' | 'field' | 'automatic' // The style of this element\n    required?: boolean\n    prompt?: string\n    label?: string\n    name?: string\n    selection?: string\n    disabled?: boolean\n    minimum?: string\n    maximum?: string\n  }\n}\n\nclass DatePicker extends HTMLElement<DatePickerSignature> {\n  static formAssociated = true\n\n  readonly template: DocumentFragment\n  readonly datePickerStyle: 'graphical' | 'field' | 'automatic'\n  readonly name: string // Form participation property\n  readonly value: { year: string; month: string; day: string }\n  readonly valueAsDate: Date | null // Returns the value as a Date object.\n  readonly minimum: { year: string; month: string; day: string } | null\n  readonly maximum: { year: string; month: string; day: string } | null\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'date-picker': DatePicker // <date-picker></date-picker>\n  }\n}\n\n```\n"
     },
+    {
+      "name": "detail-placeholder",
+      "description": "undefined\n\n```ts\ninterface DetailPlaceholderSignature {}\n\nclass DetailPlaceholder extends HTMLElement<DetailPlaceholderSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'detail-placeholder': DetailPlaceholder // <detail-placeholder></detail-placeholder>\n  }\n}\n\n```\n"
+    },
     {
       "name": "disclosure-group",
       "references": [
@@ -301,6 +305,27 @@
       ],
       "description": "A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface GlassProminentButtonSignature {\n  Attributes: {\n    role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n    'title-key'?: string\n  }\n\n  Slots: {\n    overlay: HTMLElement[]\n  }\n}\n\nclass GlassProminentButton extends HTMLButtonElement<GlassProminentButtonSignature> {}\n\ndeclare global {\n  interface HTMLButtonElement {\n    is: 'glass-prominent-button' // <button is=\"glass-prominent-button\"></button>\n  }\n}\n\n```\n\n### **Examples:**\n**Creating a prominent glass button:**\n```html\n<button is=\"glass-prominent-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
     },
+    {
+      "name": "h-divider",
+      "description": "undefined\n\n```ts\ninterface HDividerSignature {}\n\nclass HDivider extends HTMLElement<HDividerSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-divider': HDivider // <h-divider></h-divider>\n  }\n}\n\n```\n"
+    },
+    {
+      "name": "h-flex-stack",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/h-flex-stack"
+        }
+      ],
+      "attributes": [
+        {
+          "name": "spacing",
+          "description": "\nDescription: The gap between the primary axis",
+          "valueSet": "Spacing"
+        }
+      ],
+      "description": "A view that arranges its children side by side.\n---\n\n```ts\ninterface HFlexStackSignature {\n  Attributes: {\n    spacing?: Spacing // The gap between the primary axis\n  }\n}\n\nclass HFlexStack extends HTMLElement<HFlexStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-flex-stack': HFlexStack // <h-flex-stack></h-flex-stack>\n  }\n}\n\n```\n"
+    },
     {
       "name": "h-stack",
       "references": [
@@ -384,7 +409,7 @@
           "description": "Value Type: \"tail\""
         }
       ],
-      "description": "A view that labels items with an icon and a title.\n---\n\n```ts\ninterface LabelViewSignature {\n  Attributes: {\n    font?: Font // Sets the default font for text in this view.\n    'system-image'?: string\n    title?: string\n    'line-limit'?: string\n    'truncation-mode'?: 'tail'\n  }\n\n  Slots: {\n    default: HTMLElement[] // Any children without a `slot` attribute are placed in the title block.\n    icon: HTMLElement[] // Use the `slot=\"icon\"` attribute to place childen in the icon block.\n  }\n\n  CSSProperties: {\n    '--label-gap'?: string // The gap between the icon and the title.\n    '--label-image-size'?: number // The size of the icon.\n    '--label-padding-inline'?: string // The padding inline of the label.\n  }\n}\n\nclass LabelView extends HTMLElement<LabelViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'label-view': LabelView // <label-view></label-view>\n  }\n}\n\n```\n\n### **Examples:**\n**Creating a label using a `span` element:**\n```html\n<label-view><span>Hello world!</span></label-view>\n\n```\n**Creating a label using the `title` attribute:**\n```html\n<label-view title=\"Hello world!\"></label-view>\n\n```\n**Creating a label with an icon and a title using the `system-image` attribute:**\n```html\n<label-view system-image=\"hand-waving\"><span>Hello world!</span></label-view>\n\n```\n**Creating a label with an icon and a title using the `icon` slot:**\n```html\n<label-view>\n  <i slot=\"icon\" class=\"ph ph-duotone ph-hand-waving\"></i>\n  <span>Hello world!</span>\n</label-view>\n\n```\n"
+      "description": "A view that labels items with an icon and a title.\n---\n\n```ts\ninterface LabelViewSignature {\n  Attributes: {\n    font?: Font // Sets the default font for text in this view.\n    'system-image'?: string\n    title?: string\n    'line-limit'?: string\n    'truncation-mode'?: 'tail'\n  }\n\n  Slots: {\n    default: HTMLElement[] // Any children without a `slot` attribute are placed in the title block.\n    icon: HTMLElement[] // Use the `slot=\"icon\"` attribute to place childen in the icon block.\n  }\n\n  CSSProperties: {\n    '--label-gap'?: length // The gap between the icon and the title.\n    '--label-image-size'?: number // The size of the icon.\n    '--label-padding-inline'?: length // The padding inline of the label.\n  }\n}\n\nclass LabelView extends HTMLElement<LabelViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'label-view': LabelView // <label-view></label-view>\n  }\n}\n\n```\n\n### **Examples:**\n**Creating a label using a `span` element:**\n```html\n<label-view><span>Hello world!</span></label-view>\n\n```\n**Creating a label using the `title` attribute:**\n```html\n<label-view title=\"Hello world!\"></label-view>\n\n```\n**Creating a label with an icon and a title using the `system-image` attribute:**\n```html\n<label-view system-image=\"hand-waving\"><span>Hello world!</span></label-view>\n\n```\n**Creating a label with an icon and a title using the `icon` slot:**\n```html\n<label-view>\n  <i slot=\"icon\" class=\"ph ph-duotone ph-hand-waving\"></i>\n  <span>Hello world!</span>\n</label-view>\n\n```\n"
     },
     {
       "name": "labeled-content",
@@ -409,7 +434,7 @@
         },
         {
           "name": "labeled-content-style",
-          "description": "Value Type: “vertical” | “horizontal”",
+          "description": "Value Type: “vertical” | “horizontal”\nDescription: Use this to force a specific style.",
           "values": [
             {
               "name": "vertical"
@@ -420,10 +445,11 @@
           ]
         },
         {
-          "name": "format"
+          "name": "format",
+          "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'\n    format?: string\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"
+      "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",
@@ -436,15 +462,24 @@
       "attributes": [
         {
           "name": "navigation-link-indicator-visibility",
-          "description": "Value Type: “hidden”\n\nDescription: Hides accessories like right-arrow-chevron on NavigationLink buttons inside.",
+          "description": "Value Type: “hidden”\n\nDescription: Hides accessories like right-arrow-chevron on NavigationLink buttons inside",
           "values": [
             {
               "name": "hidden"
             }
           ]
+        },
+        {
+          "name": "preferred-root-disclosure-style",
+          "description": "Value Type: “sidebar”",
+          "values": [
+            {
+              "name": "sidebar"
+            }
+          ]
         }
       ],
-      "description": "A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.\n---\n\n```ts\ninterface ListViewSignature {\n  Attributes: {\n    'navigation-link-indicator-visibility'?: 'hidden' // Hides accessories like right-arrow-chevron on NavigationLink buttons inside.\n  }\n}\n\nclass ListView extends HTMLElement<ListViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'list-view': ListView // <list-view></list-view>\n  }\n}\n\n```\n"
+      "description": "A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.\n---\n\n```ts\ninterface ListViewSignature {\n  Attributes: {\n    'navigation-link-indicator-visibility'?: 'hidden' // Hides accessories like right-arrow-chevron on NavigationLink buttons inside\n    'preferred-root-disclosure-style'?: 'sidebar'\n  }\n\n  CSSProperties: {\n    '--list-row-gap'?: length // The gap between rows\n    '--list--media-inner-padding-inline-start'?: length // The inline paddint start for each row\n  }\n}\n\nclass ListView extends HTMLElement<ListViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'list-view': ListView // <list-view></list-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "menu-view",
@@ -465,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",
@@ -476,15 +511,6 @@
         }
       ],
       "attributes": [
-        {
-          "name": "background-style",
-          "description": "Value Type: “grouped”",
-          "values": [
-            {
-              "name": "grouped"
-            }
-          ]
-        },
         {
           "name": "padding",
           "description": "Value Type: boolean"
@@ -494,7 +520,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "description": "undefined\n\n```ts\ninterface NavigationLargeTitleSignature {\n  Attributes: {\n    'background-style'?: 'grouped'\n    padding?: boolean\n    'navigation-bar-auto-hide'?: boolean\n  }\n}\n\nclass NavigationLargeTitle extends HTMLElement<NavigationLargeTitleSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-large-title': NavigationLargeTitle // <navigation-large-title></navigation-large-title>\n  }\n}\n\n```\n"
+      "description": "undefined\n\n```ts\ninterface NavigationLargeTitleSignature {\n  Attributes: {\n    padding?: boolean\n    'navigation-bar-auto-hide'?: boolean\n  }\n}\n\nclass NavigationLargeTitle extends HTMLElement<NavigationLargeTitleSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-large-title': NavigationLargeTitle // <navigation-large-title></navigation-large-title>\n  }\n}\n\n```\n"
     },
     {
       "name": "navigation-split-view",
@@ -553,6 +579,37 @@
         }
       ],
       "attributes": [
+        {
+          "name": "label-value-placement",
+          "description": "Value Type: “vertical” | “horizontal” | “auto”",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "auto"
+            }
+          ]
+        },
+        {
+          "name": "horizontal-radio-group-layout",
+          "description": "Value Type: boolean"
+        },
+        {
+          "name": "prompt"
+        },
+        {
+          "name": "prompt-icon"
+        },
+        {
+          "name": "label"
+        },
+        {
+          "name": "name"
+        },
         {
           "name": "picker-style",
           "description": "Value Type: “menu” | “inline” | “navigation-link” | “sheet” | “automatic”",
@@ -574,36 +631,33 @@
             }
           ]
         },
+        {
+          "name": "selection"
+        },
+        {
+          "name": "searchable",
+          "description": "Value Type: boolean"
+        },
+        {
+          "name": "current-value-label"
+        },
+        {
+          "name": "current-value-icon"
+        },
         {
           "name": "help",
-          "description": "\nDescription: Adds a help tooltip to the trigger of the picker, if style supports one"
+          "description": "Adds a help tooltip to the trigger of the picker, if style supports one"
         },
         {
           "name": "dictionary",
-          "description": "Value Type: “DictEntry[]”\n\nDescription: Renders all options using this array",
-          "values": [
-            {
-              "name": "DictEntry[]"
-            }
-          ]
+          "description": "Value Type: Array.<DictEntry>\nDescription: Renders all options using this array"
         },
         {
-          "name": "label-value-placement",
-          "description": "Value Type: “vertical” | “horizontal” | “auto”",
-          "values": [
-            {
-              "name": "vertical"
-            },
-            {
-              "name": "horizontal"
-            },
-            {
-              "name": "auto"
-            }
-          ]
+          "name": "required",
+          "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    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    dictionary?: 'DictEntry[]' // Renders all options using this array\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\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  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",
@@ -628,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",
@@ -670,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",
@@ -692,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",
@@ -786,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",
@@ -860,6 +914,10 @@
       ],
       "description": "A control that displays an editable text area.\n---\n\n```ts\ninterface TextFieldSignature {\n  Attributes: {\n    prompt?: string\n    minimum?: string\n    maximum?: string\n    'min-length'?: string\n    'max-length'?: string\n    label?: string\n    name?: string\n    text?: string\n    'text-input-autocapitalization'?: string\n    'disable-autocorrection'?: boolean\n    'keyboard-type'?: 'decimal-pad' | 'number-pad' | 'default'\n    required?: boolean\n    disabled?: boolean\n  }\n\n  Slots: {\n    label: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass TextField extends HTMLElement<TextFieldSignature> {\n  static formAssociated = true\n\n  readonly keyboardType: 'decimal-pad' | 'number-pad' | 'default'\n  text: string\n  readonly name: string // Form participation property\n  readonly value: string\n  readonly valueAsNumber: number | ''\n  readonly negativeNumbersAllowed: boolean\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  commit: CustomEvent<{ detail: { text: string } }> // Triggered when user interacts with the input area\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'text-field': TextField // <text-field></text-field>\n  }\n}\n\n```\n"
     },
+    {
+      "name": "text-view",
+      "description": "undefined\n\n```ts\ninterface TextViewSignature {}\n\nclass TextView extends HTMLElement<TextViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'text-view': TextView // <text-view></text-view>\n  }\n}\n\n```\n"
+    },
     {
       "name": "toggle-view",
       "references": [
@@ -897,7 +955,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "description": "A control that switches between on and off states.\n---\n\n```ts\ninterface ToggleViewSignature {\n  Attributes: {\n    label?: string\n    name?: string\n    value?: string\n    'is-on'?: boolean\n    required?: boolean\n    disabled?: boolean\n  }\n\n  Slots: {\n    label: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass ToggleView extends HTMLElement<ToggleViewSignature> {\n  static formAssociated = true\n\n  readonly toggleStyle: 'button' | 'switch'\n  isOn: boolean\n  readonly name: string // Form participation property\n  value: string | null\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  'toggle:change': CustomEvent // User toggled the control\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'toggle-view': ToggleView // <toggle-view></toggle-view>\n  }\n}\n\n```\n"
+      "description": "A control that switches between on and off states.\n---\n\n```ts\ninterface ToggleViewSignature {\n  Attributes: {\n    label?: string\n    name?: string\n    value?: string\n    'is-on'?: boolean\n    required?: boolean\n    disabled?: boolean\n  }\n\n  Slots: {\n    label: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass ToggleView extends HTMLElement<ToggleViewSignature> {\n  static formAssociated = true\n\n  readonly toggleStyle: 'button' | 'switch'\n  isOn: boolean\n  readonly name: string // Form participation property\n  value: string | null\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  'toggle:change': CustomEvent // User toggled the control\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'toggle-view': ToggleView // <toggle-view></toggle-view>\n  }\n}\n\n```\n\n### **Examples:**\n**Creates a toggle that displays a custom label:**\n```html\n<toggle-view label=\"Custom Label\"></toggle-view>\n\n```\n"
     },
     {
       "name": "tool-bar-item-group",
@@ -940,6 +998,27 @@
       ],
       "description": "A list of items placed into the toolbar or navigation bar around your content.\n---\n\n```ts\ninterface ToolBarSignature {\n  Slots: {\n    'cancellation-action': HTMLElement[] // The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal\n    'primary-action': HTMLElement[] // The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal\n    'confirmation-action': HTMLElement[] // The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal\n    'destructive-action': HTMLElement[] // The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal\n    'top-bar-leading': HTMLElement[] // Places the item in the leading edge of the top bar\n    'top-bar-principal': HTMLElement[] // Places the item in the middle of the top bar\n    'top-bar-trailing': HTMLElement[] // Places the item in the trailing edge of the top bar\n    'bottom-bar-leading': HTMLElement[] // Places the item in the leading edge of the bottom bar\n    'bottom-bar-principal': HTMLElement[] // Places the item in the middle of the bottom bar\n    'bottom-bar-trailing': HTMLElement[] // Places the item in the trailing edge of the bottom bar\n  }\n}\n\nclass ToolBar extends HTMLElement<ToolBarSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tool-bar': ToolBar // <tool-bar></tool-bar>\n  }\n}\n\n```\n"
     },
+    {
+      "name": "v-divider",
+      "description": "undefined\n\n```ts\ninterface VDividerSignature {}\n\nclass VDivider extends HTMLElement<VDividerSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-divider': VDivider // <v-divider></v-divider>\n  }\n}\n\n```\n"
+    },
+    {
+      "name": "v-flex-stack",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/v-flex-stack"
+        }
+      ],
+      "attributes": [
+        {
+          "name": "template",
+          "description": "\nDescription: The main-axis grid template",
+          "valueSet": "Template"
+        }
+      ],
+      "description": "A view that arranges its children one on top of the other.\n---\n\n```ts\ninterface VFlexStackSignature {\n  Attributes: {\n    template?: Template // The main-axis grid template\n  }\n}\n\nclass VFlexStack extends HTMLElement<VFlexStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-flex-stack': VFlexStack // <v-flex-stack></v-flex-stack>\n  }\n}\n\n```\n"
+    },
     {
       "name": "v-keyboard",
       "references": [
@@ -1053,6 +1132,11 @@
       "name": "frame:max-width",
       "description": "Sets max-inline-size",
       "valueSet": "FrameInlineLength"
+    },
+    {
+      "name": "background-style",
+      "description": "Overrides the context-aware styles for background colors",
+      "valueSet": "BackgroundStyle"
     }
   ],
   "valueSets": [
@@ -1354,6 +1438,14 @@
     {
       "name": "Foreground",
       "values": [
+        {
+          "name": "black",
+          "description": "Applies the system black color (`--black`)"
+        },
+        {
+          "name": "white",
+          "description": "Applies the system white color (`--white`)"
+        },
         {
           "name": "primary",
           "description": "Applies the system primary color (`--primary`)"
@@ -2598,6 +2690,15 @@
           "description": "100cqi"
         }
       ]
+    },
+    {
+      "name": "BackgroundStyle",
+      "values": [
+        {
+          "name": "initial",
+          "description": "Reverts any background styles applied to this element, usually by context-aware rules like for example the inset-grouped-list styling applied to all descendants of current view"
+        }
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.99",
+  "version": "1.0.0-canary.0",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -21,8 +21,8 @@
   "files": [
     "generated",
     "scss",
-    "web-components.html-data",
-    "web-components.css-data"
+    "html-data",
+    "css-data"
   ],
   "sass": "scss/index.scss",
   "keywords": [
@@ -52,8 +52,8 @@
     "./scss": "./scss/index.scss",
     "./scss/*": "./scss/*.scss",
     "./customElements/en": "./custom-elements/en.json",
-    "./webComponentsHTMLData/en": "./web-components.html-data/en.json",
-    "./webComponentsCSSData/en": "./web-components.css-data/en.json"
+    "./HTMLData/en": "./html-data/en.json",
+    "./CSSData/en": "./css-data/en.json"
   },
   "bin": {
     "swiftwc": "./generated/index.js"
@@ -65,25 +65,28 @@
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
-    "build:manifest": "tsx scripts/make-manifest.ts && prettier ./web-components.html-data/en.json && prettier ./web-components.css-data/en.json --write",
-    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:morphdom && npm run build:barrels:i18n",
+    "build:manifest": "tsx scripts/make-manifest.ts && prettier ./html-data/en.json && prettier ./css-data/en.json --write",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n && npm run build:barrels:tpl && npm run build:barrels:morphdom && npm run build:barrels:decorators && npm run build:barrels:utils",
     "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
     "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
-    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
-    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses --exclude \".\\.test\\.ts\"",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales --exclude \".\\.test\\.ts\"",
     "build:barrels:tpl": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/tpl --exclude \".\\.test\\.ts\"",
     "build:barrels:morphdom": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/morphdom --exclude \".\\.test\\.ts\"",
-    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
+    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators --exclude \".\\.test\\.ts\"",
+    "build:barrels:utils": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/utils --exclude \".\\.test\\.ts\"",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "lint:scripts": "tsc -p tsconfig.scripts.json --noEmit",
     "test": "vitest --dom",
     "prepackage": "rm -rf generated",
-    "package": "npm run build:ts && npm run build:scss",
+    "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": {
     "doctrine": "^3.0.0",
+    "element-internals-polyfill": "^3.0.2",
     "gonzales-pe": "^4.3.0",
     "happy-dom": "^20.7.0",
     "sass": "^1.98.0",

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/_maps.scss

@@ -1,4 +1,4 @@
-$picker-styles-names: menu, navigation-link, sheet;
+$picker-styles-names: menu, navigation-link, sheet, radio-group;
 $label-styles-names: icon-only, title-only, title-and-icon;
 $list-styles-names: inset, inset-grouped, sidebar;
 $form-styles-names: inset, inset-grouped, sidebar;
@@ -263,6 +263,8 @@ $button-sizes-map: (
 $tint-names: gray, blue, red, green, orange, purple;
 
 $foreground-tokens: (
+  black: --black,
+  white: --white,
   primary: --primary,
   secondary: --secondary,
   blue: --blue,

package/scss/_utils.scss

@@ -6,4 +6,6 @@
 
 @forward 'utils/spacing';
 
-@forward 'utils/scroll-view';
+// @forward 'utils/scroll-view';
+
+@forward 'utils/background';

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;
@@ -133,33 +135,6 @@
     }
   }
 
-  // label {
-  //   // remove this
-  //   display: inline-grid;
-  //   position: relative;
-  //   // min-height: var(--toolbar-cell-min-size);
-  //   // min-width: var(--toolbar-cell-min-size);
-  //   // container-type: inline-size;
-
-  //   grid-template-columns: minmax(0, 1fr);
-  //   grid-template-rows: minmax(0, 1fr);
-
-  //   place-content: center;
-  //   place-items: center;
-  //   // line-height: 1;
-
-  //   > svg {
-  //     display: inline-grid;
-  //     width: 2rem;
-  //     height: 2rem;
-  //   }
-
-  //   > i {
-  //     display: inline-grid;
-  //     font-size: 2rem;
-  //   }
-  // }
-
   $CONFIG: (
     vt-fwd-class-name: vars.$vt-fwd-class-name,