@swiftwc/ui 0.0.0-dev.75 → 0.0.0-dev.76

package/generated/components/image-view.js

@@ -1,7 +1,7 @@
 import { $, devFlags } from '../internal/utils';
 export class ImageView extends HTMLElement {
     static get observedAttributes() {
-        return ['system-name'];
+        return ['system-name', 'system-weight'];
     }
     static #template;
     static get template() {
@@ -16,24 +16,42 @@ export class ImageView extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
         switch (name) {
-            case 'system-name':
-                if (oldValue === newValue)
-                    break;
-                // this.innerHTML = `<i style="line-height: 1.05" class="ph ph-${newValue}"></i>`
-                //this.setAttribute('class', `ph ph-${newValue}`)
-                let image = this.querySelector(':scope>:not([slot])');
-                if (newValue) {
-                    const el = image ?? $(`<i style="line-height: 1"></i>`, '>1');
-                    el.setAttribute('class', `ph ph-${newValue}`);
-                    image ??= this.appendChild(el);
-                    // image ??= this.appendChild($(`<i style="line-height: 1.05"></i>`, '>1'))
-                    // image.setAttribute('class', `ph ph-${newValue}`)
-                }
-                else
-                    image?.remove();
+            case 'system-weight': {
+                this.#render(this.getAttribute('system-name'), newValue);
                 break;
+            }
+            case 'system-name': {
+                this.#render(newValue, this.getAttribute('system-weight'));
+                // // this.innerHTML = `<i style="line-height: 1.05" class="ph ph-${newValue}"></i>`
+                // //this.setAttribute('class', `ph ph-${newValue}`)
+                // let image = this.querySelector(':scope>:not([slot])')
+                // if (newValue) {
+                //   const el = image ?? $(`<i style="line-height: 1"></i>`, '>1')
+                //   el.setAttribute('class', `ph ph-${newValue}`)
+                //   image ??= this.appendChild(el)
+                //   // image ??= this.appendChild($(`<i style="line-height: 1.05"></i>`, '>1'))
+                //   // image.setAttribute('class', `ph ph-${newValue}`)
+                // } else image?.remove()
+                break;
+            }
+        }
+    }
+    #render(icon, weight) {
+        if (!icon) {
+            this.querySelector(':scope>:not([slot])')?.remove();
+            return;
         }
+        const tokens = [`ph${weight ? `-${weight}` : ''}`, `ph-${icon}`];
+        const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild(Object.assign(document.createElement('i'), { style: 'line-height: 1' }));
+        if ('1' !== container.style.getPropertyValue('line-height'))
+            container.style.setProperty('line-height', '1');
+        for (const token of container.classList)
+            if (token.startsWith('ph') && !tokens.includes(token))
+                container.classList.remove(token);
+        container.classList.add(...tokens);
     }
     disconnectedCallback() {
         if (devFlags.debug)

package/generated/components/labeled-content.js

@@ -1,4 +1,5 @@
 import { $, devFlags, renderLabel } from '../internal/utils';
+import { html, render } from '../tpl';
 export class LabeledContent extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'label', 'header', 'footer', 'labeled-content-style', 'format'];
@@ -33,24 +34,24 @@ export class LabeledContent extends HTMLElement {
             return;
         switch (name) {
             case 'header':
-                let header = this.querySelector(':scope>[slot=header]');
-                if (newValue) {
-                    const el = header ?? $(`<header slot="header"></header>`, '>1');
-                    renderLabel(':scope>label-view', `<label-view font="callout"><span></span></label-view>`, el, newValue);
-                    header ??= this.appendChild(el);
+                if (!newValue) {
+                    this.querySelector(':scope>[slot=header]')?.remove();
+                    break;
                 }
-                else
-                    header?.remove();
+                const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }));
+                render(html `<label-view font="callout">
+            <span>${newValue}</span>
+          </label-view>`, header);
                 break;
             case 'footer':
-                let footer = this.querySelector(':scope>[slot=footer]');
-                if (newValue) {
-                    const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
-                    renderLabel(':scope>label-view', `<label-view font="callout"><span></span></label-view>`, el, newValue);
-                    footer ??= this.appendChild(el);
+                if (!newValue) {
+                    this.querySelector(':scope>[slot=footer]')?.remove();
+                    break;
                 }
-                else
-                    footer?.remove();
+                const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }));
+                render(html `<label-view font="callout">
+            <span>${newValue}</span>
+          </label-view>`, footer);
                 break;
             case 'value':
                 renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(newValue, this.getAttribute('format')));

package/generated/components/navigation-title.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
-import { $, devFlags, renderLabel } from '../internal/utils';
+import { devFlags } from '../internal/utils';
+import { html, render } from '../tpl';
 let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
-        return ['value', 'subtitle'];
+        return ['value', 'subtitle', 'system-image', 'system-image-weight'];
     }
     constructor() {
         super();
@@ -17,7 +18,7 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        this.#render(this.getAttribute('value'), this.getAttribute('subtitle'));
+        this.#render(this.getAttribute('value'), this.getAttribute('subtitle'), this.getAttribute('system-image'), this.getAttribute('system-image-weight'));
     }
     disconnectedCallback() {
         if (devFlags.debug)
@@ -27,11 +28,29 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
         if (devFlags.debug)
             console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
-    #render = (title, subtitle) => {
-        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`, vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`;
-        const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'));
-        renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title);
-        renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle);
+    #render = (title, subtitle, systemImage, systemImageWeight) => {
+        const template = html `
+      <v-stack alignment="fill">
+        ${systemImage ? html `<image-view system-name="${systemImage}" system-weight="${systemImageWeight}" foreground="blue"></image-view>` : null}
+        <v-stack spacing="0" alignment="fill">
+          <label-view line-limit="1" truncation-mode="tail" font="headline">
+            <span>${title ?? ''}</span>
+          </label-view>
+          <label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout">
+            <span>${subtitle ?? ''}</span>
+          </label-view>
+        </v-stack>
+      </v-stack>
+    `;
+        const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild(document.createElement('navigation-large-title'));
+        render(template, container);
+        // const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`,
+        //   subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`,
+        //   vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`
+        // const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')),
+        //   vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'))
+        // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
+        // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
     };
 };
 NavigationTitle = NavigationTitle_1 = __decorate([

package/generated/components/scroll-view.js

@@ -2,7 +2,8 @@ var _a;
 import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, devFlags, frame, onoff, renderLabel, slowHideShow } from '../internal/utils';
+import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
+import { html, render } from '../tpl';
 const observers = new ResizeObserverSingleton();
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
@@ -186,10 +187,17 @@ export class ScrollView extends HTMLElement {
         });
     }
     #renderNavTitle = (title, subtitle) => {
-        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`;
-        const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'));
-        renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title);
-        renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle);
+        // const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`,
+        //   subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`
+        // const vStack =
+        //   this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'))
+        // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
+        // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
+        const container = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild(Object.assign(document.createElement('v-stack'), { spacing: '0', alignment: 'fill', slot: 'top-bar-principal' }));
+        render(html `
+        ${title ? html `<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
+        ${subtitle ? html `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
+      `, container);
     };
 }
 _a = ScrollView;

package/generated/components/section-view.js

@@ -1,4 +1,5 @@
-import { $, devFlags, renderLabel } from '../internal/utils';
+import { $, devFlags } from '../internal/utils';
+import { html, render } from '../tpl';
 export class SectionView extends HTMLElement {
     static get observedAttributes() {
         return ['header', 'footer'];
@@ -37,24 +38,24 @@ export class SectionView extends HTMLElement {
         // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'header':
-                let header = this.querySelector(':scope>[slot=header]');
-                if (newValue) {
-                    const el = header ?? $(`<header slot="header"></header>`, '>1');
-                    renderLabel(':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, el, newValue);
-                    header ??= this.appendChild(el);
+                if (!newValue) {
+                    this.querySelector(':scope>[slot=header]')?.remove();
+                    break;
                 }
-                else
-                    header?.remove();
+                const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }));
+                render(html `<label-view line-limit="1" truncation-mode="tail" font="callout">
+            <span>${newValue}</span>
+          </label-view>`, header);
                 break;
             case 'footer':
-                let footer = this.querySelector(':scope>[slot=footer]');
-                if (newValue) {
-                    const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
-                    renderLabel(':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, el, newValue);
-                    footer ??= this.appendChild(el);
+                if (!newValue) {
+                    this.querySelector(':scope>[slot=footer]')?.remove();
+                    break;
                 }
-                else
-                    footer?.remove();
+                const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }));
+                render(html `<label-view line-limit="1" truncation-mode="tail" font="callout">
+            <span>${newValue}</span>
+          </label-view>`, footer);
                 break;
         }
         // })

package/generated/css/index.css

@@ -1065,10 +1065,6 @@
     --toolbar-cell-filter: blur(10px);
     --toolbar-cell-opacity: 0;
   }
-  :where(:is(navigation-stack, dialog, body-view):has(> body-view > body-view) > scroll-view,
-  :is(navigation-stack, dialog, body-view):has(> body-view > body-view) > tool-bar) {
-    content-visibility: hidden;
-  }
 }
 @layer sw-components {
   :where(navigation-stack:not([hidden]),
@@ -1106,6 +1102,7 @@
   [is=form-view]:not([hidden]),
   v-stack:not([hidden]),
   h-stack:not([hidden]),
+  group-box:not([hidden]),
   tool-bar:not([hidden]),
   label-view:not([hidden]),
   labeled-content:not([hidden]),
@@ -1373,7 +1370,32 @@
     }
   }
 }
-@layer sw-components {}
+@layer sw-components {
+  :where(image-view) {
+    --image--fontsize: calc(var(--label-image-size) * 1rem);
+  }
+  :where(image-view > :not([slot])) {
+    inline-size: var(--image--fontsize);
+    block-size: var(--image--fontsize);
+    font-size: var(--image--fontsize);
+  }
+}
+@layer sw-components {
+  :where(group-box) {
+    background: var(--groupbox--background);
+    padding-inline: var(--groupbox--padding-inline);
+    padding-block: var(--groupbox--padding-block);
+    border-radius: var(--groupbox--border-radius);
+    --groupbox--background: var(--red);
+    --groupbox--padding-inline: 1rem;
+    --groupbox--padding-block: 1rem;
+    --groupbox--border-radius: 1rem;
+  }
+  :where(group-box :nth-child(1 of image-view),
+  group-box :nth-child(1 of label-view)) {
+    --label-image-size: 5;
+  }
+}
 @layer sw-components {
   :where(h-divider) {
     inline-size: 100%;
@@ -2710,7 +2732,7 @@
     font-weight: var(--label--titlestack-font-weight, );
     display: var(--label--titlestack-display, none);
   }
-  label-view > [slot=icon] {
+  :where(label-view > [slot=icon]) {
     aspect-ratio: 1/1;
     inline-size: var(--label-imagestack-fontsize);
     block-size: var(--label-imagestack-fontsize);
@@ -3132,11 +3154,9 @@
     grid-template-rows: minmax(0, 1fr);
     column-gap: var(--labeled-content-column-gap);
   }
-  :where(toggle-view)::part(toggle-label-stack) {
-    color: var(--secondary);
-  }
   :where(toggle-view)::part(toggle-input-stack) {
-    place-items: stretch;
+    align-items: center;
+    justify-items: end;
     place-content: stretch;
   }
   :where(toggle-view)::part(toggle-form-input):focus {
@@ -3163,9 +3183,25 @@
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--liquid-glass-box-shadow);
   }
-  toggle-view[aria-checked=true] {
+  :where(form toggle-view)::part(toggle-label-stack) {
+    color: var(--secondary);
+  }
+  :where(toggle-view[aria-checked=true]) {
     --toggle--trigger-bg: green;
   }
+  :where(toggle-view > :nth-child(n+2 of [slot=label])) {
+    --label-font: callout;
+  }
+  @supports not (x: if(else:red)) {
+    :where(toggle-view > :nth-child(n+2 of [slot=label])) {
+      --label--titlestack-font-size: var(--label-callout-font-size);
+      --label--titlestack-line-height: var(--label-callout-line-height);
+      --label--titlestack-font-weight: var(--label-callout-font-weight);
+    }
+  }
+  :where(toggle-view:not(form toggle-view) > :nth-child(n+2 of [slot=label])) {
+    color: var(--secondary);
+  }
 }
 @layer sw-components {
   :where(labeled-content) {
@@ -3216,10 +3252,20 @@
   :where(navigation-large-title) {
     transition: --navigation-bar-block-size 1ms step-start;
   }
+  :where(navigation-large-title :nth-child(1 of image-view),
+  navigation-large-title :nth-child(1 of label-view)) {
+    --label-image-size: 5;
+  }
   :where(scroll-view[navigation-bar-title-display-mode=inline]:has(navigation-large-title) navigation-large-title[navigation-bar-auto-hide]) {
     opacity: 0;
     visibility: collapse;
   }
+  :where(navigation-large-title[background-style=grouped]) {
+    background-color: var(--secondaryGroupedBackground);
+    border-radius: var(--insetlist-item-border-radius);
+    padding-inline: var(--list-item-padding-inline-start) var(--list-item-padding-inline-end);
+    padding-block: 1rem;
+  }
 }
 @layer sw-components {
   :where(navigation-title) {

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

@@ -7,6 +7,3 @@ declare global {
         'toggle:change': CustomEvent<ToggleChangeDetail>;
     }
 }
-export interface ToggleViewEventMap {
-    'toggle:change': CustomEvent<ToggleChangeDetail>;
-}

package/generated/events/toggle-view.js

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

package/generated/tpl/render.js

@@ -94,6 +94,7 @@ function commitChild(part, value) {
         part.anchor.before(node);
         nodes.push(...inserted);
     }
+    part.nodes = nodes;
     part.committed = value;
 }
 function commitAttr(part, value) {

package/package.json

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

package/scss/_components.scss

@@ -5,6 +5,7 @@
 @forward 'components/disclosure-group';
 
 @forward 'components/image-view';
+@forward 'components/group-box';
 
 @forward 'components/h-divider';
 @forward 'components/v-divider';

package/scss/base/_layout.scss

@@ -53,12 +53,14 @@
     }
   }
 
-  :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
-    > scroll-view,
-    > tool-bar {
-      :where(&) {
-        content-visibility: hidden;
-      }
-    }
-  }
+  // NOTE: Going all the way back from deeply nested views forces an empty landing page.
+  // NOTE: Refactor this to add a content-visibility:visible when bwd/fwd classes are present.
+  // :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+  //   > scroll-view,
+  //   > tool-bar {
+  //     :where(&) {
+  //       content-visibility: hidden;
+  //     }
+  //   }
+  // }
 }

package/scss/components/_group-box.scss

@@ -0,0 +1,27 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  group-box {
+    :where(&) {
+      background: var(--groupbox--background);
+
+      padding-inline: var(--groupbox--padding-inline);
+      padding-block: var(--groupbox--padding-block);
+
+      border-radius: var(--groupbox--border-radius);
+
+      --groupbox--background: var(--red);
+      --groupbox--padding-inline: 1rem;
+      --groupbox--padding-block: 1rem;
+      --groupbox--border-radius: 1rem;
+    }
+
+    :nth-child(1 of image-view),
+    :nth-child(1 of label-view) {
+      :where(&) {
+        --label-image-size: 5;
+      }
+    }
+  }
+}

package/scss/components/_image-view.scss

@@ -2,8 +2,18 @@
 @use '../mixins';
 
 @layer #{vars.$components-layer} {
-  // body-view {
-  //   :where(&) {
-  //   }
-  // }
+  image-view {
+    :where(&) {
+      --image--fontsize: calc(var(--label-image-size) * 1rem);
+    }
+
+    > :not([slot]) {
+      :where(&) {
+        inline-size: var(--image--fontsize);
+        block-size: var(--image--fontsize);
+
+        font-size: var(--image--fontsize);
+      }
+    }
+  }
 }

package/scss/components/_index.scss

@@ -39,6 +39,7 @@
   [is='form-view'],
   v-stack,
   h-stack,
+  group-box,
   tool-bar,
   label-view,
   labeled-content,

package/scss/components/_label-view.scss

@@ -123,12 +123,6 @@ $label-line-ifs: (
   }
 }
 
-@mixin set-label-font($value) {
-  --label--titlestack-font-size: var(--label-#{$value}-font-size);
-  --label--titlestack-line-height: var(--label-#{$value}-line-height);
-  --label--titlestack-font-weight: var(--label-#{$value}-font-weight);
-}
-
 @function if-chain($labels, $prop: null) {
   $if-chain: null;
 
@@ -214,14 +208,16 @@ $label-line-ifs: (
     }
 
     > [slot='icon'] {
-      aspect-ratio: 1 / 1;
+      :where(&) {
+        aspect-ratio: 1 / 1;
 
-      inline-size: var(--label-imagestack-fontsize);
-      block-size: var(--label-imagestack-fontsize);
+        inline-size: var(--label-imagestack-fontsize);
+        block-size: var(--label-imagestack-fontsize);
 
-      font-size: var(--label-imagestack-fontsize);
+        font-size: var(--label-imagestack-fontsize);
 
-      display: var(--label--iconstack-display, none);
+        display: var(--label--iconstack-display, none);
+      }
     }
 
     // vars
@@ -343,7 +339,7 @@ $label-line-ifs: (
       //
       @each $label, $size in vars.$label-fonts {
         @include if-chain(--label-font, font, $label) {
-          @include set-label-font($label);
+          @include mixins.set-label-font($label);
         }
       }
     }

package/scss/components/_navigation-large-title.scss

@@ -16,6 +16,13 @@
       // font-size 1ms step-start;
     }
 
+    :nth-child(1 of image-view),
+    :nth-child(1 of label-view) {
+      :where(&) {
+        --label-image-size: 5;
+      }
+    }
+
     scroll-view[navigation-bar-title-display-mode='inline']:has(&) &[navigation-bar-auto-hide] {
       :where(&) {
         opacity: 0;
@@ -23,5 +30,15 @@
         visibility: collapse;
       }
     }
+
+    &[background-style='grouped'] {
+      :where(&) {
+        background-color: var(--secondaryGroupedBackground);
+        border-radius: var(--insetlist-item-border-radius);
+
+        padding-inline: var(--list-item-padding-inline-start) var(--list-item-padding-inline-end);
+        padding-block: 1rem;
+      }
+    }
   }
 }

package/scss/components/_toggle-view.scss

@@ -1,4 +1,6 @@
 @use '../vars';
+@use '../mixins';
+@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   toggle-view {
@@ -17,12 +19,14 @@
         column-gap: var(--labeled-content-column-gap);
       }
 
-      &::part(toggle-label-stack) {
-        color: var(--secondary);
-      }
+      // &::part(toggle-label-stack) {
+      // color: var(--secondary);
+      // }
 
       &::part(toggle-input-stack) {
-        place-items: stretch;
+        // place-items: end;
+        align-items: center;
+        justify-items: end;
 
         place-content: stretch;
       }
@@ -72,8 +76,37 @@
       }
     }
 
+    form & {
+      :where(&)::part(toggle-label-stack) {
+        color: var(--secondary);
+      }
+    }
+
     &[aria-checked='true'] {
-      --toggle--trigger-bg: green;
+      :where(&) {
+        --toggle--trigger-bg: green;
+      }
+    }
+
+    > :nth-child(n + 2 of [slot='label']) {
+      :where(&) {
+        --label-font: callout;
+
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          @include mixins.set-label-font(callout);
+        }
+
+        // toggle-view:not(form toggle-view) & {
+        //   color: var(--secondary);
+        // }
+      }
+    }
+    &:not(form &) {
+      > :nth-child(n + 2 of [slot='label']) {
+        :where(&) {
+          color: var(--secondary);
+        }
+      }
     }
   }
 }

package/scss/mixins/_index.scss

@@ -252,6 +252,12 @@
   }
 }
 
+@mixin set-label-font($value) {
+  --label--titlestack-font-size: var(--label-#{$value}-font-size);
+  --label--titlestack-line-height: var(--label-#{$value}-line-height);
+  --label--titlestack-font-weight: var(--label-#{$value}-font-weight);
+}
+
 @mixin if-iphone-landscape {
   @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
     @content;

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

@@ -220,6 +220,9 @@
       "attributes": [
         {
           "name": "system-name"
+        },
+        {
+          "name": "system-weight"
         }
       ]
     },
@@ -318,6 +321,12 @@
         },
         {
           "name": "subtitle"
+        },
+        {
+          "name": "system-image"
+        },
+        {
+          "name": "system-image-weight"
         }
       ]
     },