npm - sp-component - Versions diffs - 0.0.1 - Mend

sp-component 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (711) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,344 @@
+# SP Components
+A library of **57 Web Components** , compatible with any framework — Angular, React, Vue, Svelte, or plain HTML.
+- Zero runtime dependencies (only Lit)
+- Full TypeScript support
+- Form-associated (native `<form>` integration)
+- Keyboard navigation & ARIA accessible
+- `prefers-reduced-motion` support
+---
+## Table of Contents
+- [SP Components](#sp-components)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+  - [Quick Start](#quick-start)
+  - [Usage by Framework](#usage-by-framework)
+    - [HTML / Vanilla JS](#html--vanilla-js)
+    - [Angular](#angular)
+    - [React](#react)
+    - [Vue 3](#vue-3)
+  - [Components](#components)
+    - [Form Inputs](#form-inputs)
+    - [Buttons \& Actions](#buttons--actions)
+    - [Navigation](#navigation)
+    - [Overlays](#overlays)
+    - [Display](#display)
+  - [Customization](#customization)
+  - [Events](#events)
+  - [Form Participation](#form-participation)
+  - [Contributing](#contributing)
+  - [License](#license)
+---
+## Installation
+```bash
+npm install libreria-component
+```
+---
+## Quick Start
+Import everything at once:
+```js
+import "libreria-component";
+```
+Or import only the components you need:
+```js
+import "libreria-component/components/button";
+import "libreria-component/components/input";
+```
+---
+## Usage by Framework
+### HTML / Vanilla JS
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module">
+      import "libreria-component";
+    </script>
+  </head>
+  <body>
+    <sp-button variant="primary">Click me</sp-button>
+    <sp-input
+      label="Email"
+      type="email"
+      placeholder="you@example.com"
+    ></sp-input>
+    <script>
+      document.querySelector("sp-button").addEventListener("sp-click", () => {
+        console.log("clicked!");
+      });
+    </script>
+  </body>
+</html>
+```
+---
+### Angular
+Add `CUSTOM_ELEMENTS_SCHEMA` to your module or standalone component:
+```ts
+// app.module.ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import "libreria-component";
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+```html
+<!-- template -->
+<sp-input
+  label="Username"
+  [value]="username"
+  (sp-input)="username = $event.detail.value"
+></sp-input>
+<sp-button variant="primary" (sp-click)="submit()">Submit</sp-button>
+```
+---
+### React
+```tsx
+import "libreria-component";
+export function LoginForm() {
+  const handleInput = (e: Event) => {
+    const detail = (e as CustomEvent<{ value: string }>).detail;
+    console.log(detail.value);
+  };
+  return (
+    <div>
+      <sp-input label="Email" type="email" onSp-input={handleInput} />
+      <sp-button variant="primary">Login</sp-button>
+    </div>
+  );
+}
+```
+> **Tip:** React 19+ supports custom element event props natively. For React 18 and earlier, attach events with `useRef` + `addEventListener`.
+---
+### Vue 3
+```vue
+<script setup>
+import "libreria-component";
+const value = ref("");
+</script>
+<template>
+  <sp-input
+    label="Search"
+    :value="value"
+    @sp-input="value = $event.detail.value"
+  />
+  <sp-button variant="primary" @sp-click="search">Search</sp-button>
+</template>
+```
+---
+## Components
+### Form Inputs
+| Component   | Tag                | Description                                     |
+| ----------- | ------------------ | ----------------------------------------------- |
+| Input       | `<sp-input>`       | Text, email, password, number, search, tel, url |
+| Textarea    | `<sp-textarea>`    | Multi-line text input                           |
+| Checkbox    | `<sp-checkbox>`    | Single checkbox with label                      |
+| Radio       | `<sp-radio>`       | Radio button                                    |
+| Switch      | `<sp-switch>`      | Toggle switch (on/off)                          |
+| Select      | `<sp-select>`      | Dropdown select                                 |
+| Combobox    | `<sp-combobox>`    | Searchable select with keyboard navigation      |
+| Slider      | `<sp-slider>`      | Range slider                                    |
+| Rating      | `<sp-rating>`      | Star rating input                               |
+| OTP Input   | `<sp-otp-input>`   | One-time password digit input                   |
+| File Upload | `<sp-file-upload>` | File picker input                               |
+| Form Field  | `<sp-form-field>`  | Label + hint + error wrapper for any input      |
+### Buttons & Actions
+| Component   | Tag                | Description                            |
+| ----------- | ------------------ | -------------------------------------- |
+| Button      | `<sp-button>`      | Primary, secondary, ghost, destructive |
+| Copy Button | `<sp-copy-button>` | Copies text to clipboard               |
+### Navigation
+| Component  | Tag                                         | Description                   |
+| ---------- | ------------------------------------------- | ----------------------------- |
+| Tabs       | `<sp-tabs>` + `<sp-tab>` + `<sp-tab-panel>` | Tabbed navigation             |
+| Breadcrumb | `<sp-breadcrumb>` + `<sp-breadcrumb-item>`  | Page path navigation          |
+| Pagination | `<sp-pagination>`                           | Page number navigation        |
+| Navbar     | `<sp-navbar>`                               | Top navigation bar            |
+| Sidebar    | `<sp-sidebar>`                              | Side navigation               |
+| Stepper    | `<sp-stepper>`                              | Multi-step progress indicator |
+### Overlays
+| Component | Tag                            | Description                                |
+| --------- | ------------------------------ | ------------------------------------------ |
+| Modal     | `<sp-modal>`                   | Dialog with focus trap + ESC close         |
+| Drawer    | `<sp-drawer>`                  | Slide-in panel with focus trap + ESC close |
+| Popover   | `<sp-popover>`                 | Anchored floating panel                    |
+| Tooltip   | `<sp-tooltip>`                 | Hover/focus hint                           |
+| Toast     | `<sp-toast>`                   | Temporary notification                     |
+| Menu      | `<sp-menu>` + `<sp-menu-item>` | Dropdown menu with keyboard navigation     |
+### Display
+| Component       | Tag                    | Description                                    |
+| --------------- | ---------------------- | ---------------------------------------------- |
+| Card            | `<sp-card>`            | Content container                              |
+| Badge           | `<sp-badge>`           | Status indicator label                         |
+| Tag             | `<sp-tag>`             | Dismissible label                              |
+| Alert           | `<sp-alert>`           | Inline message (info, success, warning, error) |
+| Avatar          | `<sp-avatar>`          | User image or initials                         |
+| Icon            | `<sp-icon>`            | SVG icon wrapper                               |
+| Divider         | `<sp-divider>`         | Horizontal/vertical separator                  |
+| Stat            | `<sp-stat>`            | Metric display (value + label)                 |
+| Timeline        | `<sp-timeline>`        | Vertical event list                            |
+| Table           | `<sp-table>`           | Data table                                     |
+| Empty State     | `<sp-empty-state>`     | Zero-data placeholder                          |
+| Accordion       | `<sp-accordion-item>`  | Collapsible content section                    |
+| Progress Bar    | `<sp-progress-bar>`    | Linear progress indicator                      |
+| Skeleton        | `<sp-skeleton>`        | Loading placeholder                            |
+| Spinner         | `<sp-spinner>`         | Loading spinner                                |
+| Visually Hidden | `<sp-visually-hidden>` | Screen reader only content                     |
+---
+## Customization
+All components expose CSS custom properties for theming. Example with `sp-button`:
+```css
+sp-button {
+  --sp-button-radius: 8px;
+  --sp-button-font-size: 16px;
+  --sp-button-transition: background 0.2s ease;
+}
+```
+You can also target internal parts using `::part()`:
+```css
+sp-input::part(input) {
+  font-family: "Inter", sans-serif;
+}
+sp-button::part(button) {
+  letter-spacing: 0.05em;
+}
+```
+---
+## Events
+All components emit prefixed custom events to avoid collisions with native DOM events.
+| Event       | Detail       | Description                              |
+| ----------- | ------------ | ---------------------------------------- |
+| `sp-click`  | `{ source }` | Button clicked                           |
+| `sp-input`  | `{ value }`  | Input value changed (on every keystroke) |
+| `sp-change` | `{ value }`  | Input value committed (on blur/enter)    |
+| `sp-focus`  | —            | Element received focus                   |
+| `sp-blur`   | —            | Element lost focus                       |
+| `sp-clear`  | —            | Clear button clicked on input            |
+| `sp-open`   | —            | Overlay opened (modal, drawer, popover)  |
+| `sp-close`  | —            | Overlay closed                           |
+```js
+document.querySelector("sp-input").addEventListener("sp-input", (e) => {
+  console.log(e.detail.value); // current value
+});
+```
+---
+## Form Participation
+All form input components are **form-associated custom elements** — they work with native `<form>` just like `<input>` does.
+```html
+<form id="my-form">
+  <sp-input name="email" type="email" required></sp-input>
+  <sp-textarea name="message" required></sp-textarea>
+  <sp-checkbox name="agree" value="yes"></sp-checkbox>
+  <sp-button type="submit">Send</sp-button>
+</form>
+<script>
+  document.getElementById("my-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    console.log(Object.fromEntries(data)); // { email: "...", message: "...", agree: "yes" }
+  });
+</script>
+```
+---
+## Contributing
+```bash
+# Clone and install
+git clone https://github.com/wisftock/libreria-component.git
+cd libreria-component
+npm install
+# Run Storybook (component explorer)
+npm run storybook
+# Run tests
+npm run test
+# Run tests in watch mode
+npm run test:watch
+# Build
+npm run build
+```
+Before submitting a PR, ensure:
+```bash
+npm run type-check   # TypeScript — no errors
+npm run test         # All 633 tests pass
+npm run build        # Build succeeds
+```
+---
+## License
+MIT © wisftock

package/dist/components/accordion/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { SpAccordionComponent } from './sp-accordion.js';
+export { SpAccordionItemComponent } from './sp-accordion-item.js';
+export type { SpAccordionProps, SpAccordionItemProps, SpAccordionVariant } from './sp-accordion.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/accordion/sp-accordion-item.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+const o = ":host{display:block}.sp-accordion-item{border-bottom:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px;background:none;border:none;cursor:pointer;text-align:left;font-size:14px;font-weight:500;color:var(--sp-text, #111827);transition:background .15s;gap:8px}.sp-accordion-trigger:hover:not(:disabled){background:var(--sp-bg-subtle, #f9fafb)}.sp-accordion-trigger:disabled{opacity:.5;cursor:not-allowed}.sp-accordion-label{flex:1}.sp-accordion-icon{flex-shrink:0;color:var(--sp-text-muted, #6b7280);font-size:10px;transition:transform .2s}.sp-accordion-content{overflow:hidden;max-height:0;transition:max-height .3s ease}:host([open]) .sp-accordion-content{max-height:2000px}.sp-accordion-body{padding:0 16px 16px;font-size:14px;color:var(--sp-text-muted, #6b7280);line-height:1.6}.sp-accordion-trigger:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px;border-radius:4px}@media(max-width:479px){.sp-accordion-trigger{padding:12px;font-size:13px}.sp-accordion-body{padding:0 12px 12px}}@media(prefers-reduced-motion:reduce){.sp-accordion-trigger,.sp-accordion-icon,.sp-accordion-content{transition:none}}";
+export {
+  o as default
+};

package/dist/components/accordion/sp-accordion-item.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * Accordion item component — must be used inside sp-accordion.
+ *
+ * @element sp-accordion-item
+ *
+ * @prop {string}  label    - Header label text
+ * @prop {boolean} open     - Whether the item is expanded
+ * @prop {boolean} disabled - Prevents toggle interaction
+ * @prop {string}  value    - Unique identifier for this item
+ *
+ * @fires {CustomEvent<{ open: boolean, value: string }>} sp-toggle - Emitted when item is toggled
+ *
+ * @slot       - Body content when expanded
+ * @slot label - Custom label content (overrides label prop)
+ */
+export declare class SpAccordionItemComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    _id: string;
+    label: string;
+    open: boolean;
+    disabled: boolean;
+    value: string;
+    readonly _handleClick: () => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-accordion-item": SpAccordionItemComponent;
+    }
+}
+//# sourceMappingURL=sp-accordion-item.d.ts.map

package/dist/components/accordion/sp-accordion-item.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sp-accordion-item.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/sp-accordion-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;GAcG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAAqB;IAElC,GAAG,SAA0C;IAGtD,KAAK,SAAM;IAGX,IAAI,UAAS;IAGb,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAEX,QAAQ,CAAC,YAAY,aAWnB;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,wBAAwB,CAAC;KAC/C;CACF"}

package/dist/components/accordion/sp-accordion-item.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { unsafeCSS as m, LitElement as c } from "lit";
+import { state as u, property as p, customElement as h } from "lit/decorators.js";
+import d from "./sp-accordion-item.css.js";
+import { accordionItemTemplate as f } from "./sp-accordion-item.template.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (a, r, i, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(r, i) : r, l = a.length - 1, n; l >= 0; l--)
+    (n = a[l]) && (t = (s ? n(r, i, t) : n(t)) || t);
+  return s && t && v(r, i, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this._id = Math.random().toString(36).slice(2, 9), this.label = "", this.open = !1, this.disabled = !1, this.value = "", this._handleClick = () => {
+      this.disabled || (this.open = !this.open, this.dispatchEvent(
+        new CustomEvent("sp-toggle", {
+          detail: { open: this.open, value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    };
+  }
+  render() {
+    return f.call(this);
+  }
+};
+e.styles = m(d);
+o([
+  u()
+], e.prototype, "_id", 2);
+o([
+  p({ type: String })
+], e.prototype, "label", 2);
+o([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+o([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  p({ type: String })
+], e.prototype, "value", 2);
+e = o([
+  h("sp-accordion-item")
+], e);
+export {
+  e as SpAccordionItemComponent
+};

package/dist/components/accordion/sp-accordion-item.template.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpAccordionItemComponent } from './sp-accordion-item.js';
+export declare function accordionItemTemplate(this: SpAccordionItemComponent): TemplateResult;
+//# sourceMappingURL=sp-accordion-item.template.d.ts.map

package/dist/components/accordion/sp-accordion-item.template.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"sp-accordion-item.template.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/sp-accordion-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,wBAAwB,GAAG,cAAc,CA0BpF"}

package/dist/components/accordion/sp-accordion-item.template.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { html as i } from "lit";
+function t() {
+  return i`
+    <div class="sp-accordion-item">
+      <button
+        class="sp-accordion-trigger"
+        type="button"
+        id="acc-trigger-${this._id}"
+        ?disabled=${this.disabled}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls="acc-content-${this._id}"
+        @click=${this._handleClick}
+      >
+        <span class="sp-accordion-label"><slot name="label">${this.label}</slot></span>
+        <span class="sp-accordion-icon" aria-hidden="true">${this.open ? "▲" : "▼"}</span>
+      </button>
+      <div
+        class="sp-accordion-content"
+        id="acc-content-${this._id}"
+        role="region"
+        aria-labelledby="acc-trigger-${this._id}"
+        aria-hidden=${this.open ? "false" : "true"}
+      >
+        <div class="sp-accordion-body"><slot></slot></div>
+      </div>
+    </div>
+  `;
+}
+export {
+  t as accordionItemTemplate
+};

package/dist/components/accordion/sp-accordion.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+const o = ':host{display:block}.sp-accordion{border-radius:8px;overflow:hidden}:host([variant="default"]) .sp-accordion{background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb)}:host([variant="bordered"]) .sp-accordion{border:2px solid var(--sp-primary, #3b82f6)}:host([variant="ghost"]) .sp-accordion{border:none}:host([variant="ghost"]) .sp-accordion .sp-accordion-item{border-bottom:1px solid var(--sp-bg-muted, #f3f4f6)}';
+export {
+  o as default
+};

package/dist/components/accordion/sp-accordion.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { SpAccordionVariant } from './sp-accordion.types.js';
+/**
+ * Accordion container component.
+ *
+ * @element sp-accordion
+ *
+ * @prop {boolean}            multiple - Allows multiple items open at once
+ * @prop {SpAccordionVariant} variant  - Visual style: default | bordered | ghost
+ *
+ * @slot - sp-accordion-item elements
+ */
+export declare class SpAccordionComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    multiple: boolean;
+    variant: SpAccordionVariant;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly _handleKeydown;
+    private readonly _handleItemToggle;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-accordion": SpAccordionComponent;
+    }
+}
+//# sourceMappingURL=sp-accordion.d.ts.map

package/dist/components/accordion/sp-accordion.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sp-accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/sp-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;;;;;;;GASG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAqB;IAG3C,QAAQ,UAAS;IAGjB,OAAO,EAAE,kBAAkB,CAAa;IAE/B,iBAAiB;IAMjB,oBAAoB;IAM7B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA+B7B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAOhC;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,oBAAoB,CAAC;KACtC;CACF"}

package/dist/components/accordion/sp-accordion.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { unsafeCSS as f, LitElement as m } from "lit";
+import { property as h, customElement as v } from "lit/decorators.js";
+import g from "./sp-accordion.css.js";
+import { accordionTemplate as y } from "./sp-accordion.template.js";
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (e, t, o, r) => {
+  for (var n = r > 1 ? void 0 : r ? _(t, o) : t, l = e.length - 1, s; l >= 0; l--)
+    (s = e[l]) && (n = (r ? s(t, o, n) : s(n)) || n);
+  return r && n && w(t, o, n), n;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.variant = "default", this._handleKeydown = (e) => {
+      var s;
+      const t = [...this.querySelectorAll("sp-accordion-item:not([disabled])")];
+      if (!t.length) return;
+      const o = t.findIndex((a) => {
+        var p, u;
+        const d = (p = a.shadowRoot) == null ? void 0 : p.querySelector(".sp-accordion-trigger");
+        return d && (document.activeElement === a || d === ((u = a.shadowRoot) == null ? void 0 : u.activeElement));
+      });
+      let r = o;
+      if (e.key === "ArrowDown")
+        e.preventDefault(), r = o < t.length - 1 ? o + 1 : 0;
+      else if (e.key === "ArrowUp")
+        e.preventDefault(), r = o > 0 ? o - 1 : t.length - 1;
+      else if (e.key === "Home")
+        e.preventDefault(), r = 0;
+      else if (e.key === "End")
+        e.preventDefault(), r = t.length - 1;
+      else
+        return;
+      const n = t[r];
+      if (!n) return;
+      const l = (s = n.shadowRoot) == null ? void 0 : s.querySelector(".sp-accordion-trigger");
+      l == null || l.focus();
+    }, this._handleItemToggle = (e) => {
+      !this.multiple && e.detail.open && [...this.querySelectorAll("sp-accordion-item")].forEach((o) => {
+        o.value !== e.detail.value && (o.open = !1);
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("sp-toggle", this._handleItemToggle), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("sp-toggle", this._handleItemToggle), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  render() {
+    return y.call(this);
+  }
+};
+i.styles = f(g);
+c([
+  h({ type: Boolean })
+], i.prototype, "multiple", 2);
+c([
+  h({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+i = c([
+  v("sp-accordion")
+], i);
+export {
+  i as SpAccordionComponent
+};

package/dist/components/accordion/sp-accordion.template.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpAccordionComponent } from './sp-accordion.js';
+export declare function accordionTemplate(this: SpAccordionComponent): TemplateResult;
+//# sourceMappingURL=sp-accordion.template.d.ts.map

package/dist/components/accordion/sp-accordion.template.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"sp-accordion.template.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/sp-accordion.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,oBAAoB,GAAG,cAAc,CAE5E"}

package/dist/components/accordion/sp-accordion.template.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { html as o } from "lit";
+function r() {
+  return o`<div class="sp-accordion"><slot></slot></div>`;
+}
+export {
+  r as accordionTemplate
+};

package/dist/components/accordion/sp-accordion.types.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export type SpAccordionVariant = "default" | "bordered" | "ghost";
+export interface SpAccordionItemProps {
+    label: string;
+    open: boolean;
+    disabled: boolean;
+    value: string;
+}
+export interface SpAccordionProps {
+    multiple: boolean;
+    variant: SpAccordionVariant;
+}
+//# sourceMappingURL=sp-accordion.types.d.ts.map

package/dist/components/accordion/sp-accordion.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sp-accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/sp-accordion.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,kBAAkB,CAAC;CAC7B"}

package/dist/components/alert/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { SpAlertComponent } from './sp-alert.js';
+export type { SpAlertProps, SpAlertVariant } from './sp-alert.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/alert/sp-alert.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+const r = ':host{display:block}.sp-alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:6px;border:1px solid transparent}.sp-alert-icon{flex-shrink:0;font-size:16px;line-height:1.5}.sp-alert-body{flex:1;min-width:0}.sp-alert-title{display:block;font-size:14px;font-weight:600;margin-bottom:2px}.sp-alert-message{font-size:14px;line-height:1.5}.sp-alert-close{margin-left:auto;background:none;border:none;cursor:pointer;opacity:.6;font-size:14px;padding:2px;flex-shrink:0;line-height:1}.sp-alert-close:hover{opacity:1}:host([variant="info"]) .sp-alert{background:var(--sp-primary-bg, #eff6ff);border-color:#bfdbfe;color:#1e40af}:host([variant="success"]) .sp-alert{background:#f0fdf4;border-color:#bbf7d0;color:#166534}:host([variant="warning"]) .sp-alert{background:var(--sp-warning-bg, #FFFBE6);border-color:#fde68a;color:#92400e}:host([variant="error"]) .sp-alert{background:var(--sp-error-bg, #FFF2F0);border-color:#fecaca;color:#991b1b}.sp-alert-close:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}';
+export {
+  r as default
+};