@ebay/skin 18.1.0 → 18.2.0

package/dist/table/table.css

@@ -0,0 +1,62 @@
+: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;
+}

package/dist/tokens/evo-dark.css

@@ -8,7 +8,7 @@
         --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);
@@ -137,6 +137,7 @@
             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,

package/dist/tokens/evo-light.css

@@ -7,7 +7,7 @@
     --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);
@@ -141,6 +141,7 @@
     --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,

package/index.browser.json

@@ -61,6 +61,7 @@
     "require: ./star-rating.js",
     "require: ./star-rating-select.js",
     "require: ./switch.js",
+    "require: ./table.js",
     "require: ./tabs.js",
     "require: ./textbox.js",
     "require: ./toast-dialog.js",

package/index.css

@@ -59,6 +59,7 @@
 @import "./star-rating.css";
 @import "./star-rating-select.css";
 @import "./switch.css";
+@import "./table.css";
 @import "./tabs.css";
 @import "./textbox.css";
 @import "./toast-dialog.css";

package/index.js

@@ -59,6 +59,7 @@ require('./split-button.js');
 require('./star-rating.js');
 require('./star-rating-select.js');
 require('./switch.js');
+require('./table.js');
 require('./tabs.js');
 require('./textbox.js');
 require('./toast-dialog.js');

package/index.mjs

@@ -59,6 +59,7 @@ import './split-button.css';
 import './star-rating.css';
 import './star-rating-select.css';
 import './switch.css';
+import './table.css';
 import './tabs.css';
 import './textbox.css';
 import './toast-dialog.css';

package/lint.log

@@ -1,9 +1,9 @@
 
-/home/runner/work/skin/skin/docs/src/js/main.js
+/home/runner/work/skin/skin/src/routes/main.js
     1:1   warning  Unused eslint-disable directive (no problems were reported from 'no-console')
-   41:56  warning  Unused eslint-disable directive (no problems were reported from 'no-console')
-  287:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
-  289:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
+   51:56  warning  Unused eslint-disable directive (no problems were reported from 'no-console')
+  317:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
+  319:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
 
 ✖ 4 problems (0 errors, 4 warnings)
   0 errors and 4 warnings potentially fixable with the `--fix` option.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "18.1.0",
+    "version": "18.2.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -16,46 +16,34 @@
     },
     "scripts": {
         "prepare": "husky install",
-        "start": "npm run build && npm-run-all --parallel browser-sync bundle:css:watch postcss:bundle:watch postcss:docs:watch",
+        "preview": "marko-run preview",
+        "start": "marko-run",
         "test": "npm run build:css",
+        "deploy": "node scripts/jekyll-config && BASE_URL=/skin/ marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/archive && touch _site/.nojekyll",
         "prebuild": "npm run clean",
         "prepublishOnly": "node scripts gen",
         "postpublish": "node scripts clean",
-        "build": "npm run build:css && npm run lint:js && npm run bundle && npm run build:site && npm run copy",
-        "build:css": "npm run lint:sass && rimraf dist && npm run bundle:css && npm run postcss && node scripts/add-y-comments.js && prettier dist --write && npm run lint:css",
-        "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
-        "build:jekyll": "node scripts/jekyll-config && bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
-        "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
-        "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./docs/storybook",
+        "build": "npm run build:css && npm run lint:js && npm run copy",
+        "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && node scripts/add-y-comments.js && prettier dist --write && npm run lint:css",
+        "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
-        "compileModule": "npx gulp compileModule --name $NAME",
-        "browser-sync": "browser-sync start -s _site --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --port 3000",
-        "bundle": "npm run bundle:js",
-        "bundle:js": "npm run transpile && webpack",
-        "bundle:css": "sass src/sass:dist ./docs/src/sass/index.scss:./docs/static/docs.css --no-source-map",
-        "bundle:css:watch": "npm run bundle:css -- --watch",
-        "postcss:bundle:watch": "npm run postcss:bundle -- --watch",
-        "postcss:docs:watch": "postcss --env production ./docs/static/*.css -d ./_site/static --watch",
-        "postcss": "npm run postcss:dist && npm run postcss:docs && npm run postcss:bundle",
-        "postcss:dist": "postcss dist/**/*.css -r ",
-        "postcss:bundle": "postcss --env production ./dist/bundles/*.css -d ./docs/static/ --ext .min.css",
-        "postcss:docs": "postcss --env production ./docs/static/docs.css -o ./docs/static/docs.min.css",
+        "bundle": "sass src/sass:dist --no-source-map",
+        "postcss": "postcss dist/**/*.css -r ",
         "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
         "lint:sass": "stylelint docs/src/sass src/sass --config .stylelintrc",
         "lint:css": "stylelint dist --config .stylelintrc",
-        "lint:js": "eslint 'docs/src/js/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
+        "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
         "format": "npx prettier --write .",
         "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:tokensToDist",
         "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins",
         "copy:assetsToStorybook": "node scripts storybook-copy",
         "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",
-        "copy:svgToDocs": "ncp src/svg docs/static && ncp src/svg/icons.svg docs/_includes/master-icons.html",
-        "copy:tokensToDocs": "ncp src/tokens docs/static",
+        "copy:svgToDocs": "ncp src/svg src/routes/static && ncp src/svg/icons.svg src/components/master-icons.marko",
+        "copy:tokensToDocs": "ncp src/tokens src/routes/static",
         "copy:tokensToDist": "ncp src/tokens dist/tokens",
         "verify": "node scripts verify",
-        "version": "npm run build:storybook && npm run build && git add -A dist docs && changeset version && node scripts/jekyll-config && npm i --package-lock-only",
+        "version": "npm run build:storybook && npm run build && git add -A dist src && changeset version && node scripts/jekyll-config && npm i --package-lock-only",
         "release": "npm run build && changeset publish",
-        "transpile": "babel docs/src/js --out-dir docs/_babel",
         "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
         "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
@@ -69,73 +57,78 @@
         "prerelease:end": "changeset pre exit || :"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.7",
-        "@babel/core": "^7.24.7",
-        "@babel/preset-env": "^7.24.7",
+        "@babel/cli": "^7.24.8",
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.4",
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "^2.27.7",
-        "@commitlint/cli": "^19.3.0",
-        "@commitlint/config-conventional": "^19.2.2",
+        "@commitlint/cli": "^19.4.1",
+        "@commitlint/config-conventional": "^19.4.1",
         "@ebay/browserslist-config": "^2.9.0",
-        "@floating-ui/dom": "^1.6.7",
-        "@percy/cli": "^1.28.8",
-        "@percy/storybook": "^6.0.0",
-        "@storybook/html": "^8.1.11",
-        "@storybook/html-webpack5": "^8.1.11",
-        "autoprefixer": "^10.4.19",
+        "@floating-ui/dom": "^1.6.10",
+        "@marko/run": "^0.4.5",
+        "@marko/run-adapter-static": "^0.1.7",
+        "@percy/cli": "^1.29.2",
+        "@percy/storybook": "^6.0.2",
+        "@storybook/html": "^8.2.9",
+        "@storybook/html-webpack5": "^8.2.9",
+        "autoprefixer": "^10.4.20",
         "babel-loader": "^9.1.3",
-        "browser-sync": "^3.0.2",
         "btoa": "^1",
+        "clean-css": "^5",
         "cross-env": "^7",
-        "cssnano": "^7.0.3",
-        "eslint": "^9.6.0",
+        "cssnano": "^7.0.5",
+        "eslint": "^9.9.1",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^9",
         "eslint-plugin-prettier": "^5",
+        "gh-pages": "^6.1.1",
         "gulp": "^5",
-        "gulp-banner": "~0.1.3",
-        "gulp-clean-css": "^4",
-        "gulp-rename": "^2",
-        "husky": "^9.0.11",
-        "jekyll": "^3.0.0-beta1",
-        "jsdom": "^24.1.0",
-        "lint-staged": "^15.2.7",
-        "makeup-alert-dialog": "~0.3.0",
-        "makeup-combobox": "~0.4.0",
-        "makeup-confirm-dialog": "~0.3.0",
-        "makeup-dialog": "~0.5.0",
-        "makeup-dialog-button": "~0.4.0",
-        "makeup-drawer-dialog": "0.2.0",
-        "makeup-expander": "~0.11.0",
+        "husky": "^9.1.5",
+        "jsdom": "^25.0.0",
+        "lint-staged": "^15.2.9",
+        "makeup-alert-dialog": "~0.3.1",
+        "makeup-combobox": "~0.4.2",
+        "makeup-confirm-dialog": "~0.3.1",
+        "makeup-dialog": "~0.5.1",
+        "makeup-dialog-button": "~0.4.1",
+        "makeup-drawer-dialog": "0.2.1",
+        "makeup-expander": "~0.11.1",
         "makeup-floating-label": "~0.4.2",
-        "makeup-fullscreen-dialog": "0.2.0",
-        "makeup-input-dialog": "0.2.0",
+        "makeup-fullscreen-dialog": "0.2.1",
+        "makeup-input-dialog": "0.2.1",
         "makeup-key-emitter": "~0.4.0",
-        "makeup-lightbox-dialog": "0.2.0",
-        "makeup-listbox": "~0.4.0",
-        "makeup-listbox-button": "~0.5.0",
+        "makeup-lightbox-dialog": "0.2.1",
+        "makeup-listbox": "~0.4.1",
+        "makeup-listbox-button": "~0.5.2",
         "makeup-menu": "~0.4.1",
-        "makeup-menu-button": "~0.4.1",
-        "makeup-modal": "~0.5.0",
-        "makeup-panel-dialog": "0.2.0",
+        "makeup-menu-button": "~0.4.2",
+        "makeup-modal": "~0.5.1",
+        "makeup-panel-dialog": "0.2.1",
         "makeup-prevent-scroll-keys": "~0.3.0",
         "makeup-roving-tabindex": "~0.7.0",
-        "makeup-snackbar-dialog": "0.2.0",
+        "makeup-snackbar-dialog": "0.2.1",
         "makeup-switch": "~0.3.0",
-        "makeup-toast-dialog": "0.2.0",
+        "makeup-toast-dialog": "0.2.1",
+        "marko": "^5.35.11",
         "mkdirp": "^3",
         "ncp": "^2",
         "npm-run-all": "^4",
+        "postcss": "^8.4.41",
+        "postcss-mixins": "^10.0.1",
+        "postcss-nested": "^6.2.0",
+        "postcss-simple-vars": "^7.0.1",
         "postcss-cli": "^11.0.0",
         "postcss-comment": "^2.0.0",
         "postcss-import": "^16.1.0",
         "postcss-loader": "^8.1.1",
-        "prettier": "^3.3.2",
-        "rimraf": "^5",
-        "sass": "^1.77.6",
-        "sass-loader": "^14.2.1",
-        "storybook": "^8.1.11",
-        "stylelint": "^16.6.1",
+        "prettier": "^3.3.3",
+        "prismjs": "^1.29.0",
+        "rimraf": "^6",
+        "sass": "^1.77.8",
+        "sass-loader": "^16.0.1",
+        "storybook": "^8.2.9",
+        "stylelint": "^16.9.0",
         "stylelint-config-prettier-scss": "^1.0.0",
         "stylelint-config-standard": "^36",
         "stylelint-config-standard-scss": "^13.1.0",
@@ -143,9 +136,9 @@
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
         "svgo": "^3.3.2",
-        "webpack": "^5.92.1",
+        "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4",
-        "winston": "^3.13.0",
+        "winston": "^3.14.2",
         "xmlserializer": "^0.6.1",
         "yargs": "^17.7.2"
     },
@@ -171,11 +164,5 @@
         "*.{js,css,md,scss,json}": "prettier --write",
         "*.{css,scss}": "stylelint --config .stylelintrc"
     },
-    "dependencies": {
-        "postcss": "^8.4.39",
-        "postcss-mixins": "^10.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-simple-vars": "^7.0.1"
-    },
     "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }

package/scripts/generate-flags.js

@@ -8,10 +8,15 @@ const svgFlagDir = path.resolve(currentDir, "src", "svg", "flag");
 const masterFlagPath = path.resolve(svgDir, "flags.svg");
 const jsdom = require("jsdom");
 const { JSDOM } = jsdom;
-const configFilePath = path.resolve(currentDir, "docs", "_data", "flags.yaml");
+const configFilePath = path.resolve(
+    currentDir,
+    "src",
+    "routes",
+    "_index",
+    "+meta.json",
+);
 const file = fs.readFileSync(configFilePath, "utf8");
-const YAML = require("yaml");
-const config = YAML.parse(file);
+const config = JSON.parse(file);
 const { html2xhtml } = require("./util");
 
 async function getFiles(dir) {

package/scripts/generate-images.js

@@ -8,10 +8,15 @@ const masterIconPath = path.resolve(svgDir, "icons.svg");
 const jsdom = require("jsdom");
 const prettier = require("prettier");
 const { JSDOM } = jsdom;
-const configFilePath = path.resolve(currentDir, "docs", "_data", "icons.yaml");
+const configFilePath = path.resolve(
+    currentDir,
+    "src",
+    "routes",
+    "_index",
+    "+meta.json",
+);
 const file = fs.readFileSync(configFilePath, "utf8");
-const YAML = require("yaml");
-const config = YAML.parse(file);
+const config = JSON.parse(file);
 const { html2xhtml } = require("./util");
 const { query } = require("winston");
 const { size } = require("@floating-ui/dom");
@@ -153,9 +158,9 @@ class GenerateImages {
         const symbol = symbols.querySelector("svg");
         const nameObj = stripName(filename);
         const isAllowedInDocs =
-            config.skipDocs.indexOf(nameObj.simpleName) === -1 &&
-            (config.deprecated === null ||
-                config.deprecated.indexOf(nameObj.simpleName) === -1);
+            config.icons.skipDocs.indexOf(nameObj.simpleName) === -1 &&
+            (config.icons.deprecated === null ||
+                config.icons.deprecated.indexOf(nameObj.simpleName) === -1);
 
         const sizes = symbol.getAttribute("viewBox");
 
@@ -178,7 +183,7 @@ class GenerateImages {
         // Need to parse it before pushing
         this.masterList.push(this.processSymbolToSVG(symbol, filename));
 
-        if (config.skip.indexOf(filename) > -1) {
+        if (config.icons.skip.indexOf(filename) > -1) {
             return;
         }
     }
@@ -212,7 +217,7 @@ class GenerateImages {
         this.imageList.sort(sortMethodObj);
         config.icons.list = this.imageList;
 
-        await fs.promises.writeFile(configFilePath, YAML.stringify(config));
+        await fs.promises.writeFile(configFilePath, JSON.stringify(config));
 
         this.masterList.sort(sortMethod);
         this.masterList.forEach((symbol) => {

package/scripts/jekyll-config.js

@@ -4,14 +4,12 @@
  */
 const fs = require("fs");
 const version = require("../package.json").version;
-const files = ["./docs/_config.yml"];
+const files = ["./src/routes/_index/+meta.json"];
 
 files.forEach((file) => {
-    const newContents = fs
-        .readFileSync(file, "utf8")
-        .replace(/version\:.*\n/gi, `version: ${version}\n`);
-
-    fs.writeFile(file, newContents, "utf8", (err) => {
+    const newFile = JSON.parse(fs.readFileSync(file, "utf8"));
+    newFile.version = version;
+    fs.writeFile(file, JSON.stringify(newFile), "utf8", (err) => {
         if (err) {
             return console.log(err);
         }

package/src/components/about.marko

@@ -0,0 +1,15 @@
+<div id="about">
+    <h2>About</h2>
+    <p>Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:</p>
+    <dl>
+        <dt>Accessible</dt>
+        <dd>Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, accessible markup.</dd>
+        <dt>Declarative</dt>
+        <dd>Skin follows the <a href="https://getbem.com">BEM</a> methodology of "Block, Element and Modifier" to ensure our HTML class name and structure is human readable and understandable.</dd>
+        <dt>Decoupled</dt>
+        <dd>Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework.</dd>
+        <dt>Evergreen</dt>
+        <dd>As the eBay design system evolves, so too does Skin, meaning apps only need to keep their Skin package updated to ensure the latest look and feel.</dd>
+    </dl>
+    <p>Skin is a pure CSS framework and is bundled with zero JavaScript. This website uses <a href="https://github.com/makeup/makeup-js">makeup-js</a> to add interactivity to examples where needed.</p>
+</div>

package/src/components/animation.marko

@@ -0,0 +1,74 @@
+<h2 id="animation">Animation</h2>
+<p>This section provides information on CSS animations/transitions that are common across one or more modules.</p>
+
+<h3 id="dialog-transitions">Dialog Transitions</h3>
+<p>Skin currently supports two types of dialog transition: fade and slide.
+Because CSS cannot transition an element to and from <span class="highlight">hidden</span> (i.e. "display:none"), transitions are acheived using two classes applied during different stages of the animation.
+Before applying an animation class to the dialog component you must first apply the primer class which will be <span class="highlight">$name-init</span> where <span class="highlight">$name</span> is the base class.
+The dialog component has two different animation base classes <span class="highlight">dialog--show</span> and <span class="highlight">dialog--hide</span>.
+</p>
+<p>Firstly the <span class="highlight">-init</span> postfix must be applied to dialog component to prime animation.
+One animation frame later the <span class="highlight">-init</span> postfix must be removed and the base class applied to start the animation.
+Finally once the animation has completed remove the base class.
+</p>
+
+<p>An example implementation is shown below.</p>
+
+<highlight-code type="js" code=`
+const dialogEl = document.querySelector(".dialog");
+const windowEl = dialogEl.querySelector(".dialog__window");
+const openBtnEl = document.querySelector("#dialog-open");
+const closeBtnEl = dialogEl.querySelector(".dialog__close");
+
+// Trigger dialog show animation.
+openBtnEl.addEventListener("click", () => {
+  dialogEl.classList.add("dialog--show-init");
+  dialogEl.removeAttribute("hidden");
+
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => {
+      // Two RAFS to ensure this happens on the next animation frame.
+      dialogEl.classList.remove("dialog--show-init");
+      dialogEl.classList.add("dialog--show");
+
+      windowEl.addEventListener(
+        "transitionend",
+        () => {
+          /**
+           * The window animation is the longest, so we wait for it to
+           * finish before removing the classes.
+           */
+          dialogEl.classList.remove("dialog--show");
+        },
+        { once: true },
+      );
+    }),
+  );
+});
+
+// Trigger dialog hide animation. (In the real world the dialog mask) should also be handled.
+closeBtnEl.addEventListener("click", () => {
+  dialogEl.classList.add("dialog--hide-init");
+  dialogEl.setAttribute("hidden", "");
+
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => {
+      // Two RAFS to ensure this happens on the next animation frame.
+      dialogEl.classList.remove("dialog--hide-init");
+      dialogEl.classList.add("dialog--hide");
+
+      windowEl.addEventListener(
+        "transitionend",
+        () => {
+          /**
+           * The window animation is the longest, so we wait for it to
+           * finish before removing the classes.
+           */
+          dialogEl.classList.remove("dialog--hide");
+        },
+        { once: true },
+      );
+    }),
+  );
+});
+`></highlight-code>

package/src/components/bundling.marko

@@ -0,0 +1,63 @@
+<div>
+    <h2 id="bundling">Bundling</h2>
+    <p>Skin supports <a href="https://webpack.js.org">Webpack</a> and <a href="https://github.com/lasso-js/lasso">Lasso.js</a>.</p>
+
+    <h3>Webpack</h3>
+    <p>Add <span class="highlight">@ebay/skin</span> and <span class="highlight">@ebay/browserslist-config</span> as dependencies to <span class="highlight">package.json</span>.</p>
+    <p>The Skin webpack modules will import CSS so make sure to also have <span class="highlight">css-loader</span> and <span class="highlight">style-loader</span> as dev dependencies.</p>
+    <highlight-code type="json" code=`
+    {
+        "dependencies": {
+            "@ebay/browserslist-config": "^1",
+            "@ebay/skin": "^${$global.meta.version}",
+        },
+        "devDependencies": {
+            "css-loader": "^3",
+            "style-loader": "^1"
+        }
+    }`>
+    </highlight-code>
+
+    <p>Webpack configuration:</p>
+    <highlight-code type="js" code=`
+    module.exports = {
+        module: {
+            rules: [
+            {
+                test: /\.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                ],
+            },
+            ],
+        },
+    };`>
+    </highlight-code>
+
+    <p>Usage:</p>
+    <highlight-code type="js" code=`import "@ebay/skin/button";`></highlight-code>
+
+        <h3>Lasso.js</h3>
+        <p>Add the <span class="highlight">@ebay/skin</span> module as a <span class="highlight">browser.json</span> dependency to include the entire set of Skin modules.</p>
+    <highlight-code type="json" code=`
+    {
+        "dependencies": [
+            "@ebay/skin"
+        ]
+    }`>
+    </highlight-code>
+
+    <p>Or, alternatively, by specifying modules on a per-need basis.</p>
+
+    <highlight-code type="json" code=`
+    {
+        "dependencies": [
+            "@ebay/skin/tokens",
+            "@ebay/skin/global",
+            "@ebay/skin/button",
+            "@ebay/skin/icon"
+        ]
+    }`>
+    </highlight-code>
+</div>

package/src/components/eek-icon.marko

@@ -0,0 +1,5 @@
+$ const name = `eek-${input.name}`;
+
+<svg class=`icon icon--${name}` aria-hidden="true">
+    <icon-symbol name=name />
+</svg>

package/src/components/eek-range.marko

@@ -0,0 +1,7 @@
+<span class="eek__rating-range">
+    <span>${input.max}</span>
+    <svg class="icon icon--eek-range-arrow" aria-hidden="true">
+        <icon-symbol name="eek-range-arrow" />
+    </svg>
+    <span>${input.min}</span>
+</span>

package/src/components/eek-rating.marko

@@ -0,0 +1,9 @@
+<span>
+    $ const forIndex = input.idx - input.offset;
+    <if (forIndex >= 1 && forIndex <= 7)>
+        .eek--rating-${forIndex}
+    </if>
+    <else>
+        .eek--rating-7
+    </else>
+</span>