@ebay/skin 18.0.8 → 18.2.0

package/.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -1,7 +1,7 @@
 name: 🐞 Bug report
 description: File a bug/issue
 title: "<component name>: <issue title>"
-labels: ["type: bug", "status: needs triage"]
+labels: ["type: bug", "needs triage"]
 body:
 - type: checkboxes
   id: no-existing-verify

package/.github/ISSUE_TEMPLATE/ENHANCEMENT.yml

@@ -0,0 +1,37 @@
+name: 🌟 New Enhancement request
+description: Request an update to existing component. This is used for changes such as color updates. For new patterns or updated patterns for existing components, use feature request.
+title: "<existing component>: <issue title>"
+labels: ["type: enhancement", "needs triage"]
+body:
+- type: textarea
+  id: enhancement-description
+  attributes:
+    label: Description
+    description: A description of how the enhancement is intended to work.
+  validations:
+    required: false
+- type: textarea
+  id: screenshots
+  attributes:
+    label: Screenshots
+    description: |
+      Add screenshots of the enhancement/module.
+      Tip: You can attach images or log files by pasting or by clicking this area to highlight it and then dragging files in.
+  validations:
+    required: false
+- type: input
+  id: figma-link
+  attributes:
+    label: Figma link
+    placeholder: Please paste in the Figma link for the feature/module.
+- type: checkboxes
+  id: pre-requisites
+  attributes:
+    label: Engineering pre-requisites
+    description: |
+      Please verify what you've completed so far.
+      **Note: a "successful review" means those teams give their blessing for it to proceed to engineering.**
+    options:
+      - label: Supports dark mode.
+      - label: Supports responsive design.
+      - label: Tokens have been provided (or already exist).

package/.github/ISSUE_TEMPLATE/NEW-FEATURE-REQUEST.yml

@@ -1,7 +1,7 @@
 name: 🌟 New Feature request
 description: Request a new feature for Skin
 title: "<existing/proposed component name>: <issue title>"
-labels: ["type: feature", "status: needs triage"]
+labels: ["type: feature", "needs triage"]
 body:
 - type: textarea
   id: feature-description

package/.github/workflows/{jekyll-gh-pages.yml → gh-pages.yml}

@@ -1,5 +1,5 @@
-# Sample workflow for building and deploying a Jekyll site to GitHub Pages
-name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+# Sample workflow for building and deploying a Site site to GitHub Pages
+name: Deploy Site with GitHub Pages dependencies preinstalled
 
 on:
   # Runs on pushes targeting the default branch
@@ -30,6 +30,7 @@ concurrency:
 jobs:
   # Build job
   build:
+    if: github.ref == 'refs/heads/master'
     runs-on: ubuntu-latest
     needs: release
     steps:
@@ -41,12 +42,8 @@ jobs:
         with:
           node-version: '18.x'
       - run: npm i
-      - run: npm run build:ci
-      - name: Build with Jekyll
-        uses: actions/jekyll-build-pages@v1
-        with:
-          source: ./docs
-          destination: ./_site
+      - run: npm run build
+      - run: npm run deploy
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
 
@@ -78,14 +75,8 @@ jobs:
         with:
           node-version: 18.x
           cache: npm
-      - name: Setup rubby
-        uses: ruby/setup-ruby@ec02537da5712d66d4d50a0f33b7eb52773b5ed1
-        with:
-          ruby-version: '3.1'
       - name: Install dependencies
         run: npm i
-      - name: Install ruby dependencies
-        run: bundle install
       - name: Enter prerelease mode
         if: ${{ github.ref != 'refs/heads/master' }}
         run: npm run prerelease:start

package/.github/workflows/pages-html-proofer.yml

@@ -20,17 +20,11 @@ jobs:
         - uses: actions/checkout@v2
         - uses: actions/setup-node@master
           with:
-            node-version: '16.x'
+            node-version: '18.x'
         - run: npm i
-        - run: npm run build:ci
-        - uses: ruby/setup-ruby@v1
+        - run: npm run build
+        - run: npm run deploy:only
+        - uses: chabad360/htmlproofer@master
           with:
-            ruby-version: 3.1
-        - uses: actions/jekyll-build-pages@v1
-          with:
-            source: ./docs
-            destination: ./_site
-            token: ${{ secrets.GITHUB_TOKEN }}
-        - run: bundle config set --local without 'github-pages'
-        - run: bundle install
-        - run: bundle exec htmlproofer ./_site/index.html --disable_external --ignore_empty_alt --allow_hash_href --allow_missing_href
+            directory: "./_site"
+            arguments: --disable_external --ignore_empty_alt --allow_hash_href --allow_missing_href

package/.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx commitlint --edit $1

package/.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install lint-staged

package/.percy.yml

@@ -1,6 +1,7 @@
 version: 2
 snapshot:
     widths: [320,512,768,1280]
+    enableJavaScript: true
 discovery:
     device-pixel-ratio: 2
 storybook:

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Skin Changelog
 
+## 18.2.0
+
+### Minor Changes
+
+-   [#2413](https://github.com/eBay/skin/pull/2413) [`da48437`](https://github.com/eBay/skin/commit/da48437ebc038efa07f210804c7e0804cea1aacd) Thanks [@saiponnada](https://github.com/saiponnada)! - fix(fake-button): updated disabled styles
+
+-   [#2415](https://github.com/eBay/skin/pull/2415) [`9d24641`](https://github.com/eBay/skin/commit/9d24641918147eea5408c91a67d217db02988441) Thanks [@saiponnada](https://github.com/saiponnada)! - feat(education-notice): updated education background color
+
+-   [#2423](https://github.com/eBay/skin/pull/2423) [`632ccc2`](https://github.com/eBay/skin/commit/632ccc24654df15da66d75f666978617a144509f) Thanks [@ArtBlue](https://github.com/ArtBlue)! - feat(table): new module
+
+-   [#2417](https://github.com/eBay/skin/pull/2417) [`ef0418a`](https://github.com/eBay/skin/commit/ef0418a90f63612b3de763b5ead94a5aa01d022e) Thanks [@agliga](https://github.com/agliga)! - feat: chnaged to use marko run instead of jekyll
+
+-   [#2414](https://github.com/eBay/skin/pull/2414) [`ab472df`](https://github.com/eBay/skin/commit/ab472df6ae5c1f4ed32a146eaba7074a32a29e5d) Thanks [@saiponnada](https://github.com/saiponnada)! - fix(docs): improved contrast on highlighted text
+
+### Patch Changes
+
+-   [#2426](https://github.com/eBay/skin/pull/2426) [`108f628`](https://github.com/eBay/skin/commit/108f628e649057421f25b2affc03f672026ad078) Thanks [@agliga](https://github.com/agliga)! - menu-button: added direct selector to icons
+
+## 18.1.0
+
+### Minor Changes
+
+-   [#2403](https://github.com/eBay/skin/pull/2403) [`a7757e5`](https://github.com/eBay/skin/commit/a7757e58f8f2fcca00f5925515779a492e30798d) Thanks [@agliga](https://github.com/agliga)! - details: updated design
+
+-   [#2402](https://github.com/eBay/skin/pull/2402) [`ba747cb`](https://github.com/eBay/skin/commit/ba747cbfa0585cd79c3f2df6251098aa517f2670) Thanks [@agliga](https://github.com/agliga)! - progress-spinner: fixed wobble
+
+-   [#2407](https://github.com/eBay/skin/pull/2407) [`2cbfe64`](https://github.com/eBay/skin/commit/2cbfe645fa0f0f06cc25ae042debb194e4ad6b71) Thanks [@agliga](https://github.com/agliga)! - feat(utility): added image disabled utility class
+
+-   [#2407](https://github.com/eBay/skin/pull/2407) [`ac4e7c0`](https://github.com/eBay/skin/commit/ac4e7c0e16c05e916069b73548bb8102d6e5241d) Thanks [@agliga](https://github.com/agliga)! - feat(icons): added and updated icons
+
+-   [#2409](https://github.com/eBay/skin/pull/2409) [`88d4f0e`](https://github.com/eBay/skin/commit/88d4f0e4a5f2cda3aeb9f5c55b0e11c5fdacae27) Thanks [@agliga](https://github.com/agliga)! - carousel: preserve /_!Y _/ comments
+
+-   [#2367](https://github.com/eBay/skin/pull/2367) [`923a83f`](https://github.com/eBay/skin/commit/923a83f4e796a2692bbaa7ca0c7ae7c1324e9f00) Thanks [@agliga](https://github.com/agliga)! - docs: updated urls to be opensource.ebay.com
+
+-   [#2406](https://github.com/eBay/skin/pull/2406) [`f151214`](https://github.com/eBay/skin/commit/f1512145fa8f67fa3d263df940858f85b9c6843c) Thanks [@ArtBlue](https://github.com/ArtBlue)! - fix(toggle-button-group): fixed buttons per row and added min layout exceptions
+
+### Patch Changes
+
+-   [#2405](https://github.com/eBay/skin/pull/2405) [`d67e8ea`](https://github.com/eBay/skin/commit/d67e8ea906d40736e727c8d3547416f1ea5980ba) Thanks [@HenriqueLimas](https://github.com/HenriqueLimas)! - Use 100% width on input for fluid variant
+
+-   [#2373](https://github.com/eBay/skin/pull/2373) [`c09c885`](https://github.com/eBay/skin/commit/c09c885b914a23f1feb0aa12c2e78f3c9ef91255) Thanks [@cordeliadillon](https://github.com/cordeliadillon)! - docs: update Design System name mapping for modules
+
 ## 18.0.8
 
 ### Patch Changes

package/CONTRIBUTING.md

@@ -47,11 +47,6 @@ This page contains instructions and guidelines for anybody contributing code to
 ## System Requirements
 
 -   [Node.js](https://nodejs.org/en/)
--   [Ruby](https://www.ruby-lang.org/en/)<sup>\*</sup>
--   [Bundler](http://bundler.io)
--   [Jekyll](https://jekyllrb.com) ([install via Bundler](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#step-2-install-jekyll-using-bundler))
-
-<sup>\*</sup> macOS users may encounter issues with their pre-installed system version of Ruby; in which case we recommend [rbenv](https://github.com/rbenv/rbenv) as a way to manage your Ruby environment.
 
 ## Contribution Steps
 
@@ -97,7 +92,6 @@ Add applicable metadata about the component to the `module_metadata` map in [doc
 ```yaml
 your-module-name: # the Skin module name
     ds-component: # module's relationship with the eBay Design System
-        group: # eBay Design System component group
         name: # eBay Design System component name
         version: # version of the eBay Design System component implemented in Skin
     status: # status, e.g. "beta", "deprecated", "in-progress"
@@ -390,34 +384,22 @@ As internal contributors may see in `package.json`, there are two other scripts,
 
 First, be sure to Run `npm install` to install all dependencies from NPM.
 
-We use [Jekyll](http://jekyllrb.com) to generate HTML from templates, [LESS](https://lesscss.org) to preprocess and compile CSS, and [Babel](https://babeljs.io/) with [Webpack](https://webpack.js.org/) to compile and bundle JS. The website can be run and hosted locally (see next section) during development.
-
-We use [Bundler](http://bundler.io) to install, update and run Jekyll in our dev environment. This ensures the same Jekyll environment as GitHub Pages. GitHub have created a nice guide called [Setting up your GitHub Pages site locally with Jekyll](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/) which we recommend you follow.
-
-Once Jekyll is setup successfully, running a build should create the following file structure under `./_site`:
+We use [Marko Run](https://github.com/marko-js/run) to generate HTML from templates, [SASS](https://sass-lang.com/) to preprocess and compile CSS. The website can be run and hosted locally (see next section) during development.
 
--   `./_site/static/common/docs.min.js`
-    -   this is the Babel & Webpack output of `./docs/src/js/main.js`
--   `./_site/static/dsx/docs.min.css`
-    -   this is the SASS compiler output of `./docs/src/sass/dsx.less`
--   `./_site/static/dsx/skin.min.css`
-    -   the full, minified skin css bundle (only used in development environment)
--   `./_site/index.html`
-    -   homepage
--   `./_site/archive`
-    -   archive of old versions of website
+In order to run a dev server of the site, you can run `npm run dev`. This launches the server which should allow you to see updates as you change your CSS or HTML. This will launch the site at http://localhost:3000
 
-This is the exact same structure that will be generated by GitHub Pages.
+Our site source is located in `src/routes`. These provide the basic site routing. Inside `src/components` are our common components which we use to show repeated parts of the site (such as syntax highlighting our code). Finally, all top level modules are located in `src/modules`. All these files will be used as the component name as well as in the nav. These are auto discoverable.
 
-Our GitHub Pages source is located in the `docs` folder.
+To build the site, run `npm run deploy`. This will create all the site assets in `_site`.
 
-In order to start developing the website simply run: `npm start` which will build, bundle and run a BrowserSync server at http://localhost:3000.
+All CSS files are read directly from the source from `src/bundles/skin-full.scss`
 
 ## Scripts
 
 The following scripts are available via npm:
 
--   `npm start` - Runs a build and starts local BrowserSync server on port 3000
+-   `npm start` - Builds the server and launches it at post 3000 (This does not have live reloading)
+-   `npm run dev` - Starts local BrowserSync server on port 3000 (This has live reloading)
 -   `npm test` - Runs a build and lints CSS and LESS files
 -   `npm run build` - Runs a build only (no server)
 
@@ -488,7 +470,6 @@ Git tags to the rescue! Git tags allow us to go back to any moment in time that
 The website archive under `/docs/archive` should be updated each time a minor or major release is published.
 
 1. In a local branch, checkout the tag of the previous version, e.g. `git checkout v10.7.5`
-1. Run `yarn`
-1. Run `yarn build`
-1. Copy relevant generated files only from `/_site` to a subfolder of `/docs/archive`
+1. Run `npm i`
+1. Run `npx marko-run build -o /docs/archive/v0.7.5`
 1. Create a pull request

package/README.md

@@ -4,7 +4,7 @@
 
 > Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
 
-Please visit the [Skin website](https://ebay.github.io/skin) for all end-user documentation.
+Please visit the [Skin website](https://opensource.ebay.com/skin/) for all end-user documentation.
 
 ## License
 
@@ -12,7 +12,7 @@ Skin is [MIT](LICENSE) licensed.
 
 ## Install
 
-Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://ebay.github.io/skin#cdn).
+Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://opensource.ebay.com/skin/#cdn).
 
 ## Versioning
 
@@ -28,7 +28,7 @@ More detailed insight into our versioning process can be found in our [contribut
 
 Please refer to our [releases](https://github.com/eBay/skin/releases) page to view the change log for current and past releases.
 
-Please refer to our [web archive](https://ebay.github.io/skin/archive/) for past examples and documentation.
+Please refer to our [web archive](https://opensource.ebay.com/skin/archive/) for past examples and documentation.
 
 ## Roadmap
 

package/dist/bundles/skin-default.css

@@ -210,7 +210,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-background-attention:var(--color-red-600);
   --color-background-confirmation:var(--color-kiwi-600);
   --color-background-information:var(--color-blue-500);
-  --color-background-education:#ecf7fe;
+  --color-background-education:var(--color-blue-100);
   --color-background-accent:var(--color-blue-500);
   --color-background-invalid:var(--color-red-200);
   --color-background-elevated:var(--color-neutral-100);
@@ -343,6 +343,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   );
   --shadow-subtle:0px 4px 12px 0px rgba(0, 0, 0, 0.07);
   --shadow-strong:0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
+  --color-loading-overlay:var(--color-neutral-100-rgb), 0.7;
   --color-loading-fill:#ededed;
   --color-loading-shimmer:linear-gradient(
       270deg,
@@ -385,7 +386,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
       var(--color-ai-solid-green-subtle) 66%,
       var(--color-ai-solid-green-subtle) 100%
   );
-  --color-icon-disabled-filter:grayscale(1) opacity(0.25);
+  --color-media-disabled-filter:grayscale(1) opacity(0.25);
 }
 @font-face{
   font-display:swap;
@@ -525,6 +526,10 @@ a:not([href]),a[aria-disabled=true]{
   object-fit:contain;
 }
 
+.image-disabled{
+  filter:var(--color-media-disabled-filter);
+}
+
 .text-truncate{
   overflow:hidden;
   text-overflow:ellipsis;
@@ -887,6 +892,10 @@ button.btn[aria-disabled=true],button.btn[disabled]{
   color:var(--expand-btn-disabled-foreground-color, var(--color-foreground-disabled));
 }
 
+a.fake-btn:not([href]),a.fake-btn[aria-disabled=true]{
+  color:var(--link-foreground-color-disabled, var(--color-foreground-disabled));
+}
+
 a.fake-btn--borderless,button.btn--borderless{
   border-color:transparent;
   min-width:auto;
@@ -1056,6 +1065,7 @@ button.btn--primary[aria-disabled=true] svg.icon,button.btn--primary[disabled] s
 a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
   background-color:var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
   border-color:var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
+  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
 }
 
 a.fake-btn--secondary,button.btn--secondary{
@@ -1125,7 +1135,8 @@ a.fake-btn--tertiary[href]:active,button.btn--tertiary:not([disabled],[aria-disa
   background-color:var(--color-state-secondary-active);
 }
 
-a.fake-btn--tertiary:not([href]),button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
+a.fake-btn--tertiary:not([href]),a.fake-btn--tertiary[aria-disabled=true],button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
+  border-color:var(--expand-btn-disabled-border-color, var(--color-stroke-disabled));
   color:var(--btn-tertiary-disabled-foreground-color, var(--color-background-disabled));
 }
 
@@ -2501,13 +2512,15 @@ a.cta-btn--large{
 }
 summary.details__summary{
   align-items:center;
+  border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
   box-sizing:border-box;
-  color:var(--details-summary-foreground-color, var(--color-foreground-accent));
-  display:inline-block;
+  color:var(--details-summary-foreground-color, var(--color-foreground-primary));
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  font-weight:var(--font-weight-bold);
   list-style-position:inside;
   list-style-type:none;
   padding:12px 8px;
-  width:100%;
 }
 summary.details__summary:before{
   content:none;
@@ -2516,11 +2529,17 @@ summary.details__summary::-webkit-details-marker{
   display:none;
 }
 summary.details__summary:focus,summary.details__summary:hover{
-  color:var(--color-state-accent-hover);
+  background-color:var(--color-state-secondary-hover);
+  outline:1;
+}
+summary.details__summary:active{
+  background-color:var(--color-state-secondary-active);
+  outline:1;
 }
 
 summary.details__summary--center{
-  text-align:center;
+  justify-content:center;
+  width:100%;
 }
 
 summary.details__summary--small{
@@ -2533,7 +2552,7 @@ span.details__icon{
           margin-inline-start:8px;
 }
 span.details__icon[hidden]{
-  display:inline-block;
+  display:inline-flex;
 }
 
 details.details[open] span.details__icon{
@@ -4967,7 +4986,7 @@ svg.icon--64-colored{
   height:64px;
 }
 svg.icon--disabled{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 svg.icon--attention-filled{
   color:var(--color-foreground-attention);
@@ -6171,7 +6190,7 @@ div.menu-button__item[role^=menuitem]:last-child{
   border-bottom-right-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
 }
 
-.fake-menu-button__item svg.icon--16,.menu-button__item svg.icon--16{
+.fake-menu-button__item>svg.icon--16,.menu-button__item>svg.icon--16{
   align-self:center;
   fill:currentColor;
   margin:0 auto;
@@ -6180,7 +6199,7 @@ div.menu-button__item[role^=menuitem]:last-child{
   stroke-width:0;
 }
 
-.fake-menu-button__item svg.icon--16:last-child,.menu-button__item svg.icon--16:last-child{
+.fake-menu-button__item>svg.icon--16:last-child,.menu-button__item>svg.icon--16:last-child{
   margin-left:var(--spacing-100);
 }
 a.fake-menu-button__item{
@@ -6874,7 +6893,7 @@ button.icon-btn.panel-dialog__close{
 }
 
 .phone-input--disabled span.fflag,.phone-input--disabled svg.flag{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox{
@@ -7251,7 +7270,7 @@ button.icon-btn.panel-dialog__close{
     transform:rotate(2turn);
   }
 }
-.progress-spinner>svg.icon.icon--spinner-20,.progress-spinner>svg.icon.icon--spinner-24,.progress-spinner>svg.icon.icon--spinner-30{
+.progress-spinner>svg.icon.icon--20,.progress-spinner>svg.icon.icon--24,.progress-spinner>svg.icon.icon--30{
   height:inherit;
   margin:0;
   max-height:inherit;
@@ -8411,6 +8430,62 @@ span.switch__control:focus:not(:focus-visible){
     opacity:1;
   }
 }
+:root{
+  --density-compact-cell-height:36px;
+  --density-default-cell-height:48px;
+  --density-relaxed-cell-height:56px;
+}
+
+.table{
+  overflow-x:auto;
+  position:relative;
+}
+
+.table table{
+  border-collapse:collapse;
+  border-spacing:0;
+  width:100%;
+}
+
+.table td,.table th{
+  background-color:var(--color-background-primary);
+  border-bottom:1px solid var(--color-stroke-subtle);
+  box-sizing:border-box;
+  height:var(--density-default-cell-height);
+  max-width:400px;
+  min-width:124px;
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-200);
+}
+
+.table__cell{
+  text-align:left;
+}
+
+.table [data-type=numeric],.table__cell--numeric{
+  text-align:right;
+}
+
+.table td:last-child,.table th:last-child{
+  -webkit-padding-end:0;
+          padding-inline-end:0;
+}
+
+.table--density-compact td,.table--density-compact th{
+  height:var(--density-compact-cell-height);
+}
+
+.table--density-relaxed td,.table--density-relaxed th{
+  height:var(--density-relaxed-cell-height);
+}
+
+.table--mode-selection td:first-child,.table--mode-selection th:first-child{
+  min-width:unset;
+}
+
+.table tbody th{
+  font-weight:400;
+}
 .fake-tabs,.tabs{
   margin-top:var(--spacing-200);
 }
@@ -8636,7 +8711,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   text-decoration:underline;
 }
 
-.textbox--fluid{
+.textbox--fluid,.textbox--fluid .textbox__control{
   width:100%;
 }
 :root{
@@ -8985,7 +9060,7 @@ button.toast-dialog__close>svg{
   --row-list-toggle-buttons-sm:2;
   --row-list-toggle-buttons-md:3;
   --row-list-toggle-buttons-xl:5;
-  --row-gallery-toggle-buttons-min:1;
+  --row-gallery-toggle-buttons-min:2;
   --row-gallery-toggle-buttons-xs:2;
   --row-gallery-toggle-buttons-sm:3;
   --row-gallery-toggle-buttons-md:4;
@@ -8996,6 +9071,30 @@ button.toast-dialog__close>svg{
   container:toggle-buttons-container/inline-size;
 }
 
+@supports not (contain:inline-size){
+  @media (max-width:320px){
+    .toggle-button-group[data-columns-min="1"] ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-min="2"] ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-min="3"] ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+  }
+}
+@container toggle-buttons-container (inline-size < 320px){
+  .toggle-button-group[data-columns-min="1"] ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .toggle-button-group[data-columns-min="2"] ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .toggle-button-group[data-columns-min="3"] ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+}
 .toggle-button-group ul{
   display:grid;
   gap:var(--spacing-100);
@@ -9019,12 +9118,20 @@ button.toast-dialog__close>svg{
   max-width:100%;
   width:100%;
 }
+.toggle-button-group--list-layout ul{
+  grid-template-columns:repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button{
   justify-content:left;
   max-width:100%;
   min-width:auto;
 }
 
+.toggle-button-group--gallery-layout ul{
+  grid-template-columns:repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li{
   max-width:100%;
 }