lion

Fundamental white label web component features for your design system.

MIT License

Downloads
208.3K
Stars
1.7K
Committers
158
View Code on GitHub Visit Website
Ecosystems: Web Components, JavaScript

Bot releases are visible (Hide)

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 672c8e99: New documentation structure

  • aa8b8916: BREAKING CHANGE: Work without polyfill if possible

    When using component composition in a Lion Component we always made it very explicit which sub-components are used.
    On top of that we scoped these sub components to the current shadow root allowing multiple version to be used simultaneously.

    To enable this features we relied on the fact that the ScopedElementsMixin did loaded the needed polyfill for us.

    We however over time got feedback from multiple consumers that lion components "break the app as soon as you load them".
    The reasons is/was that not everyone is always using ScopedElementsMixin or in full control of the app (or its load order).

    To quote the release notes of ScopedElementsMixin v2.1.0:

    ScopedElementsMixin 2.x tried to be as convenient as possible by automatically loading the scoped custom elements registry polyfill.
    This however led to a fatal error whenever you registered any component before ScopedElementsMixin was used.

    And this was the case.

    With the upgrade to @open-wc/scoped-elements v2.1.1 Lion now no longer automatically loads the polyfill through ScopedElementsMixin.

    This essentially means the polyfill became optional which results in the following behavior

    1. If polyfill is not loaded it will use the global registry as a fallback
    2. Log error if actually scoping is needed and polyfill is not loaded
    3. If you manually create elements you will need to handle polyfilled and not polyfilled cases now
    -  const myButton = this.shadowRoot.createElement('my-button');
+  const myButton = this.createScopedElement('my-button');

    This also removes @webcomponents/scoped-custom-element-registry as a production dependency.

    If you need scoping be sure to load the polyfill before any other web component gets registered.

    It may look something like this in your HTML

    <script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>

    or if you have an SPA you can load it at the top of your app shell code

    import '@webcomponents/scoped-custom-element-registry';

    You need scoping if you want to

    use 2 major versions of a web component (e.g. in an SPA pageA uses 1.x and pageB uses 2.x of color-picker)
    or you want to use the same tag name with different implementations (use tag color-picker from foo here and from bar here)

    See more details at

Patch Changes

  • 66531e3c: SlotMixin: support scoped elements
lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 672c8e99: New documentation structure

  • aa8b8916: BREAKING CHANGE: Work without polyfill if possible

    When using component composition in a Lion Component we always made it very explicit which sub-components are used.
    On top of that we scoped these sub components to the current shadow root allowing multiple version to be used simultaneously.

    To enable this features we relied on the fact that the ScopedElementsMixin did loaded the needed polyfill for us.

    We however over time got feedback from multiple consumers that lion components "break the app as soon as you load them".
    The reasons is/was that not everyone is always using ScopedElementsMixin or in full control of the app (or its load order).

    To quote the release notes of ScopedElementsMixin v2.1.0:

    ScopedElementsMixin 2.x tried to be as convenient as possible by automatically loading the scoped custom elements registry polyfill.
    This however led to a fatal error whenever you registered any component before ScopedElementsMixin was used.

    And this was the case.

    With the upgrade to @open-wc/scoped-elements v2.1.1 Lion now no longer automatically loads the polyfill through ScopedElementsMixin.

    This essentially means the polyfill became optional which results in the following behavior

    1. If polyfill is not loaded it will use the global registry as a fallback
    2. Log error if actually scoping is needed and polyfill is not loaded
    3. If you manually create elements you will need to handle polyfilled and not polyfilled cases now
    -  const myButton = this.shadowRoot.createElement('my-button');
+  const myButton = this.createScopedElement('my-button');

    This also removes @webcomponents/scoped-custom-element-registry as a production dependency.

    If you need scoping be sure to load the polyfill before any other web component gets registered.

    It may look something like this in your HTML

    <script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>

    or if you have an SPA you can load it at the top of your app shell code

    import '@webcomponents/scoped-custom-element-registry';

    You need scoping if you want to

    use 2 major versions of a web component (e.g. in an SPA pageA uses 1.x and pageB uses 2.x of color-picker)
    or you want to use the same tag name with different implementations (use tag color-picker from foo here and from bar here)

    See more details at

Patch Changes

  • Updated dependencies [66531e3c]
  • Updated dependencies [672c8e99]
  • Updated dependencies [aa8b8916]
lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 672c8e99: New documentation structure

  • aa8b8916: BREAKING CHANGE: Work without polyfill if possible

    When using component composition in a Lion Component we always made it very explicit which sub-components are used.
    On top of that we scoped these sub components to the current shadow root allowing multiple version to be used simultaneously.

    To enable this features we relied on the fact that the ScopedElementsMixin did loaded the needed polyfill for us.

    We however over time got feedback from multiple consumers that lion components "break the app as soon as you load them".
    The reasons is/was that not everyone is always using ScopedElementsMixin or in full control of the app (or its load order).

    To quote the release notes of ScopedElementsMixin v2.1.0:

    ScopedElementsMixin 2.x tried to be as convenient as possible by automatically loading the scoped custom elements registry polyfill.
    This however led to a fatal error whenever you registered any component before ScopedElementsMixin was used.

    And this was the case.

    With the upgrade to @open-wc/scoped-elements v2.1.1 Lion now no longer automatically loads the polyfill through ScopedElementsMixin.

    This essentially means the polyfill became optional which results in the following behavior

    1. If polyfill is not loaded it will use the global registry as a fallback
    2. Log error if actually scoping is needed and polyfill is not loaded
    3. If you manually create elements you will need to handle polyfilled and not polyfilled cases now
    -  const myButton = this.shadowRoot.createElement('my-button');
+  const myButton = this.createScopedElement('my-button');

    This also removes @webcomponents/scoped-custom-element-registry as a production dependency.

    If you need scoping be sure to load the polyfill before any other web component gets registered.

    It may look something like this in your HTML

    <script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>

    or if you have an SPA you can load it at the top of your app shell code

    import '@webcomponents/scoped-custom-element-registry';

    You need scoping if you want to

    use 2 major versions of a web component (e.g. in an SPA pageA uses 1.x and pageB uses 2.x of color-picker)
    or you want to use the same tag name with different implementations (use tag color-picker from foo here and from bar here)

    See more details at

Patch Changes

  • d46b9894: Fix check for css typed object support
  • Updated dependencies [66531e3c]
  • Updated dependencies [672c8e99]
  • Updated dependencies [aa8b8916]
lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - [email protected]

Published by github-actions[bot] over 2 years ago

Patch Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Patch Changes

  • 57d2c62b: Abstract input-range's scoped styles feature to a reactive controller for reuse. With this controller, you can scope styles on a LightDOM component.
lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Patch Changes

  • 57d2c62b: Abstract input-range's scoped styles feature to a reactive controller for reuse. With this controller, you can scope styles on a LightDOM component.
  • Updated dependencies [57d2c62b]
lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

lion - @lion/[email protected]

Published by github-actions[bot] over 2 years ago

Minor Changes

  • 683d5c1c: Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid.

    We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

    Be sure to read our Rationale on this change and what this means for you as a user.

Patch Changes

Package Rankings
Top 1.12% on Npmjs.org
Related Projects
custom-elements-everywhere

Custom Element + Framework Interoperability Tests.

17 Aug 2017 1,184
core

A collection of accessible, free, open-source web components for building Brightspace applications.

06 Mar 2019 54
numl

Atomic UI Framework based on Web Components and Runtime CSS Generation for rapidly building inter...

17 Jun 2019 336
web-component-devtools

Web Component DevTools is a Browser Extension enhancing the development experience of Web Compone...

24 May 2021 134
enterprise-wc

Enterprise-grade web component library for the Infor Design System

12 May 2020 27
titanium-elements

target: ES2022

23 Aug 2018 18
webcomponents

Monorepo of webcomponents and associated microservice apis

25 Sep 2018 243
storybook

Shows how to use Storybook with LWC Web Components

12 Jul 2020 17
bem-components

Set of components for sites development

07 Nov 2012 333
weightless

High-quality web components with a small footprint

09 Feb 2019 377
ion-phaser

A web component to use Phaser Framework with Angular, React, Vue, etc 🎮

02 Jun 2019 248
blurhash-img

A Web Component for decoding blurhash strings onto a canvas.

13 Jun 2020 22
ion-phaser-ce

A web component to use Phaser Framework CE (Community Edition) with Angular, React, Vue, etc 🎮

27 Sep 2019 11
nyaf

"Not Yet Another Framework" is a new library concept, called "thin library". It's similar to a fr...

06 May 2019 17
jsfe

A Custom Element that auto-generates forms, declaratively. Works with Lit, Solid, Vue, Svelte, Re...

21 Sep 2023 101