@swiftwc/ui 0.0.0-dev.92 → 0.0.0-dev.94

package/generated/events/tab-view.d.ts

@@ -14,15 +14,31 @@ export type TabViewAdaptableTabBarPlacementDetail = {
     oldValue?: TabBarPlacement;
     newValue?: TabBarPlacement;
 };
+export interface TabshowEvent extends CustomEvent<TabDetail> {
+}
+export interface TabhideEvent extends CustomEvent<TabDetail> {
+}
+export interface TabrevealEvent extends CustomEvent<TabDetail> {
+}
+export interface TabswapEvent extends CustomEvent<TabDetail> {
+}
+export interface BeforetabrevealEvent extends CustomEvent<TabBeforeDetail> {
+}
+export interface BeforetabswapEvent extends CustomEvent<TabBeforeDetail> {
+}
+export interface TabViewToggleEvent extends CustomEvent<TabViewDetail> {
+}
+export interface TabViewAdaptableTabBarPlacementChangeEvent extends CustomEvent<TabViewAdaptableTabBarPlacementDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        tabshow: CustomEvent<TabDetail>;
-        tabhide: CustomEvent<TabDetail>;
-        tabreveal: CustomEvent<TabDetail>;
-        tabswap: CustomEvent<TabDetail>;
-        beforetabreveal: CustomEvent<TabBeforeDetail>;
-        beforetabswap: CustomEvent<TabBeforeDetail>;
-        'tab-view:toggle': CustomEvent<TabViewDetail>;
-        'tab-view:adaptable-tab-bar-placement-change': CustomEvent<TabViewAdaptableTabBarPlacementDetail>;
+        tabshow: TabshowEvent;
+        tabhide: TabhideEvent;
+        tabreveal: TabrevealEvent;
+        tabswap: TabswapEvent;
+        beforetabreveal: BeforetabrevealEvent;
+        beforetabswap: BeforetabswapEvent;
+        'tab-view:toggle': TabViewToggleEvent;
+        'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
     }
 }

package/generated/events/text-field.d.ts

@@ -1,8 +1,10 @@
 export type TextFieldCommitDetail = {
     text: string;
 };
+export interface TextFieldCommitEvent extends CustomEvent<TextFieldCommitDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        commit: CustomEvent<TextFieldCommitDetail>;
+        commit: TextFieldCommitEvent;
     }
 }

package/generated/events/text-field.js

@@ -1,4 +1 @@
 export {};
-// export interface TextFieldEventMap {
-//   commit: CustomEvent<TextFieldCommitDetail>
-// }

package/generated/events/toggle-view.d.ts

@@ -2,8 +2,10 @@ export type ToggleChangeDetail = {
     isOn: boolean;
     value: string | null;
 };
+export interface ToggleChangeEvent extends CustomEvent<ToggleChangeDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        'toggle:change': CustomEvent<ToggleChangeDetail>;
+        'toggle:change': ToggleChangeEvent;
     }
 }

package/generated/events/toggle-view.js

@@ -1,4 +1 @@
 export {};
-// export interface ToggleViewEventMap {
-//   'toggle:change': CustomEvent<ToggleChangeDetail>
-// }

package/generated/internal/class/form-associated-base.js

@@ -29,7 +29,7 @@ export class FormAssociatedBase extends HTMLElement {
     }
     constructor() {
         super();
-        internals.set(this, this.attachInternals());
+        internals.set(this, this.attachInternals?.());
         // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {

package/generated/internal/utils/ensure-placeholder.js

@@ -1,63 +1,10 @@
 import { I18n } from '../../i18n';
 import { html, queryMorph } from '../../morphdom';
-// type ButtonRole = keyof ReturnType<typeof I18n.t<'ButtonRole'>>
-// function renderPlaceholder(el: HTMLElement, role: string | null, titleKey?: ButtonRole, config?: Record<string, string>) {
-//   // if (!el.isConnected) return
-//   // self.requestAnimationFrame(() => {
-//   //   if (!el.isConnected) return
-//   let title: string | undefined, systemImage: string | undefined
-//   // const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'))
-//   switch (role) {
-//     case 'cancel':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel)
-//       systemImage = config?.['cancel-button-icon'] ?? '' //label.setAttribute('system-image', config?.['cancel-button-icon'] ?? '')
-//       break
-//     case 'close':
-//       if (el.closest('[is=alert-dialog]')) {
-//         title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK //.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK)
-//       } else {
-//         title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close)
-//         systemImage = config?.['close-button-icon'] ?? '' //label.setAttribute('system-image', config?.['close-button-icon'] ?? '')
-//       }
-//       break
-//     case 'confirm':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm)
-//       systemImage = config?.['confirm-button-icon'] ?? '' //label.setAttribute('system-image', config?.['confirm-button-icon'] ?? '')
-//       break
-//     case 'confirmation-action':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm)
-//       systemImage = config?.['confirm-button-icon'] ?? '' //label.setAttribute('system-image', config?.['confirm-button-icon'] ?? '')
-//       break
-//     case 'cancellation-action':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel)
-//       systemImage = config?.['cancel-button-icon'] ?? '' //label.setAttribute('system-image', config?.['cancel-button-icon'] ?? '')
-//       break
-//     case 'destructive':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive // label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive)
-//       systemImage = config?.['delete-button-icon'] ?? '' // label.setAttribute('system-image', config?.['delete-button-icon'] ?? '')
-//       break
-//     // default:
-//     //   label?.remove()
-//     //   break
-//   }
-//   queryMorph(
-//     '[slot=placeholder]',
-//     html`<label-view slot="placeholder">${systemImage ? html`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? html`<span>${title}</span>` : null}</label-view>`,
-//     el,
-//     { removeIf: !title }
-//   )
-//   // if (role) {
-//   //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
-//   // } else label?.remove()
-//   // })
-// }
 export default function (target, role, titleKey, config) {
     if (!target)
         return;
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
-    // renderPlaceholder(target, role, overiderTitle, config)
     let title, systemImage;
-    // const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'))
     switch (role) {
         case 'cancel':
             title = overiderTitle && overiderTitle in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[overiderTitle] : I18n.t('ButtonRole').Cancel;
@@ -90,6 +37,4 @@ export default function (target, role, titleKey, config) {
             break;
     }
     queryMorph('[slot=placeholder]', html `<label-view slot="placeholder">${systemImage ? html `<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? html `<span>${title}</span>` : null}</label-view>`, target, { removeIf: !title });
-    // CleanupRegistry.unregister(target, 'i18n')
-    // CleanupRegistry.register(target, onoff('localechange', () => renderPlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n')
 }

package/generated/internal/utils/kebab-case.js

@@ -1,11 +1,8 @@
 export default function (str) {
-    return (str
-        // Replace uppercase letters with - + lowercase
-        .replace(/([A-Z])/g, '-$1')
-        // Replace spaces and underscores with -
-        .replace(/[\s_]+/g, '-')
-        // Convert to lowercase
-        .toLowerCase()
-        // Remove leading/trailing dashes
-        .replace(/^-+|-+$/g, ''));
+    return str
+        .replace(/([A-Z])/g, '-$1') // Replace uppercase letters with - + lowercase
+        .replace(/[\s_]+/g, '-') // Replace spaces and underscores with -
+        .replace(/-+/g, '-') // collapse any run of dashes into one
+        .toLowerCase() // Convert to lowercase
+        .replace(/^-+|-+$/g, ''); // Remove leading/trailing dashes
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.92",
+  "version": "0.0.0-dev.94",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_components.scss

@@ -21,7 +21,7 @@
 
 @forward 'components/sheet-view';
 
-@forward 'components/content-unavailable-view';
+@forward 'components/content-unavailable';
 
 @forward 'components/confirmation-dialog';
 @forward 'components/alert-dialog';

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

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

package/scss/components/_index.scss

@@ -7,6 +7,7 @@
   navigation-stack,
   navigation-split-view,
   navigation-large-title,
+  navigation-title,
   scroll-view,
   body-view,
   tab-view,
@@ -30,7 +31,7 @@
   [is='glass-prominent-button'],
   list-view,
   table-view,
-  content-unavailable-view,
+  content-unavailable,
   progress-view,
   tool-bar-item,
   tool-bar-item-group,
@@ -59,9 +60,9 @@
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
-  :where(content-unavailable-view)::part(content-unavailable-title-stack),
-  :where(content-unavailable-view)::part(content-unavailable-description-stack),
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),

package/scss/components/_labeled-content.scss

@@ -1,4 +1,6 @@
+@use 'sass:string';
 @use '../vars';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   labeled-content {
@@ -61,6 +63,12 @@
     > [slot='footer'] {
       :where(&) {
         color: var(--secondary);
+
+        --label-font: callout;
+
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          @include mixins.set-label-font(callout);
+        }
       }
     }
   }

package/scss/components/_navigation-title.scss

@@ -4,7 +4,7 @@
 @layer #{vars.$components-layer} {
   navigation-title {
     :where(&) {
-      display: grid; //contents;
+      // display: grid; //contents;
     }
   }
 }

package/scss/components/_toggle-view.scss

@@ -12,7 +12,7 @@
       --toggle--trigger-bg: lightgray;
 
       &::part(toggle-stack) {
-        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: minmax(0, 1fr) auto;
 
         grid-template-rows: minmax(0, 1fr);
 

package/web-components.html-data/en.json

@@ -9,10 +9,16 @@
           "url": "https://swiftwc.github.io/ui/web-components/alert-dialog"
         }
       ],
-      "description": "A representation of an alert presentation.\nUse it from the client module like `void alert('Save failed.')`.\n---"
+      "description": ""
     },
     {
       "name": "body-view",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/body-view"
+        }
+      ],
       "description": ""
     },
     {
@@ -23,7 +29,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/bordered-button"
         }
       ],
-      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Creating a menu from a configuration:**\n```html\n<button is=\"bordered-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
+      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Creating a bordered button:**\n```html\n<button is=\"bordered-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
       "attributes": [
         {
           "name": "role",
@@ -50,7 +56,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/bordered-prominent-button"
         }
       ],
-      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Example:**\n```html\n<button is=\"bordered-prominent-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
+      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Creating a prominent bordered button:**\n```html\n<button is=\"bordered-prominent-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
       "attributes": [
         {
           "name": "role",
@@ -77,7 +83,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/borderless-button"
         }
       ],
-      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Example:**\n```html\n<button is=\"borderless-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
+      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Use the `is` attribute to style a `button` as a `borderless-button`:**\n```html\n<button is=\"borderless-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
       "attributes": [
         {
           "name": "role",
@@ -121,14 +127,14 @@
       "description": "A representation of a confirmation presentation.\nUse it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.\n---"
     },
     {
-      "name": "content-unavailable-view",
+      "name": "content-unavailable",
       "references": [
         {
           "name": "Documentation",
-          "url": "https://swiftwc.github.io/ui/web-components/content-unavailable-view"
+          "url": "https://swiftwc.github.io/ui/web-components/content-unavailable"
         }
       ],
-      "description": "### **Slots:**\n- _default_ — The default slot.\n- **description**\n- **actions**\n\n### **Examples:**\n**Example:**\n```html\n<content-unavailable-view search></content-unavailable-view>\n\n```\n**Example:**\n```html\n<content-unavailable-view search=\"foo\"></content-unavailable-view>\n\n```\n**Example:**\n```html\n<content-unavailable-view 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-view>\n\n```\n**Example:**\n```html\n<content-unavailable-view 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-view>\n\n```",
+      "description": "### **Slots:**\n- _default_ — The default slot.\n- **description**\n- **actions**\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```",
       "attributes": [
         {
           "name": "search"
@@ -143,7 +149,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/date-picker"
         }
       ],
-      "description": "### **Properties:**\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",
+      "description": "### **Properties:**\n- readonly **template** — DocumentFragment\n- readonly **datePickerStyle** — \"graphical\" | \"field\" | \"automatic\"\n- readonly **name** — string\n- readonly **value** — { year: string; month: string; day: string; }\n- readonly **valueAsDate** — Date | null\n- readonly **minimum** — { year: string; month: string; day: string; } | null\n- readonly **maximum** — { year: string; month: string; day: string; } | null",
       "attributes": [
         {
           "name": "date-picker-style",
@@ -161,7 +167,13 @@
           ]
         },
         {
-          "name": "required"
+          "name": "required",
+          "description": "Value Type: “required”",
+          "values": [
+            {
+              "name": "required"
+            }
+          ]
         },
         {
           "name": "prompt"
@@ -176,7 +188,13 @@
           "name": "selection"
         },
         {
-          "name": "disabled"
+          "name": "disabled",
+          "description": "Value Type: “disabled”",
+          "values": [
+            {
+              "name": "disabled"
+            }
+          ]
         },
         {
           "name": "minimum"
@@ -235,7 +253,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/glass-button"
         }
       ],
-      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Example:**\n```html\n<button is=\"glass-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
+      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Creating a glass button:**\n```html\n<button is=\"glass-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
       "attributes": [
         {
           "name": "role",
@@ -262,7 +280,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/glass-prominent-button"
         }
       ],
-      "description": "### **Slots:**\n- **overlay**\n\n### **Examples:**\n**Example:**\n```html\n<button is=\"glass-prominent-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```",
+      "description": "### **Slots:**\n- **overlay**\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```",
       "attributes": [
         {
           "name": "role",
@@ -282,11 +300,11 @@
       ]
     },
     {
-      "name": "hstack",
+      "name": "h-stack",
       "references": [
         {
           "name": "Documentation",
-          "url": "https://swiftwc.github.io/ui/web-components/hstack"
+          "url": "https://swiftwc.github.io/ui/web-components/h-stack"
         }
       ],
       "description": "",
@@ -338,6 +356,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/label-view"
         }
       ],
+      "description": "### **Slots:**\n- _default_ — Any children without a `slot` attribute are placed in the title block of the label.\n- **icon** — Use the `slot=\"icon\"` attribute to place childen in the icon block of the label.\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```",
       "attributes": [
         {
           "name": "font",
@@ -354,10 +373,15 @@
           "name": "line-limit"
         },
         {
-          "name": "truncation-mode"
+          "name": "truncation-mode",
+          "description": "Value Type: “tail”",
+          "values": [
+            {
+              "name": "tail"
+            }
+          ]
         }
-      ],
-      "description": "### **Slots:**\n- _default_ — The default slot.\n- **icon**"
+      ]
     },
     {
       "name": "labeled-content",
@@ -375,7 +399,16 @@
           "name": "footer"
         },
         {
-          "name": "labeled-content-style"
+          "name": "labeled-content-style",
+          "description": "Value Type: “vertical” | “horizontal”",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            }
+          ]
         },
         {
           "name": "format"
@@ -475,6 +508,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/picker-view"
         }
       ],
+      "description": "### **Slots:**\n- _default_ — The default slot.\n- **label**\n- **list**\n- **validity-options**\n\n### **Properties:**\n- **selection** — string\n- readonly **template** — DocumentFragment\n- readonly **pickerStyle** — \"automatic\" | \"menu\" | \"inline\" | \"navigation-link\" | \"sheet\"\n- readonly **name** — string",
       "attributes": [
         {
           "name": "picker-style",
@@ -530,8 +564,7 @@
             }
           ]
         }
-      ],
-      "description": "### **Slots:**\n- _default_ — The default slot.\n- **label**\n- **list**\n- **validity-options**\n\n### **Properties:**\n- **selection** — string\n- readonly **template** — DocumentFragment\n- readonly **pickerStyle** — \"automatic\" | \"menu\" | \"inline\" | \"navigation-link\" | \"sheet\"\n- readonly **name** — string Form participation property"
+      ]
     },
     {
       "name": "plain-button",
@@ -700,7 +733,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/text-field"
         }
       ],
-      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\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",
+      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **keyboardType** — \"decimal-pad\" | \"number-pad\" | \"default\"\n- **text** — string\n- readonly **name** — string\n- readonly **value** — string\n- readonly **valueAsNumber** — number | \"\"\n- readonly **negativeNumbersAllowed** — boolean",
       "attributes": [
         {
           "name": "prompt"
@@ -730,16 +763,41 @@
           "name": "text-input-autocapitalization"
         },
         {
-          "name": "disable-autocorrection"
+          "name": "disable-autocorrection",
+          "description": ""
         },
         {
-          "name": "keyboard-type"
+          "name": "keyboard-type",
+          "description": "Value Type: “decimal-pad” | “number-pad” | “default”",
+          "values": [
+            {
+              "name": "decimal-pad"
+            },
+            {
+              "name": "number-pad"
+            },
+            {
+              "name": "default"
+            }
+          ]
         },
         {
-          "name": "required"
+          "name": "required",
+          "description": "Value Type: “required”",
+          "values": [
+            {
+              "name": "required"
+            }
+          ]
         },
         {
-          "name": "disabled"
+          "name": "disabled",
+          "description": "Value Type: “disabled”",
+          "values": [
+            {
+              "name": "disabled"
+            }
+          ]
         }
       ]
     },
@@ -751,6 +809,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/toggle-view"
         }
       ],
+      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **toggleStyle** — \"button\" | \"switch\"\n- **isOn** — boolean\n- readonly **name** — string\n- **value** — string | null\n\n### **Events:**\n- **toggle:change** — User toggled the control",
       "attributes": [
         {
           "name": "label"
@@ -773,8 +832,7 @@
         {
           "name": "disabled"
         }
-      ],
-      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **toggleStyle** — \"button\" | \"switch\"\n- **isOn** — boolean\n- readonly **name** — string Form participation property\n- **value** — string | null"
+      ]
     },
     {
       "name": "tool-bar-item-group",
@@ -818,11 +876,11 @@
       "description": "### **Slots:**\n- **cancellation-action** — 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** — 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** — 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** — 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** — Places the item in the leading edge of the top bar\n- **top-bar-principal** — Places the item in the middle of the top bar\n- **top-bar-trailing** — Places the item in the trailing edge of the top bar\n- **bottom-bar-leading** — Places the item in the leading edge of the bottom bar\n- **bottom-bar-principal** — Places the item in the middle of the bottom bar\n- **bottom-bar-trailing** — Places the item in the trailing edge of the bottom bar"
     },
     {
-      "name": "vkeyboard",
+      "name": "v-keyboard",
       "references": [
         {
           "name": "Documentation",
-          "url": "https://swiftwc.github.io/ui/web-components/vkeyboard"
+          "url": "https://swiftwc.github.io/ui/web-components/v-keyboard"
         }
       ],
       "description": "BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.\nSo we live with a pescy body-scrollbar that shows up on resize on desktops.\n---",
@@ -839,11 +897,11 @@
       ]
     },
     {
-      "name": "vstack",
+      "name": "v-stack",
       "references": [
         {
           "name": "Documentation",
-          "url": "https://swiftwc.github.io/ui/web-components/vstack"
+          "url": "https://swiftwc.github.io/ui/web-components/v-stack"
         }
       ],
       "description": "",

package/generated/components/content-unavailable-view.d.ts

@@ -1,25 +0,0 @@
-/**
- * @summary A message with a title and extra information that you show when part of your app can’t be used.
- *
- * @example <content-unavailable-view search></content-unavailable-view>
- *
- * @example <content-unavailable-view search="foo"></content-unavailable-view>
- *
- * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
- *
- * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
- *
- * @slot — The default slot.
- * @slot description
- * @slot actions
- *
- */
-export declare class ContentUnavailableView extends HTMLElement {
-    #private;
-    static get observedAttributes(): string[];
-    static get template(): DocumentFragment;
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}