@swiftwc/ui 1.0.1-canary.3 → 1.0.1-canary.4

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

@@ -1,5 +1,7 @@
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ *
+ * @slot — The default slot
  */
 export declare class ContentView extends HTMLElement {
     constructor();

package/generated/components/content-view.js

@@ -1,6 +1,8 @@
 import { debug } from '../internal/utils';
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ *
+ * @slot — The default slot
  */
 export class ContentView extends HTMLElement {
     constructor() {

package/generated/components/date-picker.d.ts

@@ -3,6 +3,8 @@ declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
 export type DatePickerStyle = (typeof datePickerStyles)[number];
 /**
  * @summary A control that selects an absolute date.
+ *
+ * @slot — The default slot
  */
 export declare class DatePicker extends FormAssociatedBase {
     #private;

package/generated/components/date-picker.js

@@ -8,6 +8,8 @@ import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 /**
  * @summary A control that selects an absolute date.
+ *
+ * @slot — The default slot
  */
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {

package/generated/components/detail-placeholder.d.ts

@@ -1,3 +1,7 @@
+/**
+ *
+ * @slot — The default slot
+ */
 export declare class DetailPlaceholder extends HTMLElement {
     constructor();
     connectedCallback(): void;

package/generated/components/detail-placeholder.js

@@ -1,4 +1,8 @@
 import { debug } from '../internal/utils';
+/**
+ *
+ * @slot — The default slot
+ */
 export class DetailPlaceholder extends HTMLElement {
     constructor() {
         super();

package/generated/components/disclosure-group.d.ts

@@ -4,6 +4,8 @@ import { DetailsBase } from '../namespace-browser/base';
  *
  * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details> — Use the `is` attribute to convert a `details` element into a disclosure group
  *
+ * @slot — The default slot
+ *
  * @fires is-expanded
  * @fires is-collapsed
  */

package/generated/components/disclosure-group.js

@@ -7,6 +7,8 @@ const toggleTimers = new WeakMap();
  *
  * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details> — Use the `is` attribute to convert a `details` element into a disclosure group
  *
+ * @slot — The default slot
+ *
  * @fires is-expanded
  * @fires is-collapsed
  */

package/generated/components/form-view.d.ts

@@ -2,6 +2,8 @@ import { FormBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups controls together for entering data, like a settings screen.
  *
+ * @slot — The default slot
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export declare class FormView extends FormBase {

package/generated/components/form-view.js

@@ -4,6 +4,8 @@ import { FormBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups controls together for entering data, like a settings screen.
  *
+ * @slot — The default slot
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export class FormView extends FormBase {

package/generated/components/h-flex-stack.d.ts

@@ -3,6 +3,8 @@
  *
  * @attr {@Spacing} spacing — The gap between the primary axis
  *
+ * @slot — The default slot
+ *
  */
 export declare class HFlexStack extends HTMLElement {
     constructor();

package/generated/components/h-flex-stack.js

@@ -4,6 +4,8 @@ import { debug } from '../internal/utils';
  *
  * @attr {@Spacing} spacing — The gap between the primary axis
  *
+ * @slot — The default slot
+ *
  */
 export class HFlexStack extends HTMLElement {
     constructor() {

package/generated/components/h-stack.d.ts

@@ -9,6 +9,8 @@
  * @attr {@inlineSet} distribution — The main-axis alignment
  * @attr {@inlinePlacementSet} placement — The main-axis alignment
  *
+ * @slot — The default slot
+ *
  */
 export declare class HStack extends HTMLElement {
     constructor();

package/generated/components/h-stack.js

@@ -10,6 +10,8 @@ import { debug } from '../internal/utils';
  * @attr {@inlineSet} distribution — The main-axis alignment
  * @attr {@inlinePlacementSet} placement — The main-axis alignment
  *
+ * @slot — The default slot
+ *
  */
 export class HStack extends HTMLElement {
     constructor() {

package/generated/components/image-view.d.ts

@@ -1,6 +1,9 @@
 /**
  * @summary A view that displays an image.
  *
+ *
+ * @slot — The default slot
+ *
  */
 export declare class ImageView extends HTMLElement {
     #private;

package/generated/components/image-view.js

@@ -4,6 +4,9 @@ import { html } from '../tpl';
 /**
  * @summary A view that displays an image.
  *
+ *
+ * @slot — The default slot
+ *
  */
 export class ImageView extends HTMLElement {
     static get observedAttributes() {

package/generated/components/list-view.d.ts

@@ -4,6 +4,8 @@
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
  * @attr {sidebar} preferred-root-disclosure-style
  *
+ * @slot — The default slot
+ *
  * @cssprop {length} --list-row-gap — The gap between rows
  * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */

package/generated/components/list-view.js

@@ -6,6 +6,8 @@ import { debug, listActive, onoff } from '../internal/utils';
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
  * @attr {sidebar} preferred-root-disclosure-style
  *
+ * @slot — The default slot
+ *
  * @cssprop {length} --list-row-gap — The gap between rows
  * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */

package/generated/components/navigation-large-title.d.ts

@@ -3,6 +3,7 @@
  * @attr {boolean} padding
  * @attr {boolean} navigation-bar-auto-hide
  *
+ * @slot — The default slot
  */
 export declare class NavigationLargeTitle extends HTMLElement {
     #private;

package/generated/components/navigation-large-title.js

@@ -71,6 +71,7 @@ function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0p
  * @attr {boolean} padding
  * @attr {boolean} navigation-bar-auto-hide
  *
+ * @slot — The default slot
  */
 export class NavigationLargeTitle extends HTMLElement {
     #styleObserver;

package/generated/components/navigation-split-view.d.ts

@@ -1,6 +1,8 @@
 import { NavigationView } from '../internal/class/navigation-view';
 /**
  * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
+ *
+ * @slot — The default slot
  */
 export declare class NavigationSplitView extends NavigationView {
     constructor();

package/generated/components/navigation-split-view.js

@@ -2,6 +2,8 @@ import { NavigationView } from '../internal/class/navigation-view';
 import { debug } from '../internal/utils';
 /**
  * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
+ *
+ * @slot — The default slot
  */
 export class NavigationSplitView extends NavigationView {
     constructor() {

package/generated/components/navigation-stack.d.ts

@@ -1,6 +1,8 @@
 import { NavigationView } from '../internal/class/navigation-view';
 /**
  * @summary A container view that shows a main screen and lets the user open other screens on top of it.
+ *
+ * @slot — The default slot
  */
 export declare class NavigationStack extends NavigationView {
     constructor();

package/generated/components/navigation-stack.js

@@ -2,6 +2,8 @@ import { NavigationView } from '../internal/class/navigation-view';
 import { debug } from '../internal/utils';
 /**
  * @summary A container view that shows a main screen and lets the user open other screens on top of it.
+ *
+ * @slot — The default slot
  */
 export class NavigationStack extends NavigationView {
     constructor() {

package/generated/components/scroll-view-proxy.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary A wrapper for {hv}-stacks
+ *
+ * @slot — The default slot
  */
 export declare class ScrollViewProxy extends HTMLElement {
     constructor();

package/generated/components/scroll-view-proxy.js

@@ -1,6 +1,8 @@
 import { debug } from '../internal/utils';
 /**
  * @summary A wrapper for {hv}-stacks
+ *
+ * @slot — The default slot
  */
 export class ScrollViewProxy extends HTMLElement {
     constructor() {

package/generated/components/sheet-view.d.ts

@@ -1,6 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A dialog that slides up over the current screen.
+ *
+ * @slot — The default slot
  */
 export declare class SheetView extends DialogBase {
     #private;

package/generated/components/sheet-view.js

@@ -3,6 +3,8 @@ import { debug, onoff } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A dialog that slides up over the current screen.
+ *
+ * @slot — The default slot
  */
 export class SheetView extends DialogBase {
     constructor() {

package/generated/components/sidebar-toggle.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary A control that shows or hides the sidebar view.
+ *
+ * @slot — The default slot
  */
 export declare class SidebarToggle extends HTMLElement {
     #private;

package/generated/components/sidebar-toggle.js

@@ -4,6 +4,8 @@ import { debounce, debug, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A control that shows or hides the sidebar view.
+ *
+ * @slot — The default slot
  */
 export class SidebarToggle extends HTMLElement {
     constructor() {

package/generated/components/sidebar-view.d.ts

@@ -1,6 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A container view that arranges navigation destinations in a single column.
+ *
+ * @slot — The default slot
  */
 export declare class SidebarView extends DialogBase {
     #private;

package/generated/components/sidebar-view.js

@@ -3,6 +3,8 @@ import { debug, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A container view that arranges navigation destinations in a single column.
+ *
+ * @slot — The default slot
  */
 export class SidebarView extends DialogBase {
     constructor() {

package/generated/components/tab-bar.d.ts

@@ -1,6 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups tab-items together along the top or bottom of the screen.
+ *
+ * @slot — The default slot
  */
 export declare class TabBar extends DialogBase {
     #private;

package/generated/components/tab-bar.js

@@ -3,6 +3,8 @@ import { debug, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups tab-items together along the top or bottom of the screen.
+ *
+ * @slot — The default slot
  */
 export class TabBar extends DialogBase {
     constructor() {

package/generated/components/tab-item.d.ts

@@ -1,6 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
  * @summary A control that switches the tab view to this tab.
+ *
+ * @slot — The default slot
  */
 export declare class TabItem extends ButtonBase {
     #private;

package/generated/components/tab-item.js

@@ -4,6 +4,8 @@ import { ButtonBase } from '../namespace-browser/base';
 import { TabView } from './tab-view';
 /**
  * @summary A control that switches the tab view to this tab.
+ *
+ * @slot — The default slot
  */
 export class TabItem extends ButtonBase {
     constructor() {

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

@@ -5,6 +5,8 @@ export type TabBarPlacement = (typeof TAB_BAR_PLACEMENTS)[number];
 /**
  * @summary A container view that switches between screens using tabs.
  *
+ * @slot — The default slot
+ *
  * @cssprop --adaptable-tab-bar-placement
  *
  * @fires tabshow — A Tab is shown

package/generated/components/tab-view.js

@@ -7,6 +7,8 @@ const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
 /**
  * @summary A container view that switches between screens using tabs.
  *
+ * @slot — The default slot
+ *
  * @cssprop --adaptable-tab-bar-placement
  *
  * @fires tabshow — A Tab is shown

package/generated/components/tool-bar-item-group.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary A container view that groups items together in the toolbar or navigation bar.
+ *
+ * @slot — The default slot
  */
 export declare class ToolBarItemGroup extends HTMLElement {
     constructor();

package/generated/components/tool-bar-item-group.js

@@ -10,6 +10,8 @@ import { adaptiveSlot } from '../internal/decorators';
 import { debug } from '../internal/utils';
 /**
  * @summary A container view that groups items together in the toolbar or navigation bar.
+ *
+ * @slot — The default slot
  */
 let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {

package/generated/components/tool-bar-item.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary A view placed in the toolbar or navigation bar.
+ *
+ * @slot — The default slot
  */
 export declare class ToolBarItem extends HTMLElement {
     #private;

package/generated/components/tool-bar-item.js

@@ -11,6 +11,8 @@ import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
  * @summary A view placed in the toolbar or navigation bar.
+ *
+ * @slot — The default slot
  */
 let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     static get observedAttributes() {

package/generated/components/v-flex-stack.d.ts

@@ -3,6 +3,8 @@
  *
  * @attr {@Template} template — The main-axis grid template
  *
+ * @slot — The default slot
+ *
  */
 export declare class VFlexStack extends HTMLElement {
     constructor();

package/generated/components/v-flex-stack.js

@@ -4,6 +4,8 @@ import { debug } from '../internal/utils';
  *
  * @attr {@Template} template — The main-axis grid template
  *
+ * @slot — The default slot
+ *
  */
 export class VFlexStack extends HTMLElement {
     constructor() {

package/generated/components/v-stack.d.ts

@@ -12,6 +12,8 @@
  * @attr {@blockSet} distribution — The main-axis alignment
  * @attr {@blockPlacementSet} placement — The main-axis alignment
  *
+ * @slot — The default slot
+ *
  */
 export declare class VStack extends HTMLElement {
     constructor();

package/generated/components/v-stack.js

@@ -13,6 +13,8 @@ import { debug } from '../internal/utils';
  * @attr {@blockSet} distribution — The main-axis alignment
  * @attr {@blockPlacementSet} placement — The main-axis alignment
  *
+ * @slot — The default slot
+ *
  */
 export class VStack extends HTMLElement {
     constructor() {

package/generated/css/index.css

@@ -3558,9 +3558,13 @@
     container: text-view/inline-size;
     --text-view--p-margin-block-start: 1rem;
   }
-  text-view[prose] p {
+  text-view[prose] p,
+  text-view[prose] hr {
     margin-block-start: var(--text-view--p-margin-block-start);
   }
+  text-view[prose] hr {
+    opacity: 10%;
+  }
   :where(text-view[prose] h1) {
     font-size: clamp(1rem, var(--text-view--h1-font-size) + 0.5rem, 3rem);
   }

package/html-data/en.json

@@ -139,7 +139,7 @@
           "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"
+      "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  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\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",
@@ -198,11 +198,17 @@
           "name": "maximum"
         }
       ],
-      "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"
+      "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  Slots: {\n    default: HTMLElement[] // The default slot\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"
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/detail-placeholder"
+        }
+      ],
+      "description": "undefined\n\n```ts\ninterface DetailPlaceholderSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\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",
@@ -218,7 +224,7 @@
           "description": "Value Type: boolean\nDescription: The status of this element"
         }
       ],
-      "description": "A view that shows or hides another view when the user opens or closes it.\n---\n\n```ts\ninterface DisclosureGroupSignature {\n  Attributes: {\n    open?: boolean // The status of this element\n  }\n}\n\nclass DisclosureGroup extends HTMLDetailsElement<DisclosureGroupSignature> {}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  'is-expanded': CustomEvent\n  'is-collapsed': CustomEvent\n}\n\ndeclare global {\n  interface HTMLDetailsElement {\n    is: 'disclosure-group' // <details is=\"disclosure-group\"></details>\n  }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to convert a `details` element into a disclosure group:**\n```html\n<details is=\"disclosure-group\">\n  <summary><label-view title=\"Items\"></label-view></summary>\n  <label-view title=\"Item 1\"></label-view>\n  <label-view title=\"Item 2\"></label-view>\n  <details is=\"disclosure-group\">\n    <summary><label-view title=\"Sub-items\"></label-view></summary>\n    <label-view title=\"Sub-item 1\"></label-view>\n  </details>\n</details>\n\n```\n"
+      "description": "A view that shows or hides another view when the user opens or closes it.\n---\n\n```ts\ninterface DisclosureGroupSignature {\n  Attributes: {\n    open?: boolean // The status of this element\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass DisclosureGroup extends HTMLDetailsElement<DisclosureGroupSignature> {}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  'is-expanded': CustomEvent\n  'is-collapsed': CustomEvent\n}\n\ndeclare global {\n  interface HTMLDetailsElement {\n    is: 'disclosure-group' // <details is=\"disclosure-group\"></details>\n  }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to convert a `details` element into a disclosure group:**\n```html\n<details is=\"disclosure-group\">\n  <summary><label-view title=\"Items\"></label-view></summary>\n  <label-view title=\"Item 1\"></label-view>\n  <label-view title=\"Item 2\"></label-view>\n  <details is=\"disclosure-group\">\n    <summary><label-view title=\"Sub-items\"></label-view></summary>\n    <label-view title=\"Sub-item 1\"></label-view>\n  </details>\n</details>\n\n```\n"
     },
     {
       "name": "fine-tooltip",
@@ -249,7 +255,7 @@
           ]
         }
       ],
-      "description": "A container view that groups controls together for entering data, like a settings screen.\n---\n\n```ts\ninterface FormViewSignature {\n  Attributes: {\n    'navigation-link-indicator-visibility'?: 'hidden' // Hides accessories like right-arrow-chevron on NavigationLink buttons inside.\n  }\n}\n\nclass FormView extends HTMLFormElement<FormViewSignature> {}\n\ndeclare global {\n  interface HTMLFormElement {\n    is: 'form-view' // <form is=\"form-view\"></form>\n  }\n}\n\n```\n"
+      "description": "A container view that groups controls together for entering data, like a settings screen.\n---\n\n```ts\ninterface FormViewSignature {\n  Attributes: {\n    'navigation-link-indicator-visibility'?: 'hidden' // Hides accessories like right-arrow-chevron on NavigationLink buttons inside.\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass FormView extends HTMLFormElement<FormViewSignature> {}\n\ndeclare global {\n  interface HTMLFormElement {\n    is: 'form-view' // <form is=\"form-view\"></form>\n  }\n}\n\n```\n"
     },
     {
       "name": "glass-button",
@@ -324,7 +330,7 @@
           "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"
+      "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  Slots: {\n    default: HTMLElement[] // The default slot\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",
@@ -361,7 +367,7 @@
           "valueSet": "inlinePlacementSet"
         }
       ],
-      "description": "A view that arranges its children side by side.\n---\n\n```ts\ninterface HStackSignature {\n  Attributes: {\n    template?: Template // The main-axis grid template\n    spacing?: Spacing // The gap between the primary axis\n    alignment?: blockSet // The cross-axis alignment\n    distribution?: inlineSet // The main-axis alignment\n    placement?: inlinePlacementSet // The main-axis alignment\n  }\n}\n\nclass HStack extends HTMLElement<HStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-stack': HStack // <h-stack></h-stack>\n  }\n}\n\n```\n"
+      "description": "A view that arranges its children side by side.\n---\n\n```ts\ninterface HStackSignature {\n  Attributes: {\n    template?: Template // The main-axis grid template\n    spacing?: Spacing // The gap between the primary axis\n    alignment?: blockSet // The cross-axis alignment\n    distribution?: inlineSet // The main-axis alignment\n    placement?: inlinePlacementSet // The main-axis alignment\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass HStack extends HTMLElement<HStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-stack': HStack // <h-stack></h-stack>\n  }\n}\n\n```\n"
     },
     {
       "name": "image-view",
@@ -379,7 +385,7 @@
           "name": "system-weight"
         }
       ],
-      "description": "A view that displays an image.\n---\n\n```ts\ninterface ImageViewSignature {\n  Attributes: {\n    'system-name'?: string\n    'system-weight'?: string\n  }\n}\n\nclass ImageView extends HTMLElement<ImageViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'image-view': ImageView // <image-view></image-view>\n  }\n}\n\n```\n"
+      "description": "A view that displays an image.\n---\n\n```ts\ninterface ImageViewSignature {\n  Attributes: {\n    'system-name'?: string\n    'system-weight'?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass ImageView extends HTMLElement<ImageViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'image-view': ImageView // <image-view></image-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "label-view",
@@ -479,7 +485,7 @@
           ]
         }
       ],
-      "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"
+      "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  Slots: {\n    default: HTMLElement[] // The default slot\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",
@@ -520,7 +526,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "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"
+      "description": "undefined\n\n```ts\ninterface NavigationLargeTitleSignature {\n  Attributes: {\n    padding?: boolean\n    'navigation-bar-auto-hide'?: boolean\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\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",
@@ -530,7 +536,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/navigation-split-view"
         }
       ],
-      "description": "A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.\n---\n\n```ts\ninterface NavigationSplitViewSignature {}\n\nclass NavigationSplitView extends HTMLElement<NavigationSplitViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-split-view': NavigationSplitView // <navigation-split-view></navigation-split-view>\n  }\n}\n\n```\n"
+      "description": "A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.\n---\n\n```ts\ninterface NavigationSplitViewSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass NavigationSplitView extends HTMLElement<NavigationSplitViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-split-view': NavigationSplitView // <navigation-split-view></navigation-split-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "navigation-stack",
@@ -540,7 +546,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/navigation-stack"
         }
       ],
-      "description": "A container view that shows a main screen and lets the user open other screens on top of it.\n---\n\n```ts\ninterface NavigationStackSignature {}\n\nclass NavigationStack extends HTMLElement<NavigationStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-stack': NavigationStack // <navigation-stack></navigation-stack>\n  }\n}\n\n```\n"
+      "description": "A container view that shows a main screen and lets the user open other screens on top of it.\n---\n\n```ts\ninterface NavigationStackSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass NavigationStack extends HTMLElement<NavigationStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-stack': NavigationStack // <navigation-stack></navigation-stack>\n  }\n}\n\n```\n"
     },
     {
       "name": "navigation-title",
@@ -696,7 +702,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/scroll-view-proxy"
         }
       ],
-      "description": "A wrapper for {hv}-stacks\n---\n\n```ts\ninterface ScrollViewProxySignature {}\n\nclass ScrollViewProxy extends HTMLElement<ScrollViewProxySignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'scroll-view-proxy': ScrollViewProxy // <scroll-view-proxy></scroll-view-proxy>\n  }\n}\n\n```\n"
+      "description": "A wrapper for {hv}-stacks\n---\n\n```ts\ninterface ScrollViewProxySignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass ScrollViewProxy extends HTMLElement<ScrollViewProxySignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'scroll-view-proxy': ScrollViewProxy // <scroll-view-proxy></scroll-view-proxy>\n  }\n}\n\n```\n"
     },
     {
       "name": "scroll-view",
@@ -756,7 +762,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/sheet-view"
         }
       ],
-      "description": "A dialog that slides up over the current screen.\n---\n\n```ts\ninterface SheetViewSignature {}\n\nclass SheetView extends HTMLDialogElement<SheetViewSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'sheet-view' // <dialog is=\"sheet-view\"></dialog>\n  }\n}\n\n```\n"
+      "description": "A dialog that slides up over the current screen.\n---\n\n```ts\ninterface SheetViewSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass SheetView extends HTMLDialogElement<SheetViewSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'sheet-view' // <dialog is=\"sheet-view\"></dialog>\n  }\n}\n\n```\n"
     },
     {
       "name": "sidebar-toggle",
@@ -766,7 +772,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/sidebar-toggle"
         }
       ],
-      "description": "A control that shows or hides the sidebar view.\n---\n\n```ts\ninterface SidebarToggleSignature {}\n\nclass SidebarToggle extends HTMLElement<SidebarToggleSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sidebar-toggle': SidebarToggle // <sidebar-toggle></sidebar-toggle>\n  }\n}\n\n```\n"
+      "description": "A control that shows or hides the sidebar view.\n---\n\n```ts\ninterface SidebarToggleSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass SidebarToggle extends HTMLElement<SidebarToggleSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sidebar-toggle': SidebarToggle // <sidebar-toggle></sidebar-toggle>\n  }\n}\n\n```\n"
     },
     {
       "name": "sidebar-view",
@@ -776,7 +782,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/sidebar-view"
         }
       ],
-      "description": "A container view that arranges navigation destinations in a single column.\n---\n\n```ts\ninterface SidebarViewSignature {}\n\nclass SidebarView extends HTMLDialogElement<SidebarViewSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'sidebar-view' // <dialog is=\"sidebar-view\"></dialog>\n  }\n}\n\n```\n"
+      "description": "A container view that arranges navigation destinations in a single column.\n---\n\n```ts\ninterface SidebarViewSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass SidebarView extends HTMLDialogElement<SidebarViewSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'sidebar-view' // <dialog is=\"sidebar-view\"></dialog>\n  }\n}\n\n```\n"
     },
     {
       "name": "sticky-container",
@@ -790,7 +796,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/tab-bar"
         }
       ],
-      "description": "A container view that groups tab-items together along the top or bottom of the screen.\n---\n\n```ts\ninterface TabBarSignature {}\n\nclass TabBar extends HTMLDialogElement<TabBarSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'tab-bar' // <dialog is=\"tab-bar\"></dialog>\n  }\n}\n\n```\n"
+      "description": "A container view that groups tab-items together along the top or bottom of the screen.\n---\n\n```ts\ninterface TabBarSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass TabBar extends HTMLDialogElement<TabBarSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'tab-bar' // <dialog is=\"tab-bar\"></dialog>\n  }\n}\n\n```\n"
     },
     {
       "name": "tab-item",
@@ -800,7 +806,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/tab-item"
         }
       ],
-      "description": "A control that switches the tab view to this tab.\n---\n\n```ts\ninterface TabItemSignature {}\n\nclass TabItem extends HTMLButtonElement<TabItemSignature> {}\n\ndeclare global {\n  interface HTMLButtonElement {\n    is: 'tab-item' // <button is=\"tab-item\"></button>\n  }\n}\n\n```\n"
+      "description": "A control that switches the tab view to this tab.\n---\n\n```ts\ninterface TabItemSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass TabItem extends HTMLButtonElement<TabItemSignature> {}\n\ndeclare global {\n  interface HTMLButtonElement {\n    is: 'tab-item' // <button is=\"tab-item\"></button>\n  }\n}\n\n```\n"
     },
     {
       "name": "tab-view",
@@ -810,7 +816,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/tab-view"
         }
       ],
-      "description": "A container view that switches between screens using tabs.\n---\n\n```ts\ninterface TabViewSignature {\n  CSSProperties: {\n    '--adaptable-tab-bar-placement'?: string\n  }\n}\n\nclass TabView extends HTMLElement<TabViewSignature> {\n  readonly tabBarPlacement:\n    | 'bottom-bar'\n    | 'ornament'\n    | 'sidebar'\n    | 'top-bar'\n    | undefined\n  readonly moreTab: NavigationStack | null\n  selectedTab: (NavigationSplitView | NavigationStack)[]\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  tabshow: CustomEvent // A Tab is shown\n  tabhide: CustomEvent // A Tab is hidden\n  'tab-view:toggle': CustomEvent\n  'tab-view:adaptable-tab-bar-placement-change': CustomEvent\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tab-view': TabView // <tab-view></tab-view>\n  }\n}\n\n```\n"
+      "description": "A container view that switches between screens using tabs.\n---\n\n```ts\ninterface TabViewSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n\n  CSSProperties: {\n    '--adaptable-tab-bar-placement'?: string\n  }\n}\n\nclass TabView extends HTMLElement<TabViewSignature> {\n  readonly tabBarPlacement:\n    | 'bottom-bar'\n    | 'ornament'\n    | 'sidebar'\n    | 'top-bar'\n    | undefined\n  readonly moreTab: NavigationStack | null\n  selectedTab: (NavigationSplitView | NavigationStack)[]\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  tabshow: CustomEvent // A Tab is shown\n  tabhide: CustomEvent // A Tab is hidden\n  'tab-view:toggle': CustomEvent\n  'tab-view:adaptable-tab-bar-placement-change': CustomEvent\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tab-view': TabView // <tab-view></tab-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "table-view",
@@ -965,7 +971,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/tool-bar-item-group"
         }
       ],
-      "description": "A container view that groups items together in the toolbar or navigation bar.\n---\n\n```ts\ninterface ToolBarItemGroupSignature {}\n\nclass ToolBarItemGroup extends HTMLElement<ToolBarItemGroupSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tool-bar-item-group': ToolBarItemGroup // <tool-bar-item-group></tool-bar-item-group>\n  }\n}\n\n```\n"
+      "description": "A container view that groups items together in the toolbar or navigation bar.\n---\n\n```ts\ninterface ToolBarItemGroupSignature {\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass ToolBarItemGroup extends HTMLElement<ToolBarItemGroupSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tool-bar-item-group': ToolBarItemGroup // <tool-bar-item-group></tool-bar-item-group>\n  }\n}\n\n```\n"
     },
     {
       "name": "tool-bar-item",
@@ -986,7 +992,7 @@
           "name": "title-key"
         }
       ],
-      "description": "A view placed in the toolbar or navigation bar.\n---\n\n```ts\ninterface ToolBarItemSignature {\n  Attributes: {\n    slot?: string\n    'data-previous-slot'?: string\n    'title-key'?: string\n  }\n}\n\nclass ToolBarItem extends HTMLElement<ToolBarItemSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tool-bar-item': ToolBarItem // <tool-bar-item></tool-bar-item>\n  }\n}\n\n```\n"
+      "description": "A view placed in the toolbar or navigation bar.\n---\n\n```ts\ninterface ToolBarItemSignature {\n  Attributes: {\n    slot?: string\n    'data-previous-slot'?: string\n    'title-key'?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass ToolBarItem extends HTMLElement<ToolBarItemSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tool-bar-item': ToolBarItem // <tool-bar-item></tool-bar-item>\n  }\n}\n\n```\n"
     },
     {
       "name": "tool-bar",
@@ -1017,7 +1023,7 @@
           "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"
+      "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  Slots: {\n    default: HTMLElement[] // The default slot\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",
@@ -1104,7 +1110,7 @@
           "valueSet": "blockPlacementSet"
         }
       ],
-      "description": "A view that arranges its children one on top of the other.\n---\n\n```ts\ninterface VStackSignature {\n  Attributes: {\n    readable?: FrameInlineLength // Shortcut for `placement=\"leading fill\" frame:alignment=\"center\" frame:width=\"infinity\" frame:max-width=\"{length}\"`\n    distribution?:\n      | 'leading'\n      | 'leading fill'\n      | 'center'\n      | 'trailing'\n      | 'fill'\n      | 'space-between' // The distribution of cols\n    template?: Template // The main-axis grid template\n    spacing?: Spacing // The gap between the primary axis\n    alignment?: inlineSet // The cross-axis alignment\n    distribution?: blockSet // The main-axis alignment\n    placement?: blockPlacementSet // The main-axis alignment\n  }\n}\n\nclass VStack extends HTMLElement<VStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-stack': VStack // <v-stack></v-stack>\n  }\n}\n\n```\n"
+      "description": "A view that arranges its children one on top of the other.\n---\n\n```ts\ninterface VStackSignature {\n  Attributes: {\n    readable?: FrameInlineLength // Shortcut for `placement=\"leading fill\" frame:alignment=\"center\" frame:width=\"infinity\" frame:max-width=\"{length}\"`\n    distribution?:\n      | 'leading'\n      | 'leading fill'\n      | 'center'\n      | 'trailing'\n      | 'fill'\n      | 'space-between' // The distribution of cols\n    template?: Template // The main-axis grid template\n    spacing?: Spacing // The gap between the primary axis\n    alignment?: inlineSet // The cross-axis alignment\n    distribution?: blockSet // The main-axis alignment\n    placement?: blockPlacementSet // The main-axis alignment\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n  }\n}\n\nclass VStack extends HTMLElement<VStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-stack': VStack // <v-stack></v-stack>\n  }\n}\n\n```\n"
     }
   ],
   "globalAttributes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "1.0.1-canary.3",
+  "version": "1.0.1-canary.4",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/components/_text-view.scss

@@ -20,10 +20,15 @@
         --text-view--p-margin-block-start: 1rem;
       }
 
-      p {
+      p,
+      hr {
         margin-block-start: var(--text-view--p-margin-block-start);
       }
 
+      hr {
+        opacity: 10%;
+      }
+
       // @container text-view (width <= 576px) {
       //   :where(&) {
       //     --text-view--base-font-size: 1.3cqi;