@pure-ds/core 0.5.60 → 0.6.1

package/public/assets/pds/components/pds-richtext.js

@@ -341,7 +341,13 @@ export class RichText extends HTMLElement {
   async #adoptStyles() {
     // Component stylesheet (tokens + semantic vars)
     const componentStyles = PDS.createStylesheet(/*css*/ `@layer richtext {
-      :host { display:block; color: var(--rt-fg, var(--color-text-primary)); font: var(--font-body-sm, 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif); }
+      :host {
+        display: block;
+        color: var(--rt-fg, var(--color-text-primary));
+        font-family: var(--rt-font-family, var(--font-family-body));
+        font-size: var(--rt-font-size, var(--font-size-base));
+        line-height: var(--rt-line-height, var(--font-line-height-normal));
+      }
       :host([disabled]) { opacity: .6; pointer-events: none; }
       .box { border: 1px solid var(--rt-border, var(--color-border, currentColor)); border-radius: var(--radius-md,8px); background: var(--rt-bg, var(--color-input-bg)); }
       .box:focus-within { 
@@ -353,11 +359,15 @@ export class RichText extends HTMLElement {
         }
       }
       
-      .toolbar {background-color: var(--surface-subtle-bg);  display:flex; gap: var(--spacing-2,10px); align-items:center; border-bottom: 1px solid var(--rt-border, var(--color-border-muted)); border-radius: var(--radius-md,8px) var(--radius-md,8px) 0 0; }
-      .tbtn { transition: none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius: var(--radius-sm,6px); cursor:pointer; user-select:none; color: inherit; background: transparent; border:none; }
+      .toolbar { background-color: var(--surface-subtle-bg); display: flex; gap: var(--spacing-0, 2px); align-items: center; padding: var(--spacing-0, 2px); border-bottom: 1px solid var(--rt-border, var(--color-border-muted)); border-radius: var(--radius-md,8px) var(--radius-md,8px) 0 0; width: 100%; max-width: 100%; flex-wrap: nowrap; box-sizing: border-box; overflow: hidden; }
+      .tbtn { transition: none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius: var(--radius-sm,6px); cursor:pointer; user-select:none; color: inherit; background: transparent; border:none;
+
+        padding: var(--spacing-0) var(--spacing-6, 8px);
+
+       }
       .tbtn:hover { background: var(--color-surface-hover, color-mix(in oklab, CanvasText 12%, transparent)); }
       .edwrap { position:relative; }
-      .ed { display: block; min-height:90px; max-height: 400px; overflow:auto; padding: var(--spacing-1, 0) var(--spacing-2, 0); outline:none; word-break:break-word; border-radius: 0 0 var(--radius-md,8px) var(--radius-md,8px); background: var(--rt-editor-bg, var(--color-input-bg)); }
+      .ed { display: block; font-weight: normal; min-height:90px; max-height: 400px; overflow:auto; padding: var(--spacing-1, 0) var(--spacing-2, 0); outline:none; word-break:break-word; border-radius: 0 0 var(--radius-md,8px) var(--radius-md,8px); background: var(--rt-editor-bg, var(--color-input-bg)); }
       .ed[contenteditable="true"]:empty::before { content: attr(data-ph); color: var(--rt-muted, var(--color-text-muted)); pointer-events:none; }
       .send { margin-left:auto; display:inline-flex; gap: var(--spacing-2,8px); align-items:center; }
       button.icon { background:transparent; border:0; color:inherit; cursor:pointer; padding:6px; border-radius: var(--radius-sm,6px); }
@@ -589,9 +599,28 @@ export class RichText extends HTMLElement {
 
   #toggleCode() {
     // Wrap selection with <code> or unwrap if already in code
-    const sel = window.getSelection();
+    const root = this.shadowRoot;
+    const getSel = () =>
+      root && typeof root.getSelection === "function"
+        ? root.getSelection()
+        : window.getSelection();
+    let sel = getSel();
     if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
+    let range = sel.getRangeAt(0);
+    const inEditor = (r) => {
+      const node =
+        r.commonAncestorContainer.nodeType === 1
+          ? r.commonAncestorContainer
+          : r.commonAncestorContainer.parentNode;
+      return !!(node && this.#editorDiv && this.#editorDiv.contains(node));
+    };
+    if (!inEditor(range)) {
+      this.#focus();
+      sel = getSel();
+      if (!sel || sel.rangeCount === 0) return;
+      range = sel.getRangeAt(0);
+      if (!inEditor(range)) return;
+    }
     // Simple toggle: if ancestor <code>, unwrap; else wrap
     const codeAncestor = this.#closestAncestor(
       range.commonAncestorContainer,
@@ -604,7 +633,28 @@ export class RichText extends HTMLElement {
       parent.removeChild(codeAncestor);
     } else {
       const wrapper = document.createElement("code");
-      range.surroundContents(wrapper);
+      if (range.collapsed) {
+        const caret = document.createTextNode("\u200B");
+        wrapper.appendChild(caret);
+        range.insertNode(wrapper);
+        const next = document.createRange();
+        next.setStart(caret, 1);
+        next.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(next);
+      } else {
+        try {
+          range.surroundContents(wrapper);
+        } catch {
+          const contents = range.extractContents();
+          wrapper.appendChild(contents);
+          range.insertNode(wrapper);
+        }
+        const next = document.createRange();
+        next.selectNodeContents(wrapper);
+        sel.removeAllRanges();
+        sel.addRange(next);
+      }
     }
   }
 

package/public/assets/pds/components/pds-theme.js

@@ -13,6 +13,39 @@ const THEME_OPTIONS = [
 
 const DEFAULT_LABEL = "Theme";
 const LAYERS = ["tokens", "primitives", "components", "utilities"];
+const DEFAULT_THEMES = ["light", "dark"];
+const VALID_THEMES = new Set(DEFAULT_THEMES);
+
+const normalizePresetThemes = (preset) => {
+  const themes = Array.isArray(preset?.themes)
+    ? preset.themes.map((theme) => String(theme).toLowerCase())
+    : DEFAULT_THEMES;
+  const normalized = themes.filter((theme) => VALID_THEMES.has(theme));
+  return normalized.length ? normalized : DEFAULT_THEMES;
+};
+
+const resolveThemePreference = (preference) => {
+  const normalized = String(preference || "").toLowerCase();
+  if (VALID_THEMES.has(normalized)) return normalized;
+
+  if (typeof document !== "undefined") {
+    const applied = document.documentElement?.getAttribute("data-theme");
+    if (VALID_THEMES.has(applied)) return applied;
+  }
+
+  if (typeof window !== "undefined" && window.matchMedia) {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return prefersDark ? "dark" : "light";
+  }
+
+  return "light";
+};
+
+const isPresetThemeCompatible = (preset, themePreference) => {
+  const resolvedTheme = resolveThemePreference(themePreference);
+  const themes = normalizePresetThemes(preset);
+  return themes.includes(resolvedTheme);
+};
 
 class PdsTheme extends HTMLElement {
   static get observedAttributes() {
@@ -123,6 +156,21 @@ class PdsTheme extends HTMLElement {
       return;
     }
 
+    const currentPreset = PDS.currentConfig?.design || null;
+    if (currentPreset && !isPresetThemeCompatible(currentPreset, value)) {
+      const resolvedTheme = resolveThemePreference(value);
+      const presetName =
+        currentPreset?.name ||
+        PDS.currentPreset?.name ||
+        PDS.currentConfig?.preset ||
+        "current preset";
+      console.warn(
+        `PDS theme "${resolvedTheme}" not supported by preset "${presetName}".`
+      );
+      this.#syncCheckedState();
+      return;
+    }
+
     if (PDS.theme !== value) {
       PDS.theme = value;
     }
@@ -157,10 +205,20 @@ class PdsTheme extends HTMLElement {
 
   #syncCheckedState() {
     const currentTheme = PDS.theme || "system";
+    const currentPreset = PDS.currentConfig?.design || null;
+    const supportedThemes = normalizePresetThemes(currentPreset);
     this.shadowRoot
       .querySelectorAll('input[type="radio"]')
       .forEach((radio) => {
         radio.checked = radio.value === currentTheme;
+        if (radio.value === "system") {
+          radio.disabled = false;
+        } else if (currentPreset) {
+          const resolved = resolveThemePreference(radio.value);
+          radio.disabled = !supportedThemes.includes(resolved);
+        } else {
+          radio.disabled = false;
+        }
       });
   }
 }

package/readme.md

@@ -6,7 +6,7 @@
 [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](#license)
 [![npm version](https://img.shields.io/npm/v/@pure-ds/core.svg)](https://www.npmjs.com/package/@pure-ds/core)
 
-![Pure Design System logo](public/assets/img/logo.png)
+![Pure Design System logo](public/assets/img/pds-logo.svg)
 
 ## With Great Standards Comes Great Power
 
@@ -571,7 +571,7 @@ PDS.dispatchEvent(new CustomEvent('pds:toast', {
 <script type="importmap">
   {
     "imports": {
-      "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.mjs"
+      "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/+esm"
     }
   }
 </script>