@kdcloudjs/shoelace 1.0.40 → 1.0.42

package/dist/chunks/chunk.UL2B5YD5.js

@@ -0,0 +1,77 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/nav-group/nav-group.styles.ts
+import { css } from "lit";
+var nav_group_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .nav-group__title {
+    font-family: var(--sl-font-sans, Microsoft Sans Serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-500, #999999);
+    padding-inline: calc(var(--sl-spacing-medium, 1rem) + var(--sl-spacing-2x-small, 0.25rem));
+    padding-block: var(--sl-spacing-x-small, 0.5rem);
+    line-height: var(--sl-line-height-dense, 1.5);
+    letter-spacing: var(--sl-letter-spacing-normal, normal);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  :host([active]:not([mode='inline'])) .nav-group__title {
+    color: var(--sl-color-neutral-900, #212121);
+  }
+
+  .nav-group__body {
+    display: grid;
+    gap: 2px;
+  }
+
+  ::slotted(sl-nav-item),
+  ::slotted(sl-nav-submenu) {
+    --padding-start: var(
+      --sl-nav-item-padding-start,
+      calc(var(--sl-nav-item-padding-inline, var(--sl-spacing-medium, 1rem)) + var(--sl-nav-item-indent-step, 16px))
+    );
+  }
+
+  :host([mode='horizontal']),
+  :host([mode='vertical']) {
+    --sl-nav-group-title-color: var(--sl-color-neutral-500, #999999);
+    --sl-nav-group-title-padding-inline: var(--sl-spacing-medium, 1rem);
+    --sl-nav-group-item-padding-inline: var(--sl-spacing-large, 1.25rem);
+  }
+
+  :host([mode='horizontal']) .nav-group__title,
+  :host([mode='vertical']) .nav-group__title {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    padding: 0 var(--sl-nav-group-title-padding-inline);
+    font-size: var(--sl-font-size-small, 0.875rem);
+    font-weight: var(--sl-font-weight-normal, 400);
+    color: var(--sl-nav-group-title-color);
+  }
+
+  :host([mode='horizontal']) .nav-group__body,
+  :host([mode='vertical']) .nav-group__body {
+    gap: 0;
+  }
+
+  :host([mode='horizontal']) ::slotted(sl-nav-item),
+  :host([mode='horizontal']) ::slotted(sl-nav-submenu),
+  :host([mode='vertical']) ::slotted(sl-nav-item),
+  :host([mode='vertical']) ::slotted(sl-nav-submenu) {
+    --padding-start: var(--sl-nav-group-item-padding-inline);
+    --padding-end: var(--sl-nav-group-item-padding-inline);
+  }
+`;
+
+export {
+  nav_group_styles_default
+};

package/dist/chunks/chunk.UNJJA52B.js

@@ -0,0 +1,299 @@
+import {
+  isValidCustomElementTag,
+  renderMappedComponent
+} from "./chunk.MR4YVMRN.js";
+import {
+  highlightCodeBlock
+} from "./chunk.RWKV5C6J.js";
+
+// src/components/x-markdown/markdown/render.ts
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+function getTokenText(token) {
+  if ("text" in token && typeof token.text === "string") {
+    return token.text;
+  }
+  return "";
+}
+function getInlineTokens(source) {
+  if (Array.isArray(source.tokens)) {
+    return source.tokens;
+  }
+  return [];
+}
+function getListItems(items) {
+  if (Array.isArray(items)) {
+    return items;
+  }
+  return [];
+}
+function getTableHeader(header) {
+  if (Array.isArray(header)) {
+    return header;
+  }
+  return [];
+}
+function getTableRows(rows) {
+  if (Array.isArray(rows)) {
+    return rows;
+  }
+  return [];
+}
+function parseAttributes(attrSource) {
+  var _a;
+  const attrs = {};
+  const attrPattern = /([:@a-zA-Z_][\w:.-]*)(?:\s*=\s*"([^"]*)")?/g;
+  let attrMatch;
+  while ((attrMatch = attrPattern.exec(attrSource)) !== null) {
+    attrs[attrMatch[1]] = (_a = attrMatch[2]) != null ? _a : "";
+  }
+  return attrs;
+}
+function parseCustomTag(raw) {
+  var _a, _b, _c;
+  const trimmed = raw.trim();
+  const fullTag = /^<([a-zA-Z][\w-]*)([^>]*)>([\s\S]*)<\/\1>$/.exec(trimmed);
+  if (fullTag) {
+    return {
+      tagName: fullTag[1].toLowerCase(),
+      attrs: parseAttributes((_a = fullTag[2]) != null ? _a : ""),
+      textContent: ((_b = fullTag[3]) != null ? _b : "").trim()
+    };
+  }
+  const selfClosingTag = /^<([a-zA-Z][\w-]*)([^>]*)\/>$/.exec(trimmed);
+  if (selfClosingTag) {
+    return {
+      tagName: selfClosingTag[1].toLowerCase(),
+      attrs: parseAttributes((_c = selfClosingTag[2]) != null ? _c : ""),
+      textContent: ""
+    };
+  }
+  return void 0;
+}
+function getMappedTag(nodeType, components) {
+  const mappedTag = components[nodeType];
+  if (!isValidCustomElementTag(mappedTag)) {
+    return void 0;
+  }
+  return mappedTag;
+}
+function createPayload(nodeType, streamStatus, textContent, attrs, meta, raw) {
+  return {
+    nodeType,
+    streamStatus,
+    textContent,
+    attrs,
+    meta,
+    raw
+  };
+}
+function renderThink(content) {
+  return html`<details part="blockquote" class="x-markdown__think">
+    <summary part="paragraph" class="x-markdown__think-summary">Reasoning</summary>
+    <div part="paragraph" class="x-markdown__think-content">${content}</div>
+  </details>`;
+}
+function renderSources(content) {
+  const lines = content.split("\n").map((line) => line.trim()).filter(Boolean);
+  if (lines.length === 0) {
+    return html``;
+  }
+  return html`<section part="blockquote" class="x-markdown__sources">
+    <h4 part="heading" class="x-markdown__sources-title">Sources</h4>
+    <ul part="list" class="x-markdown__sources-list">
+      ${lines.map((line) => html`<li part="list-item" class="x-markdown__sources-item">${line}</li>`)}
+    </ul>
+  </section>`;
+}
+function renderInlineToken(token, context) {
+  switch (token.type) {
+    case "strong":
+      return html`<strong>${getInlineTokens(token).map((child) => renderInlineToken(child, context))}</strong>`;
+    case "em":
+      return html`<em>${getInlineTokens(token).map((child) => renderInlineToken(child, context))}</em>`;
+    case "codespan":
+      return html`<code part="code-inline">${getTokenText(token)}</code>`;
+    case "del":
+      return html`<del>${getInlineTokens(token).map((child) => renderInlineToken(child, context))}</del>`;
+    case "link": {
+      const href = "href" in token && typeof token.href === "string" ? token.href : "";
+      const title = "title" in token && typeof token.title === "string" ? token.title : void 0;
+      const target = context.openLinksInNewTab ? "_blank" : void 0;
+      const rel = context.openLinksInNewTab ? "noopener noreferrer" : void 0;
+      return html`<a
+        href=${href}
+        title=${ifDefined(title)}
+        target=${ifDefined(target)}
+        rel=${ifDefined(rel)}
+        part="link"
+        >${getInlineTokens(token).map((child) => renderInlineToken(child, context))}</a
+      >`;
+    }
+    case "image": {
+      const src = "href" in token && typeof token.href === "string" ? token.href : "";
+      const alt = getTokenText(token);
+      const title = "title" in token && typeof token.title === "string" ? token.title : void 0;
+      return html`<img src=${src} alt=${alt} title=${ifDefined(title)} part="image" loading="lazy" />`;
+    }
+    case "br":
+      return html`<br />`;
+    case "html":
+      if (context.escapeRawHtml) {
+        return html`${getTokenText(token)}`;
+      }
+      return html`${unsafeHTML(token.raw)}`;
+    case "text":
+    default:
+      return html`${getTokenText(token)}`;
+  }
+}
+function renderTableCell(cell, context) {
+  var _a;
+  const inlineTokens = getInlineTokens(cell);
+  return html`${inlineTokens.length ? inlineTokens.map((token) => renderInlineToken(token, context)) : html`${(_a = cell.text) != null ? _a : ""}`}`;
+}
+function renderCodeToken(token, context) {
+  var _a;
+  const language = ((_a = token.lang) != null ? _a : "").trim().toLowerCase();
+  const mappedTag = language ? getMappedTag(language, context.components) : void 0;
+  if (mappedTag) {
+    return renderMappedComponent(
+      mappedTag,
+      createPayload(language, context.streamStatus, token.text, {}, { kind: "fence", language }, token.raw),
+      "code-block"
+    );
+  }
+  if (language === "think") {
+    return renderThink(token.text);
+  }
+  if (language === "sources") {
+    return renderSources(token.text);
+  }
+  const highlighted = highlightCodeBlock(token.text, language);
+  const codeClass = highlighted.language ? `language-${highlighted.language}` : "";
+  return html`<div part="code-block" class="x-markdown__code-block">
+    <div part="code-block-header" class="x-markdown__code-block-header">${highlighted.language || "text"}</div>
+    <pre part="code-block-body" class="x-markdown__code-block-body"><code class=${codeClass}
+        >${unsafeHTML(highlighted.highlightedHtml)}</code
+      ></pre>
+  </div>`;
+}
+function renderCustomHtmlToken(token, context) {
+  const parsed = parseCustomTag(token.raw);
+  if (!parsed) {
+    if (context.escapeRawHtml) {
+      return html`<p part="paragraph">${token.raw}</p>`;
+    }
+    return html`${unsafeHTML(token.raw)}`;
+  }
+  const mappedTag = getMappedTag(parsed.tagName, context.components);
+  if (mappedTag) {
+    return renderMappedComponent(
+      mappedTag,
+      createPayload(parsed.tagName, context.streamStatus, parsed.textContent, parsed.attrs, { kind: "html-tag" }, token.raw),
+      "body"
+    );
+  }
+  if (parsed.tagName === "think") {
+    return renderThink(parsed.textContent);
+  }
+  if (parsed.tagName === "sources") {
+    return renderSources(parsed.textContent);
+  }
+  if (context.escapeRawHtml) {
+    return html`<p part="paragraph">${token.raw}</p>`;
+  }
+  return html`${unsafeHTML(token.raw)}`;
+}
+function renderBlockToken(token, context, key) {
+  var _a, _b;
+  switch (token.type) {
+    case "space":
+      return html`<span data-key=${key}></span>`;
+    case "paragraph":
+      return html`<p part="paragraph" data-key=${key}>
+        ${getInlineTokens(token).map((child) => renderInlineToken(child, context))}
+      </p>`;
+    case "heading": {
+      const rawDepth = typeof token.depth === "number" ? token.depth : Number(token.depth);
+      const depth = Number.isFinite(rawDepth) ? rawDepth : 1;
+      const level = Math.max(1, Math.min(6, depth));
+      const content = getInlineTokens(token).map((child) => renderInlineToken(child, context));
+      if (level === 1) {
+        return html`<h1 part="heading" data-key=${key}>${content}</h1>`;
+      }
+      if (level === 2) {
+        return html`<h2 part="heading" data-key=${key}>${content}</h2>`;
+      }
+      if (level === 3) {
+        return html`<h3 part="heading" data-key=${key}>${content}</h3>`;
+      }
+      if (level === 4) {
+        return html`<h4 part="heading" data-key=${key}>${content}</h4>`;
+      }
+      if (level === 5) {
+        return html`<h5 part="heading" data-key=${key}>${content}</h5>`;
+      }
+      return html`<h6 part="heading" data-key=${key}>${content}</h6>`;
+    }
+    case "blockquote":
+      return html`<blockquote part="blockquote" data-key=${key}>
+        ${getInlineTokens(token).map((child, index) => renderBlockToken(child, context, `${key}-bq-${index}`))}
+      </blockquote>`;
+    case "list": {
+      const listItems = getListItems(token.items);
+      if (token.ordered) {
+        return html`<ol part="list" data-key=${key} start=${(_a = token.start) != null ? _a : 1}>
+          ${listItems.map(
+          (item, index) => html`<li part="list-item">
+              ${getInlineTokens(item).map((child) => renderBlockToken(child, context, `${key}-li-${index}`))}
+            </li>`
+        )}
+        </ol>`;
+      }
+      return html`<ul part="list" data-key=${key}>
+        ${listItems.map(
+        (item, index) => html`<li part="list-item">
+            ${getInlineTokens(item).map((child) => renderBlockToken(child, context, `${key}-li-${index}`))}
+          </li>`
+      )}
+      </ul>`;
+    }
+    case "table": {
+      const headerCells = getTableHeader(token.header);
+      const rows = getTableRows(token.rows);
+      return html`<table part="table" data-key=${key}>
+        <thead part="table-head">
+          <tr part="table-row">
+            ${headerCells.map((cell) => html`<th part="table-cell">${renderTableCell(cell, context)}</th>`)}
+          </tr>
+        </thead>
+        <tbody part="table-body">
+          ${rows.map(
+        (row) => html`<tr part="table-row">
+              ${row.map((cell) => html`<td part="table-cell">${renderTableCell(cell, context)}</td>`)}
+            </tr>`
+      )}
+        </tbody>
+      </table>`;
+    }
+    case "hr":
+      return html`<hr data-key=${key} />`;
+    case "code":
+      return html`${renderCodeToken(token, context)}`;
+    case "html":
+      return html`${renderCustomHtmlToken(token, context)}`;
+    case "text":
+      return html`<p part="paragraph" data-key=${key}>${getInlineTokens(token).map((child) => renderInlineToken(child, context))}</p>`;
+    default:
+      return html`<p part="paragraph" data-key=${key}>${(_b = token.raw) != null ? _b : ""}</p>`;
+  }
+}
+function renderMarkdownTokens(tokens, context) {
+  return tokens.map((token, index) => renderBlockToken(token, context, `token-${index}`));
+}
+
+export {
+  renderMarkdownTokens
+};

package/dist/chunks/chunk.UOAZ7VTJ.js

@@ -0,0 +1,21 @@
+import {
+  SlRow
+} from "./chunk.OIQ66L7P.js";
+
+// src/react/row/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-row";
+SlRow.define("sl-row");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRow,
+  react: React,
+  events: {},
+  displayName: "SlRow"
+});
+var row_default = reactWrapper;
+
+export {
+  row_default
+};

package/dist/chunks/chunk.URILDBB3.js

@@ -0,0 +1,25 @@
+import {
+  SlAnimatedImage
+} from "./chunk.XQXUXM2G.js";
+
+// src/react/animated-image/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-animated-image";
+SlAnimatedImage.define("sl-animated-image");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlAnimatedImage,
+  react: React,
+  events: {
+    onSlLoad: "sl-load",
+    onSlError: "sl-error"
+  },
+  displayName: "SlAnimatedImage"
+});
+var animated_image_default = reactWrapper;
+
+export {
+  animated_image_default
+};

package/dist/chunks/chunk.UUUZ3RF7.js

@@ -0,0 +1,26 @@
+// src/components/divider/divider.styles.ts
+import { css } from "lit";
+var divider_styles_default = css`
+  :host {
+    --color: var(--sl-panel-border-color, var(--sl-color-neutral-200, #e5e5e5));
+    --width: var(--sl-panel-border-width, 1px);
+    --spacing: var(--sl-spacing-medium, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem));
+  }
+
+  :host(:not([vertical])) {
+    display: block;
+    border-top: solid var(--width) var(--color);
+    margin: var(--spacing) 0;
+  }
+
+  :host([vertical]) {
+    display: inline-block;
+    height: 100%;
+    border-left: solid var(--width) var(--color);
+    margin: 0 var(--spacing);
+  }
+`;
+
+export {
+  divider_styles_default
+};

package/dist/chunks/chunk.VCTLKW7S.js

@@ -0,0 +1,26 @@
+import {
+  SlAnimation
+} from "./chunk.XVW74MWW.js";
+
+// src/react/animation/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-animation";
+SlAnimation.define("sl-animation");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlAnimation,
+  react: React,
+  events: {
+    onSlCancel: "sl-cancel",
+    onSlFinish: "sl-finish",
+    onSlStart: "sl-start"
+  },
+  displayName: "SlAnimation"
+});
+var animation_default = reactWrapper;
+
+export {
+  animation_default
+};

package/dist/chunks/chunk.VDEE4ATN.js

@@ -0,0 +1,22 @@
+import {
+  menu_label_styles_default
+} from "./chunk.4IG6GBO6.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDL3N2D6.js";
+
+// src/components/menu-label/menu-label.component.ts
+import { html } from "lit";
+var SlMenuLabel = class extends ShoelaceElement {
+  render() {
+    return html` <slot part="base" class="menu-label"></slot> `;
+  }
+};
+SlMenuLabel.styles = [component_styles_default, menu_label_styles_default];
+
+export {
+  SlMenuLabel
+};

package/dist/chunks/chunk.VGJSMGZQ.js

@@ -0,0 +1,76 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/nav/nav.styles.ts
+import { css } from "lit";
+var nav_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    --sl-nav-padding: var(--sl-spacing-2x-small, calc(16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem));
+    --sl-nav-gap: 2px;
+    --sl-nav-item-height: 46px;
+    --sl-nav-item-padding-inline: var(--sl-spacing-medium, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem));
+    --sl-nav-item-padding-inline-compact: var(--sl-spacing-medium, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem));
+    --sl-nav-item-indent-step: 16px;
+    --sl-nav-item-radius: 12px;
+    --sl-nav-item-color: var(--sl-color-neutral-900, #212121);
+    --sl-nav-item-hover-color: var(--sl-color-neutral-900, #212121);
+    --sl-nav-item-active-color: var(--sl-color-primary-600, #5582f3);
+    --sl-nav-item-hover-background: var(--sl-color-neutral-100, #f5f5f5);
+    --sl-nav-item-active-background: var(--sl-color-primary-50, #f7f9ff);
+    --sl-nav-horizontal-item-gap: var(--sl-spacing-x-small, calc(16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem));
+    --sl-nav-horizontal-item-padding-inline: var(--sl-spacing-medium, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem));
+    --sl-nav-horizontal-padding-inline: var(--sl-spacing-medium, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem));
+    --sl-nav-horizontal-divider-color: var(--sl-color-neutral-300, #d9d9d9);
+    --sl-nav-horizontal-indicator-width: 2px;
+    --sl-nav-horizontal-indicator-color: var(--sl-color-primary-600, #5582f3);
+  }
+
+  .nav {
+    display: flex;
+    gap: var(--sl-nav-gap);
+    padding: var(--sl-nav-padding) 0;
+  }
+
+  .nav--horizontal {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0;
+    padding-block: 0;
+    padding-inline: var(--sl-nav-horizontal-padding-inline);
+    box-shadow: inset 0 -1px 0 0 var(--sl-nav-horizontal-divider-color);
+  }
+
+  .nav--vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([inline-collapsed]) {
+    inline-size: min(100%, var(--sl-nav-collapsed-width, 64px));
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow: hidden;
+    transition:
+      inline-size var(--sl-transition-medium) ease,
+      max-inline-size var(--sl-transition-medium) ease;
+  }
+
+  :host([mode='inline']:not([inline-collapsed])) {
+    transition:
+      inline-size var(--sl-transition-medium) ease,
+      max-inline-size var(--sl-transition-medium) ease;
+  }
+`;
+
+export {
+  nav_styles_default
+};