@ebay/skin 18.1.0 → 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,23 @@
 # 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

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
 
@@ -389,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)
 
@@ -487,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/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,
@@ -891,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;
@@ -1060,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{
@@ -1129,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));
 }
 
@@ -6183,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;
@@ -6192,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{
@@ -8423,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);
 }

package/dist/bundles/skin-full.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,
@@ -398,7 +399,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
     --color-background-attention:var(--color-red-400);
     --color-background-confirmation:var(--color-kiwi-500);
     --color-background-information:var(--color-blue-500);
-    --color-background-education:#2f373c;
+    --color-background-education:var(--color-indigo-800);
     --color-background-accent:var(--color-blue-400);
     --color-background-invalid:var(--color-red-200);
     --color-background-elevated:var(--color-neutral-800);
@@ -527,6 +528,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
         var(--color-ai-solid-green-subtle) 0%,
         var(--color-ai-solid-blue-subtle) 154.5%
     );
+    --color-loading-overlay:var(--color-neutral-900-rgb), 0.7;
     --color-loading-fill:#2d2d2d;
     --color-loading-shimmer:linear-gradient(
         270deg,
@@ -1075,6 +1077,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;
@@ -1244,6 +1250,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{
@@ -1313,7 +1320,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));
 }
 
@@ -6367,7 +6375,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;
@@ -6376,7 +6384,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{
@@ -8607,6 +8615,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);
 }

package/dist/bundles/skin-headless.css

@@ -503,6 +503,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;
@@ -672,6 +676,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{
@@ -741,7 +746,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));
 }
 
@@ -5795,7 +5801,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;
@@ -5804,7 +5810,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{
@@ -8035,6 +8041,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);
 }

package/dist/button/button.css

@@ -39,6 +39,14 @@ button.btn[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;
@@ -302,6 +310,10 @@ a.fake-btn--primary[aria-disabled="true"] {
         --btn-primary-disabled-border-color,
         var(--color-foreground-disabled)
     );
+    color: var(
+        --btn-primary-foreground-color,
+        var(--color-foreground-on-accent)
+    );
 }
 
 a.fake-btn--secondary,
@@ -433,10 +445,15 @@ button.btn--tertiary:not([disabled], [aria-disabled="true"]):active {
 }
 
 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)

package/dist/menu-button/menu-button.css

@@ -109,8 +109,8 @@ div.menu-button__item[role^="menuitem"]:last-child {
     );
 }
 
-.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;
@@ -119,8 +119,8 @@ 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 {