@supersoniks/concorde 5.0.4 → 5.1.0

package/src/docs/code.ts

@@ -18,6 +18,25 @@ import "prismjs/components/prism-bash"; // Language
 // import "prismjs/components/prism-css"; // Language
 import "prismjs/components/prism-markup"; // Language
 
+let normalizeWhitespaceDefaultsApplied = false;
+
+function normalizeDocsCodeLanguage(language: string): string {
+  return language === "html" ? "markup" : language;
+}
+
+function applyNormalizeWhitespaceDefaults(): void {
+  if (normalizeWhitespaceDefaultsApplied) return;
+  normalizeWhitespaceDefaultsApplied = true;
+  Prism.plugins.NormalizeWhitespace.setDefaults({
+    "remove-trailing": true,
+    "remove-indent": true,
+    "left-trim": true,
+    "right-trim": true,
+    "remove-initial-line-feed": true,
+    "tabs-to-tabs": 2,
+  });
+}
+
 const tagName = "sonic-code";
 @customElement(tagName)
 export class DocsCode extends LitElement {
@@ -38,6 +57,7 @@ export class DocsCode extends LitElement {
         padding-right: 5rem !important;
         border: 1px solid var(--sc-base-200);
         border-radius: var(--sc-rounded);
+        margin: 0 !important;
       }
       .custom-scroll {
         overflow: auto !important;
@@ -70,62 +90,95 @@ export class DocsCode extends LitElement {
   @property({ type: Boolean, reflect: true }) showCode = false;
   @property({ type: Boolean, reflect: true }) toggleCode = false;
   @property({ type: Boolean, reflect: true }) noEdit = false;
-  @property({ type: Boolean, reflect: true }) noOutput = false;
 
   @property() language = "markup";
-  @property() defaultCode?: string;
-  @property() currentCode?: string;
+  @property({ attribute: false }) defaultCode?: string;
+  @property({ attribute: false }) currentCode?: string;
+  @property({ attribute: false }) codeOutput?: string;
 
-  @property() codeOutput?: string;
+  @query("#codePreview") codePreview!: HTMLPreElement;
 
-  //ELEMENTS
-  @property() templateEl: HTMLTemplateElement | null;
-  @query("#codePreview") codePreview;
-  @query("#codeRender") codeRender;
+  private templateEl: HTMLTemplateElement | null = null;
 
-  //States
   @state() codeEdited = false;
 
-  /** Aperçu live uniquement pour les blocs markup (évite d’injecter du HTML depuis des exemples JS). */
-  private get rendersLiveOutput(): boolean {
-    return this.language === "markup" && !this.noOutput;
+  /** Live preview only for markup (avoid injecting HTML from JS/TS examples). */
+  private get prismLanguage(): string {
+    return normalizeDocsCodeLanguage(this.language);
   }
 
-  // createRenderRoot() {
-  //   return this;
-  // }
+  private get rendersLiveOutput(): boolean {
+    return this.prismLanguage === "markup";
+  }
 
   connectedCallback() {
     super.connectedCallback();
     if (!this.toggleCode) {
       this.showCode = true;
     }
+    this.syncFromTemplate();
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (
+      changedProperties.has("language") &&
+      changedProperties.get("language") !== undefined
+    ) {
+      this.applyLanguageChange();
+    }
+  }
 
+  private normalizeSourceForHighlight(source: string): string {
+    applyNormalizeWhitespaceDefaults();
+    const nw = Prism.plugins.NormalizeWhitespace;
+    return nw
+      .normalize(source)
+      .replaceAll('=""', "")
+      .replaceAll(""", '"')
+      .replaceAll('"{', "'{")
+      .replaceAll('}"', "}'")
+      .replaceAll("&", "&");
+  }
+
+  private highlightSource(source: string): string {
+    const lang = this.prismLanguage;
+    const grammar = Prism.languages[lang];
+    if (!grammar) {
+      return source;
+    }
+    return Prism.highlight(
+      this.normalizeSourceForHighlight(source),
+      grammar,
+      lang,
+    );
+  }
+
+  private syncFromTemplate() {
     this.templateEl = this.querySelector("template");
     this.defaultCode = this.readTemplateSourceCode();
+    this.codeEdited = false;
 
     if (this.defaultCode) {
-      Prism.plugins.NormalizeWhitespace.setDefaults({
-        "remove-trailing": true,
-        "remove-indent": true,
-        "left-trim": true,
-        "right-trim": true,
-        "remove-initial-line-feed": true,
-        "tabs-to-tabs": 2,
-      });
-      const nw = Prism.plugins.NormalizeWhitespace;
-      const normalizedCode = nw
-        .normalize(this.defaultCode)
-        .replaceAll('=""', "")
-        .replaceAll(""", '"')
-        .replaceAll('"{', "'{")
-        .replaceAll('}"', "}'")
-        .replaceAll("&", "&");
-      this.currentCode = Prism.highlight(
-        normalizedCode,
-        Prism.languages[this.language],
-        this.language,
-      );
+      this.currentCode = this.highlightSource(this.defaultCode);
+    } else {
+      this.currentCode = undefined;
+    }
+
+    if (this.rendersLiveOutput) {
+      this.codeOutput = this.defaultCode;
+    } else {
+      this.removeOutputSlot();
+    }
+  }
+
+  private applyLanguageChange() {
+    this.defaultCode = this.readTemplateSourceCode();
+    this.codeEdited = false;
+
+    if (this.defaultCode) {
+      this.currentCode = this.highlightSource(this.defaultCode);
+    } else {
+      this.currentCode = undefined;
     }
 
     if (this.rendersLiveOutput) {
@@ -148,10 +201,10 @@ export class DocsCode extends LitElement {
    * when the fragment has elements; otherwise textContent (imports, types, etc.).
    */
   private readTemplateSourceCode(): string {
-    const template = this.templateEl;
+    const template = this.templateEl ?? this.querySelector("template");
     if (!template) return "";
 
-    if (this.language === "markup") {
+    if (this.prismLanguage === "markup") {
       return this.decodeTemplateEntities(template.innerHTML);
     }
 
@@ -160,11 +213,16 @@ export class DocsCode extends LitElement {
     return template.content.textContent ?? "";
   }
 
+  private getPreviewPlainText(): string {
+    return this.codePreview?.innerText ?? "";
+  }
+
   updateCodeRender() {
-    if (this.defaultCode !== this.currentCode) {
-      this.codeEdited = true;
+    const plain = this.getPreviewPlainText();
+    this.codeEdited = plain !== (this.defaultCode ?? "");
+    if (this.rendersLiveOutput) {
+      this.codeOutput = plain;
     }
-    this.codeOutput = this.codePreview?.innerText;
   }
 
   resetCode() {
@@ -173,11 +231,7 @@ export class DocsCode extends LitElement {
     if (this.defaultCode) {
       this.currentCode = "";
       window.requestAnimationFrame(() => {
-        this.currentCode = Prism.highlight(
-          this.defaultCode || "",
-          Prism.languages[this.language],
-          this.language,
-        );
+        this.currentCode = this.highlightSource(this.defaultCode || "");
       });
     }
     if (this.rendersLiveOutput) {
@@ -189,15 +243,27 @@ export class DocsCode extends LitElement {
     this.showCode = !this.showCode;
   }
 
-  handleCopyCode(e: Event) {
-    const text = this.codeOutput ?? this.defaultCode;
-    if (text) {
-      navigator.clipboard.writeText(text);
-      const button = e.currentTarget as HTMLButtonElement;
+  private getCopyText(): string {
+    if (!this.noEdit) {
+      const fromPreview = this.getPreviewPlainText();
+      if (fromPreview) return fromPreview;
+    }
+    return this.codeOutput ?? this.defaultCode ?? "";
+  }
+
+  async handleCopyCode(e: Event) {
+    const text = this.getCopyText();
+    if (!text) return;
+
+    const button = e.currentTarget as HTMLButtonElement;
+    try {
+      await navigator.clipboard.writeText(text);
       button?.setAttribute("active", "");
       setTimeout(() => {
         button?.removeAttribute("active");
       }, 500);
+    } catch {
+      // Clipboard unavailable or permission denied.
     }
   }
 
@@ -205,8 +271,7 @@ export class DocsCode extends LitElement {
     super.updated(changedProperties);
     if (
       changedProperties.has("codeOutput") ||
-      changedProperties.has("language") ||
-      changedProperties.has("noOutput")
+      changedProperties.has("language")
     ) {
       this.appendOutput();
     }
@@ -216,6 +281,7 @@ export class DocsCode extends LitElement {
     this.querySelector("[slot=output]")?.remove();
   }
 
+  /** Trusted doc demo markup only — same source as the live preview slot. */
   appendOutput() {
     if (!this.rendersLiveOutput) {
       this.removeOutputSlot();
@@ -231,20 +297,21 @@ export class DocsCode extends LitElement {
       output.innerHTML = this.codeOutput || "";
     }
   }
+
   handleGetSDUI() {
     SDUIUtils.toJson(this.templateEl?.content.children);
   }
 
   render() {
-    // ${this.language === "markup" ? html`<div class="py-3">${unsafeHTML(this.codeOutput || "")}</div>` : nothing} //
+    const isMarkup = this.prismLanguage === "markup";
 
     return html`
       <div
-        class="relative ${this.language === "markup"
+        class="relative ${isMarkup
           ? "rounded-md border border-neutral-200 bg-neutral-50/80 dark:border-neutral-700/80 dark:bg-neutral-900/40 p-4"
           : ""}"
       >
-        ${this.language === "markup" && !this.noOutput
+        ${isMarkup
           ? html`<slot name="output" class="block py-3"></slot>`
           : nothing}
 
@@ -282,7 +349,7 @@ export class DocsCode extends LitElement {
                 name="check"
               ></sonic-icon>
             </sonic-button>
-            ${this.language == "markup"
+            ${isMarkup
               ? html`<sonic-button
                   size="2xs"
                   shape
@@ -316,7 +383,7 @@ export class DocsCode extends LitElement {
           <div>
             <pre
               id="codePreview"
-              class="rounded-md custom-scroll language-${this.language} ${!this
+              class="rounded-md custom-scroll language-${this.prismLanguage} ${!this
                 .showCode || !this.currentCode
                 ? "hidden"
                 : ""}"

package/src/docs/header/header.ts

@@ -81,16 +81,21 @@ export class SonicComponent extends Subscriber(LitElement) {
               viewBox="0 0 66 66"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-
             >
-              <circle cx="33" cy="33" r="30" fill="var(--sc-base-content, #000)"  />
+              <circle
+                cx="33"
+                cy="33"
+                r="30"
+                fill="var(--sc-base-content, #000)"
+              />
               <path
                 d="M33.2499 62.03C33.8799 59.24 34.26 56.17 34.39 53.08C34.57 52.78 34.9099 52.6 35.2599 52.64H35.39C35.48 52.64 35.5799 52.64 35.6899 52.64H35.7599C35.7599 52.64 35.7999 52.64 35.8299 52.64C36.2499 52.62 36.6799 52.58 36.9099 52.56C36.9399 52.56 36.9599 52.56 36.9799 52.56C37.0099 52.56 37.0299 52.56 37.0499 52.56H37.0899L37.2099 51.93H37.4799L37.5799 52.4L37.6899 52.49H39.2699L39.39 52.38L39.5099 51.93H39.7899L39.8399 52.21L39.9999 52.29L45.2099 51.86L46.2799 51.29C46.2799 51.29 46.2799 50.85 46.2399 50.25V50.18C46.2399 50.18 46.2399 50.13 46.2399 50.11C46.2099 49.62 46.1399 49.13 46.0399 48.65C45.7899 47.45 45.29 46 42.2 41.58C39.11 37.16 38.04 35.52 35.89 27.63C35.85 27.48 35.8199 27.35 35.7899 27.2C35.1399 24.53 34.6899 22.95 34.5199 22.38V10.89C34.4999 9.60996 34.3999 8.33996 34.2099 7.07996C34.0499 5.97996 33.6099 4.89996 33.3499 3.95996H32.6299C32.3599 4.89996 31.9299 5.97996 31.7699 7.06996C31.5799 8.33996 31.4799 9.60996 31.4599 10.89V22.38C31.2899 22.95 30.8299 24.52 30.1899 27.2C30.1599 27.35 30.1199 27.49 30.0899 27.63C27.9499 35.52 26.8699 37.16 23.7799 41.58C20.6899 46 20.1899 47.45 19.9399 48.65C19.8399 49.13 19.7799 49.62 19.7399 50.11C19.7399 50.13 19.7399 50.16 19.7399 50.18V50.25C19.6999 50.85 19.7 51.29 19.7 51.29L20.7699 51.86L25.9799 52.29L26.14 52.21L26.1899 51.93H26.4799L26.5999 52.38L26.7299 52.49H28.2999L28.4099 52.4L28.5099 51.93H28.7699L28.89 52.56H28.9399C28.9399 52.56 28.9799 52.56 29.0099 52.56C29.0299 52.56 29.0499 52.56 29.0799 52.56C29.3099 52.58 29.7499 52.63 30.1599 52.64C30.1799 52.64 30.2099 52.64 30.2299 52.64H30.2999C30.4099 52.64 30.5099 52.64 30.5999 52.64H30.7299C31.0799 52.6 31.4299 52.77 31.6099 53.08C31.7299 56.17 32.1099 59.24 32.7399 62.03H33.2499Z"
                 fill="var(--sc-base, #fff)"
               />
             </svg>
 
-            <span class="font-headings text-4xl leading-none inline-block italic font-semibold"
+            <span
+              class="font-headings text-4xl leading-none inline-block italic font-semibold"
               >concorde</span
             >
           </sonic-link>
@@ -98,11 +103,20 @@ export class SonicComponent extends Subscriber(LitElement) {
 
         <div class="ml-auto flex gap-x-3 ">
           <sonic-button
+            class="lg:hidden"
+            shape="circle"
+            icon
             @click=${() => (this.searchVisible = !this.searchVisible)}
-            class="lg:min-w-[19rem]"
+          >
+            <sonic-icon name="magnifying-glass" library="custom"></sonic-icon>
+          </sonic-button>
+          <sonic-button
+            @click=${() => (this.searchVisible = !this.searchVisible)}
+            class="hidden lg:block lg:w-[19rem]"
+            shape="block"
             align="left"
           >
-            Quick search...
+            Search...
             <sonic-icon
               name="magnifying-glass"
               library="custom"
@@ -112,11 +126,9 @@ export class SonicComponent extends Subscriber(LitElement) {
 
           <sonic-pop>
             <sonic-button shape="circle" variant="ghost" icon>
-              ${
-                this.theme == "light"
-                  ? html`<sonic-icon name="sun" library="custom"></sonic-icon>`
-                  : html`<sonic-icon name="moon" library="custom"></sonic-icon>`
-              }
+              ${this.theme == "light"
+                ? html`<sonic-icon name="sun" library="custom"></sonic-icon>`
+                : html`<sonic-icon name="moon" library="custom"></sonic-icon>`}
             </sonic-button>
 
             <sonic-menu slot="content">
@@ -147,68 +159,64 @@ export class SonicComponent extends Subscriber(LitElement) {
         </div>
       </div>
 
-
-
-  ${
-    this.searchVisible
-      ? html`
-          <div
-            ${animate({
-              keyframeOptions: {
-                duration: 250,
-              },
-              in: [
-                {
-                  opacity: 0,
-                },
-              ],
-              out: [
-                {
-                  opacity: 0,
-                },
-              ],
-              stabilizeOut: true,
-            })}
-            class="fixed top-0 w-full left-0  z-[3000] pt-[20vh] flex items-center justify-center "
-          >
-            <div
-              @click=${() => this.hideSearch()}
-              class="bg-neutral-0 dark:bg-neutral-300 opacity-90 fixed top-0 left-0 w-full h-full "
-            ></div>
-
+      ${this.searchVisible
+        ? html`
             <div
               ${animate({
                 keyframeOptions: {
                   duration: 250,
-                  easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
                 },
                 in: [
                   {
-                    transform: "translateY(1rem) scale(1.05)",
                     opacity: 0,
                   },
                 ],
                 out: [
                   {
-                    transform: "scale(.90) ",
                     opacity: 0,
-                    duration: 3000,
-                    easing: `ease-in-out`,
                   },
                 ],
                 stabilizeOut: true,
               })}
-              class="relative z-20   w-full max-w-[40rem] w-full block   "
+              class="fixed top-0 w-full left-0  z-[3000] pt-[20vh] flex items-center justify-center "
             >
-              <docs-search setFocus class="max-w-[40rem] w-full block">
-              </docs-search>
+              <div
+                @click=${() => this.hideSearch()}
+                class="bg-neutral-0 dark:bg-neutral-300 opacity-90 fixed top-0 left-0 w-full h-full "
+              ></div>
+
+              <div
+                ${animate({
+                  keyframeOptions: {
+                    duration: 250,
+                    easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+                  },
+                  in: [
+                    {
+                      transform: "translateY(1rem) scale(1.05)",
+                      opacity: 0,
+                    },
+                  ],
+                  out: [
+                    {
+                      transform: "scale(.90) ",
+                      opacity: 0,
+                      duration: 3000,
+                      easing: `ease-in-out`,
+                    },
+                  ],
+                  stabilizeOut: true,
+                })}
+                class="relative z-20 max-w-[30rem] lg:max-w-[35rem] w-full block   "
+              >
+                <docs-search
+                  setFocus
+                  class="max-w-[30rem] lg:max-w-[35rem] w-full block"
+                >
+                </docs-search>
+              </div>
             </div>
-          </div>
-        `
-      : nothing
-  }
-      </div>
-
-      </div> `;
+          `
+        : nothing}`;
   }
 }

package/src/docs/mock-api/router.ts

@@ -186,6 +186,7 @@ export async function handleDocsMockApiRequest(
         {
           messages: [
             {
+              type: "public",
               content: "email and password are required",
               status: "error",
             },
@@ -230,6 +231,7 @@ export async function handleDocsMockApiRequest(
         {
           messages: [
             {
+              type: "public",
               content: "email and password query params are required",
               status: "error",
             },

package/src/docs/navigation/navigation.ts

@@ -19,7 +19,7 @@ export class DocsNavigation extends LitElement {
       href: "#docs/_getting-started/my-first-component.md/my-first-component",
     },
     {
-      label: "Adding styles",
+      label: "Customization",
       href: "#docs/_getting-started/theming.md/theming",
     },
     "Core concept",
@@ -126,7 +126,10 @@ export class DocsNavigation extends LitElement {
       label: "Textarea",
       href: "#core/components/ui/form/textarea/textarea.md/textarea",
     },
-    { label: "Theme", href: "#" },
+    {
+      label: "Theme",
+      href: "#core/components/ui/theme/theme.md/theme",
+    },
     { label: "Toast", href: "#core/components/ui/toast/toast.md/toast" },
     {
       label: "Tooltip",
@@ -247,7 +250,7 @@ export class DocsNavigation extends LitElement {
   firstUpdated(properties: PropertyValues) {
     super.firstUpdated(properties);
     const activeItem = this.shadowRoot?.querySelector(
-      'sonic-menu-item[active]:not([href="#"])'
+      'sonic-menu-item[active]:not([href="#"])',
     );
     if (activeItem) {
       window.queueMicrotask(() => {