@lion/ui 0.22.0 → 0.24.0

package/README.md

@@ -112,6 +112,50 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 npm i @lion/ui
 ```
 
+### Temporary phone-number metadata workaround
+
+We temporarily vendor `awesome-phonenumber@7.9.0-tlouisse.libphonenumber-9.0.41`,
+rebuilt from Google's **libphonenumber v9.0.41**, instead of the registry dependency.
+This includes updated phone-number metadata, such as the French Guiana premium-rate
+example `+594890123456`, which the previous `awesome-phonenumber@7.8.0` rejected.
+We keep this workaround until the next upstream awesome-phonenumber release
+incorporating the required metadata is available.
+
+The private workspace `packages-node/awesome-phonenumber` contains pinned fork
+and Google JavaScript sources, not a prebuilt distribution. Its build verifies
+source checksums, compiles with Closure ADVANCED and bundles ESM with Rollup using
+the fork's inputs and options. `npm run types --workspace @lion/ui` and `npm pack`
+build and copy the generated library into `packages/ui/generated/awesome-phonenumber`.
+Root postinstall builds these assets before source-analysis tools and browser tests;
+prepack also emits UI declarations for a fresh checkout.
+Wireit caches unchanged inputs; no source downloads occur during builds.
+`@lion/ui` has no awesome-phonenumber runtime or bundled dependency.
+Its package-private `#awesome-phonenumber` import maps types, ESM and CommonJS
+to the shipped assets, requiring no consumer browser import map.
+The legacy docs dependency keeps its separate registry version.
+MIT and Google's Apache-2.0 notices accompany both sources and generated assets.
+See [source provenance and build requirements](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/packages-node/awesome-phonenumber/README.md).
+
+Run `npm run test:node --workspace @lion/ui` to pack Lion, install it into a fresh
+consumer outside the checkout with no overrides, and verify ESM, CommonJS,
+TypeScript 7 and 4.7.4, licenses, provenance, and French Guiana metadata. It also
+checks deterministic source rebuilds and rejection of modified sources.
+The install needs registry access for Lion's ordinary dependencies, not the phone
+library. `npm run lint:phone-number-up-to-date` verifies the maintained source
+inventory rather than incorrectly claiming registry freshness.
+
+Once the next upstream awesome-phonenumber release includes the required
+metadata, restore the normal registry dependency in `packages/ui/package.json`,
+replace `#awesome-phonenumber` runtime/JSDoc imports with the registry name, and
+remove the private workspace, UI `imports` mapping, generated `files` entry and
+build/prepack hooks/helpers, including the root postinstall phone-build step.
+Remove the generated directory, source-lint integration, snapshot newline rule
+and third-party formatter/linter exclusions, then regenerate `package-lock.json`.
+Update the packaging test to check the registry dependency instead of generated
+assets. Keep the metadata
+regression test and rerun the phone tests, typechecks, and packed-consumer install
+check before removing this workaround documentation.
+
 ## How to use
 
 ### Extend a Web Component
@@ -228,6 +272,27 @@ We use [GitHub Pages](https://docs.github.com/en/pages) to host our static websi
 npm run deploy
 ```
 
+### Branch previews (test versions of the portal)
+
+A branch preview is the portal built with another base url, published in a folder that carries
+the branch name. Nothing links to it, so it can be shared before a branch is merged.
+
+```bash
+npm run portal:preview                     # HEAD -> https://lion.js.org/next-preview/<branch-slug>/
+npm run portal:preview -- --no-push        # build and stage locally, do not publish
+npm run portal:preview -- --no-build       # reuse the _site/ that is already there
+npm run portal:preview -- --branch=feat/x  # preview another branch
+```
+
+The portal resolves all of its urls against `import.meta.env.BASE_URL` (set through
+`ASTRO_BASE_URL`), so a preview is the ordinary build with a different prefix; no other source
+changes are involved. `next-preview/index.html` lists the previews that are currently published.
+
+The shared Pages site is public: a preview url is unlisted but not access controlled. For content
+that may not be public, stage it locally and expose it on the tailnet instead (`npm run
+portal:preview -- --target=local`, then serve `~/portal-previews` from a static server behind
+`tailscale serve`; the printed url is only reachable from devices in the tailnet).
+
 ## Contact
 
 Feel free to create a github issue for any feedback or questions you might have.

package/components/accordion/src/LionAccordion.js

@@ -26,18 +26,23 @@ export class LionAccordion extends LitElement {
       /**
        * index number of the focused accordion
        */
-      focusedIndex: { type: Number },
+      focusedIndex: {
+        type: Number,
+      },
       /**
        * array of indices of the expanded accordions
        */
-      expanded: { type: Array },
+      expanded: {
+        type: Array,
+      },
       /**
        * exclusive property allows only one accordion slot to be open at a time
        */
-      exclusive: { type: Boolean },
+      exclusive: {
+        type: Boolean,
+      },
     };
   }
-
   static get styles() {
     return [
       css`
@@ -78,7 +83,6 @@ export class LionAccordion extends LitElement {
     this.dispatchEvent(new Event('focused-changed'));
     this.requestUpdate('focusedIndex', stale);
   }
-
   get focusedIndex() {
     return this.__focusedIndex;
   }
@@ -93,7 +97,6 @@ export class LionAccordion extends LitElement {
     this.dispatchEvent(new Event('expanded-changed'));
     this.requestUpdate('expanded', stale);
   }
-
   get expanded() {
     return this.__expanded;
   }
@@ -115,7 +118,6 @@ export class LionAccordion extends LitElement {
    * @private
    */
   __store;
-
   constructor() {
     super();
     this.styles = {};
@@ -124,7 +126,6 @@ export class LionAccordion extends LitElement {
      * @type {boolean}
      */
     this.exclusive = false;
-
     this.__store = [];
   }
 
@@ -133,7 +134,6 @@ export class LionAccordion extends LitElement {
     super.firstUpdated(changedProperties);
     this.__setupSlots();
   }
-
   render() {
     return html`
       <div class="accordion">
@@ -148,9 +148,9 @@ export class LionAccordion extends LitElement {
    *  @private
    */
   __setupSlots() {
-    const invokerSlot = /** @type {HTMLSlotElement} */ (
-      this.shadowRoot?.querySelector('slot[name=invoker]')
-    );
+    const invokerSlot =
+      /** @type {HTMLSlotElement} */
+      this.shadowRoot?.querySelector('slot[name=invoker]');
     const handleSlotChange = () => {
       if (invokerSlot.assignedNodes().length > 0) {
         this.__cleanStore();
@@ -168,33 +168,29 @@ export class LionAccordion extends LitElement {
    *  @private
    */
   __setupStore() {
-    const accordion = /** @type {HTMLSlotElement} */ (
-      this.shadowRoot?.querySelector('slot[name=_accordion]')
-    );
+    const accordion =
+      /** @type {HTMLSlotElement} */
+      this.shadowRoot?.querySelector('slot[name=_accordion]');
     const existingInvokers = accordion
-      ? accordion.assignedElements().filter(child => child.classList.contains('invoker'))
+      ? accordion.assignedElements().filter((child) => child.classList.contains('invoker'))
       : [];
     const existingContent = accordion
-      ? accordion.assignedElements().filter(child => child.classList.contains('content'))
+      ? accordion.assignedElements().filter((child) => child.classList.contains('content'))
       : [];
-
-    const invokers = /** @type {HTMLElement[]} */ ([
+    const invokers = /** @type {HTMLElement[]} */ [
       ...Array.from(existingInvokers),
       ...Array.from(this.querySelectorAll(':scope > [slot="invoker"]')),
-    ]);
-
-    const contents = /** @type {HTMLElement[]} */ ([
+    ];
+    const contents = /** @type {HTMLElement[]} */ [
       ...Array.from(existingContent),
       ...Array.from(this.querySelectorAll(':scope > [slot="content"]')),
-    ]);
-
+    ];
     if (invokers.length !== contents.length) {
       // eslint-disable-next-line no-console
       console.warn(
         `The amount of invokers (${invokers.length}) doesn't match the amount of contents (${contents.length}).`,
       );
     }
-
     invokers.forEach((invoker, index) => {
       const uid = uuid();
       const content = contents[index];
@@ -214,7 +210,6 @@ export class LionAccordion extends LitElement {
       this._collapse(entry);
       this.__store.push(entry);
     });
-
     this.__rearrangeInvokersAndContent();
   }
 
@@ -225,22 +220,18 @@ export class LionAccordion extends LitElement {
    *  correctly when the user tabs.
    */
   __rearrangeInvokersAndContent() {
-    const invokers = /** @type {HTMLElement[]} */ (
-      Array.from(this.children).filter(child => child.slot === 'invoker')
-    );
-
-    const contents = /** @type {HTMLElement[]} */ (
-      Array.from(this.children).filter(child => child.slot === 'content')
-    );
-
+    const invokers =
+      /** @type {HTMLElement[]} */
+      Array.from(this.children).filter((child) => child.slot === 'invoker');
+    const contents =
+      /** @type {HTMLElement[]} */
+      Array.from(this.children).filter((child) => child.slot === 'content');
     const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]');
-
     if (accordion) {
       invokers.forEach((invoker, index) => {
         invoker.classList.add('invoker');
         // eslint-disable-next-line no-param-reassign
         invoker.slot = '_accordion';
-
         contents[index].classList.add('content');
         contents[index].slot = '_accordion';
       });
@@ -276,7 +267,7 @@ export class LionAccordion extends LitElement {
    * @private
    */
   __handleInvokerKeydown(e) {
-    const _e = /** @type {KeyboardEvent} */ (e);
+    const _e = /** @type {KeyboardEvent} */ e;
     switch (_e.key) {
       case 'ArrowDown':
       case 'ArrowRight':
@@ -361,7 +352,7 @@ export class LionAccordion extends LitElement {
    */
   _focusInvoker(entry) {
     const { invoker } = entry;
-    const firstChild = /** @type {HTMLElement|null} */ (invoker.firstElementChild);
+    const firstChild = /** @type {HTMLElement|null} */ invoker.firstElementChild;
     if (firstChild) {
       firstChild.focus();
       firstChild.setAttribute('focused', `${true}`);
@@ -416,7 +407,7 @@ export class LionAccordion extends LitElement {
   __updateFocused() {
     const focusedEntry = this.__store[this.focusedIndex];
     const previousFocusedEntry = Array.from(this.__store).find(
-      entry => entry.invoker && entry.invoker.firstElementChild?.hasAttribute('focused'),
+      (entry) => entry.invoker && entry.invoker.firstElementChild?.hasAttribute('focused'),
     );
     if (previousFocusedEntry) {
       this._unfocusInvoker(previousFocusedEntry);
@@ -435,7 +426,6 @@ export class LionAccordion extends LitElement {
     }
     this.__store.forEach((entry, index) => {
       const entryExpanded = this.expanded.indexOf(index) !== -1;
-
       if (entryExpanded) {
         this._expand(entry);
       } else {
@@ -451,7 +441,6 @@ export class LionAccordion extends LitElement {
   __toggleExpanded(indexClicked) {
     const indexFound = this.expanded.indexOf(indexClicked);
     const expandedNewValues = this.exclusive ? [] : [...this.expanded];
-
     if (indexFound === -1) {
       expandedNewValues.push(indexClicked);
     } else {
@@ -469,7 +458,7 @@ export class LionAccordion extends LitElement {
     if (!this.__store) {
       return;
     }
-    this.__store.forEach(entry => {
+    this.__store.forEach((entry) => {
       this._cleanInvoker(entry);
     });
     this.__store = [];