@supersoniks/concorde 1.1.25 → 1.1.27

package/core/components/functional/list/list.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/loader/loader";
-import "../subscriber/subscriber";
+import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
 declare const List_base: {
     new (...args: any[]): {
         api: import("../../../utils/api").default | null;

package/core/components/functional/list/list.js

@@ -11,7 +11,7 @@ import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
 import { repeat } from "lit/directives/repeat.js";
 import { templateContent } from "lit/directives/template-content.js";
 import "@supersoniks/concorde/core/components/ui/loader/loader";
-import "../subscriber/subscriber";
+import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import { ifDefined } from "lit/directives/if-defined.js";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";

package/core/components/ui/_css/scroll.d.ts

@@ -0,0 +1 @@
+export declare const customScroll: import("lit").CSSResult;

package/core/components/ui/_css/scroll.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+export const customScroll = css `
+
+  .custom-scroll {
+    overflow:auto !important;
+  }
+  
+  .custom-scroll::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+    border: solid .15rem transparent;
+    border-radius: var(--sc-rounded);
+    background:transparent;
+  }
+
+  .custom-scroll::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 2rem 2rem var(--sc-scrollbar-bg);
+    border-radius: var(--sc-rounded);
+    border: solid .15rem transparent;
+  }
+
+`;

package/core/components/ui/_css/types.d.ts

@@ -0,0 +1,2 @@
+export declare const typesColor: import("lit").CSSResult;
+export declare const typesBg: import("lit").CSSResult;

package/core/components/ui/_css/types.js

@@ -0,0 +1,60 @@
+import { css } from "lit";
+export const typesColor = css `
+  :host{
+    --sc-color:inherit;
+    color:var(--sc-color);
+  }
+
+  :host([type="primary"]) {
+    --sc-color: var(--sc-primary);
+  }
+  :host([type="warning"]) {
+    --sc-color: var(--sc-warning);
+  }
+  :host([type="danger"]) {
+    --sc-color: var(--sc-danger);
+  }
+  :host([type="info"]) {
+    --sc-color: var(--sc-info);
+  }
+  :host([type="success"]) {
+    --sc-color: var(--sc-success);
+  }
+
+  .inherit-color{
+    color:var(--sc-color);
+  }
+`;
+export const typesBg = css `
+  :host{
+    --sc-color:inherit;
+    --sc-bg:inherit;
+    color:var(--sc-color);
+    background:var(--sc-bg);
+  }
+
+  :host([type="primary"]) {
+    --sc-color: var(--sc-primary-content);
+    --sc-bg: var(--sc-primary);
+  }
+  :host([type="warning"]) {
+    --sc-color: var(--sc-warning-content);
+    --sc-bg: var(--sc-warning);
+  }
+  :host([type="danger"]) {
+    --sc-color: var(--sc-danger-content);
+    --sc-bg: var(--sc-danger);
+  }
+  :host([type="info"]) {
+    --sc-color: var(--sc-info-content);
+    --sc-bg: var(--sc-info);
+  }
+  :host([type="success"]) {
+    --sc-color: var(--sc-success-content);
+    --sc-bg: var(--sc-success);
+  }
+
+  .inherit-bg{
+    color:inherit;
+  }
+`;

package/core/components/ui/alert/alert.js

@@ -40,7 +40,7 @@ let Alert = class Alert extends LitElement {
                   </div>
                   <div >
                     ${this.label ? html `<span class="label">${this.label} :</span>` : nothing}
-                    ${this.text} <slot><slot>
+                    ${this.text} <slot></slot>
                   </div>
                 </div>`;
     }

package/core/components/ui/button/button.d.ts

@@ -110,7 +110,7 @@ export declare class Button extends Button_base {
     /**
      * target
      */
-    target: "_self" | "_blank" | null;
+    target?: "_self" | "_blank" | "_parent" | "_top";
     /**
      * L'url
      */

package/core/components/ui/button/button.js

@@ -74,10 +74,6 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         this.loading = false;
         this.hasPrefix = false;
         this.hasSuffix = false;
-        /**
-         * target
-         */
-        this.target = null;
         /**
          * L'url
          */

package/core/components/ui/card/card-footer.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from "lit";
 export declare class CardFooter extends LitElement {
-    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/card/card-footer.js

@@ -4,24 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css } from "lit";
+import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 const tagName = "sonic-card-footer";
 let CardFooter = class CardFooter extends LitElement {
+    // static styles = [
+    //   css`
+    //     :host {
+    //     }
+    //   `
+    // ];
     render() {
         return html `
       <slot></slot>
     `;
     }
 };
-CardFooter.styles = [
-    css `
-      :host {
-     
-      }
-   
-    `
-];
 CardFooter = __decorate([
     customElement(tagName)
 ], CardFooter);

package/core/components/ui/card/card-main.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from "lit";
 export declare class CardMain extends LitElement {
-    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/card/card-main.js

@@ -4,10 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css } from "lit";
+import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 const tagName = "sonic-card-main";
 let CardMain = class CardMain extends LitElement {
+    // static styles = [
+    //   css`
+    //     :host {
+    //     }
+    //   `
+    // ];
     render() {
         return html `
       <div>
@@ -16,14 +22,6 @@ let CardMain = class CardMain extends LitElement {
     `;
     }
 };
-CardMain.styles = [
-    css `
-      :host {
-     
-      }
-   
-    `
-];
 CardMain = __decorate([
     customElement(tagName)
 ], CardMain);

package/core/components/ui/form/checkbox/checkbox.d.ts

@@ -90,6 +90,7 @@ declare const Checkbox_base: {
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 export declare class Checkbox extends Checkbox_base {
     static styles: CSSResultGroup[];
+    touched: boolean;
     iconName: string;
     description: string;
     label: string;

package/core/components/ui/form/checkbox/checkbox.js

@@ -36,6 +36,7 @@ const tagName = "sonic-checkbox";
 let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
+        this.touched = false;
         this.iconName = "check";
         this.description = "";
         this.label = "";
@@ -80,6 +81,11 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
 };
 Checkbox.styles = [
     css `
+
+      :host{
+        --sc-checkbox-border-width: var(--sc-form-border-width);
+        --sc-checkbox-border-color:  transparent;
+      }
       * {
         box-sizing: border-box;
       }
@@ -109,6 +115,7 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-base-200);
+        border:var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -175,8 +182,20 @@ Checkbox.styles = [
       .hidden {
         display: none;
       }
+
+      /*ERROR*/
+      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) {
+        --sc-checkbox-border-color:var(--sc-danger);
+      }
+      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) .checkbox-text{
+        color:var(--sc-danger);
+      }
+
     `,
 ];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "touched", void 0);
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "iconName", void 0);

package/core/components/ui/form/css/form-control.js

@@ -6,8 +6,7 @@ export const formControl = css `
 
   :host {
     --sc-input-height: var(--sc-form-height, 2.5em);
-    --sc-input-border-with: var(--sc-form-border-width, 0.1rem);
-    --sc-input-border: var(--sc-input-border-with) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
+    --sc-input-border-width: var(--sc-form-border-width, 0.1rem);
     --sc-input-color: var(--sc-base-content, #1f2937);
 
     --sc-item-rounded-tr: var(--sc-input-rounded, var(--sc-rounded));
@@ -42,7 +41,7 @@ export const formControl = css `
 
     font-family: var(--sc-input-ff);
     background-color: var(--sc-input-bg, var(--sc-base, #fff));
-    border: var(--sc-input-border);
+    border: var(--sc-input-border-width) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -83,16 +82,16 @@ export const formControl = css `
     border-radius: var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);
     background-color: var(--sc-input-prefix-bg);
     color: var(--sc-input-prefix-color);
-    border: var(--sc-input-border-with) solid var(--sc-input-prefix-border-color);
-    margin-right: calc(-1 * var(--sc-input-border-with));
+    border: var(--sc-input-border-width) solid var(--sc-input-prefix-border-color);
+    margin-right: calc(-1 * var(--sc-input-border-width));
   }
 
   :host(:not([inlineContent])) slot[name="suffix"] {
     border-radius: 0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;
     background-color: var(--sc-input-suffix-bg);
     color: var(--sc-input-suffix-color);
-    border: var(--sc-input-border-with) solid var(--sc-input-suffix-border-color);
-    margin-left: calc(-1 * var(--sc-input-border-with));
+    border: var(--sc-input-border-width) solid var(--sc-input-suffix-border-color);
+    margin-left: calc(-1 * var(--sc-input-border-width));
   }
 
   :host(:not([inlineContent])) .has-prefix .form-element {
@@ -140,14 +139,7 @@ export const formControl = css `
     --sc-input-bg: transparent;
   }
 
-  /*ERROR*/
-  :host([error]) {
-    --sc-input-border-color: var(--sc-danger);
-  }
-
-  :host :not(select):not(textarea):not([value=""]):not(:focus):invalid {
-    --sc-input-color: var(--sc-danger);
-  }
+ 
 
   /*Disbaled*/
   :host([disabled]) .form-element {
@@ -192,30 +184,41 @@ export const formControl = css `
     all: unset !important;
   }
 
-  /*Textarea scrollbar*/
-  textarea::-webkit-scrollbar {
-    width: 0.4rem;
+  /*Utilitaires*/
+  .hidden {
+    display: none;
   }
-  textarea::-webkit-scrollbar-track {
-    width: 0.4rem;
+  .contents {
+    display: contents;
   }
-  textarea::-webkit-scrollbar-thumb {
-    background-color: var(--sc-base-500);
-    width: 0.4rem;
-    border-radius: var(--sc-rounded);
+
+
+  /*ERROR*/
+  :host([error]) {
+    --sc-input-border-color: var(--sc-danger);
   }
-  textarea::-webkit-scrollbar {
-    width: 0.4rem;
+
+  :host input:visited{
+    display:none;
   }
-  textarea::-webkit-scrollbar-track {
-    width: 0.4rem;
+
+  :host([touched]) :not(:focus):invalid {
+    --sc-input-border-color: var(--sc-danger);
+    --sc-input-color: var(--sc-danger);
   }
 
-  /*Utilitaires*/
-  .hidden {
-    display: none;
+  :host([touched]) :not(:focus):invalid + .select-chevron{
+    --sc-input-color: var(--sc-danger);
   }
-  .contents {
-    display: contents;
+
+  /*VALID*/
+  :host([touched]) :not([value=""]):not(:focus):valid {
+    --sc-input-border-color: var(--sc-success);
+    --sc-input-color: var(--sc-success);
   }
+
+  :host([touched]) :not(:focus):valid + .select-chevron{
+    --sc-input-color: var(--sc-success);
+  }
+
 `;

package/core/components/ui/form/fieldset/fieldset.d.ts

@@ -9,7 +9,7 @@ export declare class Fieldset extends Fieldset_base {
     /**
      * Lier à un formulaire qui ne serait pas parent du fieldset
      */
-    form: string;
+    form?: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/core/components/ui/form/fieldset/fieldset.js

@@ -17,10 +17,6 @@ let Fieldset = class Fieldset extends Subscriber(LitElement) {
          * Désactiver le fieldset
          */
         this.disabled = false;
-        /**
-         * Lier à un formulaire qui ne serait pas parent du fieldset
-         */
-        this.form = "";
     }
     render() {
         return html `<fieldset form="${ifDefined(this.form)}" ?disabled="${this.disabled}">

package/core/components/ui/form/fieldset/legend.d.ts

@@ -2,10 +2,10 @@ import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
 export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
-    description: string;
-    label: string;
+    description?: string;
+    label?: string;
     iconName?: string;
+    iconLibrary?: string;
     iconPrefix?: string;
-    iconLibray?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/form/fieldset/legend.js

@@ -10,11 +10,6 @@ import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-descriptio
 import { ifDefined } from "lit/directives/if-defined.js";
 const tagName = "sonic-legend";
 let Legend = class Legend extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.description = "";
-        this.label = "";
-    }
     render() {
         return html `<legend part="legend">
       ${this.iconName
@@ -22,7 +17,7 @@ let Legend = class Legend extends LitElement {
             <sonic-icon 
             name=${this.iconName} 
             prefix=${ifDefined(this.iconPrefix)}
-            library=${ifDefined(this.iconLibray)}></sonic-icon>
+            library=${ifDefined(this.iconLibrary)}></sonic-icon>
           </div>`
             : ""}
 
@@ -82,10 +77,10 @@ __decorate([
 ], Legend.prototype, "iconName", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconPrefix", void 0);
+], Legend.prototype, "iconLibrary", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconLibray", void 0);
+], Legend.prototype, "iconPrefix", void 0);
 Legend = __decorate([
     customElement(tagName)
 ], Legend);

package/core/components/ui/form/input/input.d.ts

@@ -35,9 +35,6 @@ declare const Input_base: {
         removeAttribute(name: string): void;
         initPublisher(): void;
         getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
-        /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;

package/core/components/ui/form/input/input.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from "lit";
 import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl } from "../css/form-control";
+import { formControl } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";

package/core/components/ui/form/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import { Checkbox } from "../checkbox/checkbox";
+import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
 export declare class Radio extends Checkbox {
     static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
     constructor();

package/core/components/ui/form/radio/radio.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { Checkbox } from "../checkbox/checkbox";
+import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
 /**
  * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
  *

package/core/components/ui/form/select/select.js

@@ -10,7 +10,7 @@ import { customElement, property, queryAssignedNodes, state } from "lit/decorato
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
-import { formControl } from "../css/form-control";
+import { formControl } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
@@ -132,7 +132,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         })}
             <slot></slot>
           </select>
-          <sonic-icon  name="nav-arrow-down" size="${this.size}"></sonic-icon>
+          <sonic-icon  class="select-chevron" name="nav-arrow-down" size="${this.size}"></sonic-icon>
         </div>
         <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
       </div>
@@ -154,12 +154,14 @@ Select.styles = [
         position: relative;
         width: 100%;
       }
+
       sonic-icon {
         position: absolute;
         right: 1em;
         top: 50%;
         pointer-events: none;
         transform: translateY(-50%);
+        color:var(--sc-input-color);
       }
 
       option {
@@ -167,7 +169,6 @@ Select.styles = [
         color: var(--sc-base-content);
         background: var(--sc-base);
       }
-
       
     `,
 ];

package/core/components/ui/form/textarea/textarea.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property, state, queryAssignedNodes } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl } from "../css/form-control";
+import { formControl } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
@@ -77,7 +78,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
           ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
           wrap=${ifDefined(this.wrap)}
-          class="form-element textarea"
+          class="form-element textarea custom-scroll"
           placeholder="${this.placeholder}"
         >
 ${this.value}</textarea
@@ -92,6 +93,7 @@ ${this.value}</textarea
 };
 Textarea.styles = [
     formControl,
+    customScroll,
     css `
       textarea {
         font-size: inherit;

package/core/components/ui/icon/icon.js

@@ -15,7 +15,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import Icons from "./icons";
+import Icons from "@supersoniks/concorde/core/components/ui/icon/icons";
 /**
  * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
  * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl

package/core/components/ui/icon/icons.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 var _a;
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import icons from "./icons.json";
+import icons from "@supersoniks/concorde/core/components/ui/icon/icons.json";
 /**
  * Ce tableau static permet de ne pas appeler plusieurs fois le même service lors d'appel concurrents en GET.
  */

package/core/components/ui/loader/loader.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var Loader_1;
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { inline } from "./styles/inline";
-import { fixed } from "./styles/fixed";
+import { inline } from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
+import { fixed } from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
 const tagName = "sonic-loader";
 let Loader = Loader_1 = class Loader extends LitElement {
     constructor() {

package/core/components/ui/menu/menu-item.d.ts

@@ -1,4 +1,4 @@
-import { Button } from "../button/button";
+import { Button } from "@supersoniks/concorde/core/components/ui/button/button";
 export declare class MenuItem extends Button {
     constructor();
     connectedCallback(): void;

package/core/components/ui/menu/menu-item.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement } from "lit/decorators.js";
-import { Button } from "../button/button";
+import { Button } from "@supersoniks/concorde/core/components/ui/button/button";
 const tagName = "sonic-menu-item";
 let MenuItem = class MenuItem extends Button {
     constructor() {

package/core/components/ui/menu/menu.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from "lit";
-import "./menu-item";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 export declare class MenuItems extends LitElement {
     static styles: import("lit").CSSResult[];
     /**

package/core/components/ui/menu/menu.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
-import "./menu-item";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 const tagName = "sonic-menu";
 let MenuItems = class MenuItems extends LitElement {
     constructor() {