├── .browserslistrc ├── .eslintignore ├── .eslintrc.json ├── .firebaserc ├── .github └── workflows │ └── workflow.yml ├── .gitignore ├── .prettierignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── assets ├── assets.sketch ├── brand │ ├── logo-text-dark.png │ ├── logo-text-dark.svg │ ├── logo-text-light.png │ ├── logo-text-light.svg │ ├── logo.png │ ├── logo.svg │ ├── text-dark.png │ ├── text-dark.svg │ ├── text-light.png │ └── text-light.svg ├── browser │ ├── chrome.svg │ ├── edge.svg │ ├── firefox.svg │ ├── opera.svg │ └── safari.svg ├── demo.gif ├── element │ ├── banner.svg │ ├── button.svg │ ├── card.svg │ ├── checkbox.svg │ ├── chips.svg │ ├── dialog.svg │ ├── divider.svg │ ├── drawer.svg │ ├── expansion.svg │ ├── form.svg │ ├── formfield.svg │ ├── icon.svg │ ├── icons.sketch │ ├── intersection.svg │ ├── label.svg │ ├── list.svg │ ├── menu.svg │ ├── progress_bar.svg │ ├── progress_spinner.svg │ ├── radio_button.svg │ ├── ripple.svg │ ├── select.svg │ ├── sheet.svg │ ├── slider.svg │ ├── snackbar.svg │ ├── swipe.svg │ ├── switch.svg │ ├── tab_bar.svg │ ├── tabs.svg │ ├── text.svg │ ├── text_field.svg │ ├── textarea.svg │ ├── textfield.svg │ ├── theme.svg │ ├── toolbar.svg │ ├── tooltip.svg │ ├── typography.svg │ └── util.svg ├── icon │ ├── crystal.svg │ ├── document.svg │ ├── feather.svg │ ├── frameworks.svg │ ├── key.svg │ ├── laptop.svg │ ├── pacman.svg │ ├── palette.svg │ ├── party.svg │ ├── shield.svg │ ├── speed.svg │ └── testing.svg ├── npm-logo.svg ├── octo-star.svg ├── social │ ├── github.svg │ └── twitter.svg └── www │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── manifest.json │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── mstile-70x70.png │ ├── og-image.jpg │ └── safari-pinned-tab.svg ├── blueprint.json ├── blueprint.md ├── firebase.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── post-build.js ├── prettier.config.js ├── rollup-build.config.ts ├── rollup.config.ts ├── screenshots ├── index.ts ├── wl-banner.png ├── wl-button.png ├── wl-card.png ├── wl-checkbox.png ├── wl-dialog.png ├── wl-divider.png ├── wl-expansion.png ├── wl-icon.png ├── wl-label.png ├── wl-list-item.png ├── wl-nav.png ├── wl-popover.png ├── wl-progress-bar.png ├── wl-progress-spinner.png ├── wl-radio.png ├── wl-ripple.png ├── wl-select.png ├── wl-slider.png ├── wl-snackbar.png ├── wl-switch.png ├── wl-tabs.png ├── wl-text.png ├── wl-textarea.png ├── wl-textfield.png ├── wl-title.png └── wl-tooltip.png ├── src ├── demo │ ├── codepen.ts │ ├── constants.ts │ ├── copy-to-clipboard.ts │ ├── elements │ │ ├── code-example │ │ │ ├── code-example-element.scss │ │ │ └── code-example-element.ts │ │ ├── container │ │ │ ├── container-element.scss │ │ │ └── container-element.ts │ │ ├── demo │ │ │ ├── demo-element.scss │ │ │ └── demo-element.ts │ │ ├── footer │ │ │ ├── footer-element.scss │ │ │ └── footer-element.ts │ │ ├── highlight │ │ │ ├── highlight-element.scss │ │ │ └── highlight-element.ts │ │ ├── navbar │ │ │ ├── navbar-element.scss │ │ │ └── navbar-element.ts │ │ ├── octo │ │ │ ├── octo-element.scss │ │ │ └── octo-element.ts │ │ └── theme │ │ │ ├── theme-element.scss │ │ │ ├── theme-element.ts │ │ │ └── theme-helpers.ts │ ├── index.html │ ├── main-content-focus.ts │ ├── main-scroll-target.ts │ ├── main.scss │ ├── main.ts │ ├── pages │ │ ├── elements │ │ │ ├── elements-page.scss │ │ │ ├── elements-page.ts │ │ │ ├── elements-routes.ts │ │ │ └── elements │ │ │ │ ├── banner-page.ts │ │ │ │ ├── button-page.ts │ │ │ │ ├── card-page.ts │ │ │ │ ├── checkbox-page.ts │ │ │ │ ├── dialog-page.ts │ │ │ │ ├── divider-page.ts │ │ │ │ ├── expansion-page.ts │ │ │ │ ├── form-page.ts │ │ │ │ ├── icon-page.ts │ │ │ │ ├── label-page.ts │ │ │ │ ├── list-item-page.ts │ │ │ │ ├── nav-page.ts │ │ │ │ ├── popover-page.ts │ │ │ │ ├── progress-bar-page.ts │ │ │ │ ├── progress-spinner-page.ts │ │ │ │ ├── radio-page.ts │ │ │ │ ├── ripple-page.ts │ │ │ │ ├── select-page.ts │ │ │ │ ├── slider-page.ts │ │ │ │ ├── snackbar-page.ts │ │ │ │ ├── switch-page.ts │ │ │ │ ├── tabs-page.ts │ │ │ │ ├── text-page.ts │ │ │ │ ├── textarea-page.ts │ │ │ │ ├── textfield-page.ts │ │ │ │ ├── theme-page.scss │ │ │ │ ├── theme-page.ts │ │ │ │ ├── title-page.ts │ │ │ │ └── tooltip-page.ts │ │ ├── get-started │ │ │ ├── get-started-page.scss │ │ │ └── get-started-page.ts │ │ └── home │ │ │ ├── home-page.scss │ │ │ └── home-page.ts │ ├── robots.txt │ ├── style │ │ ├── shared.scss │ │ └── shared.ts │ ├── sw-extension.js │ └── track.ts ├── lib │ ├── backdrop │ │ ├── README.md │ │ ├── backdrop-vars.scss │ │ ├── backdrop.scss │ │ ├── backdrop.test.ts │ │ ├── backdrop.ts │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ └── index.ts │ ├── banner │ │ ├── README.md │ │ ├── banner-vars.scss │ │ ├── banner.scss │ │ ├── banner.test.ts │ │ ├── banner.ts │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ └── index.ts │ ├── behavior │ │ ├── button │ │ │ ├── button-behavior.scss │ │ │ ├── button-behavior.ts │ │ │ └── index.ts │ │ ├── checkbox │ │ │ ├── checkbox-behavior.scss │ │ │ ├── checkbox-behavior.ts │ │ │ └── index.ts │ │ ├── form-element │ │ │ ├── form-element-behavior.scss │ │ │ ├── form-element-behavior.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── input │ │ │ ├── index.ts │ │ │ ├── input-behavior.scss │ │ │ ├── input-behavior.ts │ │ │ └── input-vars.scss │ │ ├── overlay │ │ │ ├── index.ts │ │ │ ├── overlay-behavior.scss │ │ │ ├── overlay-behavior.ts │ │ │ ├── queue-overlay.ts │ │ │ └── show-overlay.ts │ │ ├── progress │ │ │ ├── index.ts │ │ │ ├── progress-behavior.scss │ │ │ └── progress-behavior.ts │ │ ├── radio │ │ │ ├── index.ts │ │ │ ├── radio-behavior.scss │ │ │ └── radio-behavior.ts │ │ ├── switch │ │ │ ├── index.ts │ │ │ ├── switch-behavior.scss │ │ │ └── switch-behavior.ts │ │ └── textfield │ │ │ ├── index.ts │ │ │ ├── textfield-behavior.scss │ │ │ └── textfield-behavior.ts │ ├── button │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── button-vars.scss │ │ ├── button.scss │ │ ├── button.test.ts │ │ ├── button.ts │ │ └── index.ts │ ├── card │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── card-vars.scss │ │ ├── card.scss │ │ ├── card.test.ts │ │ ├── card.ts │ │ └── index.ts │ ├── checkbox │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── checkbox-vars.scss │ │ ├── checkbox.scss │ │ ├── checkbox.test.ts │ │ ├── checkbox.ts │ │ └── index.ts │ ├── dialog │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── dialog-vars.scss │ │ ├── dialog.scss │ │ ├── dialog.test.ts │ │ ├── dialog.ts │ │ ├── index.ts │ │ └── show-dialog.ts │ ├── divider │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── divider-vars.scss │ │ ├── divider.scss │ │ ├── divider.test.ts │ │ ├── divider.ts │ │ └── index.ts │ ├── expansion │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── expansion-vars.scss │ │ ├── expansion.scss │ │ ├── expansion.test.ts │ │ ├── expansion.ts │ │ └── index.ts │ ├── icon │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── icon-vars.scss │ │ ├── icon.scss │ │ ├── icon.test.ts │ │ ├── icon.ts │ │ └── index.ts │ ├── index.ts │ ├── label │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── label-vars.scss │ │ ├── label.scss │ │ ├── label.test.ts │ │ └── label.ts │ ├── list-item │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── list-item-vars.scss │ │ ├── list-item.scss │ │ ├── list-item.test.ts │ │ └── list-item.ts │ ├── nav │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── nav-vars.scss │ │ ├── nav.scss │ │ ├── nav.test.ts │ │ └── nav.ts │ ├── popover-card │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── popover-card-vars.scss │ │ ├── popover-card.scss │ │ ├── popover-card.test.ts │ │ └── popover-card.ts │ ├── popover │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── popover-vars.scss │ │ ├── popover.scss │ │ ├── popover.test.ts │ │ ├── popover.ts │ │ └── show-popover.ts │ ├── progress-bar │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── progress-bar-vars.scss │ │ ├── progress-bar.scss │ │ ├── progress-bar.test.ts │ │ └── progress-bar.ts │ ├── progress-spinner │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── progress-spinner-vars.scss │ │ ├── progress-spinner.scss │ │ ├── progress-spinner.test.ts │ │ └── progress-spinner.ts │ ├── radio │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── radio-vars.scss │ │ ├── radio.scss │ │ ├── radio.test.ts │ │ └── radio.ts │ ├── ripple │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── ripple-vars.scss │ │ ├── ripple.scss │ │ ├── ripple.test.ts │ │ └── ripple.ts │ ├── select │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── select-vars.scss │ │ ├── select.scss │ │ ├── select.test.ts │ │ └── select.ts │ ├── slider │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── slider-vars.scss │ │ ├── slider.scss │ │ ├── slider.test.ts │ │ └── slider.ts │ ├── snackbar │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── queue-snackbar.ts │ │ ├── show-snackbar.ts │ │ ├── snackbar-vars.scss │ │ ├── snackbar.scss │ │ ├── snackbar.test.ts │ │ └── snackbar.ts │ ├── style │ │ ├── base.scss │ │ ├── base │ │ │ ├── border-radius.scss │ │ │ ├── breakpoint.scss │ │ │ ├── elevation.scss │ │ │ ├── functions.scss │ │ │ ├── mixins.scss │ │ │ ├── palette.scss │ │ │ ├── size.scss │ │ │ ├── spacing.scss │ │ │ ├── theme-vars.scss │ │ │ ├── theme.scss │ │ │ ├── transition.scss │ │ │ ├── typography.scss │ │ │ └── z-index.scss │ │ ├── shared.scss │ │ └── shared.ts │ ├── switch │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── switch-vars.scss │ │ ├── switch.scss │ │ ├── switch.test.ts │ │ └── switch.ts │ ├── tab-group │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── tab-group-vars.scss │ │ ├── tab-group.scss │ │ ├── tab-group.test.ts │ │ └── tab-group.ts │ ├── tab │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── tab-vars.scss │ │ ├── tab.scss │ │ ├── tab.test.ts │ │ └── tab.ts │ ├── text │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── text-vars.scss │ │ ├── text.scss │ │ ├── text.test.ts │ │ └── text.ts │ ├── textarea │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── textarea-vars.scss │ │ ├── textarea.scss │ │ ├── textarea.test.ts │ │ └── textarea.ts │ ├── textfield │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── textfield-type.ts │ │ ├── textfield-vars.scss │ │ ├── textfield.scss │ │ ├── textfield.test.ts │ │ └── textfield.ts │ ├── title │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── title-vars.scss │ │ ├── title.scss │ │ ├── title.test.ts │ │ └── title.ts │ ├── tooltip │ │ ├── README.md │ │ ├── blueprint.json │ │ ├── blueprint.md │ │ ├── index.ts │ │ ├── tooltip-vars.scss │ │ ├── tooltip.scss │ │ ├── tooltip.test.ts │ │ └── tooltip.ts │ └── util │ │ ├── animation.ts │ │ ├── aria.ts │ │ ├── constant │ │ ├── animation.ts │ │ ├── index.ts │ │ └── keycode.ts │ │ ├── css.ts │ │ ├── dom.ts │ │ ├── event.ts │ │ ├── index.ts │ │ ├── number.ts │ │ ├── position.ts │ │ ├── resize.ts │ │ ├── rowing.ts │ │ ├── style.ts │ │ ├── swipe.ts │ │ ├── theme.ts │ │ └── unique.ts └── test │ └── testing-helpers.ts ├── tsconfig.build.json ├── tsconfig.json ├── tslint.json └── typings.d.ts /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 Chrome versions 2 | last 2 Safari versions 3 | last 2 Firefox versions -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | out 3 | lib -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@appnest/web-config/eslint.js", 3 | "rules": { 4 | "no-console": "error" 5 | } 6 | } -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "weightless-elements" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.github/workflows/workflow.yml: -------------------------------------------------------------------------------- 1 | name: Main Workflow 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | run: 7 | name: Run 8 | 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Checkout code 13 | uses: actions/checkout@master 14 | 15 | - name: Set Node.js 10.x 16 | uses: actions/setup-node@master 17 | with: 18 | node-version: 10.x 19 | 20 | - name: Cache 21 | uses: actions/cache@preview 22 | id: cache 23 | with: 24 | path: node_modules 25 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 26 | restore-keys: | 27 | ${{ runner.os }}-node- 28 | 29 | - name: Install 30 | if: steps.cache.outputs.cache-hit != 'true' 31 | run: npm ci 32 | 33 | - name: Lint 34 | run: npm run lint 35 | 36 | - name: Test 37 | run: npm test 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | .DS_Store 4 | ec2-user-key-pair.pem 5 | /tmp 6 | env.json 7 | 8 | # compiled output 9 | /dist 10 | 11 | # dependencies 12 | /node_modules 13 | /functions/node_modules 14 | 15 | # IDEs and editors 16 | /.idea 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # IDE - VSCode 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | 31 | # misc 32 | /.sass-cache 33 | /connect.lock 34 | /coverage/* 35 | /libpeerconnection.log 36 | npm-debug.log 37 | testem.log 38 | logfile 39 | 40 | # e2e 41 | /e2e/*.js 42 | /e2e/*.map 43 | 44 | #System Files 45 | .DS_Store 46 | Thumbs.db 47 | dump.rdb 48 | 49 | /compiled/ 50 | /.idea/ 51 | /.cache/ 52 | /.vscode/ 53 | *.log 54 | /logs/ 55 | npm-debug.log* 56 | /lib-cov/ 57 | /coverage/ 58 | /.nyc_output/ 59 | /.grunt/ 60 | *.7z 61 | *.dmg 62 | *.gz 63 | *.iso 64 | *.jar 65 | *.rar 66 | *.tar 67 | *.zip 68 | .tgz 69 | .env 70 | .DS_Store? 71 | ._* 72 | .Spotlight-V100 73 | .Trashes 74 | ehthumbs.db 75 | *.pem 76 | *.p12 77 | *.crt 78 | *.csr 79 | /node_modules/ 80 | /dist/ 81 | /documentation/ 82 | .firebase/ 83 | .chrome/ -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.md 2 | node_modules 3 | .DS_Store 4 | .* 5 | *.gif 6 | *.png 7 | dist 8 | out 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | You are more than welcome to contribute to `weightless` in any way you please, including: 2 | 3 | * Updating documentation. 4 | * Fixing spelling and grammar 5 | * Adding tests 6 | * Fixing issues and suggesting new features 7 | * Blogging, tweeting, and creating tutorials about `weightless` 8 | * Reaching out to [@AndreasMehlsen](https://twitter.com/AndreasMehlsen) on Twitter 9 | * Submit an issue or a pull request -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2018 Andreas Mehlsen andmehlsen@gmail.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE -------------------------------------------------------------------------------- /assets/assets.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/assets.sketch -------------------------------------------------------------------------------- /assets/brand/logo-text-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/brand/logo-text-dark.png -------------------------------------------------------------------------------- /assets/brand/logo-text-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/brand/logo-text-light.png -------------------------------------------------------------------------------- /assets/brand/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/brand/logo.png -------------------------------------------------------------------------------- /assets/brand/text-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/brand/text-dark.png -------------------------------------------------------------------------------- /assets/brand/text-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/brand/text-light.png -------------------------------------------------------------------------------- /assets/browser/edge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/browser/opera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/browser/safari.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/demo.gif -------------------------------------------------------------------------------- /assets/element/banner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | banner 5 | Created with Sketch. 6 | 7 | 15 | -------------------------------------------------------------------------------- /assets/element/button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | button 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/element/card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | card 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/element/checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | checkbox 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/element/chips.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chips 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/dialog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | dialog 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/element/divider.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | divider 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/element/drawer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | drawer 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/expansion.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | expansion 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/element/form.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | form 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/element/formfield.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | formfield 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/element/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/element/icons.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/element/icons.sketch -------------------------------------------------------------------------------- /assets/element/intersection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | intersection 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/label.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | label 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/element/list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | list 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | popover 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/element/progress_bar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | progress_bar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/progress_spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | progress_spinner 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/radio_button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | radio_button 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/ripple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ripple 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/select.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | select 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/sheet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | sheet 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/element/slider.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | slider 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/element/snackbar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | snackbar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/element/swipe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | swipe 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/element/switch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | switch 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/tab_bar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tab_bar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/element/tabs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tabs 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | text 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/element/text_field.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | text_field 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/textfield.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | textfield 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/theme.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | theme 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /assets/element/toolbar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | toolbar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/element/tooltip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tooltip 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/element/typography.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | typography 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/element/util.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | util 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/icon/pacman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pacman 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/npm-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/social/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | twitter 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/www/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/www/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/www/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/www/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #84a5ff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/www/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/favicon-16x16.png -------------------------------------------------------------------------------- /assets/www/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/favicon-32x32.png -------------------------------------------------------------------------------- /assets/www/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/favicon.ico -------------------------------------------------------------------------------- /assets/www/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Weightless", 3 | "short_name": "Weightless", 4 | "icons": [ 5 | { 6 | "src": "/assets/www/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/assets/www/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone", 19 | "lang": "en-US" 20 | } 21 | -------------------------------------------------------------------------------- /assets/www/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/mstile-144x144.png -------------------------------------------------------------------------------- /assets/www/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/mstile-150x150.png -------------------------------------------------------------------------------- /assets/www/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/mstile-310x150.png -------------------------------------------------------------------------------- /assets/www/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/mstile-310x310.png -------------------------------------------------------------------------------- /assets/www/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/mstile-70x70.png -------------------------------------------------------------------------------- /assets/www/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/assets/www/og-image.jpg -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "dist", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | const {defaultResolvePlugins, defaultKarmaConfig} = require("@appnest/web-config"); 2 | const path = require("path"); 3 | 4 | module.exports = (config) => { 5 | config.set({ 6 | ...defaultKarmaConfig({ 7 | rollupPlugins: defaultResolvePlugins() 8 | }), 9 | basePath: "src", 10 | logLevel: config.LOG_INFO, 11 | client: { 12 | captureConsole: true, 13 | mocha: { 14 | bail: true 15 | } 16 | }, 17 | customLaunchers: { 18 | Chrome_with_debugging: { 19 | base: "Chrome", 20 | chromeDataDir: path.resolve(__dirname, '.chrome') 21 | } 22 | } 23 | }); 24 | }; -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require("./node_modules/@appnest/web-config/prettier.config.js") 3 | }; -------------------------------------------------------------------------------- /screenshots/wl-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-banner.png -------------------------------------------------------------------------------- /screenshots/wl-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-button.png -------------------------------------------------------------------------------- /screenshots/wl-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-card.png -------------------------------------------------------------------------------- /screenshots/wl-checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-checkbox.png -------------------------------------------------------------------------------- /screenshots/wl-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-dialog.png -------------------------------------------------------------------------------- /screenshots/wl-divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-divider.png -------------------------------------------------------------------------------- /screenshots/wl-expansion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-expansion.png -------------------------------------------------------------------------------- /screenshots/wl-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-icon.png -------------------------------------------------------------------------------- /screenshots/wl-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-label.png -------------------------------------------------------------------------------- /screenshots/wl-list-item.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-list-item.png -------------------------------------------------------------------------------- /screenshots/wl-nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-nav.png -------------------------------------------------------------------------------- /screenshots/wl-popover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-popover.png -------------------------------------------------------------------------------- /screenshots/wl-progress-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-progress-bar.png -------------------------------------------------------------------------------- /screenshots/wl-progress-spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-progress-spinner.png -------------------------------------------------------------------------------- /screenshots/wl-radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-radio.png -------------------------------------------------------------------------------- /screenshots/wl-ripple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-ripple.png -------------------------------------------------------------------------------- /screenshots/wl-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-select.png -------------------------------------------------------------------------------- /screenshots/wl-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-slider.png -------------------------------------------------------------------------------- /screenshots/wl-snackbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-snackbar.png -------------------------------------------------------------------------------- /screenshots/wl-switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-switch.png -------------------------------------------------------------------------------- /screenshots/wl-tabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-tabs.png -------------------------------------------------------------------------------- /screenshots/wl-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-text.png -------------------------------------------------------------------------------- /screenshots/wl-textarea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-textarea.png -------------------------------------------------------------------------------- /screenshots/wl-textfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-textfield.png -------------------------------------------------------------------------------- /screenshots/wl-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-title.png -------------------------------------------------------------------------------- /screenshots/wl-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/weightless/d236c67242d2197d7922b374a55cdbd2b592fa37/screenshots/wl-tooltip.png -------------------------------------------------------------------------------- /src/demo/copy-to-clipboard.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copies text to clipboard. 3 | * @param text 4 | */ 5 | export function copyToClipboard(text: string) { 6 | // Create input and add it to the DOM 7 | const $input = document.createElement("input"); 8 | $input.style.opacity = `0`; 9 | $input.style.position = `absolute`; 10 | $input.value = text; 11 | document.documentElement.appendChild($input); 12 | 13 | // Select and copy 14 | $input.select(); 15 | document.execCommand("copy"); 16 | 17 | // Remove the input again - nobody noticed! 18 | document.documentElement.removeChild($input); 19 | } 20 | -------------------------------------------------------------------------------- /src/demo/elements/code-example/code-example-element.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | #highlighter { 8 | text-align: left; 9 | } 10 | 11 | #tools { 12 | opacity: 0.2; 13 | transition: #{$transition-duration-fast} #{$transition-ease} opacity; 14 | position: absolute; 15 | top: $spacing-m; 16 | right: $spacing-m; 17 | display: flex; 18 | 19 | &:hover, &:focus-within { 20 | opacity: 1; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/demo/elements/container/container-element.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | :host { 4 | padding: var(--container-padding, #{size(100)} #{$spacing-m}); 5 | display: block; 6 | } 7 | 8 | :host([centered]) { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | #container { 15 | max-width: var(--container-max-width, #{size(1000)}); 16 | margin: 0 auto; 17 | } 18 | 19 | -------------------------------------------------------------------------------- /src/demo/elements/container/container-element.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement, property } from "lit-element"; 2 | import { cssResult } from "../../../lib/util/css"; 3 | import { sharedStyles } from "../../style/shared"; 4 | 5 | import styles from "./container-element.scss"; 6 | 7 | @customElement("container-element") 8 | export class ContainerElement extends LitElement { 9 | static styles = [sharedStyles, cssResult(styles)]; 10 | 11 | @property({ type: Boolean, reflect: true }) centered = false; 12 | 13 | /** 14 | * Returns the template for the element. 15 | */ 16 | protected render() { 17 | return html` 18 |
19 | 20 |
21 | `; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/demo/elements/demo/demo-element.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | :host { 4 | background: #{$background}; 5 | padding: #{size(70)} #{size(50)}; 6 | margin: #{$spacing-m} 0 #{$spacing-l}; 7 | text-align: center; 8 | position: relative; 9 | } 10 | 11 | :host([default]) { 12 | background: #{color("shade", 200)}; 13 | } 14 | 15 | @media #{$screen-s-and-down} { 16 | :host { 17 | padding: #{size(25)} #{size(20)}; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/demo/elements/demo/demo-element.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, property } from "lit-element"; 2 | import { Card } from "../../../lib/card/card"; 3 | import { cssResult } from "../../../lib/util/css"; 4 | 5 | import styles from "./demo-element.scss"; 6 | 7 | @customElement("demo-element") 8 | export class DemoElement extends Card { 9 | static styles = [...Card.styles, cssResult(styles)]; 10 | 11 | @property({ type: Boolean, reflect: true }) default = false; 12 | 13 | /** 14 | * Returns the template for the component. 15 | */ 16 | protected render() { 17 | return html` 18 | 19 | `; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/demo/elements/footer/footer-element.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | :host { 4 | position: relative; 5 | justify-content: space-between; 6 | background: #{color("shade", 200)}; 7 | padding: $spacing-l $spacing-xl; 8 | } 9 | 10 | :host, aside { 11 | display: flex; 12 | align-items: center; 13 | } 14 | 15 | .social { 16 | margin: 0 0 0 $spacing-m; 17 | 18 | .img { 19 | width: #{size(30)}; 20 | } 21 | 22 | &:hover { 23 | opacity: 0.8; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/demo/elements/footer/footer-element.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement, property, PropertyValues } from "lit-element"; 2 | import "../../../lib/button"; 3 | import { AriaRole } from "../../../lib/util/aria"; 4 | import { cssResult } from "../../../lib/util/css"; 5 | import { GITHUB_URL, TWITTER_URL } from "../../constants"; 6 | import { sharedStyles } from "../../style/shared"; 7 | import styles from "./footer-element.scss"; 8 | 9 | @customElement("footer-element") 10 | export class FooterComponent extends LitElement { 11 | static styles = [sharedStyles, cssResult(styles)]; 12 | 13 | @property({ type: String, reflect: true }) role: AriaRole = "contentinfo"; 14 | 15 | protected render() { 16 | return html` 17 | 23 | 31 | `; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/demo/elements/octo/octo-element.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | $octo-size: var(--octo-size, #{size(60)}); 4 | $octo-bg: var(--octo-bg, #{$background}); 5 | $octo-color: var(--octo-color, #{$foreground}); 6 | $octo-animation: var(--octo-animation, 500ms ease-in-out wave); 7 | 8 | :host { 9 | width: $octo-size; 10 | height: $octo-size; 11 | display: block; 12 | } 13 | 14 | :host(:hover) { 15 | #octo-arm { 16 | animation: $octo-animation; 17 | } 18 | } 19 | 20 | #octo { 21 | fill: $octo-bg; 22 | } 23 | 24 | #octo-arm { 25 | transform-origin: 130px 106px; 26 | } 27 | 28 | #octo-banner { 29 | fill: $octo-color; 30 | } 31 | 32 | @keyframes wave { 33 | 0%, 100% { 34 | transform: rotate(0deg); 35 | } 36 | 20%, 60% { 37 | transform: rotate(-25deg); 38 | } 39 | 40%, 80% { 40 | transform: rotate(10deg); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/demo/elements/octo/octo-element.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import { cssResult } from "../../../lib/util/css"; 3 | import { sharedStyles } from "../../style/shared"; 4 | 5 | import styles from "./octo-element.scss"; 6 | 7 | @customElement("octo-element") 8 | export class OctoElement extends LitElement { 9 | static styles = [sharedStyles, cssResult(styles)]; 10 | 11 | /** 12 | * Returns the template for the element. 13 | */ 14 | protected render() { 15 | return html` 16 | 17 | 18 | 19 | 23 | 24 | `; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/demo/elements/theme/theme-element.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | :host { 4 | display: grid; 5 | grid-gap: #{$spacing-m}; 6 | padding: #{$spacing-m}; 7 | color: white; 8 | grid-template-columns: repeat(auto-fit, #{size(40)}); 9 | width: #{size(120)}; 10 | } 11 | 12 | .theme-button, #custom-color-picker { 13 | border-radius: 100%; 14 | width: #{size(40)}; 15 | height: #{size(40)}; 16 | cursor: pointer; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | outline: none; 21 | overflow: hidden; 22 | border: none; 23 | font-size: inherit; 24 | } 25 | 26 | .theme-button:focus { 27 | box-shadow: elevation(4); 28 | } 29 | 30 | #custom-color-picker { 31 | position: relative; 32 | 33 | &::-webkit-color-swatch-wrapper { 34 | padding: 0; 35 | } 36 | 37 | &::-webkit-color-swatch { 38 | border: none; 39 | width: 100%; 40 | height: 100%; 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/demo/main-content-focus.ts: -------------------------------------------------------------------------------- 1 | let mainContentStart: HTMLElement | null; 2 | 3 | export function setMainContentStart($elem: HTMLElement | null) { 4 | mainContentStart = $elem; 5 | } 6 | 7 | export function focusMainContentStart() { 8 | if (mainContentStart != null) { 9 | mainContentStart.focus(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/demo/main-scroll-target.ts: -------------------------------------------------------------------------------- 1 | let mainScrollTarget: HTMLElement | Window = window; 2 | 3 | export function setMainScrollContainer(target: HTMLElement | Window) { 4 | mainScrollTarget = target; 5 | } 6 | 7 | export function getMainScrollContainer(): HTMLElement | Window { 8 | return mainScrollTarget; 9 | } 10 | -------------------------------------------------------------------------------- /src/demo/main.scss: -------------------------------------------------------------------------------- 1 | @import "../lib/style/base"; 2 | 3 | //:focus:focus-within { 4 | // outline: 2px solid blue; 5 | //} 6 | 7 | html { 8 | font-family: $font-family-serif; 9 | color: $foreground; 10 | background: $background; 11 | overflow-x: hidden; 12 | overflow-y: overlay; 13 | --webkit-overflow-scrolling: touch; 14 | font-display: swap; 15 | 16 | &.theme-red { 17 | @include theme-variables(( 18 | "primary": $palette-red 19 | ), $validate: false); 20 | } 21 | } 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | #navbar { 28 | 29 | } 30 | 31 | #router { 32 | padding-top: var(--nav-height); 33 | } 34 | 35 | #router, #router-slot { 36 | height: 100%; 37 | } 38 | 39 | #navbar { 40 | flex-shrink: 0; 41 | } 42 | 43 | #app { 44 | --nav-height: #{size(60)}; 45 | } 46 | 47 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/banner-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../elements/code-example/code-example-element"; 3 | import "../../../elements/demo/demo-element"; 4 | import "../../../../lib/banner/banner"; 5 | import "../../../../lib/button/button"; 6 | import "../../../../lib/icon/icon"; 7 | import "../../../../lib/title/title"; 8 | import { sharedStyles } from "../../../style/shared"; 9 | 10 | @customElement("banner-page") 11 | export default class BannerPage extends LitElement { 12 | static styles = [sharedStyles]; 13 | 14 | protected render() { 15 | return html` 16 | 17 | 18 | 19 | account_box 20 | Continue as guest 21 | Sign in 22 | Your password was updated on your other device. Please sign in again. 23 | 24 | 25 | 26 | `; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/card-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/card/card"; 3 | import "../../../../lib/title/title"; 4 | import "../../../elements/code-example/code-example-element"; 5 | import "../../../elements/demo/demo-element"; 6 | import { sharedStyles } from "../../../style/shared"; 7 | 8 | @customElement("card-page") 9 | export default class CardPage extends LitElement { 10 | static styles = [sharedStyles]; 11 | 12 | protected render() { 13 | return html` 14 | 15 | 16 | Card 17 | 18 | 19 | 20 | Hoverable 21 | 22 | 23 | Card 24 | 25 | 26 | `; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/checkbox-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/checkbox/checkbox"; 3 | import "../../../elements/code-example/code-example-element"; 4 | import "../../../elements/demo/demo-element"; 5 | import "../../../../lib/title/title"; 6 | import { sharedStyles } from "../../../style/shared"; 7 | 8 | @customElement("checkbox-page") 9 | export default class CheckboxPage extends LitElement { 10 | static styles = [sharedStyles]; 11 | 12 | protected render() { 13 | return html` 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Disabled 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | `; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/divider-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement, unsafeCSS } from "lit-element"; 2 | import { sharedStyles } from "../../../style/shared"; 3 | import "../../../../lib/divider/divider"; 4 | import "../../../../lib/title/title"; 5 | import "../../../elements/code-example/code-example-element"; 6 | import "../../../elements/demo/demo-element"; 7 | 8 | @customElement("divider-page") 9 | export default class DividerPage extends LitElement { 10 | static styles = [ 11 | sharedStyles, 12 | unsafeCSS` 13 | wl-divider[vertical] { 14 | height: 100px; 15 | margin: 0 auto; 16 | } 17 | ` 18 | ]; 19 | 20 | protected render() { 21 | return html` 22 | 23 | 24 | 25 | 26 | 27 | 28 | Vertical 29 | 30 | 31 | 32 | 33 | 34 | `; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/icon-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/icon/icon"; 3 | import "../../../../lib/title/title"; 4 | import "../../../elements/code-example/code-example-element"; 5 | import "../../../elements/demo/demo-element"; 6 | import { sharedStyles } from "../../../style/shared"; 7 | 8 | @customElement("icon-page") 9 | export default class IconPage extends LitElement { 10 | static styles = [sharedStyles]; 11 | 12 | protected render() { 13 | return html` 14 | 15 | 16 | warning 17 | 18 | 19 | 20 | Different sizes 21 | 22 | 23 | account_box 24 | delete 25 | done 26 | print 27 | 28 | 29 | `; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/label-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/checkbox/checkbox"; 3 | import "../../../../lib/label/label"; 4 | import "../../../../lib/title/title"; 5 | import "../../../elements/code-example/code-example-element"; 6 | import "../../../elements/demo/demo-element"; 7 | import { sharedStyles } from "../../../style/shared"; 8 | 9 | @customElement("label-page") 10 | export default class LabelPage extends LitElement { 11 | static styles = [sharedStyles]; 12 | 13 | protected render() { 14 | return html` 15 | 16 | 17 | 18 | This is a label 19 | 20 | 21 | 22 | Slotted form elements 23 | 24 | 25 | 26 | 27 | This is a label 28 | 29 | 30 | 31 | 32 | Nowrap 33 | 34 | 35 | 36 | 37 | This is a label with nowrap 38 | 39 | 40 | 41 | 42 | Required 43 | 44 | 45 | This label is required 46 | 47 | 48 | `; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/nav-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement, unsafeCSS } from "lit-element"; 2 | import "../../../elements/code-example/code-example-element"; 3 | import "../../../elements/demo/demo-element"; 4 | import "../../../../lib/button/button"; 5 | import "../../../../lib/nav/nav"; 6 | import "../../../../lib/icon/icon"; 7 | import "../../../../lib/title/title"; 8 | import { sharedStyles } from "../../../style/shared"; 9 | 10 | @customElement("nav-page") 11 | export default class BannerPage extends LitElement { 12 | static styles = [ 13 | sharedStyles, 14 | unsafeCSS` 15 | a:not(:last-child) { 16 | margin: 0 12px 0 0; 17 | } 18 | ` 19 | ]; 20 | 21 | protected render() { 22 | return html` 23 | 24 | 25 | 26 |
27 | 28 | menu 29 | 30 |
31 |

Page title

32 |
33 | Link 1 34 | Link 2 35 |
36 | 37 | 38 | 39 | `; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/progress-bar-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/progress-bar/progress-bar"; 3 | import "../../../../lib/title/title"; 4 | import { cssResult } from "../../../../lib/util/css"; 5 | import "../../../elements/code-example/code-example-element"; 6 | import "../../../elements/demo/demo-element"; 7 | import { sharedStyles } from "../../../style/shared"; 8 | 9 | @customElement("progress-bar-page") 10 | export default class ProgressBarPage extends LitElement { 11 | static styles = [ 12 | sharedStyles, 13 | cssResult(` 14 | wl-progress-bar:not(:last-child) { 15 | margin: 0 0 12px; 16 | } 17 | `) 18 | ]; 19 | 20 | protected render() { 21 | return html` 22 | 23 | 24 | 25 | 26 | 27 | 28 | Determinate 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | `; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/progress-spinner-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/progress-spinner/progress-spinner"; 3 | import "../../../../lib/title/title"; 4 | import "../../../elements/code-example/code-example-element"; 5 | import "../../../elements/demo/demo-element"; 6 | import { sharedStyles } from "../../../style/shared"; 7 | 8 | @customElement("progress-spinner-page") 9 | export default class ProgressSpinnerPage extends LitElement { 10 | static styles = [sharedStyles]; 11 | 12 | protected render() { 13 | return html` 14 | 15 | 16 | 17 | 18 | 19 | 20 | Determinate 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | `; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/radio-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/checkbox/checkbox"; 3 | import "../../../../lib/radio/radio"; 4 | import "../../../../lib/title/title"; 5 | import "../../../elements/code-example/code-example-element"; 6 | import "../../../elements/demo/demo-element"; 7 | import { sharedStyles } from "../../../style/shared"; 8 | 9 | @customElement("radio-page") 10 | export default class RadioPage extends LitElement { 11 | static styles = [sharedStyles]; 12 | 13 | protected render() { 14 | return html` 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Disabled 24 | 25 | 26 | 27 | 28 | 29 | 30 | `; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/switch-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/switch/switch"; 3 | import "../../../elements/code-example/code-example-element"; 4 | import "../../../elements/demo/demo-element"; 5 | import "../../../../lib/title/title"; 6 | import { sharedStyles } from "../../../style/shared"; 7 | 8 | @customElement("switch-page") 9 | export default class SwitchPage extends LitElement { 10 | static styles = [sharedStyles]; 11 | 12 | protected render() { 13 | return html` 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Disabled 22 | 23 | 24 | 25 | 26 | 27 | 28 | `; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/title-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/label/label"; 3 | import "../../../../lib/title/title"; 4 | import "../../../elements/code-example/code-example-element"; 5 | import "../../../elements/demo/demo-element"; 6 | import { sharedStyles } from "../../../style/shared"; 7 | 8 | @customElement("title-page") 9 | export default class ButtonPage extends LitElement { 10 | static styles = [sharedStyles]; 11 | 12 | protected render() { 13 | return html` 14 | 15 | 16 | This is a H1 element 17 | This is a H2 element 18 | This is a H3 element 19 | This is a H4 element 20 | This is a H5 element 21 | This is a H6 element 22 | 23 | 24 | `; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/demo/pages/elements/elements/tooltip-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement } from "lit-element"; 2 | import "../../../../lib/title/title"; 3 | import "../../../../lib/tooltip/tooltip"; 4 | import "../../../elements/code-example/code-example-element"; 5 | import "../../../elements/demo/demo-element"; 6 | import { getMainScrollContainer } from "../../../main-scroll-target"; 7 | import { sharedStyles } from "../../../style/shared"; 8 | 9 | @customElement("tooltip-page") 10 | export default class TooltipPage extends LitElement { 11 | static styles = [sharedStyles]; 12 | 13 | protected render() { 14 | return html` 15 | 16 | 17 | This is a tooltip 18 | 19 | 20 | 21 | Auto open popovers anchored to an element 22 | 23 | 26 | Hover me! 27 | 37 | This is a tooltip 38 | 39 | 40 | 41 | `; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/demo/pages/get-started/get-started-page.scss: -------------------------------------------------------------------------------- 1 | @import "../../../lib/style/base"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | wl-divider { 8 | margin: $spacing-l 0 0 0; 9 | } 10 | 11 | -------------------------------------------------------------------------------- /src/demo/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / -------------------------------------------------------------------------------- /src/demo/style/shared.scss: -------------------------------------------------------------------------------- 1 | @import "../../lib/style/base"; 2 | 3 | * { 4 | @include reset(); 5 | } 6 | -------------------------------------------------------------------------------- /src/demo/style/shared.ts: -------------------------------------------------------------------------------- 1 | import { cssResult } from "../../lib/util/css"; 2 | import styles from "./shared.scss"; 3 | 4 | export const sharedStyles = cssResult(styles); 5 | -------------------------------------------------------------------------------- /src/demo/sw-extension.js: -------------------------------------------------------------------------------- 1 | // Hello World -------------------------------------------------------------------------------- /src/demo/track.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | interface Window { 3 | gtag: any; 4 | } 5 | } 6 | 7 | /** 8 | * Tracks an event. 9 | * @param arguments 10 | * @param args 11 | */ 12 | export function track(...args: any[]) { 13 | window.gtag(...args); 14 | } 15 | 16 | /** 17 | * Tracks a cta event. 18 | * @param name 19 | */ 20 | export function trackCtaEvent(name: string) { 21 | track("event", name, { 22 | eventCategory: "Cta" 23 | }); 24 | } 25 | 26 | /** 27 | * Tracks the get started event. 28 | */ 29 | export function trackGetStartedEvent() { 30 | trackCtaEvent("get-started"); 31 | } 32 | 33 | /** 34 | * Tracks the github source event. 35 | */ 36 | export function trackGithubSourceEvent() { 37 | trackCtaEvent("github-source"); 38 | } 39 | 40 | /** 41 | * Tracks the github stars event. 42 | */ 43 | export function trackGithubStarsEvent() { 44 | trackCtaEvent("github-stars"); 45 | } 46 | -------------------------------------------------------------------------------- /src/lib/backdrop/backdrop-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Background */ 4 | $backdrop-bg: var(--backdrop-bg, rgba(0, 0, 0, 0.6)); 5 | -------------------------------------------------------------------------------- /src/lib/backdrop/backdrop.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "backdrop-vars"; 3 | 4 | :host { 5 | background: $backdrop-bg; 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | outline: none; 12 | } -------------------------------------------------------------------------------- /src/lib/backdrop/backdrop.test.ts: -------------------------------------------------------------------------------- 1 | import { createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 2 | import "../backdrop"; 3 | import { Backdrop } from "./backdrop"; 4 | 5 | describe("wl-backdrop", () => { 6 | const { expect } = chai; 7 | let $backdrop: Backdrop; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = ``; 15 | 16 | await waitForElement("wl-backdrop"); 17 | $backdrop = $container.querySelector("wl-backdrop")!; 18 | }); 19 | after(() => removeContainer($container)); 20 | 21 | it("should have a presentation role", () => { 22 | expect($backdrop).to.exist; 23 | expect($backdrop.getAttribute("role")).to.equal("presentation"); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/lib/backdrop/backdrop.ts: -------------------------------------------------------------------------------- 1 | import { html, LitElement, property, TemplateResult } from "lit-element"; 2 | import { customElement } from "lit-element"; 3 | import { AriaRole } from "../util/aria"; 4 | import { cssResult } from "../util/css"; 5 | 6 | import styles from "./backdrop.scss"; 7 | 8 | /** 9 | * Backdrop properties. 10 | */ 11 | export interface IBackdropProperties {} 12 | 13 | /** 14 | * Dark layer to use behind overlayed elements. 15 | * @cssprop --backdrop-bg - Background. 16 | */ 17 | @customElement("wl-backdrop") 18 | export class Backdrop extends LitElement implements IBackdropProperties { 19 | static styles = [cssResult(styles)]; 20 | 21 | /** 22 | * Role of the backdrop. 23 | * @attr 24 | */ 25 | @property({ type: String, reflect: true }) role: AriaRole = "presentation"; 26 | 27 | /** 28 | * Returns the template of the element. 29 | */ 30 | protected render(): TemplateResult { 31 | return html``; 32 | } 33 | } 34 | 35 | declare global { 36 | interface HTMLElementTagNameMap { 37 | "wl-backdrop": Backdrop; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/lib/backdrop/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/backdrop/blueprint.md", 4 | "output": "src/lib/backdrop/README.md", 5 | "tag": "wl-backdrop", 6 | "demo": "https://weightless.dev/elements/dialog" 7 | } -------------------------------------------------------------------------------- /src/lib/backdrop/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/backdrop/backdrop.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} 13 | -------------------------------------------------------------------------------- /src/lib/backdrop/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./backdrop"; 2 | -------------------------------------------------------------------------------- /src/lib/banner/banner-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Margin of the icon slot */ 4 | $banner-icon-margin: var(--banner-icon-margin, 0 #{$spacing-m} 0 0); 5 | 6 | /* Padding */ 7 | $banner-padding: var(--banner-padding, #{$spacing-s}); 8 | 9 | /* Padding of the content slot */ 10 | $banner-content-padding: var(--banner-content-padding, #{$spacing-s} #{$spacing-m}); 11 | 12 | /* Color of the icon */ 13 | $banner-icon-color: var(--banner-icon-color, #{color("primary")}); 14 | 15 | /* Color */ 16 | $banner-color: var(--banner-color, #{$foreground}); 17 | 18 | /* Background */ 19 | $banner-bg: var(--banner-bg, #{$background}); 20 | 21 | -------------------------------------------------------------------------------- /src/lib/banner/banner.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "banner-vars"; 3 | 4 | :host { 5 | padding: $banner-padding; 6 | color: $banner-color; 7 | background: $banner-bg; 8 | 9 | flex-wrap: wrap; 10 | justify-content: flex-end; 11 | text-align: left; 12 | position: relative; 13 | } 14 | 15 | :host, #content, #actions { 16 | display: flex; 17 | align-items: center; 18 | flex-wrap: wrap; 19 | } 20 | 21 | ::slotted([slot="icon"]) { 22 | margin: $banner-icon-margin; 23 | color: $banner-icon-color; 24 | } 25 | 26 | #content { 27 | padding: $banner-content-padding; 28 | flex-grow: 1; 29 | } 30 | 31 | #divider { 32 | position: absolute; 33 | left: 0; 34 | bottom: 0; 35 | width: 100%; 36 | } 37 | -------------------------------------------------------------------------------- /src/lib/banner/banner.test.ts: -------------------------------------------------------------------------------- 1 | import "../banner"; 2 | import "../button"; 3 | import "../icon"; 4 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 5 | import { Banner } from "./banner"; 6 | 7 | describe("wl-banner", () => { 8 | const { expect } = chai; 9 | let $banner: Banner; 10 | let $container: HTMLElement; 11 | 12 | before(() => { 13 | $container = createContainer(); 14 | }); 15 | beforeEach(async () => { 16 | $container.innerHTML = ` 17 | 18 | account_box 19 | Continue as guest 20 | Sign in 21 | Your password was updated on your other device. Please sign in again. 22 | `; 23 | 24 | await waitForElement("wl-banner"); 25 | $banner = $container.querySelector("wl-banner")!; 26 | }); 27 | after(() => removeContainer($container)); 28 | 29 | it("should render the slots", async () => { 30 | const assignedNodes = assignedNodesMap($banner.shadowRoot!); 31 | 32 | expect(assignedNodes["icon"].length).to.be.above(0); 33 | expect(assignedNodes["action"].length).to.be.above(0); 34 | expect(assignedNodes[""].length).to.be.above(0); 35 | }); 36 | 37 | /** 38 | * ARIA TESTS: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_role 39 | */ 40 | it("should have a banner role", () => { 41 | expect($banner.getAttribute("role")).to.equal("banner"); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /src/lib/banner/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/banner/blueprint.md", 4 | "output": "src/lib/banner/README.md", 5 | "tag": "wl-banner", 6 | "demo": "https://weightless.dev/elements/banner", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-banner.png" 8 | } -------------------------------------------------------------------------------- /src/lib/banner/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/banner/banner.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/banner/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./banner"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/button/button-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | -------------------------------------------------------------------------------- /src/lib/behavior/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./button-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/checkbox/checkbox-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | -------------------------------------------------------------------------------- /src/lib/behavior/checkbox/checkbox-behavior.ts: -------------------------------------------------------------------------------- 1 | import { property, PropertyValues } from "lit-element"; 2 | import { cssResult } from "../../util/css"; 3 | import { ISwitchBehaviorProperties, SwitchBehavior } from "../switch/switch-behavior"; 4 | 5 | import styles from "./checkbox-behavior.scss"; 6 | 7 | /** 8 | * Properties of the checkbox behavior. 9 | */ 10 | export interface ICheckboxBehaviorProperties extends ISwitchBehaviorProperties {} 11 | 12 | /** 13 | * Provides checkbox behavior. 14 | */ 15 | export abstract class CheckboxBehavior extends SwitchBehavior implements ICheckboxBehaviorProperties { 16 | static styles = [...SwitchBehavior.styles, cssResult(styles)]; 17 | 18 | /** 19 | * Indeterminate checkbox state. 20 | * @attr 21 | */ 22 | @property({ type: Boolean, reflect: true }) indeterminate: boolean = false; 23 | 24 | /** 25 | * Checks and unchecks the checkbox. 26 | */ 27 | protected toggle() { 28 | // If the checkbox is indeterminate we always remove that state first. 29 | if (this.indeterminate) { 30 | this.indeterminate = false; 31 | } 32 | 33 | this.checked = !this.checked; 34 | this.dispatchChangeEvent(); 35 | } 36 | 37 | /** 38 | * Updates the aria attributes. 39 | * @param props 40 | */ 41 | protected updateAria(props: PropertyValues) { 42 | if (props.has("checked") || props.has("indeterminate")) { 43 | this.ariaChecked = this.indeterminate ? `mixed` : this.checked.toString(); 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/lib/behavior/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./checkbox-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/form-element/form-element-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/lib/behavior/form-element/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./form-element-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./switch"; 2 | export * from "./checkbox"; 3 | export * from "./form-element"; 4 | export * from "./input"; 5 | export * from "./overlay"; 6 | export * from "./progress"; 7 | -------------------------------------------------------------------------------- /src/lib/behavior/input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./input-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/overlay/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./overlay-behavior"; 2 | export * from "./show-overlay"; 3 | -------------------------------------------------------------------------------- /src/lib/behavior/overlay/overlay-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | :host([backdrop]) { 4 | #backdrop { 5 | display: block; 6 | } 7 | } 8 | 9 | #backdrop { 10 | display: none; 11 | pointer-events: all; 12 | } 13 | -------------------------------------------------------------------------------- /src/lib/behavior/progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./progress-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/progress/progress-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/radio/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./radio-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/radio/radio-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | -------------------------------------------------------------------------------- /src/lib/behavior/switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./switch-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/switch/switch-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | -------------------------------------------------------------------------------- /src/lib/behavior/textfield/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./textfield-behavior"; 2 | -------------------------------------------------------------------------------- /src/lib/behavior/textfield/textfield-behavior.scss: -------------------------------------------------------------------------------- 1 | @import "../../style/base"; 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/lib/behavior/textfield/textfield-behavior.ts: -------------------------------------------------------------------------------- 1 | import { property } from "lit-element"; 2 | import { cssResult } from "../../util/css"; 3 | import { IInputBehaviorProperties, InputBehavior } from "../input/input-behavior"; 4 | import styles from "./textfield-behavior.scss"; 5 | 6 | /** 7 | * Properties of the textfield.behavior 8 | */ 9 | export interface ITextfieldBehaviorProperties extends IInputBehaviorProperties { 10 | pattern?: string; 11 | minLength?: number; 12 | maxLength?: number; 13 | list?: string; 14 | } 15 | 16 | /** 17 | * Text field behavior. 18 | */ 19 | export abstract class TextfieldBehavior extends InputBehavior implements ITextfieldBehaviorProperties { 20 | static styles = [...InputBehavior.styles, cssResult(styles)]; 21 | 22 | /** 23 | * Value pattern. 24 | * @attr 25 | */ 26 | @property({ type: String }) pattern?: string; 27 | 28 | /** 29 | * Min value length. 30 | * @attr 31 | */ 32 | @property({ type: Number }) minLength?: number; 33 | 34 | /** 35 | * Max value length. 36 | * @attr 37 | */ 38 | @property({ type: Number }) maxLength?: number; 39 | } 40 | -------------------------------------------------------------------------------- /src/lib/button/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/button/blueprint.md", 4 | "output": "src/lib/button/README.md", 5 | "tag": "wl-button", 6 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-button.png", 7 | "demo": "https://weightless.dev/elements/button" 8 | } -------------------------------------------------------------------------------- /src/lib/button/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/button/button.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./button"; 2 | -------------------------------------------------------------------------------- /src/lib/card/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/card/blueprint.md", 4 | "output": "src/lib/card/README.md", 5 | "tag": "wl-card", 6 | "demo": "https://weightless.dev/elements/card", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-card.png" 8 | } -------------------------------------------------------------------------------- /src/lib/card/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/card/card.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} 13 | -------------------------------------------------------------------------------- /src/lib/card/card-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Transition */ 4 | $card-transition: var(--card-transition, box-shadow #{$transition-duration-fast} #{$transition-ease}); 5 | 6 | /* Border radius */ 7 | $card-border-radius: var(--card-border-radius, #{$border-radius-m}); 8 | 9 | /* Padding */ 10 | $card-padding: var(--card-padding, 0); 11 | 12 | /* Default box shadow */ 13 | $card-elevation: var(--card-elevation, #{elevation(1)}); 14 | 15 | /* Box shadow when :hover */ 16 | $card-elevation-hover: var(--card-elevation-hover, #{elevation(4)}); 17 | 18 | /* Color */ 19 | $card-color: var(--card-color, #{$foreground}); 20 | 21 | /* Background */ 22 | $card-bg: var(--card-bg, #{$background}); 23 | -------------------------------------------------------------------------------- /src/lib/card/card.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "card-vars"; 3 | 4 | :host { 5 | color: $card-color; 6 | background: $card-bg; 7 | transition: $card-transition; 8 | box-shadow: $card-elevation; 9 | border-radius: $card-border-radius; 10 | padding: $card-padding; 11 | display: flex; 12 | flex-direction: column; 13 | text-align: left; 14 | } 15 | 16 | :host([hoverable]:hover) { 17 | box-shadow: $card-elevation-hover; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /src/lib/card/card.test.ts: -------------------------------------------------------------------------------- 1 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 2 | import "../card"; 3 | import { Card } from "./card"; 4 | 5 | describe("wl-card", () => { 6 | const { expect } = chai; 7 | let $card: Card; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = `This is a card`; 15 | 16 | await waitForElement("wl-card"); 17 | $card = $container.querySelector("wl-card")!; 18 | }); 19 | after(() => removeContainer($container)); 20 | 21 | it("should render the slots", async () => { 22 | const assignedNodes = assignedNodesMap($card.shadowRoot!); 23 | expect(assignedNodes[""].length).to.be.above(0); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/lib/card/card.ts: -------------------------------------------------------------------------------- 1 | import { html, LitElement, property, TemplateResult } from "lit-element"; 2 | import { customElement } from "lit-element"; 3 | import { sharedStyles } from "../style/shared"; 4 | import { cssResult } from "../util/css"; 5 | 6 | import styles from "./card.scss"; 7 | 8 | /** 9 | * Properties of the card. 10 | */ 11 | export interface ICardProperties { 12 | hoverable: boolean; 13 | } 14 | 15 | /** 16 | * Group related content and action. 17 | * @slot - Default content. 18 | * @cssprop --card-transition - Transition 19 | * @cssprop --card-border-radius - Border radius 20 | * @cssprop --card-padding - Padding 21 | * @cssprop --card-elevation - Default box shadow 22 | * @cssprop --card-elevation-hover - Box shadow when :hover 23 | * @cssprop --card-color - Color 24 | * @cssprop --card-bg - Background 25 | * @cssprop --card-transition - Transition 26 | * @cssprop --card-border-radius - Border radius 27 | * @cssprop --card-padding - Padding 28 | * @cssprop --card-elevation - Default box shadow 29 | * @cssprop --card-elevation-hover - Box shadow when :hover 30 | * @cssprop --card-color - Color 31 | * @cssprop --card-bg - Background 32 | */ 33 | @customElement("wl-card") 34 | export class Card extends LitElement implements ICardProperties { 35 | static styles = [sharedStyles, cssResult(styles)]; 36 | 37 | /** 38 | * Makes the card hoverable. 39 | * @attr 40 | */ 41 | @property({ reflect: true, type: Boolean }) hoverable: boolean = false; 42 | 43 | /** 44 | * Returns the template of the element. 45 | */ 46 | protected render(): TemplateResult { 47 | return html` 48 | 49 | `; 50 | } 51 | } 52 | 53 | declare global { 54 | interface HTMLElementTagNameMap { 55 | "wl-card": Card; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/lib/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./card"; 2 | -------------------------------------------------------------------------------- /src/lib/checkbox/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/checkbox/blueprint.md", 4 | "output": "src/lib/checkbox/README.md", 5 | "tag": "wl-checkbox", 6 | "demo": "https://weightless.dev/elements/checkbox", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-checkbox.png" 8 | } -------------------------------------------------------------------------------- /src/lib/checkbox/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/checkbox/checkbox.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} 13 | -------------------------------------------------------------------------------- /src/lib/checkbox/checkbox.test.ts: -------------------------------------------------------------------------------- 1 | import { createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 2 | import "../checkbox"; 3 | import { Checkbox } from "./checkbox"; 4 | 5 | describe("wl-checkbox", () => { 6 | const { expect } = chai; 7 | let $checkbox: Checkbox; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = ``; 15 | 16 | await waitForElement("wl-checkbox"); 17 | $checkbox = $container.querySelector("wl-checkbox")!; 18 | }); 19 | after(() => removeContainer($container)); 20 | 21 | it("should have checkbox role", async () => { 22 | expect($checkbox.getAttribute("role")).to.be.equal("checkbox"); 23 | }); 24 | 25 | it("should reflect aria-checked when not checked", async () => { 26 | $checkbox.checked = false; 27 | await $checkbox.updateComplete; 28 | expect($checkbox.getAttribute("aria-checked")).to.equal("false"); 29 | }); 30 | 31 | it("should reflect aria-checked when checked", done => { 32 | $checkbox.checked = true; 33 | $checkbox.updateComplete.then(() => { 34 | // For some reason we have to wait a bit for the aria-checked attribute to be updated 35 | // Very weird. 36 | setTimeout(() => { 37 | expect($checkbox.getAttribute("aria-checked")).to.equal("true"); 38 | done(); 39 | }, 100); 40 | }); 41 | }); 42 | 43 | it("should be removed from the tab order when disabled", async () => { 44 | $checkbox.disabled = true; 45 | await $checkbox.updateComplete; 46 | expect($checkbox.tabIndex).to.equal(-1); 47 | }); 48 | }); 49 | -------------------------------------------------------------------------------- /src/lib/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./checkbox"; 2 | -------------------------------------------------------------------------------- /src/lib/dialog/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/dialog/blueprint.md", 4 | "output": "src/lib/dialog/README.md", 5 | "tag": "wl-dialog", 6 | "demo": "https://weightless.dev/elements/dialog", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-dialog.png" 8 | } -------------------------------------------------------------------------------- /src/lib/dialog/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/dialog/dialog.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} 13 | -------------------------------------------------------------------------------- /src/lib/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./dialog"; 2 | export * from "./show-dialog"; 3 | -------------------------------------------------------------------------------- /src/lib/dialog/show-dialog.ts: -------------------------------------------------------------------------------- 1 | import { IOpenOverlayConfig, showOverlay } from "../behavior/overlay/show-overlay"; 2 | import { Dialog, IDialogBaseProperties } from "./dialog"; 3 | 4 | export function showDialog(config: IOpenOverlayConfig & Partial) { 5 | return showOverlay(config, () => new Dialog()); 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/divider/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/divider/blueprint.md", 4 | "output": "src/lib/divider/README.md", 5 | "tag": "wl-divider", 6 | "demo": "https://weightless.dev/elements/divider", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-divider.png" 8 | } -------------------------------------------------------------------------------- /src/lib/divider/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/divider/divider.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} 13 | -------------------------------------------------------------------------------- /src/lib/divider/divider-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Color of the divider */ 4 | $divider-color: var(--divider-color, rgba(0, 0, 0, 0.15)); 5 | 6 | /* Width or height of the divider */ 7 | $divider-size: var(--divider-size, #{size(1)}); 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/lib/divider/divider.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "divider-vars"; 3 | 4 | :host { 5 | background: $divider-color; 6 | height: $divider-size; 7 | 8 | display: block; 9 | width: 100%; 10 | } 11 | 12 | :host([vertical]) { 13 | width: $divider-size; 14 | height: 100%; 15 | } -------------------------------------------------------------------------------- /src/lib/divider/divider.test.ts: -------------------------------------------------------------------------------- 1 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 2 | import "../divider"; 3 | import { Divider } from "./divider"; 4 | 5 | describe("wl-divider", () => { 6 | const { expect } = chai; 7 | let $divider: Divider; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = ``; 15 | await waitForElement("wl-divider"); 16 | $divider = $container.querySelector("wl-divider")!; 17 | }); 18 | after(() => removeContainer($container)); 19 | 20 | it("should have a separator role", () => { 21 | expect($divider.getAttribute("role")).to.equal("separator"); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/lib/divider/divider.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement, property, TemplateResult } from "lit-element"; 2 | import { sharedStyles } from "../style/shared"; 3 | import { AriaRole } from "../util/aria"; 4 | import { cssResult } from "../util/css"; 5 | 6 | import styles from "./divider.scss"; 7 | 8 | /** 9 | * Properties of the divider. 10 | */ 11 | export interface IDividerProperties { 12 | vertical: boolean; 13 | } 14 | 15 | /** 16 | * Thin line that groups content in lists and layouts. 17 | * @cssprop --divider-color - Color of the divider 18 | * @cssprop --divider-size - Width or height of the divider 19 | */ 20 | @customElement("wl-divider") 21 | export class Divider extends LitElement implements IDividerProperties { 22 | static styles = [cssResult(styles), sharedStyles]; 23 | 24 | /** 25 | * Role of the backdrop. 26 | * @attr 27 | */ 28 | @property({ type: String, reflect: true }) role: AriaRole = "separator"; 29 | 30 | /** 31 | * Makes the divider vertical. 32 | * @attr 33 | */ 34 | @property({ type: Boolean, reflect: true }) vertical: boolean = false; 35 | 36 | /** 37 | * Returns the template of the element. 38 | */ 39 | protected render(): TemplateResult { 40 | return html` 41 | 42 | `; 43 | } 44 | } 45 | 46 | declare global { 47 | interface HTMLElementTagNameMap { 48 | "wl-divider": Divider; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/lib/divider/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./divider"; 2 | -------------------------------------------------------------------------------- /src/lib/expansion/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/expansion/blueprint.md", 4 | "output": "src/lib/expansion/README.md", 5 | "tag": "wl-expansion", 6 | "demo": "https://weightless.dev/elements/expansion", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-expansion.png" 8 | } -------------------------------------------------------------------------------- /src/lib/expansion/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/expansion/expansion.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/expansion/expansion.test.ts: -------------------------------------------------------------------------------- 1 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 2 | import "../expansion"; 3 | import { Expansion } from "./expansion"; 4 | 5 | describe("wl-expansion", () => { 6 | const { expect } = chai; 7 | let $expansion: Expansion; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = ` 15 | 16 | Title 17 | Description 18 |

Here's some content

19 | `; 20 | 21 | await waitForElement("wl-expansion"); 22 | $expansion = $container.querySelector("wl-expansion")!; 23 | }); 24 | after(() => removeContainer($container)); 25 | 26 | it("should render the slots", async () => { 27 | const assignedNodes = assignedNodesMap($expansion.shadowRoot!); 28 | 29 | expect(assignedNodes["title"].length).to.be.above(0); 30 | expect(assignedNodes["description"].length).to.be.above(0); 31 | expect(assignedNodes[""].length).to.be.above(0); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /src/lib/expansion/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./expansion"; 2 | -------------------------------------------------------------------------------- /src/lib/icon/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/icon/blueprint.md", 4 | "output": "src/lib/icon/README.md", 5 | "tag": "wl-icon", 6 | "demo": "https://weightless.dev/elements/icon", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-icon.png" 8 | } -------------------------------------------------------------------------------- /src/lib/icon/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/icon/icon.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | ## ⚠️ Load the icon font 12 | 13 | Currently the `wl-icon` has not been designed with no configuration in mind. If you don't provide your own icon font via the `--icon-font` CSS variable you need to load the default google font material icons. You can do that by inserting the following link in the `head` tag of your `index.html` file. Check out the available icons [here](https://material.io/tools/icons/). 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | {{ template:contributors }} 20 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/icon/icon-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Font family */ 4 | $icon-font: var(--icon-font, "Material Icons"); 5 | 6 | /* Width and height */ 7 | $icon-size: var(--icon-size, #{size(24, "em")}); -------------------------------------------------------------------------------- /src/lib/icon/icon.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "icon-vars"; 3 | 4 | :host { 5 | font-size: $icon-size; 6 | font-family: $icon-font; 7 | 8 | font-weight: normal; 9 | font-style: normal; 10 | color: inherit; 11 | line-height: 1; 12 | letter-spacing: normal; 13 | text-transform: none; 14 | display: inline-block; 15 | white-space: nowrap; 16 | word-wrap: normal; 17 | direction: ltr; 18 | -webkit-font-feature-settings: 'liga'; 19 | -webkit-font-smoothing: antialiased; 20 | } 21 | 22 | -------------------------------------------------------------------------------- /src/lib/icon/icon.test.ts: -------------------------------------------------------------------------------- 1 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 2 | import "../icon"; 3 | import { Icon } from "./icon"; 4 | 5 | describe("wl-divider", () => { 6 | const { expect } = chai; 7 | let $icon: Icon; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = `flash_on`; 15 | await waitForElement("wl-icon"); 16 | $icon = $container.querySelector("wl-icon")!; 17 | }); 18 | after(() => removeContainer($container)); 19 | 20 | it("should have an presentation role", () => { 21 | expect($icon.getAttribute("role")).to.equal("presentation"); 22 | }); 23 | 24 | it("should render the slots", async () => { 25 | const assignedNodes = assignedNodesMap($icon.shadowRoot!); 26 | expect(assignedNodes[""].length).to.be.above(0); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/lib/icon/icon.ts: -------------------------------------------------------------------------------- 1 | import { customElement, html, LitElement, property, TemplateResult } from "lit-element"; 2 | import { sharedStyles } from "../style/shared"; 3 | import { AriaRole } from "../util/aria"; 4 | import { cssResult } from "../util/css"; 5 | 6 | import styles from "./icon.scss"; 7 | 8 | /** 9 | * Properties of the icon. 10 | */ 11 | export interface IIconProperties { 12 | role: AriaRole; 13 | } 14 | 15 | /** 16 | * Symbols for common actions and items. 17 | * @slot - Name of the icon. 18 | * @cssprop --icon-font - Font family 19 | * @cssprop --icon-size - Width and height 20 | */ 21 | @customElement("wl-icon") 22 | export class Icon extends LitElement implements IIconProperties { 23 | static styles = [cssResult(styles), sharedStyles]; 24 | 25 | /** 26 | * Roles of the icon. 27 | * @attr 28 | */ 29 | @property({ type: String, reflect: true }) role: AriaRole = "presentation"; 30 | 31 | /** 32 | * Returns the template for the element. 33 | */ 34 | protected render(): TemplateResult { 35 | return html` 36 | 37 | `; 38 | } 39 | } 40 | 41 | declare global { 42 | interface HTMLElementTagNameMap { 43 | "wl-icon": Icon; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/lib/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./icon"; 2 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./util"; 2 | export * from "./button"; 3 | export * from "./progress-bar"; 4 | export * from "./progress-spinner"; 5 | export * from "./dialog"; 6 | export * from "./backdrop"; 7 | export * from "./banner"; 8 | export * from "./icon"; 9 | export * from "./divider"; 10 | export * from "./textfield"; 11 | export * from "./textarea"; 12 | export * from "./card"; 13 | export * from "./popover"; 14 | export * from "./label"; 15 | export * from "./select"; 16 | export * from "./ripple"; 17 | export * from "./checkbox"; 18 | export * from "./behavior"; 19 | export * from "./radio"; 20 | export * from "./nav"; 21 | export * from "./title"; 22 | export * from "./popover-card"; 23 | export * from "./tooltip"; 24 | export * from "./list-item"; 25 | export * from "./expansion"; 26 | export * from "./snackbar"; 27 | export * from "./switch"; 28 | export * from "./slider"; 29 | export * from "./tab"; 30 | export * from "./tab-group"; 31 | export * from "./text"; 32 | -------------------------------------------------------------------------------- /src/lib/label/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/label/blueprint.md", 4 | "output": "src/lib/label/README.md", 5 | "tag": "wl-label", 6 | "demo": "https://weightless.dev/elements/label", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-label.png" 8 | } -------------------------------------------------------------------------------- /src/lib/label/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/label/label.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/label/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./label"; 2 | -------------------------------------------------------------------------------- /src/lib/label/label-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Color */ 4 | $label-color: var(--label-color, #{color("shade")}); 5 | 6 | /* Font size */ 7 | $label-font-size: var(--label-font-size, #{$font-size-m}); 8 | 9 | /* Font family */ 10 | $label-font-family: var(--label-font-family, #{$font-family-serif}); 11 | 12 | /* Font family */ 13 | $label-line-height: var(--label-line-height, #{$line-height-m}); 14 | 15 | /* Color of the required astrix */ 16 | $label-required-color: var(--label-required-color, #{color("error", $default-hue)}); -------------------------------------------------------------------------------- /src/lib/label/label.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "label-vars"; 3 | 4 | :host { 5 | font-size: $label-font-size; 6 | font-family: $label-font-family; 7 | line-height: $label-line-height; 8 | color: $label-color; 9 | cursor: default; 10 | display: inline-block; 11 | } 12 | 13 | :host([nowrap]) { 14 | white-space: nowrap; 15 | overflow: hidden; 16 | text-overflow: ellipsis; 17 | max-width: 100%; 18 | line-height: 1.1; 19 | } 20 | 21 | :host([required]):after { 22 | content: "*"; 23 | color: $label-required-color; 24 | } -------------------------------------------------------------------------------- /src/lib/list-item/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/list-item/blueprint.md", 4 | "output": "src/lib/list-item/README.md", 5 | "tag": "wl-list-item", 6 | "demo": "https://weightless.dev/elements/list-item", 7 | "img": "https://raw.githubusercontent.com/andreasbm/elements/master/screenshots/wl-list-item.png" 8 | } -------------------------------------------------------------------------------- /src/lib/list-item/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/list-item/list-item.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | 8 | 9 | 10 | 11 | {{ template:contributors }} 12 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/list-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list-item"; 2 | -------------------------------------------------------------------------------- /src/lib/list-item/list-item.test.ts: -------------------------------------------------------------------------------- 1 | import "../list-item"; 2 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 3 | import { ListItem } from "./list-item"; 4 | 5 | describe("wl-list-item", () => { 6 | const { expect } = chai; 7 | let $listItem: ListItem; 8 | let $container: HTMLElement; 9 | 10 | before(() => { 11 | $container = createContainer(); 12 | }); 13 | beforeEach(async () => { 14 | $container.innerHTML = ` 15 | 16 |
Hello
17 |
Lorem ipsum
18 |
World
19 | `; 20 | 21 | await waitForElement("wl-list-item"); 22 | $listItem = $container.querySelector("wl-list-item")!; 23 | }); 24 | after(() => removeContainer($container)); 25 | 26 | it("should render the slots", async () => { 27 | const assignedNodes = assignedNodesMap($listItem.shadowRoot!); 28 | 29 | expect(assignedNodes["before"].length).to.be.above(0); 30 | expect(assignedNodes[""].length).to.be.above(0); 31 | expect(assignedNodes["after"].length).to.be.above(0); 32 | }); 33 | 34 | it("should have a list item role", () => { 35 | expect($listItem.getAttribute("role")).to.equal("listitem"); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /src/lib/nav/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extend": "blueprint.json", 3 | "input": "src/lib/nav/blueprint.md", 4 | "output": "src/lib/nav/README.md", 5 | "tag": "wl-nav", 6 | "demo": "https://weightless.dev/elements/nav" 7 | } -------------------------------------------------------------------------------- /src/lib/nav/blueprint.md: -------------------------------------------------------------------------------- 1 | {{ doc:src/lib/nav/nav.ts }} 2 | 3 | ## Usage 4 | 5 | Go [here]({{ demo }}) to try the demo. 6 | 7 | ```html 8 | 9 |
10 | logo 11 |
12 | My app 13 |
14 | Sign in 15 |
16 | 17 | ``` 18 | 19 | {{ template:contributors }} 20 | {{ template:license }} -------------------------------------------------------------------------------- /src/lib/nav/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./nav"; 2 | -------------------------------------------------------------------------------- /src/lib/nav/nav-vars.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | 3 | /* Background */ 4 | $nav-bg: var(--nav-bg, #{$background}); 5 | 6 | /* Color */ 7 | $nav-color: var(--nav-color, #{$foreground}); 8 | 9 | /* Padding */ 10 | $nav-padding: var(--nav-padding, 0 #{$spacing-l}); 11 | 12 | /* Height */ 13 | $nav-height: var(--nav-height, #{size(70)}); 14 | 15 | /* Box shadow */ 16 | $nav-elevation: var(--nav-elevation, #{elevation(3)}); 17 | 18 | /* Transition */ 19 | $nav-transition: var(--nav-transition, background #{$transition-duration-fast} #{$transition-deceleration-curve}, 20 | transform #{$transition-duration-medium} #{$transition-deceleration-curve}, 21 | box-shadow #{$transition-duration-medium} #{$transition-deceleration-curve}); 22 | 23 | /* Font size of the title slot */ 24 | $nav-title-font-size: var(--nav-title-font-size, #{$font-size-xm}); 25 | 26 | /* Font weight of the title slot */ 27 | $nav-title-font-weight: var(--nav-title-font-weight, #{$font-weight-strong}); 28 | 29 | /* Margin of the title slot */ 30 | $nav-title-margin: var(--nav-title-margin, 0 0 0 #{$spacing-xl}); 31 | -------------------------------------------------------------------------------- /src/lib/nav/nav.scss: -------------------------------------------------------------------------------- 1 | @import "../style/base"; 2 | @import "nav-vars"; 3 | 4 | :host { 5 | color: $nav-color; 6 | transition: $nav-transition; 7 | height: $nav-height; 8 | padding: $nav-padding; 9 | background: $nav-bg; 10 | z-index: $nav-z-index; 11 | 12 | display: flex; 13 | justify-content: space-between; 14 | box-sizing: border-box; 15 | flex-grow: 1; 16 | } 17 | 18 | :host([fixed]) { 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | } 24 | 25 | :host([shadow]) { 26 | box-shadow: $nav-elevation; 27 | } 28 | 29 | #left, #right, #title, ::slotted([slot="left"]), ::slotted([slot="right"]), ::slotted([slot="title"]) { 30 | display: flex; 31 | align-items: center; 32 | height: 100%; 33 | } 34 | 35 | #title, ::slotted([slot="title"]) { 36 | margin: $nav-title-margin; 37 | font-size: $nav-title-font-size; 38 | font-weight: $nav-title-font-weight; 39 | } 40 | -------------------------------------------------------------------------------- /src/lib/nav/nav.test.ts: -------------------------------------------------------------------------------- 1 | import "../nav"; 2 | import "../button"; 3 | import { assignedNodesMap, createContainer, removeContainer, waitForElement } from "../../test/testing-helpers"; 4 | import { Nav } from "./nav"; 5 | 6 | describe("wl-banner", () => { 7 | const { expect } = chai; 8 | let $nav: Nav; 9 | let $container: HTMLElement; 10 | 11 | before(() => { 12 | $container = createContainer(); 13 | }); 14 | beforeEach(async () => { 15 | $container.innerHTML = ` 16 | 17 |
18 | logo 19 |
20 | My app 21 |
22 | Sign in 23 |
24 | `; 25 | 26 | await waitForElement("wl-nav"); 27 | $nav = $container.querySelector