diff --git a/.stylelintrc b/.stylelintrc index c0ac8340d..c66d305f8 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -24,6 +24,7 @@ "selector-class-pattern": null, "alpha-value-notation": "number", "declaration-block-no-redundant-longhand-properties": null, + "media-feature-range-notation": null, "value-keyword-case": [ "lower", { diff --git a/package-lock.json b/package-lock.json index 93873c141..0dfbbbe50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@commitlint/config-conventional": "^19.6.0", "@ebay/browserslist-config": "^2.10.0", "@floating-ui/dom": "^1.6.12", - "@marko/run": "^0.5.11", + "@marko/run": "^0.5.13", "@marko/run-adapter-static": "^0.2.1", "@percy/cli": "^1.30.5", "@percy/storybook": "^6.0.3", @@ -3275,10 +3275,11 @@ } }, "node_modules/@marko/run": { - "version": "0.5.11", - "resolved": "https://registry.npmjs.org/@marko/run/-/run-0.5.11.tgz", - "integrity": "sha512-RQsEDlq1Tjn8uEZuWPGTVToJmAYEa8pnaR802ydgwl6mAXameNfmGWax9iwb8RNSscCvTFll8OuBOz2Js0Ty3Q==", + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@marko/run/-/run-0.5.13.tgz", + "integrity": "sha512-RtHl/iW7+ni5y7GcAbGrbY9kCD3x5hKKAIBCEdmymI6GgTL9H5j6e4pdnsk1sG+dR6Kf3H3wZG7LIWDTnrsueA==", "dev": true, + "license": "MIT", "dependencies": { "@marko/run-explorer": "^0.1.2", "@marko/vite": "^5.0.10", diff --git a/package.json b/package.json index 52aca5c0e..969d1ae82 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@commitlint/config-conventional": "^19.6.0", "@ebay/browserslist-config": "^2.10.0", "@floating-ui/dom": "^1.6.12", - "@marko/run": "^0.5.11", + "@marko/run": "^0.5.13", "@marko/run-adapter-static": "^0.2.1", "@percy/cli": "^1.30.5", "@percy/storybook": "^6.0.3", diff --git a/src/components/about.marko b/src/components/about.marko index ebd7fbd73..fea0d26ec 100644 --- a/src/components/about.marko +++ b/src/components/about.marko @@ -1,5 +1,5 @@
-

About

+

What is Skin?

Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:

Accessible
diff --git a/src/components/anchor.marko b/src/components/anchor.marko new file mode 100644 index 000000000..bd9b58ab0 --- /dev/null +++ b/src/components/anchor.marko @@ -0,0 +1,5 @@ +static const basePath = import.meta.env.BASE_URL; + + + <${input.renderBody}/> + \ No newline at end of file diff --git a/src/components/components-list.marko b/src/components/components-list.marko new file mode 100644 index 000000000..f059cefbd --- /dev/null +++ b/src/components/components-list.marko @@ -0,0 +1,11 @@ +import path from 'path'; + + + $ const componentName = path.basename(comp, '.marko'); + $ const name = componentName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; }); + $ const properName = name.charAt(0).toUpperCase() + name.slice(1); +
  • + ${properName} +
    • + + diff --git a/src/components/components.marko b/src/components/components.marko new file mode 100644 index 000000000..63cc17aba --- /dev/null +++ b/src/components/components.marko @@ -0,0 +1,12 @@ +import path from 'path'; +import flags from "./data/flags.json" +import icons from "./data/icons.json" + +static const componentFolders = import.meta.glob("../routes/_index/component/*/*.marko"); + +static const components = Object.keys(componentFolders).map((filePath) => { + const parts = filePath.split('/'); + return parts.slice(0, parts.length - 1).join('/'); +}); + +export { components, flags, icons }; diff --git a/src/routes/flags.json b/src/components/data/flags.json similarity index 100% rename from src/routes/flags.json rename to src/components/data/flags.json diff --git a/src/routes/icons.json b/src/components/data/icons.json similarity index 100% rename from src/routes/icons.json rename to src/components/data/icons.json diff --git a/src/components/data/site.json b/src/components/data/site.json new file mode 100644 index 000000000..a3e97ecb4 --- /dev/null +++ b/src/components/data/site.json @@ -0,0 +1,4348 @@ +{ + "pageTitle": "Skin CSS Framework", + "version": "18.6.0", + "icons": { + "prefix": "icon", + "largeDocs": ["ebay-money-back-guarantee-logo-16-colored"], + "list": [ + { "name": "add-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "add-image-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "add-12", "size": "12", "height": "12", "width": "12" }, + { + "name": "afterpay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "afterpay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "add-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "afterpay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "afterpay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "ai-16", "size": "16", "height": "16", "width": "16" }, + { "name": "ai-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "ai-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ai-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "ai-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "ai-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "ai-spectrum-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "ai-spectrum-20-colored", + "size": "20-colored", + "height": "20", + "width": "20" + }, + { + "name": "ai-spectrum-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "ai-spectrum-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "ai-spectrum-filled-20-colored", + "size": "20-colored", + "height": "20", + "width": "20" + }, + { + "name": "ai-spectrum-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "ai-spectrum-thin-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "ai-thin-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "alipay-cn-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "alipay-cn-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "amex-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "alipay-cn-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "alipay-cn-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "amex-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "amex-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "amex-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "apple-pay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "apple-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "apple-pay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "apple-pay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "apple-pay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "archive-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "archive-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrow-left-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "arrow-left-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "arrow-left-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "arrow-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrow-right-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "arrow-right-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "arrow-right-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "arrows-3d-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "arrow-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrows-3d-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrows-3d-filled-64-colored", + "size": "64-colored", + "height": "64", + "width": "64" + }, + { + "name": "arrows-expand-16", + "size": "16", + "height": "24", + "width": "24" + }, + { + "name": "arrows-expand-24", + "size": "24", + "height": "16", + "width": "16" + }, + { + "name": "article-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "attention-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "article-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "attention-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "attention-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "attention-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "attention-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "atv-16", "size": "16", "height": "16", "width": "16" }, + { "name": "atv-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "audio-high-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "audio-off-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "audio-low-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "auto-adjust-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "background-removal-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "background-removal-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "bank-16", "size": "16", "height": "16", "width": "16" }, + { "name": "bank-24", "size": "24", "height": "24", "width": "24" }, + { "name": "bank-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "bank-account-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "bank-account-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "bank-account-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "bar-chart-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "bank-account-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "bids-16", "size": "16", "height": "16", "width": "16" }, + { "name": "bids-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "bar-chart-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "boat-16", "size": "16", "height": "16", "width": "16" }, + { "name": "boat-24", "size": "24", "height": "24", "width": "24" }, + { "name": "bids-24", "size": "24", "height": "24", "width": "24" }, + { "name": "book-16", "size": "16", "height": "16", "width": "16" }, + { "name": "book-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "bookmark-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "bookmark-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "bookmark-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "bookmark-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "brand-authorized-seller-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "brightness-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "brightness-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "brightness-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "brand-authorized-seller-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "calendar-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "calendar-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "calendar-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "camera-64", + "size": "64", + "height": "64", + "width": "64" + }, + { "name": "car-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "camera-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "camera-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "car-brake-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "car-brake-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "car-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "carryon-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "cart-16", "size": "16", "height": "16", "width": "16" }, + { "name": "cart-20", "size": "20", "height": "20", "width": "20" }, + { "name": "cart-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "categories-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "categories-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "cb-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "cb-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "cb-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "ccd-charger-included", "height": "78", "width": "58" }, + { + "name": "cb-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "cart-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "ccd-charger-not-included", + "height": "78", + "width": "58" + }, + { "name": "ccd-top", "height": "25", "width": "35" }, + { + "name": "certified-recycled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "chair-16", "size": "16", "height": "16", "width": "16" }, + { "name": "chair-24", "size": "24", "height": "24", "width": "24" }, + { "name": "chat-16", "size": "16", "height": "16", "width": "16" }, + { "name": "chat-24", "size": "24", "height": "24", "width": "24" }, + { "name": "chat-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "certified-recycled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "check-in-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "checkbox-mixed-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "checkmark-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-down-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-down-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-down-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-down-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-left-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-left-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-left-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-right-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-right-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-right-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-up-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-up-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-up-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-up-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chinese-coin-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chinese-coin-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "clear-16", "size": "16", "height": "16", "width": "16" }, + { "name": "clear-20", "size": "20", "height": "20", "width": "20" }, + { "name": "clear-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "click-to-call-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "clock-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "click-to-call-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "clock-24", "size": "24", "height": "24", "width": "24" }, + { "name": "close-12", "size": "12", "height": "12", "width": "13" }, + { "name": "close-16", "size": "16", "height": "16", "width": "16" }, + { "name": "clock-64", "size": "64", "height": "64", "width": "64" }, + { "name": "close-20", "size": "20", "height": "20", "width": "20" }, + { "name": "close-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "closed-caption-16", + "size": "16", + "height": "16", + "width": "20" + }, + { + "name": "closed-caption-filled-16", + "size": "16", + "height": "16", + "width": "20" + }, + { + "name": "coin-battery-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "collections-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "collections-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "coin-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "condensed-grid-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "condensed-grid-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "confirmation-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "confirmation-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "confirmation-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "confirmation-filled-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "confirmation-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "contrast-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "contract-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "copy-16", "size": "16", "height": "16", "width": "16" }, + { "name": "copy-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "credit-card-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "credit-card-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "confirmation-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "crop-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "delete-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "customize-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "delete-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "customize-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "credit-card-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "delete-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "density-compact-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "density-relaxed-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "density-compact-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "density-relaxed-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "density-default-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "density-default-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "diamond-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "diamond-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "diners-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "direct-debit-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "diners-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "diners-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "diners-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "direct-debit-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "direct-debit-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "direct-debit-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "direct-from-brand-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "direct-from-brand-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "discount-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "discord-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "discount-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "discover-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "discover-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "discover-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "discover-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "dollar-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "dollar-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "download-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "download-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "download-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "drag-drop-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "drag-drop-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-balance-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "ebay-balance-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "ebay-balance-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "ebay-balance-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "ebay-bucks-logo-16-colored", + "size": "16-colored", + "height": "16", + "width": "48" + }, + { + "name": "ebay-for-charity-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-for-charity-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-international-shipping-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-international-shipping-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-international-shipping-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "ebay-live-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-live-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-mastercard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "ebay-mastercard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "ebay-mastercard-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "ebay-mastercard-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "ebay-money-back-guarantee-logo-16-colored", + "size": "16-colored", + "height": "16", + "width": "147" + }, + { + "name": "ebay-plus-logo-16-colored", + "size": "16-colored", + "height": "16", + "width": "58" + }, + { + "name": "ebay-plus-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-preloved-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-plus-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-preloved-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-refurbished-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-refurbished-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "escrow-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "escrow-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "escrow-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "escrow-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "escrow-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "euro-16", "size": "16", "height": "16", "width": "16" }, + { "name": "euro-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "escrow-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "exclude-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "european-conformity-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "exclude-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "expand-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "explore-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "external-link-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "explore-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "external-link-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "external-link-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-happiest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-happy-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "face-happy-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-neutral-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-sad-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-saddest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "facebook-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "facebook-messenger-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fall-leaf-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "fast-and-free-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "fall-leaf-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fast-and-free-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fast-and-free-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "feedback-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "feedback-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "feedback-received-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "feedback-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "file-24", "size": "24", "height": "24", "width": "24" }, + { "name": "file-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "filter-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "filter-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "fingerprint-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "feedback-received-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fingerprint-64", + "size": "64", + "height": "64", + "width": "65" + }, + { "name": "flag-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "flash-auto-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "flag-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "flag-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "flag-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "flash-off-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "flash-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "folder-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "folder-add-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "folder-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "franc-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "folder-add-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "free-warranty-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "free-warranty-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "franc-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "full-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "full-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "full-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "gallery-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "general-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "full-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "gallery-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "general-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "general-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "general-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "generic-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "generic-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "generic-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "gift-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "generic-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "gift-16", "size": "16", "height": "16", "width": "16" }, + { "name": "gift-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "gift-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "gift-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "gift-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "gift-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "girocard-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "girocard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "girocard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "girocard-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "glasses-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "google-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "glasses-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "google-pay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "google-pay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "google-pay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { "name": "graph-64", "size": "64", "height": "64", "width": "64" }, + { "name": "graph-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "graph-dynamic-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "graph-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "google-pay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "grid-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "graph-dynamic-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "grid-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "grid-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "grid-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "handbag-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "handbag-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "hanger-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "hanger-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "headlight-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "headphone-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "headphone-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "headlight-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "help-16", "size": "16", "height": "16", "width": "16" }, + { "name": "help-20", "size": "20", "height": "20", "width": "20" }, + { "name": "help-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "help-outline-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "help-outline-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "hide-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "help-outline-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "history-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "hide-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "history-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "history-64", + "size": "64", + "height": "64", + "width": "64" + }, + { "name": "home-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "home-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "image-16", "size": "16", "height": "16", "width": "16" }, + { "name": "image-24", "size": "24", "height": "24", "width": "24" }, + { "name": "image-64", "size": "64", "height": "64", "width": "64" }, + { "name": "inbox-16", "size": "16", "height": "16", "width": "16" }, + { "name": "inbox-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "information-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "information-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "information-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "inspect-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "inspect-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "information-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "inspect-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "item-list-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "item-list-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "instagram-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "item-list-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "jcb-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "jcb-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "jet-ski-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "jcb-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "key-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "jet-ski-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "jcb-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "keyboard-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "key-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "keyboard-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "klarna-black-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "klarna-black-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "klarna-black-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-black-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "klarna-pink-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-pink-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "klarna-pink-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "klarna-white-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-white-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "klarna-pink-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "klarna-white-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "klarna-white-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "krona-24", "size": "24", "height": "24", "width": "24" }, + { "name": "lamp-16", "size": "16", "height": "16", "width": "16" }, + { "name": "lamp-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "large-box-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "legacy-authenticity-guarantee-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-click-to-call-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { "name": "krona-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "legacy-free-warranty-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-chf-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "large-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "legacy-money-back-guarantee-us-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-top-rated-seller-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-escrow-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "lightbulb-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "legacy-money-back-guarantee-uk-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-eu-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-zl-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "lightning-bolt-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "link-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "list-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "lightbulb-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "lightning-bolt-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "list-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "list-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "list-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "live-eye-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "location-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "location-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "live-eye-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "linkedin-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "location-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "locked-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "locked-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "maestro-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "maestro-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "maestro-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "maestro-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "locked-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "mail-16", "size": "16", "height": "16", "width": "16" }, + { "name": "mail-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "mail-move-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "mail-64", "size": "64", "height": "64", "width": "64" }, + { "name": "mail-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "mail-move-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "mail-open-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mail-open-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "map-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "mail-unread-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mail-unread-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "map-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "masonry-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "map-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "mastercard-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "masonry-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mastercard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "masonry-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "mastercard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "mastercard-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "masonry-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "megaphone-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "megaphone-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "medium-box-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "menu-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "medium-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "menu-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "mobile-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "mobile-signal-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "microphone-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "microphone-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-back-guarantee-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "money-back-guarantee-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-back-guarantee-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "money-stack-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-stack-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "monthly-invoice-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "monthly-invoice-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "money-back-guarantee-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "monthly-invoice-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "monthly-invoice-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "moon-16", "size": "16", "height": "16", "width": "16" }, + { "name": "moon-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "motorcycle-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mountain-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "motorcycle-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "moon-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "mountain-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "move-16", "size": "16", "height": "16", "width": "16" }, + { "name": "move-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "nectar-logo-24-colored", + "size": "24-colored", + "height": "24", + "width": "29" + }, + { + "name": "negative-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "negative-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "neutral-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "neutral-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "no-children-zero-three-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "notification-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "notification-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "notification-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "on-the-way-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "notification-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "out-of-reach-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "notification-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "on-the-way-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "overflow-horizontal-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "overflow-horizontal-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "overflow-horizontal-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "overflow-vertical-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "overflow-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "package-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "overflow-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "package-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "package-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "panel-24", "size": "24", "height": "24", "width": "24" }, + { "name": "panel-20", "size": "20", "height": "20", "width": "20" }, + { "name": "panel-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "panel-close-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-close-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "panel-close-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-close-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-close-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-open-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-close-vertical-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "panel-open-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "panel-open-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-open-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-open-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-open-vertical-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "passkey-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "passkey-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "pause-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "pause-filled-64-colored", + "size": "64-colored", + "height": "64", + "width": "64" + }, + { "name": "pause-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "passkey-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "payoneer-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "payoneer-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "payoneer-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "paypal-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "payoneer-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "paypal-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "paypal-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "paypal-credit-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "paypal-credit-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "paypal-credit-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "paypal-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "paypal-credit-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "paypal-disabled-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "paypal-disabled-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "paypal-disabled-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "pencil-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "paypal-disabled-24-colored", + "size": "24-colored", + "height": "24", + "width": "37" + }, + { "name": "peso-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "pencil-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "phone-16", "size": "16", "height": "16", "width": "16" }, + { "name": "peso-24", "size": "24", "height": "24", "width": "24" }, + { "name": "phone-24", "size": "24", "height": "24", "width": "24" }, + { "name": "pin-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "pencil-20", + "size": "20", + "height": "20", + "width": "20" + }, + { "name": "play-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "pinterest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "pin-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "play-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "play-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "play-filled-64-colored", + "size": "64-colored", + "height": "64", + "width": "64" + }, + { + "name": "postepay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "postepay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "postepay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "postepay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "play-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "potted-plant-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "print-16", "size": "16", "height": "16", "width": "16" }, + { "name": "pound-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "potted-plant-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "pound-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "profile-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "print-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "profile-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "progress-current-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "profile-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "promotion-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "psa-vault-16-colored", + "size": "16-colored", + "height": "16", + "width": "84" + }, + { + "name": "promotion-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "progress-upcoming-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "qr-code-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "profile-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "qr-code-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "psa-vault-16", + "size": "16", + "height": "16", + "width": "84" + }, + { + "name": "recovery-code-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "reddit-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "recovery-code-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "refresh-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "relaxed-grid-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "relaxed-grid-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "remove-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "refresh-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "remove-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "remove-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "reply-16", "size": "16", "height": "16", "width": "16" }, + { "name": "reply-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "return-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ribbon-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ribbon-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "rim-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "return-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ringgit-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ringgit-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "rotate-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "rotate-landscape-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "rim-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "rotate-landscape-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "rotate-portrait-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "rotate-portrait-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "rupee-16", "size": "16", "height": "16", "width": "16" }, + { "name": "rupee-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "satchel-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "satchel-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "save-24", "size": "24", "height": "24", "width": "24" }, + { "name": "save-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "save-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "save-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "save-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "save-16", "size": "16", "height": "16", "width": "16" }, + { "name": "scan-16", "size": "16", "height": "16", "width": "16" }, + { "name": "scan-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "search-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "search-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "search-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "search-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "search-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "search-similar-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "search-similar-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "seasons-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "search-similar-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "security-key-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "seasons-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "selling-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "selling-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "select-all-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "send-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "selling-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "settings-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "settings-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "selling-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-android-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "settings-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-android-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "share-ios-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "share-android-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-ios-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "sharpen-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-ios-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "shirt-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "ship-and-local-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ship-and-local-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "shoe-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "shirt-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "shovel-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "shovel-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "small-box-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "show-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "small-letter-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "show-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "sneaker-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "small-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "sneaker-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "snowflake-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "snowflake-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "snowmobile-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "sort-16", "size": "16", "height": "16", "width": "16" }, + { "name": "sort-12", "size": "12", "height": "12", "width": "12" }, + { + "name": "snowmobile-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "sort-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "sort-down-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "sort-up-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "sparkline-down-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "sparkline-down-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "sparkline-down-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "sparkline-up-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "sparkline-up-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "speedometer-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "speedometer-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "sparkline-up-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "sparkline-up-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "split-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "split-payment-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "spring-leaf-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "split-payment-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "spring-leaf-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "split-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "star-empty-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "star-empty-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "star-empty-40", "height": "40", "width": "40" }, + { + "name": "star-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "star-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "star-filled-40", "height": "40", "width": "40" }, + { + "name": "star-half-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "star-half-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "star-half-dark-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "star-half-dark-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "stepper-attention-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "stepper-current-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "stepper-upcoming-24", + "size": "24", + "height": "25", + "width": "24" + }, + { + "name": "stepper-confirmation-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "store-24", "size": "24", "height": "24", "width": "24" }, + { "name": "store-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "store-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "store-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "suitcase-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "swap-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "support-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "target-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "switch-camera-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "target-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "text-messaging-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "text-messaging-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "text-messaging-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "text-messaging-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "the-ebay-vault-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "the-ebay-vault-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "thumb-down-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-down-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "thumb-up-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-up-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "thumb-down-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "thumb-up-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "tick-16", "size": "16", "height": "16", "width": "16" }, + { "name": "tick-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "toggle-mode-bottom-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-up-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "toggle-mode-top-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "tiktok-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "top-rated-seller-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "top-service-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "top-service-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "top-rated-seller-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "trading-card-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "trading-card-grade-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "trading-card-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "transaction-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "trading-card-grade-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "translate-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "translate-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "translate-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "trend-down-16-fit", + "size": "16-fit", + "height": "16", + "width": "13" + }, + { + "name": "trend-up-16-fit", + "size": "16-fit", + "height": "16", + "width": "13" + }, + { + "name": "trophy-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "trophy-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "twitter-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "undo-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "unionpay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "undo-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "unionpay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "unionpay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "unionpay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "unlocked-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "unselect-all-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "upload-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "unlocked-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "upload-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "venmo-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "venmo-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "verified-condition-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "venmo-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "verified-condition-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "video-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "visa-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "venmo-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "visa-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "visa-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "visa-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "wallet-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "wallet-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "wallet-balance-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "wallet-balance-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "wallet-balance-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "wallet-balance-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "watch-16", "size": "16", "height": "16", "width": "16" }, + { "name": "watch-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "whatsapp-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "won-16", "size": "16", "height": "16", "width": "16" }, + { "name": "won-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "wrench-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "wrench-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "youtube-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "yuan-16", "size": "16", "height": "16", "width": "16" }, + { "name": "yuan-24", "size": "24", "height": "24", "width": "24" }, + { "name": "zloty-16", "size": "16", "height": "16", "width": "16" }, + { "name": "zloty-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "zoom-in-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "zoom-in-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "zoom-out-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "zoom-out-24", + "size": "24", + "height": "24", + "width": "24" + } + ], + "skipDocs": [ + "avatar-signed-out", + "checkbox-checked", + "checkbox-checked-large", + "checkbox-mixed", + "checkbox-mixed-large", + "checkbox-square-checked", + "checkbox-square-checked-large", + "checkbox-square-unchecked", + "checkbox-square-unchecked-large", + "checkbox-unchecked", + "checkbox-unchecked-large", + "eek-arrow", + "eek-range-arrow", + "radio-checked", + "radio-checked-large", + "radio-unchecked", + "radio-unchecked-large", + "spinner-20", + "spinner-24", + "spinner-30", + "star-dynamic", + "star-rating-small-0", + "star-rating-small-0-5", + "star-rating-small-1", + "star-rating-small-1-5", + "star-rating-small-2", + "star-rating-small-2-5", + "star-rating-small-3", + "star-rating-small-3-5", + "star-rating-small-4", + "star-rating-small-4-5", + "star-rating-small-5", + "star-rating-0", + "star-rating-0-5", + "star-rating-1", + "star-rating-1-5", + "star-rating-2", + "star-rating-2-5", + "star-rating-3", + "star-rating-3-5", + "star-rating-4", + "star-rating-4-5", + "star-rating-5", + "stepper-attention", + "stepper-confirmation", + "stepper-current", + "stepper-upcoming", + "stepper-information", + "program-badge-authenticity-guarantee-16-fit", + "image-placeholder", + "checkbox-mixed-18", + "checkbox-unchecked-18", + "checkbox-checked-24", + "radio-checked-18", + "checkbox-checked-18", + "radio-checked-24", + "radio-unchecked-24", + "checkbox-unchecked-24", + "radio-unchecked-18" + ], + "deprecated": null, + "program-badges": { + "prefix": "program-badge", + "list": [ + "authenticity-guaranteed", + "click-to-call", + "ebay-plus", + "escrow", + "free-warranty", + "money-back-guarantee-chf", + "money-back-guarantee-eu", + "money-back-guarantee-uk", + "money-back-guarantee-us", + "money-back-guarantee-zl", + "top-rated-seller", + "vault" + ] + }, + "skip": [ + "icon-spinner-large", + "image-placeholder", + "icon-avatar-signed-out" + ] + }, + "module_metadata": { + "alert-dialog": { + "ds-component": { "name": "alert-dialog", "version": "18.1.0" }, + "submodules": ["button"] + }, + "avatar": { "ds-component": { "name": "avatar", "version": "18.1.0" } }, + "badge": { "ds-component": { "name": "badge", "version": "18.1.0" } }, + "breadcrumbs": { + "ds-component": { "name": "breadcrumb", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "button": { + "ds-component": { + "group": "button", + "name": "button", + "version": "18.1.0" + } + }, + "carousel": { + "ds-component": { "name": "carousel", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "calendar": { + "ds-component": { "name": "calendar", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "checkbox": { + "ds-component": { "name": "checkbox", "version": "18.1.0" } + }, + "chart-legend": { "ds-component": { "version": "18.1.0" } }, + "chip": { + "ds-component": { "name": "input-chip", "version": "18.1.0" } + }, + "chips-combobox": { + "ds-component": { "name": "chip-combobox", "version": "18.1.0" }, + "submodules": ["chip", "combobox"] + }, + "combobox": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon", "listbox", "textbox"] + }, + "confirm-dialog": { + "ds-component": { "name": "alert-dialog", "version": "18.1.0" }, + "submodules": ["button"] + }, + "cta-button": { + "ds-component": { + "group": "button", + "name": "button", + "version": "18.1.0" + } + }, + "date-textbox": { + "ds-component": { "name": "date-picker", "version": "18.1.0" }, + "submodules": ["calendar", "icon-button", "textbox"] + }, + "details": { + "ds-component": { "name": "expansion", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "donut-chart": { + "ds-component": { "name": "donut-chart", "version": "18.1.0" }, + "submodules": ["chart-legend"] + }, + "education-notice": { + "ds-component": { "name": "education-notice", "version": "18.1.0" } + }, + "eek": { + "ds-component": { "name": "eek", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "filter-button": { + "ds-component": { "name": "quick-filter", "version": "18.1.0" } + }, + "filter-menu": { + "ds-component": { "version": "18.1.0" }, + "submodules": ["icon"] + }, + "filter-menu-button": { + "ds-component": { "name": "quick-filter", "version": "18.1.0" }, + "submodules": ["filter-menu", "icon"] + }, + "flag": { "ds-component": { "version": "18.1.0" } }, + "floating-label": { + "ds-component": { "name": "form-field", "version": "18.1.0" } + }, + "icon": { "ds-component": { "name": "icon", "version": "18.1.0" } }, + "icon-button": { + "ds-component": { + "group": "button", + "name": "icon-button", + "version": "18.1.0" + }, + "submodules": ["icon"] + }, + "infotip": { + "ds-component": { "name": "infotip", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "inline-notice": { + "ds-component": { "name": "alert-notice", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "lightbox-dialog": { + "ds-component": [ + { "name": "modal", "version": "18.1.0" }, + { "name": "bottom-sheet", "version": "18.1.0" } + ], + "submodules": ["button", "icon-button"] + }, + "less": { "ds-component": { "version": "18.1.0" } }, + "link": { + "ds-component": { "name": "text-link", "version": "18.1.0" } + }, + "listbox": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "listbox-button": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["button", "icon"] + }, + "menu": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "menu-button": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["button", "icon", "menu"] + }, + "page-grid": { "ds-component": { "version": "18.1.0" } }, + "page-notice": { + "ds-component": { "name": "alert-notice", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "pagination": { + "ds-component": { "name": "pagination", "version": "18.1.0" }, + "submodules": ["icon-link"] + }, + "panel-dialog": { + "ds-component": { "name": "panel", "version": "18.1.0" }, + "submodules": ["button", "icon-button"] + }, + "phone-input": { + "ds-component": { "name": "phone-number", "version": "18.1.0" } + }, + "progress-bar": { + "ds-component": { "name": "progress-bar", "version": "18.1.0" } + }, + "progress-bar-expressive": { + "ds-component": { "name": "expressive-loader", "version": "18.1.0" } + }, + "progress-spinner": { + "ds-component": { "name": "progress-spinner", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "progress-stepper": { + "ds-component": { "name": "progress-stepper", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "radio": { + "ds-component": { "name": "radio-button", "version": "18.1.0" } + }, + "section-notice": { + "ds-component": { "name": "alert-notice", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "section-title": { "ds-component": { "version": "18.1.0" } }, + "segmented-buttons": { + "ds-component": { "name": "segmented-button", "version": "18.1.0" } + }, + "select": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "signal": { "ds-component": { "name": "signal", "version": "18.1.0" } }, + "skeleton": { + "ds-component": { + "name": "skeleton", + "status": "beta", + "version": "18.1.0" + } + }, + "snackbar-dialog": { + "ds-component": { "name": "snackbar", "version": "18.1.0" }, + "submodules": ["button"] + }, + "split-button": { + "ds-component": { + "group": "button", + "name": "split-button", + "version": "18.1.0" + }, + "submodules": ["button", "menu-button"] + }, + "star-rating": { + "ds-component": { "name": "review-rating", "version": "18.1.0" } + }, + "star-rating-select": { + "ds-component": { "name": "review-input", "version": "18.1.0" } + }, + "switch": { "ds-component": { "name": "switch", "version": "18.1.0" } }, + "tabs": { "ds-component": { "name": "tabs", "version": "18.1.0" } }, + "textbox": { + "ds-component": { "name": "form-field", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "toast-dialog": { + "ds-component": { "version": "18.1.0" }, + "submodules": ["button", "icon-button"] + }, + "toggle-button": { + "ds-component": { "name": "toggle-button", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "toggle-button-group": { + "ds-component": { + "name": "toggle-button-group", + "version": "18.1.0" + }, + "submodules": ["toggle-button"] + }, + "tooltip": { + "ds-component": { "name": "tooltip", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "tourtip": { + "ds-component": { "name": "tourtip", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "typography": { "version": "18.1.0" } + } +} diff --git a/src/components/install.marko b/src/components/install.marko index aef79c476..6e911df06 100644 --- a/src/components/install.marko +++ b/src/components/install.marko @@ -1,6 +1,6 @@

    - Install + Getting Started

    Skin is distributed via NPM under the diff --git a/src/components/module-list.marko b/src/components/module-list.marko deleted file mode 100644 index 48d4f1308..000000000 --- a/src/components/module-list.marko +++ /dev/null @@ -1,9 +0,0 @@ -import path from 'path'; - - - $ const moduleName = path.basename(mod, '.marko'); - $ const name = moduleName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; }); - $ const properName = name.charAt(0).toUpperCase() + name.slice(1); -

  • ${properName}
    • - - diff --git a/src/components/section-header.marko b/src/components/section-header.marko index 84f514d7d..5603784cb 100644 --- a/src/components/section-header.marko +++ b/src/components/section-header.marko @@ -1,10 +1,11 @@ $ const metadata = input.metadata || {}; +$ let skinComponent = metadata['component'] || {}; $ let dsComponent = metadata['ds-component'] || {}; $ if (dsComponent.length > 0) { dsComponent = dsComponent[0]; } - @ebay/skin/${input.name} + @ebay/skin/${skinComponent} BETA diff --git a/src/components/site-header.marko b/src/components/site-header.marko new file mode 100644 index 000000000..c760db634 --- /dev/null +++ b/src/components/site-header.marko @@ -0,0 +1,106 @@ +import siteMeta from "./data/site.json" ; +import {components} from './components.marko'; + +
    +
    +
    +
    +
    + +

    + ${siteMeta.pageTitle} +

    + +
    +
    +
    +
    +
    + + Documentation + + + +
    + + + +
    +
    +
    + + \ No newline at end of file diff --git a/src/components/site-navrail.marko b/src/components/site-navrail.marko new file mode 100644 index 000000000..a7cedba46 --- /dev/null +++ b/src/components/site-navrail.marko @@ -0,0 +1,23 @@ +import {components} from './components.marko'; + +
    + + + +
    \ No newline at end of file diff --git a/src/modules/flag.marko b/src/modules/flag.marko index e60d39a10..1fb740671 100644 --- a/src/modules/flag.marko +++ b/src/modules/flag.marko @@ -1,4 +1,4 @@ -import {flags} from '../routes/modules.marko'; +import {flags} from '../components/components.marko';
    diff --git a/src/routes/+meta.json b/src/routes/+meta.json new file mode 100644 index 000000000..9d2c24830 --- /dev/null +++ b/src/routes/+meta.json @@ -0,0 +1,4348 @@ +{ + "pageTitle": "eBay Skin", + "version": "18.5.0", + "icons": { + "prefix": "icon", + "largeDocs": ["ebay-money-back-guarantee-logo-16-colored"], + "list": [ + { "name": "add-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "add-image-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "add-12", "size": "12", "height": "12", "width": "12" }, + { + "name": "afterpay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "afterpay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "add-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "afterpay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "afterpay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "ai-16", "size": "16", "height": "16", "width": "16" }, + { "name": "ai-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "ai-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ai-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "ai-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "ai-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "ai-spectrum-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "ai-spectrum-20-colored", + "size": "20-colored", + "height": "20", + "width": "20" + }, + { + "name": "ai-spectrum-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "ai-spectrum-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "ai-spectrum-filled-20-colored", + "size": "20-colored", + "height": "20", + "width": "20" + }, + { + "name": "ai-spectrum-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "ai-spectrum-thin-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "ai-thin-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "alipay-cn-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "alipay-cn-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "amex-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "alipay-cn-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "alipay-cn-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "amex-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "amex-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "amex-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "apple-pay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "apple-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "apple-pay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "apple-pay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "apple-pay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "archive-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "archive-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrow-left-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "arrow-left-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "arrow-left-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "arrow-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrow-right-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "arrow-right-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "arrow-right-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "arrows-3d-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "arrow-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrows-3d-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "arrows-3d-filled-64-colored", + "size": "64-colored", + "height": "64", + "width": "64" + }, + { + "name": "arrows-expand-16", + "size": "16", + "height": "24", + "width": "24" + }, + { + "name": "arrows-expand-24", + "size": "24", + "height": "16", + "width": "16" + }, + { + "name": "article-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "attention-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "article-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "attention-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "attention-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "attention-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "attention-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "atv-16", "size": "16", "height": "16", "width": "16" }, + { "name": "atv-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "audio-high-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "audio-off-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "audio-low-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "authenticity-guarantee-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "auto-adjust-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "background-removal-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "background-removal-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "bank-16", "size": "16", "height": "16", "width": "16" }, + { "name": "bank-24", "size": "24", "height": "24", "width": "24" }, + { "name": "bank-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "bank-account-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "bank-account-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "bank-account-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "bar-chart-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "bank-account-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "bids-16", "size": "16", "height": "16", "width": "16" }, + { "name": "bids-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "bar-chart-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "boat-16", "size": "16", "height": "16", "width": "16" }, + { "name": "boat-24", "size": "24", "height": "24", "width": "24" }, + { "name": "bids-24", "size": "24", "height": "24", "width": "24" }, + { "name": "book-16", "size": "16", "height": "16", "width": "16" }, + { "name": "book-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "bookmark-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "bookmark-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "bookmark-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "bookmark-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "brand-authorized-seller-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "brightness-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "brightness-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "brightness-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "brand-authorized-seller-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "calendar-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "calendar-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "calendar-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "camera-64", + "size": "64", + "height": "64", + "width": "64" + }, + { "name": "car-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "camera-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "camera-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "car-brake-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "car-brake-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "car-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "carryon-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "cart-16", "size": "16", "height": "16", "width": "16" }, + { "name": "cart-20", "size": "20", "height": "20", "width": "20" }, + { "name": "cart-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "categories-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "categories-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "cb-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "cb-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "cb-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "ccd-charger-included", "height": "78", "width": "58" }, + { + "name": "cb-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "cart-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "ccd-charger-not-included", + "height": "78", + "width": "58" + }, + { "name": "ccd-top", "height": "25", "width": "35" }, + { + "name": "certified-recycled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "chair-16", "size": "16", "height": "16", "width": "16" }, + { "name": "chair-24", "size": "24", "height": "24", "width": "24" }, + { "name": "chat-16", "size": "16", "height": "16", "width": "16" }, + { "name": "chat-24", "size": "24", "height": "24", "width": "24" }, + { "name": "chat-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "certified-recycled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "check-in-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "checkbox-mixed-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "checkmark-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-down-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-down-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-down-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-down-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-left-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-left-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-left-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-right-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-right-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-right-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-up-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "chevron-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-up-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "chevron-up-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-up-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chinese-coin-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chinese-coin-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "clear-16", "size": "16", "height": "16", "width": "16" }, + { "name": "clear-20", "size": "20", "height": "20", "width": "20" }, + { "name": "clear-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "click-to-call-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "clock-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "click-to-call-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "clock-24", "size": "24", "height": "24", "width": "24" }, + { "name": "close-12", "size": "12", "height": "12", "width": "13" }, + { "name": "close-16", "size": "16", "height": "16", "width": "16" }, + { "name": "clock-64", "size": "64", "height": "64", "width": "64" }, + { "name": "close-20", "size": "20", "height": "20", "width": "20" }, + { "name": "close-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "closed-caption-16", + "size": "16", + "height": "16", + "width": "20" + }, + { + "name": "closed-caption-filled-16", + "size": "16", + "height": "16", + "width": "20" + }, + { + "name": "coin-battery-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "collections-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "collections-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "coin-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "condensed-grid-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "condensed-grid-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "confirmation-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "confirmation-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "confirmation-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "confirmation-filled-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "confirmation-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "contrast-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "contract-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "copy-16", "size": "16", "height": "16", "width": "16" }, + { "name": "copy-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "credit-card-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "credit-card-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "confirmation-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "crop-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "delete-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "customize-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "delete-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "customize-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "credit-card-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "delete-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "density-compact-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "density-relaxed-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "density-compact-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "density-relaxed-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "density-default-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "density-default-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "diamond-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "diamond-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "diners-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "direct-debit-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "diners-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "diners-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "diners-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "direct-debit-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "direct-debit-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "direct-debit-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "direct-from-brand-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "direct-from-brand-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "discount-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "discord-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "discount-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "discover-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "discover-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "discover-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "discover-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "dollar-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "dollar-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "download-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "download-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "download-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "drag-drop-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "drag-drop-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-balance-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "ebay-balance-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "ebay-balance-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "ebay-balance-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "ebay-bucks-logo-16-colored", + "size": "16-colored", + "height": "16", + "width": "48" + }, + { + "name": "ebay-for-charity-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-for-charity-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-international-shipping-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-international-shipping-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-international-shipping-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "ebay-live-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-live-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-mastercard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "ebay-mastercard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "ebay-mastercard-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "ebay-mastercard-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "ebay-money-back-guarantee-logo-16-colored", + "size": "16-colored", + "height": "16", + "width": "147" + }, + { + "name": "ebay-plus-logo-16-colored", + "size": "16-colored", + "height": "16", + "width": "58" + }, + { + "name": "ebay-plus-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-preloved-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ebay-plus-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-preloved-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-refurbished-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ebay-refurbished-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "escrow-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "escrow-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "escrow-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "escrow-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "escrow-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "euro-16", "size": "16", "height": "16", "width": "16" }, + { "name": "euro-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "escrow-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "exclude-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "european-conformity-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "exclude-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "expand-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "explore-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "external-link-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "explore-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "external-link-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "external-link-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-happiest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-happy-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "face-happy-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-neutral-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-sad-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-saddest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "facebook-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "facebook-messenger-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fall-leaf-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "fast-and-free-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "fall-leaf-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fast-and-free-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fast-and-free-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "feedback-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "feedback-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "feedback-received-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "feedback-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "file-24", "size": "24", "height": "24", "width": "24" }, + { "name": "file-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "filter-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "filter-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "fingerprint-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "feedback-received-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "fingerprint-64", + "size": "64", + "height": "64", + "width": "65" + }, + { "name": "flag-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "flash-auto-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "flag-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "flag-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "flag-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "flash-off-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "flash-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "folder-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "folder-add-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "folder-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "franc-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "folder-add-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "free-warranty-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "free-warranty-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "franc-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "full-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "full-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "full-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "gallery-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "general-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "full-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "gallery-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "general-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "general-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "general-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "generic-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "generic-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "generic-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "gift-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "generic-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "gift-16", "size": "16", "height": "16", "width": "16" }, + { "name": "gift-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "gift-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "gift-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "gift-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "gift-card-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "girocard-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "girocard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "girocard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "girocard-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "glasses-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "google-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "glasses-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "google-pay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "google-pay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "google-pay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { "name": "graph-64", "size": "64", "height": "64", "width": "64" }, + { "name": "graph-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "graph-dynamic-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "graph-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "google-pay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "grid-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "graph-dynamic-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "grid-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "grid-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "grid-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "handbag-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "handbag-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "hanger-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "hanger-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "headlight-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "headphone-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "headphone-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "headlight-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "help-16", "size": "16", "height": "16", "width": "16" }, + { "name": "help-20", "size": "20", "height": "20", "width": "20" }, + { "name": "help-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "help-outline-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "help-outline-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "hide-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "help-outline-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "history-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "hide-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "history-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "history-64", + "size": "64", + "height": "64", + "width": "64" + }, + { "name": "home-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "home-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "image-16", "size": "16", "height": "16", "width": "16" }, + { "name": "image-24", "size": "24", "height": "24", "width": "24" }, + { "name": "image-64", "size": "64", "height": "64", "width": "64" }, + { "name": "inbox-16", "size": "16", "height": "16", "width": "16" }, + { "name": "inbox-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "information-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "information-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "information-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "inspect-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "inspect-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "information-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "inspect-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "item-list-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "item-list-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "instagram-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "item-list-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "jcb-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "jcb-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "jet-ski-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "jcb-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "key-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "jet-ski-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "jcb-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "keyboard-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "key-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "keyboard-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "klarna-black-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "klarna-black-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "klarna-black-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-black-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "klarna-pink-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-pink-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "klarna-pink-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "klarna-white-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-white-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "klarna-pink-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "klarna-white-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "klarna-white-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "krona-24", "size": "24", "height": "24", "width": "24" }, + { "name": "lamp-16", "size": "16", "height": "16", "width": "16" }, + { "name": "lamp-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "large-box-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "legacy-authenticity-guarantee-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-click-to-call-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { "name": "krona-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "legacy-free-warranty-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-chf-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "large-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "legacy-money-back-guarantee-us-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-top-rated-seller-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-escrow-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "lightbulb-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "legacy-money-back-guarantee-uk-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-eu-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-zl-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "lightning-bolt-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "link-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "list-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "lightbulb-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "lightning-bolt-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "list-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "list-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "list-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "live-eye-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "location-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "location-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "live-eye-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "linkedin-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "location-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "locked-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "locked-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "maestro-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "maestro-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "maestro-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "maestro-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "locked-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "mail-16", "size": "16", "height": "16", "width": "16" }, + { "name": "mail-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "mail-move-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "mail-64", "size": "64", "height": "64", "width": "64" }, + { "name": "mail-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "mail-move-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "mail-open-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mail-open-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "map-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "mail-unread-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mail-unread-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "map-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "masonry-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "map-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "mastercard-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "masonry-view-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mastercard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "masonry-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "mastercard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "mastercard-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "masonry-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "megaphone-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "megaphone-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "medium-box-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "menu-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "medium-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "menu-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "mobile-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "mobile-signal-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "microphone-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "microphone-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-back-guarantee-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "money-back-guarantee-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-back-guarantee-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "money-stack-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-stack-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "monthly-invoice-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "monthly-invoice-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "money-back-guarantee-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "monthly-invoice-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "monthly-invoice-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "moon-16", "size": "16", "height": "16", "width": "16" }, + { "name": "moon-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "motorcycle-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "mountain-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "motorcycle-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "moon-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "mountain-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "move-16", "size": "16", "height": "16", "width": "16" }, + { "name": "move-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "nectar-logo-24-colored", + "size": "24-colored", + "height": "24", + "width": "29" + }, + { + "name": "negative-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "negative-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "neutral-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "neutral-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "no-children-zero-three-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "notification-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "notification-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "notification-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "on-the-way-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "notification-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "out-of-reach-48", + "size": "48", + "height": "48", + "width": "48" + }, + { + "name": "notification-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "on-the-way-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "overflow-horizontal-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "overflow-horizontal-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "overflow-horizontal-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "overflow-vertical-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "overflow-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "package-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "overflow-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "package-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "package-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "panel-24", "size": "24", "height": "24", "width": "24" }, + { "name": "panel-20", "size": "20", "height": "20", "width": "20" }, + { "name": "panel-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "panel-close-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-close-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "panel-close-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-close-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-close-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-open-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-close-vertical-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "panel-open-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "panel-open-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-open-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-open-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-open-vertical-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "passkey-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "passkey-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "pause-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "pause-filled-64-colored", + "size": "64-colored", + "height": "64", + "width": "64" + }, + { "name": "pause-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "passkey-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "payoneer-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "payoneer-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "payoneer-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "paypal-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "payoneer-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "paypal-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "paypal-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "paypal-credit-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "paypal-credit-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "paypal-credit-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "paypal-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "paypal-credit-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "paypal-disabled-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "paypal-disabled-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "paypal-disabled-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "pencil-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "paypal-disabled-24-colored", + "size": "24-colored", + "height": "24", + "width": "37" + }, + { "name": "peso-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "pencil-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "phone-16", "size": "16", "height": "16", "width": "16" }, + { "name": "peso-24", "size": "24", "height": "24", "width": "24" }, + { "name": "phone-24", "size": "24", "height": "24", "width": "24" }, + { "name": "pin-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "pencil-20", + "size": "20", + "height": "20", + "width": "20" + }, + { "name": "play-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "pinterest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "pin-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "play-filled-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "play-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "play-filled-64-colored", + "size": "64-colored", + "height": "64", + "width": "64" + }, + { + "name": "postepay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "postepay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "postepay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "postepay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { "name": "play-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "potted-plant-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "print-16", "size": "16", "height": "16", "width": "16" }, + { "name": "pound-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "potted-plant-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "pound-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "profile-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "print-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "profile-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "progress-current-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "profile-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "promotion-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "psa-vault-16-colored", + "size": "16-colored", + "height": "16", + "width": "84" + }, + { + "name": "promotion-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "progress-upcoming-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "qr-code-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "profile-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "qr-code-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "psa-vault-16", + "size": "16", + "height": "16", + "width": "84" + }, + { + "name": "recovery-code-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "reddit-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "recovery-code-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "refresh-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "relaxed-grid-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "relaxed-grid-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "remove-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "refresh-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "remove-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "remove-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "reply-16", "size": "16", "height": "16", "width": "16" }, + { "name": "reply-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "return-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ribbon-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "ribbon-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "rim-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "return-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ringgit-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ringgit-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "rotate-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "rotate-landscape-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "rim-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "rotate-landscape-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "rotate-portrait-left-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "rotate-portrait-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "rupee-16", "size": "16", "height": "16", "width": "16" }, + { "name": "rupee-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "satchel-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "satchel-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "save-24", "size": "24", "height": "24", "width": "24" }, + { "name": "save-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "save-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "save-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "save-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "save-16", "size": "16", "height": "16", "width": "16" }, + { "name": "scan-16", "size": "16", "height": "16", "width": "16" }, + { "name": "scan-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "search-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "search-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "search-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "search-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "search-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "search-similar-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "search-similar-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "seasons-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "search-similar-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "security-key-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "seasons-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "selling-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "selling-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "select-all-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "send-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "selling-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "settings-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "settings-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "selling-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-android-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "settings-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-android-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "share-ios-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "share-android-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-ios-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "sharpen-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "share-ios-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "shirt-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "ship-and-local-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "ship-and-local-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "shoe-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "shirt-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "shovel-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "shovel-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "small-box-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "show-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "small-letter-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "show-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "sneaker-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "small-box-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "sneaker-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "snowflake-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "snowflake-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "snowmobile-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "sort-16", "size": "16", "height": "16", "width": "16" }, + { "name": "sort-12", "size": "12", "height": "12", "width": "12" }, + { + "name": "snowmobile-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "sort-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "sort-down-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "sort-up-12", + "size": "12", + "height": "12", + "width": "12" + }, + { + "name": "sparkline-down-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "sparkline-down-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "sparkline-down-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "sparkline-up-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "sparkline-up-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "speedometer-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "speedometer-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "sparkline-up-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "sparkline-up-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "split-view-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "split-payment-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "spring-leaf-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "split-payment-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "spring-leaf-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "split-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "star-empty-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "star-empty-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "star-empty-40", "height": "40", "width": "40" }, + { + "name": "star-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "star-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "star-filled-40", "height": "40", "width": "40" }, + { + "name": "star-half-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "star-half-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "star-half-dark-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, + { + "name": "star-half-dark-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "stepper-attention-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "stepper-current-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "stepper-upcoming-24", + "size": "24", + "height": "25", + "width": "24" + }, + { + "name": "stepper-confirmation-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "store-24", "size": "24", "height": "24", "width": "24" }, + { "name": "store-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "store-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "store-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "suitcase-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "swap-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "support-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "target-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "switch-camera-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "target-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "text-messaging-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "text-messaging-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "text-messaging-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "text-messaging-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "the-ebay-vault-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "the-ebay-vault-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "thumb-down-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-down-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "thumb-up-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-up-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "thumb-down-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "thumb-up-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "tick-16", "size": "16", "height": "16", "width": "16" }, + { "name": "tick-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "toggle-mode-bottom-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-up-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "toggle-mode-top-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "tiktok-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "top-rated-seller-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "top-service-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "top-service-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "top-rated-seller-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "trading-card-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "trading-card-grade-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "trading-card-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "transaction-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "trading-card-grade-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "translate-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "translate-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "translate-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "trend-down-16-fit", + "size": "16-fit", + "height": "16", + "width": "13" + }, + { + "name": "trend-up-16-fit", + "size": "16-fit", + "height": "16", + "width": "13" + }, + { + "name": "trophy-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "trophy-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "twitter-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "undo-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "unionpay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "undo-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "unionpay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "unionpay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "unionpay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "unlocked-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "unselect-all-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "upload-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "unlocked-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "upload-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "venmo-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "venmo-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "verified-condition-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "venmo-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "verified-condition-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "video-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "visa-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "venmo-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "visa-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "visa-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "visa-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "wallet-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "wallet-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "wallet-balance-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "wallet-balance-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "wallet-balance-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "wallet-balance-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "watch-16", "size": "16", "height": "16", "width": "16" }, + { "name": "watch-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "whatsapp-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "won-16", "size": "16", "height": "16", "width": "16" }, + { "name": "won-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "wrench-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "wrench-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "youtube-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "yuan-16", "size": "16", "height": "16", "width": "16" }, + { "name": "yuan-24", "size": "24", "height": "24", "width": "24" }, + { "name": "zloty-16", "size": "16", "height": "16", "width": "16" }, + { "name": "zloty-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "zoom-in-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "zoom-in-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "zoom-out-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "zoom-out-24", + "size": "24", + "height": "24", + "width": "24" + } + ], + "skipDocs": [ + "avatar-signed-out", + "checkbox-checked", + "checkbox-checked-large", + "checkbox-mixed", + "checkbox-mixed-large", + "checkbox-square-checked", + "checkbox-square-checked-large", + "checkbox-square-unchecked", + "checkbox-square-unchecked-large", + "checkbox-unchecked", + "checkbox-unchecked-large", + "eek-arrow", + "eek-range-arrow", + "radio-checked", + "radio-checked-large", + "radio-unchecked", + "radio-unchecked-large", + "spinner-20", + "spinner-24", + "spinner-30", + "star-dynamic", + "star-rating-small-0", + "star-rating-small-0-5", + "star-rating-small-1", + "star-rating-small-1-5", + "star-rating-small-2", + "star-rating-small-2-5", + "star-rating-small-3", + "star-rating-small-3-5", + "star-rating-small-4", + "star-rating-small-4-5", + "star-rating-small-5", + "star-rating-0", + "star-rating-0-5", + "star-rating-1", + "star-rating-1-5", + "star-rating-2", + "star-rating-2-5", + "star-rating-3", + "star-rating-3-5", + "star-rating-4", + "star-rating-4-5", + "star-rating-5", + "stepper-attention", + "stepper-confirmation", + "stepper-current", + "stepper-upcoming", + "stepper-information", + "program-badge-authenticity-guarantee-16-fit", + "image-placeholder", + "checkbox-mixed-18", + "checkbox-unchecked-18", + "checkbox-checked-24", + "radio-checked-18", + "checkbox-checked-18", + "radio-checked-24", + "radio-unchecked-24", + "checkbox-unchecked-24", + "radio-unchecked-18" + ], + "deprecated": null, + "program-badges": { + "prefix": "program-badge", + "list": [ + "authenticity-guaranteed", + "click-to-call", + "ebay-plus", + "escrow", + "free-warranty", + "money-back-guarantee-chf", + "money-back-guarantee-eu", + "money-back-guarantee-uk", + "money-back-guarantee-us", + "money-back-guarantee-zl", + "top-rated-seller", + "vault" + ] + }, + "skip": [ + "icon-spinner-large", + "image-placeholder", + "icon-avatar-signed-out" + ] + }, + "module_metadata": { + "alert-dialog": { + "ds-component": { "name": "alert-dialog", "version": "18.1.0" }, + "submodules": ["button"] + }, + "avatar": { "ds-component": { "name": "avatar", "version": "18.1.0" } }, + "badge": { "ds-component": { "name": "badge", "version": "18.1.0" } }, + "breadcrumbs": { + "ds-component": { "name": "breadcrumb", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "button": { + "ds-component": { + "group": "button", + "name": "button", + "version": "18.1.0" + } + }, + "carousel": { + "ds-component": { "name": "carousel", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "calendar": { + "ds-component": { "name": "calendar", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "checkbox": { + "ds-component": { "name": "checkbox", "version": "18.1.0" } + }, + "chart-legend": { "ds-component": { "version": "18.1.0" } }, + "chip": { + "ds-component": { "name": "input-chip", "version": "18.1.0" } + }, + "chips-combobox": { + "ds-component": { "name": "chip-combobox", "version": "18.1.0" }, + "submodules": ["chip", "combobox"] + }, + "combobox": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon", "listbox", "textbox"] + }, + "confirm-dialog": { + "ds-component": { "name": "alert-dialog", "version": "18.1.0" }, + "submodules": ["button"] + }, + "cta-button": { + "ds-component": { + "group": "button", + "name": "button", + "version": "18.1.0" + } + }, + "date-textbox": { + "ds-component": { "name": "date-picker", "version": "18.1.0" }, + "submodules": ["calendar", "icon-button", "textbox"] + }, + "details": { + "ds-component": { "name": "expansion", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "donut-chart": { + "ds-component": { "name": "donut-chart", "version": "18.1.0" }, + "submodules": ["chart-legend"] + }, + "education-notice": { + "ds-component": { "name": "education-notice", "version": "18.1.0" } + }, + "eek": { + "ds-component": { "name": "eek", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "filter-button": { + "ds-component": { "name": "quick-filter", "version": "18.1.0" } + }, + "filter-menu": { + "ds-component": { "version": "18.1.0" }, + "submodules": ["icon"] + }, + "filter-menu-button": { + "ds-component": { "name": "quick-filter", "version": "18.1.0" }, + "submodules": ["filter-menu", "icon"] + }, + "flag": { "ds-component": { "version": "18.1.0" } }, + "floating-label": { + "ds-component": { "name": "form-field", "version": "18.1.0" } + }, + "icon": { "ds-component": { "name": "icon", "version": "18.1.0" } }, + "icon-button": { + "ds-component": { + "group": "button", + "name": "icon-button", + "version": "18.1.0" + }, + "submodules": ["icon"] + }, + "infotip": { + "ds-component": { "name": "infotip", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "inline-notice": { + "ds-component": { "name": "alert-notice", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "lightbox-dialog": { + "ds-component": [ + { "name": "modal", "version": "18.1.0" }, + { "name": "bottom-sheet", "version": "18.1.0" } + ], + "submodules": ["button", "icon-button"] + }, + "less": { "ds-component": { "version": "18.1.0" } }, + "link": { + "ds-component": { "name": "text-link", "version": "18.1.0" } + }, + "listbox": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "listbox-button": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["button", "icon"] + }, + "menu": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "menu-button": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["button", "icon", "menu"] + }, + "page-grid": { "ds-component": { "version": "18.1.0" } }, + "page-notice": { + "ds-component": { "name": "alert-notice", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "pagination": { + "ds-component": { "name": "pagination", "version": "18.1.0" }, + "submodules": ["icon-link"] + }, + "panel-dialog": { + "ds-component": { "name": "panel", "version": "18.1.0" }, + "submodules": ["button", "icon-button"] + }, + "phone-input": { + "ds-component": { "name": "phone-number", "version": "18.1.0" } + }, + "progress-bar": { + "ds-component": { "name": "progress-bar", "version": "18.1.0" } + }, + "progress-bar-expressive": { + "ds-component": { "name": "expressive-loader", "version": "18.1.0" } + }, + "progress-spinner": { + "ds-component": { "name": "progress-spinner", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "progress-stepper": { + "ds-component": { "name": "progress-stepper", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "radio": { + "ds-component": { "name": "radio-button", "version": "18.1.0" } + }, + "section-notice": { + "ds-component": { "name": "alert-notice", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "section-title": { "ds-component": { "version": "18.1.0" } }, + "segmented-buttons": { + "ds-component": { "name": "segmented-button", "version": "18.1.0" } + }, + "select": { + "ds-component": { "name": "dropdown", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "signal": { "ds-component": { "name": "signal", "version": "18.1.0" } }, + "skeleton": { + "ds-component": { + "name": "skeleton", + "status": "beta", + "version": "18.1.0" + } + }, + "snackbar-dialog": { + "ds-component": { "name": "snackbar", "version": "18.1.0" }, + "submodules": ["button"] + }, + "split-button": { + "ds-component": { + "group": "button", + "name": "split-button", + "version": "18.1.0" + }, + "submodules": ["button", "menu-button"] + }, + "star-rating": { + "ds-component": { "name": "review-rating", "version": "18.1.0" } + }, + "star-rating-select": { + "ds-component": { "name": "review-input", "version": "18.1.0" } + }, + "switch": { "ds-component": { "name": "switch", "version": "18.1.0" } }, + "tabs": { "ds-component": { "name": "tabs", "version": "18.1.0" } }, + "textbox": { + "ds-component": { "name": "form-field", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "toast-dialog": { + "ds-component": { "version": "18.1.0" }, + "submodules": ["button", "icon-button"] + }, + "toggle-button": { + "ds-component": { "name": "toggle-button", "version": "18.1.0" }, + "submodules": ["icon"] + }, + "toggle-button-group": { + "ds-component": { + "name": "toggle-button-group", + "version": "18.1.0" + }, + "submodules": ["toggle-button"] + }, + "tooltip": { + "ds-component": { "name": "tooltip", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "tourtip": { + "ds-component": { "name": "tourtip", "version": "18.1.0" }, + "submodules": ["icon-button"] + }, + "typography": { "version": "18.1.0" } + } +} diff --git a/src/routes/_index/+layout.component-browser.js b/src/routes/_index/+layout.component-browser.js index 059556dc0..d03178af3 100644 --- a/src/routes/_index/+layout.component-browser.js +++ b/src/routes/_index/+layout.component-browser.js @@ -1,6 +1,6 @@ import "prismjs"; import "prismjs/themes/prism-tomorrow.css"; // import "prismjs/components/prism-json.js"; -import "../main.js"; +// import "./main.js"; export default {}; diff --git a/src/routes/_index/+layout.marko b/src/routes/_index/+layout.marko index 5fbe4484c..f70aa361a 100644 --- a/src/routes/_index/+layout.marko +++ b/src/routes/_index/+layout.marko @@ -1,70 +1,33 @@ -import {modules} from '../modules.marko'; - +import siteMeta from "../../components/data/site.json" - ${$global.meta.pageTitle} + ${$global.meta.pageTitle || 'eBay Skin CSS Framework'} + -
    -
    -
    -
    -

    ${$global.meta.pageTitle}

    - -
    -
    -
    -
    - - Modules - - Use the links below & the back button to navigate - - -
      - -
    -
    -
    +
    - +
    <${input.renderBody}/>
    -
    -
    -
    +
    + + Copyright © 2025 eBay, Inc. All rights reserved. +
    \ No newline at end of file diff --git a/src/routes/+layout.style.scss b/src/routes/_index/+layout.style.scss similarity index 62% rename from src/routes/+layout.style.scss rename to src/routes/_index/+layout.style.scss index 1903bf639..1bae2e0e8 100644 --- a/src/routes/+layout.style.scss +++ b/src/routes/_index/+layout.style.scss @@ -1,12 +1,12 @@ -@import "../sass/variables/variables"; -@import "../sass/mixins/public/typography-mixins"; -@import "../sass/mixins/public/utility-mixins"; -@import "./static/sass/pygments"; -@import "./static/sass/demo-colors"; -@import "./static/sass/page-grid"; -@import "./static/sass/breakpoints"; -@import "./static/sass/color-schemes"; -@import "../sass/bundles/skin-full"; +@import "../../sass/variables/variables"; +@import "../../sass/mixins/public/typography-mixins"; +@import "../../sass/mixins/public/utility-mixins"; +@import "../static/sass/pygments"; +@import "../static/sass/demo-colors"; +@import "../static/sass/page-grid"; +@import "../static/sass/breakpoints"; +@import "../static/sass/color-schemes"; +@import "../../sass/bundles/skin-full"; :root { --color-menu-background: #f2f2f2; @@ -32,12 +32,20 @@ body > svg { width: 0; } +h1 { + // font-size: 18px; + font-size: 1.25em; +} + header { background-color: var(--color-background-accent); + min-height: 100px; } footer { + background: var(--color-menu-background); margin-top: var(--spacing-400); + padding: 15px; } main > div > h2 { @@ -51,6 +59,236 @@ main > div > h3 { font-size: var(--font-size-medium); } +nav h2 { + font-size: 18px; +} + +/* HEADER */ +.app-bar { + align-items: center; + box-sizing: border-box; + color: var(--color-neutral-100); + /* display: flex; */ + display: grid; + grid-area: 1 / 1 / span 1 / span 8; + /* justify-content: space-between; */ + margin: 0 auto; + padding: var(--spacing-200) 0; + width: 100%; +} + +.app-bar__title { + margin: 0; +} + +.app-bar__title a, +.app-bar__title a:visited { + color: var(--color-foreground-on-inverse); + text-decoration: none; +} + +.app-bar__title a:hover { + text-decoration: underline; +} + +.app-bar__links { + list-style-type: none; + margin: 0; + padding: 0; +} + +.app-bar__links li:not(:last-child)::after { + content: ""; + margin: 0 var(--spacing-100); +} + +.app-bar__links a { + color: var(--color-foreground-primary); + display: inline-block; + padding-block: var(--spacing-150); + text-decoration: none; +} + +.app-bar__links a:hover { + text-decoration: underline; +} + +.app-bar__links a:focus { + outline: 1px auto var(--color-foreground-primary); +} + +.app-bar__links a:visited { + color: var(--color-foreground-primary); +} + +.top-bar { + align-items: center; + display: grid; + grid-template: + "leading content trailing" + "fullrow fullrow fullrow" + / 50px 1fr; + position: relative; +} + +.app-bar-menu { + grid-area: leading; +} + +.app-bar__title { + grid-area: content; +} + +.primary-nav:not(.footer-nav) { + background-color: var(--color-background-secondary); + border: 1px solid var(--color-stroke-subtle); + border-radius: 3px; + box-shadow: var(--shadow-subtle); + display: none; + font-size: var(--spacing-200); + grid-area: fullrow; + padding: var(--spacing-200); + position: absolute; + top: 3px; + width: 90%; + z-index: 1; +} + +.primary-nav.footer-nav { + display: block; + margin-bottom: 10px; +} + +.primary-nav.footer-nav a, +.primary-nav.footer-nav a:visited { + color: var(--color-foreground-secondary); +} + +.primary-nav.footer-nav ul { + display: flex; + gap: 10px; + margin: 0; + padding: 0; +} + +.primary-nav.footer-nav ul li::marker { + content: ""; + font-size: 0; +} + +.secondary-nav li { + line-height: 1.25em; + margin-bottom: 0.75em; +} + +.mobile-nav-toggle { + border: 1px solid var(--color-background-primary); + border-radius: 2px; + /* flex-shrink: 0; */ + height: 28px; + justify-items: center; + margin-top: 2px; + padding: 0; + position: static; + width: 28px; +} + +.mobile-menu__icon { + align-items: center; + display: flex; + height: 28px; + justify-content: center; + width: 28px; +} + +svg.icon.mobile-menu__close { + display: none; +} + +.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__open { + display: none; +} + +.mobile-nav-toggle[aria-expanded="true"] ~ .primary-nav { + display: block; +} + +.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__close { + display: block; +} + +@media screen and (min-width: $_screen-size-SM) { + .app-bar { + grid-area: 1 / 1 / span 1 / span 16; + } + + header { + min-height: auto; + } +} + +@media screen and (min-width: $_screen-size-MD) { + h1 { + font-size: var(--font-size-large-2); + } + + nav h2 { + font-size: initial; + } + + .app-bar { + grid-area: 1 / 1 / span 1 / span 16; + } + + .top-bar { + grid-template-columns: auto auto auto; + } + + .app-bar__title { + grid-area: leading; + } + + .app-bar__links { + display: flex; + flex-direction: row; + flex-shrink: 0; + list-style-type: none; + margin-left: var(--spacing-100); + } + + .app-bar__links a { + color: var(--color-foreground-on-inverse); + padding-block: 0; + } + + .app-bar__links a:focus { + outline: 1px auto var(--color-foreground-on-inverse); + } + + .app-bar__links a:visited { + color: var(--color-foreground-on-inverse); + } + + .mobile-nav-toggle { + display: none; + } + + .primary-nav:not(.footer-nav) { + background-color: transparent; + border: none; + border-radius: 0; + box-shadow: none; + display: block; + font-size: inherit; + grid-area: trailing; + justify-self: right; + padding: 0; + position: static; + width: auto; + } +} + +/* GENERAL */ div.highlight { background-color: var(--color-background-tertiary); padding: var(--spacing-200); @@ -94,12 +332,23 @@ figure.highlight { .modules-expander { background: var(--color-menu-background); + border: 1px solid var(--color-stroke-subtle); + box-shadow: var(--shadow-subtle); + box-sizing: border-box; font-size: var(--font-size-medium); padding: 4px var(--spacing-200); + position: absolute; + width: 100%; } .modules-expander li { font-size: var(--font-size-default); + line-height: 1.5em; + margin-bottom: 0.5em; +} + +.modules-expander .details__content { + display: flex; } .modules-expander__tip { @@ -111,7 +360,6 @@ figure.highlight { } .modules-expander__list { - column-count: 3; line-height: 1.75em; list-style-type: none; margin: 16px 0 0; @@ -119,6 +367,10 @@ figure.highlight { width: 100%; } +.components-nav .modules-expander__list { + column-count: 2; +} + .modules-expander[open] { padding-bottom: var(--spacing-100); position: absolute; @@ -138,64 +390,64 @@ figure.highlight { padding: var(--spacing-100) 0; } -.app-bar { - align-items: center; - box-sizing: border-box; - color: var(--color-neutral-100); - display: flex; - grid-area: 1 / 1 / span 1 / span 8; - justify-content: space-between; - margin: 0 auto; - padding: var(--spacing-200) 0; - width: 100%; -} - -@media screen and (min-width: $_screen-size-MD) { - .app-bar { - grid-area: 1 / 1 / span 1 / span 16; - } -} - -.app-bar__title { - font-size: var(--font-size-large-2); - margin: 0; -} - -.app-bar__links { - display: flex; - flex-direction: row; - flex-shrink: 0; - list-style-type: none; - margin-left: var(--spacing-100); - padding: 0; -} - -.app-bar__links li:not(:last-child)::after { - content: ""; - margin: 0 var(--spacing-100); -} - -.app-bar__links a { - color: var(--color-neutral-100); - text-decoration: none; -} +// .app-bar { +// align-items: center; +// box-sizing: border-box; +// color: var(--color-neutral-100); +// display: flex; +// grid-area: 1 / 1 / span 1 / span 8; +// justify-content: space-between; +// margin: 0 auto; +// padding: var(--spacing-200) 0; +// width: 100%; +// } + +// @media screen and (min-width: $_screen-size-MD) { +// .app-bar { +// grid-area: 1 / 1 / span 1 / span 16; +// } +// } + +// .app-bar__title { +// font-size: var(--font-size-large-2); +// margin: 0; +// } + +// .app-bar__links { +// display: flex; +// flex-direction: row; +// flex-shrink: 0; +// list-style-type: none; +// margin-left: var(--spacing-100); +// padding: 0; +// } + +// .app-bar__links li:not(:last-child)::after { +// content: ""; +// margin: 0 var(--spacing-100); +// } + +// .app-bar__links a { +// color: var(--color-neutral-100); +// text-decoration: none; +// } .modules-expander__list a, .modules-expander__list a.nav-link:visited { color: var(--color-foreground-accent); } -.app-bar__links a:hover { - text-decoration: underline; -} +// .app-bar__links a:hover { +// text-decoration: underline; +// } -.app-bar__links a:focus { - outline: 1px auto var(--color-neutral-100); -} +// .app-bar__links a:focus { +// outline: 1px auto var(--color-neutral-100); +// } -.app-bar__links a:visited { - color: var(--color-neutral-100); -} +// .app-bar__links a:visited { +// color: var(--color-neutral-100); +// } .section-header { display: flex; @@ -221,6 +473,7 @@ figure.highlight { } #about dt { + font-size: 18px; font-weight: bold; margin: 0 0 12px; } @@ -235,6 +488,10 @@ figure.highlight { border: 1px dashed var(--color-neutral-300); } +.demo--maintain-boundary .demo__inner { + overflow-x: auto; +} + .demo__inner { margin: var(--spacing-100); } diff --git a/src/routes/_index/+meta.json b/src/routes/_index/+meta.json index 304a957b3..a3e97ecb4 100644 --- a/src/routes/_index/+meta.json +++ b/src/routes/_index/+meta.json @@ -1,23 +1,17 @@ { - "pageTitle": "eBay Skin", + "pageTitle": "Skin CSS Framework", "version": "18.6.0", "icons": { "prefix": "icon", "largeDocs": ["ebay-money-back-guarantee-logo-16-colored"], "list": [ - { "name": "add-24", "size": "24", "height": "24", "width": "24" }, + { "name": "add-16", "size": "16", "height": "16", "width": "16" }, { "name": "add-image-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "afterpay-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" - }, { "name": "add-12", "size": "12", "height": "12", "width": "12" }, { "name": "afterpay-18-colored", @@ -25,13 +19,19 @@ "height": "18", "width": "30" }, + { + "name": "afterpay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "add-24", "size": "24", "height": "24", "width": "24" }, { "name": "afterpay-24-colored", "size": "24-colored", "height": "24", "width": "38" }, - { "name": "add-16", "size": "16", "height": "16", "width": "16" }, { "name": "afterpay-32-colored", "size": "32-colored", @@ -39,7 +39,6 @@ "width": "50" }, { "name": "ai-16", "size": "16", "height": "16", "width": "16" }, - { "name": "ai-20", "size": "20", "height": "20", "width": "20" }, { "name": "ai-24", "size": "24", "height": "24", "width": "24" }, { "name": "ai-filled-16", @@ -59,6 +58,7 @@ "height": "24", "width": "24" }, + { "name": "ai-20", "size": "20", "height": "20", "width": "20" }, { "name": "ai-spectrum-16-colored", "size": "16-colored", @@ -83,12 +83,6 @@ "height": "16", "width": "16" }, - { - "name": "ai-thin-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "ai-spectrum-filled-20-colored", "size": "20-colored", @@ -101,24 +95,36 @@ "height": "24", "width": "24" }, - { - "name": "alipay-cn-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, { "name": "ai-spectrum-thin-16-colored", "size": "16-colored", "height": "16", "width": "16" }, + { + "name": "ai-thin-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "alipay-cn-12-colored", "size": "12-colored", "height": "12", "width": "20" }, + { + "name": "alipay-cn-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "amex-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, { "name": "alipay-cn-32-colored", "size": "32-colored", @@ -137,12 +143,6 @@ "height": "18", "width": "30" }, - { - "name": "amex-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" - }, { "name": "amex-32-colored", "size": "32-colored", @@ -155,24 +155,18 @@ "height": "24", "width": "38" }, - { "name": "apple-24", "size": "24", "height": "24", "width": "24" }, { "name": "apple-pay-12-colored", "size": "12-colored", "height": "12", "width": "20" }, + { "name": "apple-24", "size": "24", "height": "24", "width": "24" }, { - "name": "apple-pay-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, - { - "name": "archive-16", - "size": "16", - "height": "16", - "width": "16" + "name": "apple-pay-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" }, { "name": "apple-pay-32-colored", @@ -181,16 +175,16 @@ "width": "50" }, { - "name": "arrow-left-12", - "size": "12", - "height": "12", - "width": "12" + "name": "apple-pay-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" }, { - "name": "apple-pay-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" + "name": "archive-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "archive-24", @@ -199,10 +193,10 @@ "width": "24" }, { - "name": "arrow-left-20", - "size": "20", - "height": "20", - "width": "20" + "name": "arrow-left-12", + "size": "12", + "height": "12", + "width": "12" }, { "name": "arrow-left-16", @@ -211,10 +205,10 @@ "width": "16" }, { - "name": "arrow-right-16", - "size": "16", - "height": "16", - "width": "16" + "name": "arrow-left-20", + "size": "20", + "height": "20", + "width": "20" }, { "name": "arrow-left-24", @@ -222,12 +216,6 @@ "height": "24", "width": "24" }, - { - "name": "arrow-right-20", - "size": "20", - "height": "20", - "width": "20" - }, { "name": "arrow-right-12", "size": "12", @@ -235,10 +223,16 @@ "width": "12" }, { - "name": "arrow-right-24", - "size": "24", - "height": "24", - "width": "24" + "name": "arrow-right-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "arrow-right-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "arrows-3d-16", @@ -247,14 +241,14 @@ "width": "16" }, { - "name": "arrows-3d-24", + "name": "arrow-right-24", "size": "24", "height": "24", "width": "24" }, { - "name": "arrows-expand-16", - "size": "16", + "name": "arrows-3d-24", + "size": "24", "height": "24", "width": "24" }, @@ -264,6 +258,12 @@ "height": "64", "width": "64" }, + { + "name": "arrows-expand-16", + "size": "16", + "height": "24", + "width": "24" + }, { "name": "arrows-expand-24", "size": "24", @@ -271,25 +271,25 @@ "width": "16" }, { - "name": "article-24", - "size": "24", - "height": "24", - "width": "24" + "name": "article-16", + "size": "16", + "height": "16", + "width": "16" }, { - "name": "article-16", + "name": "attention-16", "size": "16", "height": "16", "width": "16" }, { - "name": "attention-24", + "name": "article-24", "size": "24", "height": "24", "width": "24" }, { - "name": "attention-filled-24", + "name": "attention-24", "size": "24", "height": "24", "width": "24" @@ -307,21 +307,21 @@ "width": "16" }, { - "name": "attention-16", - "size": "16", - "height": "16", - "width": "16" + "name": "attention-filled-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "atv-16", "size": "16", "height": "16", "width": "16" }, { "name": "atv-24", "size": "24", "height": "24", "width": "24" }, { - "name": "audio-off-16", + "name": "audio-high-16", "size": "16", "height": "16", "width": "16" }, { - "name": "audio-low-16", + "name": "audio-off-16", "size": "16", "height": "16", "width": "16" @@ -339,19 +339,7 @@ "width": "24" }, { - "name": "auto-adjust-24", - "size": "24", - "height": "24", - "width": "24" - }, - { - "name": "authenticity-guarantee-filled-24-colored", - "size": "24-colored", - "height": "24", - "width": "24" - }, - { - "name": "audio-high-16", + "name": "audio-low-16", "size": "16", "height": "16", "width": "16" @@ -362,7 +350,18 @@ "height": "16", "width": "16" }, - { "name": "bank-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "authenticity-guarantee-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "auto-adjust-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "background-removal-16", "size": "16", @@ -375,14 +374,15 @@ "height": "24", "width": "24" }, + { "name": "bank-16", "size": "16", "height": "16", "width": "16" }, + { "name": "bank-24", "size": "24", "height": "24", "width": "24" }, + { "name": "bank-64", "size": "64", "height": "64", "width": "64" }, { "name": "bank-account-12-colored", "size": "12-colored", "height": "12", "width": "20" }, - { "name": "bank-24", "size": "24", "height": "24", "width": "24" }, - { "name": "bank-64", "size": "64", "height": "64", "width": "64" }, { "name": "bank-account-18-colored", "size": "18-colored", @@ -395,43 +395,37 @@ "height": "24", "width": "38" }, + { + "name": "bar-chart-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "bank-account-32-colored", "size": "32-colored", "height": "32", "width": "50" }, + { "name": "bids-16", "size": "16", "height": "16", "width": "16" }, + { "name": "bids-64", "size": "64", "height": "64", "width": "64" }, { "name": "bar-chart-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "bar-chart-16", - "size": "16", - "height": "16", - "width": "16" - }, - { "name": "bids-16", "size": "16", "height": "16", "width": "16" }, - { "name": "bids-64", "size": "64", "height": "64", "width": "64" }, - { "name": "bids-24", "size": "24", "height": "24", "width": "24" }, { "name": "boat-16", "size": "16", "height": "16", "width": "16" }, { "name": "boat-24", "size": "24", "height": "24", "width": "24" }, - { "name": "book-24", "size": "24", "height": "24", "width": "24" }, + { "name": "bids-24", "size": "24", "height": "24", "width": "24" }, { "name": "book-16", "size": "16", "height": "16", "width": "16" }, + { "name": "book-24", "size": "24", "height": "24", "width": "24" }, { "name": "bookmark-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "bookmark-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "bookmark-filled-16", "size": "16", @@ -439,13 +433,7 @@ "width": "16" }, { - "name": "brand-authorized-seller-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "brand-authorized-seller-24", + "name": "bookmark-24", "size": "24", "height": "24", "width": "24" @@ -456,6 +444,12 @@ "height": "24", "width": "24" }, + { + "name": "brand-authorized-seller-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "brightness-16", "size": "16", @@ -475,10 +469,10 @@ "width": "24" }, { - "name": "calendar-16", - "size": "16", - "height": "16", - "width": "16" + "name": "brand-authorized-seller-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "calendar-64", @@ -492,12 +486,25 @@ "height": "24", "width": "24" }, + { + "name": "calendar-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "camera-64", "size": "64", "height": "64", "width": "64" }, + { "name": "car-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "camera-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "camera-16", "size": "16", @@ -505,12 +512,11 @@ "width": "16" }, { - "name": "camera-24", + "name": "car-brake-24", "size": "24", "height": "24", "width": "24" }, - { "name": "car-16", "size": "16", "height": "16", "width": "16" }, { "name": "car-brake-16", "size": "16", @@ -518,22 +524,15 @@ "width": "16" }, { "name": "car-24", "size": "24", "height": "24", "width": "24" }, - { "name": "cart-16", "size": "16", "height": "16", "width": "16" }, { "name": "carryon-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "car-brake-24", - "size": "24", - "height": "24", - "width": "24" - }, - { "name": "cart-24", "size": "24", "height": "24", "width": "24" }, - { "name": "cart-64", "size": "64", "height": "64", "width": "64" }, + { "name": "cart-16", "size": "16", "height": "16", "width": "16" }, { "name": "cart-20", "size": "20", "height": "20", "width": "20" }, + { "name": "cart-64", "size": "64", "height": "64", "width": "64" }, { "name": "categories-16", "size": "16", @@ -565,41 +564,42 @@ "width": "20" }, { "name": "ccd-charger-included", "height": "78", "width": "58" }, - { "name": "ccd-top", "height": "25", "width": "35" }, { "name": "cb-32-colored", "size": "32-colored", "height": "32", "width": "50" }, + { "name": "cart-24", "size": "24", "height": "24", "width": "24" }, { "name": "ccd-charger-not-included", "height": "78", "width": "58" }, - { - "name": "certified-recycled-24", - "size": "24", - "height": "24", - "width": "24" - }, - { "name": "chat-16", "size": "16", "height": "16", "width": "16" }, + { "name": "ccd-top", "height": "25", "width": "35" }, { "name": "certified-recycled-16", "size": "16", "height": "16", "width": "16" }, - { "name": "chat-24", "size": "24", "height": "24", "width": "24" }, { "name": "chair-16", "size": "16", "height": "16", "width": "16" }, + { "name": "chair-24", "size": "24", "height": "24", "width": "24" }, + { "name": "chat-16", "size": "16", "height": "16", "width": "16" }, + { "name": "chat-24", "size": "24", "height": "24", "width": "24" }, + { "name": "chat-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "certified-recycled-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "check-in-24", "size": "24", "height": "24", "width": "24" }, - { "name": "chair-24", "size": "24", "height": "24", "width": "24" }, - { "name": "chat-64", "size": "64", "height": "64", "width": "64" }, { "name": "checkbox-mixed-24", "size": "24", @@ -654,24 +654,12 @@ "height": "20", "width": "20" }, - { - "name": "chevron-left-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "chevron-right-12", "size": "12", "height": "12", "width": "12" }, - { - "name": "chevron-right-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "chevron-right-20", "size": "20", @@ -679,7 +667,13 @@ "width": "20" }, { - "name": "chevron-right-24", + "name": "chevron-right-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "chevron-left-24", "size": "24", "height": "24", "width": "24" @@ -690,6 +684,18 @@ "height": "12", "width": "12" }, + { + "name": "chevron-right-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "chevron-up-20", + "size": "20", + "height": "20", + "width": "20" + }, { "name": "chevron-up-16", "size": "16", @@ -702,25 +708,20 @@ "height": "24", "width": "24" }, + { + "name": "chinese-coin-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "chinese-coin-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "chevron-up-20", - "size": "20", - "height": "20", - "width": "20" - }, { "name": "clear-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "chinese-coin-16", - "size": "16", - "height": "16", - "width": "16" - }, + { "name": "clear-20", "size": "20", "height": "20", "width": "20" }, { "name": "clear-24", "size": "24", "height": "24", "width": "24" }, { "name": "click-to-call-16", @@ -728,51 +729,50 @@ "height": "16", "width": "16" }, + { "name": "clock-16", "size": "16", "height": "16", "width": "16" }, { "name": "click-to-call-24", "size": "24", "height": "24", "width": "24" }, - { "name": "clear-20", "size": "20", "height": "20", "width": "20" }, - { "name": "clock-16", "size": "16", "height": "16", "width": "16" }, { "name": "clock-24", "size": "24", "height": "24", "width": "24" }, { "name": "close-12", "size": "12", "height": "12", "width": "13" }, - { "name": "close-20", "size": "20", "height": "20", "width": "20" }, - { "name": "close-24", "size": "24", "height": "24", "width": "24" }, { "name": "close-16", "size": "16", "height": "16", "width": "16" }, { "name": "clock-64", "size": "64", "height": "64", "width": "64" }, + { "name": "close-20", "size": "20", "height": "20", "width": "20" }, + { "name": "close-24", "size": "24", "height": "24", "width": "24" }, { "name": "closed-caption-16", "size": "16", "height": "16", "width": "20" }, - { - "name": "coin-battery-48", - "size": "48", - "height": "48", - "width": "48" - }, { "name": "closed-caption-filled-16", "size": "16", "height": "16", "width": "20" }, + { + "name": "coin-battery-48", + "size": "48", + "height": "48", + "width": "48" + }, { "name": "collections-16", "size": "16", "height": "16", "width": "16" }, - { "name": "coin-24", "size": "24", "height": "24", "width": "24" }, { "name": "collections-24", "size": "24", "height": "24", "width": "24" }, + { "name": "coin-24", "size": "24", "height": "24", "width": "24" }, { "name": "condensed-grid-24", "size": "24", @@ -804,49 +804,43 @@ "width": "64" }, { - "name": "confirmation-filled-16", - "size": "16", - "height": "16", - "width": "16" + "name": "confirmation-filled-12", + "size": "12", + "height": "12", + "width": "12" }, { - "name": "contract-16", + "name": "confirmation-filled-16", "size": "16", "height": "16", "width": "16" }, - { "name": "copy-16", "size": "16", "height": "16", "width": "16" }, { "name": "contrast-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "contract-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "copy-16", "size": "16", "height": "16", "width": "16" }, + { "name": "copy-24", "size": "24", "height": "24", "width": "24" }, { "name": "credit-card-24", "size": "24", "height": "24", "width": "24" }, - { "name": "copy-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "credit-card-64", - "size": "64", - "height": "64", - "width": "64" - }, { "name": "credit-card-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "confirmation-filled-12", - "size": "12", - "height": "12", - "width": "12" - }, { "name": "confirmation-filled-24", "size": "24", @@ -855,10 +849,10 @@ }, { "name": "crop-24", "size": "24", "height": "24", "width": "24" }, { - "name": "customize-24", - "size": "24", - "height": "24", - "width": "24" + "name": "delete-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "customize-16", @@ -867,16 +861,28 @@ "width": "16" }, { - "name": "delete-24", + "name": "delete-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "customize-24", "size": "24", "height": "24", "width": "24" }, { - "name": "delete-20", - "size": "20", - "height": "20", - "width": "20" + "name": "credit-card-64", + "size": "64", + "height": "64", + "width": "64" + }, + { + "name": "delete-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "density-compact-16", @@ -885,7 +891,7 @@ "width": "16" }, { - "name": "delete-16", + "name": "density-relaxed-16", "size": "16", "height": "16", "width": "16" @@ -896,12 +902,6 @@ "height": "24", "width": "24" }, - { - "name": "density-default-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "density-relaxed-24", "size": "24", @@ -915,13 +915,13 @@ "width": "16" }, { - "name": "diamond-16", - "size": "16", - "height": "16", - "width": "16" + "name": "density-default-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "density-relaxed-16", + "name": "diamond-16", "size": "16", "height": "16", "width": "16" @@ -933,22 +933,22 @@ "width": "24" }, { - "name": "diners-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" + "name": "diners-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" }, { - "name": "diners-12-colored", + "name": "direct-debit-12-colored", "size": "12-colored", "height": "12", "width": "20" }, { - "name": "diners-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "diners-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" }, { "name": "diners-24-colored", @@ -956,6 +956,12 @@ "height": "24", "width": "38" }, + { + "name": "diners-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, { "name": "direct-debit-18-colored", "size": "18-colored", @@ -963,10 +969,10 @@ "width": "30" }, { - "name": "direct-debit-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" + "name": "direct-debit-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" }, { "name": "direct-debit-32-colored", @@ -974,12 +980,6 @@ "height": "32", "width": "50" }, - { - "name": "direct-debit-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" - }, { "name": "direct-from-brand-16", "size": "16", @@ -1004,12 +1004,6 @@ "height": "24", "width": "24" }, - { - "name": "discover-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, { "name": "discount-24", "size": "24", @@ -1023,10 +1017,10 @@ "width": "20" }, { - "name": "dollar-24", - "size": "24", - "height": "24", - "width": "24" + "name": "discover-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" }, { "name": "discover-24-colored", @@ -1041,19 +1035,19 @@ "width": "50" }, { - "name": "download-16", + "name": "dollar-16", "size": "16", "height": "16", "width": "16" }, { - "name": "dollar-16", - "size": "16", - "height": "16", - "width": "16" + "name": "dollar-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "drag-drop-16", + "name": "download-16", "size": "16", "height": "16", "width": "16" @@ -1077,22 +1071,34 @@ "width": "24" }, { - "name": "ebay-balance-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" - }, - { + "name": "drag-drop-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "ebay-balance-18-colored", "size": "18-colored", "height": "18", "width": "30" }, { - "name": "ebay-for-charity-16", - "size": "16", - "height": "16", - "width": "16" + "name": "ebay-balance-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "ebay-balance-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { + "name": "ebay-balance-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" }, { "name": "ebay-bucks-logo-16-colored", @@ -1101,10 +1107,10 @@ "width": "48" }, { - "name": "ebay-balance-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "ebay-for-charity-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "ebay-for-charity-24", @@ -1113,10 +1119,10 @@ "width": "24" }, { - "name": "ebay-balance-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" + "name": "ebay-international-shipping-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "ebay-international-shipping-24", @@ -1125,10 +1131,10 @@ "width": "24" }, { - "name": "ebay-international-shipping-16", - "size": "16", - "height": "16", - "width": "16" + "name": "ebay-international-shipping-64", + "size": "64", + "height": "64", + "width": "64" }, { "name": "ebay-live-16", @@ -1143,10 +1149,16 @@ "width": "24" }, { - "name": "ebay-international-shipping-64", - "size": "64", - "height": "64", - "width": "64" + "name": "ebay-mastercard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "ebay-mastercard-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" }, { "name": "ebay-mastercard-12-colored", @@ -1154,12 +1166,6 @@ "height": "12", "width": "20" }, - { - "name": "ebay-mastercard-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, { "name": "ebay-mastercard-32-colored", "size": "32-colored", @@ -1167,16 +1173,10 @@ "width": "50" }, { - "name": "ebay-plus-16", - "size": "16", + "name": "ebay-money-back-guarantee-logo-16-colored", + "size": "16-colored", "height": "16", - "width": "16" - }, - { - "name": "ebay-mastercard-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" + "width": "147" }, { "name": "ebay-plus-logo-16-colored", @@ -1185,10 +1185,10 @@ "width": "58" }, { - "name": "ebay-plus-24", - "size": "24", - "height": "24", - "width": "24" + "name": "ebay-plus-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "ebay-preloved-16", @@ -1197,10 +1197,10 @@ "width": "16" }, { - "name": "ebay-money-back-guarantee-logo-16-colored", - "size": "16-colored", - "height": "16", - "width": "147" + "name": "ebay-plus-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "ebay-preloved-24", @@ -1208,12 +1208,6 @@ "height": "24", "width": "24" }, - { - "name": "ebay-refurbished-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "ebay-refurbished-24", "size": "24", @@ -1221,16 +1215,16 @@ "width": "24" }, { - "name": "escrow-16", + "name": "ebay-refurbished-16", "size": "16", "height": "16", "width": "16" }, { - "name": "escrow-card-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" + "name": "escrow-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "escrow-24", @@ -1238,6 +1232,18 @@ "height": "24", "width": "24" }, + { + "name": "escrow-card-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "escrow-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, { "name": "escrow-card-24-colored", "size": "24-colored", @@ -1245,12 +1251,19 @@ "width": "38" }, { "name": "euro-16", "size": "16", "height": "16", "width": "16" }, + { "name": "euro-24", "size": "24", "height": "24", "width": "24" }, { "name": "escrow-card-32-colored", "size": "32-colored", "height": "32", "width": "50" }, + { + "name": "exclude-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "european-conformity-48", "size": "48", @@ -1263,13 +1276,6 @@ "height": "16", "width": "16" }, - { - "name": "escrow-card-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, - { "name": "euro-24", "size": "24", "height": "24", "width": "24" }, { "name": "expand-16", "size": "16", @@ -1277,16 +1283,10 @@ "width": "16" }, { - "name": "exclude-24", - "size": "24", - "height": "24", - "width": "24" - }, - { - "name": "explore-24", - "size": "24", - "height": "24", - "width": "24" + "name": "explore-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "external-link-16", @@ -1295,7 +1295,7 @@ "width": "16" }, { - "name": "face-happiest-24", + "name": "explore-24", "size": "24", "height": "24", "width": "24" @@ -1307,19 +1307,25 @@ "width": "20" }, { - "name": "face-happy-16", - "size": "16", - "height": "16", - "width": "16" + "name": "external-link-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "explore-16", + "name": "face-happiest-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "face-happy-16", "size": "16", "height": "16", "width": "16" }, { - "name": "external-link-24", + "name": "face-happy-24", "size": "24", "height": "24", "width": "24" @@ -1331,7 +1337,7 @@ "width": "24" }, { - "name": "face-happy-24", + "name": "face-sad-24", "size": "24", "height": "24", "width": "24" @@ -1343,13 +1349,13 @@ "width": "24" }, { - "name": "facebook-messenger-24", + "name": "facebook-24", "size": "24", "height": "24", "width": "24" }, { - "name": "face-sad-24", + "name": "facebook-messenger-24", "size": "24", "height": "24", "width": "24" @@ -1360,18 +1366,6 @@ "height": "16", "width": "16" }, - { - "name": "fall-leaf-24", - "size": "24", - "height": "24", - "width": "24" - }, - { - "name": "facebook-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "fast-and-free-16", "size": "16", @@ -1379,16 +1373,16 @@ "width": "16" }, { - "name": "fast-and-free-24", + "name": "fall-leaf-24", "size": "24", "height": "24", "width": "24" }, { - "name": "feedback-16", - "size": "16", - "height": "16", - "width": "16" + "name": "fast-and-free-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "fast-and-free-64", @@ -1402,6 +1396,12 @@ "height": "20", "width": "20" }, + { + "name": "feedback-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "feedback-received-16", "size": "16", @@ -1409,19 +1409,19 @@ "width": "16" }, { - "name": "feedback-24", - "size": "24", - "height": "24", - "width": "24" + "name": "feedback-16", + "size": "16", + "height": "16", + "width": "16" }, + { "name": "file-24", "size": "24", "height": "24", "width": "24" }, + { "name": "file-16", "size": "16", "height": "16", "width": "16" }, { - "name": "feedback-received-24", + "name": "filter-24", "size": "24", "height": "24", "width": "24" }, - { "name": "file-16", "size": "16", "height": "16", "width": "16" }, - { "name": "file-24", "size": "24", "height": "24", "width": "24" }, { "name": "filter-16", "size": "16", @@ -1434,75 +1434,69 @@ "height": "24", "width": "24" }, - { "name": "flag-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "feedback-received-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "fingerprint-64", "size": "64", "height": "64", "width": "65" }, + { "name": "flag-16", "size": "16", "height": "16", "width": "16" }, { - "name": "filter-24", + "name": "flash-auto-24", "size": "24", "height": "24", "width": "24" }, - { "name": "flag-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "flag-filled-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "flag-filled-24", "size": "24", "height": "24", "width": "24" }, - { "name": "flash-24", "size": "24", "height": "24", "width": "24" }, { - "name": "flash-auto-24", - "size": "24", - "height": "24", - "width": "24" + "name": "flag-filled-16", + "size": "16", + "height": "16", + "width": "16" }, + { "name": "flag-24", "size": "24", "height": "24", "width": "24" }, { "name": "flash-off-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "folder-24", - "size": "24", - "height": "24", - "width": "24" - }, + { "name": "flash-24", "size": "24", "height": "24", "width": "24" }, { "name": "folder-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "folder-add-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "folder-add-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "folder-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "franc-16", "size": "16", "height": "16", "width": "16" }, { - "name": "full-view-16", - "size": "16", - "height": "16", - "width": "16" + "name": "folder-add-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "free-warranty-16", @@ -1510,39 +1504,33 @@ "height": "16", "width": "16" }, - { "name": "franc-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "full-view-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "free-warranty-24", "size": "24", "height": "24", "width": "24" }, + { "name": "franc-24", "size": "24", "height": "24", "width": "24" }, { - "name": "gallery-16", + "name": "full-view-16", "size": "16", "height": "16", "width": "16" }, { - "name": "gallery-24", + "name": "full-view-24", "size": "24", "height": "24", "width": "24" }, { - "name": "full-view-filled-24", - "size": "24", - "height": "24", - "width": "24" + "name": "full-view-filled-16", + "size": "16", + "height": "16", + "width": "16" }, { - "name": "full-view-filled-16", + "name": "gallery-16", "size": "16", "height": "16", "width": "16" @@ -1553,6 +1541,18 @@ "height": "18", "width": "30" }, + { + "name": "full-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "gallery-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "general-card-12-colored", "size": "12-colored", @@ -1577,26 +1577,33 @@ "height": "12", "width": "20" }, - { - "name": "generic-card-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" - }, { "name": "generic-card-18-colored", "size": "18-colored", "height": "18", "width": "30" }, - { "name": "gift-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "generic-card-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, + { "name": "gift-24", "size": "24", "height": "24", "width": "24" }, { "name": "generic-card-32-colored", "size": "32-colored", "height": "32", "width": "50" }, - { "name": "gift-24", "size": "24", "height": "24", "width": "24" }, + { "name": "gift-16", "size": "16", "height": "16", "width": "16" }, + { "name": "gift-64", "size": "64", "height": "64", "width": "64" }, + { + "name": "gift-card-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, { "name": "gift-card-18-colored", "size": "18-colored", @@ -1609,13 +1616,6 @@ "height": "24", "width": "38" }, - { - "name": "gift-card-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" - }, - { "name": "gift-64", "size": "64", "height": "64", "width": "64" }, { "name": "gift-card-32-colored", "size": "32-colored", @@ -1628,6 +1628,12 @@ "height": "12", "width": "20" }, + { + "name": "girocard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, { "name": "girocard-24-colored", "size": "24-colored", @@ -1641,13 +1647,13 @@ "width": "50" }, { - "name": "girocard-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" + "name": "glasses-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "glasses-24", + "name": "google-24", "size": "24", "height": "24", "width": "24" @@ -1659,10 +1665,16 @@ "width": "64" }, { - "name": "google-24", - "size": "24", + "name": "google-pay-24-colored", + "size": "24-colored", "height": "24", - "width": "24" + "width": "38" + }, + { + "name": "google-pay-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" }, { "name": "google-pay-18-colored", @@ -1670,45 +1682,33 @@ "height": "18", "width": "30" }, + { "name": "graph-64", "size": "64", "height": "64", "width": "64" }, + { "name": "graph-16", "size": "16", "height": "16", "width": "16" }, { - "name": "google-pay-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" + "name": "graph-dynamic-16", + "size": "16", + "height": "16", + "width": "16" }, + { "name": "graph-24", "size": "24", "height": "24", "width": "24" }, { "name": "google-pay-32-colored", "size": "32-colored", "height": "32", "width": "50" }, - { - "name": "google-pay-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" - }, - { "name": "graph-16", "size": "16", "height": "16", "width": "16" }, - { "name": "graph-24", "size": "24", "height": "24", "width": "24" }, { "name": "grid-view-16", "size": "16", "height": "16", "width": "16" }, - { "name": "graph-64", "size": "64", "height": "64", "width": "64" }, { "name": "graph-dynamic-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "grid-view-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "grid-view-filled-24", "size": "24", @@ -1716,22 +1716,16 @@ "width": "24" }, { - "name": "graph-dynamic-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "handbag-16", + "name": "grid-view-filled-16", "size": "16", "height": "16", "width": "16" }, { - "name": "grid-view-filled-16", - "size": "16", - "height": "16", - "width": "16" + "name": "grid-view-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "handbag-24", @@ -1740,13 +1734,13 @@ "width": "24" }, { - "name": "hanger-16", + "name": "handbag-16", "size": "16", "height": "16", "width": "16" }, { - "name": "headlight-16", + "name": "hanger-16", "size": "16", "height": "16", "width": "16" @@ -1757,6 +1751,12 @@ "height": "24", "width": "24" }, + { + "name": "headlight-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "headphone-16", "size": "16", @@ -1764,20 +1764,20 @@ "width": "16" }, { - "name": "headlight-24", + "name": "headphone-24", "size": "24", "height": "24", "width": "24" }, { - "name": "headphone-24", + "name": "headlight-24", "size": "24", "height": "24", "width": "24" }, - { "name": "help-24", "size": "24", "height": "24", "width": "24" }, { "name": "help-16", "size": "16", "height": "16", "width": "16" }, { "name": "help-20", "size": "20", "height": "20", "width": "20" }, + { "name": "help-24", "size": "24", "height": "24", "width": "24" }, { "name": "help-outline-20", "size": "20", @@ -1797,26 +1797,26 @@ "height": "24", "width": "24" }, - { "name": "hide-24", "size": "24", "height": "24", "width": "24" }, { "name": "history-16", "size": "16", "height": "16", "width": "16" }, + { "name": "hide-24", "size": "24", "height": "24", "width": "24" }, { "name": "history-24", "size": "24", "height": "24", "width": "24" }, - { "name": "home-24", "size": "24", "height": "24", "width": "24" }, { "name": "history-64", "size": "64", "height": "64", "width": "64" }, + { "name": "home-24", "size": "24", "height": "24", "width": "24" }, { "name": "home-filled-24", "size": "24", @@ -1840,18 +1840,6 @@ "height": "24", "width": "24" }, - { - "name": "information-filled-24", - "size": "24", - "height": "24", - "width": "24" - }, - { - "name": "inspect-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "information-filled-16", "size": "16", @@ -1864,6 +1852,18 @@ "height": "16", "width": "16" }, + { + "name": "inspect-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "information-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "inspect-64", "size": "64", @@ -1871,10 +1871,10 @@ "width": "64" }, { - "name": "instagram-24", - "size": "24", - "height": "24", - "width": "24" + "name": "item-list-20", + "size": "20", + "height": "20", + "width": "20" }, { "name": "item-list-24", @@ -1883,10 +1883,10 @@ "width": "24" }, { - "name": "jcb-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" + "name": "instagram-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "item-list-16", @@ -1894,18 +1894,6 @@ "height": "16", "width": "16" }, - { - "name": "item-list-20", - "size": "20", - "height": "20", - "width": "20" - }, - { - "name": "jcb-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, { "name": "jcb-24-colored", "size": "24-colored", @@ -1913,10 +1901,10 @@ "width": "38" }, { - "name": "jcb-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "jcb-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" }, { "name": "jet-ski-16", @@ -1924,20 +1912,32 @@ "height": "16", "width": "16" }, + { + "name": "jcb-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { "name": "key-24", "size": "24", "height": "24", "width": "24" }, { "name": "jet-ski-24", "size": "24", "height": "24", "width": "24" }, - { "name": "key-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "jcb-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, { "name": "keyboard-16", "size": "16", "height": "16", "width": "16" }, - { "name": "key-24", "size": "24", "height": "24", "width": "24" }, + { "name": "key-16", "size": "16", "height": "16", "width": "16" }, { "name": "keyboard-24", "size": "24", @@ -1945,22 +1945,28 @@ "width": "24" }, { - "name": "klarna-black-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" - }, - { + "name": "klarna-black-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { "name": "klarna-black-24-colored", "size": "24-colored", "height": "24", "width": "38" }, { - "name": "klarna-black-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" + "name": "klarna-black-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" + }, + { + "name": "klarna-black-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" }, { "name": "klarna-pink-12-colored", @@ -1974,24 +1980,12 @@ "height": "18", "width": "30" }, - { - "name": "klarna-black-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" - }, { "name": "klarna-pink-24-colored", "size": "24-colored", "height": "24", "width": "38" }, - { - "name": "klarna-pink-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" - }, { "name": "klarna-white-12-colored", "size": "12-colored", @@ -2004,6 +1998,12 @@ "height": "18", "width": "30" }, + { + "name": "klarna-pink-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, { "name": "klarna-white-24-colored", "size": "24-colored", @@ -2016,8 +2016,8 @@ "height": "32", "width": "50" }, - { "name": "krona-16", "size": "16", "height": "16", "width": "16" }, { "name": "krona-24", "size": "24", "height": "24", "width": "24" }, + { "name": "lamp-16", "size": "16", "height": "16", "width": "16" }, { "name": "lamp-24", "size": "24", "height": "24", "width": "24" }, { "name": "large-box-16", @@ -2025,57 +2025,51 @@ "height": "16", "width": "16" }, - { "name": "lamp-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "large-box-24", - "size": "24", - "height": "24", - "width": "24" - }, { - "name": "legacy-click-to-call-48-colored", + "name": "legacy-authenticity-guarantee-48-colored", "size": "48-colored", "height": "48", "width": "48" }, { - "name": "legacy-free-warranty-48-colored", + "name": "legacy-click-to-call-48-colored", "size": "48-colored", "height": "48", "width": "48" }, + { "name": "krona-16", "size": "16", "height": "16", "width": "16" }, { - "name": "legacy-escrow-48-colored", + "name": "legacy-free-warranty-48-colored", "size": "48-colored", "height": "48", "width": "48" }, { - "name": "legacy-authenticity-guarantee-48-colored", + "name": "legacy-money-back-guarantee-chf-48-colored", "size": "48-colored", "height": "48", "width": "48" }, { - "name": "legacy-money-back-guarantee-uk-48-colored", - "size": "48-colored", - "height": "48", - "width": "48" + "name": "large-box-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "legacy-money-back-guarantee-eu-48-colored", + "name": "legacy-money-back-guarantee-us-48-colored", "size": "48-colored", "height": "48", "width": "48" }, { - "name": "legacy-money-back-guarantee-chf-48-colored", + "name": "legacy-top-rated-seller-48-colored", "size": "48-colored", "height": "48", "width": "48" }, { - "name": "legacy-money-back-guarantee-us-48-colored", + "name": "legacy-escrow-48-colored", "size": "48-colored", "height": "48", "width": "48" @@ -2087,7 +2081,13 @@ "width": "16" }, { - "name": "legacy-top-rated-seller-48-colored", + "name": "legacy-money-back-guarantee-uk-48-colored", + "size": "48-colored", + "height": "48", + "width": "48" + }, + { + "name": "legacy-money-back-guarantee-eu-48-colored", "size": "48-colored", "height": "48", "width": "48" @@ -2099,13 +2099,20 @@ "width": "48" }, { - "name": "lightbulb-24", - "size": "24", - "height": "24", - "width": "24" + "name": "lightning-bolt-16", + "size": "16", + "height": "16", + "width": "16" }, + { "name": "link-24", "size": "24", "height": "24", "width": "24" }, { - "name": "linkedin-24", + "name": "list-view-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "lightbulb-24", "size": "24", "height": "24", "width": "24" @@ -2116,39 +2123,38 @@ "height": "24", "width": "24" }, - { "name": "link-24", "size": "24", "height": "24", "width": "24" }, { - "name": "list-view-16", + "name": "list-view-filled-16", "size": "16", "height": "16", "width": "16" }, { - "name": "list-view-filled-24", + "name": "list-view-24", "size": "24", "height": "24", "width": "24" }, { - "name": "lightning-bolt-16", - "size": "16", - "height": "16", - "width": "16" + "name": "list-view-filled-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "list-view-24", + "name": "live-eye-24", "size": "24", "height": "24", "width": "24" }, { - "name": "list-view-filled-16", + "name": "location-16", "size": "16", "height": "16", "width": "16" }, { - "name": "live-eye-24", + "name": "location-24", "size": "24", "height": "24", "width": "24" @@ -2160,11 +2166,17 @@ "width": "16" }, { - "name": "location-24", + "name": "linkedin-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "location-64", + "size": "64", + "height": "64", + "width": "64" + }, { "name": "locked-16", "size": "16", @@ -2177,30 +2189,18 @@ "height": "20", "width": "20" }, - { - "name": "location-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "location-64", - "size": "64", - "height": "64", - "width": "64" - }, - { - "name": "locked-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "maestro-12-colored", "size": "12-colored", "height": "12", "width": "20" }, + { + "name": "maestro-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" + }, { "name": "maestro-18-colored", "size": "18-colored", @@ -2208,27 +2208,27 @@ "width": "30" }, { - "name": "maestro-24-colored", - "size": "24-colored", + "name": "maestro-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "locked-24", + "size": "24", "height": "24", - "width": "38" + "width": "24" }, - { "name": "mail-20", "size": "20", "height": "20", "width": "20" }, { "name": "mail-16", "size": "16", "height": "16", "width": "16" }, - { "name": "mail-24", "size": "24", "height": "24", "width": "24" }, + { "name": "mail-20", "size": "20", "height": "20", "width": "20" }, { "name": "mail-move-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "mail-open-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "mail-64", "size": "64", "height": "64", "width": "64" }, + { "name": "mail-24", "size": "24", "height": "24", "width": "24" }, { "name": "mail-move-24", "size": "24", @@ -2236,50 +2236,38 @@ "width": "24" }, { - "name": "maestro-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "mail-open-16", + "size": "16", + "height": "16", + "width": "16" }, { - "name": "mail-unread-24", + "name": "mail-open-24", "size": "24", "height": "24", "width": "24" }, + { "name": "map-16", "size": "16", "height": "16", "width": "16" }, { "name": "mail-unread-16", "size": "16", "height": "16", "width": "16" }, - { "name": "map-20", "size": "20", "height": "20", "width": "20" }, - { "name": "map-16", "size": "16", "height": "16", "width": "16" }, { - "name": "mail-open-24", + "name": "mail-unread-24", "size": "24", "height": "24", "width": "24" }, { "name": "map-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "masonry-view-24", - "size": "24", - "height": "24", - "width": "24" - }, - { - "name": "mastercard-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, { "name": "masonry-view-16", "size": "16", "height": "16", "width": "16" }, + { "name": "map-20", "size": "20", "height": "20", "width": "20" }, { "name": "mastercard-12-colored", "size": "12-colored", @@ -2292,6 +2280,18 @@ "height": "16", "width": "16" }, + { + "name": "mastercard-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "masonry-view-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "mastercard-24-colored", "size": "24-colored", @@ -2305,23 +2305,16 @@ "width": "50" }, { - "name": "medium-box-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "masonry-view-filled-24", + "name": "masonry-view-24", "size": "24", "height": "24", "width": "24" }, - { "name": "menu-20", "size": "20", "height": "20", "width": "20" }, { - "name": "medium-box-24", - "size": "24", - "height": "24", - "width": "24" + "name": "megaphone-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "megaphone-24", @@ -2329,19 +2322,20 @@ "height": "24", "width": "24" }, - { "name": "menu-24", "size": "24", "height": "24", "width": "24" }, { - "name": "megaphone-16", + "name": "medium-box-16", "size": "16", "height": "16", "width": "16" }, + { "name": "menu-20", "size": "20", "height": "20", "width": "20" }, { - "name": "microphone-16", - "size": "16", - "height": "16", - "width": "16" + "name": "medium-box-24", + "size": "24", + "height": "24", + "width": "24" }, + { "name": "menu-24", "size": "24", "height": "24", "width": "24" }, { "name": "mobile-24", "size": "24", @@ -2355,10 +2349,10 @@ "width": "24" }, { - "name": "money-back-guarantee-24", - "size": "24", - "height": "24", - "width": "24" + "name": "microphone-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "microphone-24", @@ -2373,14 +2367,8 @@ "width": "16" }, { - "name": "money-stack-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "money-back-guarantee-filled-24-colored", - "size": "24-colored", + "name": "money-back-guarantee-24", + "size": "24", "height": "24", "width": "24" }, @@ -2391,10 +2379,16 @@ "width": "16" }, { - "name": "monthly-invoice-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "money-stack-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "money-stack-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "monthly-invoice-12-colored", @@ -2402,27 +2396,38 @@ "height": "12", "width": "20" }, - { - "name": "money-stack-24", - "size": "24", - "height": "24", - "width": "24" - }, - { "name": "moon-16", "size": "16", "height": "16", "width": "16" }, { "name": "monthly-invoice-18-colored", "size": "18-colored", "height": "18", "width": "30" }, - { "name": "moon-24", "size": "24", "height": "24", "width": "24" }, - { "name": "moon-20", "size": "20", "height": "20", "width": "20" }, + { + "name": "money-back-guarantee-filled-24-colored", + "size": "24-colored", + "height": "24", + "width": "24" + }, + { + "name": "monthly-invoice-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, { "name": "monthly-invoice-24-colored", "size": "24-colored", "height": "24", "width": "38" }, + { "name": "moon-16", "size": "16", "height": "16", "width": "16" }, + { "name": "moon-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "motorcycle-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "mountain-16", "size": "16", @@ -2435,50 +2440,45 @@ "height": "24", "width": "24" }, - { - "name": "nectar-logo-24-colored", - "size": "24-colored", - "height": "24", - "width": "29" - }, - { - "name": "motorcycle-16", - "size": "16", - "height": "16", - "width": "16" - }, + { "name": "moon-20", "size": "20", "height": "20", "width": "20" }, { "name": "mountain-24", "size": "24", "height": "24", "width": "24" }, - { "name": "move-24", "size": "24", "height": "24", "width": "24" }, { "name": "move-16", "size": "16", "height": "16", "width": "16" }, + { "name": "move-24", "size": "24", "height": "24", "width": "24" }, { - "name": "negative-filled-16", - "size": "16", - "height": "16", - "width": "16" + "name": "nectar-logo-24-colored", + "size": "24-colored", + "height": "24", + "width": "29" }, { - "name": "neutral-16", + "name": "negative-filled-16", "size": "16", "height": "16", "width": "16" }, { - "name": "neutral-24", + "name": "negative-filled-24", "size": "24", "height": "24", "width": "24" }, { - "name": "negative-filled-24", + "name": "neutral-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "neutral-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "no-children-zero-three-48", "size": "48", @@ -2491,24 +2491,12 @@ "height": "16", "width": "16" }, - { - "name": "notification-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "notification-20", "size": "20", "height": "20", "width": "20" }, - { - "name": "notification-filled-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "notification-64", "size": "64", @@ -2522,10 +2510,10 @@ "width": "24" }, { - "name": "on-the-way-16", - "size": "16", - "height": "16", - "width": "16" + "name": "notification-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "out-of-reach-48", @@ -2534,10 +2522,16 @@ "width": "48" }, { - "name": "overflow-horizontal-20", - "size": "20", - "height": "20", - "width": "20" + "name": "notification-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "on-the-way-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "overflow-horizontal-16", @@ -2546,10 +2540,10 @@ "width": "16" }, { - "name": "overflow-vertical-24", - "size": "24", - "height": "24", - "width": "24" + "name": "overflow-horizontal-20", + "size": "20", + "height": "20", + "width": "20" }, { "name": "overflow-horizontal-24", @@ -2564,26 +2558,23 @@ "width": "20" }, { - "name": "overflow-vertical-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "package-24", + "name": "overflow-vertical-24", "size": "24", "height": "24", "width": "24" }, - { "name": "panel-20", "size": "20", "height": "20", "width": "20" }, { "name": "package-16", "size": "16", "height": "16", "width": "16" }, - { "name": "panel-24", "size": "24", "height": "24", "width": "24" }, - { "name": "panel-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "overflow-vertical-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "package-64", "size": "64", @@ -2591,25 +2582,40 @@ "width": "64" }, { - "name": "panel-close-24", + "name": "package-24", "size": "24", "height": "24", "width": "24" }, + { "name": "panel-24", "size": "24", "height": "24", "width": "24" }, + { "name": "panel-20", "size": "20", "height": "20", "width": "20" }, + { "name": "panel-16", "size": "16", "height": "16", "width": "16" }, { - "name": "panel-close-vertical-20", + "name": "panel-close-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "panel-close-20", "size": "20", "height": "20", "width": "20" }, { - "name": "panel-close-vertical-16", - "size": "16", - "height": "16", - "width": "16" + "name": "panel-close-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "panel-close-16", + "name": "panel-close-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "panel-close-vertical-16", "size": "16", "height": "16", "width": "16" @@ -2621,13 +2627,13 @@ "width": "16" }, { - "name": "panel-close-vertical-24", - "size": "24", - "height": "24", - "width": "24" + "name": "panel-close-vertical-20", + "size": "20", + "height": "20", + "width": "20" }, { - "name": "panel-close-20", + "name": "panel-open-20", "size": "20", "height": "20", "width": "20" @@ -2638,18 +2644,18 @@ "height": "24", "width": "24" }, - { - "name": "panel-open-20", - "size": "20", - "height": "20", - "width": "20" - }, { "name": "panel-open-vertical-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "panel-open-vertical-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "panel-open-vertical-20", "size": "20", @@ -2657,10 +2663,10 @@ "width": "20" }, { - "name": "passkey-16", - "size": "16", - "height": "16", - "width": "16" + "name": "passkey-64", + "size": "64", + "height": "64", + "width": "64" }, { "name": "passkey-24", @@ -2668,24 +2674,19 @@ "height": "24", "width": "24" }, - { - "name": "panel-open-vertical-24", - "size": "24", - "height": "24", - "width": "24" - }, - { "name": "pause-16", "size": "16", "height": "16", "width": "16" }, + { "name": "pause-24", "size": "24", "height": "24", "width": "24" }, { "name": "pause-filled-64-colored", "size": "64-colored", "height": "64", "width": "64" }, + { "name": "pause-16", "size": "16", "height": "16", "width": "16" }, { - "name": "payoneer-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" + "name": "passkey-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "payoneer-12-colored", @@ -2693,12 +2694,17 @@ "height": "12", "width": "20" }, - { "name": "pause-24", "size": "24", "height": "24", "width": "24" }, { - "name": "passkey-64", - "size": "64", - "height": "64", - "width": "64" + "name": "payoneer-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, + { + "name": "payoneer-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" }, { "name": "paypal-12-colored", @@ -2712,6 +2718,12 @@ "height": "24", "width": "38" }, + { + "name": "paypal-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, { "name": "paypal-24-colored", "size": "24-colored", @@ -2719,16 +2731,16 @@ "width": "38" }, { - "name": "payoneer-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "paypal-credit-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" }, { - "name": "paypal-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "paypal-credit-24-colored", + "size": "24-colored", + "height": "24", + "width": "38" }, { "name": "paypal-credit-12-colored", @@ -2737,16 +2749,10 @@ "width": "20" }, { - "name": "paypal-credit-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, - { - "name": "paypal-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" + "name": "paypal-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" }, { "name": "paypal-credit-32-colored", @@ -2754,18 +2760,18 @@ "height": "32", "width": "50" }, - { - "name": "paypal-credit-24-colored", - "size": "24-colored", - "height": "24", - "width": "38" - }, { "name": "paypal-disabled-12-colored", "size": "12-colored", "height": "12", "width": "20" }, + { + "name": "paypal-disabled-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, { "name": "paypal-disabled-32-colored", "size": "32-colored", @@ -2773,10 +2779,10 @@ "width": "50" }, { - "name": "paypal-disabled-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" + "name": "pencil-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "paypal-disabled-24-colored", @@ -2784,13 +2790,6 @@ "height": "24", "width": "37" }, - { - "name": "pencil-20", - "size": "20", - "height": "20", - "width": "20" - }, - { "name": "peso-24", "size": "24", "height": "24", "width": "24" }, { "name": "peso-16", "size": "16", "height": "16", "width": "16" }, { "name": "pencil-24", @@ -2798,29 +2797,29 @@ "height": "24", "width": "24" }, + { "name": "phone-16", "size": "16", "height": "16", "width": "16" }, + { "name": "peso-24", "size": "24", "height": "24", "width": "24" }, + { "name": "phone-24", "size": "24", "height": "24", "width": "24" }, + { "name": "pin-24", "size": "24", "height": "24", "width": "24" }, { - "name": "pencil-16", - "size": "16", - "height": "16", - "width": "16" + "name": "pencil-20", + "size": "20", + "height": "20", + "width": "20" }, - { "name": "phone-16", "size": "16", "height": "16", "width": "16" }, + { "name": "play-16", "size": "16", "height": "16", "width": "16" }, { - "name": "pin-filled-24", + "name": "pinterest-24", "size": "24", "height": "24", "width": "24" }, - { "name": "phone-24", "size": "24", "height": "24", "width": "24" }, { - "name": "pinterest-24", + "name": "pin-filled-24", "size": "24", "height": "24", "width": "24" }, - { "name": "play-16", "size": "16", "height": "16", "width": "16" }, - { "name": "play-24", "size": "24", "height": "24", "width": "24" }, - { "name": "pin-24", "size": "24", "height": "24", "width": "24" }, { "name": "play-filled-16-colored", "size": "16-colored", @@ -2845,12 +2844,6 @@ "height": "12", "width": "20" }, - { - "name": "postepay-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" - }, { "name": "postepay-18-colored", "size": "18-colored", @@ -2864,41 +2857,48 @@ "width": "38" }, { - "name": "potted-plant-16", - "size": "16", - "height": "16", - "width": "16" + "name": "postepay-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" }, - { "name": "pound-24", "size": "24", "height": "24", "width": "24" }, + { "name": "play-24", "size": "24", "height": "24", "width": "24" }, { "name": "potted-plant-24", "size": "24", "height": "24", "width": "24" }, - { "name": "pound-16", "size": "16", "height": "16", "width": "16" }, { "name": "print-16", "size": "16", "height": "16", "width": "16" }, + { "name": "pound-16", "size": "16", "height": "16", "width": "16" }, { - "name": "profile-20", - "size": "20", - "height": "20", - "width": "20" + "name": "potted-plant-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "pound-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "profile-16", + "size": "16", + "height": "16", + "width": "16" }, { "name": "print-24", "size": "24", "height": "24", "width": "24" }, { - "name": "profile-24", + "name": "profile-filled-24", "size": "24", "height": "24", "width": "24" }, { - "name": "profile-filled-24", + "name": "progress-current-24", "size": "24", "height": "24", "width": "24" }, { - "name": "progress-upcoming-24", + "name": "profile-24", "size": "24", "height": "24", "width": "24" @@ -2910,29 +2910,41 @@ "width": "16" }, { - "name": "progress-current-24", + "name": "psa-vault-16-colored", + "size": "16-colored", + "height": "16", + "width": "84" + }, + { + "name": "promotion-24", "size": "24", "height": "24", "width": "24" }, { - "name": "profile-16", + "name": "progress-upcoming-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "qr-code-16", "size": "16", "height": "16", "width": "16" }, { - "name": "promotion-24", + "name": "profile-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "qr-code-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "psa-vault-16-colored", - "size": "16-colored", - "height": "16", - "width": "84" - }, { "name": "psa-vault-16", "size": "16", @@ -2940,13 +2952,13 @@ "width": "84" }, { - "name": "qr-code-16", + "name": "recovery-code-16", "size": "16", "height": "16", "width": "16" }, { - "name": "qr-code-24", + "name": "reddit-24", "size": "24", "height": "24", "width": "24" @@ -2957,36 +2969,18 @@ "height": "24", "width": "24" }, - { - "name": "reddit-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "refresh-16", "size": "16", "height": "16", "width": "16" }, - { - "name": "recovery-code-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "relaxed-grid-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "refresh-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "relaxed-grid-filled-24", "size": "24", @@ -3000,45 +2994,56 @@ "width": "16" }, { - "name": "remove-24", + "name": "refresh-24", "size": "24", "height": "24", "width": "24" }, - { "name": "reply-16", "size": "16", "height": "16", "width": "16" }, { "name": "remove-12", "size": "12", "height": "12", "width": "12" }, + { + "name": "remove-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "reply-16", "size": "16", "height": "16", "width": "16" }, + { "name": "reply-24", "size": "24", "height": "24", "width": "24" }, { "name": "return-16", "size": "16", "height": "16", "width": "16" }, - { "name": "reply-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "ribbon-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "ribbon-24", "size": "24", "height": "24", "width": "24" }, + { "name": "rim-16", "size": "16", "height": "16", "width": "16" }, { - "name": "ribbon-16", - "size": "16", - "height": "16", - "width": "16" + "name": "return-24", + "size": "24", + "height": "24", + "width": "24" }, { - "name": "return-24", + "name": "ringgit-24", "size": "24", "height": "24", "width": "24" }, - { "name": "rim-16", "size": "16", "height": "16", "width": "16" }, - { "name": "rim-24", "size": "24", "height": "24", "width": "24" }, { "name": "ringgit-16", "size": "16", @@ -3057,66 +3062,52 @@ "height": "24", "width": "24" }, + { "name": "rim-24", "size": "24", "height": "24", "width": "24" }, { "name": "rotate-landscape-right-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "ringgit-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "rotate-portrait-left-24", "size": "24", "height": "24", "width": "24" }, - { "name": "rupee-16", "size": "16", "height": "16", "width": "16" }, { "name": "rotate-portrait-right-24", "size": "24", "height": "24", "width": "24" }, + { "name": "rupee-16", "size": "16", "height": "16", "width": "16" }, + { "name": "rupee-24", "size": "24", "height": "24", "width": "24" }, { "name": "satchel-16", "size": "16", "height": "16", "width": "16" }, - { "name": "rupee-24", "size": "24", "height": "24", "width": "24" }, - { "name": "save-16", "size": "16", "height": "16", "width": "16" }, { "name": "satchel-24", "size": "24", "height": "24", "width": "24" }, - { "name": "save-20", "size": "20", "height": "20", "width": "20" }, { "name": "save-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "save-filled-20", - "size": "20", - "height": "20", - "width": "20" - }, + { "name": "save-20", "size": "20", "height": "20", "width": "20" }, { "name": "save-filled-16", "size": "16", "height": "16", "width": "16" }, - { "name": "scan-16", "size": "16", "height": "16", "width": "16" }, - { "name": "scan-24", "size": "24", "height": "24", "width": "24" }, { - "name": "search-16", - "size": "16", - "height": "16", - "width": "16" + "name": "save-filled-20", + "size": "20", + "height": "20", + "width": "20" }, { "name": "save-filled-24", @@ -3124,18 +3115,15 @@ "height": "24", "width": "24" }, + { "name": "save-16", "size": "16", "height": "16", "width": "16" }, + { "name": "scan-16", "size": "16", "height": "16", "width": "16" }, + { "name": "scan-24", "size": "24", "height": "24", "width": "24" }, { "name": "search-20", "size": "20", "height": "20", "width": "20" }, - { - "name": "search-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "search-64", "size": "64", @@ -3143,7 +3131,7 @@ "width": "64" }, { - "name": "search-similar-16", + "name": "search-16", "size": "16", "height": "16", "width": "16" @@ -3155,13 +3143,19 @@ "width": "24" }, { - "name": "search-similar-24", + "name": "search-24", "size": "24", "height": "24", "width": "24" }, { - "name": "seasons-16", + "name": "search-similar-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "search-similar-16", "size": "16", "height": "16", "width": "16" @@ -3173,23 +3167,29 @@ "width": "24" }, { - "name": "search-similar-20", - "size": "20", - "height": "20", - "width": "20" - }, - { - "name": "security-key-24", + "name": "search-similar-24", "size": "24", "height": "24", "width": "24" }, { - "name": "select-all-24", + "name": "security-key-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "seasons-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "selling-20", + "size": "20", + "height": "20", + "width": "20" + }, { "name": "selling-16", "size": "16", @@ -3197,17 +3197,17 @@ "width": "16" }, { - "name": "selling-24", + "name": "select-all-24", "size": "24", "height": "24", "width": "24" }, { "name": "send-24", "size": "24", "height": "24", "width": "24" }, { - "name": "selling-20", - "size": "20", - "height": "20", - "width": "20" + "name": "selling-filled-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "settings-20", @@ -3216,11 +3216,23 @@ "width": "20" }, { - "name": "selling-filled-24", + "name": "settings-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "selling-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "share-android-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "settings-24", "size": "24", @@ -3234,7 +3246,7 @@ "width": "20" }, { - "name": "settings-16", + "name": "share-ios-16", "size": "16", "height": "16", "width": "16" @@ -3245,12 +3257,6 @@ "height": "24", "width": "24" }, - { - "name": "share-ios-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "share-ios-20", "size": "20", @@ -3258,23 +3264,23 @@ "width": "20" }, { - "name": "share-ios-24", + "name": "sharpen-24", "size": "24", "height": "24", "width": "24" }, { - "name": "sharpen-24", + "name": "share-ios-24", "size": "24", "height": "24", "width": "24" }, { "name": "shirt-16", "size": "16", "height": "16", "width": "16" }, { - "name": "share-android-16", - "size": "16", - "height": "16", - "width": "16" + "name": "ship-and-local-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "ship-and-local-16", @@ -3283,7 +3289,7 @@ "width": "16" }, { - "name": "ship-and-local-24", + "name": "shoe-box-24", "size": "24", "height": "24", "width": "24" @@ -3295,7 +3301,6 @@ "height": "16", "width": "16" }, - { "name": "show-16", "size": "16", "height": "16", "width": "16" }, { "name": "shovel-24", "size": "24", @@ -3308,6 +3313,13 @@ "height": "16", "width": "16" }, + { "name": "show-16", "size": "16", "height": "16", "width": "16" }, + { + "name": "small-letter-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "show-24", "size": "24", "height": "24", "width": "24" }, { "name": "sneaker-16", @@ -3316,19 +3328,13 @@ "width": "16" }, { - "name": "sneaker-24", - "size": "24", - "height": "24", - "width": "24" - }, - { - "name": "small-letter-24", + "name": "small-box-24", "size": "24", "height": "24", "width": "24" }, { - "name": "shoe-box-24", + "name": "sneaker-24", "size": "24", "height": "24", "width": "24" @@ -3351,21 +3357,21 @@ "height": "16", "width": "16" }, + { "name": "sort-16", "size": "16", "height": "16", "width": "16" }, + { "name": "sort-12", "size": "12", "height": "12", "width": "12" }, { "name": "snowmobile-24", "size": "24", "height": "24", "width": "24" }, + { "name": "sort-24", "size": "24", "height": "24", "width": "24" }, { - "name": "small-box-24", - "size": "24", - "height": "24", - "width": "24" + "name": "sort-down-12", + "size": "12", + "height": "12", + "width": "12" }, - { "name": "sort-12", "size": "12", "height": "12", "width": "12" }, - { "name": "sort-24", "size": "24", "height": "24", "width": "24" }, - { "name": "sort-16", "size": "16", "height": "16", "width": "16" }, { "name": "sort-up-12", "size": "12", @@ -3391,10 +3397,10 @@ "width": "24" }, { - "name": "sort-down-12", - "size": "12", - "height": "12", - "width": "12" + "name": "sparkline-up-20", + "size": "20", + "height": "20", + "width": "20" }, { "name": "sparkline-up-16", @@ -3403,13 +3409,7 @@ "width": "16" }, { - "name": "sparkline-up-20", - "size": "20", - "height": "20", - "width": "20" - }, - { - "name": "sparkline-up-24", + "name": "speedometer-24", "size": "24", "height": "24", "width": "24" @@ -3421,29 +3421,35 @@ "width": "16" }, { - "name": "sparkline-up-filled-24", + "name": "sparkline-up-24", "size": "24", "height": "24", "width": "24" }, { - "name": "speedometer-24", + "name": "sparkline-up-filled-24", "size": "24", "height": "24", "width": "24" }, { - "name": "split-payment-24", + "name": "split-view-24", "size": "24", "height": "24", "width": "24" }, { - "name": "split-view-24", + "name": "split-payment-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "spring-leaf-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "split-payment-16", "size": "16", @@ -3451,13 +3457,13 @@ "width": "16" }, { - "name": "split-view-filled-24", + "name": "spring-leaf-24", "size": "24", "height": "24", "width": "24" }, { - "name": "spring-leaf-24", + "name": "split-view-filled-24", "size": "24", "height": "24", "width": "24" @@ -3468,50 +3474,44 @@ "height": "16", "width": "16" }, - { - "name": "spring-leaf-16", - "size": "16", - "height": "16", - "width": "16" - }, - { - "name": "star-filled-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "star-empty-24", "size": "24", "height": "24", "width": "24" }, + { "name": "star-empty-40", "height": "40", "width": "40" }, { "name": "star-filled-24", "size": "24", "height": "24", "width": "24" }, - { "name": "star-empty-40", "height": "40", "width": "40" }, + { + "name": "star-filled-16", + "size": "16", + "height": "16", + "width": "16" + }, + { "name": "star-filled-40", "height": "40", "width": "40" }, + { + "name": "star-half-16-colored", + "size": "16-colored", + "height": "16", + "width": "16" + }, { "name": "star-half-24-colored", "size": "24-colored", "height": "24", "width": "24" }, - { "name": "star-filled-40", "height": "40", "width": "40" }, { - "name": "star-half-16-colored", + "name": "star-half-dark-16-colored", "size": "16-colored", "height": "16", "width": "16" }, - { - "name": "stepper-attention-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "star-half-dark-24-colored", "size": "24-colored", @@ -3519,10 +3519,10 @@ "width": "24" }, { - "name": "star-half-dark-16-colored", - "size": "16-colored", - "height": "16", - "width": "16" + "name": "stepper-attention-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "stepper-current-24", @@ -3530,20 +3530,19 @@ "height": "24", "width": "24" }, - { "name": "store-64", "size": "64", "height": "64", "width": "64" }, { "name": "stepper-upcoming-24", "size": "24", "height": "25", "width": "24" }, - { "name": "store-24", "size": "24", "height": "24", "width": "24" }, { "name": "stepper-confirmation-24", "size": "24", "height": "24", "width": "24" }, + { "name": "store-24", "size": "24", "height": "24", "width": "24" }, { "name": "store-16", "size": "16", "height": "16", "width": "16" }, { "name": "store-filled-24", @@ -3551,37 +3550,44 @@ "height": "24", "width": "24" }, + { "name": "store-64", "size": "64", "height": "64", "width": "64" }, { - "name": "switch-camera-24", + "name": "suitcase-24", "size": "24", "height": "24", "width": "24" }, + { "name": "swap-24", "size": "24", "height": "24", "width": "24" }, { - "name": "suitcase-24", + "name": "support-24", "size": "24", "height": "24", "width": "24" }, { - "name": "target-24", + "name": "target-16", + "size": "16", + "height": "16", + "width": "16" + }, + { + "name": "switch-camera-24", "size": "24", "height": "24", "width": "24" }, { - "name": "support-24", + "name": "target-24", "size": "24", "height": "24", "width": "24" }, { - "name": "target-16", + "name": "text-messaging-16", "size": "16", "height": "16", "width": "16" }, - { "name": "swap-24", "size": "24", "height": "24", "width": "24" }, { "name": "text-messaging-20", "size": "20", @@ -3594,24 +3600,12 @@ "height": "24", "width": "24" }, - { - "name": "text-messaging-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "text-messaging-64", "size": "64", "height": "64", "width": "64" }, - { - "name": "the-ebay-vault-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "the-ebay-vault-24", "size": "24", @@ -3624,6 +3618,12 @@ "height": "16", "width": "16" }, + { + "name": "the-ebay-vault-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "thumb-down-20", "size": "20", @@ -3637,7 +3637,19 @@ "width": "24" }, { - "name": "thumb-down-filled-16", + "name": "thumb-down-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { + "name": "thumb-down-filled-20", + "size": "20", + "height": "20", + "width": "20" + }, + { + "name": "thumb-up-16", "size": "16", "height": "16", "width": "16" @@ -3649,31 +3661,39 @@ "width": "20" }, { - "name": "thumb-down-filled-24", + "name": "thumb-up-24", "size": "24", "height": "24", "width": "24" }, { - "name": "thumb-down-filled-20", - "size": "20", - "height": "20", - "width": "20" + "name": "thumb-up-64", + "size": "64", + "height": "64", + "width": "64" }, { - "name": "thumb-up-16", + "name": "thumb-down-filled-16", "size": "16", "height": "16", "width": "16" }, { - "name": "thumb-up-64", - "size": "64", - "height": "64", - "width": "64" + "name": "thumb-up-filled-20", + "size": "20", + "height": "20", + "width": "20" }, { - "name": "thumb-up-24", + "name": "thumb-up-filled-24", + "size": "24", + "height": "24", + "width": "24" + }, + { "name": "tick-16", "size": "16", "height": "16", "width": "16" }, + { "name": "tick-24", "size": "24", "height": "24", "width": "24" }, + { + "name": "toggle-mode-bottom-24", "size": "24", "height": "24", "width": "24" @@ -3684,9 +3704,8 @@ "height": "16", "width": "16" }, - { "name": "tick-16", "size": "16", "height": "16", "width": "16" }, { - "name": "thumb-up-filled-24", + "name": "toggle-mode-top-24", "size": "24", "height": "24", "width": "24" @@ -3697,7 +3716,6 @@ "height": "24", "width": "24" }, - { "name": "tick-24", "size": "24", "height": "24", "width": "24" }, { "name": "top-rated-seller-16", "size": "16", @@ -3705,19 +3723,13 @@ "width": "16" }, { - "name": "thumb-up-filled-20", - "size": "20", - "height": "20", - "width": "20" - }, - { - "name": "toggle-mode-bottom-24", - "size": "24", - "height": "24", - "width": "24" + "name": "top-service-16", + "size": "16", + "height": "16", + "width": "16" }, { - "name": "toggle-mode-top-24", + "name": "top-service-24", "size": "24", "height": "24", "width": "24" @@ -3728,12 +3740,6 @@ "height": "24", "width": "24" }, - { - "name": "top-service-16", - "size": "16", - "height": "16", - "width": "16" - }, { "name": "trading-card-16", "size": "16", @@ -3752,12 +3758,6 @@ "height": "24", "width": "24" }, - { - "name": "trading-card-grade-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "transaction-24", "size": "24", @@ -3765,7 +3765,7 @@ "width": "24" }, { - "name": "top-service-24", + "name": "trading-card-grade-24", "size": "24", "height": "24", "width": "24" @@ -3800,6 +3800,12 @@ "height": "16", "width": "13" }, + { + "name": "trophy-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "trophy-24", "size": "24", @@ -3807,12 +3813,11 @@ "width": "24" }, { - "name": "trophy-16", - "size": "16", - "height": "16", - "width": "16" + "name": "twitter-24", + "size": "24", + "height": "24", + "width": "24" }, - { "name": "undo-16", "size": "16", "height": "16", "width": "16" }, { "name": "undo-24", "size": "24", "height": "24", "width": "24" }, { "name": "unionpay-12-colored", @@ -3820,12 +3825,7 @@ "height": "12", "width": "20" }, - { - "name": "twitter-24", - "size": "24", - "height": "24", - "width": "24" - }, + { "name": "undo-16", "size": "16", "height": "16", "width": "16" }, { "name": "unionpay-18-colored", "size": "18-colored", @@ -3850,6 +3850,12 @@ "height": "16", "width": "16" }, + { + "name": "unselect-all-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "upload-16", "size": "16", @@ -3863,17 +3869,11 @@ "width": "24" }, { - "name": "unselect-all-24", + "name": "upload-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "venmo-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, { "name": "venmo-24-colored", "size": "24-colored", @@ -3886,36 +3886,36 @@ "height": "32", "width": "50" }, + { + "name": "verified-condition-16", + "size": "16", + "height": "16", + "width": "16" + }, { "name": "venmo-12-colored", "size": "12-colored", "height": "12", "width": "20" }, - { - "name": "upload-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "verified-condition-24", "size": "24", "height": "24", "width": "24" }, + { "name": "video-24", "size": "24", "height": "24", "width": "24" }, { - "name": "verified-condition-16", - "size": "16", - "height": "16", - "width": "16" + "name": "visa-12-colored", + "size": "12-colored", + "height": "12", + "width": "20" }, - { "name": "video-24", "size": "24", "height": "24", "width": "24" }, { - "name": "visa-32-colored", - "size": "32-colored", - "height": "32", - "width": "50" + "name": "venmo-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" }, { "name": "visa-18-colored", @@ -3930,10 +3930,16 @@ "width": "38" }, { - "name": "visa-12-colored", - "size": "12-colored", - "height": "12", - "width": "20" + "name": "visa-32-colored", + "size": "32-colored", + "height": "32", + "width": "50" + }, + { + "name": "wallet-24", + "size": "24", + "height": "24", + "width": "24" }, { "name": "wallet-64", @@ -3947,32 +3953,26 @@ "height": "12", "width": "20" }, + { + "name": "wallet-balance-18-colored", + "size": "18-colored", + "height": "18", + "width": "30" + }, { "name": "wallet-balance-32-colored", "size": "32-colored", "height": "32", "width": "50" }, - { - "name": "wallet-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "wallet-balance-24-colored", "size": "24-colored", "height": "24", "width": "38" }, - { - "name": "wallet-balance-18-colored", - "size": "18-colored", - "height": "18", - "width": "30" - }, - { "name": "watch-24", "size": "24", "height": "24", "width": "24" }, { "name": "watch-16", "size": "16", "height": "16", "width": "16" }, + { "name": "watch-24", "size": "24", "height": "24", "width": "24" }, { "name": "whatsapp-24", "size": "24", @@ -3981,33 +3981,27 @@ }, { "name": "won-16", "size": "16", "height": "16", "width": "16" }, { "name": "won-24", "size": "24", "height": "24", "width": "24" }, - { "name": "yuan-16", "size": "16", "height": "16", "width": "16" }, - { "name": "yuan-24", "size": "24", "height": "24", "width": "24" }, - { - "name": "wrench-24", - "size": "24", - "height": "24", - "width": "24" - }, { "name": "wrench-16", "size": "16", "height": "16", "width": "16" }, - { "name": "zloty-16", "size": "16", "height": "16", "width": "16" }, { - "name": "youtube-24", + "name": "wrench-24", "size": "24", "height": "24", "width": "24" }, { - "name": "zoom-in-24", + "name": "youtube-24", "size": "24", "height": "24", "width": "24" }, + { "name": "yuan-16", "size": "16", "height": "16", "width": "16" }, + { "name": "yuan-24", "size": "24", "height": "24", "width": "24" }, + { "name": "zloty-16", "size": "16", "height": "16", "width": "16" }, { "name": "zloty-24", "size": "24", "height": "24", "width": "24" }, { "name": "zoom-in-16", @@ -4015,6 +4009,12 @@ "height": "16", "width": "16" }, + { + "name": "zoom-in-24", + "size": "24", + "height": "24", + "width": "24" + }, { "name": "zoom-out-16", "size": "16", diff --git a/src/routes/_index/+page.marko b/src/routes/_index/+page.marko index 30b3520b6..c77c7177a 100644 --- a/src/routes/_index/+page.marko +++ b/src/routes/_index/+page.marko @@ -1,7 +1,5 @@ import skinGraphic from "../static/skin-graphic.png"; -import {modules} from '../modules.marko'; -import path from 'path'; @@ -13,11 +11,3 @@ import path from 'path'; - - - - - <${module} metadata=module.metadata name=path.basename(key, '.marko') /> - - - diff --git a/src/routes/_index/component/+page.marko b/src/routes/_index/component/+page.marko new file mode 100644 index 000000000..c5238b4b4 --- /dev/null +++ b/src/routes/_index/component/+page.marko @@ -0,0 +1,12 @@ +import {components} from '../../../components/components.marko'; +import path from 'path'; + +

    All CSS Components

    + +
      + +
    • + ${path.basename(folder)} +
      • + +
    diff --git a/src/routes/_index/component/accordion/+meta.json b/src/routes/_index/component/accordion/+meta.json new file mode 100644 index 000000000..aedb151ba --- /dev/null +++ b/src/routes/_index/component/accordion/+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Accordion CSS Component", + "pageDescription": "A responsive and accessible accordion CSS component. Perfect for organizing content in a compact and user-friendly manner for your user interfaces." +} diff --git a/src/routes/_index/component/accordion/+page.marko b/src/routes/_index/component/accordion/+page.marko new file mode 100644 index 000000000..7b9fdf92d --- /dev/null +++ b/src/routes/_index/component/accordion/+page.marko @@ -0,0 +1,610 @@ +
    + + +

    + An accordion is a series of expandable sections of content. Each section has a summary header that is used to toggle the display of its related content. +

    + +

    Default Accordion

    +

    By default, each section is rendered as closed. When opened, the section will stay open until explicitly closed.

    +
    +
    +
      +
    • +
      + + + Shipping and returns + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Text wraps on small screen with this long text + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    +
    +
    + +
      +
    • +
      + + + Shipping and returns + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Description + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    +     + +

    Opened Accordion

    +

    Apply the open property to render a section in an open state.

    +
    +
    +
      +
    • +
      + + + Shipping and returns + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Description + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    +
    +
    + + +
      +
    • +
      + + + Shipping and returns + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Description + + + +
      + ... +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      + ... +
      +
      +
      • +
    +     + +

    Large Accordion

    +

    + Apply the + + accordion--large + + modifier to increase the size of each section summary. +

    +
    +
    +
      +
    • +
      + + + Shipping and returns + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Description + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    +
    +
    + +
      +
    • +
      + + + Shipping and returns + + + +
      + ... +
      +
      +
      • +
    • +
      + + + Description + + + +
      + ... +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      + ... +
      +
      +
      • +
    +     + +

    Auto-Collapsing Accordion

    +

    Use the name attribute to ensure only one section can be open at a time, with other sections automatically closing.

    +

    NOTE: For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.

    +
    +
    +
      +
    • +
      + + + Shipping and returns + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Text wraps on small screen with this long text + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

      +
      +
      +
      • +
    +
    +
    + +
      +
    • +
      + + + Shipping and returns + + + +
      + ... +
      +
      +
      • +
    • +
      + + + Description + + + +
      + ... +
      +
      +
      • +
    • +
      + + + Specifications + + + +
      + ... +
      +
      +
      • +
    +     +
    +export const metadata = { + component: "accordion", + "ds-component": { + name: "accordion", + version: 1.0, + }, +}; diff --git a/src/routes/_index/component/alert-dialog/+page.marko b/src/routes/_index/component/alert-dialog/+page.marko new file mode 100644 index 000000000..0708a0c75 --- /dev/null +++ b/src/routes/_index/component/alert-dialog/+page.marko @@ -0,0 +1,101 @@ +
    + + +

    + An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss. +

    +

    + The markup requirements are very strictly: a heading, description and button. +

    +
    +
    + + + + + + + + +
    +
    +
    +export const metadata = { + component: "alert-dialog", + "ds-component": { + name: "dialog", + version: 2.1, + }, + submodules: ["button"], +}; diff --git a/src/routes/_index/component/avatar/+page.marko b/src/routes/_index/component/avatar/+page.marko new file mode 100644 index 000000000..e8592e47f --- /dev/null +++ b/src/routes/_index/component/avatar/+page.marko @@ -0,0 +1,391 @@ +
    + +

    + Avatars are graphical assets that represent users’ identities across products. +

    +

    + Avatars can show a default image (the first letter of the user's name), custom image, or unknown image. +

    +

    + NOTE: + Avatars can be considered as + decorative + or + informative + ${" "}depending on their context and surroundings. Typically, an avatar is displayed adjacent to the user's name, or a sign-in link, therefore making it decorative. +

    + +

    + Default Avatar +

    +

    The default avatar displays the first letter of the user's name.

    + +
    +
    + +
    +
    + + + + +

    + The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink. +

    + +
    +
    + + + + + + + + +
    +
    + + + + + + + + + + + + +

    + Custom Avatar +

    +

    Avatars can be customized with an image.

    +

    + NOTE: + ${" "}Sighted users can visually distinguish an avatar based on the image; for non-sighted users the equivalent experience is the name of the user (not a description of the image contents, e.g. "dog in car"!). +

    + +
    +
    + +
    +
    + + + + +

    + Signed-Out Avatar +

    +

    + The + + avatar-signed-out + + icon is used to a represent a user that is not signed in. +

    + +
    +
    + +
    +
    + + + + +

    + Avatar Sizes +

    +

    Avatars can have a size of 32, 40, 48, 56, 64, 96 or 128 pixels.

    + +
    +
    + + + + + + + +
    +
    + + + + + + + + + + +
    +export const metadata = { + component: "avatar", + "ds-component": { + name: "avatar", + version: 1, + } +}; diff --git a/src/routes/_index/component/badge/+page.marko b/src/routes/_index/component/badge/+page.marko new file mode 100644 index 000000000..3766a2c85 --- /dev/null +++ b/src/routes/_index/component/badge/+page.marko @@ -0,0 +1,46 @@ +
    + + +

    + A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider. +

    +

    + The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the${" "} + + icon button + + and + + menu + + modules. +

    + +
    +
    + + 2 + + + 24 + + + 99+ + +
    +
    + +2 +24 +99+ + +
    +export const metadata = { + component: "badge", + "ds-component": { + name: "badge", + version: 1.2, + }, +}; diff --git a/src/routes/_index/component/breadcrumbs/+page.marko b/src/routes/_index/component/breadcrumbs/+page.marko new file mode 100644 index 000000000..38635fb0f --- /dev/null +++ b/src/routes/_index/component/breadcrumbs/+page.marko @@ -0,0 +1,240 @@ + +export const metadata = { + component: "breadcrumbs", + "ds-component": { + "name": "breadcrumb", + "version": 1.2 + }, + submodules: ["icon"] +}; diff --git a/src/routes/_index/component/button/+page.marko b/src/routes/_index/component/button/+page.marko new file mode 100644 index 000000000..cbcb1102c --- /dev/null +++ b/src/routes/_index/component/button/+page.marko @@ -0,0 +1,522 @@ +
    + + +

    A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <button> tag is required.

    +

    A button may also be used to submit or reset a form. In this case use the <button> tag with type=submit or type=reset respectively. Use of the <input> tag is not currently supported.

    +

    Finally, a link may be styled to look like a button. We call this a fake button. In this case the <a> tag is required with a valid HREF attribute.

    + +

    Default Button

    +

    Use the btn or fake-btn class respectively, to create a minimal, default button. This default button is the foundation for all other button types.

    +
    +
    + + Link +
    +
    + + + +Link + + +

    Use the large modifier to increase the size of the button.

    + +
    +
    + + Large Link +
    +
    + + + +Large Link + + +

    Use the small modifier to decrease the size of the button.

    + +
    +
    + + Small Link +
    +
    + + + +Small Link + + +

    Primary Button

    +

    Use the primary modifier to create a primary button style.

    +
    +
    + + Link +
    +
    + + + +Link + + +

    Secondary Button

    +

    Use the secondary modifier to create a secondary button style.

    +
    +
    + + Link +
    +
    + + + +Link + + +

    Tertiary Button

    +

    Use the tertiary modifier to create a tertiary button style.

    +
    +
    + + Link +
    +
    + + + +Link + + +

    Disabled Button

    +

    The disabled attribute is required to fully disable a button tag.

    +
    +
    + + + +
    +
    + + + + + + + +

    Remove the href attribute to fully disable an anchor tag.

    +
    +
    + Primary Link + Secondary Link + Tertiary Link +
    +
    + +Primary Link +Secondary Link +Tertiary Link + + +

    Partially Disabled Button

    +

    Partially disabled buttons are programmatically disabled but retain keyboard focus when disabled. This helps prevent keyboard focus being moved back to the start of the page when focus is lost.

    + +
    +
    + + +
    +
    + + + + + + +

    Destructive Button

    +

    Use the destructive modifier to create a destructive button style used for removing data.

    + +

    Primary Destructive Button

    +
    +
    + + Primary Link +
    +
    + + + +Destructive Link + + +

    Secondary Destructive Button

    +
    +
    + + Secondary Link +
    +
    + + + +Secondary Link + + +

    Tertiary Destructive Button

    +
    +
    + + Tertiary Link +
    +
    + + + +Tertiary Link + + +

    Adjacent Icon Button

    +

    Any SVG icon can be placed adjacent to the button text. To flip position of text and icon, simply swap the DOM order.

    +
    +
    + + +
    +
    + + + + + + +

    Busy State for Button

    +

    Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

    + +
    +
    + +
    +
    + + + + + +

    Click the button below for an interactive example.

    + +
    +
    + +
    +
    + +

    NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

    + +

    Flexible Button

    + +

    Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.

    + +
    +
    + +
    +
    + + + + + +

    Fixed Height Button

    + +

    To ensure the same height as other controls, apply a fixed height to a button with btn--fixed-height or btn--large-fixed-height.

    + +
    +
    + + + + +
    +
    + + + + + + + + +

    Fixed Width Button

    + +

    Buttons naturally grow wider with their text. The text will wrap naturally once the button width grows to exceed its constrained width.

    + +
    + +
    + + + + + +

    Fixed Width and Height Button

    + +

    Of course, with a constrained width and a fixed height, the text will begin to overflow.

    + +
    + +
    + + + + + +

    The solution is to apply truncation, via the btn--truncated or btn--large-truncated modifiers.

    + +
    + +
    + + + + + +

    Expandable Buttons

    +

    Use the "chevron-down-12" icon to create an expandable button style. Use aria-expanded to convey state.

    + +
    +
    + +
    +
    + + + + + +

    Use the borderless modifier to remove the border from the expandable button.

    + +
    +
    + +
    +
    + + + + + +

    Use the form modifier to create an expandable button style that matches the look of form controls (e.g. textbox, select).

    +
    +
    + +
    +
    + + + + + +

    Use the btn--slim modifier, in conjunction with btn--form, if displaying an icon only.

    + +
    +
    + +
    +
    + + + + + +

    For a floated "label", which will appear above the value, use the btn--floating-label and btn__floating-label classes.

    + +
    +
    + +
    +
    + + + + + +

    In a resting state, with no value, the btn__floating-label--inline modifier is required. This should be added with JavaScript

    + +
    +
    + +
    +
    + + + + + +
    + +export const metadata = { + component: "button", + "ds-component": { + "name": "button", + "version": 1.6 + } + }; diff --git a/src/routes/_index/component/calendar/+page.marko b/src/routes/_index/component/calendar/+page.marko new file mode 100644 index 000000000..da85fbacb --- /dev/null +++ b/src/routes/_index/component/calendar/+page.marko @@ -0,0 +1,1073 @@ +
    + +

    The calendar module offers readonly and interactive calendar capabilities.

    +

    Both types of calendar are structured as data tables; each column representing a day of the week.

    + +

    Readonly Calendar

    +

    A readonly calendar has cells containing static text or hypertext.

    +

    The current date is conveyed using calendar__cell--current and clipped text.

    + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    12345
    6789101112
    1314 - today1516171819
    20212223242526
    2728293031
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2019
    SuMoTuWeThFrSa
    12345
    6789101112
    1314 - today1516171819
    20212223242526
    2728293031
    +
    +
    +
    +     + +

    NOTE: for the eagle-eyed BEM afionados, we are saying each span has an implicit class of calendar__cell.

    + +

    Read-Only Calendar with Inactive Dates

    +

    Inactive/unavailable dates are conveyed using calendar__cell--disabled and offscreen text.

    + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    1 - inactive2 - inactive3 - inactive4 - inactive5 - inactive
    6 - inactive7 - inactive8 - inactive9 - inactive10 - inactive11 - inactive12 - inactive
    13 - inactive14 - today1516171819
    20212223242526
    2728293031
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    1 - inactive2 - inactive3 - inactive4 - inactive5 - inactive
    6 - inactive7 - inactive8 - inactive9 - inactive10 - inactive11 - inactive12 - inactive
    13 - inactive14 - today1516171819
    20212223242526
    2728293031
    +
    +
    +
    +     + +

    Read-Only Calendar with Date Range

    +

    Date ranges are conveyed using calendar__cell--selected, calendar__range, calendar__range--start, calendar__range-end and clipped text.

    + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    1 - inactive2 - inactive3 - inactive4 - inactive5 - inactive
    6 - inactive7 - inactive8 - inactive9 - inactive10 - inactive11 - inactive12 - inactive
    13 - inactive14 - today1516 + 17 - start of range + + 18 - in range + + 19 - in range +
    + 20 - in range + + 21 - in range + + 22 - in range + + 23 - in range + + 24 - in range + + 25 - end of range + 26
    2728293031
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    1 - inactive2 - inactive3 - inactive4 - inactive5 - inactive
    6 - inactive7 - inactive8 - inactive9 - inactive10 - inactive11 - inactive12 - inactive
    13 - inactive14 - today1516 + 17 - selected - start of range + + 18 - in range + + 19 - in range +
    + 20 - in range + + 21 - in range + + 22 - in range + + 23 - in range + + 24 - in range + + 25 - selected - end of range + 26
    2728293031
    +
    +
    +
    +     + +

    Interactive Calendar

    + +

    An interactive calendar uses toggle buttons to allow the input of single dates or date ranges.

    +

    NOTE: a fully functional and accessible interactive calendar requires JavaScript and is outside the scope of a CSS library such as eBay Skin. The examples below are NOT fully functional and serve to demonstrate the necessary HTML semantics and styling hooks only.

    + +

    Interactive Calendar With Single Date Selection

    +

    A single date selection is conveyed using aria-pressed.

    +

    NOTE: in comparison to the readonly calendar, with buttons we can now leverage the disabled property and aria-current instead of clipped text.

    + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    + +
    +
    +
    +
    +     + +

    Interactive Calendar With Date Range Selection

    +

    Date ranges are bookended by two buttons with the aria-pressed property. All buttons in between these dates leverage clipped text for assistive technology.

    + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    + + + + + +
    + + + + + + + + + + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    + + + + + +
    + + + + + + + + + + + +
    +
    +
    +
    +     + +

    Calendar With Header Pagination

    +

    The calendar module allows an optional header section for pagination between months.

    + +
    +
    +
    +
    +
    + +

    August 2023

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    12345
    6789101112
    1314 - today1516171819
    20212223242526
    2728293031
    +
    +
    +
    +
    +
    + + +
    +
    +
    + +

    August 2023

    + +
    +
    +
    +
    + +
    +
    +
    +     + +

    Multi-month Calendar with Header Pagination

    +

    Multiple instances of calendar__month can be rendered inside of the calendar__body.

    + +
    +
    +
    +
    +
    + +

    July 2023

    +

    August 2023

    +

    September 2023

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    July 2023
    SuMoTuWeThFrSa
    1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    August 2023
    SuMoTuWeThFrSa
    12345
    6789101112
    1314 - today1516171819
    20212223242526
    2728293031
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    September 2023
    SuMoTuWeThFrSa
    12
    3456789
    10111213141516
    17181920212223
    24252627282930
    +
    +
    +
    +
    +
    + + +
    +
    +
    + +

    July 2023

    +

    August 2023

    +

    September 2023

    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +     +
    +export const metadata = { + component: "calendar", + "ds-component": { + "name": "calendar", + "version": 1 + }, + "submodules": ["icon-button"] + +}; diff --git a/src/routes/_index/component/carousel/+page.marko b/src/routes/_index/component/carousel/+page.marko new file mode 100644 index 000000000..988b3e246 --- /dev/null +++ b/src/routes/_index/component/carousel/+page.marko @@ -0,0 +1,221 @@ + + +export const metadata = { + component: "carousel", + "ds-component": { + "name": "carousel", + "version": 1.1 + }, + "submodules": ["icon"] + }; diff --git a/src/routes/_index/component/ccd/+page.marko b/src/routes/_index/component/ccd/+page.marko new file mode 100644 index 000000000..f96be8052 --- /dev/null +++ b/src/routes/_index/component/ccd/+page.marko @@ -0,0 +1,153 @@ +
    + + +

    + A CCD (Common Charger Directive) is a pictogram to display if a charger is included with a product or not. It also displays the Wattage of the charger in an easy way to allow users to know if this charger is compatible with their plugs. +

    +

    + CCD consists of two icons. The first represents if the charger is included or not. The second is the label that details the actual rating and fast charging specifications +

    +

    In the rating, the range is always shown as Watts (W).

    + +

    Charger included with USB PD

    +

    + When charger is included, use the + + ccd-charger-included + + icon. +

    +
    +
    +
    + + + +
    + + +
    +
    1001 - 2000
    +
    W
    +
    USB PD
    +
    +
    +
    +
    +
    + +
    + + + +
    + + +
    +
    1001 - 2000
    +
    W
    +
    USB PD
    +
    +
    +
    +     + +

    Charger not included

    +

    + When charger is not included, use the + + ccd-charger-not-included + + icon. +

    +
    +
    +
    + + + +
    + +
    +
    1001 - 2000
    +
    W
    +
    USB PD
    +
    +
    +
    +
    +
    + +
    + + + +
    + + +
    +
    1001 - 2000
    +
    W
    +
    USB PD
    +
    +
    +
    +     + +

    Charger included without USB PD

    +

    + The USB PD text is shown if the charger has USB PD. If the charger does not have USB PD, the text should not be shown. +

    +
    +
    +
    + + + +
    + + +
    +
    1001 - 2000
    +
    W
    +
    +
    +
    +
    +
    + +
    + + + +
    + + +
    +
    1001 - 2000
    +
    W
    +
    +
    +
    +     +
    +export const metadata = { + component: "ccd", + "ds-component": { + name: "ccd", + version: 1.0, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/chart-legend/+page.marko b/src/routes/_index/component/chart-legend/+page.marko new file mode 100644 index 000000000..6bfc0ff9d --- /dev/null +++ b/src/routes/_index/component/chart-legend/+page.marko @@ -0,0 +1,70 @@ +
    + + +

    A representation of legend keys and their values on the plotted area of any chart or graph.

    +
    +
    +
    +
    +
    +
    +
    Portion 1
    +
    10%
    +
    +
    +
    Portion 2
    +
    20%
    +
    +
    +
    Portion 3
    +
    30%
    +
    +
    +
    Portion 4
    +
    30%
    +
    +
    +
    Portion 5
    +
    10%
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    Portion 1
    +
    10%
    +
    +
    +
    Portion 2
    +
    20%
    +
    +
    +
    Portion 3
    +
    30%
    +
    +
    +
    Portion 4
    +
    30%
    +
    +
    +
    Portion 5
    +
    10%
    +
    +
    +
    +
    +     +
    +export const metadata = { + component: "chart-legend", + "ds-component": { + name: "avatar", + version: "1.0", + } +}; diff --git a/src/routes/_index/component/checkbox/+page.marko b/src/routes/_index/component/checkbox/+page.marko new file mode 100644 index 000000000..6cfc17da2 --- /dev/null +++ b/src/routes/_index/component/checkbox/+page.marko @@ -0,0 +1,650 @@ +
    + + +

    + A checkbox is a form control that allows multiple selections from a group of choices. +

    +

    + The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button. +

    +

    + The checkbox is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it! +

    + +

    + Default Checkbox +

    +

    + Use the + + checkbox + + base class to create a checkbox. +

    +

    + NOTE: + ${" "}Skin uses SVG to give a custom checkbox appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default checkbox in a non-CSS state. +

    + +
    +
    + + + + +
    +
    + + + + + + + +

    + Mixed Checkbox +

    +

    + For a mixed checkbox, that is partially checked, or indeterminate, apply the${" "} + + aria-checked="mixed" + + state and use + + icon-checkbox-mixed-18 + + . +

    +

    + NOTE + : JavaScript is required to toggle the aria-checked state. +

    + +
    +
    + + + + +
    +
    + + + + + + + +

    + Large Checkbox +

    +

    + For a larger checkbox, use the + + checkbox--large + + modifier plus the + + #icon-checkbox-unchecked-24 + + , + + #icon-checkbox-checked-24 + + and + + #icon-checkbox-unchecked-24 + + icons. +

    + +
    +
    + + + + +
    +
    + + + + + + + +

    + Disabled Checkbox +

    +

    + Use the + + disabled + + attribute to disable any checkbox input. +

    + +
    +
    + + + + +
    +
    + + + + + + + +

    + Grouped Checkboxes +

    +

    + A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select). +

    +

    + A + + fieldset + + and + + legend + + are + required + in order to create the correct grouping semantics. Note that the Skin + + global + + module removes the default fieldset border and padding. +

    +

    + The following example uses the + + field module + + for simple layout of checkbox fields and labels. +

    + +
    +
    +
    + Choose an Option + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + +
    + Choose an Option + + + + + + + + + + + + + + + + + + + + + +
    +     + +

    + TIP + : For large checkboxes, wrap each label and control inside of a + + field__group + + element to maintain vertical alignment. +

    +

    + To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper. +

    + +
    +
    +
    + Choose an Option +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    +
    +
    + + +
    + Choose an Option +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    +     +
    +export const metadata = { + component: "checkbox", + "ds-component": { + name: "checkbox", + version: 2, + }, +}; diff --git a/src/routes/_index/component/chip/+page.marko b/src/routes/_index/component/chip/+page.marko new file mode 100644 index 000000000..4e47a1f03 --- /dev/null +++ b/src/routes/_index/component/chip/+page.marko @@ -0,0 +1,172 @@ +
    + + +

    A chip represents a descrete highlighted value.

    + +

    + Static Chip +

    +

    A static chip simply for informational purposes.

    + +
    +
    + + + Football + + +
    +
    + + + + Football + + + +

    + Interactive Chip +

    +

    An interactive chip has a delete button inside for chip removal.

    + +
    +
    + + + Football + + + +
    +
    + + + + Football + + + + +

    + Chip Containers +

    +

    + When chips appear next to each other in a set, spacing and positioning adjustments should be made on the container, and if necessary, margins adjusted as such. Please review design documentation and follow the guidance here for appropriate specifications. +

    + +
    +
    + + + +
    +
    +

    + Note on Chips in Containers +

    +

    + Chips have a display of + + inline-flex + + ${" "}so they will naturally inherit some native inline attributes. One of those is the implied white space between each one. Bear this mind when creating your container. +

    +
    +
    + +

    + Here is an example of a container constrained to + + 300px + + (for vertical spacing demo reasons) that uses + + flex + + ${" "}with wrapping to remove the whitespace and provide a clean set of chips (whitespace-free) within a container using the appropriate spacing conventions. +

    + +
    +
    +
    + + + Football + + + + + Basketball + + + + + Baseball + + + + + Hockey + + + + + Cricket + + + + + Swimming + + + + + Rugby + + +
    +
    +
    +
    +export const metadata = { + component: "chip", + "ds-component": { + name: "chip", + version: "1.0.0", + }, +}; diff --git a/src/routes/_index/component/chips-combobox/+page.marko b/src/routes/_index/component/chips-combobox/+page.marko new file mode 100644 index 000000000..1c9d37096 --- /dev/null +++ b/src/routes/_index/component/chips-combobox/+page.marko @@ -0,0 +1,785 @@ +
    + + +

    + Chips Combobox are creators and managers of + + chip + + ${" "}components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern. +

    + +

    Empty Chips Combobox

    +

    + This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry. +

    + +

    + NOTE + : For empty Chips Combobox implementations, to avoid layout issues, make sure${" "} + + .chips-combobox__items + + does NOT have any whitespace. +

    + +
    +
    + +
      + + + + + +
      +
      +
      + Soccer +
      +
      + Hockey +
      +
      + Tennis +
      +
      +
      +       + +
    +
    + + + +
      + + + + + +
      +
      +
      + Soccer +
      +
      + Hockey +
      +
      + Tennis +
      +
      +
      +       +       +       + +

      Fluid Chips Combobox

      +

      + Adding the modifier, + + .chips-combobox--fluid + + makes the component fluid and expands it to the width of its container. +

      + +
      +
      + +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         + +
      +
      + + + +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +         + +

        Prefilled Chips Combobox

        +

        + This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component. +

        + +
        +
        + +
          +
        • + + + Football + + + +
          • +
        • + + + Basketball + + + +
          • +
        • + + + Baseball + + + +
          • +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +
        +
        + + + +
          +
        • + + Football + + +
          • +
        • + + Basketball + + +
          • +
        • + + Baseball + + +
          • +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +         + +

        Chips Combobox in Disabled State

        +

        + When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips. +

        +

        + To turn on this state, add + + aria-disabled="true" + + ${" "}to the outer element of the module. Additonally, you'll need to add the${" "} + + disabled + + attribute to all the buttons inside as well as the + + input + + element for combobox. +

        + +
        +
        + +
          +
        • + + + Football + + + +
          • +
        • + + + Basketball + + + +
          • +
        • + + + Baseball + + + +
          • +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +
        +
        + + + +
          +
        • + + Football + + +
          • +
        • + + Basketball + + +
          • +
        • + + Baseball + + +
          • +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +         + +

        Chips Combobox in Error State

        +

        + When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed. +

        +

        + To turn on the error state, add a class of + + chips-combobox--error + + ${" "}to the outer element of the module. To turn off the error state, remove the class. +

        +

        + In addition to the inclusion of the modifier to turn on the error state, there should also be an accompanying error message relevant to the reason for the error. Per${" "} + + a11y + + ${" "}rules, color alone should not be used to indicate an error. For more information, please see the${" "} + + field error state docs + + . +

        + +
        +
        + +
          +
        • + + + Football + + + +
          • +
        • + + + Basketball + + + +
          • +
        • + + + Baseball + + + +
          • +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +
        +
        + + + +
          +
        • + + Football + + +
          • +
        • + + Basketball + + +
          • +
        • + + Baseball + + +
          • +
        + + + + + +
        +
        +
        + Soccer +
        +
        + Hockey +
        +
        + Tennis +
        +
        +
        +         +         +         +
        +export const metadata = { + component: "chips-combobox", + "ds-component": { + name: "combobox", + version: "1.0.0", + }, + submodules: ["chip", "combobox"], +}; diff --git a/src/routes/_index/component/combobox/+page.marko b/src/routes/_index/component/combobox/+page.marko new file mode 100644 index 000000000..9a687f4ee --- /dev/null +++ b/src/routes/_index/component/combobox/+page.marko @@ -0,0 +1,323 @@ +
        + + +

        + A combobox is a combination of textbox and listbox. The textbox value can be constructed via manual text entry as normal,${" "} + or + via selection from the listbox options, + or + a combination of both. +

        +

        + TIP + : A combobox can be further enhanced with + + autocomplete behaviour + + . +

        + +

        Default Combobox

        +

        + Selecting an option should simply fill the textbox with that value. Options may not have state or any other kind of secondary behaviour. +

        + +
        +
        +
        + + + + + +
        +
        +
        + Option 1 +
        +
        + Option 2 +
        +
        + Option 3 +
        +
        +
        +         +
        +
        +
        + + + + + + + +
        +
        +
        + Option 1 +
        +
        + Option 2 +
        +
        + Option 3 +
        +
        +
        +         +         + +

        + Disabled Combobox +

        +

        + Apply the + + disabled + + property to disable the combobox. +

        + +
        +
        +
        + + + + + +
        +
        +
        + Option 1 +
        +
        + Option 2 +
        +
        + Option 3 +
        +
        +
        +         +
        +
        +
        + + + + + + + +
        +
        +
        + Option 1 +
        +
        + Option 2 +
        +
        + Option 3 +
        +
        +
        +         +         + +
        +export const metadata = { + component: "combobox", + "ds-component": { + name: "dropdown", + version: 2.2, + }, + submodules: ["icon", "listbox", "textbox"], +}; diff --git a/src/routes/_index/component/confirm-dialog/+page.marko b/src/routes/_index/component/confirm-dialog/+page.marko new file mode 100644 index 000000000..d9ecca7b1 --- /dev/null +++ b/src/routes/_index/component/confirm-dialog/+page.marko @@ -0,0 +1,84 @@ +
        + + +

        + A confirm dialog is a specific type of lightbox-dialog that prompts a user to confirm or reject their action. +

        +

        + The markup requirements are very strictly: a heading, description and two buttons. +

        + +
        +
        + + +
        +
        + + + + +
        +export const metadata = { + component: "confirm-dialog", + "ds-component": { + name: "alert-dialog", + version: 2.1, + }, + submodules: ["button"], +}; diff --git a/src/routes/_index/component/cta-button/+page.marko b/src/routes/_index/component/cta-button/+page.marko new file mode 100644 index 000000000..8b340244b --- /dev/null +++ b/src/routes/_index/component/cta-button/+page.marko @@ -0,0 +1,45 @@ +
        + + +

        + An action button takes users to another URL destination (i.e. it is always a hyperlink). +

        + +
        +
        + + + Link + + + +
        +
        + + + + + Link + + + + +
        +export const metadata = { + component: "cta-button", + "ds-component": { + name: "button", + version: 1.2, + }, +}; diff --git a/src/routes/_index/component/date-textbox/+page.marko b/src/routes/_index/component/date-textbox/+page.marko new file mode 100644 index 000000000..d3c25165b --- /dev/null +++ b/src/routes/_index/component/date-textbox/+page.marko @@ -0,0 +1,840 @@ +
        + +

        + The date textbox offers a calendar based "date picker" as an alternative to manual text entry. +

        + +

        + Single Select Date Textbox +

        +

        + The single select date textbox consists of a + + textbox + + plus + + icon button + + . The icon button launches an interactive + + calendar + + inside of a flyout. +

        +

        + The aria-label of the calendar button should be intuitive enough for users of speech recognition software to identify. +

        +

        + NOTE: + ${" "}a fully functional interactive calendar requires JavaScript and is outside the scope of a CSS library. The calendar in this example is a simple readonly version. +

        + +
        +
        + + + + + + + +
        +
        + + + + + + + +
        +
        + +
        +
        +         +         + +

        + Disabled Date Textbox +

        +

        + The disabled date textbox is a disabled textbox input with a calendar icon button that's also disabled. Use the${" "} + + disabled + + attribute on the + + input + + as well as + + button + + . +

        + +
        +
        + + + + + + +
        +
        + + + + + + + +
        +
        + +
        +
        +         +         + +

        + Date Range Textbox +

        +

        + Selecting a date range requires two textboxes; one for the start date and one for the end date. +

        +
        +
        + + + + + + + + + + +
        +
        + + + + + + + + + + +
        +
        + +
        +
        +         +         +
        +export const metadata = { + component: "date-textbox", + "ds-component": { + name: "date-picker", + version: 1, + }, + submodules: ["calendar", "icon-button", "textbox"], +}; diff --git a/src/routes/_index/component/details/+page.marko b/src/routes/_index/component/details/+page.marko new file mode 100644 index 000000000..43e9a3a40 --- /dev/null +++ b/src/routes/_index/component/details/+page.marko @@ -0,0 +1,232 @@ +
        + + +

        + A details element is an interactive control used to expand and collapse content. +

        +

        + NOTE: + The + + details-element-polyfill + + is required to polyfill older browsers. +

        + +

        Default Details

        + +
        +
        +
        + + + Details + + + +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        +
        +
        + + +
        + + Details + + +

        Sample content

        +
        +         + +

        Opened Details

        +

        + Apply the + + open + + attribute to change the state. +

        + +
        +
        +
        + + + Details + + + +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        +
        +
        + + +
        + + Details + + +

        Sample content

        +
        +         + +

        Centered Details

        +

        + Apply the + + details__summary--center + + class to center the summary. +

        + +
        +
        +
        + + + Details + + + +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        +
        +
        + + +
        + + Details + + +

        Sample content

        +
        +         + +

        Small Details

        +

        + Apply the + + details__summary--small + + class to use the smaller version of summary. +

        +
        +
        +
        + + + Details + + + +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        +
        +
        + + +
        + + Details + + +

        Sample content

        +
        +         + +

        RTL Details

        +

        Works with right-to-left languages.

        +
        +
        +
        + + + Details + + + +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        +
        +
        + +
        + + Details + + +

        Sample content

        +
        +         +
        +export const metadata = { + component: "details", + "ds-component": { + name: "expansion", + version: 1.2, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/donut-chart/+page.marko b/src/routes/_index/component/donut-chart/+page.marko new file mode 100644 index 000000000..4d9f16afd --- /dev/null +++ b/src/routes/_index/component/donut-chart/+page.marko @@ -0,0 +1,184 @@ +
        + +

        ALPHA: APIs are subject to change

        + +

        + The donut chart is a data visualization module designed to display comparative data in an easily digestible and + visually appealing format. Our donut chart is composed of four sections: the title, metric, graph, and + legend, each serving a distinct purpose to enhance the user's understanding of the data presented. +

        + +

        + In practice, the .donut-chart__graph is where we will load in the third-party donut chart. +

        + +

        Small container

        +
        +
        +
        +
        +

        + Donut chart title +

        +
        +
        + 175 +
        +
        + Returns processed +
        +
        +
        +
        Graph placeholder
        +
        +
        +
        +
        +
        +
        Portion 1
        +
        10%
        +
        +
        +
        Portion 2
        +
        20%
        +
        +
        +
        Portion 3
        +
        30%
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        + Donut chart title +
        +
        +
        + 175 +
        +
        + Returns processed +
        +
        +
        +
        Graph placeholder
        +
        +
        +
        +
        +
        +
        Portion 1
        +
        10%
        +
        +
        +
        Portion 2
        +
        20%
        +
        +
        +
        Portion 3
        +
        30%
        +
        +
        +
        +
        +
        +
        +         + +

        Variable width container

        +
        +
        +
        +
        +

        + Donut chart title +

        +
        +
        + 175 +
        +
        + Returns processed +
        +
        +
        +
        Graph placeholder
        +
        +
        +
        +
        +
        +
        Portion 1
        +
        10%
        +
        +
        +
        Portion 2
        +
        20%
        +
        +
        +
        Portion 3
        +
        30%
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        + Donut chart title +
        +
        +
        + 175 +
        +
        + Returns processed +
        +
        +
        +
        Graph placeholder
        +
        +
        +
        +
        +
        +
        Portion 1
        +
        10%
        +
        +
        +
        Portion 2
        +
        20%
        +
        +
        +
        Portion 3
        +
        30%
        +
        +
        +
        +
        +
        +
        +         + +
        +export const metadata = { + component: "donut-chart", + "ds-component": { + "name": "donut-chart", + "version": 1 + }, + submodules: ["chart-legend"] + +}; diff --git a/src/routes/_index/component/education-notice/+page.marko b/src/routes/_index/component/education-notice/+page.marko new file mode 100644 index 000000000..c18db5898 --- /dev/null +++ b/src/routes/_index/component/education-notice/+page.marko @@ -0,0 +1,253 @@ +
        + + +

        Education Notice

        +

        The education notice is meant to display a variety of informational content. By default it has a gray background color that has less prominence.

        + +

        Education notice can use any large 24x24 program badge icon. The icon can be black or blue. They are black by default, but approved program badges can use blue. If the blue is too prominent or noisy, program badges can use black as well.

        + +
        +
        +
        +
        + + + +

        Did you know?

        +
        +
        +

        You can now split payments on two cards.

        +
        +
        +
        +
        + + +
        +
        + + + +

        Did you know?

        +
        +
        +

        You can now split payments on two cards.

        +
        +
        +         + +

        Education Notice with a Prominent Icon

        + +

        Default educational notice (gray background) can use a blue icon by adding an icon--prominent modifier on the icon element.

        + +
        +
        +
        +
        + + + +

        Did you know?

        +
        +
        +

        You can now split payments on two cards.

        +
        +
        +
        +
        + + +
        +
        + + + +

        Did you know?

        +
        +
        +

        You can now split payments on two cards.

        +
        +
        +         + +

        Prominent Education Notice

        +

        The prominent education notice includes a background color that pops a bit more. It can be used with a education-notice--prominent modifier.

        + +
        +
        +
        +
        + + + +

        Authenticity Guaranteed

        +
        +
        +

        Authenticity Guarantee means your item is authentic or your money back.

        +
        +
        +
        +
        + + +
        +
        + + + +

        Authenticity Guaranteed

        +
        +
        +

        Authenticity Guarantee means your item is authentic or your money back.

        +
        +
        +         + +

        Dismissable Education Notice

        +

        A close button can be placed in a education-notice__header element.

        + +
        +
        +
        +
        + + + +

        Did you know?

        + +
        +
        +

        You can now split payments on two cards.

        +
        +
        +
        +
        + + +
        +
        + + + +

        Did you know?

        + +
        +
        +

        You can now split payments on two cards.

        +
        +
        +         + +

        Actionable Education Notice

        +

        Link or button actions can be placed in the education-notice__footer element.

        + + +
        +
        +
        +
        + + + +

        The Vault

        + +
        +
        +

        You can now use the Vault to store items like this securely.

        +
        +
        + Learn more link +
        +
        +
        +
        + + +
        +
        + + + +

        The Vault

        + +
        +
        +

        You can now use the Vault to store items like this securely.

        +
        +
        + Learn more link +
        +
        +         + +

        Actionable Education Notice Using Fake Button

        +
        +
        +
        +
        + + + +

        The Vault

        + +
        +
        +

        You can now use the Vault to store items like this securely.

        +
        +
        + +
        +
        +
        +
        + + +
        +
        + + + +

        The Vault

        + +
        +
        +

        You can now use the Vault to store items like this securely.

        +
        +
        + +
        +
        +         + +
        +export const metadata = { + component: "education-notice", + "ds-component": { + "name": "education-notice", + "version": 1 + } +}; diff --git a/src/routes/_index/component/eek/+page.marko b/src/routes/_index/component/eek/+page.marko new file mode 100644 index 000000000..114ff1a61 --- /dev/null +++ b/src/routes/_index/component/eek/+page.marko @@ -0,0 +1,374 @@ +
        + +

        + EEK is an icon that is used for energy ratings. It is a rating system that is used to show how energy efficient a product is. + EEKs have two parts, a range, and a rating. + The following ranges are available: +

        + + + + + + + + + + + $ { + const range = icon.split('-'); + const min = range[1]; + const max = range[0]; + }; + + + + + + + + + +
        EEK MINEEK MAXICON
        ${min}${max} + + + + + +
        + +

        + And for each range, making sure each rating exists within that given range, the EEK can have the following + ratings: +

        +

        Then each rating needs to have a different color. This depends on the distance it is from the upper range

        + + + + + + + + + + + + + + + + + + + + + + + +
        EEK RATING NAME + + + + + + + + +
        + + + + ${iconName} + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + + + + +
        EEK RATING NAME + + + + + + + +
        + + + + ${iconName} + + + + + + + + + + + +
        + +

        EEK examples

        +
        +
        +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +
        +
        + +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +         + + +

        Large EEK

        +

        In order to match other items on the screen, you can use eek--large class to increase the size

        +
        +
        +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +
        +
        + +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +
        +
        + + + + + + +
        + +
        +         + + + +
        +export const metadata = { + component: "eek", + "ds-component": { + "name": "eek-ratings", + "version": 1.1 + }, + submodules: ["icon"] +}; diff --git a/src/routes/_index/component/field/+page.marko b/src/routes/_index/component/field/+page.marko new file mode 100644 index 000000000..2bcbbc1c0 --- /dev/null +++ b/src/routes/_index/component/field/+page.marko @@ -0,0 +1,1246 @@ +
        + +

        The field module facilitates the layout of a form control and its associated label, plus any other applicable text or sub-controls (e.g. error text or help button).

        + +

        Unstacked Field

        +

        The field__label & field__control elements are inline by default, taking up only as much horizontal space as they need.

        +

        Multiple fields can be laid out inline by using the span tag with field class, as per the example below.

        + +
        +
        + + + + + + + + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + +

        Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.

        + +
        +
        +
        + + + + +
        +
        + + + + + + + +
        +
        + + + + + +
        +
        +
        + + +
        + + + + +
        +
        + + + + + + + +
        +
        + + + + + +
        +         + +

        For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the field--align-top modifier to align it to the top.

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Stacked Field

        +

        For a label stacked above the control, use the field__label--stacked element modifier.

        +

        Again, multiple fields can be laid out inline by using a span tag, as per the example below.

        + +
        +
        + + + + + + + + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + +

        Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.

        + +
        +
        +
        + + + + +
        +
        + + + + + + + +
        +
        + + + + + +
        +
        +
        + + +
        + + + + +
        +
        + + + + + + + +
        + + + + + + + +         + +

        Field Font-Size

        +

        The field label will honour any font-size cascade. Wrap the label and control in a field__group element to maintain vertical alignment.

        +

        NOTE: form controls do not inherit the font-size cascade. This is default browser behaviour.

        + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

        Disabled Field

        +

        The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.

        +
        +
        + + + + + + + + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + +

        TIP: Disabled controls are exempt from WCAG colour contrast requirements.

        + +

        Readonly Field

        +

        A readonly control is conveyed using the readonly attribute. The value of a readonly control is passed to the server.

        +
        +
        + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + + +

        Required Field

        +

        A required field is conveyed visually with an asterisk, and non-visually using the aria-required property.

        +
        +
        + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + +

        Invalid Field

        +

        An invalid control is conveyed visually via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed non-visually using the aria-invalid state.

        +

        IMPORTANT: The example below shows the field with red border only. Do not forget that colour should not be used as the only visual means of conveying information. A description and/or icon is also required. See next section for more details.

        +
        +
        + + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + +

        Field Description

        +

        A field may have nearby text to describe additional instructions, status or validation error of the control.

        +

        The field__description element defines some minimal styling, but does not dictate location or layout. This element has modifiers for confirmation, information and attention, depending on the type of descriptive text (or icon).

        +

        TIP: The description element can be designated as an ARIA live-region if client-side updates occur.

        + +

        Text on Side of Field

        +

        A description can be placed adjacent to any stacked or unstacked field simply by using an inline-level tag, such as span.

        +
        +
        + + + + + + + Field description or error + + +
        +
        + + + + + + + + Field description or error + + + + +

        To change the type of decription you would use field__description--confirmation, field__description--information, or field__description--attention.

        + +
        +
        +
        + + + + + + Field description - default + +
        +
        + + + + + + Field description - confirmation + +
        +
        + + + + + + Field description - information + +
        +
        + + + + + + Field description - error (attention) + +
        +
        +
        + +

        Text Below Stacked Field

        +

        A description can be placed underneath a stacked field simply by using a block-level tag, such as div.

        +
        +
        + + +
        + +
        +
        + Field description or error +
        +         +
        +
        + + + +
        + +
        +
        + Field description or error +
        +         +         + +

        Text Above or Below Unstacked Field

        +

        A description can be added directly above and/or below the control by utlising CSS table-layout via the field--table modifier and field__row elements.

        +
        +
        + +
        + + + Field description or error + +
        +
        + + + + +
        +         +
        +
        + + +
        + + + Field description or error + +
        +
        + + + + +
        +         +         + +

        Text Below Floating label

        +

        When you use a floating label, you can have the description text below

        +
        +
        + + +
        + +
        +
        + Field description or error +
        +         +
        +
        + + + +
        + +
        +
        + Field description or error +
        +         +         + +

        Listbox Button with Label in Error State

        +

        You can use a listbox button as a field. This example includes a label, the listbox button as well an error message with the entire thing in an error state.

        + +
        +
        + + +
        + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        + +         +
        +
        + + There was an error +
        +         +
        +
        + + + + +
        + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        + +         +
        +
        + + There was an error +
        +         +         + +

        Textbox in Error State

        +

        You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

        + +
        +
        + + +
        + +
        +
        + + There was an error +
        +         +
        +
        + +

        Textbox in Error State

        +

        You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

        + + + + +
        + +
        +
        + + There was an error +
        +         +         + +

        Fluid Field

        +

        Form control elements (such as select and input) are inline-block by default, and will only use up as much of their parent's horizontal space as they need.

        +

        For a stacked field the control must be set to 100% width (using the fluid utility class) to fill all available space.

        + +
        +
        +
        + + +
        + +
        +         + + +
        +
        + + +
        +
        +         +
        +
        +
        + +
        + + +
        + +
        +         + + +
        +
        + + +
        +
        +         +
        +         +

        The above example shows the fields in a flexbox layout. This layout is created using the field-group helper class. Notice that each field is also set to fluid, in order to fill all available flexbox space (flexbox layout takes care of dividing the space evenly between fluid fields).

        + +

        If we set the form control width to 100% in an unstacked field, the control would flow to a new line below the label (effectively behaving like a stacked label). This behaviour can be avoided by adding an additional field__group element to create flex layout inside of the field.

        +
        +
        +
        + + + + + + + + + + + + + + + + + + + +
        +
        +
        + +
        + + + + + + + + + + + + + + + + + + + +
        +         +

        TIP: You may want to experiment with sizes other than 100%, and also the flexbox justify-content property.

        + +

        For a fluid control and description, those elements can be wrapped in a field__group container to create flex layout.

        + +
        +
        +
        + + +
        + + + + + Field description or error + +
        +         + + +
        +
        +
        + + +
        +
        + + Field description or error + +
        +         +
        +
        +
        + + +
        + + +
        + + + + + Field description or error + +
        +         + + +
        +
        +
        + + +
        +
        + + Field description or error + +
        +         +
        +         + +

        Field Character Count

        +

        A field may have a character count section typically under the input and aligned to the right.

        + + This variant adds a top-level container that houses both the field description and the character count, though field description or error is not necessary. + +

        In order to be accessible, the character count should have a clipped element to describe what it is. At the same time, aria-describedby should be added to the input element that points to the character count element. Finally, aria-live should be off by default, but if it passes the current max characters, then it should be changed to polite. Once it goes back down below the max, it should go back to off.

        + +

        Field with Character Count Only

        +

        Character character can be added by utlising CSS grid via the field__description--group modifier and the addition of the relevant markup. By default if there is only one element in the group, it will align to the right

        + +
        +
        + + + + + +
        + + 0 of 140 + charaters + +
        +         +
        +
        + + + + + + + +
        + + 0 of 140 + charaters + +
        +         +         + +

        Field Description and Character Count

        +

        A field description (or error) and character count can be added by adding an element before the field count. It will left align the description and right align the character count.

        + +
        +
        + + + + + +
        + Field description or error + + 0 of 140 + charaters + +
        +         +
        +
        + + + + + + +
        + Field description or error + + 0 of 140 + charaters + +
        +         +         + +

        Field Description and Character Count with Text area

        +

        A field description (or error) and character count can also be added to a text area. Use similar markup as before but add a textarea element.

        + +
        +
        + + + + + + +
        + Field description or error + + 0 of 140 + charaters + +
        +         +
        +
        + + + + + + +
        + Field description or error + + 0 of 140 + charaters + +
        +         +         + +
        +export const metadata = { + component: "field", + "ds-component": { + version: 1.0, + } +}; diff --git a/src/routes/_index/component/file-input/+page.marko b/src/routes/_index/component/file-input/+page.marko new file mode 100644 index 000000000..b1319a789 --- /dev/null +++ b/src/routes/_index/component/file-input/+page.marko @@ -0,0 +1,99 @@ +
        + + +

        + The file-input lets the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using${" "} + + form submission + + , or manipulated using JavaScript code and + + the File API + + . +

        +

        + The entire element can function as a dropzone for drag and drop, however this functionality requires JavaScript and is outside the scope of a CSS library such as eBay Skin. +

        + +

        Base

        + +
        +
        +
        +
        +
        + +
        +
        +

        + Drag and drop files +

        + + Up to 10MB per file in JPG, JPEG, PNG, MP4. + + +
        +
        + +
        +
        +
        + + +
        +
        +
        + +
        +
        +

        + Drag and drop files +

        + + Up to 10MB per file in JPG, JPEG, PNG, MP4. + + +
        +
        + +
        +         +
        +export const metadata = { + component: "file-input", + "ds-component": { + name: "file-input", + version: 0.1, + alpha: true, + }, +}; diff --git a/src/routes/_index/component/file-preview-card-group/+page.marko b/src/routes/_index/component/file-preview-card-group/+page.marko new file mode 100644 index 000000000..ba7478f5e --- /dev/null +++ b/src/routes/_index/component/file-preview-card-group/+page.marko @@ -0,0 +1,624 @@ +
        + + +

        + The file-preview-card-group is a group of single or multiple file preview cards. +

        + +

        + This component is an atomic piece + + file-preview-card + + ${" "}which is the recommended piece to use. Using other components may result in unexpected results. +

        + +

        Base

        + +
        +
        +
        +
          +
        • +
          + + +
          + CSV +
          +
          +
          + countries.csv + + English, German, Spanish, French, Polish, Dutch, Italian, Japanese, Portuguese, Arabic + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        +
        +
        +
        + + +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        Responsive Out of the Box

        + +

        + Similar to Toggle Button Group, this component is responsive out of the box. The cards will responsively shrink and stretch the specific type of cards inside and attempt to fit the cards nicely within the container at any and all screen sizes. +

        + +

        + We use + + display: grid + + ${" "}to create a predefined allotted number of card slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows cards to shrink/stretch the predefined number of cards at each breakpoint with a fallback to media queries for unsupported browsers. +

        + +

        + The responsive rules around how many toggle cards appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive layout at various screen sizes. +

        + +

        + In the demo below, drag the range to see the responsive rules in action. +

        + +
        +

        + +

        + + + 320 + +
        +

        +
        +
        +
          +
        • +
          + Image + +
          +
          • +
        • + +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • + +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • + +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        • +
          + Image + +
          +
          • +
        +
        +
        +
        + + +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • + +
        +
        +         +
        +export const metadata = { + component: "file-preview-card-group", + "ds-component": { + name: "file-preview-card-group", + version: 0.1, + alpha: true, + }, +}; diff --git a/src/routes/_index/component/file-preview-card/+page.marko b/src/routes/_index/component/file-preview-card/+page.marko new file mode 100644 index 000000000..d1cfcd2ed --- /dev/null +++ b/src/routes/_index/component/file-preview-card/+page.marko @@ -0,0 +1,344 @@ +
        + + +

        + The file-preview-card can be used to display file previews. A css grid layout is used to define the areas in which certain elements can be placed. +

        + +

        Uploading File Preview Card

        +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +
        + + +
        +
        + + +
        +
        +         + +

        Image File Preview Card

        + +

        For image file types, the image is showcased in the body of the card.

        + +
        +
        +
        +
        +
        + Image + +
        +
        +
        +
        +
        + +
        +
        + Image + +
        +
        +         + +

        Video File Preview Card

        + +

        For video file types, a preview is shown within the body of the card.

        + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +         + +

        Document File Preview Card

        + +

        + For document file types, such as documents, the card does not display a preview within its body. +

        + +
        +
        +
        +
        +
        + + +
        + CSV +
        +
        +
        + countries.csv + + English, German, Spanish, French, Polish, Dutch, Italian, Japanese, Portuguese, Arabic + +
        +
        +
        +
        +
        + + +
        +
        + + +
        + CSV +
        +
        +
        + countries.csv + + English, German, Spanish, French, Polish, Dutch, Italian, Japanese, Portuguese, Arabic + +
        +
        +         + +

        See More File Preview Card

        + +

        + If the number of visual files exceeds the maximum display limit, a "See More" action button will appear at the center of the preview card, allowing you to view the additional files. +

        + +
        +
        +
        +
        +
        + Image + +
        +
        +
        +
        +
        + + +
        +
        + Image + +
        +
        +         +
        +export const metadata = { + component: "file-preview-card", + "ds-component": { + name: "file-preview-card", + version: 0.1, + alpha: true, + }, +}; diff --git a/src/routes/_index/component/filter-button/+page.marko b/src/routes/_index/component/filter-button/+page.marko new file mode 100644 index 000000000..7ae1fc1fc --- /dev/null +++ b/src/routes/_index/component/filter-button/+page.marko @@ -0,0 +1,194 @@ +
        + + +

        + Use the + + filter-button + + or + + filter-link + + ${" "}classes, to create a button or link styled as a filter button. Group together multiple filter buttons inside of a${" "} + + filter-group + + container. +

        + +

        Unselected Filter Button

        +

        By default, a filter button is in a non-selected state.

        + +
        +
        +
        + + + + Link + + +
        +
        +
        + + +
        + + + Link + +
        +         + +

        Selected Filter Button

        +

        + Apply the + + aria-pressed + + state to a button, or + + filter-link--selected + + modifier to a link. +

        + +
        +
        +
        + + + + Link + + - Selected + + + +
        +
        +
        + + +
        + + + Link - Selected + +
        +         + +

        Disabled Filter Button

        +

        + Apply the + + disabled + + property or remove the + + href + + attribute to disable a button or link, respectively. +

        + +
        +
        +
        + + + + Link + + - Selected + + + +
        +
        +
        + + +
        + + + Link - Selected + +
        +         + +

        Truncated Filter Button

        +

        + Long text will automatically become truncated when it reaches the maximum width. +

        + +
        +
        +
        + + + + Link with lots of text that will become truncated + + +
        +
        +
        + + +
        + + + Link with lots of text that will become truncated + +
        +         +
        +export const metadata = { + component: "filter-button", + "ds-component": { + name: "quick-filter", + version: 2, + }, +}; diff --git a/src/routes/_index/component/filter-menu-button/+page.marko b/src/routes/_index/component/filter-menu-button/+page.marko new file mode 100644 index 000000000..4fdb17332 --- /dev/null +++ b/src/routes/_index/component/filter-menu-button/+page.marko @@ -0,0 +1,913 @@ +
        + + +

        + A filter menu button opens a menu of options by which to filter a result set. +

        + +

        + Non-Active Filter Menu Button +

        +

        + With no filters active, a filter menu button should be in a non-active state. Set the${" "} + + aria-pressed + + property to false. +

        + +
        +
        + + +
        + +
        +         +
        +
        + + + + +
        + +
        +         +         + +

        + Active Filter Menu Button +

        +

        + With one or more filters active, set the button's + + aria-pressed + + property to true. +

        + +
        +
        + + +
        + +
        +         +
        +
        + + + + +
        + +
        +         +         + +

        + Disabled Filter Menu Button +

        +

        + The button can be disabled using the + + disabled + + property. +

        + +
        +
        + + +
        + +
        +         +
        +
        + + +

        + Filter Menu Button with a Form +

        +

        + When a native form is required, wrap the menu items with a + + form + + and use the appropriate checkbox markup. +

        + +
        +
        + + + +
        +
        + + + + +
        + +
        +         +         +
        +
        + + + + + +
        +
        + + + + +
        + +
        +         +         +         +
        +export const metadata = { + component: "filter-menu-button", + "ds-component": { + name: "quick-filter", + version: 2, + }, + submodules: ["filter-menu", "icon"], +}; diff --git a/src/routes/_index/component/filter-menu/+page.marko b/src/routes/_index/component/filter-menu/+page.marko new file mode 100644 index 000000000..a5078e537 --- /dev/null +++ b/src/routes/_index/component/filter-menu/+page.marko @@ -0,0 +1,1077 @@ +
        + + +

        + A filter menu forms the basis of the + + filter-menu-button + + ${" "}module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example). +

        + +

        + Multi-Select Filter Menu +

        +
        +
        +
        + +
        +
        +
        + + + + + + + +

        + Single-Select Filter Menu +

        +
        +
        +
        + +
        +
        +
        + + +
        + +
        +         + +

        + Filter Menu with Disabled Options +

        +
        +
        +
        + +
        +
        +
        + + + + + + + + +

        + Filter Menu as Form +

        +

        + A form version is also available. It uses the + + checkbox + + and + + radio + + ${" "}modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button. +

        + +
        +
        +
        +
        +
        + + + +
        + +
        +
        +
        +
        + + +
        +
        +
        + + + +
        + +
        +
        +         + + + +

        + For multiple selection variation, you can also add an "Apply" button as a footer(to "apply" the selection(s)). +

        + +
        +
        +
        + + +
        +
        +
        + + + + + + + + +

        + Filter Menu with Header and Footer +

        + +

        + For multiple selection variation, you can also add a header to search the options. +

        + +
        +
        +
        +
        + + + +
        + + +
        +
        +
        + + +
        +
        + + + +
        + + +
        +         + +
        +export const metadata = { + component: "filter-menu", + "ds-component": { + version: 2, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/flag/+page.marko b/src/routes/_index/component/flag/+page.marko new file mode 100644 index 000000000..93be76828 --- /dev/null +++ b/src/routes/_index/component/flag/+page.marko @@ -0,0 +1,47 @@ +// @TODO ERRORS HERE +// import {flags} from '../components/components.marko'; +
        + + +

        The flag module is a bundle that provides full access to all the country flags via the <svg> and <use> tags.

        + +
        +
        + + + +
        +
        + + + + + + + +

        Including an Flag

        +

        A flag can be referenced from the flags svg file. We also provide + individual flags as SVGs located in this directory. You can include these on your page as + raw SVGs as needed.

        + + + + +

        NOTE: the SVG tag does not support the hidden attribute, hence a + hidden wrapper element is needed.

        + + +
        +export const metadata = { + component: "flag", + "ds-component": { + version: 1 + } +}; diff --git a/src/routes/_index/component/floating-label/+page.marko b/src/routes/_index/component/floating-label/+page.marko new file mode 100644 index 000000000..f611477f5 --- /dev/null +++ b/src/routes/_index/component/floating-label/+page.marko @@ -0,0 +1,493 @@ +
        + + +

        Floating labels appear to sit inside the textbox when it has no value or focus, and sit above the textbox otherwise.

        + +

        Floating Label with no Value

        +

        If the textbox has no value, the label can be positioned inside the textbox.

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating Label with Value

        +

        If the textbox has a value, the label must be positioned above the textbox.

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Large floating label

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating Label with Disabled Textbox

        +

        Use the disabled property & floating-label__label--disabled modifier on the input element and the label element respectively to disable the input.

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating Label with Placeholder

        +

        The placeholder should only be shown when the textbox is focused and there is no text

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating Label with Invalid Textbox

        +

        Set the aria-invalid property to true and add floating-label__label--invalid to the label to semantically and visually highlight the invalid state.

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating Label with Textarea

        +

        Use the textarea tag for a multi-line textbox.

        +

        A multi-line textbox allows line breaks and has a minimum height of 200px.

        +

        In order to prevent overlap for floating label, use .floating-label--opaque class

        +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating label with Combobox

        +

        Use the textarea tag for a multi-line textbox.

        +

        A multi-line textbox allows line breaks and has a minimum height of 200px.

        +
        +
        +
        + + + + + + +
        +
        +
        + Option 1 +
        +
        + Option 2 +
        +
        + Option 3 +
        +
        +
        +         +
        +
        +
        + + + + + + + + +
        +
        +
        + Option 1 +
        +
        + Option 2 +
        +
        + Option 3 +
        +
        +
        +         +         + +

        Floating Label with long text

        +

        This example shows how the floating label will truncate with long text

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +

        Floating Label with select

        + +
        +
        + + + + + + + +
        +
        + + + + + + + + + + + +

        Floating Label with large select

        + +
        +
        + + + + + + + + +
        +
        + + + + + + + + + + + +

        Floating Label with Phone input

        +

        For phone input, the label always remains in floating state above the input. This state ensures that the label does not obscure the phone number.

        +
        +
        + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + Saint Helena, Ascension and Tristan da Cunha + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + + +1 + + + +         +
        +
        + + + + +
        +
        +
        + + + Albania + (+355) + + +
        + ... +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + + +1 + + + +         +         + +

        Floating Label Transitions

        +

        By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.

        +

        When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.

        +

        You will also need to add the floating-label__label--focus class when the input recieves focus and remove it when the input loses focus. This is to ensure the right colors are applied to the label when focusing the input.

        +

        To opt into transitions after the initial render is complete, add the floating-label__label--animate modifier when the textbox receives focus.

        +

        The examples above use makeup-floating-label, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.

        +
        + +export const metadata = { + component: "floating-label", + "ds-component": { + "name": "form-field", + "version": 2.2 + } +}; diff --git a/src/routes/_index/component/global/+page.marko b/src/routes/_index/component/global/+page.marko new file mode 100644 index 000000000..e3d78f483 --- /dev/null +++ b/src/routes/_index/component/global/+page.marko @@ -0,0 +1,11 @@ +
        + +

        The global module defines the styles of any common page aspects, such as font family, font size, background color, text color and link states.

        +
        + +export const metadata = { + component: "global", + "ds-component": { + version: "1.0", + }, +}; diff --git a/src/routes/_index/component/icon-button/+page.marko b/src/routes/_index/component/icon-button/+page.marko new file mode 100644 index 000000000..9f05f569f --- /dev/null +++ b/src/routes/_index/component/icon-button/+page.marko @@ -0,0 +1,363 @@ +
        + + +

        Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

        + +
        +
        + + + + +
        +
        + + + + + + + + +
        +
        + + + +
        +
        + + + + + + + +

        To remove the background colour and hover states, apply the icon-btn--transparent modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        Badged Icon Button

        +

        An icon button can be badged using the badge module.

        +

        The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

        + +
        +
        + + + + + +
        +
        + + + + + + + + +

        Primary Icon Button

        +

        Use the primary modifier to create a primary icon button variant.

        + +
        +
        + + + +
        +
        + + + + + + + +

        Secondary Icon Button

        +

        Use the secondary modifier to create a secondary icon button variant.

        + +
        +
        + + + +
        +
        + + + + + + + +

        Tertiary Icon Button

        +

        Use the tertiary modifier to create a tertiary icon button variant.

        + +
        +
        + + + +
        +
        + + + + + + + +

        Using with a Progress Spinner

        +

        You may use a progress spinner inside the icon button.

        + +
        +
        + + + +
        +
        + + + + + + + + + +

        You may use an <a> to create a link icon button as well.

        + +
        +
        + + + + + + + + + +
        +
        + + + + + + + + + + + + + +
        +export const metadata = { + component: "icon-button", + "ds-component": { + "name": "icon-button", + "version": 1.6 + }, + submodules: ["icon"] +}; diff --git a/src/routes/_index/component/icon/+page.marko b/src/routes/_index/component/icon/+page.marko new file mode 100644 index 000000000..2d84c0242 --- /dev/null +++ b/src/routes/_index/component/icon/+page.marko @@ -0,0 +1,186 @@ +
        + + +

        The icon module is a bundle that provides full access to the entire range of eBay iconography via the <svg> and <use> tags.

        + +

        Base Icons Only

        + + Only base icons should be used. No state-based icons, such as disabled icons or even possibly an icon relaying an error state (likely red), should be used. Those state modifications on icons should be handled downstream using css modifiers to allow for those variations. + +

        General Markup Approach

        +

        To avoid gigantic icons when in a non-CSS state, we use the SVG width and height attributes to override the + browser's default 300x150 size.

        + +
        +
        + + + +
        +
        + + + + + + + +

        NOTE: Skin removes all pointer events on icons (via pointer-events: + none) due to a bug in IE. To add events to these icons you should wrap them in another element and + attach your events there.

        + +

        Including an Icon

        +

        An icon symbol declaration can + be referenced from the same file or an external SVG file. If in the same file, the symbol + must be stamped on the page inside of an SVG block.

        +

        We also provide individual icons as SVGs located in this directory. + You can include these on your page as raw SVGs as needed.

        + + + + + +

        NOTE: the SVG tag does not support the hidden attribute, hence a + hidden wrapper element is needed.

        + +

        Presentational Icons

        +

        A presentational icon provides no additional content, context or affordance to a page, section or widget.

        +

        Presentational icons require aria-hidden="true", in order to hide them from + assistive technology.

        + + + + + +

        Non-Presentational Icons

        +

        A non-presentational icon provides essential content, context or affordance to a page, section or widget.

        + +

        Non-presentational icons require both role="img" and an aria-label for assistive technology.

        + + + + + + + +

        Icon Classes

        +

        Each icon can have a class that corresponds to its width. For example, icon--24 + corresponds to the 24px width icon. These correspond with the size associated with each icon.

        +

        For colored icons use icon--24-colored + These will set the height, and the width will align with the aspect ratio

        + +

        Icons have a name postfix that corresponds to the width of the icon. For example, "icon-information-24" corresponds to the information icon of the 24px width. Heights may differ depending on the icon.

        + + +

        Disabled Icons

        +

        Most icons can be given a disabled appearance by adding the icon--disabled + modifier.

        + +

        Simple Icons

        +

        Icons that are simple and have only a stroke/fill of a single color simply inherit color and are disabled by inheriting that color as the stroke/fill.

        + +
        +
        + + + +
        +
        + + + + + + + +

        Filled Icons

        +

        There are certain filled icons that show up black by default. In order to color these icons, apply the icon--{name}-filled modifier.

        + +
        +
        + + + + + + + + + +
        +
        + + + + + + + + + + + + + + +

        Complex Icons

        +

        Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.

        + +
        +
        + + + +
        +
        + + + + + + + $ const deprecatedIcons = $global.meta.icons.deprecated || []; + + 0)> +

        Deprecated Icons

        + +

        These deprecated icons have either been removed or renamed. We keep deprecated icon files around to allow some time for transitioning to new icons. Deprecated icon files and mentions in docs, however, get removed with the following major Skin versions.

        + +
        +
        + + + +
        +
        +

        Do NOT Use These!

        +

        The following icons have been deprecated. They will be deleted in the next major Skin version. To transition usage to the new icons, please refer to the icons above and/or refer to the icon transition spreadsheet.

        +
        +
        + + + + + +
        +export const metadata = { + component: "icon", + "ds-component": { + "name": "icon", + "version": 1.3 + } +}; diff --git a/src/routes/_index/component/image-placeholder/+page.marko b/src/routes/_index/component/image-placeholder/+page.marko new file mode 100644 index 000000000..894b1d79b --- /dev/null +++ b/src/routes/_index/component/image-placeholder/+page.marko @@ -0,0 +1,68 @@ +
        + + +

        Image placeholder should be used when an image is not present. By default this is 300x300px, but can be resized + to it a container.

        +

        This asset can be found either in dist/svg/icons/image-placeholder.svg or in the + icons bundle

        + +
        +
        + + + +
        +
        + + + + + + + +

        Variable widths with borders

        +
        +
        +
        + + + +
        +
        + + + +
        +
        + + + +
        +
        +
        + + +
        + + + +
        + + + + + + +         +
        + +export const metadata = { + component: "image-placeholder", + "ds-component": { + version: 1, + }, +}; diff --git a/src/routes/_index/component/infotip/+page.marko b/src/routes/_index/component/infotip/+page.marko new file mode 100644 index 000000000..540a29240 --- /dev/null +++ b/src/routes/_index/component/infotip/+page.marko @@ -0,0 +1,243 @@ +
        + + +

        An infotip is a button which can be clicked to display information about another element or area on the page.

        +

        Toggle the aria-expanded state of the button to expand or collapse the infotip.

        + +
        +
        + + +
        + +
        +
        + +

        Infotip

        +

        Here's a tip to help you be successful at your task.

        +         + +
        +
        +
        +         +
        +
        + + + +
        + +
        +
        + +

        Infotip

        +

        Here's a tip to help you be successful at your task.

        +         + +
        +
        +
        +         +         + + +

        By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

        +

        In order to get this to work with floating-ui, you need to remove pointer position infotip__pointer--top-left and remove any style positioning

        + +
        +
        + + +
        + +
        +
        + +

        Infotip

        +

        Here's a tip to help you be successful at your task.

        +         + +
        +
        +
        +         +
        +
        + + + +
        + +
        +
        + +

        Infotip

        +

        Here's a tip to help you be successful at your task.

        +         + +
        +
        +
        +         +         + +

        If nesting an infotip inside of a paragraph element, make sure that there are no block level elements, such as div, h1-6, or p elements.

        + +
        +
        +

        + Inside paragraph + + + + + + + + Infotip + Here's a tip to help you be successful at your task. + + + + + + +

        +
        +
        + +

        + Inside paragraph + + + + + + + + Infotip + Here's a tip to help you be successful at your task. + + + + + + +

        +         + +

        Modal Infotip

        +

        On small screens, the infotip should launch a modal lightbox-dialog.

        + +
        +
        + + + + +
        +
        + + + + + + + + +
        +export const metadata = { + component: "infotip", + "ds-component": { + "name": "tourtip", + "version": 2 + }, + submodules: ["icon-button"] +}; diff --git a/src/routes/_index/component/inline-notice/+page.marko b/src/routes/_index/component/inline-notice/+page.marko new file mode 100644 index 000000000..341174e48 --- /dev/null +++ b/src/routes/_index/component/inline-notice/+page.marko @@ -0,0 +1,98 @@ +
        + + +

        The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.

        +

        An inline-level notice provides tips, guidance and feedback on individual elements and form controls.

        +

        An inline-level notice may have a status of general (default), confirmation, information or attention.

        + +
        +
        +
        + +

        Your price has been updated.

        +         +
        + +
        + + + + + + +

        Your price has been updated.

        +         +
        + +
        + + + + + + +

        Send offers to interested buyers.

        +         +
        + +
        + + + + + + +

        Add required aspects to keep item alive.

        +         +
        +
        +
        + +
        + +

        Your price has been updated.

        +         +
        + +
        + + + + + + +

        Your price has been updated.

        +         +
        + +
        + + + + + + +

        Send offers to interested buyers.

        +         +
        + +
        + + + + + + +

        Add required aspects to keep item alive.

        +         +
        +         +
        +export const metadata = { + component: "inline-notice", + "ds-component": { + "name": "alert-notice", + "version": 2.2 + }, + submodules: ["icon"] +}; diff --git a/src/routes/_index/component/less/+page.marko b/src/routes/_index/component/less/+page.marko new file mode 100644 index 000000000..373503b4d --- /dev/null +++ b/src/routes/_index/component/less/+page.marko @@ -0,0 +1,172 @@ +
        + +

        DEPRECATED. Use SASS mixins and variables instead

        + +

        + In comparison to past versions, Skin now offers a very minimal public + + LESS + + ${" "}API (i.e. LESS variables and mixins). Over time this may be reduced to zero. This is due to the introduction of CSS Custom Properties, which give us many benefits over LESS variables in our token based system. +

        +

        + Also, our Less module is + not + intended as a + general-purpose + library of utility mixins and variables such as + + LessHat + + . +

        + +

        + NOTE + : Lasso requires the additional + + lasso-less + + plugin dependency in your app package.json. +

        + + +{ + "dependencies": { + "lasso": "^3", + "lasso-less": "^3", + "@ebay/skin": "^${$global.meta.version}" + } +} + + +

        + Spacing Tokens (deprecated) +

        +

        + Skin uses a proportional spacing system anchored around a base value of 8px. +

        +

        + NOTE: + ${" "}Spacing variables in LESS are deprecated. In a future release, they will become part of the new CSS Custom Property API. +

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + Spacing Tokens +
        NAMESIZE
        spacing-25 + spacing-100 * 0.25 +
        spacing-50 + spacing-100 * 0.50 +
        spacing-1008
        spacing-200 + spacing-100 * 2 +
        spacing-400 + spacing-100 * 4 +
        spacing-600 + spacing-100 * 6 +
        spacing-800 + spacing-100 * 8 +
        + +

        + Typography Mixins +

        + +
        +
        +
          +
        • + .typography-giant-3(); +
          • +
        • + .typography-giant-2(); +
          • +
        • + .typography-giant-1(); +
          • +
        • + .typography-large-2(); +
          • +
        • + .typography-large-2-secondary(); +
          • +
        • + .typography-large-1(); +
          • +
        • + .typography-large-1-secondary(); +
          • +
        • + .typography-medium-bold(); +
          • +
        • + .typography-medium(); +
          • +
        • + .typography-medium-secondary(); +
          • +
        • + .typography-regular-bold(); +
          • +
        • + .typography-regular(); +
          • +
        • + .typography-regular-secondary(); +
          • +
        • + .typography-small-bold(); +
          • +
        • + .typography-small(); +
          • +
        • + .typography-small-secondary(); +
          • +
        +
        +
        +
        +export const metadata = { + component: "less", + version: "1.0", +}; diff --git a/src/routes/_index/component/lightbox-dialog/+page.marko b/src/routes/_index/component/lightbox-dialog/+page.marko new file mode 100644 index 000000000..423698ca5 --- /dev/null +++ b/src/routes/_index/component/lightbox-dialog/+page.marko @@ -0,0 +1,510 @@ + +export const metadata = { + component: "lightbox-dialog", + "ds-component": [ + { + "name": "dialog", + "version": 2.1 + }, + { + "name": "bottom-sheet", + "version": 2.1 + } + ], + submodules: ["button", "icon-button"] +}; diff --git a/src/routes/_index/component/link/+page.marko b/src/routes/_index/component/link/+page.marko new file mode 100644 index 000000000..cdb560128 --- /dev/null +++ b/src/routes/_index/component/link/+page.marko @@ -0,0 +1,169 @@ + +export const metadata = { + component: "link", + "ds-component": { + name: "text-link", + version: 2, + }, +}; diff --git a/src/routes/_index/component/list/+page.marko b/src/routes/_index/component/list/+page.marko new file mode 100644 index 000000000..4460ec42b --- /dev/null +++ b/src/routes/_index/component/list/+page.marko @@ -0,0 +1,687 @@ +
        + +

        + A list component is used to display certain types of data in a structured format. It can be used to display a list of items, a list of links, or a list of buttons. +

        +

        + This can be placed inside a container and will resize to fit the contents. The list expands to a maxumum of 480px. +

        + +

        + Default List +

        +
        +
        +
        +
          +
        • +
          + + + + + Text 1 + +
          +
          • +
        • +
          + + + + + Text 2 + +
          +
          • +
        • +
          + + + + + Text 3 + +
          +
          • +
        +
        +
        +
        + +
        +
          +
        • +
          + + + + + Text 1 + +
          +
          • +
        • +
          + + + + + Text 2 + +
          +
          • +
        • +
          + + + + + Text 3 + +
          +
          • +
        +
        +         + +

        + Actionable list +

        +

        + List also supports buttons or links as a list item. Actionable components, such as a switch, can be added in the trailing portion of the list, but they cannot be used in conjunction with buttons or link. +

        +
        +
        +
        + +
        +
        +
        + +
        + +
        +         + +

        + List with dividers +

        +

        + To add a divider, add a + + hr + + element after the list item. +

        +
        +
        +
        +
          +
        • +
          + + + + + Item 1 + +
          +
          • +
          +
        • +
          + + + + + Item 2 + +
          +
          • +
        • +
          + + + + + Item with a large amount of text that should wrap and go to the next line. If there is too much it would wrap + +
          +
          • +
        +
        +
        +
        + +
        +
          +
        • +
          + + + + + Item 1 + +
          +
          • +
          +
        • +
          + + + + + Item 2 + +
          +
          + + + + + Item with a large amount of text that should wrap and go to the next line. If there is too much it would wrap + +
          +
          • +
        +
        +         + +

        + List with variable width +

        +

        The list will adjust to the width of the container it is in.

        +
        +
        +
        +
        +
          +
        • +
          + + + + + Item 1 + +
          +
          • +
        • +
          + + + + + Item 2 + + + + +
          +
          • +
        +
        +
        +
        +
        + + +
        +
          +
        • +
          + + + + + Item 1 + +
          +
          • +
        • +
          + + + + + Item 2 + + + + +
          +
          • +
        +
        +         +

        + List with fieldset +

        +

        + For an interactive list, you can add a fieldset with radios or checkboxes +

        +
        +
        +
        +
        + Choose an Option +
        + + + + + +
        +
        + + + + + +
        +
        + + + + + +
        +
        +
        +
        +
        + +
        +
        + Choose an Option +
        + + + + + +
        +
        + + + + + +
        +
        + + + + + +
        +
        +
        +         + +
        +export const metadata = { + component: "list", + "ds-component": { + name: "list", + version: 1.0, + }, +}; diff --git a/src/routes/_index/component/listbox-button/+page.marko b/src/routes/_index/component/listbox-button/+page.marko new file mode 100644 index 000000000..ca3e59bdb --- /dev/null +++ b/src/routes/_index/component/listbox-button/+page.marko @@ -0,0 +1,1080 @@ +
        + + +

        + A listbox button is intended for use as a custom implementation of the native HTML select element's${" "} + single + -select use case. +

        +

        + Because a button element does not store form data, its value will not be submitted along with other form data without the assistance of JavaScript. +

        + +

        + Unselected Listbox Button +

        +

        By default, the listbox button is in an unselected state.

        + +
        +
        + + +
        +
        +
        + + Red + + + + +
        +
        + + Blue + + + + +
        +
        + + Yellow + + + + +
        +
        + + Green + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        +         +         + +

        + To give the illusion of a floated label use the + + btn--floating-label + + and + + btn__floating-label + + classes. +

        +

        + NOTE + : a + + btn__floating-label--inline + + ${" "}class must also be toggled with JavaScript. It should be present when there is no selection, and vice versa. +

        + +
        +
        + + +
        +
        +
        + + Red + + + + +
        +
        + + Blue + + + + +
        +
        + + Yellow + + + + +
        +
        + + Green + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        +         +         + +

        + Selected Listbox Button +

        +

        + A selection can be made by applying the + + aria-selected + + ${" "}state to a single option; JavaScript is required to update all ARIA and button text state. +

        + +
        +
        + + +
        +
        +
        + + Red + + + + +
        +
        + + Blue + + + + +
        +
        + + Yellow + + + + +
        +
        + + Green + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        +         +         + +

        + The following example shows the "floated label" version with a value selected. +

        + +
        +
        + + +
        +
        +
        + + Red + + + + +
        +
        + + Blue + + + + +
        +
        + + Yellow + + + + +
        +
        + + Green + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        +         +         + +

        + Listbox Button with option description +

        +

        + You can also add a description to each option by using + + .listbox-button__description + +

        +

        + In order to make the description accessible, you need to add a clipped punctuation marker. This ensures screen readers will read the subtitle as a separate sentence. +

        + +
        +
        + + +
        +
        +
        + + Red + + + + . + + This is a red color + + + + +
        +
        + + Blue + + + + . + + This is a blue color + + + + +
        +
        + + Yellow + + + + . + + This is a yellow color + + + + +
        +
        + + Green + + + + . + + This is a green color + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        +         +         + +

        + Borderless +

        +

        + Apply the + + btn--borderless + + modifier to create a borderless listbox button. +

        + +
        +
        + + +
        +
        +
        + + 1 + + + + +
        +
        + + 2 + + + + +
        +
        + + 3 + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + 1 + + + +
        +
        + 2 + + + +
        +
        + 3 + + + +
        +
        +
        +         +         + +

        + Error State +

        +

        + Apply the + + listbox-button--error + + modifier to create a listbox button in an error state. +

        +

        + This is a simple example with a simple error indication. For usage of the error state with an error message, please see the${" "} + + field module + + . +

        + +
        +
        + + +
        +
        +
        + + Red + + + + +
        +
        + + Blue + + + + +
        +
        + + Yellow + + + + +
        +
        + + Green + + + + +
        +
        +
        +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        +         +         + +

        + Form Variant +

        +

        + Apply the + + listbox-button--form + + ${" "}modifier to create a listbox button inside a form matching other form controls. +

        +

        + Additionally, to allow the component to send the value from a selected option in a form submission, there needs to be custom${" "} + + js + + to populate the + + select.listbox__native + + ${" "}with the value upon selection. If using Skin outside of eBay UI, you will need to account for that independantly. +

        + +

        + NOTE: This component is a bit in transiton and will likely undergo some changes to integrate and simplify the variant implementation. Currently,${" "} + + .listbox-button--form + + ${" "}is used as a bit of a patch to create the form variant of the control. It adds some of the styles needed to do form variant styling while other styles are applied separately by${" "} + + .btn--form + + . In the future, these styles will be consolidated into + + .btn--form + + and will be + + .listbox-button--form + + will be phased out. +

        + +
        +
        + + +
        +
        +
        + + Red + + + + +
        +
        + + Blue + + + + +
        +
        + + Yellow + + + + +
        +
        + + Green + + + + +
        +
        +
        + +         +
        +
        + + + + +
        +
        +
        + Red + + + +
        +
        + Blue + + + +
        +
        + Yellow + + + +
        +
        + Green + + + +
        +
        +
        + +         +         +
        +export const metadata = { + component: "listbox-button", + "ds-component": { + name: "dropdown", + version: 2.2, + }, + submodules: ["button", "icon"], +}; diff --git a/src/routes/_index/component/listbox/+page.marko b/src/routes/_index/component/listbox/+page.marko new file mode 100644 index 000000000..45329f452 --- /dev/null +++ b/src/routes/_index/component/listbox/+page.marko @@ -0,0 +1,324 @@ +
        + + +

        + A listbox is intended for use as a custom, non-form based implementation of the native HTML select element. +

        + +

        + Unselected Listbox +

        +

        + By default, no option is selected until interacting with the widget. This matches the behaviour of a native HTML select element. +

        + +
        +
        +
        +
        +
        + + Option 1 + + + + +
        +
        + + Option 2 + + + + +
        +
        + + Option 3 + + + + +
        +
        + + Option 4 + + + + +
        +
        +
        +
        +
        + + + +
        +
        + Option 1 + + + +
        +
        + Option 2 + + + +
        +
        + Option 3 + + + +
        +
        + Option 4 + + + +
        +
        +         +         + +

        + Selected Listbox +

        +

        + An initial selection can be specified by applying the + + aria-selected + + state to a single option. +

        + +
        +
        +
        +
        +
        + + Option 1 + + + + +
        +
        + + Option 2 + + + + +
        +
        + + Option 3 + + + + +
        +
        +
        +
        +
        + + +
        +
        +
        + Option 1 + + + +
        +
        + Option 2 + + + +
        +
        + Option 3 + + + +
        +
        +
        +         + +

        + Listbox with subtitles +

        +

        + You can add a subtitle to an option by adding a + + .listbox__description + + element. +

        + +
        +
        +
        +
        +
        + + Option 1 + + + + . + + More info about option 1 + + + + +
        +
        + + Option 2 + + + + . + + More info about option 1 + + + + +
        +
        + + Option 3 + + + + . + + More info about option 1 + + + + +
        +
        +
        +
        +
        + + +
        +
        +
        + Option 1 + + . + More info about option 1 + + + + +
        +
        + Option 2 + + . + More info about option 2 + + + + +
        +
        + Option 3 + + . + More info about option 3 + + + + +
        +
        +
        +         +
        +export const metadata = { + component: "listbox", + "ds-component": { + name: "dropdown", + version: 2.2, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/marketsans/+page.marko b/src/routes/_index/component/marketsans/+page.marko new file mode 100644 index 000000000..01e48ad39 --- /dev/null +++ b/src/routes/_index/component/marketsans/+page.marko @@ -0,0 +1,25 @@ +
        + + +

        Market Sans is an exclusive typeface developed specifically for eBay. This module downloads and installs the typeface directly from the eBay CDN servers. The typeface can then be referenced via the 'Market Sans' font-family name.

        + +
        +
        + ABCDEFGHIJKLMNOPQRSTUVWXYZ
        + abcdefghijklmnopqrstuvwxyz +
        +
        + + + + +

        TIP: The Market Sans font-family, and all fallbacks, can also be applied using the Less variable @font-family-market-sans.

        +
        +export const metadata = { + component: "marketsans", + version: "1.0", +}; diff --git a/src/routes/_index/component/menu-button/+page.marko b/src/routes/_index/component/menu-button/+page.marko new file mode 100644 index 000000000..905ef12db --- /dev/null +++ b/src/routes/_index/component/menu-button/+page.marko @@ -0,0 +1,1070 @@ + +export const metadata = { + component: "menu-button", + "ds-component": { + name: "dropdown", + version: 2.3, + }, + submodules: ["button", "icon", "menu"], +}; diff --git a/src/routes/_index/component/menu/+page.marko b/src/routes/_index/component/menu/+page.marko new file mode 100644 index 000000000..32ecc6334 --- /dev/null +++ b/src/routes/_index/component/menu/+page.marko @@ -0,0 +1,589 @@ + +export const metadata = { + component: "menu", + "ds-component": { + name: "dropdown", + version: 2.3, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/page-grid/+page.marko b/src/routes/_index/component/page-grid/+page.marko new file mode 100644 index 000000000..0b3312342 --- /dev/null +++ b/src/routes/_index/component/page-grid/+page.marko @@ -0,0 +1,274 @@ +
        + +

        + The page grid module establishes the rows, columns and areas onto which child elements can be placed. The page grid is fully responsive. +

        +

        + Setting up a responsive page grid requires two key elements: a container element, and the grid element itself. +

        +

        + The container element takes care of positioning the grid in relation to the page (typically center-justified) and adds outer margins. +

        +

        + The grid element creates the actual columns (and gutters); eight columns for small viewports, sixteen for large. +

        + + +
        +
        + +
        +
        +         + +

        + Any content that is + off-grid + ${" "}, a full bleed banner for example, should be placed outside of these two elements. +

        +

        + Grid areas are definable with + + CSS Grid syntax + + . +

        + +

        Responsive Methodology

        +

        + When working with responsive web pages, the mindset should always be mobile-first. This means that your default styles (outside of media queries) should be targeting phones - the smallest of screens. As such, there is no need to have a minimum threshold by wrapping mobile styles inside a media query. +

        +

        + Though our minimum screen width support starts at + + 320px + + ${" "}, in theory this means that default styles will support devices much narrower than that since we don't set a minimum. The${" "} + + 320px + + is, at best, an implied breakpoint. +

        +

        + Subsequent media queries should increase in screen width and alter the UI styling additively avoiding style declaration duplications when possible. The following${" "} + + CSS + + shows the grid layout of the Skin website itself. +

        + + + +

        + You can see that for small screens, our top-level landmark elements simply span the full width of the grid. For large screens, things are a little more interesting, and we specify exactly how many rows and columns each landmark should occupy on the grid. +

        + +

        Here is the corresponding HTML.

        + + + +
        + +
        +
        +
        + +
        + +
        +
        + +
        +
        +
        + +         + +

        + You can see how it looks on this page by enabling our + + debug mode + + , which gives a quick visual indication of the grid columns. +

        + +

        + Page Grid LESS/CSS Properties +

        +

        + We've set up + + CSS + + properties and + + LESS + + ${" "}constants to provide developers with easy reference for responsive adjustments of UIs. The${" "} + + CSS + + ${" "}properties allow for customization of page grid for UIs that require it, but${" "} + + please use them sparingly and be mindful of the impact those overrides can have + + . +

        + +
        +
        + + + +
        +
        +

        + The + + CSS + + properties to allow for customization +

        +

        + These properties allow for costumization of page grid for UIs that require it, but please${" "} + + use them sparingly and be mindful of the impact those overrides can have + + . +

        +
        +
        + + + +

        + Additionally, we've set up + + LESS + + ${" "}constants for easier reference of the current breakpoints as well as some other dimension/spacing values. +

        + +
        +
        + + + +
        +
        +

        + Please do NOT overwrite these! +

        +

        + They are meant to be consumed ONLY as constants for read-only purposes as references. +

        +
        +
        + + + +

        + Subgrids +

        +

        + Subgrids allow you to create alignment of child elements on the same grid as page grid. Currently, subgrid only has partial support (with and without${" "} + + CSS Subgrid + + ${" "}support), but fallbacks allow for a seamless implementation. You will need to add a bit of${" "} + + CSS + + on your implementation side to accomplish this. +

        + +

        + Firstly, you will need to add a class of + + page-grid__subgrid + + to the internal subgrid: +

        + +
        +
        +
        + +
        +
        +
        +

        Featured Post 1

        +

        + This is a wider card with supporting text below as a natural lead-in to additional content. +

        +
        +
        + Thumbnail +
        +
        +
        +
        +         + +

        + Additionally, you will need to set up the corresponding subgrid + + CSS + + ${" "}as such to allow for support of subgrids in browsers that do not yet have support: +

        + + + +

        + Page Grid Guide +

        +

        + To see how the page grid system (engine) works in conjunction with various types of implementations (templates), check out the page grid guide that includes various examples. +

        + Page Grid Use Guide + +
        +export const metadata = { + component: "page-grid", + "ds-component": { + version: "1.0.0", + }, +}; diff --git a/src/routes/_index/component/page-notice/+page.marko b/src/routes/_index/component/page-notice/+page.marko new file mode 100644 index 000000000..4094e1ba6 --- /dev/null +++ b/src/routes/_index/component/page-notice/+page.marko @@ -0,0 +1,296 @@ +
        + + +

        + A page notice appears prominently at the top of the page, for high priority use cases, conveying the next course of action for a task or flow. +

        +

        + To aid discoverabilty for assistive technology, each page notice is a labelled landmark region with a level-2 heading. +

        +

        + A page notice can have a status of general (default), confirmation, attention or information. +

        + +
        +
        +
        +
        +

        + We've updated the look and feel of this page. Customize anytime in settings. +

        +
        +
        +
        +
        + + + +
        +
        +

        + You have opted into eBay Pay and will now get paid directly. +

        +
        +
        + + Dismiss + +
        +
        +
        +
        + + + +
        +
        +

        + Your selling account has been deactivated. +

        +
        +
        + +
        +
        +
        +
        + + + +
        +
        +

        + Opt into eBay payments before Jan 12th to pay no selling fees. +

        +
        +
        + + Opt in + +
        +
        +
        +
        + +
        +
        +

        We've updated the look and feel of this page. Customize anytime in settings.

        +
        +
        + +
        +
        + + + +
        +
        +

        You have opted into eBay Pay and will now get paid directly.

        +
        +
        + Dismiss +
        +
        + +
        +
        + + + +
        +
        +

        Your selling account has been deactivated.

        +
        +
        + +
        +
        + +
        +
        + + + +
        +
        +

        Opt into eBay payments before Jan 12th to pay no selling fees.

        +
        +
        + Opt in +
        +
        +         + +

        + Dismissable Page Notice With Title +

        +
        +
        + + + +
        +
        +

        + Notice Title +

        +

        + Opt into eBay payments before Jan 12th to pay no selling fees. +

        +
        +

        + + Opt in + +

        +
        + +
        +
        + + +

        Dismissable Page Notice With Title

        +
        +
        + + + +
        +
        +

        Notice Title

        +

        Opt into eBay payments before Jan 12th to pay no selling fees.

        +
        +

        Opt in

        +
        + +
        +
        +         + +

        + Form Error Page Notice +

        + +
        +
        + + + +
        +
        +

        + We found problems with your form. +

        +

        + + Error 1 + + , + + Error 2 + + , + + Error 3 + + . +

        +
        +
        + + +
        +
        + + + +
        +
        +

        We found problems with your form.

        +

        Error 1, Error 2, Error 3.

        +
        +
        +         +
        +export const metadata = { + component: "page-notice", + "ds-component": { + name: "alert-notice", + version: 3, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/pagination/+page.marko b/src/routes/_index/component/pagination/+page.marko new file mode 100644 index 000000000..4c40112e7 --- /dev/null +++ b/src/routes/_index/component/pagination/+page.marko @@ -0,0 +1,793 @@ + +export const metadata = { + component: "pagination", + "ds-component": { + name: "pagination", + version: 2, + }, + submodules: ["icon-link"], +}; diff --git a/src/routes/_index/component/panel-dialog/+page.marko b/src/routes/_index/component/panel-dialog/+page.marko new file mode 100644 index 000000000..0ec638c9c --- /dev/null +++ b/src/routes/_index/component/panel-dialog/+page.marko @@ -0,0 +1,427 @@ +
        + + +

        + Panel dialogs are modal and require a close button. They fill the entire y-axis of the screen and a portion of the x-axis. +

        +

        + The dialog must remain in a + + hidden + + state for all users and devices until opened. +

        + +
        +
        + + +
        +
        + + + + + + + +
        +
        + + +
        +
        + + + + + +

        + End Panel +

        +

        + Apply the + + panel-dialog__window--end + + modifier to display the panel at the end of the x-axis. +

        +

        End panels typically contain an additional CTA button.

        + +
        +
        + + +
        +
        + + + + + +

        + Sliding Panel +

        +

        + Panels can slide in and out, using the + + dialog__window--slide + + modifier. +

        +

        + The slide transition duration is 32ms. An accompanying + + dialog--mask-fade-slow + + modifier on the + + panel-dialog + + ${" "}should also be applied. This slower fade matches the 32ms of the slide transition. +

        + +
        +
        + + + + + +
        +
        + + + + +
        +export const metadata = { + component: "panel-dialog", + "ds-component": { + name: "panel", + version: 2, + }, + submodules: ["button", "icon-button"], +}; diff --git a/src/routes/_index/component/phone-input/+page.marko b/src/routes/_index/component/phone-input/+page.marko new file mode 100644 index 000000000..631e1bb9d --- /dev/null +++ b/src/routes/_index/component/phone-input/+page.marko @@ -0,0 +1,1665 @@ +
        + + +

        + The phone input pattern is a progressive enhancement of a textbox that allows users to select the country associated with their phone number. +

        + +

        Default Phone input

        +

        + Use the + + phone-input + + ${" "}class to create the default phone input. The phone input consists of a listbox button and a textbox with${" "} + + type=tel + + ${" "}. The listbox button is used to select the country code and the textbox is used to enter the local phone number. +

        +
        +
        + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + Saint Helena, Ascension and Tristan da Cunha + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +         + +

        With Group Label

        +

        + Use ARIA to provide a grouping role, similar to fieldset and legend, for more flexibility when using${" "} + + field + + classes. For label inline usage, please see the + + field module + + . +

        +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +         +
        +
        + + + + + + + +
        +
        +
        + + + + Albania + (+355) + + +
        + ... +
        + + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +         +         + +

        Large Phone input

        +

        + Use the + + phone-input--large + + modifier to increase the size of the phone input. Also, use + + btn--large, btn--large-fixed-height + + and + + textbox--large + + for the button and textbox respectively. +

        +
        +
        + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        + ... +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +         + +

        Readonly Phone input

        +

        + Use the + + phone-input--readonly + + ${" "}modifier to make the control readonly. The listbox button is disabled and${" "} + + readonly + + ${" "}attribute is added on the textbox to prevent any modification of its value. +

        +
        +
        + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        + ... +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +         + +

        Disabled Phone Input

        +

        + Use the + + phone-input--disabled + + modifier to turn on the disabled state. Besides modifier, + + disabled + + ${" "}attribute on both the listbox button and textbox input to completely disable the phone input. +

        +
        +
        + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        + ... +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +         + +

        Error Phone Input

        +

        + Using the + + listbox-button--error + + modifier, turns on the error state to the listbox button and + + aria-invalid="true" + + to the textbox. +

        +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +
        + + There was an error +
        +         +
        +
        + + + + + + + +
        +
        +
        + + + + Albania + (+355) + + +
        + ... +
        + + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +
        + + There was an error +
        +         +         + +

        Fluid Phone input

        +

        + Using the + + phone-input--fluid + + ${" "}modifier makes the component fluid and expands it to the width of its container. +

        +
        +
        + + + +
        +
        +
        + + + Albania + (+355) + + +
        +
        + + + India + (+91) + + +
        +
        + + + + Saint Helena, Ascension and Tristan da Cunha + + (+290) + + +
        +
        + + + United Kingdom + (+44) + + +
        +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + + +1 + + + +         +
        +
        + + + + + +
        +
        +
        + + + Albania + (+355) + + +
        + ... +
        + + + United States of America + (+1) + + +
        +
        +
        +         + + +1 + + +         +         +
        +export const metadata = { + component: "phone-input", + "ds-component": { + name: "phone-number", + version: 4, + }, +}; diff --git a/src/routes/_index/component/progress-bar-expressive/+page.marko b/src/routes/_index/component/progress-bar-expressive/+page.marko new file mode 100644 index 000000000..7a6ee9c7d --- /dev/null +++ b/src/routes/_index/component/progress-bar-expressive/+page.marko @@ -0,0 +1,436 @@ +
        + + +

        + The expressive progress bar can replace our traditional spinner to feel faster during periods of longer loading. To portray responsive and quicker loads, the expressive loader's design uses visual momentum to indicate progression across refreshing, page loading and user actions. +

        + +

        + This pattern consists of an animated progress bar in various colors and an optional set of messages that are cycled into view. These messages render in an element with${" "} + + role="status" + + , which announces new content to assistive technology. The live examples that follow use${" "} + + aria-live="off" + + ${" "}to prevent the status element from proactively announcing new content. This is only for demo purposes, so that this documentation page does not overwhelm the viewer with example status updates. The${" "} + + aria-live + + override should not be included in implementations of this pattern. +

        + +

        + The expressive progress bar also renders different experiences depending on the${" "} + + prefers-reduced-motion + + ${" "}media query. Toggle your reduced motion settings to view examples with the default behavior and reduced motion behavior. +

        + +

        + Default Expressive Progress Bar +

        + +

        + The base expressive loader consists of a progressbar with 12 lines of varying widths. Each line has a width of 10% - 40% of its container, with each set of four lines adding up to 100% width. You can use JavaScript to randomly generate the line widths, though it's not required. +

        + +

        + In the default behavior, lines scale up from 0% to their defined width and move horizontally across the screen. When the user prefers reduced motion, the lines still animate. However, instead of growing from 0% to their defined width, they stay a fixed size and scroll more slowly across the screen. +

        + +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +         + +

        + Expressive Progress Bar with Single Message +

        +

        + If there is only one message, add the + + progress-bar-expressive__message--in + + class to its status element to animate it in. +

        + +
        +
        +
        +
        +
        + Hang tight. +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        + + +
        +
        +
        + Hang tight. +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +         + +

        + Expressive Progress Bar with Multiple Messages +

        +

        + The following examples demonstrate cycling through messages using JavaScript. Note that JavaScript is not bundled with Skin, so you will need to write your own${" "} + + js + + ${" "}implementation of this pattern. We have outlined the steps below so you can recreate them in your JavaScript framework of choice. +

        + +

        Default behavior

        +

        + To cycle a message into view in the default mode: +

          +
        1. + Animate in the message: +
            +
          1. + Put the message content in the aria-hidden element with class${" "} + + progress-bar-expressive__message + + . This element is used just for the visual message animation; it is not read to screen readers. +
            2. +
          2. + Add the + + progress-bar-expressive__message--in + + class to animate that message into view. +
            3. +
          +
          2. +
        2. + After the message animates in: +
            +
          1. + Put the message content in the status element with class${" "} + + progress-bar-expressive__message + + . This will read the message aloud to screen reader users. +
            2. +
          2. + Remove the + + progress-bar-expressive__message--in + + class from the aria-hidden element. +
            3. +
          +
          3. +
        3. + After a fixed amount of time, add the + + expressive_loader__message--out + + ${" "}class to the current message to animate it out of view. This can happen concurrently with the next message animating in. +
          4. +
        +

        + +

        Reduced motion behavior

        +

        + When + + @media (prefers-reduced-motion: reduce) + + , there is no transition state between messages, so the aria-hidden message is not needed. To fade in the first message, add the${" "} + + progress-bar-expressive__message--initial + + class to the status element. For all subsequent messages, remove the + + progress-bar-expressive__message--initial + + class and simply update the content in the status element. +

        + +
        +
        +
        +
        + +
        + Hang tight. +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        + + +
        +
        + +
        + Hang tight. +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +         + +

        + Medium text +

        +

        + By default, the expressive progress bar displays with large text. For smaller text, apply the${" "} + + progress-bar-expressive--medium + + class to the message container. +

        + +
        +
        +
        +
        + +
        + Hang tight. +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        + + +
        +
        + +
        + Hang tight. +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        +         +
        +export const metadata = { + component: "progress-bar-expressive", + "ds-component": { + name: "loading-expressive", + version: 1.1, + }, +}; diff --git a/src/routes/_index/component/progress-bar/+page.marko b/src/routes/_index/component/progress-bar/+page.marko new file mode 100644 index 000000000..5257e8ff0 --- /dev/null +++ b/src/routes/_index/component/progress-bar/+page.marko @@ -0,0 +1,137 @@ +
        + + +

        + The progress bar gives an immediate, real-time visualisation of the current task completion status. +

        + +

        + Initial State +

        +

        A value of 0 reflects an initial state, with zero progress.

        + +
        +
        + + 0% + +
        +
        + + +0% + + +

        + Loading State +

        +

        Any value between 0 and 100 reflects a loading state.

        + +
        +
        + + 50% + +
        +
        + + +50% + + +

        + Completed State +

        +

        A value of 100 reflects a completed state.

        + +
        +
        + + 100% + +
        +
        + + +100% + + +

        + Fluid Progress Bar +

        + +

        + To fill the entire width of the container, use the + + progress-bar--fluid + + modifier. +

        + +
        +
        + + 50% + +
        +
        + + +50% + + +

        + Animated Progress Bar +

        +

        + Use the buttons below to see an example of the progress bar value being animated. +

        + +
        +
        + + 0% + +
        + + +
        +
        +
        +
        +export const metadata = { + component: "progress-bar", + "ds-component": { + name: "progress-bar", + version: 3.1, + }, +}; diff --git a/src/routes/_index/component/progress-spinner/+page.marko b/src/routes/_index/component/progress-spinner/+page.marko new file mode 100644 index 000000000..199d7c14e --- /dev/null +++ b/src/routes/_index/component/progress-spinner/+page.marko @@ -0,0 +1,109 @@ +
        + + +

        + A progress-spinner animation is used to convey a busy or loading state. +

        +

        + A progress-spinner is considered a critical graphic, therefore an + + img + + role and + + aria-label + + property are required. +

        + +
        +
        + +
        +
        + + + + +

        Small Progress Spinner

        +

        + Use the + + progress-spinner--small + + modifier class to create a small progress spinner. +

        + +
        +
        + +
        +
        + + + + +

        Large Progress Spinner

        +

        + Use the + + progress-spinner--large + + modifier class to create a large progress spinner. +

        + +
        +
        + +
        +
        + + + +
        +export const metadata = { + component: "progress-spinner", + "ds-component": { + name: "progress-spinner", + version: 3.1, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/progress-stepper/+page.marko b/src/routes/_index/component/progress-stepper/+page.marko new file mode 100644 index 000000000..e1de1dc34 --- /dev/null +++ b/src/routes/_index/component/progress-stepper/+page.marko @@ -0,0 +1,577 @@ +
        + + +

        Steppers portray progress through a sequence of steps.

        + +

        + Default Progress Stepper +

        +

        + The default stepper has a horizontal layout. The stepper fills all available space and evenly distributes its steps. +

        +

        + Use the + + aria-current + attribute to denote the current step in the list. All items after the current will be shown in progress. +

        +

        + The default state for each item will be the complete or active state until it reaches + + [aria-current] + + element. Then the rest will be upcoming state. You can also use + + .progress-stepper__items--upcoming + + on the + + progress-stepper__items + + container to show upcoming state for all items. +

        + +
        +
        +
        +

        + Shipment Progress +

        +
        +
        + + + + + + +
        Started
        +

        July 3rd

        +         +
        + +
        + + + + + + +
        Shipped
        +

        July 4th

        +         +
        + +
        + + + + + + +
        Transit
        +

        July 5th

        +         +
        + +
        + + + + + + +
        Delivered
        +

        July 6th

        +         +
        +
        +
        +
        +
        + +
        +

        Shipment Progress

        +
        +
        + + + + + + +

        Started

        +

        July 3rd

        +         +
        + +
        + + + + + + +

        Shipped

        +

        July 4th

        +         +
        + +
        + + + + + + +

        Transit

        +

        July 5th

        +         +
        + +
        + + + + + + +

        Delivered

        +

        July 6th

        +         +
        +
        +
        +         + +

        The stepper can be sized and aligned using standard CSS:

        + +
        +
        +
        +

        + Shipment Progress +

        +
        +
        + + + + + + +
        Started
        +

        July 3rd

        +         +
        + +
        + + + + + + +
        Shipped
        +

        July 4th

        +         +
        + +
        + + + + + + +
        Transit
        +

        July 5th

        +         +
        + +
        + + + + + + +
        Delivered
        +

        July 6th

        +         +
        +
        +
        +
        +
        + + +
        +

        Shipment Progress

        +
        +
        + + + + + + +

        Started

        +

        July 3rd

        +         +
        + +
        + + + + + + +

        Shipped

        +

        July 4th

        +         +
        + +
        + + + + + + +

        Transit

        +

        July 5th

        +         +
        + +
        + + + + + + +

        Delivered

        +

        July 6th

        +         +
        +
        +
        +         + +

        + Vertical Progress Stepper +

        +

        + Use the + progress-stepper--vertical + modifier for a stepper with vertical layout. +

        + +
        +
        +
        +
        +
        + + + + + + +
        Order placed
        +

        New Mens Addidas Ultra Boost

        +         +
        + +
        + + + + + + +
        Preparing for shipment
        +

        We will notify you once it ships.

        +         +
        + +
        + + + + + + + + +
        Delivered
        +

        Guaranteed Wednesday, October 09.

        +         +
        +
        +
        +
        +
        + + +
        +
        +
        + + + + + + +

        Order placed

        +

        New Mens Addidas Ultra Boost

        +         +
        + +
        + + + + + + +

        Preparing for shipment

        +

        We will notify you once it ships.

        +         +
        + +
        + + + + + + + + +

        Delivered

        +

        Guaranteed Wednesday, October 09.

        +         +
        +
        +
        +         + +
        +
        +
        +

        + Shipment Progress +

        +
        +
        + + + + + + +
        Started
        +

        July 3rd

        +         +
        + +
        + + + + + + +
        Blocked
        +

        July 5th

        +         +
        + +
        + + + + + + +
        Delivery
        +

        July 6th

        +         +
        +
        +
        +
        +
        + + +
        +

        Shipment Progress

        +
        +
        + + + + + + +

        Started

        +

        July 3rd

        +         +
        + +
        + + + + + + +

        Blocked

        +

        July 5th

        +         +
        + +
        + + + + + + +

        Delivered

        +

        July 6th

        +         +
        +
        +
        +         +
        +export const metadata = { + component: "progress-stepper", + "ds-component": { + name: "progress-stepper", + version: 4, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/radio/+page.marko b/src/routes/_index/component/radio/+page.marko new file mode 100644 index 000000000..4a960ba4c --- /dev/null +++ b/src/routes/_index/component/radio/+page.marko @@ -0,0 +1,579 @@ +
        + + +

        + A radio button is a form control that allows a single selection from a group of choices. +

        +

        + The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button. +

        +

        + The radio is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it! +

        + +

        Default Radio

        +

        + Use the + + radio + + base class to create a styled radio. +

        +

        + NOTE: + ${" "}Skin uses SVG to give a custom radio button appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default radio button in a non-CSS state. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + Large Radio +

        +

        + For a larger radio button, use the + + radio--large + + modifier plus the + + #icon-radio-unchecked-24 + + and + + #icon-radio-checked-24 + + icons. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + Disabled Radio +

        +

        + Use the + + disabled + + attribute to disable any radio input. +

        +
        +
        + + + + +
        +
        + + + + + + + + +

        + Grouped Radio +

        +

        + A group of radios enforces single-select (unlike a group of checkboxes which allows multi-select). +

        +

        + A + + fieldset + + and + + legend + + are + required + in order to create the correct grouping semantics. Note that the Skin + + global + + module removes the default fieldset border and padding. +

        +

        + The following example uses the + + field module + + for simple layout of radio button fields and labels. +

        +
        +
        +
        + Choose an Option + + + + + + + + + + + + + + + + + + + + + +
        +
        +
        + + +
        + Choose an Option + + + + + + + + + + + + + + + + + + + + + +
        +         + +

        + TIP + : For large radios, wrap each label and control inside of a + + field__group + + element to maintain vertical alignment. +

        +

        + To stack radio buttons vertically instead of side-by-side, simply replace the${" "} + + span + + wrapper with a + + div + + wrapper. +

        + +
        +
        +
        + Choose an Option +
        + + + + + +
        +
        + + + + + +
        +
        + + + + + +
        +
        +
        +
        + + +
        + Choose an Option +
        + + + + + +
        +
        + + + + + +
        +
        + + + + + +
        +
        +         +
        +export const metadata = { + component: "radio-button", + "ds-component": { + name: "radio-button", + version: 2, + }, +}; diff --git a/src/routes/_index/component/section-notice/+page.marko b/src/routes/_index/component/section-notice/+page.marko new file mode 100644 index 000000000..c73819d7b --- /dev/null +++ b/src/routes/_index/component/section-notice/+page.marko @@ -0,0 +1,388 @@ +
        + + +

        + A section notice conveys either system status and feedback to users about their actions and options or, for${" "} + educational + ${" "}section notices, contextually educates users about programs, features and opportunities. +

        +

        + To aid discoverabilty for assistive technology, each section notice is a labelled landmark region. +

        + +
        +
        +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

        +
        +
        +
        +
        + + +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +
        +         + +

        + Status Section Notice +

        +

        + A status-based section notice has a 16x16 icon representing confirmation, attention or information. +

        + +
        +
        +
        +
        + + + +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

        +
        +
        + +
        +
        + + + +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

        +
        +
        + +
        +
        + + + +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

        +
        +
        +
        +
        + + +
        +
        + + + +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +
        + +
        +
        + + + +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +
        + +
        +
        + + + +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +
        +         + +

        + Titled Section Notice +

        +

        Use a heading element to create a titled section notice.

        + +
        +
        +
        +
        + + + +
        +
        +

        + Notification title +

        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

        +
        +
        +
        +
        + + +
        +
        + + + +
        +
        +

        Notification title

        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +
        +         + +

        + Dismissable Section Notice +

        +

        + A close button can be placed in a + + section-notice__footer + + element. +

        + +
        +
        +
        +
        + + + +
        +
        +

        + Notification title +

        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

        +
        +
        + +
        +
        +
        +
        + + +
        +
        + + + +
        +
        +

        Notification title

        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +
        + +
        +
        +         + +

        + Actionable Section Notice +

        +

        + Link or button actions can be placed in a + + section-notice__cta + + element. +

        +
        +
        + + + +
        +
        +

        + Notification title +

        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +

        + + Action + +

        +
        + +
        +
        + + +
        +
        + + + +
        +
        +

        Notification title

        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        +
        +

        + Action +

        +
        + +
        +
        +         +
        +export const metadata = { + component: "section-notice", + "ds-component": { + name: "alert-notice", + version: 3, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/section-title/+page.marko b/src/routes/_index/component/section-title/+page.marko new file mode 100644 index 000000000..c44e41bf5 --- /dev/null +++ b/src/routes/_index/component/section-title/+page.marko @@ -0,0 +1,234 @@ +
        + + +

        Section titles function as identifiers for groups of elements.

        + +

        + Static Section Title +

        +

        + The standard, static section title is designed to support a single line on desktop and wrap only when displayed on narrow screens such as mWeb or native. +

        + +
        +
        +
        +
        +

        + Static Section Title +

        +
        +
        +
        +
        + +
        +
        +

        Static Section Title

        +
        +
        +         + +

        + Subtitled Section Title +

        +

        + The subtitle is designed to support any additional information. This text should be concise and fit onto a single line. +

        + +
        +
        +
        +
        +

        + Subtitled Section Title +

        + + Plus, guaranteed best prices. + +
        +
        +
        +
        + +
        +
        +

        Subtitled Section Title

        + Plus, guaranteed best prices. +
        +
        +         + + +

        + An arrow icon gives visual affordance that the title is a link. A linked section title can also have a subtitle. +

        + +
        +
        +
        +
        +

        + Linked Section Title +

        +
        + + See all + +
        +
        +
        + +
        +
        +

        Linked Section Title

        +
        + Link +
        +         + +

        + Section Title with Favorite +

        + +
        +
        +
        +
        +

        + Section Title with Favorite +

        +
        +
        + + + +
        +
        +
        +
        + +
        +
        +

        Section Title with Favorite

        +
        +
        + + + +
        +
        +         + +

        + Overflow Section Title +

        +

        + The optional overflow control can house less frequently accessed controls, (e.g., personalization feedback). +

        + +
        +
        +
        +
        +

        + Overflow Section Title +

        +
        +
        + + +
        + +
        +         +
        +
        +
        +
        + +
        +
        +

        Overflow Section Title

        +
        +
        + + +
        + +
        +         +
        +
        +         +
        +export const metadata = { + component: "section-title", + "ds-component": { + version: 4, + }, +}; diff --git a/src/routes/_index/component/segmented-buttons/+page.marko b/src/routes/_index/component/segmented-buttons/+page.marko new file mode 100644 index 000000000..0ef825df0 --- /dev/null +++ b/src/routes/_index/component/segmented-buttons/+page.marko @@ -0,0 +1,277 @@ +
        + + +

        + Segmented Buttons are non-form toggle buttons used in certain cases. For detailed requirements and when to use these over tabs, please visit the${" "} + + eBay MIND Pattern for Segmented Buttons + + . +

        +

        + The selected toggle button is toggled by + + aria-current="true" + + attribute. +

        +

        + NOTE: + ${" "}JavaScript is required to handle segmented buttons currently selected button. +

        +

        + +

        + Default Segmented Buttons +

        +

        + The default segmented button has a 40px height that matches other buttons. +

        +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        +
          +
          • +
          • +
          • +
        +
        +         + +

        + Segmented Buttons - large +

        +

        + Use the + + segmented-buttons--large + + ${" "}modifier to create large segemented buttons. These have a 48px height to match large buttons. +

        +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        +
          +
          • +
          • +
          • +
        +
        +         + +

        + Segmented buttons - with icons +

        +

        + Any 24x24 + + icon + + can be added inside of a + + segmented-buttons__button-cell + + block. +

        +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        + Segmented buttons - in fixed width container +

        +
        +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        +
        +
          +
          • +
          • +
          • +
          • +
        +
        +
        +         +
        +export const metadata = { + component: "segmented-buttons", + "ds-component": { + name: "segmented-button", + version: 1, + }, +}; diff --git a/src/routes/_index/component/select/+page.marko b/src/routes/_index/component/select/+page.marko new file mode 100644 index 000000000..91171ea8e --- /dev/null +++ b/src/routes/_index/component/select/+page.marko @@ -0,0 +1,371 @@ +
        + + +

        + A select allows the user to select one item from a list of options. A select is exactly the same as a normal HTML select (because it is one), but Skin's version uses a wrapper to style it. +

        +

        + The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a${" "} + + menu + + maybe a better choice. +

        +

        + IMPORTANT: + ${" "}The examples below show the select in isolation, without any label. Please see the${" "} + + field + + ${" "}module for details on labeling controls. Remember: every select requires a label! +

        + +

        + Default select +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + Disabled select +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + Selected option +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + Unselected Select +

        +

        + If no suitable default value exists, the first option in the list can be used as a prompt and set to${" "} + + disabled + + & + + selected + + . +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + Fluid select +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + Borderless select +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + Large Select +

        +

        + For a large select, apply the + + select--large + + modifier. +

        + +
        +
        + + + + +
        +
        + + + + + + + +
        +export const metadata = { + component: "select", + "ds-component": { + name: "dropdown", + version: 2.2, + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/signal/+page.marko b/src/routes/_index/component/signal/+page.marko new file mode 100644 index 000000000..25ce88266 --- /dev/null +++ b/src/routes/_index/component/signal/+page.marko @@ -0,0 +1,42 @@ +
        + + +

        + Signals are data-backed recommendations to help customers make more informed decisions. +

        +

        + There are four signal types, each with its own corresponding modifier class: trustworthy, recent, time-sensitive & neutral. +

        + +
        +
        + + Trustworthy + + + Recent + + + Time Sensitive + + + Neutral + +
        +
        + +Trustworthy +Recent +Time Sensitive +Neutral + +
        +export const metadata = { + component: "signal", + "ds-component": { + name: "signal", + version: 1, + }, +}; diff --git a/src/routes/_index/component/skeleton/+page.marko b/src/routes/_index/component/skeleton/+page.marko new file mode 100644 index 000000000..ff19fc463 --- /dev/null +++ b/src/routes/_index/component/skeleton/+page.marko @@ -0,0 +1,722 @@ +
        + +

        + @ebay/skin/skeleton + + BETA + +

        +

        + A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the${" "} + + progress spinner + + in many situations. +

        +

        + A skeleton is appropriate as a placeholder for content in cases where a service or action may be slow to resolve. +

        +

        + A skeleton is NOT appropriate as a placeholder for content if rendering that content or placeholder would cause unexpected page layout shift (see below for more details). +

        + +
        +
        + + + +
        +
        +

        + Cumulative Layout Shift (CLS) +

        +

        + It is the developer's responsibility to ensure the + + CLS metric + + ${" "}of a page is not negatively impacted by the introduction of a skeleton placeholder;${" "} + + a poor CLS score will occur whenever content shifts unexpectedly + + . Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. Skeletons can help mask these problems${" "} + if + ${" "}they reserve the correct amount of physical space, but can compound the problem when they do not. +

        +
        +
        + +

        + The + Skeleton Use Guide + ${" "}illustrates various techniques for implementing skeletons across some common loading scenarios. +

        + +

        + Skeleton Types +

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SkeletonDefaultOn-SecondaryPurpleGreenBlue
        + + Avatar + + + + + + +
        + + Button + + + + + + +
        + + Textbox + + + + + + +
        + + Image + + + + + + +
        + + Text + + + + + + +
        + +

        + On large screens, skeleton loaders use a solid fill for background color; on small screens, a shimmer is applied. +

        +

        + The color can be changed to purple, green or blue by applying the appropriate modifier, e.g.${" "} + + skeleton--green + + . View the + + composite skeletons + + examples for further details. +

        + +

        + Avatar Skeleton +

        +

        + Use the + + skeleton__avatar + + class to create a skeleton placeholder for an avatar. +

        +
        +
        + +
        + + + + +

        + Button Skeleton +

        + +

        + Use the + + skeleton__button + + class to create a skeleton placeholder for the default button shape. +

        +
        +
        + +
        + + + + +

        + Use the + + small + + modifier to match the shape of a small button. +

        +
        +
        + +
        + + + + +

        + Use the + + large + + modifier to match the shape of a large button. +

        +
        +
        + +
        + + + + +

        + Textbox Skeleton +

        +

        + Use the + + skeleton__textbox + + class to create a skeleton placeholder for a textbox. +

        +
        +
        + +
        + + + + +

        + Image Skeleton +

        +

        + Use the + + skeleton__image + + class to create a skeleton placeholder for an image. +

        + +
        +
        + +
        + + + + +

        + Notice that the height and width must be set on the + + skeleton__image + + element. +

        + +
        +
        + +
        + + + + +

        + Text Block Skeleton +

        +

        + Use the + + skeleton__text + + class to create a skeleton for a single block of text. +

        +
        +
        + +
        + + + + +

        + Use the + + skeleton__text--large + + modifier to match the shape of a large block of text. +

        +
        +
        + +
        + + + + +

        + Use the + + skeleton__text--multiline + + mofifier to create a skeleton for two lines of text. +

        +
        +
        + +
        + + + + +

        + Composite Skeleton +

        +

        + Combinations of skeletons can form a custom placeholder for more complex content, such as a typical eCommerce item tile in the example below. +

        + +
        +
        + + + + + +

        + Here is a skeleton for a compact user profile. Notice that a + + div + + tag can be replaced with a + + span + + tag for inline-block layout of elements. +

        +
        +
        + +
        +
        + + + + +

        + Skeleton Variables + EXPERIMENTAL +

        +

        + The following custom properties (aka CSS Variables) are available for component-level overrides and other general theming purposes. +

        + +
          +
        • --skeleton-background
          • +
        +
        +export const metadata = { + component: "skeleton", + "ds-component": { + name: "loading-skeleton", + status: "beta", + version: 1, + }, +}; diff --git a/src/routes/_index/component/snackbar-dialog/+page.marko b/src/routes/_index/component/snackbar-dialog/+page.marko new file mode 100644 index 000000000..de9be11f4 --- /dev/null +++ b/src/routes/_index/component/snackbar-dialog/+page.marko @@ -0,0 +1,216 @@ +
        + + +

        + A snackbar is a non-modal dialog that appears in response to a lightweight user action. It dissapears automatically after a minimum of 6 seconds. +

        +

        + The display of the snackbar should be toggled using the + + hidden + + property. Please refer to the + + Dialog Transitions + + ${" "}section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the${" "} + + snackbar-dialog--transition + + ${" "}modifier class will opt into a transition that slides in on show, and fades out on hide. +

        + +

        + NOTE + : A toast is non-modal and therefore + should not + capture or trap keyboard focus when opened. +

        + +

        + Default Snackbar +

        +

        The default snackbar displays a short, non-interactive message.

        + +
        +
        + + +
        +
        + + + + +

        + Action Snackbar +

        +

        + A snackbar can contain a single shortcut action. Typically this is an "undo". +

        +

        + In order to give all users adequate time to find and reach the action, the snackbar DOM position must be placed closely after the users current location (i.e.${" "} + + document.activeElement + + ). This ensures a natual reading and keyboard order. In addition, an + + accesskey + + attribute allows quick access via the operating system's + + access keys + + . +

        + +
        +
        + + +
        +
        + + + + +

        + Stacked Snackbar +

        +

        + The content and action can be stacked vertically by using the + + snackbar-dialog__window--column + + modifier. +

        + +
        +
        + + +
        +
        + + + +
        +export const metadata = { + component: "snackbar", + "ds-component": { + name: "snackbar", + version: 2, + }, + submodules: ["button"], +}; diff --git a/src/routes/_index/component/split-button/+page.marko b/src/routes/_index/component/split-button/+page.marko new file mode 100644 index 000000000..f1ff3cd40 --- /dev/null +++ b/src/routes/_index/component/split-button/+page.marko @@ -0,0 +1,368 @@ +
        + + +

        A split button is a button broken into two seperately actionable portions: a common action (a button) at the start, and supplemental actions (a menu button) at the end.

        +

        Split buttons are for actions only, and should not be used for site navigation.

        + +
        +
        + + + + +
        + +
        +         +         +
        +
        + + + + + +
        + +
        +         +         +         +

        Note the usage of btn--split-start to denote the start of a split button sequence, and btn--split-end to denote its end.

        + +

        Secondary Split Button

        +

        Use the secondary modifiers to create a secondary split button style.

        + +
        +
        + + + + +
        + +
        +         +         +
        +
        + + + + + +
        + +
        +         +         +         + +

        Tertiary Split Button

        +

        Use the tertiary modifiers to create a tertiary split button style.

        + +
        +
        + + + + +
        + +
        +         +         +
        +
        + + + + + +
        + +
        +         +         +         + +

        Fake Split Button Primary

        + +
        +
        + + Link + + +
        + +
        +         +         +
        +
        + + + link + + +
        + +
        +         +         +         +

        Fake Split Button Secondary

        + +
        +
        + + Link + + +
        + +
        +         +         +
        +
        + + + Link + + +
        + +
        +         +         +         + +

        Fake Split Button Tertiary

        + +
        +
        + + Link + + +
        + +
        +         +         +
        +
        + + + Link + + +
        + +
        +         +         +         + +
        +export const metadata = { + component: "split-button", + "ds-component": { + "name": "split-button", + "version": 1.6 + } +}; diff --git a/src/routes/_index/component/star-rating-select/+page.marko b/src/routes/_index/component/star-rating-select/+page.marko new file mode 100644 index 000000000..b586f093a --- /dev/null +++ b/src/routes/_index/component/star-rating-select/+page.marko @@ -0,0 +1,243 @@ +
        + + +

        Star rating select allows users to interact with and set a star rating.

        + +

        Star rating select uses radio buttons under the hood so even in the absence of CSS, its gracefully degradation should allow for full accessible interactivity and use.

        + +

        NOTE: JavaScript is required to handle the filled visual marking of all stars previous to the currently selected star rating.

        + +

        Star Rating Select with Visual Semantic Grouping

        +

        This instance of star rating select uses visible HTML fieldset and legend for semantic grouping.

        + +
        +
        +
        +
        + Rate this product + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        +
        +
        + + +
        +
        + Rate this product + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        +         + +

        Star Rating Select with Invisible ARIA Semantic Grouping

        +

        This instance of star rating select uses an invisible ARIA radio group for semantic grouping.

        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        +         + +
        +export const metadata = { + component: "star-rating-select", + component: "star-rating-select", + "ds-component": { + "name": "review-input", + "version": 1 + } +}; + + \ No newline at end of file diff --git a/src/routes/_index/component/star-rating/+page.marko b/src/routes/_index/component/star-rating/+page.marko new file mode 100644 index 000000000..3ba350dfd --- /dev/null +++ b/src/routes/_index/component/star-rating/+page.marko @@ -0,0 +1,160 @@ +$ const ratings = [ + "0", + "0-5", + "1", + "1-5", + "2", + "2-5", + "3", + "3-5", + "4", + "4-5", + "5", +]; + +
        + + +

        + This is a non-interactive, display-only star rating pattern. For an interactive user-selectable star rating selection pattern, please refer to${" "} + + Star Rating Select + + . +

        + +

        Method 1: Combined Stars

        +

        + This is the simplest method for displaying star rating. To have more flexibility over individual stars, consider using Method 2 - Independent Stars. +

        +

        Each non-interactive star-rating is available as an SVG symbol.

        + +
          + +
        • + ${rating} + +
          • + +
        + +

        + Below is the code example for how to use the "star-rating-2-5" symbol. Please refer to the${" "} + + icon section + + for full guidance on how to include and use SVG symbols. +

        + + + + + + + +

        Method 2: Independent Stars

        +

        + This is built using fine-grained pieces (individual stars) for optimal flexibility and for allowing potential independant star treatments (i.e. animations). +

        +

        +

          + +
        • + ${rating} + +
          • + +
        +

        + + + + +
        +export const metadata = { + component: "star-rating", + "ds-component": { + name: "review-rating", + version: 1, + }, +}; diff --git a/src/routes/_index/component/svg/+page.marko b/src/routes/_index/component/svg/+page.marko new file mode 100644 index 000000000..ee0c76cf6 --- /dev/null +++ b/src/routes/_index/component/svg/+page.marko @@ -0,0 +1,10 @@ +
        +

        @ebay/skin/svg

        +

        The SVG module imports an external SVG source containing all symbol definitions.

        +
        +export const metadata = { + component: "svg", + "ds-component": { + version: "1.0", + } +}; diff --git a/src/routes/_index/component/switch/+page.marko b/src/routes/_index/component/switch/+page.marko new file mode 100644 index 000000000..588fcdae9 --- /dev/null +++ b/src/routes/_index/component/switch/+page.marko @@ -0,0 +1,259 @@ +
        + + +

        + A switch behaves a bit like a checkbox - it can be on or off (i.e checked or unchecked). The key difference is that a switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload) rather than storing form data to be sent to the server. +

        +

        + Whereas checkboxes are often used to allow multi-selection from a group of choices, switches are more often used in isolation or as a series of unrelated options. +

        +

        + A switch requires the + + switch + + role and + + aria-checked + + attribute for assistive technology. +

        +

        + REMEMBER: + ${" "}every switch requires a visible, programmatic label to indicate its purpose. +

        + +

        + Default Switch +

        +

        + The default version of the switch requires JavaScript to maintain the + + aria-checked + + state when clicked. +

        +

        + The + + switch__control + + child element requires a + + tabindex + + value of 0 (zero) to be keyboard focusable. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + Disabled Switch +

        +

        + To disable a switch, apply the + + aria-disabled + + attribute. +

        +

        + The + + tabindex + + property must be set to -1 (negative one) to prevent keyboard focus. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + Checkbox Switch +

        +

        + This version of the switch uses a checkbox under the hood. It should be used if you require the switch to store data inside of a form. As mentioned above however, this is not the intended purpose of a switch. You may wish to consider using an actual checkbox instead. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + Disabled Checkbox Switch +

        +

        + To disable a checkbox switch, apply the + + disabled + + attribute. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + Custom Properties of Switch + EXPERIMENTAL +

        +

        + The following custom properties (aka CSS Variables) are available for system color-scheme appearance (i.e. light-mode & dark-mode) and other general theming purposes: +

        + +
          +
        • --switch-unchecked-background-color
          • +
        • --switch-checked-background-color
          • +
        • --switch-disabled-background-color
          • +
        • --switch-foreground-color
          • +
        • --switch-unchecked-hover-background-color
          • +
        • --switch-checked-hover-background-color
          • +
        + + + +
        +
        + + + + +
        +
        + + + + + + + +
        +export const metadata = { + component: "switch", + "ds-component": { + name: "switch", + version: 2.1, + }, +}; diff --git a/src/routes/_index/component/table/+page.marko b/src/routes/_index/component/table/+page.marko new file mode 100644 index 000000000..5108ed9ce --- /dev/null +++ b/src/routes/_index/component/table/+page.marko @@ -0,0 +1,4197 @@ +import tableSquarePic from "/src/routes/static/img/tb-square-pic.jpg"; +import tableProfilePic from "/src/routes/static/img/tb-profile-pic.jpg"; +import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; + +
        + + +

        + A table represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. +

        + +

        + To allow scrolling of the table via a keyboard interface, the root element must be added to the page's tab sequence. This in turn requires the root element to have an accessible role and label. +

        + +

        Basic Default Table

        +

        + A basic table is a static table with no additional features. +

        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Compact Density Table

        +

        + A compact density table is a table with reduced spacing to allow for more rows to be displayed in a smaller space. You can make tables more compact by adding the table--density-compact modifier class to module. +

        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Relaxed Density Table

        +

        + A relaxed density table is a table with increased spacing to allow for larger rows. You can make tables relaxed density by adding the table--density-relaxed modifier class to module. +

        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Table with a Frozen Header

        +

        + A table with a frozen header allows the header row to persist in a sticky manner while scrolling vertically through the table. You can make headers frozen by adding the table--frozen-header modifier class to module. +

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList CountList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + + + + +
        +
        + Option 1 + +
        +
        + Option 2 + +
        +
        + Option 3 + +
        +
        + +         +         		$287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + + + + +
        +
        + Option 1 + +
        +
        + Option 2 + +
        +
        + Option 3 + +
        +
        + +         +         		$89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + + + + +
        +
        + Option 1 + +
        +
        + Option 2 + +
        +
        + Option 3 + +
        +
        + +         +         		$499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + + + + +
        +
        + Option 1 + +
        +
        + Option 2 + +
        +
        + Option 3 + +
        +
        + +         +         		$499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + + + + +
        +
        + Option 1 + +
        +
        + Option 2 + +
        +
        + Option 3 + +
        +
        + +         +         		$519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Table with Constrained Height

        +

        + You may constrain the height of the table, which will constrain the table to a percentage of the viewport height as opposed to allowing the full table contents to be fully visible. This is typically used in a table with a frozen header. To do so, add a table--constrained-height modifier class to module. +

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        +
        +         		$89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Table with a Frozen Column

        +

        + You may freeze any one of the first three column so it is always present when scrolling by adding table--freeze-column-x modifier class to module, where x is the column you'd like to freeze. +

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        + Backorder +
        +
        +         		$499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Sortable Table

        +

        + A sortable table is a table that allows users to sort the data in the table by clicking on the column headers. You can make tables sortable by using sort buttons in <thead> > <th>. Additionally, for accessibility purposes, aria-sort="ascending" or aria-sort="descending" should be added respectively to the <th> to reflect the current sort order. +

        +

        + If using buttons to sort the table, the aria-pressed="true" attribute should be added to the button to indicate the current sort order. The aria-pressed attribute should be toggled between true and false when the button is clicked. +

        +

        + If using anchors to sort the table with a page refresh, you would forgo the pressed state and just do <a href="my-url">Seller...</a>. Additionally, you'd need to change the aria-sort attribute to match the sort order after the page refresh. +

        +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +         + +

        Table in Loading State

        + +

        + When a table is fetching data for sorting, filtering, or pagination, a loading state should be displayed to indicate that the table is in the process of loading. This can be achieved by adding the table--loading-state class to the .table element. +

        + +

        + Additionally, in the loading state, the module should be inaccessible to the user. This can be achieved by setting tabindex="-1" to the module container, and adding the inert attribute to the table inside the module. Since inert is not fully supported in older browsers, it is recommended to either use a polyfill or use JavaScript to disable all interactive elements inside the table when in loading state. Elements that support disabled should be disabled. Anchors should have their href attributes removed. +

        + +

        + Here are some other steps to manually ensure the module is inaccessible: +

          +
        • All interactive elements inside table should be forced to NOT be focusable.
          • +
        • The module container should be forced to be unscrollable.
          • +
        • The progress bar should be forced to gain focus.
          • +
        • All interactive elements inside the table should be disabled.
          • +
        +

        + +

        + The loading state should be displayed until the data is fully loaded. In addition to the loading state being set on the table, a progress bar expressive should be added to relay the loading state both visually and for screen readers. The live examples that follow use aria-live="off" to prevent the status element from proactively announcing new content. This is only for demo purposes, so that this documentation page does not overwhelm the viewer with example status updates. The aria-live override should not be included in implementations of this pattern. +

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        Nintendo +
        +
        + Nintendo SNES +
        +
        +
        + Nintendo SNES Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $89.8545 +
        + 00-10542-89507 +
        +
        200
        +         		5$18.95FREE4/11 - 4/15
        Microsoft +
        +
        + Microsoft XBOX 360 +
        +
        +
        + Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Backorder + $499.99345 +
        + 00-10542-89507 +
        +
        100
        +         		205$17.99FREE4/17 - 4/25
        Microsoft +
        +
        + Microsoft XBOX One +
        +
        +
        + Microsoft XBOX One Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Preparing + $499.99399 +
        + 00-10542-89507 +
        +
        100
        +         		407$27.99FREE4/9 - 4/11
        Sony +
        +
        + Sony Playstation 5 +
        +
        +
        + Sony Playstation 5 Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Restocking + $519.99205 +
        + 00-10542-89507 +
        +
        100
        +         		265$29.99FREE4/11 - 4/15
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        Nintendo +
        +
        + Nintendo Switch +
        +
        +
        + Nintendo Switch Brand New Gaming System with Four Controllers +
        +
        + SKU : A43BTR5678 • Quantity : 1 +
        +
        +
        +         		+ Ready to Ship + $287.96300 +
        +
        + 00-10542-89507 +
        +
        100
        +
        +         		95$17.99FREE4/1 - 4/5
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +         + +

        Table in Selection Mode

        + +

        + A table can be put into 'selection mode' by adding the class table--mode-selection to the component parent. This will make slight spacing accommodations for the layout. +

        + +

        + A table in selection mode allows users to select rows within a table. This is useful when users need to perform actions on selected rows. +

        + +

        + The first column of the table will contain a checkbox that allows users to select the row. The first row of the table will contain a checkbox that allows users to select all rows. The checkbox in the table header should have an aria-label of something like, "Select all rows" while all other checkboxes should have an aria-label of something like, "Select row". +

        + +

        + Each row should have one column that is its unique idenitifier. That column should typically be the first static column in the row. That column should be indicated using <th scope="row"> element, which affords various accessibility benefits. +

        + + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
        + + + + + NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
        + + + + + MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
        + + + + + MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
        + + + + + SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
        +
        +         + +

        Table with Actions

        + +

        + A table can have actions inside for performing various tasks for each row. +

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
        NintendoSwitch + + + + + +
        + + + Edit Listing + + + + + +
        +         		+ + $287.9630020795$17.99FREE4/1 - 4/5
        NintendoSNES + + + + + +
        + + + Edit Listing + + + + + +
        +         		+ + $89.8545175$18.95FREE4/11 - 4/15
        MicrosoftXBOX 360 + + + + + +
        + + + Edit Listing + + + + + +
        +         		+ + $499.99345455205$17.99FREE4/17 - 4/25
        MicrosoftXBOX One + + + + + +
        + + + Edit Listing + + + + + +
        +         		+ + $499.99399407305$27.99FREE4/9 - 4/11
        SonyPlaystation 5 + + + + + +
        + + + Edit Listing + + + + + +
        +         		+ + $519.99205265199$29.99FREE4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
        NintendoSwitch + + + + + +
        + + + Edit Listing + + + + + +
        +         		+ + $287.9630020795$17.99FREE4/1 - 4/5
        +
        +         + +

        Table with Field Inputs

        + +

        + A table can have field inputs for quick data modification for each row. +

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
        + + + + + + + + + + + + + 45175$18.95 + + + + 4/11 - 4/15
        + + + + + + + + + + + + + 345455205$17.99 + + + + 4/17 - 4/25
        + + + + + + + + + + + + + 399407305$27.99 + + + + 4/9 - 4/11
        + + + + + + + + + + + + + 205265199$29.99 + + + + 4/11 - 4/15
        +
        +
        +
        + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
        +
        +         + +
        +export const metadata = { + component: "table", + "ds-component": { + name: "table", + version: 0.1, + alpha: true, + }, +}; diff --git a/src/routes/_index/component/tabs/+page.marko b/src/routes/_index/component/tabs/+page.marko new file mode 100644 index 000000000..f5d021fff --- /dev/null +++ b/src/routes/_index/component/tabs/+page.marko @@ -0,0 +1,269 @@ +
        + + +

        + Tabs allow the user to switch between multiple + panels + ${" "}of content. By decluttering the user-interface in this way, we say that tabs follow the principal of${" "} + + progressive disclosure + + . +

        +

        + Selecting a tab should update the visible panel + without + ${" "}a full page reload. If a full page load is required instead (i.e. acting like a link), please see the${" "} + + fake tab + + section below for more details. +

        + +

        + Default Tabs +

        +

        + When a tab is selected, the + + aria-selected + + ${" "}state of all tabs in the list must be updated in order for the CSS to reflect the change. Only one tab can be selected and in the tab order at any moment in time. Likewise, only one tabpanel can be visible at any time, and it must correspond to the currently selected tab. +

        + +

        + Use child element modifier + + tabs__items--large + + to opt into larger font-size for tabs. +

        + +

        + NOTE: + ${" "}JavaScript is required to handle tab selection state, panel visibility, focus management and arrow-key navigation. For detailed behaviour requirements, please visit the${" "} + + eBay MIND Pattern for Tabs + + . +

        + +
        +
        +
        +
        + + + +
        +
        +
        +
        +

        Panel 1 Content

        +

        + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut? +

        +

        + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +

        +
        +
        + + +
        +
        +
        +
        + +
        +
        + + + +
        +
        +
        +
        +

        Panel 1 Content

        +

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?

        +
        +
        + + +
        +
        +         + +

        + Fake Tabs +

        +

        + A fake tab + looks + ${" "}like a normal tab, but is actually a hyperlink to a new page. Therefore a set of fake tabs behaves more like a simple navigational widget, rather than a dynamic user interface control. +

        +

        + A valid HREF attribute is + required + for all anchor tags. A value of "javascript" (or any such variant) is + not + a valid URL! +

        +

        + The + + aria-current + + ${" "}attribute is used to programmatically denote the current page state and current link. +

        + +

        + Use child element modifier + + fake-tabs__items--large + + to opt into larger font-size for fake tabs. +

        + +
        +
        +
        + +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut? +

        +

        + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +

        +
        +
        +
        +
        +
        + +
        + +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?

        +
        +
        +
        +         +
        +export const metadata = { + component: "tab", + "ds-component": { + name: "tab", + version: 2.1, + }, +}; diff --git a/src/routes/_index/component/textbox/+page.marko b/src/routes/_index/component/textbox/+page.marko new file mode 100644 index 000000000..08af6604f --- /dev/null +++ b/src/routes/_index/component/textbox/+page.marko @@ -0,0 +1,530 @@ +
        + + +

        + A textbox (also known as an + input + ) allows the user to enter data. +

        +

        + The purpose of a textbox is to collect form data. Therefore, textbox should always be used in conjunction with a form, label and submit button. +

        + +

        + IMPORTANT:The examples below show the textbox in isolation, without any label. Remember: every textbox requires a label! +

        + + +

        Single-Line Textbox

        +

        Use an input tag for a single-line textbox.

        +
        +
        + + + +
        +
        + + + + + + + +

        Readonly Textbox

        +

        + Use the + + readonly + + attribute to prevent any modification of the value. +

        +
        +
        + + + +
        +
        + + + + + + + +

        Disabled Textbox

        +

        + Use the + + disabled + + attribute to completely disable the input and any value. +

        +
        +
        + + + +
        +
        + + + + + + + +

        Error-State Textbox

        +

        + Use the + + aria-invalid + + attribute to highlight any input with error. +

        +
        +
        + + + +
        +
        + + + + + + + +

        + Multi-line Textbox +

        +

        Use the textarea tag for a multi-line textbox.

        +

        + A multi-line textbox allows line breaks and has a minimum height of 200px. +

        +
        +
        + + + + + +

        + Fluid Textbox +

        +

        + Apply the + + textbox--fluid + + modifier (or + + fluid + + utility class) to fill the width of the parent element. +

        +
        +
        +
        + +
        +
        +
        + + +
        + +
        +         + +

        + Textbox with Icon +

        +

        + Single-line textboxes can be augmented with any SVG + + icon + + . +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + To display the icon at the end of the control, position the + + svg + + tag after the input. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + NOTE: + ${" "}The icon is presentational, and therefore hidden from assistive technology using${" "} + + aria-hidden + + . Remember, the purpose of the field must be conveyed using a label. +

        + +

        + Textbox with Icon Button +

        +

        + Single-line textboxes also support an + + icon button + + in the end position. +

        + +
        +
        + + + + +
        +
        + + + + + + + + +

        + An icon button in the end position can also be teamed up with a static icon in the start position. +

        + +
        +
        + + + + + +
        +
        + + + + + + + + + +

        + Large Textbox +

        +

        + Use + + textbox--large + + modifier to style the textbox to be large size +

        +
        +
        + + + +
        +
        + + + + + + + +

        + Textbox Prefix +

        +

        + Add a + + span + + containing text before the input to show it as a prefix text. +

        + +
        +
        + + $ + + +
        +
        + + + + $ + + + + +

        + Textbox Postfix +

        +

        + Add a + + span + + containing text after the input to show it as a postfix text. +

        + +
        +
        + + + in. + +
        +
        + + + + + in. + + + +

        + Mixed icons and static text +

        +

        Postfix/prefix icons can be mixed with static text in the textbox.

        + +
        +
        + + $ + + + +
        +
        + + + + $ + + + + +
        +export const metadata = { + component: "textbox", + "ds-component": [{ + name: "text-area", + version: 2.2, + }, { + name: "text-field", + version: 2.2, + }], + submodules: ["icon-button"], +}; diff --git a/src/routes/_index/component/toast-dialog/+page.marko b/src/routes/_index/component/toast-dialog/+page.marko new file mode 100644 index 000000000..4182d6564 --- /dev/null +++ b/src/routes/_index/component/toast-dialog/+page.marko @@ -0,0 +1,198 @@ +
        + + +

        + A toast is a non-modal dialog that appears in response to a system-level action. +

        +

        + The display of the toast should be toggled using the + + hidden + + property. Please refer to the + + Dialog Transitions + + ${" "}section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the${" "} + + toast-dialog--transition + + ${" "}modifier class will opt into a transition that slides in on show, and fades out on hide. +

        + +

        + NOTE + : A toast is non-modal and therefore + should not + ${" "}capture or trap keyboard focus when opened. Keyboard users require a way to quickly access the actions within the toast. This is achieved via the${" "} + + accesskey + + attribute. +

        + +

        + Default Toast +

        +

        The default toast displays a single, primary call-to-action.

        + +
        +
        + + +
        +
        + + + + +

        + Toast Secondary Action +

        +

        A secondary action is also supported.

        + +
        +
        + + +
        +
        + + + +
        +export const metadata = { + component: "toast-dialog", + "ds-component": { + version: 2.2, + }, + submodules: ["button", "icon-button"], +}; diff --git a/src/routes/_index/component/toggle-button-group/+page.marko b/src/routes/_index/component/toggle-button-group/+page.marko new file mode 100644 index 000000000..58b5c947a --- /dev/null +++ b/src/routes/_index/component/toggle-button-group/+page.marko @@ -0,0 +1,2410 @@ +import tableProfilePic from "/src/routes/static/img/tb-profile-pic.jpg"; +
        + + +

        + The Toggle Button Group is a group of single or multi-select toggle buttons providing a visual emphasis on the available selectable choices. +

        + +
        +
        + + + +
        +
        +

        + Intended Use of Toggle Button Group +

        +

        + Toggle Buttons inside Toggle Button Group are intended to be input controls. They are ment to be used for users to make selection(s) that can be used for additional actions. For example, they can be used to storing the selection(s) and using${" "} + + JavaScript + + to include the information in a form submission. +

        + +

        + Toggle Buttons are NOT to be used for the purposes of navigation. +

        +
        +
        + +

        + The component allows for single or multiple selections based on need. However, when using Skin by itself you will need to have your own${" "} + + JavaScript + + ${" "}to establish those rules based on the specific needs for each implementation context. +

        + +

        + Effort was taken in these docs to provide a good amount of helpful information. Since this component has an atomic piece ( + + Toggle Button + + ), there may be some information crossover. Though efforts were taken to isolate the documentation for this parent component, at various touchpoints between the two components, there may be some redundancy. In other portions, where immediate information appears to be missing here, that information may reside in its child component. Please refer to${" "} + + Toggle Button + + docs in these situations. +

        + +

        Accessibility

        + +

        + The preferred implementation for accessibility includes an on-screen heading and the list associated with the heading (a). The second option is an off-screen heading with the same association (b). The third is to use the label directly on the list element (c). +

        + +

        On-screen Heading with Associated List (a - preferred)

        +
        +
        +
        + Select Shoe Size +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        Select Shoe Size
        +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        Off-screen Heading with Associated List (b)

        +

        + This implementation is identical to option (a), except the heading is off-screen using the${" "} + + clipped + + class. +

        +
        +
        +
        + Select Shoe Size +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        Select Shoe Size
        +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        Interaction Variations of Toggle Button Groups

        + +

        + There are three different types of toggle button groups that may be utilized based on interaction need. +

        + +
          +
        1. + Multi-select: this is a freeform implementations in which the user can toggle and untoggle any button. +
          2. +
        2. + Single-select Optional: only one button can be toggled on at any given time and the user CAN untoggle that one button. +
          3. +
        3. + Single-select Required: only one button can be toggled on at any given time and the user CANNOT untoggle that one button. +
          4. +
        + +

        + If you're using Skin outside of a + + JavaScript + + framework, you will need to write your own + + js + + code to accomplish these interactivity cases. +

        + +

        + It's generally good practice to use delegated event handlers that allow you to set up a a single event handler for the group of buttons instead of on every button. +

        + ${" "}The following examples use an HTML attribute to disitnguish the interaction variations. Using${" "} + + data-selection-type + + . For the associated + + js + + please see + + /docs/src/js/main.js + + ${" "}(TOGGLE-BUTTON-GROUP section) for an example on how the implementation may be accomplished.${" "} + +

        Multi-select

        +

        + The Multi-select variation is the default so nothing additional needs to be specified in the markup. +

        + +
        +
        +
        + Select Multiple Sizes +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        Select Multiple Sizes
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        Single-select Optional

        +

        + In this example of the Single-select Optional variation, + + data-selection-type="single-optional" + + ${" "}is used to split off the variation interactivity. This option allows for only one selection, so toggling additional buttons will simply switch the toggled button and retain only one toggled button. +

        +
        +
        +
        + Select Sizes +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        Select Sizes
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        Single-select Required

        +

        + In this example of the Single-select Optional variation, + + data-selection-type="single-required" + + ${" "}is used to split off the variation interactivity. This option allows for only one selection. However, unlike the single-select optional variation, this variation enforces the required single selection so the toggled button cannot be untoggled. +

        + +
        +
        +
        + Select Sizes +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        + + +
        Select a size
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +         + +

        Responsive Out of the Box

        + +

        + Toggle Button Group is responsive out of the box. The buttons will responsively shrink and stretch the specific type of buttons inside and attempt to fit the buttons nicely within the container at any and all screen sizes. +

        + +

        + We use + + display: grid + + ${" "}to create a predefined allotted number of button slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows buttons to shrink/stretch the predefined number of buttons at each breakpoint with a fallback to media queries for unsupported browsers. +

        + +

        + The responsive rules around how many toggle buttons appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive toggle button layout at various screen sizes. +

        + +

        + In the demo below, drag the range to see the responsive rules in action and how the fluid Toggle Buttons work. +

        + +
        +
        +

        + +

        + + + 320 + +
        +

        +
        + Select Sizes +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Select Sizes
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        Exception Cases for Preferred Number of Toggle Buttons Per Line

        + +

        + The buttons inside the Toggle Button Group are automatically responsive and have predefined rules around how many Toggle Buttons will display on a line before wrapping to the next line. However, on some rare occasions, developers may need to revise those rules based on how a Toggle Button Group works in their specific use case. For example, when the number of buttons is deterministic and known. In those instances, using various attributes mapped to each breakpoint will allow the rules to be honored by the component. At those specific breakpoints, the number of buttons specificed will be displayed. +

        + +

        + Here's a specific example. Suppose we know we're going to have 6 buttons total and we'd like to have perfect visual balance in the UI. We may add the following html attributes/modifiers to${" "} + + .toggle-button-group + + to achieve that: +

        + +
          +
        • + + data-columns-xs="2" + + ${" "}to force 2 toggle buttons on the same line so we'd have 3 balanced lines of buttons at the${" "} + + XS + + breakpoint or at + + 320px + + + width. +
          • +
        • + + data-columns-sm="3" + + ${" "}to force 3 toggle buttons on the same line so we'd have 2 balanced lines of buttons at the${" "} + + SM + + breakpoint or at + + 512px + + + width. +
          • +
        • + + data-columns-md="6" + + to force all 6 toggle buttons on the same line at the + + MD + + breakpoint or at + + 768px + + + width. +
          • +
        • + + data-columns-xl="8" + + to force all 8 toggle buttons on the same line at the + + XL + + breakpoint or at + + 1280px + + + width. +
          • +
        + +

        + Here's that use case in action. Drag the range to see the effects of the attribute settings at various container widths. +

        + +
        +
        +

        + +

        + + + 320 + +
        +

        +
        + Select Sizes +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Select Sizes
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        Layouts

        + +

        + There are various layouts that can be used based on the specific needs at implementation. The implied theme (needs no modifier), is the minimal layout. For more information about types of layouts, refer to the${" "} + + Toggle Button + + component. The examples below will highlight various layouts. +

        + +

        + A toggle button group can have one of three different layouts: minimal (default), list or gallery. +

        + +
        +
        + + + +
        +
        +

        + Layout Modifiers +

        +

        + Toggle Button Group has top-level modifiers that will apply to the Toggle Buttons inside. When using Toggle Buttons inside Toggle Button Group make sure you do NOT specify each Toggle Button layout modifier. Instead, top-level layout modifiers will be sufficient to create the layout you want. +

        +
        +
        + +

        Minimal Layout (default)

        + +

        + The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate. +

        + +

        + NOTE: + All toggle button examples utilize JavaScript to toggle the + + aria-pressed + + state of the button. +

        + +

        + In this example, the container housing the Toggle Button Group is artificially limited to${" "} + + 500px + + ${" "}to demonstrate how the buttons will wrap after the specific columns (in this case, 3). Feel free to reduce/expand the container width in dev console to see how the columns will react. +

        + +
        +
        +
        + Select Sizes +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Select Sizes
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        List Layout

        + +

        + List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens. +

        + +

        + You may use this layout by adding the + + toggle-button-group--list-layout + + modifier to the toggle button group. +

        + +

        List Layout Toggle Button Group with Title

        + +
        +
        +
        + Text Options +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Text Options
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        + List Layout Toggle Button Group with Subtitles (multiple buttons toggled on) +

        + +
        +
        +
        + Text Options +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Text Options
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        List Layout Toggle Button Group with Icons

        + +
        +
        +
        + Select Payment Option +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Select Payment Option
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        List Layout Toggle Button Group with Images

        + +

        + To add an image to a toggle button, you can use the + + toggle-button__image-container + + block using an + + <img> + + or as a + + css + + background image. +

        + +
        + Select Payment Option +
        +
        +
        +
          +
        • + +
          • + +
        • + +
          • + +
        • + +
          • +
        +
        +
        + + +
        Select Payment Option
        +
        +
        +
          +
        • + +
          • + +
        • + +
          • + +
        • + +
          • +
        +
        +
        +         + +

        List Layout Toggle Button Group with CSS Images

        + +
        + Select Payment Option +
        +
        +
        +
          +
        • + +
          • + +
        • + +
          • +
        +
        +
        + + +
        Select Payment Option
        +
        +
        +
          +
        • + +
          • + +
        • + +
          • +
        +
        +
        +         + +

        Gallery Layout

        + +

        + Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons. +

        + +

        + You may use this layout by adding the + + toggle-button-group--gallery-layout + + modifier to the toggle button group. +

        + +

        Gallery Layout Toggle Button Group with Images

        + +

        + The image used in these buttons will shrink/grow responsively in width and height based on the overall button width being respectful of their boundary limitations. Where those boundaries are in danger of being crossed, the layout will wrap accordingly. +

        + +
        +
        +
        + Selection Options +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Selection Options
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        Gallery Layout Toggle Button Group with CSS Images

        + +

        + Besides using an + + <img> + + , you may also use CSS images that can provide more flexibility in filling more of the space reserved for images. +

        + +

        + These images will change in size responsively both horizontally and vertically based on the size of the button itself, available space allowed by the container and their minimum and maximum size limitations. +

        + +

        + The examples below have various different implementations of CSS images. The first is a CSS Profile Image button with background-size: contain that will display the image as is and fit the entire image in the container. The second is a CSS Profile Image button with${" "} + + background-size: cover + + ${" "}that will display the image to fill as much of the space of the container as possible clipping out the remaining portions of the image that fall outside. With that method, you can also provide guidance for fine-tuning the image positioning to move the focal point into the center of the container. In that example,${" "} + + background-position: center 15%; + + ${" "}is used to move the focal point (person with camera) into the center of the frame. +

        + +
        +
        +
        + Selection Options +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Selection Options
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         + +

        Gallery Layout Toggle Button Group with Icons

        + +

        + Typically, one would use either all image buttons or all icon buttons in a Toggle Button Group. +

        +

        + To add an icon to a toggle button, you can use the + + toggle-button__icon + + block. +

        + +
        +
        +
        + Selection Options +
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        +
        + + +
        Selection Options
        +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +         +
        +export const metadata = { + component: "toggle-button-group", + "ds-component": { + name: "toggle-button-group", + version: 1, + }, + submodules: ["toggle-button"], +}; diff --git a/src/routes/_index/component/toggle-button/+page.marko b/src/routes/_index/component/toggle-button/+page.marko new file mode 100644 index 000000000..4f87403e3 --- /dev/null +++ b/src/routes/_index/component/toggle-button/+page.marko @@ -0,0 +1,1096 @@ +import tbPic from "/src/routes/static/img/tb-profile-pic.jpg"; +
        + + +

        + A toggle button is a special type of button that conveys a pressed or non-pressed state; this state is conveyed programmatically via the${" "} + + aria-pressed + + attribute. They can be used in single-select or multi-select groups. +

        + +

        + These buttons, like all buttons, should + NOT + contain structural elements, such as headings or lists. +

        + +

        + A toggle button can have one of three different layouts: minimal (default), list or gallery. +

        + +

        + Minimal Layout +

        + +

        + The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate. +

        + +

        + NOTE: + All toggle button examples utilize JavaScript to toggle the + + aria-pressed + + state of the button. +

        + +
        +
        + +
        +
        + + + + + +

        + List Layout +

        + +

        + List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens. +

        + +

        + You may use this layout by adding the + + toggle-button--list-layout + + modifier to the toggle button. +

        + +

        List Toggle Button with Title

        + +
        +
        + +
        +
        + + + + + +

        List Toggle Button with Title and Subtitle

        + +

        + A subtitle can be added via + + toggle-button__subtitle + + block. +

        + +
        +
        + +
        +
        + + + + + +

        List Toggle Button with Title and Multi-line Subtitle

        + +

        + To have a multi-line subtitle, you may use a single + + <p> + + tag that has longer text or a maximum of two separate + + <p> + + tags with shorter text inside the + + toggle-button__subtitle + + block. +

        + +
        +
        + +
        +
        + + + + + +

        List Toggle Button with Icon, Title, and Subtitle

        + +

        + To add an icon to a toggle button, you can use the + + toggle-button__icon + + block. +

        + +
        +
        + +
        +
        + + + + + +

        List Toggle Button with Image, Title, and Subtitle

        + +

        + To add an image to a toggle button, you can use the + + toggle-button__image-container + + block using an + + <img> + + or as a + + css + + background image. +

        + +
        Using an Image Element
        + +
        +
        + +
        +
        + + + + + +
        Using a Contained CSS Background Image
        + +
        +
        + +
        +
        + + + + + +
        Using a Covered CSS Background Image
        + +
        +
        + +
        +
        + + + + + + + +

        + Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons. +

        + +

        + You may use this layout by adding the + + toggle-button--gallery-layout + + modifier to the toggle button. +

        + +

        Gallery Toggle Button with Image

        + +

        + To add an image to a toggle button, you can use the + + toggle-button__image-container + + block. +

        + +
        +
        + +
        +
        + + + + + +

        Gallery Toggle Button Responsive Adjustments

        + +

        + Toggle buttons have a mininum and maximum width and are meant to be fluid between those boundaries. If using these buttons separately, you will need to set up their combined high-level layouts on your own. In these examples, their widths are artificially/manually set to various widths to demonstrate how the buttons undergo responsive adjustments. +

        + +

        + The image used in these buttons will shrink/grow responsively in width and height based on the overall button width. +

        + +

        Resonsive Images Using Image Element

        + +
        +
        + + + + + +
        +
        + + + + + + + +

        Responsive Images Using CSS Background-Image

        + +

        + These buttons use + + background-size: contain; + + for background image scaling/filling. +

        + +
        +
        + + + + + +
        +
        + + + + + + + + + +

        + These buttons use + + background-size: cover; + + ${" "}for background image filling the alloted space. The following buttons have the background image positioning using${" "} + + background-position-y: 20%; + + . Depending on your specific image, you may also need to adjust the background positioning along the x and y axis to ensure the main focal point remains visible and centered in your implementation. +

        + +
        +
        + + + + + +
        +
        + + + + + + + + + +

        Gallery Toggle Button with Icon

        + +

        + To add an icon to a toggle button, you can use the + + toggle-button__icon + + block. +

        + +
        +
        + +
        +
        + + + + + +

        Disabled Toggle Button

        + +

        + Toggle buttons may be disabled with + + disabled + + or + + aria-disabled="true" + + . +

        + +
        +
        + + + + + + +
        +
        + + + + + + + + + + +
        +export const metadata = { + component: "toggle-button", + "ds-component": { + name: "toggle-button", + version: "1.0.3", + }, + submodules: ["icon"], +}; diff --git a/src/routes/_index/component/tokens/+page.marko b/src/routes/_index/component/tokens/+page.marko new file mode 100644 index 000000000..bd842921c --- /dev/null +++ b/src/routes/_index/component/tokens/+page.marko @@ -0,0 +1,81 @@ +$ const colors = ["avocado", "marigold", "blue", "coral", "orange", "dijon", "pink", "green", "red", "indigo", "teal", "jade", "yellow", "kiwi", "violet", "lilac", "neutral"]; +
        + +

        Contains all custom properties necessary to correctly render the Evo Design System, in accordance with the token system.

        +

        Core, light and dark token sets are individually exposed via the following submodules:

        +
        +
        @ebay/skin/tokens/evo-core
        +
        eBay default primitives
        +
        @ebay/skin/tokens/evo-light
        +
        eBay semantic aliases for light mode
        +
        @ebay/skin/tokens/evo-dark*
        +
        eBay semantic aliases for dark mode
        +
        +

        *This sub-module will not be included automatically by it's parent module; it must be explicitly included by any page that is itself dark-mode compatible.

        + +

        Semantic Color Tokens

        +
        +
        +
          + $ const backgroundTokens = ["primary", "secondary", "disabled", "inverse", "attention", "confirmation", "information", "accent", "invalid"]; + +
        • color-background-${token}
          • +           + $ const foregroundTokens = ["primary", "secondary", "disabled", "attention", "confirmation", "information", "accent", "visited"]; + +
        • color-foreground-${token}
          • +           + $ const foregroundOnTokens = ["primary", "secondary", "disabled", "inverse", "accent", "attention", "confirmation", "information"]; + +
        • color-foreground-on-${token}
          • +           + $ const strokenTokens = ["default", "accent", "attention", "confirmation", "information", "disabled", "strong", "subtle"]; + +
        • color-stroke-${token}
          • +           + $ const stateTokens = ["visited", "primary-hover", "primary-active", "secondary-hover", "secondary-active", "inverse-hover", "inverse-active", "accent-hover", "accent-active", "attention-hover", "attention-active"]; + +
        • color-state-${token}
          • +           + $ const scrimTokens = ["image", "background"]; + +
        • color-scrim-${token}
          • +           + $ const aiTokens = ["full-spectrum", "green-strong", "blue-strong", "purple-strong", "green-subtle", "blue-subtle", "purple-subtle"]; + +
        • color-ai-gradient-${token}
          • +           +
        +
        +
        + +
        + +

        Primitive Color Tokens

        + +         +

        NOTE: Primitive tokens are not intended to be used by the application; instead, they are utilized by the semantic tokens.

        +
        +
        +
          + + +
        • color-${color}-${i+1}00
          • +           +           +
        • color-neutral-900
          • +
        +
        +
        +
        +
        +export const metadata = { + component: "tokens", + "ds-component": { + version: "1.0", + } +}; diff --git a/src/routes/_index/component/tooltip/+page.marko b/src/routes/_index/component/tooltip/+page.marko new file mode 100644 index 000000000..9a1df9fa8 --- /dev/null +++ b/src/routes/_index/component/tooltip/+page.marko @@ -0,0 +1,161 @@ +
        + + +

        + A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button. +

        +

        + The tooltip must be programmatically associated with the button by using the${" "} + + aria-describedby + + property and + + tooltip + + role. +

        +

        + Toggle the + + aria-expanded + + state of the button to expand or collapse its associated tooltip. +

        + +
        +
        + + + + +
        +
        + + + + + + + +

        + By default, the position of the overlay and its pointer will remain static. For these following examples, we are using${" "} + + floating-ui + + to help position the tooltip and the pointer dynamically. +

        +

        + In order to get this to work with floating-ui, you need to remove pointer position${" "} + + tooltip__pointer--top-left + + and remove any style positioning +

        + +
        +
        + + + + +
        +
        + + + + + + +
        +export const metadata = { + component: "tooltip", + "ds-component": { + name: "tooltip", + version: 2, + }, + submodules: ["icon-button"], +}; diff --git a/src/routes/_index/component/tourtip/+page.marko b/src/routes/_index/component/tourtip/+page.marko new file mode 100644 index 000000000..da984afbe --- /dev/null +++ b/src/routes/_index/component/tourtip/+page.marko @@ -0,0 +1,256 @@ +
        + + +

        + A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened. +

        +

        + Toggle the + + tourtip--expanded + + modifier to expand or collapse the tourtip. +

        + +
        +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        + +
        +
        + +

        + Tourtip +

        +

        + Here's something new to help you be successful at your task. +

        +         + +
        +
        +
        +
        +
        +
        + +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        +
        + +
        +
        + +

        Tourtip

        +

        Here's something new to help you be successful at your task.

        +         + +
        +
        +
        +
        +         + +

        + By default, the position of the overlay and its pointer will remain static. For these following examples, we are using${" "} + + floating-ui + + to help position the tooltip and the pointer dynamically. +

        +

        + In order to get this to work with floating-ui, you need to remove pointer position${" "} + + tourtip__pointer--top-left + + and remove any style positioning +

        + +
        +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        + +
        +
        + +

        + Tourtip +

        +

        + Here's something new to help you be successful at your task. +

        +         + +
        +
        +
        +
        +
        +
        + +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        +
        + +
        +
        + +

        Tourtip

        +

        Here's something new to help you be successful at your task.

        +         + +
        +
        +
        +
        +         + +

        With footer

        +

        + Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page +

        +
        +
        +
        +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

        +
        + +
        +
        + +

        + Tourtip +

        +

        + Here's something new to help you be successful at your task. +

        +         + +
        + + 1 / 3 + + + +
        +
        +
        +
        +
        +
        +
        + +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        +
        + +
        +
        + +

        Tourtip

        +

        Here's something new to help you be successful at your task.

        +         + +
        + 1 / 3 + + +
        +
        +
        +
        +
        +         +
        +export const metadata = { + component: "tourtip", + "ds-component": { + name: "tourtip", + version: 2, + }, + submodules: ["icon-button"], +}; diff --git a/src/routes/_index/component/typography/+page.marko b/src/routes/_index/component/typography/+page.marko new file mode 100644 index 000000000..968696cf6 --- /dev/null +++ b/src/routes/_index/component/typography/+page.marko @@ -0,0 +1,115 @@ +
        + + +

        + Static sites without access to the LESS preprocessor can leverage the Skin type ramp via the typography module. +

        +

        + Giant text and large text are always bold. Other entries in the type ramp can be set to${" "} + + bold-text + + or + + secondary-text + + using the relevant class. +

        + +
        +
        +
          +
        • + .giant-text-3 +
          • +
        • + .giant-text-2 +
          • +
        • + .giant-text-1 +
          • +
        • + .large-text-2 +
          • +
        • + .large-text-1 +
          • +
        • + .medium-text +
          • +
        • + .regular-text +
          • +
        • + .small-text +
          • +
        +
        +
        + +

        + Product Titles +

        + +

        + Product titles are regular font weight, use the + + Market Sans + + font and are responsive based on a small or large screen size. +

        + +
        +
        +
          +
        • + .giant-product-title +
          • +
        • + .large-product-title +
          • +
        • + .medium-product-title +
          • +
        • + .small-product-title +
          • +
        +
        +
        + +

        + Section Titles +

        + +

        + Section titles are bold font weight, use the + + Market Sans + + font and are responsive based on a small or large screen size. +

        + +
        +
        +
          +
        • + .giant-section-title +
          • +
        • + .large-section-title +
          • +
        • + .medium-section-title +
          • +
        • + .small-section-title +
          • +
        +
        +
        +
        +export const metadata = { + component: "typography", + version: "1.1", +}; diff --git a/src/routes/_index/component/utility/+page.marko b/src/routes/_index/component/utility/+page.marko new file mode 100644 index 000000000..fe32e8e97 --- /dev/null +++ b/src/routes/_index/component/utility/+page.marko @@ -0,0 +1,110 @@ +
        +

        + + @ebay/skin/ + + utility +

        +

        + The utility module provides a small set of common, utility classes. It is${" "} + not + intended as an + exhaustive + library of utility classes or functions (i.e. it is not + + Funcssion + + !). +

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + Utility Classes +
        ClassProperties
        .clearfixClear floated elements
        .clippedElement visible to screen reader only
        .clipped--stealthClipped element becomes visible on focus (modifier)
        .image-treatment + Applied on an image container. Will apply a grey background to the image inside container. +
        .image-stretchImage will stretch up and down
        .image-centerVertically and horizontally center an image
        .image-scaleImage will scale up and down
        .image-disabledImage will appear disabled.
        .scrollbars-permanentDisplay permanent scrollbars on containers as a progressive enhancement.
        .text-truncateTruncate single-line text
        + +

        Utility Notes

        + + + + + + + + + + + + + + +
        + Utility Notes +
        ItemNotes
        + + will-change + + + There are known + + performance issues using this approach + + ${" "}to indicate imminent element style changes for browsers. It's recommended to use this sparingly and only to remedy known performance issues and not anticipate them. +
        +
        +export const metadata = { + component: "utility", + "ds-component": { + version: "1.0", + } +}; diff --git a/src/routes/_index/guide/page-grid+meta.json b/src/routes/_index/guide/page-grid+meta.json new file mode 100644 index 000000000..bf665bdd1 --- /dev/null +++ b/src/routes/_index/guide/page-grid+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "CSS Page Grid Templates", + "pageDescription": "CSS Page Grid Templates are a collection of responsive and accessible CSS grid templates. Perfect for organizing content in a compact and user-friendly manner for your user interfaces." +} diff --git a/src/routes/_index/guide/page-grid+page.marko b/src/routes/_index/guide/page-grid+page.marko new file mode 100644 index 000000000..939b29b07 --- /dev/null +++ b/src/routes/_index/guide/page-grid+page.marko @@ -0,0 +1,51 @@ +static const basePath = import.meta.env.BASE_URL; +

        Page Grid Guide

        + +

        Welcome to the Page Grid Guide page where you can find various responsive templates built using Skin's page grid.

        +

        Please bear in mind that these are just examples that may contain experimental features. When implementing page grid in your own application, make sure to double-check support and functionality and test accordingly.

        + +
        +
        +
        +

        Blog with Sub-Grid

        +
        + Open +
        +
        + +
        + +
        +
        +

        Pricing

        +
        + Open +
        +
        + +
        +
        + +style { + iframe { + border: 1px solid #000; + width: 320px; + height: 480px; + min-height: 480px; + resize: both; + overflow: auto; + } + + .template--item { + display: inline-block; + margin-right: 20px; + } + + .template--item_head { + display: flex; + align-items: baseline; + } + .template--item_head_actions { + margin-left: auto; + } +} \ No newline at end of file diff --git a/src/routes/_index/guide/skeleton+meta.json b/src/routes/_index/guide/skeleton+meta.json new file mode 100644 index 000000000..2251a6a74 --- /dev/null +++ b/src/routes/_index/guide/skeleton+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "CSS Skeleton Examples", + "pageDescription": "CSS Skeleton Examples are a collection of responsive and accessible CSS skeleton examples. Perfect for organizing content in a compact and user-friendly manner for your user interfaces." +} diff --git a/src/routes/skeleton-examples/skeleton/+page.marko b/src/routes/_index/guide/skeleton+page.marko similarity index 86% rename from src/routes/skeleton-examples/skeleton/+page.marko rename to src/routes/_index/guide/skeleton+page.marko index 23e8fb5e9..6776d3282 100644 --- a/src/routes/skeleton-examples/skeleton/+page.marko +++ b/src/routes/_index/guide/skeleton+page.marko @@ -1,5 +1,6 @@ +

        Skeleton Use Cases

        -

        This page details implementation techniques and common loading scenarios for eBay Skin's skeleton module.

        +

        This page details implementation techniques and common loading scenarios for eBay Skin's skeleton module.

        NOTE: This page demonstrates both good and bad uses of skeletons; please be sure to read and understand carefully to avoid replicating an anti-pattern!

        @@ -26,7 +27,7 @@ `>

        NOTE: The :empty pseudo-class considers elements with whitespace as not empty!

        -

        The downside is that our skeleton classes cannot be leveraged (in theory, LESS mixins could be provided) and composite skeletons (e.g. items tiles) may require some non-trivial use of CSS linear gradients for certain skeletons.

        +

        The downside is that our skeleton classes cannot be leveraged (in theory, LESS mixins could be provided) and composite skeletons (e.g. items tiles) may require some non-trivial use of CSS linear gradients for certain skeletons.

        @@ -84,7 +85,7 @@

        The Empty Screen

        This example simulates the delay (set to 3 seconds) and empty screen while the client waits for the entire HTML payload from the server.

        -

        View Example

        +

        View Example

        For many types of web site, so long as the delay is not too long, this empty screen can be a perfectly acceptable user experience and no further optimizations or skeletons are necessary.

        @@ -102,23 +103,23 @@

        One Column with Empty Space

        Our first progressive rendering example shows how the main article content might be streamed in after the main navigation and featured articles.

        -

        View Example

        +

        View Example

        We have added a 3 second delay in order to simulate a service that is slow to fetch the main content. Remember, this is a highly contrived use case! No web site should be taking that long to retrieve static content and therefore would never require a skeleton!

        One Column with Skeleton

        Now let's add a skeleton placeholder for the main content. Using progressive rendering we stream an opening div tag to the client, and while the server works on getting the next chunk ready, the element will match the CSS :empty rule.

        -

        View Example

        +

        View Example

        Okay, that was easy, our white space has been replaced with a skeleton while we wait for the next chunk to arrive. But what about when we have two columns?

        Two Columns with Empty Space

        To keep things simple lets assume the second column is also static content that will be quickly flushed from the server.

        -

        View Example

        +

        View Example

        The goal of a skeleton is to replace empty space with a placeholder graphic giving a rough approximation of the content and layout to come. Lets see if we can update our skeleton to show two columns instead of just one.

        Two Columns with Skeleton

        Our main column and side column are siblings elements, so we cannot start the side column element without flushing and closing the main column element that precedes it. This means we cannot have an :empty main column and an :empty side column simultaneously.

        With some clever CSS we can create a single background image graphic representing a two column layout on the :empty main column.

        -

        View Example

        +

        View Example

        This might be satisfactory in some cases, but what if we want to show the main content without waiting for the side column to be flushed (the side content may be a slow service also)? What about responsive design? How will our two column skeleton respond at various breakpoints?

        At this point we start to see that choreographing more than one skeleton placeholder with in-order streaming can become quite tricky. When we have more than one slow service, and a need for multiple skeleton placeholders, it is time to think about out-of-order streaming, which can eliminate these choreography concerns, but on the flipside has the potential to introduce the dreaded layout shift. Read on to find out more.

        @@ -131,27 +132,27 @@

        Layout Shift

        With our in-order streaming examples, the appereance of new content was always appended, therefore never caused existing content or layout to move. Let's see what happens when we stream in our main content, side column and footer out of order.

        -

        View Example

        +

        View Example

        As the content is loading, try clicking on the link in the footer. Now imagine if it were an "Add to Cart" or "Buy Now" button and how infuriating that would be. Imagine being a keyboard user, and the element with keyboard focus being pushed down the page out of view

        So, while getting content to the user faster always sounds like a good idea in theory, this example showcases how it can cause some unintended consequences and a poor UX.

        The good news is that skeletons, under certain conditions, have the ability to mitigate or mask entirely the problems associated with content arriving out-of-order.

        Reserving Space

        Skeletons can prevent the layout shift associated with out-of-order streaming by reserving the physical space for that content.

        -

        View Example

        +

        View Example

        The physical dimensions of the reserved space must be known ahead of time. When skeletons reserve the right amount of space, they will prevent layout from shifting. When they reserve too much or too little, layout will shift.

        For some kinds of content, we can be sure of the physical dimensions ahead of time, images, videos, carousels, for example. For text however, we can only approximate in most cases, and therefore blocks of text make poor candidates for skeletons.

        Skeleton-itis

        With in order streaming and the :empty technique, it is not possible to display more than one skeleton concurrently. With out-of-order streaming, this restriction is lifted. This is both a good and a bad thing.

        Let's see what happens when we create skeletons for all main page sections.

        -

        View Example

        -

        Compare this with our previous example or In-Order streaming. The wait time for the main content is the same, but without any shift or flashing in-and-out of skeletons. Most web pages should not have a 1:1 mapping of page sections to skeletons!

        +

        View Example

        +

        Compare this with our previous example or In-Order streaming. The wait time for the main content is the same, but without any shift or flashing in-and-out of skeletons. Most web pages should not have a 1:1 mapping of page sections to skeletons!

        Out-of-order Placeholders Only

        Perhaps there is a compromise? We have established that to avoid unexpected layout shift, skeletons must reserve exactly the same amount of space as the content. The exception to this rule is if the skeleton and its content is appended to the page.

        Out-of-order streaming allows us to lay down our placeholders all at the same time and reserve space without waiting for the rest of the page. We can then sequence the streaming in a way that only ever appends the content.

        -

        View Example

        +

        View Example

        While this might seem to defeat the purpose of out-of-order streaming (i.e. getting content onscreen quicker, regardless of its position) this does provide us with one method of tackling undesired layout shift and gaining some of the perceived performance increase of skeletons.

        @@ -163,14 +164,14 @@

        Load More - Unpredictable Size

        This example shows an initial expected layout shift upon clicking the load more button. After a 3 second wait we experience an unexpected layout shift (i.e. the button is shunted down the page) due to the skeletons not reserving the same amount of physical space as the content that is fetched.

        -

        View Example

        +

        View Example

        Each item that is loaded has an arbitrary amount of text. How could we make it less arbitrary and more predictable?

        Load More - Predictable Size

        One way to make content length less arbitrary is via text truncation. In this example the content has been truncated to two lines, meaning we can be more sure about the physical space that needs to be reserved by the skeleton.

        -

        View Example

        +

        View Example

        Again though it is worth remembering, working with text is far less predictable than with images, video and the like. The more predictable the type of content and its size and shape, the better skeletons will work to mitigate layout shift.

        Refreshing Content

        In addition to adding more content to any section of the page, another common scenario is to refresh the content of an existing area of the page. For example, paginating to the next set of results, or refreshing a set of thumbnail images.

        -

        Just as with loading more content, refreshing a section of content can fall afoul of layout shift if the content size is unpredictable. Again the situation can be avoided with predictable content size.

        +

        Just as with loading more content, refreshing a section of content can fall afoul of layout shift if the content size is unpredictable. Again the situation can be avoided with predictable content size.

        diff --git a/src/routes/_index/logo.svg b/src/routes/_index/logo.svg deleted file mode 100644 index 8660b981f..000000000 --- a/src/routes/_index/logo.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/routes/blog-stretchy-nested/+layout.marko b/src/routes/guide-examples/page-grid-blog-stretchy-nested/+layout.marko similarity index 100% rename from src/routes/blog-stretchy-nested/+layout.marko rename to src/routes/guide-examples/page-grid-blog-stretchy-nested/+layout.marko diff --git a/src/routes/blog-stretchy-nested/+page.marko b/src/routes/guide-examples/page-grid-blog-stretchy-nested/+page.marko similarity index 100% rename from src/routes/blog-stretchy-nested/+page.marko rename to src/routes/guide-examples/page-grid-blog-stretchy-nested/+page.marko diff --git a/src/routes/blog-stretchy-nested/+page.style.css b/src/routes/guide-examples/page-grid-blog-stretchy-nested/+page.style.css similarity index 98% rename from src/routes/blog-stretchy-nested/+page.style.css rename to src/routes/guide-examples/page-grid-blog-stretchy-nested/+page.style.css index a20cdf6af..1ba4bd915 100644 --- a/src/routes/blog-stretchy-nested/+page.style.css +++ b/src/routes/guide-examples/page-grid-blog-stretchy-nested/+page.style.css @@ -106,7 +106,7 @@ aside { } /* Skin goes from 8 columns to 16 columns at this SM (small) breakpoint */ -@media (min-width: 512px) { +@media screen and (min-width: 512px) { header { grid-area: 1 / 1 / span 1 / span 16; } diff --git a/src/routes/blog-stretchy-subgrid/+layout.marko b/src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+layout.marko similarity index 100% rename from src/routes/blog-stretchy-subgrid/+layout.marko rename to src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+layout.marko diff --git a/src/routes/blog-stretchy-subgrid/+page.marko b/src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.marko similarity index 100% rename from src/routes/blog-stretchy-subgrid/+page.marko rename to src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.marko diff --git a/src/routes/blog-stretchy-subgrid/+page.style.css b/src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.style.css similarity index 98% rename from src/routes/blog-stretchy-subgrid/+page.style.css rename to src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.style.css index d5b6e7bf1..b5630e091 100644 --- a/src/routes/blog-stretchy-subgrid/+page.style.css +++ b/src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.style.css @@ -107,7 +107,7 @@ aside { } /* Skin goes from 8 columns to 16 columns at this SM (small) breakpoint */ -@media (min-width: 512px) { +@media screen and (min-width: 512px) { /* Set up subgrid columns */ @supports not (grid-template-columns: subgrid) { .featured { diff --git a/src/routes/+layout.marko b/src/routes/guide-examples/page-grid-pricing/+layout.marko similarity index 100% rename from src/routes/+layout.marko rename to src/routes/guide-examples/page-grid-pricing/+layout.marko diff --git a/src/routes/pricing/+page.marko b/src/routes/guide-examples/page-grid-pricing/+page.marko similarity index 100% rename from src/routes/pricing/+page.marko rename to src/routes/guide-examples/page-grid-pricing/+page.marko diff --git a/src/routes/pricing/+page.style.css b/src/routes/guide-examples/page-grid-pricing/+page.style.css similarity index 98% rename from src/routes/pricing/+page.style.css rename to src/routes/guide-examples/page-grid-pricing/+page.style.css index 04ccf9130..ffae9a6d8 100644 --- a/src/routes/pricing/+page.style.css +++ b/src/routes/guide-examples/page-grid-pricing/+page.style.css @@ -119,7 +119,7 @@ nav ul { grid-column: 1 / span 8; } -@media (min-width: 512px) { +@media screen and (min-width: 512px) { header { flex-direction: row; justify-content: space-between; diff --git a/src/routes/skeleton-examples/examples/+layout.component-browser.js b/src/routes/guide-examples/skeleton-examples/+layout.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/+layout.component-browser.js rename to src/routes/guide-examples/skeleton-examples/+layout.component-browser.js diff --git a/src/routes/skeleton-examples/examples/+layout.marko b/src/routes/guide-examples/skeleton-examples/+layout.marko similarity index 100% rename from src/routes/skeleton-examples/examples/+layout.marko rename to src/routes/guide-examples/skeleton-examples/+layout.marko diff --git a/src/routes/skeleton-examples/examples/+layout.style.css b/src/routes/guide-examples/skeleton-examples/+layout.style.css similarity index 96% rename from src/routes/skeleton-examples/examples/+layout.style.css rename to src/routes/guide-examples/skeleton-examples/+layout.style.css index 95b7f5cfa..6ddf556e5 100644 --- a/src/routes/skeleton-examples/examples/+layout.style.css +++ b/src/routes/guide-examples/skeleton-examples/+layout.style.css @@ -6,7 +6,8 @@ main, .page-grid { outline: 0; } -@media (min-width: 512px) { + +@media screen and (min-width: 512px) { main { grid-area: 5 / 1 / span 1 / span 16; } @@ -116,7 +117,7 @@ aside { } /* Skin goes from 8 columns to 16 columns at this SM (small) breakpoint */ -@media (min-width: 512px) { +@media screen and (min-width: 512px) { header { grid-area: 1 / 1 / span 1 / span 16; } diff --git a/src/routes/skeleton-examples/examples/buffered/example-1/+meta.json b/src/routes/guide-examples/skeleton-examples/buffered/example-1/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/buffered/example-1/+meta.json rename to src/routes/guide-examples/skeleton-examples/buffered/example-1/+meta.json diff --git a/src/routes/skeleton-examples/examples/buffered/example-1/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/buffered/example-1/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/buffered/example-1/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/buffered/example-1/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/buffered/example-1/+page.marko b/src/routes/guide-examples/skeleton-examples/buffered/example-1/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/buffered/example-1/+page.marko rename to src/routes/guide-examples/skeleton-examples/buffered/example-1/+page.marko diff --git a/src/routes/skeleton-examples/examples/csr/example-1/+meta.json b/src/routes/guide-examples/skeleton-examples/csr/example-1/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-1/+meta.json rename to src/routes/guide-examples/skeleton-examples/csr/example-1/+meta.json diff --git a/src/routes/skeleton-examples/examples/csr/example-1/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/csr/example-1/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-1/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/csr/example-1/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/csr/example-1/+page.marko b/src/routes/guide-examples/skeleton-examples/csr/example-1/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-1/+page.marko rename to src/routes/guide-examples/skeleton-examples/csr/example-1/+page.marko diff --git a/src/routes/skeleton-examples/examples/csr/example-1/+page.style.css b/src/routes/guide-examples/skeleton-examples/csr/example-1/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-1/+page.style.css rename to src/routes/guide-examples/skeleton-examples/csr/example-1/+page.style.css diff --git a/src/routes/skeleton-examples/examples/csr/example-2/+meta.json b/src/routes/guide-examples/skeleton-examples/csr/example-2/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-2/+meta.json rename to src/routes/guide-examples/skeleton-examples/csr/example-2/+meta.json diff --git a/src/routes/skeleton-examples/examples/csr/example-2/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/csr/example-2/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-2/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/csr/example-2/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/csr/example-2/+page.marko b/src/routes/guide-examples/skeleton-examples/csr/example-2/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-2/+page.marko rename to src/routes/guide-examples/skeleton-examples/csr/example-2/+page.marko diff --git a/src/routes/skeleton-examples/examples/csr/example-2/+page.style.css b/src/routes/guide-examples/skeleton-examples/csr/example-2/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-2/+page.style.css rename to src/routes/guide-examples/skeleton-examples/csr/example-2/+page.style.css diff --git a/src/routes/skeleton-examples/examples/csr/example-3/+meta.json b/src/routes/guide-examples/skeleton-examples/csr/example-3/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-3/+meta.json rename to src/routes/guide-examples/skeleton-examples/csr/example-3/+meta.json diff --git a/src/routes/skeleton-examples/examples/csr/example-3/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/csr/example-3/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-3/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/csr/example-3/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/csr/example-3/+page.marko b/src/routes/guide-examples/skeleton-examples/csr/example-3/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-3/+page.marko rename to src/routes/guide-examples/skeleton-examples/csr/example-3/+page.marko diff --git a/src/routes/skeleton-examples/examples/csr/example-3/+page.style.css b/src/routes/guide-examples/skeleton-examples/csr/example-3/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-3/+page.style.css rename to src/routes/guide-examples/skeleton-examples/csr/example-3/+page.style.css diff --git a/src/routes/skeleton-examples/examples/csr/example-4/+meta.json b/src/routes/guide-examples/skeleton-examples/csr/example-4/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-4/+meta.json rename to src/routes/guide-examples/skeleton-examples/csr/example-4/+meta.json diff --git a/src/routes/skeleton-examples/examples/csr/example-4/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/csr/example-4/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-4/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/csr/example-4/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/csr/example-4/+page.marko b/src/routes/guide-examples/skeleton-examples/csr/example-4/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-4/+page.marko rename to src/routes/guide-examples/skeleton-examples/csr/example-4/+page.marko diff --git a/src/routes/skeleton-examples/examples/csr/example-4/+page.style.css b/src/routes/guide-examples/skeleton-examples/csr/example-4/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/csr/example-4/+page.style.css rename to src/routes/guide-examples/skeleton-examples/csr/example-4/+page.style.css diff --git a/src/routes/skeleton-examples/examples/in-order/example-1a/+meta.json b/src/routes/guide-examples/skeleton-examples/in-order/example-1a/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-1a/+meta.json rename to src/routes/guide-examples/skeleton-examples/in-order/example-1a/+meta.json diff --git a/src/routes/skeleton-examples/examples/in-order/example-1a/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-1a/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/in-order/example-1a/+page.marko b/src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-1a/+page.marko rename to src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.marko diff --git a/src/routes/skeleton-examples/examples/in-order/example-1a/+page.style.css b/src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.style.css similarity index 72% rename from src/routes/skeleton-examples/examples/in-order/example-1a/+page.style.css rename to src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.style.css index d9b1ca68b..c7cf351e5 100644 --- a/src/routes/skeleton-examples/examples/in-order/example-1a/+page.style.css +++ b/src/routes/guide-examples/skeleton-examples/in-order/example-1a/+page.style.css @@ -3,7 +3,8 @@ main, .page-grid { outline: 0; } -@media (min-width: 512px) { + +@media screen and (min-width: 512px) { main { grid-area: 5 / 1 / span 1 / span 16; } diff --git a/src/routes/skeleton-examples/examples/in-order/example-1b/+meta.json b/src/routes/guide-examples/skeleton-examples/in-order/example-1b/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-1b/+meta.json rename to src/routes/guide-examples/skeleton-examples/in-order/example-1b/+meta.json diff --git a/src/routes/skeleton-examples/examples/in-order/example-1b/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-1b/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/in-order/example-1b/+page.marko b/src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-1b/+page.marko rename to src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.marko diff --git a/src/routes/skeleton-examples/examples/in-order/example-1b/+page.style.css b/src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.style.css similarity index 84% rename from src/routes/skeleton-examples/examples/in-order/example-1b/+page.style.css rename to src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.style.css index 772fda941..f044548f5 100644 --- a/src/routes/skeleton-examples/examples/in-order/example-1b/+page.style.css +++ b/src/routes/guide-examples/skeleton-examples/in-order/example-1b/+page.style.css @@ -8,7 +8,8 @@ main, border-radius: 8px; height: 400px; } -@media (min-width: 512px) { + +@media screen and (min-width: 512px) { main { grid-area: 5 / 1 / span 1 / span 16; } diff --git a/src/routes/skeleton-examples/examples/in-order/example-2a/+meta.json b/src/routes/guide-examples/skeleton-examples/in-order/example-2a/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2a/+meta.json rename to src/routes/guide-examples/skeleton-examples/in-order/example-2a/+meta.json diff --git a/src/routes/skeleton-examples/examples/in-order/example-2a/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/in-order/example-2a/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2a/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/in-order/example-2a/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/in-order/example-2a/+page.marko b/src/routes/guide-examples/skeleton-examples/in-order/example-2a/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2a/+page.marko rename to src/routes/guide-examples/skeleton-examples/in-order/example-2a/+page.marko diff --git a/src/routes/skeleton-examples/examples/in-order/example-2a/+page.style.css b/src/routes/guide-examples/skeleton-examples/in-order/example-2a/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2a/+page.style.css rename to src/routes/guide-examples/skeleton-examples/in-order/example-2a/+page.style.css diff --git a/src/routes/skeleton-examples/examples/in-order/example-2b/+meta.json b/src/routes/guide-examples/skeleton-examples/in-order/example-2b/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2b/+meta.json rename to src/routes/guide-examples/skeleton-examples/in-order/example-2b/+meta.json diff --git a/src/routes/skeleton-examples/examples/in-order/example-2b/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/in-order/example-2b/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2b/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/in-order/example-2b/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/in-order/example-2b/+page.marko b/src/routes/guide-examples/skeleton-examples/in-order/example-2b/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2b/+page.marko rename to src/routes/guide-examples/skeleton-examples/in-order/example-2b/+page.marko diff --git a/src/routes/skeleton-examples/examples/in-order/example-2b/+page.style.css b/src/routes/guide-examples/skeleton-examples/in-order/example-2b/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/in-order/example-2b/+page.style.css rename to src/routes/guide-examples/skeleton-examples/in-order/example-2b/+page.style.css diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-1/+meta.json b/src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-1/+meta.json rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+meta.json diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-1/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-1/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-1/+page.marko b/src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-1/+page.marko rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+page.marko diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-1/+page.style.css b/src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-1/+page.style.css rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-1/+page.style.css diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-2/+meta.json b/src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-2/+meta.json rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+meta.json diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-2/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-2/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-2/+page.marko b/src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-2/+page.marko rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+page.marko diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-2/+page.style.css b/src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-2/+page.style.css rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-2/+page.style.css diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-3/+meta.json b/src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-3/+meta.json rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+meta.json diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-3/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-3/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-3/+page.marko b/src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-3/+page.marko rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+page.marko diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-3/+page.style.css b/src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-3/+page.style.css rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-3/+page.style.css diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-4/+meta.json b/src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+meta.json similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-4/+meta.json rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+meta.json diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-4/+page.component-browser.js b/src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+page.component-browser.js similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-4/+page.component-browser.js rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+page.component-browser.js diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-4/+page.marko b/src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+page.marko similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-4/+page.marko rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+page.marko diff --git a/src/routes/skeleton-examples/examples/out-of-order/example-4/+page.style.css b/src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+page.style.css similarity index 100% rename from src/routes/skeleton-examples/examples/out-of-order/example-4/+page.style.css rename to src/routes/guide-examples/skeleton-examples/out-of-order/example-4/+page.style.css diff --git a/src/routes/pricing/+layout.marko b/src/routes/metadata/+layout.marko similarity index 100% rename from src/routes/pricing/+layout.marko rename to src/routes/metadata/+layout.marko diff --git a/src/routes/metadata/+page.marko b/src/routes/metadata/+page.marko index 81355605c..6588684ec 100644 --- a/src/routes/metadata/+page.marko +++ b/src/routes/metadata/+page.marko @@ -1,13 +1,19 @@ import path from "path"; -import {modules} from '../modules.marko'; +import {components} from '../../components/components.marko'; -$ const metad = {} +$ const metadata = {} -$ for(let mod in modules) { - const moduleName = path.basename(mod, '.marko'); - metad[moduleName] = modules[mod].metadata; -} + + $ const componentName = path.basename(comp, '.marko'); + $ const name = componentName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; }); + $ const rawName = name.charAt(0) + name.slice(1); + /* @TODO Fix this line to result in this structure: + "accordion":{"ds-component":{"name":"accordion","version":1}},"alert-dialog":{"ds-component":{"name":"dialog","version":2.1},"submodules":["button"]},"avatar":{"ds-component":{"name":"avatar","version":1}},"badge":{"ds-component":{"name":"badge","version":1.2}},"breadcrumbs":{"ds-component":{"name":"breadcrumb","version":1.2},"submodules":["icon"]},... + */ + $ metadata[component] = components[rawName]; + + @@ -16,6 +22,10 @@ $ for(let mod in modules) { - ${JSON.stringify(metad)} +

        Components

        +

        ${JSON.stringify(components)}

        + +

        Component Metadata

        +

        ${JSON.stringify(metadata)}

        \ No newline at end of file diff --git a/src/routes/modules.marko b/src/routes/modules.marko deleted file mode 100644 index 89235479a..000000000 --- a/src/routes/modules.marko +++ /dev/null @@ -1,6 +0,0 @@ -import flags from "./flags.json" -import icons from "./icons.json" - -static const modules = import.meta.glob("../modules/*.marko", { eager: true }); - -export { modules, flags, icons }; diff --git a/src/routes/page-grid-templates/+layout.marko b/src/routes/page-grid-templates/+layout.marko deleted file mode 100644 index 27de5422a..000000000 --- a/src/routes/page-grid-templates/+layout.marko +++ /dev/null @@ -1,58 +0,0 @@ - - - - Page Grid Templates - - - - - - -
        -
        -
        -
        -

        Page Grid Templates

        - -
        -
        -
        -
        -
        -
        -
        - - <${input.renderBody}/> -
        -
        -
        -

        Copyright © ${(new Date()).getFullYear()} eBay, Inc. All rights reserved.

        -
        -
        -
        - - diff --git a/src/routes/page-grid-templates/+page.marko b/src/routes/page-grid-templates/+page.marko deleted file mode 100644 index 7ff474819..000000000 --- a/src/routes/page-grid-templates/+page.marko +++ /dev/null @@ -1,35 +0,0 @@ -

        Welcome to the Page Grid Templates page where you can find various responsive templates built using Skin's page grid.

        -

        Please bear in mind that these are just examples that may contain experimental features. When implementing page grid in your own application, make sure to double-check support and functionality and test accordingly.

        - -
        -
        -
        -

        Blog with Sub-Grid

        -
        - Open -
        -
        - -
        - - - - -
        -
        -

        Pricing

        -
        - Open -
        -
        - -
        -
        \ No newline at end of file diff --git a/src/routes/skeleton-examples/skeleton/+layout.component-browser.js b/src/routes/skeleton-examples/skeleton/+layout.component-browser.js deleted file mode 100644 index 31af7dc4a..000000000 --- a/src/routes/skeleton-examples/skeleton/+layout.component-browser.js +++ /dev/null @@ -1,4 +0,0 @@ -import "prismjs"; -import "prismjs/themes/prism-tomorrow.css"; - -export default {}; diff --git a/src/routes/skeleton-examples/skeleton/+layout.marko b/src/routes/skeleton-examples/skeleton/+layout.marko deleted file mode 100644 index b4f0abf01..000000000 --- a/src/routes/skeleton-examples/skeleton/+layout.marko +++ /dev/null @@ -1,58 +0,0 @@ - - - - ${$global.meta.title} - - - - - - -
        -
        -
        -
        -

        ${$global.meta.title}

        - -
        -
        -
        -
        -
        -
        -
        - - <${input.renderBody}/> -
        - -
        -
        - - diff --git a/src/routes/static/sass/breakpoints.scss b/src/routes/static/sass/breakpoints.scss index 917761b0b..fc6e318d7 100644 --- a/src/routes/static/sass/breakpoints.scss +++ b/src/routes/static/sass/breakpoints.scss @@ -16,7 +16,7 @@ @media screen and (min-width: $_screen-size-SM) { .site-nav { - height: 100vh; + height: calc(100vh - 60px); margin-bottom: var(--spacing-800); overflow-y: scroll; position: sticky; @@ -24,11 +24,9 @@ } .site-nav h2 { - color: var(--color-neutral-600); - font-size: var(--font-size-large-1); + font-size: var(--font-size-18); margin-bottom: var(--spacing-100); margin-top: var(--spacing-200); - text-transform: uppercase; } .site-nav h2:first-of-type {