@swiftwc/ui 1.0.0-canary.4 → 1.0.0-canary.5

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

@@ -1,5 +1,5 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "radio-group", "palette", "segmented", "automatic"];
+declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "radio-group", "palette", "tabs", "automatic"];
 export type PickerStyle = (typeof pickerStyles)[number];
 export type { DictEntry, Dictionary } from '../internal/class/dict-entry';
 /**

package/generated/components/picker-view.js

@@ -9,7 +9,7 @@ import { queryInsertPosition, startViewTransition } from '../internal/privateNam
 import { $, ancestors, debug, kebabCase, onoff } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
-const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'radio-group', 'palette', 'segmented', 'automatic'];
+const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'radio-group', 'palette', 'tabs', 'automatic'];
 const update = (path, node, overwrite = true) => {
     debug(`PickerView: update`);
     if (!(path instanceof NavigationPath))
@@ -311,7 +311,7 @@ export class PickerView extends FormAssociatedBase {
                 this.#reflectButtons(source, menu);
                 break;
             }
-            case 'segmented':
+            case 'tabs':
             case 'palette':
             case 'radio-group': {
                 // capture
@@ -403,7 +403,7 @@ export class PickerView extends FormAssociatedBase {
                 case 'sheet':
                 case 'navigation-link':
                     _a.#templates.set(this.pickerStyle, $(html `
-              <label part="root picker-stack">
+              <div part="root picker-stack">
                 <div part="root picker-label-stack">
                   <slot name="label"></slot>
                 </div>
@@ -412,12 +412,12 @@ export class PickerView extends FormAssociatedBase {
                 </div>
                 <slot name="list" hidden></slot>
                 <slot name="validity-options" hidden></slot>
-              </label>
+              </div>
             `));
                     break;
                 case 'menu':
                     _a.#templates.set(this.pickerStyle, $(html `
-              <label part="root picker-stack">
+              <div part="root picker-stack">
                 <div part="root picker-label-stack">
                   <slot name="label"></slot>
                 </div>
@@ -426,14 +426,14 @@ export class PickerView extends FormAssociatedBase {
                 </div>
                 <slot name="list" hidden></slot>
                 <slot name="validity-options" hidden></slot>
-              </label>
+              </div>
             `));
                     break;
-                case 'segmented':
+                case 'tabs':
                 case 'palette':
                 case 'radio-group':
                     _a.#templates.set(this.pickerStyle, $(html `
-              <label part="root picker-stack">
+              <div part="root picker-stack">
                 <div part="root picker-label-stack">
                   <slot name="label"></slot>
                 </div>
@@ -442,7 +442,7 @@ export class PickerView extends FormAssociatedBase {
                 </div>
                 <slot name="list" hidden></slot>
                 <slot name="validity-options" hidden></slot>
-              </label>
+              </div>
             `));
                     break;
                 //   break
@@ -615,8 +615,11 @@ export class PickerView extends FormAssociatedBase {
         CleanupRegistry.unregister(this, 'datalist'); //off1()
         CleanupRegistry.register(this, onoff('slotchange', this.#handleListSlotchange, this.#slots?.get('list')).on(), 'datalist');
         // #renderSlotted should run automatically now by slotchange initial event
-        // switch (this.pickerStyle) {
-        // }
+        switch (this.pickerStyle) {
+            case 'tabs':
+                this.setAttribute('js-init-tabs', '');
+                break;
+        }
     }
     #sendValueToForm = (dispatchEvent = true) => {
         // input.value has already been updated/synced !!
@@ -638,7 +641,7 @@ export class PickerView extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
     };
     #handleTriggerClick = async ({ type, target }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ trigger.${type}`);
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
@@ -694,7 +697,7 @@ export class PickerView extends FormAssociatedBase {
         if (!(target instanceof HTMLElement))
             return;
         switch (this.pickerStyle) {
-            case 'segmented':
+            case 'tabs':
             case 'palette':
             case 'radio-group':
                 const radio = target.closest('input[type="radio"]');
@@ -743,8 +746,8 @@ export class PickerView extends FormAssociatedBase {
         const tag = node.value;
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
-            case 'segmented':
-                render(_a.#morphSegmentedBtn({ name: this.#guuid, node, tag }), mount);
+            case 'tabs':
+                render(_a.#morphTabsBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             case 'palette':
                 render(_a.#morphPaletteBtn({ name: this.#guuid, node, tag }), mount);
@@ -782,7 +785,7 @@ export class PickerView extends FormAssociatedBase {
     }
     static #morphPaletteBtn({ name, node, tag }) {
         if ('string' === typeof tag) {
-            const style = node.src ? `background-image: url('${node.src}')` : null;
+            const style = node.src ? `background-image: url('${this.#cssUrl(node.src)}')` : null;
             return html `<label tabindex="0">
         <v-stack template="auto spacer" spacing="5">
           <input type="radio" name="${name}" value="${tag}" style="${style}" />
@@ -798,37 +801,32 @@ export class PickerView extends FormAssociatedBase {
         </v-stack>
       </label>`;
     }
-    static #morphSegmentedBtn({ name, node, tag }) {
-        const cssUrl = (src) => {
-            if ('string' !== typeof src)
-                return null;
-            try {
-                const { protocol, href } = new URL(src, location.href);
-                if (protocol !== 'https:' && protocol !== 'http:' && protocol !== 'blob:')
-                    return null;
-                // URL.href already percent-encodes " < > ` space and \ in path/query.
-                // Encode the remaining chars that matter inside url('...')
-                return href.replace(/['()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
-            }
-            catch {
+    static #cssUrl = (src) => {
+        if ('string' !== typeof src)
+            return null;
+        try {
+            const { protocol, href } = new URL(src, location.href);
+            if (protocol !== 'https:' && protocol !== 'http:' && protocol !== 'blob:')
                 return null;
-            }
-        };
+            // URL.href already percent-encodes " < > ` space and \ in path/query.
+            // Encode the remaining chars that matter inside url('...')
+            return href.replace(/['()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+        }
+        catch {
+            return null;
+        }
+    };
+    static #morphTabsBtn({ name, node, tag }) {
         if ('string' === typeof tag) {
-            const style = node.src ? `background-image: url('${cssUrl(node.src)}')` : null;
             return html `<label tabindex="0">
-        <v-stack template="auto spacer" spacing="5">
-          <input type="radio" name="${name}" value="${tag}" style="${style}" />
-          ${_a.#morphITSLabel(node)}
-        </v-stack>
+        <input type="radio" name="${name}" value="${tag}" />
+        ${_a.#morphITSLabel(node)}
       </label>`;
         }
         else
             return html `<label>
-        <v-stack template="auto spacer" spacing="5">
-          <input type="radio" name="${name}" disabled />
-          ${_a.#morphITSLabel(node)}
-        </v-stack>
+        <input type="radio" name="${name}" disabled />
+        ${_a.#morphITSLabel(node)}
       </label>`;
     }
     static #morphITSLabel({ title, subtitle, systemImage }) {
@@ -844,8 +842,8 @@ export class PickerView extends FormAssociatedBase {
         debug(`${_a.name} #wrapOptgroupTag`);
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
-            case 'segmented':
-                render(_a.#morphSegmentedBtn({ name: this.#guuid, node }), mount);
+            case 'tabs':
+                render(_a.#morphTabsBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'palette':
                 render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
@@ -870,8 +868,8 @@ export class PickerView extends FormAssociatedBase {
     #wrapDatalistTag(node) {
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
-            case 'segmented':
-                render(_a.#morphSegmentedBtn({ name: this.#guuid, node }), mount);
+            case 'tabs':
+                render(_a.#morphTabsBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'palette':
                 render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
@@ -893,7 +891,7 @@ export class PickerView extends FormAssociatedBase {
     }
     #reflectButtons(nodes, container) {
         debug(`${_a.name} #reflectButtons`);
-        const flatten = ['radio-group', 'palette', 'segmented'].includes(this.pickerStyle);
+        const flatten = ['radio-group', 'palette', 'tabs'].includes(this.pickerStyle);
         for (const node of nodes) {
             if (DictEntry.isLeaf(node)) {
                 container.appendChild(this.#wrapOptionTag(node));
@@ -927,8 +925,7 @@ export class PickerView extends FormAssociatedBase {
         self.requestAnimationFrame(() => {
             this.ariaCurrent = this.#selection;
             const groupMap = Dictionary.index(this.#lastIndexedRoot);
-            const groupContainsSelection = (e) => DictEntry.leafValues(e).includes(this.#selection);
-            const syncButtons = (root) => {
+            const groupContainsSelection = (e) => DictEntry.leafValues(e).includes(this.#selection), syncButtons = (root) => {
                 // 1. plain value buttons
                 for (const el of root.querySelectorAll('button[value]:not([slot])'))
                     // $.prop('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden', el.querySelector<HTMLElement>('label-view[data-role="check"]'))
@@ -945,12 +942,22 @@ export class PickerView extends FormAssociatedBase {
                     btn.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
                 }
                 // 4. radio inputs
-                for (const el of root.querySelectorAll('input[type=radio][value]'))
+                for (const el of root.querySelectorAll('input[type=radio][value]')) {
                     el.checked = el.getAttribute('value') === this.#selection;
+                    switch (this.pickerStyle) {
+                        case 'tabs':
+                            const label = el.closest('label');
+                            if (!label)
+                                break;
+                            setTimeout(() => (label.ariaSelected = `${label.matches(':has(input[type=radio]:checked)')}`), 100);
+                            break;
+                    }
+                }
             };
             syncButtons(this);
             if (this.#spawn)
                 syncButtons(this.#spawn);
+            setTimeout(() => this.removeAttribute('js-init-tabs'), 200);
         });
     }
     /**

package/generated/css/index.css

@@ -129,12 +129,17 @@
     --toggle-dot-active-bg: var(--control-clear-glass-active-bg);
     --toggle-dot-active-bg-dark: var(--control-clear-glass-active-bg-dark);
     --toggle-dot-box-shadow: var(--control-clear-glass-box-shadow);
-    --segented-picker-track-bg: red;
-    --segented-picker-track-border-radius: var(--pill-border-radius);
-    --segented-picker-track-block-size: 3rem;
-    --segented-picker-track-padding-inline: 0.1rem;
-    --segented-picker-track-padding-block: 0.1rem;
-    --segented-picker-button-min-inline-size: 3rem;
+    --tabs-picker-track-gap: 0rem;
+    --palette-picker-track-gap: 1rem;
+    --radio-group-picker-track-gap: 1rem;
+    --tabs-picker-track-border-radius: var(--pill-border-radius);
+    --tabs-picker-track-block-size: 3rem;
+    --tabs-picker-track-padding-inline: 0.1rem;
+    --tabs-picker-track-padding-block: 0.1rem;
+    --tabs-picker-segment-min-inline-size: 3rem;
+    --tabs-picker-segment-max-inline-size: min(20rem, 100svw);
+    --tabs-picker-segment-padding-inline: 1rem;
+    --tabs-picker-segment-padding-block: 0.5rem;
     --label-footnote-font-size: 1rem;
     --label-footnote-line-height: 1.1875;
     --label-footnote-font-weight: 400;
@@ -5275,6 +5280,7 @@
   :where(picker-view)::part(picker-input-stack) {
     display: var(--picker--inputstack-display, grid);
     text-align: var(--picker--inputstack-text-align, );
+    justify-content: var(--picker--inputstack-justify-content, );
     gap: var(--picker--inputstack-gap, );
     flex-flow: var(--picker--inputstack-flex-flow, );
     grid-auto-flow: var(--picker--inputstack-grid-auto-flow, );
@@ -5286,6 +5292,8 @@
     padding-inline: var(--picker--inputstack-padding-inline, );
     padding-block: var(--picker--inputstack-padding-block, );
     overflow: var(--picker--inputstack-overflow, );
+    backdrop-filter: var(--picker--inputstack-backdrop-filter, );
+    box-shadow: var(--picker--inputstack-box-shadow, );
   }
   :where(picker-view)::part(picker-label-stack) {
     display: var(--picker--labelstack-display, none);
@@ -5307,30 +5315,33 @@
   }
   @supports (x: if(else:red)) {
     :where(picker-view) {
-      --picker--inputstack-grid-auto-flow: if(style(--picker-style: segmented): column; );
-      --picker--inputstack-gap: if(style(--picker-style: segmented): 1rem; style(--picker-style: palette): 1rem; style(--picker-style: radio-group): 1rem; );
+      --picker--inputstack-grid-auto-flow: if(style(--picker-style: tabs): column; );
+      --picker--inputstack-gap: if(style(--picker-style: tabs): var(--tabs-picker-track-gap); style(--picker-style: palette): var(--palette-picker-track-gap); style(--picker-style: radio-group): var(--radio-group-picker-track-gap); );
+      --picker--inputstack-justify-content: if(style(--picker-style: tabs): start; style(--picker-style: palette): start; );
+      --picker--inputstack-background: if(style(--picker-style: tabs): light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark)); );
+      --picker--inputstack-backdrop-filter: if(style(--picker-style: tabs): var(--liquid-glass-backdrop-filter); );
+      --picker--inputstack-box-shadow: if(style(--picker-style: tabs): var(--liquid-glass-box-shadow); );
+      --picker--inputstack-border-radius: if(style(--picker-style: tabs): var(--tabs-picker-track-border-radius); );
+      --picker--inputstack-position: if(style(--picker-style: tabs): relative; );
+      --picker--inputstack-min-inline-size: if(style(--picker-style: tabs): calc(var(--tabs-picker-segment-min-inline-size) + 1rem); );
+      --picker--inputstack-block-size: if(style(--picker-style: tabs): var(--tabs-picker-track-block-size); );
+      --picker--inputstack-padding-inline: if(style(--picker-style: tabs): var(--tabs-picker-track-padding-inline); );
+      --picker--inputstack-padding-block: if(style(--picker-style: tabs): var(--tabs-picker-track-padding-block); );
+      --picker--inputstack-overflow: if(style(--picker-style: tabs): auto clip; );
       --picker--inputstack-display: if(style(--picker-style: palette): flex; );
       --picker--inputstack-flex-flow: if(style(--picker-style: palette): row wrap; );
     }
     :where(form picker-view) {
-      --picker--labelstack-display: if(style(--picker-style: segmented): grid; style(--picker-style: palette): grid; style(--picker-style: radio-group): grid; style(--picker-style: menu): grid; style(--picker-style: navigation-link): grid; style(--picker-style: sheet): grid; else: none ;);
-      --picker--inputstack-text-align: if(style(--picker-style: segmented): start; style(--picker-style: palette): start; style(--picker-style: radio-group): start; style(--picker-style: menu): start; style(--picker-style: navigation-link): end; style(--picker-style: sheet): end; );
-      --picker--inputstack-background: if(style(--picker-style: segmented): var(--segented-picker-track-bg); );
-      --picker--inputstack-border-radius: if(style(--picker-style: segmented): var(--segented-picker-track-border-radius); );
-      --picker--inputstack-position: if(style(--picker-style: segmented): relative; );
-      --picker--inputstack-min-inline-size: if(style(--picker-style: segmented): calc(var(--segented-picker-button-min-inline-size) + 1rem); );
-      --picker--inputstack-block-size: if(style(--picker-style: segmented): var(--segented-picker-track-block-size); );
-      --picker--inputstack-padding-inline: if(style(--picker-style: segmented): var(--segented-picker-track-padding-inline); );
-      --picker--inputstack-padding-block: if(style(--picker-style: segmented): var(--segented-picker-track-padding-block); );
-      --picker--inputstack-overflow: if(style(--picker-style: segmented): auto clip; );
-      --picker--host-row-gap: if(style(--picker-style: segmented): var(--labeled-content-row-gap); style(--picker-style: palette): var(--labeled-content-row-gap); style(--picker-style: radio-group): var(--labeled-content-row-gap); style(--picker-style: menu): var(--labeled-content-row-gap); style(--picker-style: navigation-link): var(--labeled-content-row-gap); style(--picker-style: sheet): var(--labeled-content-row-gap); );
-      --picker--host-column-gap: if(style(--picker-style: segmented): var(--labeled-content-column-gap); style(--picker-style: palette): var(--labeled-content-column-gap); style(--picker-style: radio-group): var(--labeled-content-column-gap); style(--picker-style: menu): var(--labeled-content-column-gap); style(--picker-style: navigation-link): var(--labeled-content-column-gap); style(--picker-style: sheet): var(--labeled-content-column-gap); );
-      --picker--host-padding-inline: if(style(--picker-style: segmented): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: palette): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: radio-group): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: menu): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: navigation-link): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: sheet): var(--itempadistart, ) var(--itempadiend, ); );
-      --picker--host-padding-block: if(style(--picker-style: segmented): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: palette): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: radio-group): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: menu): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: navigation-link): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: sheet): var(--itempadbstart, ) var(--itempadbend, ); );
-      --picker--host-border-radius: if(style(--picker-style: segmented): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: palette): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: radio-group): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: menu): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: navigation-link): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: sheet): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); );
-      --picker--host-background: if(style(--picker-style: segmented): var(--itemface, ); style(--picker-style: palette): var(--itemface, ); style(--picker-style: radio-group): var(--itemface, ); style(--picker-style: menu): var(--itemface, ); style(--picker-style: navigation-link): var(--itemface, ); style(--picker-style: sheet): var(--itemface, ); );
-      --picker--host-color: if(style(--picker-style: segmented): var(--itemtext, ); style(--picker-style: palette): var(--itemtext, ); style(--picker-style: radio-group): var(--itemtext, ); style(--picker-style: menu): var(--itemtext, ); style(--picker-style: navigation-link): var(--itemtext, ); style(--picker-style: sheet): var(--itemtext, ); );
-      --picker--host-border: if(style(--picker-style: segmented): var(--itemborder, ); style(--picker-style: palette): var(--itemborder, ); style(--picker-style: radio-group): var(--itemborder, ); style(--picker-style: menu): var(--itemborder, ); style(--picker-style: navigation-link): var(--itemborder, ); style(--picker-style: sheet): var(--itemborder, ); );
+      --picker--labelstack-display: if(style(--picker-style: tabs): grid; style(--picker-style: palette): grid; style(--picker-style: radio-group): grid; style(--picker-style: menu): grid; style(--picker-style: navigation-link): grid; style(--picker-style: sheet): grid; else: none ;);
+      --picker--inputstack-text-align: if(style(--picker-style: tabs): start; style(--picker-style: palette): start; style(--picker-style: radio-group): start; style(--picker-style: menu): start; style(--picker-style: navigation-link): end; style(--picker-style: sheet): end; );
+      --picker--host-row-gap: if(style(--picker-style: tabs): var(--labeled-content-row-gap); style(--picker-style: palette): var(--labeled-content-row-gap); style(--picker-style: radio-group): var(--labeled-content-row-gap); style(--picker-style: menu): var(--labeled-content-row-gap); style(--picker-style: navigation-link): var(--labeled-content-row-gap); style(--picker-style: sheet): var(--labeled-content-row-gap); );
+      --picker--host-column-gap: if(style(--picker-style: tabs): var(--labeled-content-column-gap); style(--picker-style: palette): var(--labeled-content-column-gap); style(--picker-style: radio-group): var(--labeled-content-column-gap); style(--picker-style: menu): var(--labeled-content-column-gap); style(--picker-style: navigation-link): var(--labeled-content-column-gap); style(--picker-style: sheet): var(--labeled-content-column-gap); );
+      --picker--host-padding-inline: if(style(--picker-style: tabs): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: palette): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: radio-group): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: menu): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: navigation-link): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: sheet): var(--itempadistart, ) var(--itempadiend, ); );
+      --picker--host-padding-block: if(style(--picker-style: tabs): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: palette): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: radio-group): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: menu): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: navigation-link): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: sheet): var(--itempadbstart, ) var(--itempadbend, ); );
+      --picker--host-border-radius: if(style(--picker-style: tabs): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: palette): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: radio-group): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: menu): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: navigation-link): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: sheet): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); );
+      --picker--host-background: if(style(--picker-style: tabs): var(--itemface, ); style(--picker-style: palette): var(--itemface, ); style(--picker-style: radio-group): var(--itemface, ); style(--picker-style: menu): var(--itemface, ); style(--picker-style: navigation-link): var(--itemface, ); style(--picker-style: sheet): var(--itemface, ); );
+      --picker--host-color: if(style(--picker-style: tabs): var(--itemtext, ); style(--picker-style: palette): var(--itemtext, ); style(--picker-style: radio-group): var(--itemtext, ); style(--picker-style: menu): var(--itemtext, ); style(--picker-style: navigation-link): var(--itemtext, ); style(--picker-style: sheet): var(--itemtext, ); );
+      --picker--host-border: if(style(--picker-style: tabs): var(--itemborder, ); style(--picker-style: palette): var(--itemborder, ); style(--picker-style: radio-group): var(--itemborder, ); style(--picker-style: menu): var(--itemborder, ); style(--picker-style: navigation-link): var(--itemborder, ); style(--picker-style: sheet): var(--itemborder, ); );
     }
   }
   @supports not (x: if(else:red)) {
@@ -5339,20 +5350,32 @@
     @container style(--picker-style: sheet) {}
     @container style(--picker-style: radio-group) {
       :where(picker-view:not([picker-style])) {
-        --picker--inputstack-gap: 1rem;
+        --picker--inputstack-gap: var(--radio-group-picker-track-gap);
       }
     }
     @container style(--picker-style: palette) {
       :where(picker-view:not([picker-style])) {
         --picker--inputstack-display: flex;
         --picker--inputstack-flex-flow: row wrap;
-        --picker--inputstack-gap: 1rem;
+        --picker--inputstack-gap: var(--palette-picker-track-gap);
+        --picker--inputstack-justify-content: start;
       }
     }
-    @container style(--picker-style: segmented) {
+    @container style(--picker-style: tabs) {
       :where(picker-view:not([picker-style])) {
         --picker--inputstack-grid-auto-flow: column;
-        --picker--inputstack-gap: 1rem;
+        --picker--inputstack-gap: var(--tabs-picker-track-gap);
+        --picker--inputstack-justify-content: start;
+        --picker--inputstack-background: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
+        --picker--inputstack-backdrop-filter: var(--liquid-glass-backdrop-filter);
+        --picker--inputstack-box-shadow: var(--liquid-glass-box-shadow);
+        --picker--inputstack-border-radius: var(--tabs-picker-track-border-radius);
+        --picker--inputstack-position: relative;
+        --picker--inputstack-min-inline-size: calc(var(--tabs-picker-segment-min-inline-size) + 1rem);
+        --picker--inputstack-block-size: var(--tabs-picker-track-block-size);
+        --picker--inputstack-padding-inline: var(--tabs-picker-track-padding-inline);
+        --picker--inputstack-padding-block: var(--tabs-picker-track-padding-block);
+        --picker--inputstack-overflow: auto clip;
       }
     }
     @container style(--picker-style: menu) {
@@ -5425,18 +5448,10 @@
         --picker--host-border: var(--itemborder, );
       }
     }
-    @container style(--picker-style: segmented) {
+    @container style(--picker-style: tabs) {
       :where(form picker-view:not([picker-style])) {
         --picker--labelstack-display: grid;
         --picker--inputstack-text-align: start;
-        --picker--inputstack-background: var(--segented-picker-track-bg);
-        --picker--inputstack-border-radius: var(--segented-picker-track-border-radius);
-        --picker--inputstack-position: relative;
-        --picker--inputstack-min-inline-size: calc(var(--segented-picker-button-min-inline-size) + 1rem);
-        --picker--inputstack-block-size: var(--segented-picker-track-block-size);
-        --picker--inputstack-padding-inline: var(--segented-picker-track-padding-inline);
-        --picker--inputstack-padding-block: var(--segented-picker-track-padding-block);
-        --picker--inputstack-overflow: auto clip;
         --picker--host-row-gap: var(--labeled-content-row-gap);
         --picker--host-column-gap: var(--labeled-content-column-gap);
         --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -5494,7 +5509,7 @@
     }
     :where(picker-view[picker-style=radio-group]) {
       --picker-style: radio-group;
-      --picker--inputstack-gap: 1rem;
+      --picker--inputstack-gap: var(--radio-group-picker-track-gap);
     }
     :where(form picker-view[picker-style=radio-group]) {
       --picker--labelstack-display: grid;
@@ -5512,7 +5527,8 @@
       --picker-style: palette;
       --picker--inputstack-display: flex;
       --picker--inputstack-flex-flow: row wrap;
-      --picker--inputstack-gap: 1rem;
+      --picker--inputstack-gap: var(--palette-picker-track-gap);
+      --picker--inputstack-justify-content: start;
     }
     :where(form picker-view[picker-style=palette]) {
       --picker--labelstack-display: grid;
@@ -5526,22 +5542,25 @@
       --picker--host-color: var(--itemtext, );
       --picker--host-border: var(--itemborder, );
     }
-    :where(picker-view[picker-style=segmented]) {
-      --picker-style: segmented;
+    :where(picker-view[picker-style=tabs]) {
+      --picker-style: tabs;
       --picker--inputstack-grid-auto-flow: column;
-      --picker--inputstack-gap: 1rem;
+      --picker--inputstack-gap: var(--tabs-picker-track-gap);
+      --picker--inputstack-justify-content: start;
+      --picker--inputstack-background: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
+      --picker--inputstack-backdrop-filter: var(--liquid-glass-backdrop-filter);
+      --picker--inputstack-box-shadow: var(--liquid-glass-box-shadow);
+      --picker--inputstack-border-radius: var(--tabs-picker-track-border-radius);
+      --picker--inputstack-position: relative;
+      --picker--inputstack-min-inline-size: calc(var(--tabs-picker-segment-min-inline-size) + 1rem);
+      --picker--inputstack-block-size: var(--tabs-picker-track-block-size);
+      --picker--inputstack-padding-inline: var(--tabs-picker-track-padding-inline);
+      --picker--inputstack-padding-block: var(--tabs-picker-track-padding-block);
+      --picker--inputstack-overflow: auto clip;
     }
-    :where(form picker-view[picker-style=segmented]) {
+    :where(form picker-view[picker-style=tabs]) {
       --picker--labelstack-display: grid;
       --picker--inputstack-text-align: start;
-      --picker--inputstack-background: var(--segented-picker-track-bg);
-      --picker--inputstack-border-radius: var(--segented-picker-track-border-radius);
-      --picker--inputstack-position: relative;
-      --picker--inputstack-min-inline-size: calc(var(--segented-picker-button-min-inline-size) + 1rem);
-      --picker--inputstack-block-size: var(--segented-picker-track-block-size);
-      --picker--inputstack-padding-inline: var(--segented-picker-track-padding-inline);
-      --picker--inputstack-padding-block: var(--segented-picker-track-padding-block);
-      --picker--inputstack-overflow: auto clip;
       --picker--host-row-gap: var(--labeled-content-row-gap);
       --picker--host-column-gap: var(--labeled-content-column-gap);
       --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -5556,6 +5575,30 @@
     --picker--inputstack-display: flex;
     --picker--inputstack-flex-flow: row wrap;
   }
+  :where(picker-view[js-init-tabs]) {
+    --tabbar-after-tabreveal-duration: 0s;
+  }
+  @container style(--picker-style: tabs) {
+    :where(picker-view)::part(picker-input-stack)::after {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.4);
+      pointer-events: none;
+      touch-action: none;
+      position-anchor: --anchor-id;
+      inset: anchor(--anchor-id top) auto auto anchor(--anchor-id left);
+      inline-size: anchor-size();
+      block-size: anchor-size();
+      border-radius: var(--pill-border-radius);
+      z-index: -1;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      :where(picker-view)::part(picker-input-stack)::after {
+        transition: block-size var(--tabbar-after-tabreveal-duration) ease-out allow-discrete, inline-size var(--tabbar-after-tabreveal-duration) ease-out allow-discrete, inset var(--tabbar-after-tabreveal-duration) ease-out allow-discrete;
+      }
+    }
+  }
   @container style(--picker-style: radio-group) {
     picker-view > label:not([slot]) input[type=radio] {
       min-inline-size: 20px;
@@ -5588,15 +5631,23 @@
       outline-offset: 0.1rem;
     }
   }
-  @container style(--picker-style: segmented) {
+  @container style(--picker-style: tabs) {
     :where(picker-view > label:not([slot])) {
+      --label-line-limit: 1;
+      --label-truncation-mode: tail;
       --label-font: callout;
       color: var(--secondary);
-      min-inline-size: var(--segented-picker-button-min-inline-size);
-      background-color: blue;
-      border-radius: inherit;
+      place-content: center;
+      padding-inline: var(--tabs-picker-segment-padding-inline, );
+      padding-block: var(--tabs-picker-segment-padding-block, );
+      min-inline-size: var(--tabs-picker-segment-min-inline-size);
+      max-inline-size: var(--tabs-picker-segment-max-inline-size);
+      border-radius: var(--tabs-picker-track-border-radius);
       inline-size: fit-content;
-      block-size: calc(var(--segented-picker-track-block-size) - var(--segented-picker-track-padding-block) * 2);
+      block-size: calc(var(--tabs-picker-track-block-size) - var(--tabs-picker-track-padding-block) * 2);
+    }
+    :where(picker-view > label:not([slot])[aria-selected=true]) {
+      anchor-name: --anchor-id;
     }
     :where(picker-view > label:not([slot]):has(input[type=radio]:not(:disabled))) {
       cursor: pointer;
@@ -5608,15 +5659,9 @@
     :where(picker-view > label:not([slot]) input[type=radio]) {
       appearance: none;
       margin: 0;
-      inline-size: 2rem;
-      block-size: 2rem;
-      border-radius: 0.4rem;
+      visibility: collapse;
+      position: absolute;
       pointer-events: none;
-      transition: outline 100ms ease-out;
-    }
-    :where(picker-view > label:not([slot]) input[type=radio]):checked {
-      outline: var(--accentColor) solid 0.3rem;
-      outline-offset: 0.1rem;
     }
   }
 }

package/html-data/en.json

@@ -657,7 +657,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n  Attributes: {\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n    'horizontal-radio-group-layout'?: boolean\n    prompt?: string\n    'prompt-icon'?: string\n    label?: string\n    name?: string\n    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    selection?: string\n    searchable?: boolean\n    'current-value-label'?: string\n    'current-value-icon'?: string\n    help?: string // Adds a help tooltip to the trigger of the picker, if style supports one\n    dictionary?: Array<DictEntry> // Renders all options using this array\n    required?: boolean\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    label: HTMLElement[]\n    list: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n  static formAssociated = true\n\n  selection: string\n  readonly template: DocumentFragment\n  readonly pickerStyle:\n    | 'automatic'\n    | 'menu'\n    | 'inline'\n    | 'navigation-link'\n    | 'sheet'\n    | 'radio-group'\n    | 'palette'\n    | 'segmented'\n  readonly name: string // Form participation property\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'picker-view': PickerView // <picker-view></picker-view>\n  }\n}\n\n```\n"
+      "description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n  Attributes: {\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n    'horizontal-radio-group-layout'?: boolean\n    prompt?: string\n    'prompt-icon'?: string\n    label?: string\n    name?: string\n    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    selection?: string\n    searchable?: boolean\n    'current-value-label'?: string\n    'current-value-icon'?: string\n    help?: string // Adds a help tooltip to the trigger of the picker, if style supports one\n    dictionary?: Array<DictEntry> // Renders all options using this array\n    required?: boolean\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot\n    label: HTMLElement[]\n    list: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n  static formAssociated = true\n\n  selection: string\n  readonly template: DocumentFragment\n  readonly pickerStyle:\n    | 'automatic'\n    | 'menu'\n    | 'inline'\n    | 'navigation-link'\n    | 'sheet'\n    | 'radio-group'\n    | 'palette'\n    | 'tabs'\n  readonly name: string // Form participation property\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'picker-view': PickerView // <picker-view></picker-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "plain-button",

package/package.json

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

package/scss/_maps.scss

@@ -1,4 +1,4 @@
-$picker-styles-names: menu, navigation-link, sheet, radio-group, palette, segmented;
+$picker-styles-names: menu, navigation-link, sheet, radio-group, palette, tabs;
 $label-styles-names: icon-only, title-only, title-and-icon;
 $list-styles-names: inset, inset-grouped, sidebar;
 $form-styles-names: inset, inset-grouped, sidebar;

package/scss/base/_root.scss

@@ -244,12 +244,18 @@
 
     --toggle-dot-box-shadow: var(--control-clear-glass-box-shadow);
 
-    --segented-picker-track-bg: red;
-    --segented-picker-track-border-radius: var(--pill-border-radius);
-    --segented-picker-track-block-size: 3rem;
-    --segented-picker-track-padding-inline: 0.1rem;
-    --segented-picker-track-padding-block: 0.1rem;
-    --segented-picker-button-min-inline-size: 3rem;
+    --tabs-picker-track-gap: 0rem;
+    --palette-picker-track-gap: 1rem;
+    --radio-group-picker-track-gap: 1rem;
+
+    --tabs-picker-track-border-radius: var(--pill-border-radius);
+    --tabs-picker-track-block-size: 3rem;
+    --tabs-picker-track-padding-inline: 0.1rem;
+    --tabs-picker-track-padding-block: 0.1rem;
+    --tabs-picker-segment-min-inline-size: 3rem;
+    --tabs-picker-segment-max-inline-size: min(20rem, 100svw);
+    --tabs-picker-segment-padding-inline: 1rem;
+    --tabs-picker-segment-padding-block: 0.5rem;
 
     // @media (prefers-color-scheme: dark) {
     //   @include dark-theme;

package/scss/components/_picker-view.scss

@@ -5,17 +5,31 @@
 @use '../mixins';
 
 $picker-ifs: (
-  segmented: (
+  tabs: (
     --picker--inputstack-grid-auto-flow: column,
-    --picker--inputstack-gap: 1rem,
+    --picker--inputstack-gap: var(--tabs-picker-track-gap),
+    --picker--inputstack-justify-content: start,
+    // copied from tabbar -> @mixin make-floating-tabbar
+    --picker--inputstack-background: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark)),
+    --picker--inputstack-backdrop-filter: var(--liquid-glass-backdrop-filter),
+    --picker--inputstack-box-shadow: var(--liquid-glass-box-shadow),
+    //
+    --picker--inputstack-border-radius: var(--tabs-picker-track-border-radius),
+    --picker--inputstack-position: relative,
+    --picker--inputstack-min-inline-size: calc(var(--tabs-picker-segment-min-inline-size) + 1rem),
+    --picker--inputstack-block-size: var(--tabs-picker-track-block-size),
+    --picker--inputstack-padding-inline: var(--tabs-picker-track-padding-inline),
+    --picker--inputstack-padding-block: var(--tabs-picker-track-padding-block),
+    --picker--inputstack-overflow: auto clip,
   ),
   palette: (
     --picker--inputstack-display: flex,
     --picker--inputstack-flex-flow: row wrap,
-    --picker--inputstack-gap: 1rem,
+    --picker--inputstack-gap: var(--palette-picker-track-gap),
+    --picker--inputstack-justify-content: start,
   ),
   radio-group: (
-    --picker--inputstack-gap: 1rem,
+    --picker--inputstack-gap: var(--radio-group-picker-track-gap),
   ),
   menu: (),
   navigation-link: (),
@@ -24,17 +38,9 @@ $picker-ifs: (
 $picker-elses: ();
 
 $picker-inform-ifs: (
-  segmented: (
+  tabs: (
     --picker--labelstack-display: grid,
     --picker--inputstack-text-align: start,
-    --picker--inputstack-background: var(--segented-picker-track-bg),
-    --picker--inputstack-border-radius: var(--segented-picker-track-border-radius),
-    --picker--inputstack-position: relative,
-    --picker--inputstack-min-inline-size: calc(var(--segented-picker-button-min-inline-size) + 1rem),
-    --picker--inputstack-block-size: var(--segented-picker-track-block-size),
-    --picker--inputstack-padding-inline: var(--segented-picker-track-padding-inline),
-    --picker--inputstack-padding-block: var(--segented-picker-track-padding-block),
-    --picker--inputstack-overflow: auto clip,
     // copy from labeled-content
     --picker--host-row-gap: var(--labeled-content-row-gap),
     --picker--host-column-gap: var(--labeled-content-column-gap),
@@ -232,6 +238,7 @@ $picker-inform-elses: (
         display: var(--picker--inputstack-display, grid);
 
         text-align: var(--picker--inputstack-text-align,);
+        justify-content: var(--picker--inputstack-justify-content,);
 
         gap: var(--picker--inputstack-gap,);
 
@@ -248,6 +255,9 @@ $picker-inform-elses: (
         padding-block: var(--picker--inputstack-padding-block,); //0.1rem;
         overflow: var(--picker--inputstack-overflow,); //auto clip;
 
+        backdrop-filter: var(--picker--inputstack-backdrop-filter,);
+        box-shadow: var(--picker--inputstack-box-shadow,);
+
         // flex-shrink: var(--picker--inputstack-flex-shrink,); //none;
 
         // max-width: var(--picker--inputstack-max-width,); //70%;
@@ -399,6 +409,28 @@ $picker-inform-elses: (
       }
     }
 
+    :where(&[js-init-tabs]) {
+      // transition: all var(--tabbar-after-tabreveal-duration) ease-out allow-discrete;
+      --tabbar-after-tabreveal-duration: 0s;
+    }
+
+    @container style(--picker-style: tabs) {
+      :where(&)::part(picker-input-stack) {
+        // outline: green solid 4px;
+
+        @include mixins.make-pseudo-tracking-thumb(--anchor-id);
+
+        &::after {
+          @media (prefers-reduced-motion: no-preference) {
+            transition:
+              block-size var(--tabbar-after-tabreveal-duration) ease-out allow-discrete,
+              inline-size var(--tabbar-after-tabreveal-duration) ease-out allow-discrete,
+              inset var(--tabbar-after-tabreveal-duration) ease-out allow-discrete;
+          }
+        }
+      }
+    }
+
     > label:not([slot]) {
       @container style(--picker-style: radio-group) {
         input[type='radio'] {
@@ -464,18 +496,37 @@ $picker-inform-elses: (
         // }
       }
 
-      @container style(--picker-style: segmented) {
+      @container style(--picker-style: tabs) {
         :where(&) {
+          --label-line-limit: 1;
+          --label-truncation-mode: tail;
+
           --label-font: callout;
 
           color: var(--secondary);
 
-          min-inline-size: var(--segented-picker-button-min-inline-size);
-          background-color: blue;
-          border-radius: inherit;
+          place-content: center;
+
+          padding-inline: var(--tabs-picker-segment-padding-inline,);
+
+          padding-block: var(--tabs-picker-segment-padding-block,);
+
+          min-inline-size: var(--tabs-picker-segment-min-inline-size);
+
+          max-inline-size: var(--tabs-picker-segment-max-inline-size);
+
+          border-radius: var(--tabs-picker-track-border-radius);
 
           inline-size: fit-content;
-          block-size: calc(var(--segented-picker-track-block-size) - calc(var(--segented-picker-track-padding-block) * 2));
+
+          block-size: calc(var(--tabs-picker-track-block-size) - calc(var(--tabs-picker-track-padding-block) * 2));
+        }
+
+        // &:has(input:checked) {
+        &[aria-selected='true'] {
+          :where(&) {
+            anchor-name: --anchor-id;
+          }
         }
 
         &:has(input[type='radio']:not(:disabled)) {
@@ -495,21 +546,14 @@ $picker-inform-elses: (
         input[type='radio'] {
           :where(&) {
             appearance: none;
-            margin: 0;
 
-            inline-size: 2rem;
-            block-size: 2rem;
-            border-radius: 0.4rem;
+            margin: 0;
 
-            pointer-events: none;
+            visibility: collapse;
 
-            transition: outline 100ms ease-out;
+            position: absolute;
 
-            &:checked {
-              outline: var(--accentColor) solid 0.3rem;
-
-              outline-offset: 0.1rem;
-            }
+            pointer-events: none;
           }
         }
 

package/scss/components/_tab-bar.scss

@@ -1,27 +1,27 @@
 @use '../vars';
 @use '../mixins';
 
-@mixin make-pseudo-tracking-thumb($anchor-name) {
-  :where(&)::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.4);
-    pointer-events: none;
-    touch-action: none;
+// @mixin make-pseudo-tracking-thumb($anchor-name) {
+//   :where(&)::after {
+//     content: '';
+//     display: block;
+//     position: absolute;
+//     background-color: rgba(0, 0, 0, 0.4);
+//     pointer-events: none;
+//     touch-action: none;
 
-    position-anchor: #{$anchor-name};
-    // position-area: center;
-    inset: anchor(#{$anchor-name} top) auto auto anchor(#{$anchor-name} left);
+//     position-anchor: #{$anchor-name};
+//     // position-area: center;
+//     inset: anchor(#{$anchor-name} top) auto auto anchor(#{$anchor-name} left);
 
-    inline-size: anchor-size();
-    block-size: anchor-size();
+//     inline-size: anchor-size();
+//     block-size: anchor-size();
 
-    border-radius: var(--pill-border-radius);
+//     border-radius: var(--pill-border-radius);
 
-    z-index: -1;
-  }
-}
+//     z-index: -1;
+//   }
+// }
 
 @mixin make-floating-tabbar {
   background: light-dark(
@@ -166,7 +166,9 @@
     }
 
     > [is='form-view'] {
-      @include make-pseudo-tracking-thumb(--tab-view-tabbar-selection); // NOTE: before is already taken!
+      :where(&) {
+        @include mixins.make-pseudo-tracking-thumb(--tab-view-tabbar-selection); // NOTE: before is already taken!
+      }
 
       :where(&) {
         @include mixins.contain-overscroll;
@@ -240,7 +242,9 @@
   // ANCHOR
 
   tab-view > [is='sidebar-view'] > scroll-view {
-    @include make-pseudo-tracking-thumb(--tab-view-sidebar-selection); // NOTE: before is already taken!
+    :where(&) {
+      @include mixins.make-pseudo-tracking-thumb(--tab-view-sidebar-selection); // NOTE: before is already taken!
+    }
 
     :where(&)::after {
       background-color: white;

package/scss/mixins/_index.scss

@@ -4,6 +4,28 @@
 @use '../vars';
 @use '../functions';
 
+@mixin make-pseudo-tracking-thumb($anchor-name) {
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    touch-action: none;
+
+    position-anchor: #{$anchor-name};
+    // position-area: center;
+    inset: anchor(#{$anchor-name} top) auto auto anchor(#{$anchor-name} left);
+
+    inline-size: anchor-size();
+    block-size: anchor-size();
+
+    border-radius: var(--pill-border-radius);
+
+    z-index: -1;
+  }
+}
+
 @mixin span-all {
   grid-column: 1 / -1; // span all columns
   grid-row: 1 / -1; // span all rows