@progressive-development/pd-page 0.9.1 → 1.0.0

package/dist/pd-socialmedia/pd-socialmedia-model.js

@@ -0,0 +1,240 @@
+const trim = (s) => s.trim();
+const stripAt = (s) => s.replace(/^@/, "");
+const ensureHttps = (url) => /^https?:\/\//i.test(url) ? url : `https://${url}`;
+const SOCIAL_PROVIDERS = [
+  // --- Social ---
+  {
+    id: "instagram",
+    label: "Instagram",
+    aliases: ["insta", "ig"],
+    category: "Social",
+    icon: "📸",
+    brandColor: "#E4405F",
+    inputKind: "username",
+    placeholder: "@deinname",
+    pattern: /^[A-Za-z0-9._]{1,30}$/,
+    normalize: (raw) => stripAt(trim(raw)),
+    toUrl: (input) => `https://instagram.com/${stripAt(trim(input))}`
+  },
+  {
+    id: "tiktok",
+    label: "TikTok",
+    aliases: ["tiktok"],
+    category: "Social",
+    icon: "🎵",
+    brandColor: "#000000",
+    inputKind: "username",
+    placeholder: "@deinname",
+    pattern: /^[A-Za-z0-9._]{2,24}$/,
+    normalize: (raw) => stripAt(trim(raw)),
+    toUrl: (input) => `https://www.tiktok.com/@${stripAt(trim(input))}`
+  },
+  {
+    id: "facebook",
+    label: "Facebook",
+    aliases: ["fb", "facebook page"],
+    category: "Social",
+    icon: "📘",
+    brandColor: "#1877F2",
+    inputKind: "url",
+    placeholder: "facebook.com/deinprofil",
+    pattern: /^https?:\/\/(www\.)?facebook\.com\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "x",
+    label: "X (Twitter)",
+    aliases: ["twitter"],
+    category: "Social",
+    icon: "X",
+    brandColor: "#000000",
+    inputKind: "username",
+    placeholder: "@deinname",
+    pattern: /^[A-Za-z0-9_]{1,15}$/,
+    normalize: (raw) => stripAt(trim(raw)),
+    toUrl: (input) => `https://x.com/${stripAt(trim(input))}`
+  },
+  {
+    id: "youtube",
+    label: "YouTube",
+    aliases: ["yt", "youtube channel"],
+    category: "Streaming",
+    icon: "▶️",
+    brandColor: "#FF0000",
+    inputKind: "url",
+    placeholder: "youtube.com/@deinname oder Kanal-URL",
+    pattern: /^https?:\/\/(www\.)?youtube\.com\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "twitch",
+    label: "Twitch",
+    aliases: ["twitch tv"],
+    category: "Streaming",
+    icon: "🎮",
+    brandColor: "#9146FF",
+    inputKind: "username",
+    placeholder: "deinname",
+    pattern: /^[A-Za-z0-9_]{4,25}$/,
+    normalize: (raw) => trim(raw),
+    toUrl: (input) => `https://twitch.tv/${trim(input)}`
+  },
+  // --- Music / DJ ---
+  {
+    id: "soundcloud",
+    label: "SoundCloud",
+    aliases: ["sc"],
+    category: "Music",
+    icon: "☁️",
+    brandColor: "#FF5500",
+    inputKind: "username",
+    placeholder: "deinname",
+    pattern: /^[A-Za-z0-9-_.]{3,40}$/,
+    normalize: (raw) => trim(raw).replace(/^https?:\/\/(www\.)?soundcloud\.com\//i, ""),
+    toUrl: (input) => `https://soundcloud.com/${trim(input)}`
+  },
+  {
+    id: "mixcloud",
+    label: "Mixcloud",
+    aliases: ["mix cloud"],
+    category: "Music",
+    icon: "📻",
+    brandColor: "#5000FF",
+    inputKind: "username",
+    placeholder: "deinname",
+    pattern: /^[A-Za-z0-9-_.]{3,40}$/,
+    normalize: (raw) => trim(raw).replace(/^https?:\/\/(www\.)?mixcloud\.com\//i, ""),
+    toUrl: (input) => `https://www.mixcloud.com/${trim(input)}/`
+  },
+  {
+    id: "hearthis",
+    label: "HearThis.at",
+    aliases: ["hearthis"],
+    category: "Music",
+    icon: "🔊",
+    brandColor: "#D61C1C",
+    inputKind: "username",
+    placeholder: "deinname",
+    pattern: /^[A-Za-z0-9-_.]{3,40}$/,
+    normalize: (raw) => trim(raw).replace(/^https?:\/\/(www\.)?hearthis\.at\//i, ""),
+    toUrl: (input) => `https://hearthis.at/${trim(input)}/`
+  },
+  {
+    id: "beatport",
+    label: "Beatport (Artist)",
+    aliases: ["beat port"],
+    category: "DJ/Booking",
+    icon: "🎧",
+    brandColor: "#A8E00F",
+    inputKind: "url",
+    placeholder: "beatport.com/artist/... oder /profile/...",
+    pattern: /^https?:\/\/(www\.)?beatport\.com\/(artist|profile)\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "residentadvisor",
+    label: "Resident Advisor",
+    aliases: ["ra", "ra.co"],
+    category: "DJ/Booking",
+    icon: "🟢",
+    brandColor: "#BADA55",
+    inputKind: "url",
+    placeholder: "ra.co/dj/deinname",
+    pattern: /^https?:\/\/(www\.)?ra\.co\/dj\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "spotify",
+    label: "Spotify (Artist)",
+    aliases: ["spotify artist"],
+    category: "Music",
+    icon: "🟢",
+    brandColor: "#1DB954",
+    inputKind: "id",
+    placeholder: "Artist-ID oder vollständige URL",
+    pattern: /^[0-9A-Za-z]{22}$|^https?:\/\/open\.spotify\.com\/artist\/[0-9A-Za-z]{22}/i,
+    normalize: (raw) => {
+      const s = trim(raw);
+      const m = s.match(/artist\/([0-9A-Za-z]{22})/);
+      return m ? m[1] : s;
+    },
+    toUrl: (input) => {
+      const id = trim(input).match(/^[0-9A-Za-z]{22}$/) ? input : input.match(/artist\/([0-9A-Za-z]{22})/)?.[1] ?? input;
+      return `https://open.spotify.com/artist/${id}`;
+    }
+  },
+  {
+    id: "applemusic",
+    label: "Apple Music",
+    aliases: ["itunes", "apple music artist"],
+    category: "Music",
+    icon: "🎵",
+    brandColor: "#FA2D48",
+    inputKind: "url",
+    placeholder: "music.apple.com/... (Artist-Link)",
+    pattern: /^https?:\/\/music\.apple\.com\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "deezer",
+    label: "Deezer (Artist)",
+    aliases: ["deezer"],
+    category: "Music",
+    icon: "🎶",
+    brandColor: "#00C7F2",
+    inputKind: "url",
+    placeholder: "deezer.com/artist/...",
+    pattern: /^https?:\/\/(www\.)?deezer\.com\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "bandcamp",
+    label: "Bandcamp",
+    aliases: ["band camp"],
+    category: "Music",
+    icon: "💿",
+    brandColor: "#629AA9",
+    inputKind: "url",
+    placeholder: "deinname.bandcamp.com",
+    pattern: /^https?:\/\/[A-Za-z0-9-]+\.bandcamp\.com(\/.*)?$/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "discogs",
+    label: "Discogs",
+    aliases: ["disc ogs"],
+    category: "Catalog",
+    icon: "📀",
+    brandColor: "#333333",
+    inputKind: "url",
+    placeholder: "discogs.com/artist/... oder /user/...",
+    pattern: /^https?:\/\/(www\.)?discogs\.com\/(artist|user)\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "mixesdb",
+    label: "MixesDB",
+    aliases: ["mixes db"],
+    category: "Catalog",
+    icon: "📂",
+    brandColor: "#FFB000",
+    inputKind: "url",
+    placeholder: "mixesdb.com/... (Profil-URL)",
+    pattern: /^https?:\/\/(www\.)?mixesdb\.com\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  },
+  {
+    id: "linkedin",
+    label: "LinkedIn",
+    aliases: ["li"],
+    category: "Social",
+    icon: "🔗",
+    brandColor: "#0A66C2",
+    inputKind: "url",
+    placeholder: "linkedin.com/in/deinname",
+    pattern: /^https?:\/\/(www\.)?linkedin\.com\/.+/i,
+    toUrl: (input) => ensureHttps(trim(input))
+  }
+];
+
+export { SOCIAL_PROVIDERS };

package/dist/pd-socialmedia/pd-socialmedia.d.ts

@@ -0,0 +1,3 @@
+import { PdSocialmedia } from './PdSocialmedia.js';
+export { PdSocialmedia };
+//# sourceMappingURL=pd-socialmedia.d.ts.map

package/dist/pd-socialmedia/pd-socialmedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-socialmedia.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/pd-socialmedia.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/pd-socialmedia/pd-socialmedia.stories.d.ts

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { SocialProvider } from './pd-socialmedia-model.js';
+import { SocialEntry } from '../types.js';
+/**
+ * Story arguments interface for pd-socialmedia component.
+ * Maps to the component's public API.
+ */
+interface PdSocialmediaArgs {
+    /** View mode (icons) or edit mode (list with delete) */
+    summary: boolean;
+    /** Social media entries */
+    items: SocialEntry[];
+    /** Provider metadata definitions */
+    providers: SocialProvider[];
+    /** Show label below icon in view mode */
+    showLabelBelowIcon: boolean;
+    /** Open links in new tab */
+    openLinksInNewTab: boolean;
+}
+/**
+ * ## pd-socialmedia
+ *
+ * Social media profiles display and editor component.
+ *
+ * ### Features
+ * - **View Mode** (`summary`): Displays social icons with optional labels below
+ * - **Edit Mode**: Suggestion box for adding providers and list with delete for removing
+ * - **Provider Injection**: Custom provider definitions can be injected via `providers` property
+ * - **Link Behavior**: Configurable to open in same or new tab
+ * - **Responsive**: Icons wrap on smaller screens
+ *
+ * ### Accessibility
+ * - View mode renders a `<ul>` list with `aria-label`
+ * - Icons are clickable links with `aria-label` per provider
+ * - Edit mode uses `<button>` elements with `aria-label` for delete actions
+ * - Focus-visible styling on delete buttons
+ */
+declare const meta: Meta<PdSocialmediaArgs>;
+export default meta;
+type Story = StoryObj<PdSocialmediaArgs>;
+/** Default view with social icons. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All view mode configurations at a glance. */
+export declare const AllVariants: Story;
+/** Many entries demonstrating wrapping behavior. */
+export declare const LongList: Story;
+/** Edit mode with suggestion box for adding and delete buttons for removing entries. */
+export declare const EditMode: Story;
+/** Injecting custom provider definitions alongside the defaults. */
+export declare const CustomProviders: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-socialmedia.stories.d.ts.map

package/dist/pd-socialmedia/pd-socialmedia.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-socialmedia.stories.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/pd-socialmedia.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,0CAA0C,CAAC;AAClD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AAEvD,OAAO,EAAoB,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAM7B;;;GAGG;AACH,UAAU,iBAAiB;IACzB,wDAAwD;IACxD,OAAO,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,oCAAoC;IACpC,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,yCAAyC;IACzC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,4BAA4B;IAC5B,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAiCD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CA6EjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,gDAAgD;AAChD,eAAO,MAAM,WAAW,EAAE,KA8CzB,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,QAAQ,EAAE,KAmCtB,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAMF,oEAAoE;AACpE,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA2F3B,CAAC"}

package/dist/pd-socialmedia.d.ts

@@ -0,0 +1,2 @@
+export * from './pd-socialmedia/pd-socialmedia'
+export {}

package/dist/pd-socialmedia.js

@@ -0,0 +1,7 @@
+import { PdSocialmedia } from './pd-socialmedia/PdSocialmedia.js';
+
+if (!customElements.get("pd-socialmedia")) {
+  customElements.define("pd-socialmedia", PdSocialmedia);
+}
+
+export { PdSocialmedia };

package/dist/pd-toast/PdToast.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class PdToast extends LitElement {
+    private _message;
+    /** Whether the current toast is an error */
+    isError: boolean;
+    /** Whether the current toast is a success */
+    isSuccess: boolean;
+    private _queue;
+    private _isProcessing;
+    private _autoCloseTimer?;
+    private _boundHandleToast;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+    private _onCloseKeyDown;
+    private _handleToast;
+    private _processQueue;
+    private _showToast;
+    private _close;
+    private _clearTimer;
+}
+//# sourceMappingURL=PdToast.d.ts.map

package/dist/pd-toast/PdToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdToast.d.ts","sourceRoot":"","sources":["../../src/pd-toast/PdToast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAqB5C,qBACa,OAAQ,SAAQ,UAAU;IAK5B,OAAO,CAAC,QAAQ,CAAM;IAE/B,4CAA4C;IAE5C,OAAO,UAAS;IAEhB,6CAA6C;IAE7C,SAAS,UAAS;IAMlB,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,iBAAiB,CAAgC;IAMzD,MAAM,CAAC,MAAM,0BAsFX;IAMF,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAa5B,MAAM;IAeN,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,WAAW;CAMpB"}

package/dist/pd-toast/PdToast.js

@@ -0,0 +1,222 @@
+import { css, LitElement, html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import { pdIcons } from '@progressive-development/pd-icon';
+import { toastBus } from '../toast-bus/toast-bus.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_DURATION = 6e3;
+const ANIMATION_DURATION = 300;
+let PdToast = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._message = "";
+    this.isError = false;
+    this.isSuccess = false;
+    // ---------------------------------------------------------------------------
+    // Private
+    // ---------------------------------------------------------------------------
+    this._queue = [];
+    this._isProcessing = false;
+    this._boundHandleToast = this._handleToast.bind(this);
+  }
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-live", "polite");
+    toastBus.addEventListener("toast", this._boundHandleToast);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearTimer();
+    toastBus.removeEventListener(
+      "toast",
+      this._boundHandleToast
+    );
+  }
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  render() {
+    return html`
+      <div class="content" part="content">${this._message}</div>
+      <pd-icon
+        icon=${pdIcons.ICON_CLOSE}
+        class="close-icon"
+        tabindex="0"
+        role="button"
+        aria-label="${msg("Schließen", { id: "pdPage.toast.ariaClose" })}"
+        @click=${this._close}
+        @keydown=${this._onCloseKeyDown}
+      ></pd-icon>
+    `;
+  }
+  _onCloseKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._close();
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Queue Processing
+  // ---------------------------------------------------------------------------
+  _handleToast(event) {
+    const detail = event.detail;
+    this._queue.push(detail);
+    this._processQueue();
+  }
+  _processQueue() {
+    if (this._isProcessing || this._queue.length === 0) {
+      return;
+    }
+    const item = this._queue.shift();
+    this._showToast(item);
+  }
+  _showToast(detail) {
+    this._isProcessing = true;
+    this._message = detail.message;
+    this.isError = detail.type === "error";
+    this.isSuccess = detail.type === "success";
+    if (this.isError) {
+      this.setAttribute("role", "alert");
+    } else {
+      this.removeAttribute("role");
+    }
+    this.classList.add("visible");
+    const duration = detail.duration ?? DEFAULT_DURATION;
+    if (duration > 0) {
+      this._autoCloseTimer = window.setTimeout(() => {
+        this._close();
+      }, duration);
+    }
+  }
+  _close() {
+    this._clearTimer();
+    this.classList.remove("visible");
+    this._isProcessing = false;
+    window.setTimeout(() => {
+      this._processQueue();
+    }, ANIMATION_DURATION);
+  }
+  _clearTimer() {
+    if (this._autoCloseTimer !== void 0) {
+      window.clearTimeout(this._autoCloseTimer);
+      this._autoCloseTimer = void 0;
+    }
+  }
+};
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+PdToast.styles = css`
+    :host {
+      --pd-icon-size: 1rem;
+      --_toast-transition-duration: 300ms;
+
+      /* Mobile first: smaller margins */
+      --_toast-margin: 12px;
+
+      position: fixed;
+      bottom: var(--pd-toast-bottom, var(--_toast-margin));
+      left: var(--pd-toast-left, var(--_toast-margin));
+      width: calc(100% - var(--_toast-margin) * 2);
+      max-width: var(--pd-toast-max-width, 400px);
+
+      z-index: var(--pd-toast-z-index, 105);
+
+      background: var(--pd-toast-bg, var(--app-primary-color, #ebcf57));
+      color: var(--pd-toast-color, #0a3a48);
+      padding: var(--pd-toast-padding, 0.6rem);
+      padding-right: calc(var(--pd-toast-padding, 0.6rem) + 1.4rem);
+      border-radius: var(
+        --pd-toast-border-radius,
+        var(--item-border-radius, 2px)
+      );
+      box-shadow: var(--pd-toast-shadow, 3px 5px 5px 3px lightgrey);
+
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      transform: translateX(-150%);
+      opacity: 0;
+      transition:
+        transform var(--_toast-transition-duration) ease-out,
+        opacity var(--_toast-transition-duration) ease-out;
+
+      pointer-events: none;
+    }
+
+    /* Tablet and up: more spacing */
+    @media (min-width: 768px) {
+      :host {
+        --_toast-margin: 30px;
+      }
+    }
+
+    :host([isError]) {
+      background: var(--pd-toast-error-bg, darkred);
+      color: var(--pd-toast-error-color, #fff);
+    }
+
+    :host([isSuccess]) {
+      background: var(--pd-toast-success-bg, green);
+      color: var(--pd-toast-success-color, #fff);
+    }
+
+    :host(.visible) {
+      transform: translateX(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .content {
+      flex: 1;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+
+    .close-icon {
+      position: absolute;
+      cursor: pointer;
+      right: var(--pd-spacing-sm, 0.5rem);
+      top: var(--pd-spacing-sm, 0.5rem);
+    }
+
+    .close-icon:focus {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+      border-radius: var(--pd-radius-sm, 2px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        --_toast-transition-duration: 0ms;
+      }
+    }
+  `;
+__decorateClass([
+  state()
+], PdToast.prototype, "_message", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdToast.prototype, "isError", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdToast.prototype, "isSuccess", 2);
+PdToast = __decorateClass([
+  localized()
+], PdToast);
+
+export { PdToast };

package/dist/pd-toast/pd-toast.d.ts

@@ -0,0 +1,3 @@
+import { PdToast } from './PdToast.js';
+export { PdToast };
+//# sourceMappingURL=pd-toast.d.ts.map

package/dist/pd-toast/pd-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-toast.d.ts","sourceRoot":"","sources":["../../src/pd-toast/pd-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/pd-toast/pd-toast.stories.d.ts

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { ToastType } from '../toast-bus/toast-bus.js';
+/**
+ * Story arguments interface for pd-toast component.
+ * Maps to the toastBus API since pd-toast has no direct properties.
+ */
+interface PdToastArgs {
+    /** Message to display */
+    message: string;
+    /** Toast type (success, error, info) */
+    type: ToastType;
+    /** Duration in ms (-1 for persistent, no auto-close) */
+    duration: number;
+}
+/**
+ * ## pd-toast
+ *
+ * Toast notification component with internal queue management, triggered via the global toastBus singleton.
+ *
+ * ### Features
+ * - Three toast types: success (green), error (red), info (yellow)
+ * - Internal queue management for sequential display of multiple toasts
+ * - Auto-close with configurable duration (errors are persistent by default)
+ * - Manual close via X icon (click or keyboard)
+ * - Slide-in animation with prefers-reduced-motion support
+ * - Responsive positioning (smaller margins on mobile)
+ * - Global singleton pattern via toastBus EventTarget
+ *
+ * ### Accessibility
+ * - Uses `aria-live="polite"` for screen reader announcements
+ * - Error toasts use `role="alert"` for immediate announcement
+ * - Close button has `role="button"` and `aria-label`
+ * - Keyboard support: Tab to focus close button, Enter/Space to close
+ * - Respects `prefers-reduced-motion` media query
+ */
+declare const meta: Meta<PdToastArgs>;
+export default meta;
+type Story = StoryObj<PdToastArgs>;
+/** Interactive demo — click buttons to trigger different toast types. */
+export declare const Default: Story;
+/** All three toast types side by side — click each button to see the corresponding toast. */
+export declare const AllTypes: Story;
+/** Demonstrates the internal queue — multiple toasts are shown sequentially. */
+export declare const QueueDemo: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-toast.stories.d.ts.map

package/dist/pd-toast/pd-toast.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-toast.stories.d.ts","sourceRoot":"","sources":["../../src/pd-toast/pd-toast.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAY,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA2D3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,yEAAyE;AACzE,eAAO,MAAM,OAAO,EAAE,KAyGrB,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,SAAS,EAAE,KAmCvB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAoH3B,CAAC"}

package/dist/pd-toast.d.ts

@@ -0,0 +1,2 @@
+export * from './pd-toast/pd-toast'
+export {}

package/dist/pd-toast.js

@@ -0,0 +1,8 @@
+import { PdToast } from './pd-toast/PdToast.js';
+
+const tag = "pd-toast";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdToast);
+}
+
+export { PdToast };

package/dist/stories/01_index.stories.d.ts

@@ -1,5 +1,37 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-declare const _default: Meta;
-export default _default;
-export declare const PageExamples: StoryObj;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdMenuItem } from '../types.js';
+/**
+ * Story arguments interface for the pd-page examples.
+ * Combines arguments from multiple pd-page sub-components.
+ */
+interface PageExampleArgs {
+    /** Main navigation items */
+    menuItems: PdMenuItem[];
+    /** Top menu items (profile, settings, etc.) */
+    topMenuItems: PdMenuItem[];
+    /** Whether the teaser/hero section is collapsed */
+    teaserClosed: boolean;
+}
+/**
+ * ## pd-page / examples
+ *
+ * Full-page composition examples showing how pd-page sub-components work together.
+ *
+ * These examples demonstrate realistic page layouts combining:
+ * - **pd-menu**: Navigation header with logo, menu items, and top actions
+ * - **pd-contact-us**: Contact section with address card and form
+ * - **pd-footer**: Footer with legal links and version info
+ *
+ * Each story shows a different page configuration to illustrate
+ * the flexibility of the pd-page component system.
+ */
+declare const meta: Meta<PageExampleArgs>;
+export default meta;
+type Story = StoryObj<PageExampleArgs>;
+/** Complete page layout with menu, content sections, contact form, and footer. */
+export declare const FullPage: Story;
+/** Page layout with the menu teaser/hero section collapsed. */
+export declare const TeaserClosed: Story;
+/** Minimal page with just menu and footer — no contact section. */
+export declare const MinimalPage: Story;
 //# sourceMappingURL=01_index.stories.d.ts.map