@supersoniks/concorde 5.0.4 → 5.1.0

package/src/core/components/ui/icon/icon.md

@@ -1,125 +1,214 @@
 # Icon
 
+**`sonic-icon`** renders inline SVG icons from the **bundled core set** or from **CDN libraries**. Set **`name`** (and **`library`** / **`prefix`** when needed); scale with **`size`**. Icons inherit **`currentColor`** and are **`aria-hidden`** by default—keep visible text nearby or label the control that contains them.
 
-## Custom
+## Core library
 
-<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
+Omit **`library`** to use the bundled set in `icons.json`. Available **`name`** values: `cancel` · `check` · `check-circled-outline` · `emoji-puzzled` · `info-empty` · `loader` · `minus-small` · `more-horiz` · `more-vert` · `nav-arrow-down` · `warning-circled-outline`.
 
-<sonic-code customIconLibraryPath="/svg/$prefix/$name.svg"
-      customIconDefaultPrefix="regular">
+<sonic-code>
   <template>
-    <sonic-scope  customIconLibraryPath="/svg/$prefix/$name.svg"
-      customIconDefaultPrefix="regular">
-      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
-          <br>
-          <div class="text-xs mt-1">regular</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
-          <br>
-          <div class="text-xs mt-1">solid</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom"  name="plane"></sonic-icon>
-          <br>
-          <div class="text-xs mt-1">default prefix</div>
-        </div>
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
+      <div class="text-center">
+        <sonic-icon name="cancel" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">cancel</div>
       </div>
-    </sonic-scope>
+      <div class="text-center">
+        <sonic-icon name="check" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">check</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">check-circled-outline</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">emoji-puzzled</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="info-empty" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">info-empty</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="loader" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">loader</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="minus-small" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">minus-small</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="more-horiz" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">more-horiz</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="more-vert" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">more-vert</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">nav-arrow-down</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">warning-circled-outline</div>
+      </div>
+    </div>
   </template>
 </sonic-code>
 
+## External libraries
+
+Set **`library`** to load SVGs from a built-in CDN template. **`prefix`** falls back to each library’s default when omitted (`outline` for **`heroicons`**, **`regular`** for **`fontAwesome`** and **`material`**, and so on).
 
-## External
 <sonic-code>
   <template>
     <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
       <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">heroicons</div>
       </sonic-link>
       <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="iconoir" name="2x2-cell"  size="lg"></sonic-icon>
-        <br>
+        <sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
+        <br />
         <div class="text-xs mt-1">iconoir</div>
       </sonic-link>
       <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
         <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">material design</div>
       </sonic-link>
       <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
         <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">fontAwesome regular</div>
       </sonic-link>
       <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
         <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">fontAwesome solid</div>
       </sonic-link>
       <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="feathers" name="activity"  size="lg"></sonic-icon>
-        <br>
+        <sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
+        <br />
         <div class="text-xs mt-1">feathers</div>
       </sonic-link>
       <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
-        <sonic-icon library="lucide" name="album"  size="lg"></sonic-icon>
-        <br>
+        <sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
+        <br />
         <div class="text-xs mt-1">lucide</div>
       </sonic-link>
     </div>
   </template>
 </sonic-code>
 
+## Custom library
+
+Use **`library="custom"`** with SVG files on your origin. On an ancestor (for example **`sonic-scope`** or **`sonic-code`**), set **`customIconLibraryPath`** to a URL template with **`$prefix`** and **`$name`** placeholders, and optionally **`customIconDefaultPrefix`** when **`prefix`** is omitted.
+
+<sonic-code
+  customIconLibraryPath="/svg/$prefix/$name.svg"
+  customIconDefaultPrefix="regular"
+>
+  <template>
+    <sonic-scope
+      customIconLibraryPath="/svg/$prefix/$name.svg"
+      customIconDefaultPrefix="regular"
+    >
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
+          <br />
+          <div class="text-xs mt-1">regular</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
+          <br />
+          <div class="text-xs mt-1">solid</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom" name="plane"></sonic-icon>
+          <br />
+          <div class="text-xs mt-1">default prefix</div>
+        </div>
+      </div>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
 ## Size
+
+Omit **`size`** for the default scale (`1em` height). Larger steps use **`3xl`**.
+
 <sonic-code>
   <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">2xs</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">xs</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">sm</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">default</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">lg</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">xl</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">2xl</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">3xl</div>
       </div>
     </div>
   </template>
 </sonic-code>
 
+## Accessibility
+
+On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on **`sonic-icon`** alone for meaning—use visible text or **`aria-label`** on the parent button / link.
+
+<sonic-code>
+  <template>
+    <sonic-button type="neutral" variant="outline" shape="circle" aria-label="User profile">
+      <sonic-icon library="iconoir" name="user"></sonic-icon>
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Icon id in the core bundle or in the remote library |
+| `library` | `heroicons` · `iconoir` · `feathers` · `lucide` · `material` · `fontAwesome` · `custom` | CDN or custom template; omit for bundled core icons |
+| `prefix` | string | Library-specific variant; defaults per library when empty |
+| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `md`) | `em`-based SVG scale on the host |
+
+Ancestor attributes (for **`library="custom"`** only): **`customIconLibraryPath`** (URL template with **`$prefix`** and **`$name`**) and **`customIconDefaultPrefix`**. May be set on **`sonic-scope`**, theme roots, or globally in the document.
+
+No slots — the component inlines fetched or bundled SVG markup.

package/src/core/components/ui/image/image.md

@@ -1,6 +1,6 @@
 # Image
 
-Responsive **`<img>`** wrapper: aspect ratio, `object-fit: cover`, rounded corners, and optional fade-in on load. The host uses a light placeholder background (`--sc-placeholder-bg`) until the file is ready. Default **`loading`** is `lazy`; set **`loading="eager"`** for above-the-fold heroes.
+**`sonic-image`** wraps a responsive **`<img>`** with aspect ratio, `object-fit: cover`, optional rounded corners, and load transitions. The host shows a placeholder background (`--sc-placeholder-bg`) until the asset loads. Default **`loading`** is `lazy`; use **`loading="eager"`** for above-the-fold heroes.
 
 ## Rounded
 
@@ -149,7 +149,7 @@ Click **Add image** to append small thumbnails and replay the transition. **Clea
           img.ratio = '1/1';
           img.rounded = 'md';
           img.loading = 'eager';
-          img.style.width = '5rem';
+          img.style.width = '8rem';
           img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
           host.appendChild(img);
         })()"
@@ -166,7 +166,7 @@ Click **Add image** to append small thumbnails and replay the transition. **Clea
           img.ratio = '1/1';
           img.rounded = 'md';
           img.loading = 'eager';
-          img.style.width = '5rem';
+          img.style.width = '8rem';
           img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
           host.appendChild(img);
         })()"
@@ -199,3 +199,35 @@ Always set meaningful **`alt`** text (empty string only for decorative images).
     ></sonic-image>
   </template>
 </sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `src` | URL | Image URL passed to `<img src>` |
+| `alt` | string | Accessible description; use `""` only for decorative images |
+| `loading` | `lazy` (default), `eager` | Native lazy loading |
+| `ratio` | CSS ratio, `auto` (default) | Host `aspect-ratio` on the image (ignored when `cover` is set) |
+| `rounded` | `none` (default), boolean, `base`, `sm`, `md`, `lg`, `xl`, `full` | Corner radius from theme tokens; `full` is a circle (often with `ratio="1/1"`) |
+| `objectPosition` | CSS position | Maps to `object-position` (default `center center`) |
+| `imageRendering` | CSS value | Maps to `image-rendering` (default `auto`) |
+| `cover` | boolean | Absolutely fills a positioned parent; host aspect ratio is ignored |
+| `transition` | `fade`, `fade-scale-out` | Opacity (and scale) animation after `load`; remount to replay on `src` change |
+
+No slots — content is driven entirely by attributes on the inner `<img>`.
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `src` | URL | Image URL passed to `<img src>` |
+| `alt` | string | Accessible description; use `""` only for decorative images |
+| `loading` | `lazy` (default), `eager` | Native lazy loading |
+| `ratio` | CSS ratio, `auto` (default) | Host `aspect-ratio` on the image (ignored when `cover` is set) |
+| `rounded` | `none` (default), boolean, `base`, `sm`, `md`, `lg`, `xl`, `full` | Corner radius from theme tokens; `full` is a circle (often with `ratio="1/1"`) |
+| `objectPosition` | CSS position | Maps to `object-position` (default `center center`) |
+| `imageRendering` | CSS value | Maps to `image-rendering` (default `auto`) |
+| `cover` | boolean | Absolutely fills a positioned parent; host aspect ratio is ignored |
+| `transition` | `fade`, `fade-scale-out` | Opacity (and scale) animation after `load`; remount to replay on `src` change |
+
+No slots — content is driven entirely by attributes on the inner `<img>`.

package/src/core/components/ui/link/link.md

@@ -1,6 +1,9 @@
 # Link
 
-## Href
+Links **navigate** with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair **`href`** with **`pushstate`**; use **`autoActive`** to reflect the current URL on the host (`active`).
+
+## Basic example
+
 <sonic-code>
   <template>
     <sonic-link href="/">Basic link with href attribute</sonic-link>
@@ -8,27 +11,45 @@
 </sonic-code>
 
 ## Target
+
+**`target="_blank"`** opens a new browsing context and sets **`rel="noopener noreferrer"`**.
+
 <sonic-code>
   <template>
     <sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
   </template>
 </sonic-code>
 
+## Pushstate
+
+Set **`pushstate`** on same-origin **`href`** values to intercept clicks and navigate through Concorde’s client router without a full reload.
+
+<sonic-code>
+  <template>
+    <sonic-link href="/#core/components" pushstate>Client navigation (pushstate)</sonic-link>
+  </template>
+</sonic-code>
+
 ## AutoActive
 
+Default **`autoActive`** is **`partial`**: the host gets **`active`** when the current URL starts with **`href`**. Style with **`[&[active]]:`** utilities or host selectors.
+
 <sonic-code>
   <template>
-    <sonic-link href="/#core/components"  class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
+    <sonic-link href="/#core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
   </template>
 </sonic-code>
 
-### AutoActive Strict vs partial
+### AutoActive strict vs partial
+
+**`strict`** requires pathname, search, and hash to match. **`strict-path-only`** matches pathname and hash but ignores search.
 
 <sonic-code>
   <template>
     <div class="grid gap-3">
       <sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
-      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
+      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict (long href)</sonic-link>
+      <sonic-link href="/#core/components" autoActive="strict-path-only" class="[&[active]]:text-success">autoActive strict-path-only</sonic-link>
     </div>
   </template>
 </sonic-code>
@@ -37,7 +58,24 @@
 
 <sonic-code>
   <template>
-      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
+    <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
   </template>
 </sonic-code>
 
+## Accessibility
+
+The inner **`<a>`** uses **`focus-visible`** outline styling. Set **`data-aria-label`** when the slot text is not sufficient on its own.
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `href` | URL | Link target; without **`href`**, only the slot is rendered (no **`<a>`**) |
+| `target` | e.g. `_blank` | Navigation target; **`_blank`** adds **`rel="noopener noreferrer"`** |
+| `pushstate` | boolean | Intercepts click for Concorde client navigation without reload |
+| `autoActive` | `partial` (default) · `strict` · `strict-path-only` · `disabled` | When the host gets the **`active`** attribute (same-origin **`href`** only) |
+| `data-aria-label` | string | Accessible **`aria-label`** when the slot text is not enough |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Link content (text, icons) |

package/src/core/components/ui/loader/loader.md

@@ -1,6 +1,10 @@
-# Loader 
+# Loader
 
-## Inline mode
+**`sonic-loader`** shows a loading animation in the page or as a viewport overlay. Default **`mode`** is **`fixed`** (centered overlay). Use **`inline`** inside lists and fetch placeholders. Pair **`noDelay`** when the spinner should appear without the default fade-in wait. For **`sonic-fetch`** / **`sonic-list`**, set the parent **`loader`** attribute instead of embedding a tag manually.
+
+## Basic example
+
+Inline loaders fit content areas; they use the theme primary color unless **`currentColor`** is set.
 
 <sonic-code>
   <template>
@@ -8,48 +12,101 @@
   </template>
 </sonic-code>
 
-## CurrentColor 
+## Mode
+
+**`inline`** — ellipsis animation in the document flow. **`fixed`** — centered overlay (`position: fixed`); default when the tag is omitted.
 
 <sonic-code>
   <template>
-    <sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>
+    <sonic-loader mode="inline"></sonic-loader>
   </template>
 </sonic-code>
 
+Use the checkbox below to toggle a **`fixed`** loader over the page (default **`mode`** on **`sonic-loader`**).
 
-## Align
+<docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo>
+
+## Inline alignment and color
+
+**`align`** only affects **`mode="inline"`**: **`left`** · **`center`** (default) · **`right`**. Set **`currentColor`** so dots follow the host `color` (for example on a purple parent).
 
 <sonic-code>
   <template>
-    <sonic-loader mode="inline" align="left"></sonic-loader>
-    <sonic-loader mode="inline" align="center"></sonic-loader>
-    <sonic-loader mode="inline" align="right"></sonic-loader>
+    <div class="grid gap-4">
+      <sonic-loader mode="inline" currentColor style="color: purple;"></sonic-loader>
+      <div class="flex flex-col gap-2">
+        <sonic-loader mode="inline" align="left"></sonic-loader>
+        <sonic-loader mode="inline" align="center"></sonic-loader>
+        <sonic-loader mode="inline" align="right"></sonic-loader>
+      </div>
+    </div>
   </template>
 </sonic-code>
 
-## Fixed mode
+## `noDelay`
 
-<docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo>
+By default **`mode="fixed"`** waits briefly before fading in. **`mode="inline"`** already skips that wait. Set **`noDelay`** on **`fixed`** (or pass **`noDelay: true`** to **`Loader.show()`**) to appear immediately.
 
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline" noDelay></sonic-loader>
+  </template>
+</sonic-code>
+
+## Accessibility (`announce`)
+
+The animation is **`aria-hidden`** by default so screen readers are not spammed on every fetch. Set **`announce`** when the loader is injected **after** user action (for example a global overlay): the host gets **`role="status"`**, **`aria-live="polite"`**, and a localized **`aria-label`** (“Loading” / “Chargement en cours”, …). For in-button loading, prefer **`sonic-button`** **`loading`** and **`aria-busy`** on the control—not on the loader.
 
-## Loading button
 <sonic-code>
   <template>
-    <sonic-button loading>A loading button</sonic-button>
+    <sonic-loader mode="inline" announce></sonic-loader>
   </template>
 </sonic-code>
 
-## Hide / show programmatically
+## Show and hide programmatically
+
+Import **`Loader`** and call **`Loader.show()`** / **`Loader.hide()`**. **`hide()`** is reference-counted: call it once per **`show()`**. With no **`container`**, the loader is appended to the theme pop container and **`mode`** is always **`fixed`**. Pass **`container`** and **`mode: "inline"`** to mount an inline instance in a specific element.
 
 <sonic-code language="javascript">
   <template>
-  import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader";
-  // Show 
-  Loader.show({
-    mode:"fixed" // optional : fixed | inline
-    container : document.querySelector('#foo') // optional, default : parent sonic-theme || document.body
-  });
-  // Hide 
-  Loader.hide();
+import { Loader } from "@supersoniks/concorde/core/components/ui/loader/loader";
+
+Loader.show({
+  mode: "fixed",
+  noDelay: false,
+  announce: true,
+  container: document.querySelector("#foo"),
+});
+
+Loader.hide();
   </template>
-</sonic-code>
+</sonic-code>
+
+## Composition
+
+**`sonic-button`** **`loading`** shows an icon spinner and sets **`aria-busy`** on the button. **`sonic-fetch`** and **`sonic-list`** render **`sonic-loader`** when their **`loader`** attribute is set: **`true`** or an empty string maps to **`fixed`**; otherwise use **`inline`** or **`fixed`**.
+
+<sonic-code>
+  <template>
+    <sonic-button loading>Save changes</sonic-button>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `mode` | `inline` · `fixed` (default `fixed`) | Layout: in-flow ellipsis vs viewport-centered overlay |
+| `noDelay` | boolean | Skips the initial fade-in delay before the animation appears |
+| `announce` | boolean | **`role="status"`** and **`aria-live="polite"`** with localized loading label when the loader should be announced |
+| `align` | `left` · `center` · `right` | Horizontal alignment for **`mode="inline"`** only (attribute selector; default centered) |
+| `currentColor` | boolean | Uses `currentColor` for dot fill instead of **`--sc-primary`** |
+
+This component has **no slots**. The animation markup is internal.
+
+### Static methods
+
+| Method | Description |
+|--------|-------------|
+| `Loader.show(conf?)` | Mounts the shared loader instance. **`conf.mode`**, **`conf.noDelay`**, **`conf.announce`**, optional **`conf.container`**. Without **`container`**, uses the theme pop container and forces **`fixed`**. |
+| `Loader.hide()` | Decrements the show counter and removes the instance from the DOM when it reaches zero. |