@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/select-Dz52figi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-Dz52figi.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","selectStyles","BpSelect","FormControlMixin","LitElement","event","target","optionValue","optionLabel","previousValue","hiddenInput","options","option","el","repeat","isSelected","isFocused","index","focusedOption","longestText","text","message","selectClasses","invalid","displayLabel","labelId","classMap","ifDefined","nothing","describedBy","property","state","customElement"],"sources":["../../source/components/select/select.style.ts","../../source/components/select/select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const selectStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  .select {\n    position: relative;\n    font-family: var(--bp-font-family);\n  }\n\n  .select-label {\n    display: block;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .select-required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .select-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    background-color: var(--bp-color-background);\n    border: var(--bp-border-width) solid var(--bp-color-input-border);\n    border-radius: var(--bp-border-radius-md);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    cursor: pointer;\n    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.05);\n    transition:\n      border-color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n  }\n\n  .select-value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n  }\n\n  /* Hidden sizer keeps the trigger width stable across placeholder/option changes */\n  .select-value__sizer {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n    white-space: nowrap;\n  }\n\n  .select-value__display {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Placeholder state - when no value is selected */\n  .select-trigger:not([aria-label]) .select-value:empty {\n    opacity: 0.6;\n  }\n\n  .select-icon {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    flex-shrink: 0;\n    margin-left: var(--bp-spacing-xs);\n    transition:\n      transform var(--bp-transition-base),\n      color var(--bp-transition-fast);\n  }\n\n  .select-dropdown {\n    position: absolute;\n    top: calc(100% + var(--bp-spacing-2xs));\n    left: 0;\n    right: 0;\n    overflow-y: auto;\n    background-color: var(--bp-color-background);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    box-shadow: var(--bp-shadow-lg);\n    z-index: var(--bp-z-dropdown);\n    animation: slideDown 150ms ease-out;\n    transform-origin: top;\n    contain: layout style paint;\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-2)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .select-option {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    cursor: pointer;\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  .select-option:hover:not(.select-option--focused) {\n    background-color: var(--bp-color-surface-elevated);\n  }\n\n  .select-option--focused {\n    background-color: var(--bp-color-surface-subdued);\n    outline: var(--bp-focus-width) solid var(--bp-color-primary);\n    outline-offset: calc(-1 * var(--bp-focus-width));\n  }\n\n  .select-option--selected {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n    color: var(--bp-color-primary);\n    font-weight: var(--bp-font-weight-semibold);\n    position: relative;\n    padding-right: var(--bp-spacing-2xl);\n  }\n\n  /* Checkmark for selected option */\n  .select-option--selected::after {\n    content: '✓';\n    position: absolute;\n    right: var(--bp-spacing-md);\n    color: var(--bp-color-primary);\n    font-weight: var(--bp-font-weight-bold);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* Sizes */\n  .select--sm .select-trigger {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .select--sm .select-option {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .select--md .select-trigger {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .select--md .select-option {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .select--lg .select-trigger {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .select--lg .select-option {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* States */\n  .select-trigger:hover:not(.select--disabled .select-trigger) {\n    border-color: var(--bp-color-primary);\n  }\n\n  .select-trigger:focus {\n    outline: none;\n  }\n\n  .select-trigger:focus-visible {\n    outline: var(--bp-focus-width) solid var(--bp-color-primary);\n    outline-offset: var(--bp-focus-offset);\n    border-color: var(--bp-color-primary);\n  }\n\n  .select--open .select-trigger {\n    border-color: var(--bp-color-primary);\n  }\n\n  .select--open .select-icon {\n    transform: rotate(180deg);\n    color: var(--bp-color-primary);\n  }\n\n  /* Invalid: error border, also while hovered, focused or open */\n  .select.select--invalid .select-trigger,\n  .select.select--invalid .select-trigger:hover,\n  .select.select--invalid .select-trigger:focus-visible {\n    border-color: var(--bp-color-error);\n  }\n\n  .select--disabled .select-trigger {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  /* iOS zoom prevention: ensure 16px minimum on touch devices */\n  @media (max-width: 768px) {\n    .select--sm .select-trigger {\n      font-size: 16px;\n    }\n\n    .select--sm .select-option {\n      font-size: 16px;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { selectStyles } from './select.style.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\n@customElement('bp-select')\nexport class BpSelect extends FormControlMixin(LitElement) {\n  /** The current value of the select */\n  @property({ type: String, reflect: true }) declare value: string;\n\n  /** Name attribute for form submission */\n  @property({ type: String }) declare name: string;\n\n  /** Visible label text displayed above the select */\n  @property({ type: String, reflect: true }) declare label: string;\n\n  /** Helper text displayed below the select */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the select is invalid: the message replaces the\n   * helper text, is announced, and the border turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  /** Placeholder text when no value is selected */\n  @property({ type: String }) declare placeholder: string;\n\n  /** Whether the select is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Whether the select is required */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /** Size variant of the select */\n  @property({ type: String, reflect: true }) declare size: SelectSize;\n\n  /** Whether the dropdown is currently open */\n  @state() private isOpen = false;\n\n  /** Label for the selected option */\n  @state() private selectedLabel = '';\n\n  /** Index of the focused option for keyboard navigation */\n  @state() private focusedIndex = -1;\n\n  static styles = [fieldMessageStyles, selectStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.name = '';\n    this.label = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.placeholder = 'Select an option';\n    this.disabled = false;\n    this.required = false;\n    this.size = 'md';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    });\n    // Update selected label on initial load\n    this.updateComplete.then(() => this.updateSelectedLabel());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    } as EventListenerOptions);\n  }\n\n  private handleSlotChange = () => {\n    this.updateSelectedLabel();\n  };\n\n  private updateSelectedLabel() {\n    if (!this.value) return;\n\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const options = assignedElements.filter(\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\n    );\n\n    options.forEach((option) => {\n      if ((option.value || option.textContent) === this.value) {\n        this.selectedLabel = option.textContent || '';\n      }\n    });\n  }\n\n  private handleDocumentClick = (event: MouseEvent) => {\n    if (!this.contains(event.target as unknown as globalThis.Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleToggle = (event?: Event) => {\n    event?.stopPropagation();\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleOptionClick = (event: Event) => {\n    if (this.disabled) return;\n\n    const target = event.currentTarget as HTMLElement;\n    const optionValue = target.dataset.value || '';\n    const optionLabel = target.dataset.label || '';\n\n    const previousValue = this.value;\n    this.value = optionValue;\n    this.selectedLabel = optionLabel;\n    this.isOpen = false;\n    this.focusedIndex = -1;\n\n    // Dispatch change event\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: this.value,\n          label: this.selectedLabel,\n          previousValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Update the underlying hidden input for form integration\n    const hiddenInput = this.shadowRoot?.querySelector('input[type=\"hidden\"]');\n    if (hiddenInput) {\n      (hiddenInput as HTMLInputElement).value = this.value;\n      hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));\n    }\n  };\n\n  private handleKeyDown = (event: globalThis.KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const options = this.getOptions();\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.isOpen && this.focusedIndex >= 0) {\n          // Select the focused option\n          const option = options[this.focusedIndex];\n          if (option) {\n            const optionValue = option.value || option.textContent || '';\n            const optionLabel = option.textContent || '';\n            const previousValue = this.value;\n            this.value = optionValue;\n            this.selectedLabel = optionLabel;\n            this.isOpen = false;\n            this.focusedIndex = -1;\n\n            this.dispatchEvent(\n              new CustomEvent('bp-change', {\n                detail: {\n                  value: this.value,\n                  label: this.selectedLabel,\n                  previousValue,\n                },\n                bubbles: true,\n                composed: true,\n              })\n            );\n\n            const hiddenInput = this.shadowRoot?.querySelector(\n              'input[type=\"hidden\"]'\n            );\n            if (hiddenInput) {\n              (hiddenInput as HTMLInputElement).value = this.value;\n              hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));\n            }\n          }\n        } else {\n          this.handleToggle();\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        this.focusedIndex = -1;\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.isOpen = true;\n          this.focusedIndex = 0;\n        } else {\n          this.focusedIndex = Math.min(\n            this.focusedIndex + 1,\n            options.length - 1\n          );\n        }\n        this.scrollFocusedOptionIntoView();\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.isOpen = true;\n          this.focusedIndex = options.length - 1;\n        } else {\n          this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\n        }\n        this.scrollFocusedOptionIntoView();\n        break;\n      case 'Home':\n        if (this.isOpen) {\n          event.preventDefault();\n          this.focusedIndex = 0;\n          this.scrollFocusedOptionIntoView();\n        }\n        break;\n      case 'End':\n        if (this.isOpen) {\n          event.preventDefault();\n          this.focusedIndex = options.length - 1;\n          this.scrollFocusedOptionIntoView();\n        }\n        break;\n    }\n  };\n\n  private getOptions(): Array<{ value: string; textContent: string }> {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const options = assignedElements.filter(\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\n    );\n    return options.map((option) => ({\n      value: option.value || option.textContent || '',\n      textContent: option.textContent || '',\n    }));\n  }\n\n  private scrollFocusedOptionIntoView() {\n    this.updateComplete.then(() => {\n      const focusedOption = this.shadowRoot?.querySelector(\n        '.select-option--focused'\n      ) as HTMLElement;\n      if (focusedOption) {\n        focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n      }\n    });\n  }\n\n  /**\n   * Returns the longest text among all options and the placeholder.\n   * Used by a hidden sizer element to keep the trigger width stable.\n   */\n  private getSizerText(): string {\n    const options = this.getOptions();\n    let longestText = this.placeholder || '';\n\n    for (const option of options) {\n      const text = option.textContent || '';\n      if (text.length > longestText.length) {\n        longestText = text;\n      }\n    }\n\n    return longestText;\n  }\n\n  private getOptionElements = () => {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const options = assignedElements.filter(\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\n    );\n\n    return repeat(\n      options,\n      (option) => option.value || option.textContent || '',\n      (option, index) => {\n        const optionValue = option.value || option.textContent || '';\n        const optionLabel = option.textContent || '';\n        const isSelected = this.value === optionValue;\n        const isFocused = this.focusedIndex === index;\n\n        if (isSelected && !this.selectedLabel) {\n          this.selectedLabel = optionLabel;\n        }\n\n        return html`\n          <div\n            class=\"select-option ${\n              isSelected ? 'select-option--selected' : ''\n            } ${isFocused ? 'select-option--focused' : ''}\"\n            part=\"option\"\n            role=\"option\"\n            aria-selected=\"${isSelected ? 'true' : 'false'}\"\n            data-value=\"${optionValue}\"\n            data-label=\"${optionLabel}\"\n            tabindex=\"-1\"\n            @click=${this.handleOptionClick}\n          >\n            ${optionLabel}\n          </div>\n        `;\n      }\n    );\n  };\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: false,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const selectClasses = {\n      select: true,\n      [`select--${this.size}`]: true,\n      'select--disabled': this.disabled,\n      'select--open': this.isOpen,\n      'select--invalid': invalid,\n    };\n\n    const displayLabel = this.selectedLabel || this.placeholder;\n\n    const labelId = this.label ? 'select-label' : undefined;\n\n    return html`\n      <div class=${classMap(selectClasses)} part=\"container\">\n        ${\n          this.label\n            ? html`\n                <label class=\"select-label\" id=\"select-label\" part=\"label\">\n                  ${this.label}\n                  ${\n                    this.required\n                      ? html`<span class=\"select-required\">*</span>`\n                      : ''\n                  }\n                </label>\n              `\n            : ''\n        }\n        <!-- Hidden input for form integration (using input instead of select to avoid Firefox conflict) -->\n        <input\n          type=\"hidden\"\n          name=${ifDefined(this.name || undefined)}\n          .value=${this.value}\n        />\n\n        <!-- Slot for option elements (not rendered, just for content projection) -->\n        <slot\n          @slotchange=${this.handleSlotChange}\n          style=\"display: none;\"\n        ></slot>\n\n        <!-- Custom select trigger -->\n        <div\n          class=\"select-trigger\"\n          part=\"trigger\"\n          role=\"combobox\"\n          aria-expanded=\"${this.isOpen ? 'true' : 'false'}\"\n          aria-haspopup=\"listbox\"\n          aria-labelledby=\"${ifDefined(labelId)}\"\n          aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n          aria-required=\"${this.required ? 'true' : 'false'}\"\n          aria-invalid=${invalid ? 'true' : nothing}\n          aria-describedby=${describedBy ?? nothing}\n          tabindex=\"${this.disabled ? '-1' : '0'}\"\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n        >\n          <span class=\"select-value\" part=\"display\">\n            <span class=\"select-value__sizer\" aria-hidden=\"true\"\n              >${this.getSizerText()}</span\n            >\n            <span class=\"select-value__display\">${displayLabel}</span>\n          </span>\n          <svg\n            class=\"select-icon\"\n            part=\"icon\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n\n        <!-- Dropdown menu -->\n        ${\n          this.isOpen\n            ? html`\n                <div class=\"select-dropdown\" part=\"dropdown\" role=\"listbox\">\n                  ${this.getOptionElements()}\n                </div>\n              `\n            : null\n        }\n      </div>\n      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-select': BpSelect;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/skeleton-BY6tANXI.js

@@ -0,0 +1,206 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./boolean-converter-saxBDLhA.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+//#region source/components/skeleton/skeleton.style.ts
+var c = r`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .skeleton {
+    background-color: var(--bp-color-surface-subdued);
+    overflow: hidden;
+    position: relative;
+    width: var(--skeleton-width, auto);
+    height: var(--skeleton-height, auto);
+  }
+
+  /* Animation */
+  .skeleton--animated::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      transparent 100%
+    );
+    animation: skeleton-shimmer 1.5s infinite linear;
+    transform: translateX(-100%);
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  /* Respect user motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton--animated::after {
+      animation: none;
+      opacity: 0.7;
+    }
+  }
+
+  /* Variants */
+  .skeleton--text {
+    border-radius: var(--bp-border-radius-sm);
+    width: 100%;
+  }
+
+  .skeleton--circular {
+    border-radius: var(--bp-border-radius-full);
+  }
+
+  .skeleton--rectangular {
+    border-radius: 2px;
+  }
+
+  .skeleton--rounded {
+    border-radius: var(--bp-border-radius-lg);
+  }
+
+  /* Sizes for text variant */
+  .skeleton--text.skeleton--sm {
+    height: var(--bp-spacing-3);
+  }
+
+  .skeleton--text.skeleton--md {
+    height: var(--bp-spacing-4);
+  }
+
+  .skeleton--text.skeleton--lg {
+    height: var(--bp-spacing-6);
+  }
+
+  /* Sizes for circular variant */
+  .skeleton--circular.skeleton--sm {
+    width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+  }
+
+  .skeleton--circular.skeleton--md {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+  }
+
+  .skeleton--circular.skeleton--lg {
+    width: var(--bp-spacing-12);
+    height: var(--bp-spacing-12);
+  }
+
+  /* Sizes for rectangular/rounded variants */
+  .skeleton--rectangular.skeleton--sm,
+  .skeleton--rounded.skeleton--sm {
+    height: var(--bp-spacing-10);
+  }
+
+  .skeleton--rectangular.skeleton--md,
+  .skeleton--rounded.skeleton--md {
+    height: var(--bp-spacing-16);
+  }
+
+  .skeleton--rectangular.skeleton--lg,
+  .skeleton--rounded.skeleton--lg {
+    height: var(--bp-spacing-24);
+  }
+
+  /* Text lines container */
+  .skeleton__lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-3);
+  }
+
+  /* Last line in multi-line text is shorter */
+  .skeleton--last-line {
+    width: 75%;
+  }
+
+  /* Static state (no animation) */
+  :host([animated='false']) .skeleton::after,
+  .skeleton:not(.skeleton--animated)::after {
+    display: none;
+  }
+
+  :host([animated='false']) .skeleton,
+  .skeleton:not(.skeleton--animated) {
+    opacity: 0.6;
+  }
+`, l = class extends n {
+	static {
+		this.styles = [c];
+	}
+	constructor() {
+		super(), this.variant = "text", this.width = "", this.height = "", this.animated = !0, this.lines = 1, this.size = "md";
+	}
+	getCustomProperties() {
+		let e = [];
+		return this.width && e.push(`--skeleton-width: ${this.width}`), this.height && e.push(`--skeleton-height: ${this.height}`), e.join("; ");
+	}
+	renderSingleSkeleton() {
+		let e = [
+			"skeleton",
+			`skeleton--${this.variant}`,
+			`skeleton--${this.size}`,
+			this.animated ? "skeleton--animated" : ""
+		].filter(Boolean).join(" "), t = this.getCustomProperties();
+		return i`
+      <div class=${e} part="base" style=${t || a}>
+        <slot></slot>
+      </div>
+    `;
+	}
+	renderTextLines() {
+		if (this.variant !== "text" || this.lines <= 1) return this.renderSingleSkeleton();
+		let e = this.getCustomProperties(), t = [];
+		for (let n = 0; n < this.lines; n++) {
+			let r = n === this.lines - 1, o = [
+				"skeleton",
+				"skeleton--text",
+				`skeleton--${this.size}`,
+				this.animated ? "skeleton--animated" : "",
+				r ? "skeleton--last-line" : ""
+			].filter(Boolean).join(" ");
+			t.push(i`<div
+          class=${o}
+          part="base"
+          style=${e || a}
+        ></div>`);
+		}
+		return i`<div class="skeleton__lines">${t}</div>`;
+	}
+	render() {
+		return this.renderTextLines();
+	}
+};
+e([s({
+	type: String,
+	reflect: !0,
+	converter: { fromAttribute: (e) => e && [
+		"text",
+		"circular",
+		"rectangular",
+		"rounded"
+	].includes(e) ? e : "text" }
+})], l.prototype, "variant", void 0), e([s({ type: String })], l.prototype, "width", void 0), e([s({ type: String })], l.prototype, "height", void 0), e([s({
+	converter: t,
+	reflect: !0
+})], l.prototype, "animated", void 0), e([s({
+	type: Number,
+	converter: (e) => {
+		let t = Number(e);
+		return t > 0 ? t : 1;
+	}
+})], l.prototype, "lines", void 0), e([s({ type: String })], l.prototype, "size", void 0), l = e([o("bp-skeleton")], l);
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=skeleton-BY6tANXI.js.map

package/dist/shared/skeleton-BY6tANXI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-BY6tANXI.js","names":["_decorate","__decorate","skeletonStyles","BpSkeleton","LitElement","props","classes","customProps","nothing","lineElements","i","isLastLine","property","value","booleanConverter","num","customElement"],"sources":["../../source/components/skeleton/skeleton.style.ts","../../source/components/skeleton/skeleton.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const skeletonStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .skeleton {\n    background-color: var(--bp-color-surface-subdued);\n    overflow: hidden;\n    position: relative;\n    width: var(--skeleton-width, auto);\n    height: var(--skeleton-height, auto);\n  }\n\n  /* Animation */\n  .skeleton--animated::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      rgba(255, 255, 255, 0.6) 50%,\n      transparent 100%\n    );\n    animation: skeleton-shimmer 1.5s infinite linear;\n    transform: translateX(-100%);\n  }\n\n  @keyframes skeleton-shimmer {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  /* Respect user motion preferences */\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton--animated::after {\n      animation: none;\n      opacity: 0.7;\n    }\n  }\n\n  /* Variants */\n  .skeleton--text {\n    border-radius: var(--bp-border-radius-sm);\n    width: 100%;\n  }\n\n  .skeleton--circular {\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  .skeleton--rectangular {\n    border-radius: 2px;\n  }\n\n  .skeleton--rounded {\n    border-radius: var(--bp-border-radius-lg);\n  }\n\n  /* Sizes for text variant */\n  .skeleton--text.skeleton--sm {\n    height: var(--bp-spacing-3);\n  }\n\n  .skeleton--text.skeleton--md {\n    height: var(--bp-spacing-4);\n  }\n\n  .skeleton--text.skeleton--lg {\n    height: var(--bp-spacing-6);\n  }\n\n  /* Sizes for circular variant */\n  .skeleton--circular.skeleton--sm {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n\n  .skeleton--circular.skeleton--md {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n\n  .skeleton--circular.skeleton--lg {\n    width: var(--bp-spacing-12);\n    height: var(--bp-spacing-12);\n  }\n\n  /* Sizes for rectangular/rounded variants */\n  .skeleton--rectangular.skeleton--sm,\n  .skeleton--rounded.skeleton--sm {\n    height: var(--bp-spacing-10);\n  }\n\n  .skeleton--rectangular.skeleton--md,\n  .skeleton--rounded.skeleton--md {\n    height: var(--bp-spacing-16);\n  }\n\n  .skeleton--rectangular.skeleton--lg,\n  .skeleton--rounded.skeleton--lg {\n    height: var(--bp-spacing-24);\n  }\n\n  /* Text lines container */\n  .skeleton__lines {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-3);\n  }\n\n  /* Last line in multi-line text is shorter */\n  .skeleton--last-line {\n    width: 75%;\n  }\n\n  /* Static state (no animation) */\n  :host([animated='false']) .skeleton::after,\n  .skeleton:not(.skeleton--animated)::after {\n    display: none;\n  }\n\n  :host([animated='false']) .skeleton,\n  .skeleton:not(.skeleton--animated) {\n    opacity: 0.6;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { skeletonStyles } from './skeleton.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\n\n/**\n * A skeleton loading placeholder that indicates content is loading.\n * Use skeletons to reduce perceived loading time and provide visual feedback.\n *\n * @slot - Optional slot for custom skeleton content\n *\n * @csspart base - The skeleton container element\n */\n@customElement('bp-skeleton')\nexport class BpSkeleton extends LitElement {\n  /** The visual variant of the skeleton */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['text', 'circular', 'rectangular', 'rounded'];\n        return value && valid.includes(value) ? value : 'text';\n      },\n    },\n  })\n  declare variant: 'text' | 'circular' | 'rectangular' | 'rounded';\n\n  /** Width of the skeleton. Can be any valid CSS value. */\n  @property({ type: String }) declare width: string;\n\n  /** Height of the skeleton. Can be any valid CSS value. */\n  @property({ type: String }) declare height: string;\n\n  /** Whether to animate the skeleton with a shimmer effect */\n  @property({ converter: booleanConverter, reflect: true })\n  declare animated: boolean;\n\n  /** Number of lines to display (only for text variant) */\n  @property({\n    type: Number,\n    converter: (value: string | null) => {\n      const num = Number(value);\n      return num > 0 ? num : 1;\n    },\n  })\n  declare lines: number;\n\n  /** The size preset (affects default dimensions) */\n  @property({ type: String }) declare size: 'sm' | 'md' | 'lg';\n\n  static styles = [skeletonStyles];\n\n  constructor() {\n    super();\n    this.variant = 'text';\n    this.width = '';\n    this.height = '';\n    this.animated = true;\n    this.lines = 1;\n    this.size = 'md';\n  }\n\n  /**\n   * Generates CSS custom properties for width and height.\n   * Uses custom properties instead of inline styles for CSP compliance.\n   * @returns CSS string with custom property declarations\n   */\n  private getCustomProperties(): string {\n    const props: string[] = [];\n\n    if (this.width) {\n      props.push(`--skeleton-width: ${this.width}`);\n    }\n\n    if (this.height) {\n      props.push(`--skeleton-height: ${this.height}`);\n    }\n\n    return props.join('; ');\n  }\n\n  /**\n   * Renders a single skeleton element with appropriate classes and styles.\n   * @returns Template result for a single skeleton\n   */\n  private renderSingleSkeleton() {\n    const classes = [\n      'skeleton',\n      `skeleton--${this.variant}`,\n      `skeleton--${this.size}`,\n      this.animated ? 'skeleton--animated' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const customProps = this.getCustomProperties();\n\n    return html`\n      <div class=${classes} part=\"base\" style=${customProps || nothing}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders text skeleton lines.\n   * If variant is text and lines > 1, renders multiple lines with a container.\n   * Otherwise delegates to renderSingleSkeleton.\n   * @returns Template result for text lines or single skeleton\n   */\n  private renderTextLines() {\n    if (this.variant !== 'text' || this.lines <= 1) {\n      return this.renderSingleSkeleton();\n    }\n\n    const customProps = this.getCustomProperties();\n    const lineElements = [];\n    for (let i = 0; i < this.lines; i++) {\n      const isLastLine = i === this.lines - 1;\n      const classes = [\n        'skeleton',\n        'skeleton--text',\n        `skeleton--${this.size}`,\n        this.animated ? 'skeleton--animated' : '',\n        isLastLine ? 'skeleton--last-line' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n\n      lineElements.push(\n        html`<div\n          class=${classes}\n          part=\"base\"\n          style=${customProps || nothing}\n        ></div>`\n      );\n    }\n\n    return html`<div class=\"skeleton__lines\">${lineElements}</div>`;\n  }\n\n  render() {\n    return this.renderTextLines();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-skeleton': BpSkeleton;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAaE,IAAiB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCYpBC,IAAN,cAAyBC,EAAW;;EAqCzB,KAAA,SAAA,CAACF,CAAc;;CAE/B,cAAc;EAOZ,AANA,MAAM,GACN,KAAK,UAAU,QACf,KAAK,QAAQ,IACb,KAAK,SAAS,IACd,KAAK,WAAW,IAChB,KAAK,QAAQ,GACb,KAAK,OAAO;CACd;CAOA,sBAAsC;EACpC,IAAMG,IAAkB,CAAC;EAUzB,OARI,KAAK,SACPA,EAAM,KAAK,qBAAqB,KAAK,OAAO,GAG1C,KAAK,UACPA,EAAM,KAAK,sBAAsB,KAAK,QAAQ,GAGzCA,EAAM,KAAK,IAAI;CACxB;CAMA,uBAA+B;EAC7B,IAAMC,IAAU;GACd;GACA,aAAa,KAAK;GAClB,aAAa,KAAK;GAClB,KAAK,WAAW,uBAAuB;EACzC,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAELC,IAAc,KAAK,oBAAoB;EAE7C,OAAO,CAAI;mBACID,EAAQ,qBAAqBC,KAAeC,EAAQ;;;;CAIrE;CAQA,kBAA0B;EACxB,IAAI,KAAK,YAAY,UAAU,KAAK,SAAS,GAC3C,OAAO,KAAK,qBAAqB;EAGnC,IAAMD,IAAc,KAAK,oBAAoB,GACvCE,IAAe,CAAC;EACtB,KAAK,IAAIC,IAAI,GAAGA,IAAI,KAAK,OAAO,KAAK;GACnC,IAAMC,IAAaD,MAAM,KAAK,QAAQ,GAChCJ,IAAU;IACd;IACA;IACA,aAAa,KAAK;IAClB,KAAK,WAAW,uBAAuB;IACvCK,IAAa,wBAAwB;GACvC,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEX,EAAa,KACX,CAAI;kBACML,EAAQ;;kBAERC,KAAeC,EAAQ;gBAEnC;EACF;EAEA,OAAO,CAAI,gCAAgCC,EAAa;CAC1D;CAEA,SAAS;EACP,OAAO,KAAK,gBAAgB;CAC9B;AACF;AAjIGT,EAAA,CAAAY,EAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW,EACT,gBAAgB,MAEPC,KAAS;EADD;EAAQ;EAAY;EAAe;CAClC,CAAA,CAAM,SAASA,CAAK,IAAIA,IAAQ,OAEpD;AACF,CAAC,CAAA,GAAAV,EAAA,WAAA,WAAA,KAAA,CAAA,GAIAH,EAAA,CAAAY,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzBH,EAAA,CAAAY,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzBH,EAAA,CAAAY,EAAS;CAAE,WAAWE;CAAkB,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,YAAA,KAAA,CAAA,GAIvDH,EAAA,CAAAY,EAAS;CACR,MAAM;CACN,YAAY,MAAyB;EACnC,IAAMG,IAAM,OAAOF,CAAK;EACxB,OAAOE,IAAM,IAAIA,IAAM;CACzB;AACF,CAAC,CAAA,GAAAZ,EAAA,WAAA,SAAA,KAAA,CAAA,GAIAH,EAAA,CAAAY,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,QAAA,KAAA,CAAA,GApC3B,IAAAH,EAAA,CAAAgB,EAAc,aAAa,CAAA,GAAAb,CAAA"}