{"id":13468455,"url":"https://github.com/ing-bank/lion","last_synced_at":"2026-05-21T23:05:54.538Z","repository":{"id":39194359,"uuid":"180852834","full_name":"ing-bank/lion","owner":"ing-bank","description":"Fundamental white label web component features for your design system.","archived":false,"fork":false,"pushed_at":"2025-04-30T07:33:34.000Z","size":65967,"stargazers_count":1818,"open_issues_count":132,"forks_count":319,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-07T23:33:16.149Z","etag":null,"topics":["hacktoberfest","javascript","lion","lit-html","modern-web","open-wc","web-components"],"latest_commit_sha":null,"homepage":"https://lion.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ing-bank.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-04-11T18:19:58.000Z","updated_at":"2025-05-07T08:16:14.000Z","dependencies_parsed_at":"2023-10-04T19:26:09.918Z","dependency_job_id":"9ce1cc85-1b09-49a8-a804-e18db041750e","html_url":"https://github.com/ing-bank/lion","commit_stats":{"total_commits":2170,"total_committers":182,"mean_commits":"11.923076923076923","dds":0.8101382488479263,"last_synced_commit":"2d4fb0ecdb4e594456fb0a9d812efdd1b970a23d"},"previous_names":[],"tags_count":5518,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ing-bank%2Flion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ing-bank%2Flion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ing-bank%2Flion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ing-bank%2Flion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ing-bank","download_url":"https://codeload.github.com/ing-bank/lion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275625,"owners_count":21882341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","lion","lit-html","modern-web","open-wc","web-components"],"created_at":"2024-07-31T15:01:11.190Z","updated_at":"2026-02-04T22:03:55.309Z","avatar_url":"https://github.com/ing-bank.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Real World","Design Systems","javascript","Design Systems build with Web Components"],"sub_categories":["Component Libraries"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg\n    width=\"20%\"\n    src=\"./docs/_assets/logo.svg\"\n    alt=\"Lion\"\n  /\u003e\n  \u003ch1 style=\"text-align: center;\"\u003eLion\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/ing-bank/lion/issues\"\n    \u003e\u003cimg\n      src=\"https://badgen.net/github/open-issues/ing-bank/lion\"\n      alt=\"Lion open issues status\"\n  /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ing-bank/lion/pulls\"\n    \u003e\u003cimg\n      src=\"https://badgen.net/github/open-prs/ing-bank/lion/\"\n      alt=\"GitHub open pull requests status\"\n  /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.tickgit.com/browse?repo=github.com/ing-bank/lion\"\n    \u003e\u003cimg\n      src=\"https://badgen.net/https/api.tickgit.com/badgen/github.comgithub.com/ing-bank/lion\"\n      alt=\"Todos\"\n  /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://lion.js.org\"\u003eWebsite\u003c/a\u003e\n  ·\n  \u003ca href=\"https://lion.js.org/fundamentals/\"\u003eFundamentals\u003c/a\u003e\n  ·\n  \u003ca href=\"https://lion.js.org/guides/\"\u003eGuides\u003c/a\u003e\n  ·\n  \u003ca href=\"https://lion.js.org/components/\"\u003eComponents\u003c/a\u003e\n  ·\n  \u003ca href=\"https://lion.js.org/blog/\"\u003eBlog\u003c/a\u003e\n\u003c/p\u003e\n\n**Lion is a set of highly performant, accessible and flexible Web Components.!**\n\nThey provide an unopinionated, white-label layer that can be extended to your own layer of components.\n\n- **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.\n- **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.\n- **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.\n- **Modern Code:** Lion is distributed as pure es modules.\n- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.\n\n\u003e Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.\n\u003e This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://lion.js.org/guides/\"\u003e\u003cstrong\u003eExplore the Lion Guides\u0026nbsp;\u0026nbsp;▶\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2\u003eTable of Contents\u003c/h2\u003e\u003c/summary\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"#astro-migration\"\u003e Astro migration \u003c/a\u003e\n  \u003cul\u003e\n   \u003cli\u003e\u003ca href=\"#astro-how-to\"\u003e Astro how to \u003c/a\u003e\u003c/li\u003e\n   \u003cli\u003e\u003ca href=\"#issues-which-are-not-caused-by-the-migration-not-to-be-fixed-now\"\u003e Issues which are not caused by migration \u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#how-to-install\"\u003e Installation \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#how-to-use\"\u003e How to use \u003c/a\u003e\n  \u003cul\u003e\n   \u003cli\u003e\u003ca href=\"#extend-a-web-component\"\u003e Extend a web component \u003c/a\u003e\u003c/li\u003e\n   \u003cli\u003e\u003ca href=\"#use-a-javascript-system\"\u003e Use a JavaScript system \u003c/a\u003e\u003c/li\u003e\n   \u003cli\u003e\u003ca href=\"#use-a-web-component\"\u003e Use a Web Component \u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#issues\"\u003e Issues \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#feature-requests\"\u003e Feature request \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#content\"\u003e Content \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#technologies\"\u003e Technologies \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#rationale\"\u003e Rationale \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#coding-guidelines\"\u003e Coding guidelines \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#how-to-contribute\"\u003e How to contribute \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#site-deployment\"\u003e Site deployment \u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#content\"\u003e Contact \u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n## Astro migration\n\n- Keep using `/docs` on the root level as we used it in the `master` branch. The documentation is copied into Astro related directories on `npm run start` and when when anything in `/docs` is updated.\n- Replace manually all references to assets in all `md` files so that we imply that the path is produced from the directory where the md file is located. F.e. `new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;` should `new URL('./src/wa-combobox/assets/obama.jpeg', import.meta.url).href;`. Note double dot is replaced with one dot. See [this PR](https://github.com/ing-bank/lion/pull/2125/files#diff-403b1e0ab54d51dcfe54248e847498e492da00383d8b33a4087994ab9035a22c) for the reference.\n- Rename all `*.mjs` files to `*.js` ones if they are used by `mdjs` examples\n\n### Astro how to\n\n- To start in dev mode run `npm run start`\n- To start in production mode:\n  - Run `npm run build`\n  - Run `npm run preview`\n\n### Issues which are not caused by the migration (not to be fixed now)\n\n- There is a browser console error on [collapsible page](http://localhost:4321/components/collapsible):\n\n  ```\n  __mdjs-stories--use-cases.js:40 Uncaught TypeError: shadowRoot.getElementById is not a function\n  ```\n\n  Note. There is the same error on master. This issue is not caused by the migration\n\n## How to install\n\n```bash\nnpm i @lion/ui\n```\n\n## How to use\n\n### Extend a Web Component\n\n**This is the main use case for lion**. To import component classes, and extend them for your own design system's components.\n\n```js\nimport { css } from 'lit';\nimport { LionInput } from '@lion/ui/input.js';\n\nclass MyInput extends LionInput {\n  static get styles() {\n    return [\n      super.styles,\n      css`\n        /* your styles here */\n      `,\n    ];\n  }\n}\ncustomElements.define('my-input', MyInput);\n```\n\n### Use a JavaScript system\n\nThere's a couple of \"systems\" in lion which have a JavaScript API. Examples are `localize`, `overlays`, `ajax`, etc.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { ajax } from '@lion/ui/ajax.js';\n\n  ajax\n    .fetch('data.json')\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      // do something with the data\n    });\n\u003c/script\u003e\n```\n\n### Use a Web Component\n\nYou can also use the lion elements directly, although this is likely not a common use case.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import '@lion/ui/define/lion-input.js';\n\u003c/script\u003e\n\n\u003clion-input name=\"firstName\"\u003e\u003c/lion-input\u003e\n```\n\n## Issues\n\nIf you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=\u0026labels=\u0026template=bug_report.md\u0026title=). Be sure to include a description of the expected and the current behavior - additional adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.\n\n## Feature requests\n\nWhen you have an idea on how we could improve, please check our [discussions](https://github.com/ing-bank/lion/discussions) to see if there are similar ideas or feature requests. If there are none, please [start](https://github.com/ing-bank/lion/discussions/new) your feature request as a new discussion topic. Add the title `[Feature Request] My awesome feature` and a description of what you expect from the improvement and what the use case is.\n\n## Content\n\n| Name                                                                                                                        | version                                                                                                                   | description                                                                                                                                                                                                                                                                                                                |\n| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [@lion/ui](https://github.com/ing-bank/lion/tree/master/packages/ui)                                                        | \u003cimg src=\"https://img.shields.io/npm/v/@lion/ui.svg\" alt=\"@lion/ui version\"/\u003e                                             | Set of components                                                                                                                                                                                                                                                                                                          |\n| [@lion/ajax](https://github.com/ing-bank/lion/tree/master/packages/ajax)                                                    | \u003cimg src=\"https://img.shields.io/npm/v/@lion/ajax.svg\" alt=\"@lion/ajax version\"/\u003e                                         | A small wrapper around fetch                                                                                                                                                                                                                                                                                               |\n| [Singleton-manager](https://github.com/ing-bank/lion/tree/master/packages/singleton-manager)                                | \u003cimg src=\"https://img.shields.io/npm/v/singleton-manager.svg\" alt=\"Singleton-manager version\"/\u003e                           | A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton. Primarily useful if two major version of a package with a singleton is used.                                                                                                                   |\n| [Babel plugin extend docs](https://github.com/ing-bank/lion/tree/master/packages-node/babel-plugin-extend-docs)             | \u003cimg src=\"https://img.shields.io/npm/v/babel-plugin-extend-docs.svg\" alt=\"babel-plugin-extend-docs version\"/\u003e             | A plugin which rewrites imports and templates according to a configuration. This enables the reuse of existing documentation from source packages while still using your extensions code.                                                                                                                                  |\n| [Providence analytics](https://github.com/ing-bank/lion/tree/master/packages-node/providence-analytics)                     | \u003cimg src=\"https://img.shields.io/npm/v/providence-analytics.svg\" alt=\"providence-analytics version\"/\u003e                     | Providence is the 'All Seeing Eye' that generates usage statistics by analyzing code. It measures the effectivity and popularity of your software. With just a few commands you can measure the impact for (breaking) changes, making your release process more stable and predictable.                                    |\n| [Publish docs](https://github.com/ing-bank/lion/tree/master/packages-node/publish-docs)                                     | \u003cimg src=\"https://img.shields.io/npm/v/publish-docs.svg\" alt=\"publish-docs version\"/\u003e                                     | A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.                                                                                                                                                                                                      |\n| [Remark extend](https://github.com/ing-bank/lion/tree/master/packages-node/remark-extend)                                   | \u003cimg src=\"https://img.shields.io/npm/v/remark-extend.svg\" alt=\"remark-extend version\"/\u003e                                   | A plugin for remark to extend markdown by importing from source files.                                                                                                                                                                                                                                                     |\n| [Rocket preset extend lion docs](https://github.com/ing-bank/lion/tree/master/packages-node/rocket-preset-extend-lion-docs) | \u003cimg src=\"https://img.shields.io/npm/v/rocket-preset-extend-lion-docs.svg\" alt=\"rocket-preset-extend-lion-docs version\"/\u003e | When maintaining your own extension layer of lion you most likely want to maintain a similar documentation. Copying and rewriting the markdown files works, but whenever something changes you need copy and rewrite again. To do this automatically you can use this preset for [rocket](https://rocket.modern-web.dev/). |\n\n## Technologies\n\nLion Web Components aims to be future-proof and use well-supported proven technology. The stack we have chosen should reflect this.\n\n- [lit](https://lit.dev/)\n- [npm](http://npmjs.com)\n- [Open Web Components](https://open-wc.org)\n- [Modern Web](https://modern-web.dev)\n- [Mocha](https://mochajs.org)\n- [Chai](https://www.chaijs.com)\n- [ESLint](https://eslint.org)\n- [prettier](https://prettier.io)\n- [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)\n- Lots and lots of tests\n\n## Rationale\n\nWe know from experience that making high quality, accessible UI components is hard and time consuming:\nit takes many iterations, a lot of development time and a lot of testing to get a generic component that works in every\ncontext, supports many edge cases and is accessible in all relevant screen readers.\n\nLion aims to do the heavy lifting for you.\nThis means you only have to apply your own Design System: by delivering styles, configuring components and adding a minimal set of custom logic on top.\n\n## Coding guidelines\n\nCheck out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.\n\n## How to contribute\n\n**Please note:** This project uses Npm [Workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces). If you want to run all demos locally you need to get at least npm 7+ and install all dependencies by executing `npm install`.\n\nLion Web Components are only as good as its contributions.\nRead our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTRIBUTING.md) and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.\n\n## Site deployment\n\nWe use [GitHub Pages](https://docs.github.com/en/pages) to host our static website. Collaborators with push permission to the repository branch [`gh-pages`](https://github.com/ing-bank/lion/tree/gh-pages) can trigger a deploy by simply running:\n\n```bash\nnpm run deploy\n```\n\n## Contact\n\nFeel free to create a github issue for any feedback or questions you might have.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fing-bank%2Flion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fing-bank%2Flion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fing-bank%2Flion/lists"}