@swiftwc/ui 0.0.0-dev.100 → 0.0.0-dev.101

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

@@ -0,0 +1,11 @@
+export declare class DetailPlaceholder extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'detail-placeholder': DetailPlaceholder;
+    }
+}

package/generated/components/detail-placeholder.js

@@ -0,0 +1,19 @@
+import { devFlags } from '../internal/utils';
+export class DetailPlaceholder extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${DetailPlaceholder.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${DetailPlaceholder.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${DetailPlaceholder.name} ⚡️ attr-change [${name}]`);
+        //
+    }
+}

package/generated/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable';
 export * from './date-picker';
+export * from './detail-placeholder';
 export * from './disclosure-group';
 export * from './fine-tooltip';
 export * from './form-view';
@@ -39,6 +40,7 @@ export * from './tab-item';
 export * from './tab-view';
 export * from './table-view';
 export * from './text-field';
+export * from './text-view';
 export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';

package/generated/components/index.js

@@ -7,6 +7,7 @@ export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable';
 export * from './date-picker';
+export * from './detail-placeholder';
 export * from './disclosure-group';
 export * from './fine-tooltip';
 export * from './form-view';
@@ -39,6 +40,7 @@ export * from './tab-item';
 export * from './tab-view';
 export * from './table-view';
 export * from './text-field';
+export * from './text-view';
 export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';

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

@@ -11,9 +11,9 @@
  * @slot — Any children without a `slot` attribute are placed in the title block.
  * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
  *
- * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop {length} --label-gap — The gap between the icon and the title.
  * @cssprop {number} --label-image-size — The size of the icon.
- * @cssprop --label-padding-inline — The padding inline of the label.
+ * @cssprop {length}--label-padding-inline — The padding inline of the label.
  *
  */
 export declare class LabelView extends HTMLElement {

package/generated/components/label-view.js

@@ -14,9 +14,9 @@ import { html } from '../tpl';
  * @slot — Any children without a `slot` attribute are placed in the title block.
  * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
  *
- * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop {length} --label-gap — The gap between the icon and the title.
  * @cssprop {number} --label-image-size — The size of the icon.
- * @cssprop --label-padding-inline — The padding inline of the label.
+ * @cssprop {length}--label-padding-inline — The padding inline of the label.
  *
  */
 export class LabelView extends HTMLElement {

package/generated/components/labeled-content.js

@@ -28,6 +28,8 @@ export class LabeledContent extends HTMLElement {
             'header',
             'footer',
             /**
+             * Use this to force a specific style.
+             *
              * @type {vertical|horizontal}
              */
             'labeled-content-style',

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

@@ -1,7 +1,10 @@
 /**
  * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
  *
- * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */
 export declare class ListView extends HTMLElement {
     constructor();

package/generated/components/list-view.js

@@ -3,7 +3,10 @@ import { devFlags, listActive, onoff } from '../internal/utils';
 /**
  * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
  *
- * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */
 export class ListView extends HTMLElement {
     constructor() {

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

@@ -0,0 +1,11 @@
+export declare class TextView extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'text-view': TextView;
+    }
+}

package/generated/components/text-view.js

@@ -0,0 +1,19 @@
+import { devFlags } from '../internal/utils';
+export class TextView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${TextView.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${TextView.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${TextView.name} ⚡️ attr-change [${name}]`);
+        //
+    }
+}

package/generated/css/index.css

@@ -1112,23 +1112,6 @@
   body-view:not([hidden]),
   tab-view:not([hidden]),
   image-view:not([hidden]),
-  [is=search-view]:not([hidden]),
-  [is=sidebar-view]:not([hidden]),
-  [is=tab-bar]:not([hidden]),
-  [is=full-screen]:not([hidden]),
-  [is=confirmation-dialog]:not([hidden]),
-  [is=alert-dialog]:not([hidden]),
-  [is=sheet-view]:not([hidden]),
-  [is=form-view]:not([hidden]),
-  [is=disclosure-group]:not([hidden]),
-  [is=table-row]:not([hidden]),
-  [is=table-column]:not([hidden]),
-  [is=borderless-button]:not([hidden]),
-  [is=bordered-button]:not([hidden]),
-  [is=bordered-prominent-button]:not([hidden]),
-  [is=plain-button]:not([hidden]),
-  [is=glass-button]:not([hidden]),
-  [is=glass-prominent-button]:not([hidden]),
   list-view:not([hidden]),
   table-view:not([hidden]),
   content-unavailable:not([hidden]),
@@ -1137,7 +1120,6 @@
   tool-bar-item-group:not([hidden]),
   fine-tooltip:not([hidden]),
   sidebar-toggle:not([hidden]),
-  [is=form-view]:not([hidden]),
   v-stack:not([hidden]),
   h-stack:not([hidden]),
   group-box:not([hidden]),
@@ -1153,6 +1135,112 @@
   picker-view:not([hidden])) {
     display: grid;
   }
+  :where(tab-view:has(navigation-stack:not(:defined),
+  navigation-split-view:not(:defined),
+  navigation-large-title:not(:defined),
+  navigation-title:not(:defined),
+  scroll-view:not(:defined),
+  body-view:not(:defined),
+  tab-view:not(:defined),
+  image-view:not(:defined),
+  list-view:not(:defined),
+  table-view:not(:defined),
+  content-unavailable:not(:defined),
+  progress-view:not(:defined),
+  tool-bar-item:not(:defined),
+  tool-bar-item-group:not(:defined),
+  fine-tooltip:not(:defined),
+  sidebar-toggle:not(:defined),
+  v-stack:not(:defined),
+  h-stack:not(:defined),
+  group-box:not(:defined),
+  tool-bar:not(:defined),
+  label-view:not(:defined),
+  text-view:not(:defined),
+  labeled-content:not(:defined),
+  menu-view:not(:defined),
+  section-view:not(:defined),
+  text-field:not(:defined),
+  detail-placeholder:not(:defined),
+  sticky-container:not(:defined),
+  picker-view:not(:defined)), navigation-split-view:has(navigation-stack:not(:defined),
+  navigation-split-view:not(:defined),
+  navigation-large-title:not(:defined),
+  navigation-title:not(:defined),
+  scroll-view:not(:defined),
+  body-view:not(:defined),
+  tab-view:not(:defined),
+  image-view:not(:defined),
+  list-view:not(:defined),
+  table-view:not(:defined),
+  content-unavailable:not(:defined),
+  progress-view:not(:defined),
+  tool-bar-item:not(:defined),
+  tool-bar-item-group:not(:defined),
+  fine-tooltip:not(:defined),
+  sidebar-toggle:not(:defined),
+  v-stack:not(:defined),
+  h-stack:not(:defined),
+  group-box:not(:defined),
+  tool-bar:not(:defined),
+  label-view:not(:defined),
+  text-view:not(:defined),
+  labeled-content:not(:defined),
+  menu-view:not(:defined),
+  section-view:not(:defined),
+  text-field:not(:defined),
+  detail-placeholder:not(:defined),
+  sticky-container:not(:defined),
+  picker-view:not(:defined)), navigation-stack:has(navigation-stack:not(:defined),
+  navigation-split-view:not(:defined),
+  navigation-large-title:not(:defined),
+  navigation-title:not(:defined),
+  scroll-view:not(:defined),
+  body-view:not(:defined),
+  tab-view:not(:defined),
+  image-view:not(:defined),
+  list-view:not(:defined),
+  table-view:not(:defined),
+  content-unavailable:not(:defined),
+  progress-view:not(:defined),
+  tool-bar-item:not(:defined),
+  tool-bar-item-group:not(:defined),
+  fine-tooltip:not(:defined),
+  sidebar-toggle:not(:defined),
+  v-stack:not(:defined),
+  h-stack:not(:defined),
+  group-box:not(:defined),
+  tool-bar:not(:defined),
+  label-view:not(:defined),
+  text-view:not(:defined),
+  labeled-content:not(:defined),
+  menu-view:not(:defined),
+  section-view:not(:defined),
+  text-field:not(:defined),
+  detail-placeholder:not(:defined),
+  sticky-container:not(:defined),
+  picker-view:not(:defined))) {
+    visibility: hidden;
+  }
+  :where([is=search-view]:not([hidden]),
+  [is=sidebar-view]:not([hidden]),
+  [is=tab-bar]:not([hidden]),
+  [is=full-screen]:not([hidden]),
+  [is=confirmation-dialog]:not([hidden]),
+  [is=alert-dialog]:not([hidden]),
+  [is=sheet-view]:not([hidden]),
+  [is=form-view]:not([hidden]),
+  [is=disclosure-group]:not([hidden]),
+  [is=table-row]:not([hidden]),
+  [is=table-column]:not([hidden]),
+  [is=borderless-button]:not([hidden]),
+  [is=bordered-button]:not([hidden]),
+  [is=bordered-prominent-button]:not([hidden]),
+  [is=plain-button]:not([hidden]),
+  [is=glass-button]:not([hidden]),
+  [is=glass-prominent-button]:not([hidden])) {
+    display: grid;
+  }
   :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-label-stack),
@@ -3574,7 +3662,7 @@
     --labeled-content--value-stack-justify-items: flex-start;
   }
   :where(labeled-content)[labeled-content-style=horizontal] {
-    --labeled-content--value-stack-flex-flow: row wrap;
+    --labeled-content--value-stack-flex-flow: row no-wrap;
     --labeled-content--value-stack-justify-items: flex-end;
   }
   :where(labeled-content > :nth-child(n+2 of [slot=label]),

package/package.json

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

package/scss/components/_index.scss

@@ -12,23 +12,6 @@
   body-view,
   tab-view,
   image-view,
-  [is='search-view'],
-  [is='sidebar-view'],
-  [is='tab-bar'],
-  [is='full-screen'],
-  [is='confirmation-dialog'],
-  [is='alert-dialog'],
-  [is='sheet-view'],
-  [is='form-view'],
-  [is='disclosure-group'],
-  [is='table-row'],
-  [is='table-column'],
-  [is='borderless-button'],
-  [is='bordered-button'],
-  [is='bordered-prominent-button'],
-  [is='plain-button'],
-  [is='glass-button'],
-  [is='glass-prominent-button'],
   list-view,
   table-view,
   content-unavailable,
@@ -37,7 +20,6 @@
   tool-bar-item-group,
   fine-tooltip,
   sidebar-toggle,
-  [is='form-view'],
   v-stack,
   h-stack,
   group-box,
@@ -54,6 +36,32 @@
     :where(&:not([hidden])) {
       display: grid;
     }
+
+    :where(tab-view:has(&:not(:defined)), navigation-split-view:has(&:not(:defined)), navigation-stack:has(&:not(:defined))) {
+      visibility: hidden;
+    }
+  }
+
+  [is='search-view'],
+  [is='sidebar-view'],
+  [is='tab-bar'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'],
+  [is='sheet-view'],
+  [is='form-view'],
+  [is='disclosure-group'],
+  [is='table-row'],
+  [is='table-column'],
+  [is='borderless-button'],
+  [is='bordered-button'],
+  [is='bordered-prominent-button'],
+  [is='plain-button'],
+  [is='glass-button'],
+  [is='glass-prominent-button'] {
+    :where(&:not([hidden])) {
+      display: grid;
+    }
   }
 
   :where(labeled-content)::part(labeled-content-container),

package/scss/components/_labeled-content.scss

@@ -52,7 +52,7 @@
       }
 
       &[labeled-content-style='horizontal'] {
-        --labeled-content--value-stack-flex-flow: row wrap;
+        --labeled-content--value-stack-flex-flow: row no-wrap;
 
         --labeled-content--value-stack-justify-items: flex-end;
       }

package/scss/components/_tab-view.scss

@@ -90,6 +90,14 @@
     //   }
     // }
 
+    // &:not(:defined),
+    // &:has(label-view:not(:defined)) {
+    //   :where(&) {
+    //     visibility: hidden;
+    //     // background-color: green;
+    //   }
+    // }
+
     :where(&) {
       grid-template-columns: subgrid; // inherits columns from container
       grid-template-rows: subgrid; // inherits rows if needed

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

@@ -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": [
@@ -384,7 +388,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 +413,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"
@@ -424,7 +428,7 @@
           "description": "Value Type: \"<format-type>:<locale?>:<format-options?>\"\nDescription: Use this to format the text inside the value attribute. For example `format=\"currency::currency=USD\" value=\"1234.5\"` produces a value of `$1,234.50`."
         }
       ],
-      "description": "A container view that pairs a label with a value.\n---\n\n```ts\ninterface LabeledContentSignature {\n  Attributes: {\n    value?: string\n    label?: string\n    header?: string\n    footer?: string\n    'labeled-content-style'?: 'vertical' | 'horizontal'\n    format?: '<format-type>:<locale?>:<format-options?>' // Use this to format the text inside the value attribute. For example `format=\"currency::currency=USD\" value=\"1234.5\"` produces a value of `$1,234.50`.\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[] // Use the `slot=\"label\"` attribute to place childen in the label block.\n    header: HTMLElement[]\n    footer: HTMLElement[]\n  }\n\n  Parts: {\n    'labeled-content-container': never\n    'labeled-content-stack': never\n    'labeled-content-label-stack': never\n    'labeled-content-value-stack': never\n  }\n}\n\nclass LabeledContent extends HTMLElement<LabeledContentSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'labeled-content': LabeledContent // <labeled-content></labeled-content>\n  }\n}\n\n```\n\n### **Examples:**\n**Creates a standard labeled element, with a view that conveys the value of the element and a label:**\n```html\n<labeled-content label=\"Label\" value=\"Content\"></labeled-content>\n\n```\n**Creates a labeled element from a formatted value:**\n```html\n<labeled-content\n  label=\"Height\"\n  value=\"6\"\n  format=\"unit::unit=foot\"\n></labeled-content>\n\n```\n**Creates a labeled element that displays a custom label and a custom subtitle to the label:**\n```html\n<labeled-content value=\"Content\">\n  <label-view slot=\"label\" title=\"Custom Value\"></label-view>\n  <label-view slot=\"label\" title=\"Custom Subtitle Value\"></label-view>\n</labeled-content>\n\n```\n"
+      "description": "A container view that pairs a label with a value.\n---\n\n```ts\ninterface LabeledContentSignature {\n  Attributes: {\n    value?: string\n    label?: string\n    header?: string\n    footer?: string\n    'labeled-content-style'?: 'vertical' | 'horizontal' // Use this to force a specific style.\n    format?: '<format-type>:<locale?>:<format-options?>' // Use this to format the text inside the value attribute. For example `format=\"currency::currency=USD\" value=\"1234.5\"` produces a value of `$1,234.50`.\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[] // Use the `slot=\"label\"` attribute to place childen in the label block.\n    header: HTMLElement[]\n    footer: HTMLElement[]\n  }\n\n  Parts: {\n    'labeled-content-container': never\n    'labeled-content-stack': never\n    'labeled-content-label-stack': never\n    'labeled-content-value-stack': never\n  }\n}\n\nclass LabeledContent extends HTMLElement<LabeledContentSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'labeled-content': LabeledContent // <labeled-content></labeled-content>\n  }\n}\n\n```\n\n### **Examples:**\n**Creates a standard labeled element, with a view that conveys the value of the element and a label:**\n```html\n<labeled-content label=\"Label\" value=\"Content\"></labeled-content>\n\n```\n**Creates a labeled element from a formatted value:**\n```html\n<labeled-content\n  label=\"Height\"\n  value=\"6\"\n  format=\"unit::unit=foot\"\n></labeled-content>\n\n```\n**Creates a labeled element that displays a custom label and a custom subtitle to the label:**\n```html\n<labeled-content value=\"Content\">\n  <label-view slot=\"label\" title=\"Custom Value\"></label-view>\n  <label-view slot=\"label\" title=\"Custom Subtitle Value\"></label-view>\n</labeled-content>\n\n```\n"
     },
     {
       "name": "list-view",
@@ -437,7 +441,7 @@
       "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"
@@ -445,7 +449,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  }\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  }\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",
@@ -861,6 +865,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": [