@swiftwc/ui 0.0.0-dev.36 → 0.0.0-dev.37

package/generated/snapshot/index.js

@@ -1,4 +1,4 @@
-import { onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
@@ -9,7 +9,7 @@ export class Snapshot {
     }
     static on = new EventTarget();
     static waitReady = Promise.all([
-        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', r, { once: true })),
+        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', () => r(), { once: true })),
         (async () => {
             if (!this.#readyCalled)
                 await this.setOwnConfig();
@@ -45,10 +45,10 @@ export class Snapshot {
         const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
         this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
         this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
-        console.debug(this.#config);
+        debug(this.#config);
     }
     static #handleMediaChange = ({ type, matches, media }, kind) => {
-        console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        debug(`${Snapshot.name} ⚡️ ${type}`);
         this.#breakpoints?.set('fine_dialog_sheet', matches);
         this.on.dispatchEvent(new MediaQueryListEvent(kind, {
             matches,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.36",
+  "version": "0.0.0-dev.37",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -68,6 +68,7 @@
     "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
     "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
     "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",

package/scss/_components.scss

@@ -44,6 +44,8 @@
 @forward 'components/glass-button';
 @forward 'components/glass-prominent-button';
 
+@forward 'components/search-view';
+
 @forward 'components/tool-bar';
 
 @forward 'components/label-view';

package/scss/base/_root.scss

@@ -123,8 +123,8 @@
     // --secondary-label: oklch(0.4962 0 0); // ✅
     // --secondary-label-dark: oklch(0.6334 0 0); // ✅
 
-    --secondary-text: var(--black);
-    --secondary-text-dark: var(--white);
+    // --secondary-text: var(--black);
+    // --secondary-text-dark: var(--white);
 
     --tint: oklch(0.5325 0.1899 257.12);
     --tint1g: color-mix(in oklch, white 70%, var(--tint)); //oklch(0.9208 0.0306 249.69);
@@ -139,17 +139,17 @@
     // --divider: oklch(0.9431 0 0); // ✅
     // --divider-dark: oklch(0.2858 0.0036 286.17); // ✅
 
-    --system-bg: var(--white); // ✅
-    --system-bg-dark: var(--black); // ✅
+    // --system-bg: var(--white); // ✅
+    // --system-bg-dark: var(--black); // ✅
 
     // --primary-bg: oklch(0.9566 0.0067 286.27); // ✅
     // --primary-bg-dark: var(--black); // ✅
 
-    --primary-grouped-bg: var(--white); //0.8136 0.0428 255.03;
-    --primary-grouped-bg-dark: oklch(0.8136 0.0428 255.03);
+    // --primary-grouped-bg: var(--white); //0.8136 0.0428 255.03;
+    // --primary-grouped-bg-dark: oklch(0.8136 0.0428 255.03);
 
-    --secondary-bg: oklch(0.8045 0.0779 73.42);
-    --secondary-bg-dark: oklch(0.8045 0.0779 73.42);
+    // --secondary-bg: oklch(0.8045 0.0779 73.42);
+    // --secondary-bg-dark: oklch(0.8045 0.0779 73.42);
 
     --view-transition-leading-x: -50%;
     --view-transition-principal-x: 0%;
@@ -250,11 +250,13 @@
       --#{$v}-item-padding-block-start: 1rem;
       --#{$v}-item-padding-block-start: 1rem;
 
+      // FIXME: feat-sheet 3/3
       --#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
       --#{$v}-item-color: var(--primary);
       --#{$v}-highlighteditem-background-color: var(--tint1g);
       --#{$v}-highlighteditem-color: ;
 
+      // FIXME: feat-sheet 3/3
       --inset#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
       --inset#{$v}-item-color: var(--primary);
       --inset#{$v}-highlighteditem-background-color: var(--accentColor);

package/scss/colors/_index.scss

@@ -452,7 +452,8 @@ $colors: map.merge(
     // --face2: var(--secondaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
     // --face3: var(--tertiaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
 
-    --background: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
+    // FIXME: feat-sheet 1/3
+    --background: var(--secondaryBackground); //light-dark(var(--secondary-bg), var(--secondary-bg-dark));
     // --face: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
 
     // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
@@ -463,10 +464,8 @@ $colors: map.merge(
     // --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
 
     @include mixins.if-2col-split-view-fits {
-      --face: light-dark(
-        var(--liquid-glass-bg),
-        var(--liquid-glass-bg-dark)
-      ); //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
+      --face: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
+      //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
 
       // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
     }
@@ -474,10 +473,8 @@ $colors: map.merge(
 
   tab-view > [is='sidebar-view'] {
     :where(&) {
-      --face: light-dark(
-        var(--liquid-glass-bg),
-        var(--liquid-glass-bg-dark)
-      ); //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
+      --face: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
+      //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
       // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
     }
 
@@ -493,9 +490,9 @@ $colors: map.merge(
   }
 
   :where([is='tab-bar']) {
-    --toolbaritemtext: light-dark(var(--secondary-text), var(--secondary-text-dark));
-    --toolbaritemhighlighttext: light-dark(var(--secondary-text), var(--secondary-text-dark));
-    --toolbaritemactivetext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemtext: var(--text); //light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemhighlighttext: var(--text); //light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemactivetext: var(--text); //light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
 
   tool-bar-item,

package/scss/components/_index.scss

@@ -10,6 +10,7 @@
   scroll-view,
   body-view,
   tab-view,
+  [is='search-view'],
   [is='sidebar-view'],
   [is='tab-bar'],
   [is='full-screen'],
@@ -43,6 +44,7 @@
   section-view,
   text-field,
   detail-placeholder,
+  sticky-container,
   picker-view {
     :where(&:not([hidden])) {
       display: grid;

package/scss/components/_menu-view.scss

@@ -7,6 +7,7 @@
   menu-view {
     :where(&)::part(menu-summary) {
       transform: var(--menu--summary-scale,);
+
       filter: var(--menu--summary-filter,);
     }
 
@@ -70,6 +71,8 @@
 
       // finally
       --menu--dialog-scale: scale(0);
+      --menu--summary-scale: ;
+      --menu--summary-filter: ;
     }
 
     &[open] {
@@ -82,9 +85,10 @@
 
         --menu--dialog-scale: scale(1);
 
-        @starting-style {
-          --menu--dialog-scale: scale(0);
-        }
+        // BUG: Safari rerenders entire scale animation on every button change
+        // @starting-style {
+        // --menu--dialog-scale: scale(0);
+        // }
       }
     }
 
@@ -96,8 +100,10 @@
       }
     }
 
-    &[open] > &[open],
-    &[open]:not(tool-bar-item &) {
+    // shrink again, if opened outside of a direct parent toolbaritem (they shrink themselves)
+    // &[open] > &[open],
+    // &[open]:not(tool-bar-item &) {
+    &[open]:not(tool-bar-item > &) {
       --menu--summary-scale: scale(0.01);
 
       --menu--summary-filter: blur(10px);

package/scss/components/_picker-view.scss

@@ -79,7 +79,12 @@ $picker-elses: (
       // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
     }
 
-    :where(& > menu-view > button) {
+    :where(& menu-view > menu-view > label-view[slot='label']) {
+      @container style(--picker-style: menu) {
+        margin-inline-start: 2rem;
+      }
+    }
+    :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
       @container style(--picker-style: menu) {
         @include make-button-affordance;
       }
@@ -103,7 +108,11 @@ $picker-elses: (
       }
       @each $v in vars.$picker-styles {
         :where(&[picker-style='#{$v}']) {
-          :where(& > menu-view > button) {
+          :where(& menu-view > menu-view > label-view[slot='label']) {
+            margin-inline-start: 2rem;
+          }
+
+          :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
             @include make-button-affordance;
           }
 

package/scss/components/_scroll-view.scss

@@ -94,6 +94,10 @@
       sticky-container {
         :where(&) {
           @include mixins.make-toolbar-pseudos(bottom);
+
+          &:after {
+            display: none;
+          }
         }
       }
 

package/scss/components/_search-view.scss

@@ -0,0 +1,18 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='search-view'] {
+    :where(&) {
+      height: 30px;
+      // outline: red solid 3px;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,);
+
+      border-radius: var(--pill-border-radius);
+
+      padding-inline: 1rem;
+    }
+  }
+}

package/scss/components/_sheet-view.scss

@@ -60,7 +60,8 @@
       }
 
       // NOTE: Safari-only mod for closing animation
-      @supports not selector(:open) {
+      // @supports not selector(:open) {
+      @supports (hanging-punctuation: first) {
         &:has(&:not([open])) {
           :where(&) {
             overflow: visible;

package/scss/components/_sticky-container.scss

@@ -32,7 +32,7 @@
       }
     }
 
-    @container (max-block-size: 400px) {
+    @container (max-block-size: 25rem) {
       :where(&) {
         position: relative;
         top: unset;

package/scss/placeholders/_lists.scss

@@ -13,9 +13,9 @@
     }
 
     // componentize buttons
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
       // :where(&:is(summary:not([is='disclosure-group'] [is='disclosure-group'] summary))) {
       //   box-shadow: inset 0 0 4px magenta;
       // }
@@ -78,17 +78,17 @@
 
     // SECTION: wire gaps
     :not([slot], section-view) ~ section-view {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         padding-block-start: var(--list--section-gap,);
       }
     }
     section-view:not([slot]) ~ section-view {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         padding-block-start: var(--list--section-gap,);
       }
     }
     section-view:has(~ :not([slot], section-view)) {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         padding-block-end: var(--list--section-gap,);
       }
     }
@@ -98,28 +98,28 @@
     //   }
     // }
     :not([slot], [is='disclosure-group']) ~ [is='disclosure-group'] {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         margin-block-start: var(--list--details-gap,);
       }
     }
     [is='disclosure-group']:not([slot]) ~ [is='disclosure-group'] {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         margin-block-start: calc(var(--list--details-gap, 0px) / 2);
       }
     }
     [is='disclosure-group']:has(~ :not([slot], [is='disclosure-group'])) {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         margin-block-end: var(--list--details-gap,);
       }
     }
     [is='disclosure-group']:has(~ [is='disclosure-group']:not([slot])) {
-      :where(&) {
+      :where(&:not(menu-view *)) {
         margin-block-end: calc(var(--list--details-gap, 0px) / 2);
       }
     }
 
     // SECTION: wire paddings
-    :where(&) {
+    :where(&:not(menu-view *)) {
       --itempadistart: var(--list--item-padding-inline-start, 0rem);
       --itempadiend: calc(var(--list--item-padding-inline-end, 0rem) + var(--list--accessories-size, 0rem));
       --itempadbstart: var(--list--item-padding-block-start,);
@@ -140,7 +140,7 @@
     }
 
     // SECTION: overwrites for details
-    [is='disclosure-group'] {
+    [is='disclosure-group']:not(menu-view *) {
       > :not(summary) {
         :where(&) {
           --itemface: var(--list--details-background-color, var(--list--item-background-color,));
@@ -183,8 +183,8 @@
         }
       }
     }
-    > [is='disclosure-group'],
-    > section-view > [is='disclosure-group'] {
+    > [is='disclosure-group']:not(menu-view *),
+    > section-view > [is='disclosure-group']:not(menu-view *) {
       --disclosure-style: var(--list--rootsummary-marker-display,);
 
       > summary {
@@ -244,9 +244,9 @@
     }
 
     // SECTION: add borders + arrows
-    > :not([slot]) ~ :not([slot], section-view),
-    section-view > :not([slot]) ~ :not([slot], section-view),
-    [is='disclosure-group'] > :not([slot]) ~ :not([slot], section-view) {
+    > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    section-view > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    [is='disclosure-group'] > :not([slot]) ~ :not([slot], section-view, menu-view *) {
       :where(&) {
         position: relative;
 
@@ -292,9 +292,9 @@
     }
 
     // SECTION: sharpen top corners
-    > :not([slot]) ~ :not([slot], section-view),
-    section-view > :not([slot]) ~ :not([slot], section-view),
-    [is='disclosure-group'] > :not([slot]) ~ :not([slot]) {
+    > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    section-view > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    [is='disclosure-group'] > :not([slot]) ~ :not([slot], menu-view *) {
       :where(&) {
         // outline: yellow solid 5px;
         --itemradiustl: var(--list--adjacentitem-border-radius, var(--list--item-border-radius,)); //0 0;
@@ -313,10 +313,10 @@
     }
 
     // SECTION: sharpen bottom corners
-    > :not([slot]):has(~ :not([slot], section-view)),
-    section-view > :not([slot]):has(~ :not([slot], section-view)),
-    [is='disclosure-group'] > :not([slot], summary):has(~ :not([slot])),
-    [is='disclosure-group']:not([data-state='closed']) > summary {
+    > :not([slot]):has(~ :not([slot], section-view, menu-view *)),
+    section-view > :not([slot]):has(~ :not([slot], section-view, menu-view *)),
+    [is='disclosure-group'] > :not([slot], summary, menu-view *):has(~ :not([slot])),
+    [is='disclosure-group']:not([data-state='closed'], menu-view *) > summary {
       :where(&) {
         // outline: green solid 5px;
         --itemradiusbl: var(--list--adjacentitem-border-radius, var(--list--item-border-radius,)); //0 0;
@@ -347,7 +347,7 @@
     // }
 
     // SECTION: style section heders/footers
-    section-view:not(section-view section-view) {
+    section-view:not(section-view section-view, menu-view *) {
       :where(&)::part(section-footer-stack),
       :where(&)::part(section-header-stack) {
         // outline: magenta 4px solid;
@@ -370,7 +370,7 @@
     }
 
     // SECTION: Enable 2-col layout
-    &[columns='2'] {
+    &[columns='2']:not(menu-view *) {
       :where(&) {
         --list--host-grid-template-columns: repeat(2, minmax(0, 1fr));
 
@@ -454,9 +454,9 @@
 
     // SECTION: add accessories
     // &:has(summary[marker-placement='leading']) {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
       // --itempadistart: 4rem;
 
       // --item-accessory-size: 24px;
@@ -521,9 +521,9 @@
 @layer #{vars.$colors-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
       @include mixins.add-focus-visible-state {
         --itemface: var(--itemhighlightface,);
         --itemtext: var(--itemhighlighttext,);
@@ -540,9 +540,9 @@
 @layer #{vars.$ui-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name),
+    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, menu-view *, whatever-name) {
       // :where(&:is(button)) {
       @include mixins.add-jsactive-state {
         --itemface: var(--itemactiveface,);

package/scss/utils/_index.scss

@@ -1,14 +1,28 @@
 @use '../vars';
 
 @layer #{vars.$utils-layer} {
-  :where([background-style='grouped']) {
-    --background: var(--groupedBackground);
-    --secondaryBackground: var(--secondaryGroupedBackground);
-    --tertiaryBackground: var(--tertiaryGroupedBackground);
+  [background-style='grouped'] {
+    :where(&) {
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+      --face: var(--background);
+      // --face2: var(--secondaryBackground);
+      // --face3: var(--tertiaryBackground);
+    }
 
-    --face: var(--background);
-    // --face2: var(--secondaryBackground);
-    // --face3: var(--tertiaryBackground);
+    // FIXME: feat-sheet 2/3
+    [is='sheet-view'] &,
+    [is='full-screen'] &,
+    [is='confirmation-dialog'] &,
+    [is='alert-dialog'] & {
+      :where(&) {
+        // --background: var(--secondaryGroupedBackground);
+        // --secondaryBackground: var(--secondaryGroupedBackground);
+        // --tertiaryBackground: var(--tertiaryGroupedBackground);
+      }
+    }
   }
 
   :where([foreground='secondary']) {

package/scss/utils/_stacks.scss

@@ -3,48 +3,6 @@
 @use 'sass:map';
 @use 'sass:list';
 
-// $h-map: (
-//   leading: start,
-//   center: center,
-//   trailing: end,
-//   fill: stretch, // cross-axis stretch
-// );
-
-// $v-map: (
-//   top: start,
-//   center: center,
-//   bottom: end,
-//   fill: stretch, // cross-axis stretch
-// );
-
-// $placement-map: (
-//   top-leading: start start,
-//   top: start center,
-//   top-trailing: start end,
-//   center-leading: center start,
-//   center: center center,
-//   center-trailing: center end,
-//   bottom-leading: end start,
-//   bottom: end center,
-//   bottom-trailing: end end,
-// );
-
-// $alignment-map: (
-//   leading: start,
-//   center: center,
-//   trailing: end,
-//   fill: stretch, // cross-axis stretch
-// );
-
-// $distribution-map: (
-//   top: start,
-//   center: center,
-//   bottom: end,
-//   fill: stretch,
-//   between: space-between,
-//   evenly: space-evenly,
-// );
-
 $inline-map: (
   leading: (
     (justify-items (start)),
@@ -240,8 +198,12 @@ $v-placement-map: (
     }
 
     // all direct children (excluding stacks) of stacks get margins, also some special cases like a details>summary[padding] etc.
-    :where(& > [padding]:not(&), & > [is='disclosure-group'] > summary[padding]) {
+    :where(& > [padding]:not(&, sticky-container), & > [is='disclosure-group'] > summary[padding]) {
       margin-inline: 1rem;
     }
+
+    :where(& > sticky-container) {
+      padding-inline: 1rem;
+    }
   }
 }

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

@@ -244,6 +244,17 @@
         }
       ]
     },
+    {
+      "name": "search-view",
+      "attributes": [
+        {
+          "name": "role"
+        },
+        {
+          "name": "title-key"
+        }
+      ]
+    },
     {
       "name": "section-view",
       "attributes": [