@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/checkbox.js

@@ -0,0 +1,336 @@
+import { css as p, LitElement as d, html as l } from "lit";
+import { query as k, property as r, state as u, customElement as m } from "lit/decorators.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import { live as b } from "lit/directives/live.js";
+const v = p`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    cursor: pointer;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+    user-select: none;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .checkbox__checkmark {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: var(--bp-border-width) solid var(--bp-color-border-strong);
+    border-radius: var(--bp-border-radius-sm);
+    background-color: var(--bp-color-surface);
+    transition: all var(--bp-transition-fast);
+  }
+
+  .checkbox__checkmark svg {
+    width: 100%;
+    height: 100%;
+    color: var(--bp-color-text-inverse);
+    opacity: 0;
+    transform: scale(0);
+    transition:
+      opacity var(--bp-duration-fast) var(--bp-ease-out),
+      transform var(--bp-duration-fast) var(--bp-ease-bounce);
+  }
+
+  .checkbox__label {
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Sizes */
+  .checkbox--sm .checkbox__checkmark {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .checkbox--sm .checkbox__label {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .checkbox--md .checkbox__checkmark {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  .checkbox--md .checkbox__label {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .checkbox--lg .checkbox__checkmark {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  .checkbox--lg .checkbox__label {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* States - Checked */
+  .checkbox--checked .checkbox__checkmark {
+    background-color: var(--bp-color-primary);
+    border-color: var(--bp-color-primary);
+  }
+
+  .checkbox--checked .checkbox__checkmark svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* States - Indeterminate */
+  .checkbox--indeterminate .checkbox__checkmark {
+    background-color: var(--bp-color-primary);
+    border-color: var(--bp-color-primary);
+  }
+
+  .checkbox--indeterminate .checkbox__checkmark svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* States - Hover */
+  .checkbox:hover:not(.checkbox--disabled):not(.checkbox--checked):not(
+      .checkbox--indeterminate
+    )
+    .checkbox__checkmark {
+    border-color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .checkbox--checked:hover:not(.checkbox--disabled) .checkbox__checkmark,
+  .checkbox--indeterminate:hover:not(.checkbox--disabled) .checkbox__checkmark {
+    background-color: var(--bp-color-primary-hover);
+    border-color: var(--bp-color-primary-hover);
+  }
+
+  /* States - Active */
+  .checkbox:active:not(.checkbox--disabled) .checkbox__checkmark {
+    transform: scale(0.95);
+  }
+
+  /* States - Focused */
+  .checkbox--focused .checkbox__checkmark {
+    outline: var(--bp-focus-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* States - Disabled */
+  .checkbox--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* States - Error */
+  .checkbox--error .checkbox__checkmark {
+    border-color: var(--bp-color-error);
+  }
+
+  .checkbox--error.checkbox--checked .checkbox__checkmark,
+  .checkbox--error.checkbox--indeterminate .checkbox__checkmark {
+    background-color: var(--bp-color-error);
+    border-color: var(--bp-color-error);
+  }
+
+  /* Touch target size: ensure 44x44px minimum on touch devices */
+  @media (pointer: coarse) {
+    .checkbox {
+      min-height: 44px;
+      padding: var(--bp-spacing-xs) 0;
+    }
+
+    .checkbox__checkmark {
+      position: relative;
+    }
+
+    /* Expand touch target with pseudo-element */
+    .checkbox__checkmark::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+    }
+  }
+`;
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (t, a, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? _(a, s) : a, h = t.length - 1, n; h >= 0; h--)
+    (n = t[h]) && (o = (i ? n(a, s, o) : n(o)) || o);
+  return i && o && f(a, s, o), o;
+};
+let e = class extends d {
+  constructor() {
+    super(), this.hasFocus = !1, this.internals = null, this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.size = "md", this.error = !1, typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateFormValue();
+  }
+  updated(t) {
+    t.has("checked") && (this.updateFormValue(), this.input && (this.input.checked = this.checked)), t.has("indeterminate") && this.input && (this.input.indeterminate = this.indeterminate);
+  }
+  updateFormValue() {
+    const t = this.checked ? this.value : null;
+    this.internals?.setFormValue(t);
+  }
+  handleChange(t) {
+    const a = t.target;
+    this.checked = a.checked, this.indeterminate = !1, this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { checked: this.checked },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleFocus() {
+    this.hasFocus = !0, this.dispatchEvent(
+      new CustomEvent("bp-focus", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleBlur() {
+    this.hasFocus = !1, this.dispatchEvent(
+      new CustomEvent("bp-blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Sets focus on the checkbox.
+   */
+  focus(t) {
+    this.input?.focus(t);
+  }
+  /**
+   * Removes focus from the checkbox.
+   */
+  blur() {
+    this.input?.blur();
+  }
+  render() {
+    const t = [
+      "checkbox",
+      `checkbox--${this.size}`,
+      this.checked ? "checkbox--checked" : "",
+      this.indeterminate ? "checkbox--indeterminate" : "",
+      this.disabled ? "checkbox--disabled" : "",
+      this.error ? "checkbox--error" : "",
+      this.hasFocus ? "checkbox--focused" : ""
+    ].filter(Boolean).join(" ");
+    return l`
+      <label part="checkbox" class="${t}">
+        <input
+          part="input"
+          type="checkbox"
+          class="checkbox__input"
+          .checked=${b(this.checked)}
+          .indeterminate=${b(this.indeterminate)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          name=${x(this.name || void 0)}
+          value=${this.value}
+          aria-checked=${this.indeterminate ? "mixed" : this.checked}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <span part="checkmark" class="checkbox__checkmark">
+          ${this.indeterminate ? l`<svg
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <line
+                  x1="4"
+                  y1="8"
+                  x2="12"
+                  y2="8"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                />
+              </svg>` : l`<svg
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 4L6 11L3 8"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>`}
+        </span>
+        <span part="label" class="checkbox__label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+};
+e.styles = [v];
+e.formAssociated = !0;
+c([
+  k('input[type="checkbox"]')
+], e.prototype, "input", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "checked", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "indeterminate", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+c([
+  r({ type: String, reflect: !0 })
+], e.prototype, "name", 2);
+c([
+  r({ type: String })
+], e.prototype, "value", 2);
+c([
+  r({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
+c([
+  u()
+], e.prototype, "hasFocus", 2);
+e = c([
+  m("bp-checkbox")
+], e);
+export {
+  e as BpCheckbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../source/components/checkbox/checkbox.style.ts","../../source/components/checkbox/checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const checkboxStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    user-select: none;\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .checkbox__checkmark {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--bp-border-width) solid var(--bp-color-border-strong);\n    border-radius: var(--bp-border-radius-sm);\n    background-color: var(--bp-color-surface);\n    transition: all var(--bp-transition-fast);\n  }\n\n  .checkbox__checkmark svg {\n    width: 100%;\n    height: 100%;\n    color: var(--bp-color-text-inverse);\n    opacity: 0;\n    transform: scale(0);\n    transition:\n      opacity var(--bp-duration-fast) var(--bp-ease-out),\n      transform var(--bp-duration-fast) var(--bp-ease-bounce);\n  }\n\n  .checkbox__label {\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Sizes */\n  .checkbox--sm .checkbox__checkmark {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .checkbox--sm .checkbox__label {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .checkbox--md .checkbox__checkmark {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .checkbox--md .checkbox__label {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .checkbox--lg .checkbox__checkmark {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .checkbox--lg .checkbox__label {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* States - Checked */\n  .checkbox--checked .checkbox__checkmark {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n  }\n\n  .checkbox--checked .checkbox__checkmark svg {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* States - Indeterminate */\n  .checkbox--indeterminate .checkbox__checkmark {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n  }\n\n  .checkbox--indeterminate .checkbox__checkmark svg {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* States - Hover */\n  .checkbox:hover:not(.checkbox--disabled):not(.checkbox--checked):not(\n      .checkbox--indeterminate\n    )\n    .checkbox__checkmark {\n    border-color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .checkbox--checked:hover:not(.checkbox--disabled) .checkbox__checkmark,\n  .checkbox--indeterminate:hover:not(.checkbox--disabled) .checkbox__checkmark {\n    background-color: var(--bp-color-primary-hover);\n    border-color: var(--bp-color-primary-hover);\n  }\n\n  /* States - Active */\n  .checkbox:active:not(.checkbox--disabled) .checkbox__checkmark {\n    transform: scale(0.95);\n  }\n\n  /* States - Focused */\n  .checkbox--focused .checkbox__checkmark {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* States - Disabled */\n  .checkbox--disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* States - Error */\n  .checkbox--error .checkbox__checkmark {\n    border-color: var(--bp-color-error);\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__checkmark,\n  .checkbox--error.checkbox--indeterminate .checkbox__checkmark {\n    background-color: var(--bp-color-error);\n    border-color: var(--bp-color-error);\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .checkbox {\n      min-height: 44px;\n      padding: var(--bp-spacing-xs) 0;\n    }\n\n    .checkbox__checkmark {\n      position: relative;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .checkbox__checkmark::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 44px;\n      height: 44px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { checkboxStyles } from './checkbox.style.js';\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg';\n\n/**\n * A form checkbox input with label support and multiple states.\n *\n * @element bp-checkbox\n *\n * @property {boolean} checked - Whether the checkbox is checked\n * @property {boolean} indeterminate - Indeterminate state (partial selection)\n * @property {boolean} disabled - Whether the checkbox is disabled\n * @property {boolean} required - Whether the checkbox is required\n * @property {string} name - The name for form submission\n * @property {string} value - The value for form submission\n * @property {CheckboxSize} size - The size of the checkbox\n * @property {boolean} error - Whether the checkbox has an error state\n *\n * @slot - The checkbox label text\n *\n * @fires bp-change - Fired when the checked state changes\n * @fires bp-focus - Fired when the checkbox receives focus\n * @fires bp-blur - Fired when the checkbox loses focus\n *\n * @csspart checkbox - The checkbox container\n * @csspart input - The native checkbox input element\n * @csspart checkmark - The visual checkmark indicator\n * @csspart label - The label text container\n */\n@customElement('bp-checkbox')\nexport class BpCheckbox extends LitElement {\n  @query('input[type=\"checkbox\"]') declare input: HTMLInputElement;\n\n  /**\n   * Whether the checkbox is checked.\n   */\n  @property({ type: Boolean, reflect: true }) declare checked: boolean;\n\n  /**\n   * Whether the checkbox is in an indeterminate state.\n   * This is a visual-only state for \"partially checked\" appearance.\n   */\n  @property({ type: Boolean, reflect: true }) declare indeterminate: boolean;\n\n  /**\n   * Whether the checkbox is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Whether the checkbox is required.\n   */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /**\n   * The name of the checkbox for form submission.\n   */\n  @property({ type: String, reflect: true }) declare name: string;\n\n  /**\n   * The value of the checkbox for form submission.\n   */\n  @property({ type: String }) declare value: string;\n\n  /**\n   * The size of the checkbox.\n   */\n  @property({ type: String, reflect: true }) declare size: CheckboxSize;\n\n  /**\n   * Whether the checkbox has an error state.\n   */\n  @property({ type: Boolean, reflect: true }) declare error: boolean;\n\n  @state() private hasFocus = false;\n\n  static styles = [checkboxStyles];\n\n  static formAssociated = true;\n\n  private internals: ElementInternals | null = null;\n\n  constructor() {\n    super();\n    this.checked = false;\n    this.indeterminate = false;\n    this.disabled = false;\n    this.required = false;\n    this.name = '';\n    this.value = 'on';\n    this.size = 'md';\n    this.error = false;\n\n    // attachInternals may not be available in all environments (e.g., test)\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateFormValue();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('checked')) {\n      this.updateFormValue();\n      if (this.input) {\n        this.input.checked = this.checked;\n      }\n    }\n\n    if (changedProperties.has('indeterminate') && this.input) {\n      this.input.indeterminate = this.indeterminate;\n    }\n  }\n\n  private updateFormValue() {\n    const value = this.checked ? this.value : null;\n    this.internals?.setFormValue(value);\n  }\n\n  private handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = false;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { checked: this.checked },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-focus', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n\n  focus(options?: FocusOptions) {\n    this.input?.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input?.blur();\n  }\n\n  render() {\n    const classes = [\n      'checkbox',\n      `checkbox--${this.size}`,\n      this.checked ? 'checkbox--checked' : '',\n      this.indeterminate ? 'checkbox--indeterminate' : '',\n      this.disabled ? 'checkbox--disabled' : '',\n      this.error ? 'checkbox--error' : '',\n      this.hasFocus ? 'checkbox--focused' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <label part=\"checkbox\" class=\"${classes}\">\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          class=\"checkbox__input\"\n          .checked=${live(this.checked)}\n          .indeterminate=${live(this.indeterminate)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name || undefined)}\n          value=${this.value}\n          aria-checked=${this.indeterminate ? 'mixed' : this.checked}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <span part=\"checkmark\" class=\"checkbox__checkmark\">\n          ${this.indeterminate\n            ? html`<svg\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <line\n                  x1=\"4\"\n                  y1=\"8\"\n                  x2=\"12\"\n                  y2=\"8\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>`\n            : html`<svg\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M13 4L6 11L3 8\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>`}\n        </span>\n        <span part=\"label\" class=\"checkbox__label\">\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-checkbox': BpCheckbox;\n  }\n}\n"],"names":["checkboxStyles","css","BpCheckbox","LitElement","changedProperties","value","event","target","options","classes","html","live","ifDefined","__decorateClass","query","property","state","customElement"],"mappings":"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"}

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,143 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * Result returned by a highlight adapter.
+ */
+export interface HighlightResult {
+    /** The highlighted code as an HTML string. */
+    html: string;
+    /** Whether highlighting was actually applied (false = plain text fallback). */
+    isHighlighted: boolean;
+}
+/**
+ * Adapter interface for pluggable syntax highlighting.
+ */
+export interface CodeBlockHighlightAdapter {
+    /**
+     * Called once when the adapter is first used.
+     * Use this for async initialization (loading Shiki, registering languages, etc).
+     * Return value is passed to `highlight()` as context.
+     */
+    initialize?(): Promise<unknown>;
+    /**
+     * Return highlighted HTML for the given code and language.
+     * `context` is the resolved value from `initialize()`.
+     */
+    highlight(options: {
+        code: string;
+        language: string;
+        context: unknown;
+    }): HighlightResult;
+}
+/**
+ * Built-in plain text adapter that escapes HTML and renders monospace text.
+ * Zero dependencies, zero bundle cost.
+ */
+export declare const plainTextAdapter: CodeBlockHighlightAdapter;
+/**
+ * A code block component for displaying syntax-highlighted code with
+ * copy-to-clipboard, line numbers, line highlighting, and expand/collapse.
+ *
+ * @slot title - Custom title content. Overrides the `title` attribute.
+ * @slot controls - Additional control buttons placed before the copy button.
+ * @slot copy-icon - Custom icon for the copy button (default state).
+ * @slot copied-icon - Custom icon for the copy button (success state).
+ *
+ * @fires bp-copy - Fired after a copy attempt. Detail: `{ code: string, success: boolean }`
+ *
+ * @csspart base - Outer wrapper
+ * @csspart header - Header bar
+ * @csspart title - Title text area
+ * @csspart controls - Controls container
+ * @csspart copy-button - The copy button
+ * @csspart body - Scrollable code container
+ * @csspart pre - The `<pre>` element
+ * @csspart code - The `<code>` element
+ * @csspart line-number - Individual line number cell
+ * @csspart line - Individual line of code
+ */
+export declare class BpCodeBlock extends LitElement {
+    /**
+     * The source code to display.
+     */
+    code: string;
+    /**
+     * Language identifier for syntax highlighting (e.g. 'typescript', 'html', 'python').
+     * Also displayed as a label when no title is set.
+     */
+    language: string;
+    /**
+     * Optional title displayed in the header (e.g. a filename like `index.ts`).
+     * Overrides the language label.
+     */
+    title: string;
+    /**
+     * Show line number gutter.
+     */
+    showLineNumbers: boolean;
+    /**
+     * Array of 1-based line numbers to visually highlight.
+     */
+    highlightLines: number[];
+    /**
+     * Wrap long lines instead of horizontal scroll.
+     */
+    wrapLines: boolean;
+    /**
+     * Show the copy-to-clipboard button.
+     */
+    showCopyButton: boolean;
+    /**
+     * When set, collapse the code block to this many visible lines with a "Show more" toggle.
+     */
+    maxLines: number | undefined;
+    /**
+     * Show/hide the header bar. When false, the copy button floats over the code.
+     */
+    showHeader: boolean;
+    /**
+     * The syntax highlight adapter to use for this instance.
+     * Defaults to `BpCodeBlock.defaultAdapter` which is the plainTextAdapter.
+     */
+    highlightAdapter: CodeBlockHighlightAdapter;
+    /**
+     * Global default adapter used when no per-instance adapter is set.
+     */
+    static defaultAdapter: CodeBlockHighlightAdapter;
+    private _copyState;
+    private _expanded;
+    private _highlightedHtml;
+    private _adapterContext;
+    private _adapterInitialized;
+    private _lineCount;
+    private _highlightSet;
+    private _highlightedLines;
+    private _copyResetTimer;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    private _initializeAdapter;
+    private _updateHighlightingSync;
+    private _handleCopy;
+    private _fallbackCopy;
+    private _toggleExpanded;
+    private get _shouldCollapse();
+    private get _isCollapsed();
+    private get _headerLabel();
+    private _getCopyAriaLabel;
+    private _renderCopyIcon;
+    private _renderCopyButton;
+    private _renderHeader;
+    private _renderFloatingCopyButton;
+    private _renderLine;
+    private _renderCodeLines;
+    private _renderExpandButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bp-code-block': BpCodeBlock;
+    }
+}
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../source/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMrE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,UAAU,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,OAAO,CAAC;KAClB,GAAG,eAAe,CAAC;CACrB;AAkBD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,yBAO9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;;OAGG;IACiC,QAAQ,EAAE,MAAM,CAAC;IAErD;;;OAGG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IAEK,eAAe,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACgC,cAAc,EAAE,MAAM,EAAE,CAAC;IAE5D;;OAEG;IAEK,SAAS,EAAE,OAAO,CAAC;IAE3B;;OAEG;IAEK,cAAc,EAAE,OAAO,CAAC;IAEhC;;OAEG;IAEK,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;OAEG;IAEK,UAAU,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IAEK,gBAAgB,EAAE,yBAAyB,CAAC;IAEpD;;OAEG;IACH,MAAM,CAAC,cAAc,EAAE,yBAAyB,CAAoB;IAE3D,OAAO,CAAC,UAAU,CAAuC;IACzD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,iBAAiB,CAAgB;IAElD,OAAO,CAAC,eAAe,CAA8C;IAErE,MAAM,CAAC,MAAM,4BAAqB;;IAgBlC,oBAAoB,IAAI,IAAI;cAQT,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA2BtE,iBAAiB,IAAI,IAAI;YAKX,kBAAkB;IAmBhC,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,WAAW,CAiCjB;IAEF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,eAAe;IAIvB,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAyCvB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,mBAAmB;IAe3B,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/code-block/code-block.style.d.ts

@@ -0,0 +1,2 @@
+export declare const codeBlockStyles: import("lit").CSSResult;
+//# sourceMappingURL=code-block.style.d.ts.map

package/dist/components/code-block/code-block.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.style.d.ts","sourceRoot":"","sources":["../../../source/components/code-block/code-block.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBA6Q3B,CAAC"}