slexkit 0.2.0 → 0.3.1

package/dist/components/text-input.css

@@ -25,10 +25,13 @@
 }
 
 .slex-input-control {
+  position: relative;
   display: flex;
   align-items: stretch;
   width: 100%;
   min-width: 0;
+  border-radius: var(--radius);
+  transition: box-shadow 150ms ease;
 }
 
 .slex-input {
@@ -42,16 +45,18 @@
   border: 1px solid var(--input);
   border-radius: var(--radius);
   background: var(--background);
+  background-clip: padding-box;
   color: var(--foreground);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.5;
   outline: none;
+  -webkit-appearance: none;
+  appearance: none;
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-unit="true"] .slex-input,
-.slex-input-control[data-has-controls="true"] .slex-input {
+.slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -75,80 +80,17 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-controls="true"] .slex-input-unit {
-  border-radius: 0;
-}
-
-.slex-input-controls {
-  box-sizing: border-box;
-  display: inline-grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  align-items: stretch;
-  flex: 0 0 auto;
-  width: 3.75rem;
-  min-width: 3.75rem;
-  min-height: 2.5625rem;
-  overflow: hidden;
-  border: 1px solid var(--input);
-  border-left: 0;
-  border-radius: 0 var(--radius) var(--radius) 0;
-  background: var(--background);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-  min-height: 100%;
-  padding: 0;
-  border: 0;
-  border-left: 1px solid var(--input);
-  border-radius: 0;
-  background: transparent;
-  color: var(--foreground);
-  font: inherit;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step:first-child {
-  border-left: 0;
-}
-
-.slex-input-step:last-child {
-  border-radius: 0;
-}
-
-.slex-input-step:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--muted) 52%, var(--background));
-}
-
-.slex-input-step:focus-visible {
-  z-index: 1;
-  border-color: var(--ring);
-  outline: none;
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
-}
-
-.slex-input-step:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
 .slex-input::placeholder {
   color: var(--muted-foreground);
 }
 
 .slex-input:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
+}
+
+.slex-input-control[data-has-unit="true"] .slex-input:focus {
+  box-shadow: none;
 }
 
 .slex-input[type="number"] {
@@ -175,18 +117,21 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input-unit {
-  border-color: var(--ring);
+.slex-input-field[data-invalid="true"] .slex-input-control[data-has-unit="true"] .slex-input:focus {
+  box-shadow: none;
+}
+
+.slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input-step {
-  border-color: var(--ring);
+.slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
 }
 
-.slex-input-control:focus-within .slex-input-controls {
+.slex-input-control:focus-within .slex-input,
+.slex-input-control:focus-within .slex-input-unit {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
 .slex-input-field[data-invalid="true"] .slex-input-unit {
@@ -194,26 +139,17 @@
   color: color-mix(in oklab, var(--destructive) 84%, var(--muted-foreground));
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-step {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
-.slex-input-field[data-invalid="true"] .slex-input-controls {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
-  border-color: var(--destructive);
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
-  border-color: var(--destructive);
+.slex-input-field[data-invalid="true"] .slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls {
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
   border-color: var(--destructive);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
 .slex-input[disabled] {
@@ -226,11 +162,6 @@
   cursor: not-allowed;
 }
 
-.slex-input[disabled] ~ .slex-input-controls,
-.slex-input[readonly] ~ .slex-input-controls {
-  opacity: 0.6;
-}
-
 .slex-input-description {
   color: var(--muted-foreground);
   font-size: 0.75rem;

package/dist/components/text.js

@@ -11,12 +11,14 @@ import {
   reset,
   set,
   set_class,
+  set_style,
   set_text,
   state,
   template_effect,
   text1 as text,
+  user_derived,
   user_effect
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/entries/text.ts
 import { register } from "../runtime.js";
@@ -27,11 +29,21 @@ function Text($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
   user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  const color = user_derived(() => get(p).color == null || get(p).color === "" ? undefined : text(get(p).color));
+  const size = user_derived(() => cssLength(get(p).size));
+  function cssLength(value) {
+    if (value == null || value === "")
+      return;
+    const rendered = text(value);
+    return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+  }
   var div = root();
+  let styles;
   var text_1 = child(div, true);
   reset(div);
   template_effect(($0, $1) => {
     set_class(div, 1, $0);
+    styles = set_style(div, "", styles, { color: get(color), "font-size": get(size) });
     set_text(text_1, $1);
   }, [
     () => `slex-text${get(p).variant ? ` slex-text--${text(get(p).variant)}` : ""}${get(p).class ? ` ${text(get(p).class)}` : ""}`,

package/dist/components/toast.js

@@ -1,10 +1,10 @@
 import {
   Toast
-} from "../chunks/accordion-ehnhpeca.js";
-import"../chunks/accordion-hzyrngd6.js";
+} from "../chunks/button-jxv4c65t.js";
+import"../chunks/button-faf563xf.js";
 import {
   InlineIcon
-} from "../chunks/accordion-cw5r75jm.js";
+} from "../chunks/button-xv2dz7vn.js";
 import {
   append,
   bindPropStore,
@@ -31,7 +31,7 @@ import {
   text1 as text,
   user_derived,
   user_effect
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/entries/toast.ts
 import { register } from "../runtime.js";

package/dist/components/tooling.css

@@ -572,7 +572,6 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
-  clip-path: inset(50%);
 }
 
 .slex-playground-error {

package/dist/components/tooling.js

@@ -1,14 +1,14 @@
 import {
   Tabs
-} from "../chunks/accordion-cfjyxw93.js";
+} from "../chunks/button-53ccjq5p.js";
+import"../chunks/button-faf563xf.js";
 import {
   Select
-} from "../chunks/accordion-5f0nvjjm.js";
+} from "../chunks/button-dsftwzvg.js";
 import {
   Button
-} from "../chunks/accordion-830dw78f.js";
-import"../chunks/accordion-hzyrngd6.js";
-import"../chunks/accordion-cw5r75jm.js";
+} from "../chunks/button-z5yv24ks.js";
+import"../chunks/button-xv2dz7vn.js";
 import {
   action,
   append,
@@ -62,7 +62,7 @@ import {
   unmount,
   user_derived,
   user_effect
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/tooling.ts
 import { register } from "../runtime.js";
@@ -48112,11 +48112,72 @@ function PlaygroundSlexCode($$anchor, $$props) {
 }
 
 // src/components/svelte/tooling/PlaygroundMarkdown.svelte
-var root101 = from_html(`<div class="slex-doc-streamdown"><!></div>`);
+var root101 = from_html(`<div class="slex-doc-prose slex-doc-streamdown"><!></div>`);
 function PlaygroundMarkdown($$anchor, $$props) {
   push($$props, true);
   const extensions = [markedKatex({ singleDollarInline: true })];
   const renderers = { inlineKatex: KatexRenderer, blockKatex: KatexRenderer };
+  const options = { headerIds: false };
+  function stripFrontmatter(value) {
+    const raw = String(value ?? "").replace(/^\uFEFF/, "").replace(/\r\n/g, `
+`);
+    if (!raw.startsWith("---"))
+      return raw;
+    const end = raw.indexOf(`
+---`, 3);
+    if (end === -1)
+      return raw;
+    const closeEnd = raw.indexOf(`
+`, end + 1);
+    return raw.slice(closeEnd === -1 ? raw.length : closeEnd + 1).trimStart();
+  }
+  function escapeHtml(value) {
+    return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function stripInlineMarkdown(value) {
+    return String(value).replace(/\s+\{#[A-Za-z0-9_-]+\}\s*$/, "").replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/<[^>]+>/g, "").replace(/\s+#+\s*$/, "").trim();
+  }
+  function slugText(value) {
+    const slug2 = String(value).toLowerCase().replace(/[`"'\u2018\u2019\u201c\u201d]/g, "").replace(/[^a-z0-9\u4e00-\u9fa5]+/g, "-").replace(/^-+|-+$/g, "");
+    return slug2 || "section";
+  }
+  function createHeadingIdGenerator() {
+    const counts = new Map;
+    return (rawTitle) => {
+      const explicit = rawTitle.match(/\s+\{#([A-Za-z0-9_-]+)\}\s*$/)?.[1] ?? "";
+      const base2 = explicit || slugText(stripInlineMarkdown(rawTitle));
+      const count2 = counts.get(base2) ?? 0;
+      counts.set(base2, count2 + 1);
+      return count2 ? `${base2}-${count2 + 1}` : base2;
+    };
+  }
+  function normalizeHeadingAnchors(markdown2) {
+    const nextId = createHeadingIdGenerator();
+    let fence = null;
+    return String(markdown2 ?? "").split(/\n/).map((line) => {
+      const marker = String(line).match(/^[ \t]{0,3}(`{3,}|~{3,})/);
+      if (fence) {
+        if (marker && marker[1][0] === fence.char && marker[1].length >= fence.length)
+          fence = null;
+        return line;
+      }
+      if (marker) {
+        fence = { char: marker[1][0], length: marker[1].length };
+        return line;
+      }
+      const heading2 = String(line).match(/^(#{1,6})[ \t]+(.+)$/);
+      if (!heading2)
+        return line;
+      const rawTitle = heading2[2].replace(/\s+#+\s*$/, "");
+      const renderedTitle = rawTitle.replace(/\s+\{#[A-Za-z0-9_-]+\}\s*$/, "").trim();
+      return `<span id="${escapeHtml(nextId(rawTitle))}" class="slex-doc-heading-anchor"></span>
+${heading2[1]} ${renderedTitle}`;
+    }).join(`
+`);
+  }
+  function previewMarkdown(value) {
+    return normalizeHeadingAnchors(stripFrontmatter(value));
+  }
   var div = root101();
   var node = child(div);
   {
@@ -48135,9 +48196,10 @@ function PlaygroundMarkdown($$anchor, $$props) {
         }
       });
     };
+    let $0 = user_derived(() => previewMarkdown($$props.content));
     dist_default(node, {
       get source() {
-        return $$props.content;
+        return get($0);
       },
       get extensions() {
         return extensions;
@@ -48145,6 +48207,9 @@ function PlaygroundMarkdown($$anchor, $$props) {
       get renderers() {
         return renderers;
       },
+      get options() {
+        return options;
+      },
       code: code2,
       $$slots: { code: true }
     });