luxen-ui 0.6.2 → 0.8.0

package/cdn/static-tag.d.ts

@@ -0,0 +1,17 @@
+import { StaticValue } from 'lit/static-html.js';
+import { ElementBaseName } from './registry.js';
+/**
+ * Prefix-aware static tag for use in Lit static-html templates.
+ *
+ * Resolves a base name to the registered tag (e.g. `staticTag('icon')` → `po-icon`
+ * under `elementPrefix: 'po'`) so elements that render a child custom element inside
+ * their own template stay prefix-aware. Without this, the hardcoded `<l-icon>` literal
+ * is never defined under a custom prefix and the child never upgrades.
+ *
+ * Memoized: Lit keys its template cache on `StaticValue` identity, so a fresh
+ * `unsafeStatic()` per render would bust the cache. The prefix is set once at startup
+ * before any element renders, so a plain memo is correct. If runtime re-prefixing via
+ * `setPrefix()` becomes a supported scenario, clear `_cache` there.
+ */
+export declare function staticTag(baseName: ElementBaseName): StaticValue;
+//# sourceMappingURL=static-tag.d.ts.map

package/cdn/static-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-tag.d.ts","sourceRoot":"","sources":["../src/html/static-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAW,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAI9D;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,eAAe,GAAG,WAAW,CAIhE"}

package/cdn/static-tag.js

@@ -0,0 +1,2 @@
+import{tagName as e}from"./registry.js";import{n as t}from"./chunks/static-html.js";var n=new Map;function r(r){let i=n.get(r);return i||n.set(r,i=t(e(r))),i}export{r as staticTag};
+//# sourceMappingURL=static-tag.js.map

package/cdn/static-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-tag.js","names":[],"sources":["../src/html/static-tag.ts"],"sourcesContent":["import { unsafeStatic, type StaticValue } from 'lit/static-html.js';\nimport { tagName, type ElementBaseName } from './registry.js';\n\nconst _cache = new Map<ElementBaseName, StaticValue>();\n\n/**\n * Prefix-aware static tag for use in Lit static-html templates.\n *\n * Resolves a base name to the registered tag (e.g. `staticTag('icon')` → `po-icon`\n * under `elementPrefix: 'po'`) so elements that render a child custom element inside\n * their own template stay prefix-aware. Without this, the hardcoded `<l-icon>` literal\n * is never defined under a custom prefix and the child never upgrades.\n *\n * Memoized: Lit keys its template cache on `StaticValue` identity, so a fresh\n * `unsafeStatic()` per render would bust the cache. The prefix is set once at startup\n * before any element renders, so a plain memo is correct. If runtime re-prefixing via\n * `setPrefix()` becomes a supported scenario, clear `_cache` there.\n */\nexport function staticTag(baseName: ElementBaseName): StaticValue {\n  let t = _cache.get(baseName);\n  if (!t) _cache.set(baseName, (t = unsafeStatic(tagName(baseName))));\n  return t;\n}\n"],"mappings":"oFAGA,IAAM,EAAS,IAAI,IAenB,SAAgB,EAAU,EAAwC,CAChE,IAAI,EAAI,EAAO,IAAI,EAAS,CAE5B,OADK,GAAG,EAAO,IAAI,EAAW,EAAI,EAAa,EAAQ,EAAS,CAAC,CAAE,CAC5D"}

package/cdn/styles/elements/prose-editor.css

@@ -0,0 +1,129 @@
+/*
+ * Styles for the editable content of <l-prose-editor>.
+ *
+ * The ProseMirror editable element is rendered in light DOM (slotted), not the
+ * shadow root, to work around contenteditable caret/selection bugs in Firefox
+ * and WebKit inside shadow trees. So its styles live in this published CSS file
+ * rather than the element's shadow styles. Import once globally:
+ *
+ *   @import 'luxen-ui/css/prose-editor';
+ */
+@layer components {
+  l-prose-editor .ProseMirror {
+    padding: var(--content-padding, 0.75rem 1rem);
+    min-height: var(--content-min-height, 8rem);
+    outline: none;
+  }
+
+  l-prose-editor .ProseMirror :first-child {
+    margin-top: 0;
+  }
+
+  l-prose-editor .ProseMirror :last-child {
+    margin-bottom: 0;
+  }
+
+  /* Block spacing & typography — baseline so content reads correctly without a
+     typography framework. A consumer's `prose` class (e.g. Tailwind Typography)
+     layers on top via the higher-priority utilities layer. */
+  l-prose-editor .ProseMirror p {
+    margin-block: 0.5em;
+  }
+
+  l-prose-editor .ProseMirror :is(h1, h2, h3, h4) {
+    margin-block: 1em 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  l-prose-editor .ProseMirror h1 {
+    font-size: 1.5em;
+  }
+
+  l-prose-editor .ProseMirror h2 {
+    font-size: 1.3em;
+  }
+
+  l-prose-editor .ProseMirror h3 {
+    font-size: 1.15em;
+  }
+
+  l-prose-editor .ProseMirror :is(ul, ol) {
+    margin-block: 0.5em;
+    padding-inline-start: 1.5rem;
+  }
+
+  l-prose-editor .ProseMirror ul {
+    list-style: disc;
+  }
+
+  l-prose-editor .ProseMirror ol {
+    list-style: decimal;
+  }
+
+  l-prose-editor .ProseMirror li {
+    margin-block: 0.25em;
+  }
+
+  /* Placeholder — Tiptap Placeholder extension */
+  l-prose-editor .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: inline-start;
+    height: 0;
+    color: var(--placeholder-color, var(--l-color-text-tertiary));
+    pointer-events: none;
+  }
+
+  /* Highlight mark */
+  l-prose-editor .ProseMirror mark {
+    border-radius: 0.2em;
+    background-color: var(--l-color-bg-fill-warning-subtle);
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+  }
+
+  /* Links */
+  l-prose-editor .ProseMirror a {
+    color: var(--l-color-text-info);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  /* Blockquote */
+  l-prose-editor .ProseMirror blockquote {
+    border-inline-start: 3px solid var(--l-color-border);
+    padding-inline-start: 1rem;
+    color: var(--l-color-text-secondary);
+  }
+
+  /* Inline code & code blocks */
+  l-prose-editor .ProseMirror code {
+    border-radius: 0.25rem;
+    padding: 0.125em 0.3em;
+    background-color: var(--l-color-bg-fill-neutral-subtle);
+    font-size: 0.9em;
+  }
+
+  l-prose-editor .ProseMirror pre {
+    border-radius: var(--l-radius-md);
+    padding: 0.75rem 1rem;
+    background-color: var(--l-color-bg-fill-neutral-subtle);
+    overflow-x: auto;
+  }
+
+  l-prose-editor .ProseMirror pre code {
+    padding: 0;
+    background: none;
+  }
+
+  /* Horizontal rule */
+  l-prose-editor .ProseMirror hr {
+    margin-block: 1rem;
+    border: none;
+    border-top: 1px solid var(--l-color-divider);
+  }
+
+  l-prose-editor .ProseMirror hr.ProseMirror-selectednode {
+    border-top-color: var(--l-focus-ring);
+  }
+}

package/cdn/styles/elements/toast.css

@@ -143,7 +143,7 @@
     &[variant] {
       --_shadow-color: color-mix(in oklab, var(--_accent-color) 8%, transparent);
       background: var(--_bg);
-      color: contrast-color(var(--_accent-color));
+      color: var(--_accent-color);
     }
 
     /*

package/dist/css/elements/prose-editor.css

@@ -0,0 +1,129 @@
+/*
+ * Styles for the editable content of <l-prose-editor>.
+ *
+ * The ProseMirror editable element is rendered in light DOM (slotted), not the
+ * shadow root, to work around contenteditable caret/selection bugs in Firefox
+ * and WebKit inside shadow trees. So its styles live in this published CSS file
+ * rather than the element's shadow styles. Import once globally:
+ *
+ *   @import 'luxen-ui/css/prose-editor';
+ */
+@layer components {
+  l-prose-editor .ProseMirror {
+    padding: var(--content-padding, 0.75rem 1rem);
+    min-height: var(--content-min-height, 8rem);
+    outline: none;
+  }
+
+  l-prose-editor .ProseMirror :first-child {
+    margin-top: 0;
+  }
+
+  l-prose-editor .ProseMirror :last-child {
+    margin-bottom: 0;
+  }
+
+  /* Block spacing & typography — baseline so content reads correctly without a
+     typography framework. A consumer's `prose` class (e.g. Tailwind Typography)
+     layers on top via the higher-priority utilities layer. */
+  l-prose-editor .ProseMirror p {
+    margin-block: 0.5em;
+  }
+
+  l-prose-editor .ProseMirror :is(h1, h2, h3, h4) {
+    margin-block: 1em 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  l-prose-editor .ProseMirror h1 {
+    font-size: 1.5em;
+  }
+
+  l-prose-editor .ProseMirror h2 {
+    font-size: 1.3em;
+  }
+
+  l-prose-editor .ProseMirror h3 {
+    font-size: 1.15em;
+  }
+
+  l-prose-editor .ProseMirror :is(ul, ol) {
+    margin-block: 0.5em;
+    padding-inline-start: 1.5rem;
+  }
+
+  l-prose-editor .ProseMirror ul {
+    list-style: disc;
+  }
+
+  l-prose-editor .ProseMirror ol {
+    list-style: decimal;
+  }
+
+  l-prose-editor .ProseMirror li {
+    margin-block: 0.25em;
+  }
+
+  /* Placeholder — Tiptap Placeholder extension */
+  l-prose-editor .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: inline-start;
+    height: 0;
+    color: var(--placeholder-color, var(--l-color-text-tertiary));
+    pointer-events: none;
+  }
+
+  /* Highlight mark */
+  l-prose-editor .ProseMirror mark {
+    border-radius: 0.2em;
+    background-color: var(--l-color-bg-fill-warning-subtle);
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+  }
+
+  /* Links */
+  l-prose-editor .ProseMirror a {
+    color: var(--l-color-text-info);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  /* Blockquote */
+  l-prose-editor .ProseMirror blockquote {
+    border-inline-start: 3px solid var(--l-color-border);
+    padding-inline-start: 1rem;
+    color: var(--l-color-text-secondary);
+  }
+
+  /* Inline code & code blocks */
+  l-prose-editor .ProseMirror code {
+    border-radius: 0.25rem;
+    padding: 0.125em 0.3em;
+    background-color: var(--l-color-bg-fill-neutral-subtle);
+    font-size: 0.9em;
+  }
+
+  l-prose-editor .ProseMirror pre {
+    border-radius: var(--l-radius-md);
+    padding: 0.75rem 1rem;
+    background-color: var(--l-color-bg-fill-neutral-subtle);
+    overflow-x: auto;
+  }
+
+  l-prose-editor .ProseMirror pre code {
+    padding: 0;
+    background: none;
+  }
+
+  /* Horizontal rule */
+  l-prose-editor .ProseMirror hr {
+    margin-block: 1rem;
+    border: none;
+    border-top: 1px solid var(--l-color-divider);
+  }
+
+  l-prose-editor .ProseMirror hr.ProseMirror-selectednode {
+    border-top-color: var(--l-focus-ring);
+  }
+}

package/dist/css/elements/toast.css

@@ -143,7 +143,7 @@
     &[variant] {
       --_shadow-color: color-mix(in oklab, var(--_accent-color) 8%, transparent);
       background: var(--_bg);
-      color: contrast-color(var(--_accent-color));
+      color: var(--_accent-color);
     }
 
     /*