@progressive-development/pd-content 0.9.2 → 1.0.0

package/dist/pd-box-view/PdBoxView.d.ts

@@ -1,6 +1,15 @@
 import { LitElement, CSSResultGroup } from 'lit';
 /**
+ * A responsive grid container for displaying content in columns.
+ *
  * @tagname pd-box-view
+ * @summary Responsive CSS Grid container with configurable columns.
+ *
+ * @slot - Default slot for grid items.
+ *
+ * @cssprop --pd-box-columns - Number of grid columns. Default: `4`.
+ * @cssprop --pd-box-min-width - Minimum width of each grid item. Default: `100px`.
+ * @cssprop --pd-box-gap - Gap between grid items. Default: `25px`.
  */
 export declare class PdBoxView extends LitElement {
     static styles: CSSResultGroup;

package/dist/pd-box-view/PdBoxView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdBoxView.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/PdBoxView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,MAAM;CAGhB"}
+{"version":3,"file":"PdBoxView.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/PdBoxView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,MAAM;CAGhB"}

package/dist/pd-box-view/pd-box-view.stories.d.ts

@@ -1,10 +1,43 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    render: () => import('lit').TemplateResult<1>;
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-box-view component.
+ * Maps to the component's public API via CSS custom properties.
+ */
+interface PdBoxViewArgs {
+    /** Number of columns in the grid */
+    columns: number;
+    /** Gap between items */
+    gap: string;
+    /** Minimum width of each box */
+    minWidth: string;
+}
+/**
+ * ## pd-box-view
+ *
+ * A responsive CSS Grid container for displaying content in configurable columns.
+ *
+ * ### Features
+ * - Pure CSS Grid layout with no JavaScript logic
+ * - Configurable column count via `--pd-box-columns`
+ * - Configurable gap spacing via `--pd-box-gap`
+ * - Minimum item width via `--pd-box-min-width` for responsive wrapping
+ * - Items automatically wrap when they cannot maintain minimum width
+ * - Lightweight: zero properties, zero events, all configuration via CSS
+ *
+ * ### Accessibility
+ * - Pure layout component with no interactive behavior
+ * - Content is fully accessible via standard HTML in the default slot
+ * - Grid layout does not affect reading order for screen readers
+ */
+declare const meta: Meta<PdBoxViewArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const BoxView: Story;
+type Story = StoryObj<PdBoxViewArgs>;
+/** Default 4-column grid layout. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Visual comparison of 1, 2, 3, and 4 column layouts. */
+export declare const AllVariants: Story;
+/** Demonstrates responsive wrapping when items cannot maintain minimum width. */
+export declare const ResponsiveMinWidth: Story;
+/** CSS Custom Properties -- Tight grid vs. spacious grid. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-box-view.stories.d.ts.map

package/dist/pd-box-view/pd-box-view.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-box-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/pd-box-view.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI;;;;CA6CM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"pd-box-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/pd-box-view.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAM1B;;;GAGG;AACH,UAAU,aAAa;IACrB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AA2CD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAmC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAMrC,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,KA6CzB,CAAC;AAMF,iFAAiF;AACjF,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,aAAa,EAAE,KA0D3B,CAAC"}

package/dist/pd-code-snippet/PdCodeSnippet.d.ts

@@ -0,0 +1,105 @@
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
+/**
+ * Supported programming languages for syntax highlighting.
+ */
+export type CodeLanguage = "javascript" | "typescript" | "html" | "css" | "json" | "bash" | "yaml" | "python" | "java" | "sql" | "markdown" | "plain";
+/**
+ * Code snippet component with syntax highlighting.
+ *
+ * Displays code with proper syntax highlighting using Prism.js,
+ * with an optional title, copy-to-clipboard button, and source URL.
+ *
+ * @tagname pd-code-snippet
+ * @summary Code display component with syntax highlighting and copy functionality.
+ *
+ * @cssprop --pd-code-snippet-width - Width of the component. Default: `100%`.
+ * @cssprop --pd-code-snippet-border-radius - Border radius. Default: `--pd-radius-md`.
+ * @cssprop --pd-code-snippet-padding - Code padding. Default: `--pd-spacing-md`.
+ * @cssprop --pd-code-snippet-font-family - Code font family. Default: monospace.
+ * @cssprop --pd-code-snippet-font-size - Code font size. Default: `0.875rem`.
+ * @cssprop --pd-code-snippet-line-height - Code line height. Default: `1.5`.
+ * @cssprop --pd-code-snippet-bg-col - Code background color. Default: `--pd-default-bg-light-col`.
+ * @cssprop --pd-code-snippet-text-col - Code text color. Default: `--pd-default-font-content-col`.
+ * @cssprop --pd-code-snippet-header-bg-col - Header background. Default: `--pd-default-bg-dark-col`.
+ * @cssprop --pd-code-snippet-header-col - Header text color. Default: `--pd-default-font-col`.
+ * @cssprop --pd-code-snippet-url-col - URL link color. Default: `--pd-default-font-link-col`.
+ * @cssprop --pd-code-snippet-border-col - Border color. Default: `--pd-default-light-col`.
+ * @cssprop --pd-code-snippet-line-number-col - Line number color. Default: `--pd-default-font-muted-col`.
+ * @cssprop --pd-code-snippet-token-class - Syntax color for class names, regex, and variables. Default: `#267f99`.
+ * @cssprop --pd-code-snippet-token-comment - Syntax color for comments, prologs, and doctypes. Default: `#6a9955`.
+ * @cssprop --pd-code-snippet-token-function - Syntax color for functions and class-name tokens. Default: `#795e26`.
+ * @cssprop --pd-code-snippet-token-keyword - Syntax color for keywords, at-rules, and attr-values. Default: `#0550ae`.
+ * @cssprop --pd-code-snippet-token-number - Syntax color for numbers, constants, booleans, and symbols. Default: `#098658`.
+ * @cssprop --pd-code-snippet-token-operator - Syntax color for operators, entities, and URLs. Default: `#1e1e1e`.
+ * @cssprop --pd-code-snippet-token-property - Syntax color for property tokens. Default: `#0451a5`.
+ * @cssprop --pd-code-snippet-token-punctuation - Syntax color for punctuation. Default: `#1e1e1e`.
+ * @cssprop --pd-code-snippet-token-string - Syntax color for strings, selectors, and char tokens. Default: `#a31515`.
+ *
+ * @example
+ * ```html
+ * <pd-code-snippet
+ *   title="Installation"
+ *   language="bash"
+ *   url="https://docs.example.com/install"
+ * >
+ *   npm install @progressive-development/pd-content
+ * </pd-code-snippet>
+ * ```
+ */
+export declare class PdCodeSnippet extends LitElement {
+    /**
+     * Title displayed in the header.
+     */
+    title: string;
+    /**
+     * Programming language for syntax highlighting.
+     */
+    language: CodeLanguage;
+    /**
+     * Source URL displayed below the code.
+     */
+    url: string;
+    /**
+     * The code content to display.
+     * Can be set via property or slotted text content.
+     */
+    code: string;
+    /**
+     * Whether to show line numbers.
+     */
+    showLineNumbers: boolean;
+    /**
+     * Copy button state.
+     * @ignore
+     */
+    private _copied;
+    /**
+     * Code extracted from slot.
+     * @ignore
+     */
+    private _slotCode;
+    static styles: CSSResultGroup;
+    updated(changedProperties: PropertyValues): void;
+    render(): import('lit').TemplateResult<1>;
+    /**
+     * Extract code from slotted content.
+     */
+    private _handleSlotChange;
+    /**
+     * Apply syntax highlighting to the code.
+     */
+    private _highlightCode;
+    /**
+     * Get Prism grammar for the current language.
+     */
+    private _getGrammar;
+    /**
+     * Copy code to clipboard.
+     */
+    private _copyToClipboard;
+    /**
+     * Format URL for display (truncate if too long).
+     */
+    private _formatUrl;
+}
+//# sourceMappingURL=PdCodeSnippet.d.ts.map

package/dist/pd-code-snippet/PdCodeSnippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCodeSnippet.d.ts","sourceRoot":"","sources":["../../src/pd-code-snippet/PdCodeSnippet.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEL,cAAc,EAEd,UAAU,EAEV,cAAc,EACf,MAAM,KAAK,CAAC;AAMb,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,GACV,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,EAAE,YAAY,CAAgB;IAEtC;;OAEG;IAEH,GAAG,SAAM;IAET;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,eAAe,UAAS;IAExB;;;OAGG;IAEH,OAAO,CAAC,OAAO,CAAS;IAExB;;;OAGG;IAEH,OAAO,CAAC,SAAS,CAAM;IAEvB,OAAgB,MAAM,EAAE,cAAc,CAwRpC;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAahD,MAAM;IA4Ff;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACH,OAAO,CAAC,cAAc;IAyBtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAoBnB;;OAEG;YACW,gBAAgB;IAgB9B;;OAEG;IACH,OAAO,CAAC,UAAU;CASnB"}

package/dist/pd-code-snippet/PdCodeSnippet.js

@@ -0,0 +1,504 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import Prism from '../_virtual/prism.js';
+import '../_virtual/prism-typescript.js';
+import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-bash.js';
+import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-json.js';
+import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-yaml.js';
+import '../_virtual/prism-python.js';
+import '../_virtual/prism-java.js';
+import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-sql.js';
+import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-markdown.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdCodeSnippet extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.language = "javascript";
+    this.url = "";
+    this.code = "";
+    this.showLineNumbers = false;
+    this._copied = false;
+    this._slotCode = "";
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        /* Layout */
+        --_width: var(--pd-code-snippet-width, 100%);
+        --_radius: var(
+          --pd-code-snippet-border-radius,
+          var(--pd-radius-md, 8px)
+        );
+        --_padding: var(--pd-code-snippet-padding, var(--pd-spacing-md, 1rem));
+
+        /* Typography */
+        --_font-family: var(
+          --pd-code-snippet-font-family,
+          "Fira Code",
+          "Consolas",
+          "Monaco",
+          monospace
+        );
+        --_font-size: var(--pd-code-snippet-font-size, 0.875rem);
+        --_line-height: var(--pd-code-snippet-line-height, 1.5);
+
+        /* Colors - Uses existing pd-default-* theme tokens with component-specific fallbacks */
+        --_bg-col: var(
+          --pd-code-snippet-bg-col,
+          var(--pd-default-bg-light-col, #f2f9fa)
+        );
+        --_text-col: var(
+          --pd-code-snippet-text-col,
+          var(--pd-default-font-content-col, #353738)
+        );
+        --_header-bg-col: var(
+          --pd-code-snippet-header-bg-col,
+          var(--pd-default-bg-dark-col, #e3f2f5)
+        );
+        --_header-col: var(
+          --pd-code-snippet-header-col,
+          var(--pd-default-font-col, #3c3c3b)
+        );
+        --_url-col: var(
+          --pd-code-snippet-url-col,
+          var(--pd-default-font-link-col, #067394)
+        );
+        --_border-col: var(
+          --pd-code-snippet-border-col,
+          var(--pd-default-light-col, #afc1d2)
+        );
+        --_line-number-col: var(
+          --pd-code-snippet-line-number-col,
+          var(--pd-default-font-muted-col, #6b7280)
+        );
+
+        /* Prism syntax token colors - light theme defaults */
+        --_token-comment: var(--pd-code-snippet-token-comment, #6a9955);
+        --_token-keyword: var(--pd-code-snippet-token-keyword, #0550ae);
+        --_token-string: var(--pd-code-snippet-token-string, #a31515);
+        --_token-number: var(--pd-code-snippet-token-number, #098658);
+        --_token-function: var(--pd-code-snippet-token-function, #795e26);
+        --_token-class: var(--pd-code-snippet-token-class, #267f99);
+        --_token-operator: var(--pd-code-snippet-token-operator, #1e1e1e);
+        --_token-punctuation: var(--pd-code-snippet-token-punctuation, #1e1e1e);
+        --_token-property: var(--pd-code-snippet-token-property, #0451a5);
+
+        display: block;
+        width: var(--_width);
+      }
+
+      .snippet-container {
+        border-radius: var(--_radius);
+        border: 1px solid var(--_border-col);
+        overflow: hidden;
+        background: var(--_bg-col);
+      }
+
+      /* Header */
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem var(--_padding);
+        background: var(--_header-bg-col);
+        border-bottom: 1px solid var(--_border-col);
+        min-height: 2.5rem;
+        box-sizing: border-box;
+      }
+
+      .title {
+        margin: 0;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--_header-col);
+        font-family: var(--pd-default-font-content-family, inherit);
+      }
+
+      .language-badge {
+        font-size: 0.75rem;
+        color: var(--_header-col);
+        opacity: 0.7;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      /* Copy button */
+      .copy-button {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        border: 1px solid var(--_border-col);
+        border-radius: 4px;
+        background: transparent;
+        color: var(--_header-col);
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .copy-button:hover {
+        background: var(--pd-default-hover-col, #ffc857);
+        color: var(--pd-on-secondary-col, #0a3a48);
+        border-color: var(--pd-default-hover-col, #ffc857);
+      }
+
+      .copy-button:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, #067394);
+        outline-offset: 2px;
+      }
+
+      .copy-button.copied {
+        color: var(--pd-default-success-col, #348b11);
+        border-color: var(--pd-default-success-col, #348b11);
+      }
+
+      .copy-icon {
+        width: 14px;
+        height: 14px;
+        fill: currentColor;
+      }
+
+      /* Code area */
+      .code-wrapper {
+        overflow-x: auto;
+        padding: var(--_padding);
+      }
+
+      pre {
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        font-family: var(--_font-family);
+        font-size: var(--_font-size);
+        line-height: var(--_line-height);
+        color: var(--_text-col);
+        white-space: pre;
+        word-wrap: normal;
+        tab-size: 2;
+      }
+
+      code {
+        font-family: inherit;
+        background: transparent;
+      }
+
+      /* Line numbers */
+      :host([showLineNumbers]) .code-wrapper {
+        display: flex;
+      }
+
+      .line-numbers {
+        flex-shrink: 0;
+        padding-right: 1rem;
+        margin-right: 1rem;
+        border-right: 1px solid var(--_border-col);
+        color: var(--_line-number-col);
+        text-align: right;
+        user-select: none;
+        font-family: var(--_font-family);
+        font-size: var(--_font-size);
+        line-height: var(--_line-height);
+      }
+
+      /* URL footer */
+      .footer {
+        padding: 0.5rem var(--_padding);
+        background: var(--_header-bg-col);
+        border-top: 1px solid var(--_border-col);
+      }
+
+      .source-url {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.75rem;
+        color: var(--_header-col);
+      }
+
+      .source-url a {
+        color: var(--_url-col);
+        text-decoration: none;
+        word-break: break-all;
+      }
+
+      .source-url a:hover {
+        text-decoration: underline;
+      }
+
+      .link-icon {
+        width: 12px;
+        height: 12px;
+        fill: currentColor;
+        flex-shrink: 0;
+      }
+
+      /* Hidden slot for extracting text content */
+      .hidden-slot {
+        display: none;
+      }
+
+      /* Prism.js token styling */
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: var(--_token-comment);
+      }
+
+      .token.punctuation {
+        color: var(--_token-punctuation);
+      }
+
+      .token.property,
+      .token.tag,
+      .token.boolean,
+      .token.number,
+      .token.constant,
+      .token.symbol,
+      .token.deleted {
+        color: var(--_token-number);
+      }
+
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted {
+        color: var(--_token-string);
+      }
+
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string {
+        color: var(--_token-operator);
+      }
+
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword {
+        color: var(--_token-keyword);
+      }
+
+      .token.function,
+      .token.class-name {
+        color: var(--_token-function);
+      }
+
+      .token.regex,
+      .token.important,
+      .token.variable {
+        color: var(--_token-class);
+      }
+    `
+    ];
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("code") || changedProperties.has("language") || changedProperties.has("_slotCode")) {
+      this._highlightCode();
+    }
+  }
+  render() {
+    const codeContent = this.code || this._slotCode;
+    const lineCount = codeContent.split("\n").length;
+    return html`
+      <div class="snippet-container">
+        ${this.title || this.language !== "plain" ? html`
+              <div class="header">
+                <div class="title-area">
+                  ${this.title ? html`<h4 class="title">${this.title}</h4>` : html`<span class="language-badge"
+                        >${this.language}</span
+                      >`}
+                </div>
+                <div class="header-actions">
+                  ${this.title && this.language !== "plain" ? html`<span class="language-badge">${this.language}</span>` : nothing}
+                  <button
+                    class="copy-button ${this._copied ? "copied" : ""}"
+                    @click=${this._copyToClipboard}
+                    aria-label="Copy code to clipboard"
+                  >
+                    ${this._copied ? html`
+                          <svg class="copy-icon" viewBox="0 0 24 24">
+                            <path
+                              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                            />
+                          </svg>
+                          Copied
+                        ` : html`
+                          <svg class="copy-icon" viewBox="0 0 24 24">
+                            <path
+                              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+                            />
+                          </svg>
+                          Copy
+                        `}
+                  </button>
+                </div>
+              </div>
+            ` : nothing}
+
+        <div class="code-wrapper">
+          ${this.showLineNumbers ? html`
+                <div class="line-numbers" aria-hidden="true">
+                  ${Array.from(
+      { length: lineCount },
+      (_, i) => html`${i + 1}<br />`
+    )}
+                </div>
+              ` : nothing}
+          <pre><code id="code-block"></code></pre>
+        </div>
+
+        ${this.url ? html`
+              <div class="footer">
+                <div class="source-url">
+                  <svg class="link-icon" viewBox="0 0 24 24">
+                    <path
+                      d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
+                    />
+                  </svg>
+                  <span>Source:</span>
+                  <a
+                    href="${this.url}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ${this._formatUrl(this.url)}
+                  </a>
+                </div>
+              </div>
+            ` : nothing}
+      </div>
+
+      <!-- Hidden slot to capture text content -->
+      <div class="hidden-slot">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  /**
+   * Extract code from slotted content.
+   */
+  _handleSlotChange(e) {
+    const slot = e.target;
+    const nodes = slot.assignedNodes({ flatten: true });
+    const text = nodes.map((node) => node.textContent || "").join("").trim();
+    if (text && text !== this._slotCode) {
+      this._slotCode = text;
+    }
+  }
+  /**
+   * Apply syntax highlighting to the code.
+   */
+  _highlightCode() {
+    const codeBlock = this.shadowRoot?.getElementById("code-block");
+    if (!codeBlock) return;
+    const codeContent = this.code || this._slotCode;
+    if (!codeContent) {
+      codeBlock.textContent = "";
+      return;
+    }
+    const grammar = this._getGrammar();
+    if (grammar && this.language !== "plain") {
+      codeBlock.innerHTML = Prism.highlight(
+        codeContent,
+        grammar,
+        this.language
+      );
+    } else {
+      codeBlock.textContent = codeContent;
+    }
+  }
+  /**
+   * Get Prism grammar for the current language.
+   */
+  _getGrammar() {
+    const languageMap = {
+      javascript: "javascript",
+      typescript: "typescript",
+      html: "html",
+      css: "css",
+      json: "json",
+      bash: "bash",
+      yaml: "yaml",
+      python: "python",
+      java: "java",
+      sql: "sql",
+      markdown: "markdown",
+      plain: ""
+    };
+    const prismLang = languageMap[this.language];
+    return prismLang ? Prism.languages[prismLang] : null;
+  }
+  /**
+   * Copy code to clipboard.
+   */
+  async _copyToClipboard() {
+    const codeContent = this.code || this._slotCode;
+    try {
+      await navigator.clipboard.writeText(codeContent);
+      this._copied = true;
+      setTimeout(() => {
+        this._copied = false;
+      }, 2e3);
+    } catch (err) {
+      console.error("Failed to copy code:", err);
+    }
+  }
+  /**
+   * Format URL for display (truncate if too long).
+   */
+  _formatUrl(url) {
+    try {
+      const parsed = new URL(url);
+      const display = parsed.hostname + parsed.pathname;
+      return display.length > 50 ? display.substring(0, 47) + "..." : display;
+    } catch {
+      return url.length > 50 ? url.substring(0, 47) + "..." : url;
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdCodeSnippet.prototype, "title");
+__decorateClass([
+  property({ type: String })
+], PdCodeSnippet.prototype, "language");
+__decorateClass([
+  property({ type: String })
+], PdCodeSnippet.prototype, "url");
+__decorateClass([
+  property({ type: String })
+], PdCodeSnippet.prototype, "code");
+__decorateClass([
+  property({ type: Boolean })
+], PdCodeSnippet.prototype, "showLineNumbers");
+__decorateClass([
+  state()
+], PdCodeSnippet.prototype, "_copied");
+__decorateClass([
+  state()
+], PdCodeSnippet.prototype, "_slotCode");
+
+export { PdCodeSnippet };

package/dist/pd-code-snippet/pd-code-snippet.d.ts

@@ -0,0 +1,4 @@
+import { PdCodeSnippet } from './PdCodeSnippet.js';
+export { PdCodeSnippet };
+export type { CodeLanguage } from './PdCodeSnippet.js';
+//# sourceMappingURL=pd-code-snippet.d.ts.map