@kubex/zinc 1.0.107 → 1.0.108

package/docs/_includes/sidebar.njk

@@ -7,6 +7,7 @@
       <li><a href="/getting-started/table-examples">Table Examples</a></li>
       <li><a href="/getting-started/example-layout">Example Layout</a></li>
       <li><a href="/getting-started/example-page">Example Page</a></li>
+      <li><a href="/getting-started/shimmer-text">Shimmer Text</a></li>
     </ul>
   </li>
   <li>

package/docs/pages/getting-started/shimmer-text.md

@@ -0,0 +1,81 @@
+---
+meta:
+  title: Shimmer Text
+  description: A global utility class that applies an animated shimmer sweep to text, suitable for loading, processing, or "thinking" states.
+---
+
+# Shimmer Text
+
+`shimmer-text` is a global utility class that animates a horizontal highlight sweep across text colour. Use it to convey an in-progress state — AI generation, background processing, or any "working on it" indicator.
+
+The class works on any element with text content, including inside Zinc components. Colour variants mirror the standard Zinc palette: `zn-primary`, `zn-accent`, `zn-info`, `zn-success`, `zn-warning`, `zn-error`.
+
+When `prefers-reduced-motion: reduce` is set, the animation is suppressed and the text falls back to a solid colour matching the chosen variant.
+
+## Examples
+
+### Default
+
+```html:preview
+<span class="shimmer-text">Thinking…</span>
+```
+
+### Colour Variants
+
+```html:preview
+<div style="display: flex; flex-direction: column; gap: 8px;">
+  <span class="shimmer-text">Default</span>
+  <span class="shimmer-text zn-primary">Primary</span>
+  <span class="shimmer-text zn-accent">Accent</span>
+  <span class="shimmer-text zn-info">Info</span>
+  <span class="shimmer-text zn-success">Success</span>
+  <span class="shimmer-text zn-warning">Warning</span>
+  <span class="shimmer-text zn-error">Error</span>
+</div>
+```
+
+### Headings and Larger Text
+
+The shimmer scales with whatever `font-size` is on the element, so it can be applied to headings or inline within prose.
+
+```html:preview
+<h2 class="shimmer-text zn-primary" style="margin: 0;">Generating summary…</h2>
+<p style="margin: 8px 0 0;">
+  Please wait while we <span class="shimmer-text zn-info">analyse your data</span>.
+</p>
+```
+
+### Inside Zinc Components
+
+Because `shimmer-text` is a plain class, it composes with any Zinc component that renders slotted text.
+
+```html:preview
+<zn-chip class="shimmer-text zn-accent">Processing</zn-chip>
+```
+
+### Tuning the Sweep
+
+The effect mirrors the Claude CLI's character-level shimmer: a narrow, sharper highlight slides across text rather than a soft gradient wash. The class exposes these CSS custom properties — all sized in `ch` so they scale with the current font size.
+
+| Variable | Default | Purpose |
+|---|---|---|
+| `--shimmer-base` | `rgb(var(--zn-text))` | Resting text colour. |
+| `--shimmer-highlight` | `rgb(var(--zn-text-heading))` | Colour of the spotlight. |
+| `--shimmer-core` | `0.5ch` | Half-width of the solid-colour core of the spotlight. |
+| `--shimmer-spread` | `1.5ch` | Half-width of the full highlight including its fade-out edges. |
+| `--shimmer-duration` | `2s` | Time for one full sweep cycle. |
+
+```html:preview
+<div style="display: flex; flex-direction: column; gap: 6px;">
+  <span class="shimmer-text">Default sweep</span>
+  <span class="shimmer-text" style="--shimmer-duration: 1s;">Faster sweep</span>
+  <span class="shimmer-text" style="--shimmer-duration: 4s;">Slower, gentler sweep</span>
+  <span class="shimmer-text" style="--shimmer-core: 1ch; --shimmer-spread: 3ch;">Wider spotlight</span>
+</div>
+```
+
+The Claude CLI scales its sweep with message length (50ms per character plus 10 characters of offscreen pause on each side). To match that feel in CSS, set `--shimmer-duration` to roughly `(messageCharacters + 20) × 50ms`.
+
+### Reduced Motion
+
+The animation is wrapped in `@media (prefers-reduced-motion: no-preference)`. Users who have requested reduced motion see the static colour variant instead — no configuration required.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.107",
+  "version": "1.0.108",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/shared/index.scss

@@ -2,6 +2,7 @@
 @forward "layout";
 @forward "divide";
 @forward "nav";
+@forward "shimmer";
 
 
 // Need to remove the below from zinc, or have nice defaults that don't mess everything up

package/scss/shared/shimmer.scss

@@ -0,0 +1,98 @@
+
+@keyframes shimmer-text-sweep {
+  0% {
+    background-position: 100% center;
+  }
+  100% {
+    background-position: 0% center;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .shimmer-text {
+    --shimmer-base: rgb(var(--zn-text));
+    --shimmer-highlight: rgb(var(--zn-text-heading));
+    --shimmer-core: 0.5ch;
+    --shimmer-spread: 1.5ch;
+    --shimmer-duration: 1.5s;
+
+    display: inline-block;
+    width: fit-content;
+    max-width: 100%;
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent calc(50% - var(--shimmer-spread)),
+        var(--shimmer-highlight) calc(50% - var(--shimmer-core)),
+        var(--shimmer-highlight) calc(50% + var(--shimmer-core)),
+        transparent calc(50% + var(--shimmer-spread))
+      ),
+      linear-gradient(var(--shimmer-base), var(--shimmer-base));
+    background-size: 250% 100%, auto;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent !important;
+    color: transparent !important;
+    animation: var(--shimmer-duration) linear infinite shimmer-text-sweep;
+
+    &.zn-error {
+      --shimmer-base: rgb(var(--zn-color-error));
+      --shimmer-highlight: color-mix(in srgb, rgb(var(--zn-color-error)) 55%, white);
+    }
+
+    &.zn-success {
+      --shimmer-base: rgb(var(--zn-color-success));
+      --shimmer-highlight: color-mix(in srgb, rgb(var(--zn-color-success)) 55%, white);
+    }
+
+    &.zn-info {
+      --shimmer-base: rgb(var(--zn-color-info));
+      --shimmer-highlight: color-mix(in srgb, rgb(var(--zn-color-info)) 55%, white);
+    }
+
+    &.zn-warning {
+      --shimmer-base: rgb(var(--zn-color-warning));
+      --shimmer-highlight: color-mix(in srgb, rgb(var(--zn-color-warning)) 55%, white);
+    }
+
+    &.zn-primary {
+      --shimmer-base: rgb(var(--zn-primary));
+      --shimmer-highlight: color-mix(in srgb, rgb(var(--zn-primary)) 55%, white);
+    }
+
+    &.zn-accent {
+      --shimmer-base: rgb(var(--zn-accent));
+      --shimmer-highlight: color-mix(in srgb, rgb(var(--zn-accent)) 55%, white);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    color: rgb(var(--zn-text));
+
+    &.zn-error {
+      color: rgb(var(--zn-color-error)) !important;
+    }
+
+    &.zn-success {
+      color: rgb(var(--zn-color-success)) !important;
+    }
+
+    &.zn-info {
+      color: rgb(var(--zn-color-info)) !important;
+    }
+
+    &.zn-warning {
+      color: rgb(var(--zn-color-warning)) !important;
+    }
+
+    &.zn-primary {
+      color: rgb(var(--zn-primary)) !important;
+    }
+
+    &.zn-accent {
+      color: rgb(var(--zn-accent)) !important;
+    }
+  }
+}

package/src/components/markdown-editor/markdown-editor.component.ts

@@ -269,6 +269,8 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
         'panel--cosmic': this.cosmic,
         'panel--shadow': this.shadow,
       })}>
+
+
         <div class="panel__inner">
           ${hasHeader ? html`
             <zn-header class=${classMap({
@@ -297,6 +299,7 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
                   </label>` : ''}
 
                 <div part="toolbar" class="markdown-editor__toolbar">
+                  ${this.markdownHelperBtn()}
                   <zn-button-group class="markdown-editor__view-toggle" @click=${this.handleViewToggle}>
                     ${VIEW_MODES.map(v => this.renderViewButton(v.mode, v.icon, v.label))}
                   </zn-button-group>
@@ -351,6 +354,21 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
     `;
   }
 
+  markdownHelperBtn() {
+    return html`
+      <a
+        class="markdown-editor__markdown-link"
+        href="https://www.markdownguide.org/cheat-sheet"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Markdown is supported"
+      >
+        <zn-icon src="markdown"></zn-icon>
+        <span>Markdown is supported</span>
+      </a>
+    `;
+  }
+
   private renderViewButton(mode: ViewMode, icon: string, label: string) {
     const isActive = this.viewMode === mode;
     return html`
@@ -372,4 +390,7 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
       ></zn-button>
     `;
   }
+
+
+
 }

package/src/components/markdown-editor/markdown-editor.scss

@@ -44,9 +44,32 @@
 
 .markdown-editor__toolbar {
   display: flex;
-  align-items: center;
+  align-items: end;
   gap: var(--zn-spacing-small);
   justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.markdown-editor__markdown-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  margin-right: auto;
+  font-size: var(--zn-input-label-font-size-small);
+  line-height: 1;
+  color: var(--zn-color-neutral-500, #656d76);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  padding-left: var(--zn-spacing-x-small);
+
+  &:hover {
+    color: var(--zn-color-primary-600, #0969da);
+  }
+
+  span {
+    white-space: nowrap;
+  }
 }
 
 .markdown-editor__view-toggle {

package/src/components/tabs/tabs.component.ts

@@ -37,6 +37,7 @@ export default class ZnTabs extends ZincElement {
   @property({attribute: 'primary-caption', reflect: true}) primaryCaption = 'Navigation';
   @property({attribute: 'secondary-caption', reflect: true}) secondaryCaption = 'Content';
   @property({attribute: 'no-prefetch', type: Boolean, reflect: true}) noPrefetch = false;
+  @property({attribute: 'no-cache', type: Boolean, reflect: true}) noCache = false;
   // session storage if not local
   @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
   @property({attribute: 'store-key'}) storeKey: string;
@@ -72,7 +73,7 @@ export default class ZnTabs extends ZincElement {
       this.masterId = this.storeKey || Math.floor(Math.random() * 1000000).toString();
     }
 
-    this.preload = !this.noPrefetch;
+    this.preload = !this.noPrefetch && !this.noCache;
 
     await this.updateComplete;
     this._panel = this.shadowRoot?.querySelector('#content');
@@ -272,11 +273,14 @@ export default class ZnTabs extends ZincElement {
   }
 
   clickTab(target: HTMLElement, refresh: boolean) {
+    const tabUri = target.getAttribute('tab-uri');
+    const wasCached = !!tabUri && this._panels.has(this._uriToId(tabUri));
     this.fetchUriTab(target);
 
     if (target.hasAttribute('tab')) {
+      const forceRefresh = refresh || (this.noCache && wasCached);
       setTimeout(() => {
-        this.setActiveTab(target.getAttribute('tab') || '', true, refresh, this.getRefTab(target));
+        this.setActiveTab(target.getAttribute('tab') || '', true, forceRefresh, this.getRefTab(target));
       }, 10);
     }
   }