@progressive-development/pd-page 0.9.2 → 1.0.0

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

@@ -1,20 +1,62 @@
 import { TemplateResult } from 'lit';
-import { Meta, StoryFn } from '@storybook/web-components';
-import { PdMenu } from './pd-menu.js';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdMenuItem } from '../types.js';
+import { ButtonData } from '@progressive-development/pd-forms';
+/**
+ * Story arguments interface for pd-menu component.
+ * Maps to the component's public API.
+ */
+interface PdMenuArgs {
+    /** Main menu items */
+    menuItems: PdMenuItem[];
+    /** Top menu items (profile, settings, etc.) */
+    topMenuItems: PdMenuItem[];
+    /** Available language options (ButtonData with text and value) */
+    locales: ButtonData[];
+    /** Currently selected language (value from ButtonData) */
+    selectedLocale: string;
+    /** Disable responsive burger menu */
+    noBurgerMenu: boolean;
+    /** Custom logo slot content */
+    logo?: TemplateResult;
+}
 export declare const ticomiLogo: TemplateResult<1>;
-declare const _default: Meta<PdMenu>;
-export default _default;
-type PdMenuArgs = Partial<PdMenu> & {
-    color?: string;
-    logo?: TemplateResult<1>;
-    menuColor: string;
-    noBurger: boolean;
-    menuHeight: number;
-};
-export declare const BasicColor1: StoryFn<PdMenuArgs>;
-export declare const BasicColor2: StoryFn<PdMenuArgs>;
-export declare const WithLogo: StoryFn<PdMenuArgs>;
-export declare const WithTopItems: StoryFn<PdMenuArgs>;
-export declare const WithoutBurger: StoryFn<PdMenuArgs>;
-export declare const SmallTopMenuWithoutBurger: StoryFn<PdMenuArgs>;
+/**
+ * ## pd-menu
+ *
+ * Responsive application navigation menu with burger menu, language selector, and scroll-to-section support.
+ *
+ * ### Features
+ * - Configurable main menu items with scroll-to-section navigation
+ * - Top menu bar for secondary actions (profile, settings)
+ * - Responsive burger menu for mobile devices (collapses below 768px)
+ * - Built-in language selector via pd-button-select-group
+ * - Logo slot with click-to-navigate support
+ * - Active section highlighting based on scroll position
+ * - Full keyboard accessibility (Tab, Enter, Space, Escape)
+ *
+ * ### Accessibility
+ * - Uses `<nav>` with `aria-label` for navigation landmark
+ * - Menu items have `role="menuitem"` and `tabindex="0"`
+ * - Burger menu button has `aria-expanded` and `aria-controls`
+ * - Escape key closes the burger menu
+ * - Focus-visible styling for keyboard users
+ */
+declare const meta: Meta<PdMenuArgs>;
+export default meta;
+type Story = StoryObj<PdMenuArgs>;
+/** Default menu with basic navigation items. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Menu with a custom logo in the slotLogo slot. */
+export declare const WithLogo: Story;
+/** Menu with logo, top items (profile), and language selector. */
+export declare const FullFeatured: Story;
+/** Menu with noBurgerMenu — always shows full desktop layout regardless of screen width. */
+export declare const WithoutBurger: Story;
+/** Compact top-only menu without main navigation — useful for secondary page headers. */
+export declare const CompactTopMenu: Story;
+/** Overview of different menu configurations at a glance. */
+export declare const AllVariants: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-menu.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-menu.stories.d.ts","sourceRoot":"","sources":["../../src/pd-menu/pd-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,UAAU,mBAsEtB,CAAC;wBAYG,IAAI,CAAC,MAAM,CAAC;AAVjB,wBAUkB;AAElB,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AA8BF,eAAO,MAAM,WAAW,qBAAoB,CAAC;AAW7C,eAAO,MAAM,WAAW,qBAAoB,CAAC;AAM7C,eAAO,MAAM,QAAQ,qBAAoB,CAAC;AAO1C,eAAO,MAAM,YAAY,qBAAoB,CAAC;AAU9C,eAAO,MAAM,aAAa,qBAAoB,CAAC;AAM/C,eAAO,MAAM,yBAAyB,qBAAoB,CAAC"}
+{"version":3,"file":"pd-menu.stories.d.ts","sourceRoot":"","sources":["../../src/pd-menu/pd-menu.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,cAAc,CAAC;AAMtB;;;GAGG;AACH,UAAU,UAAU;IAClB,sBAAsB;IACtB,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,+CAA+C;IAC/C,YAAY,EAAE,UAAU,EAAE,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,0DAA0D;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,YAAY,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAMD,eAAO,MAAM,UAAU,mBAiEtB,CAAC;AAiCF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA4E1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAMlC,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAMF,kEAAkE;AAClE,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,aAAa,EAAE,KA+B3B,CAAC;AAMF,yFAAyF;AACzF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA2F3B,CAAC"}

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

@@ -0,0 +1,56 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+import { SocialProvider } from './pd-socialmedia-model';
+import { SocialEntry } from '../types';
+/**
+ * Social media profiles display and editor component.
+ *
+ * @summary Social media display (icons) and editor (add/remove) component.
+ *
+ * @tagname pd-socialmedia
+ *
+ * @event items-change - Fired when items are added or removed.
+ *
+ * @cssprop --pd-gap - Icon spacing. Default: `0.5rem`.
+ * @cssprop --pd-sc-text-muted - Muted text color. Default: `var(--pd-default-disabled-col)`.
+ * @cssprop --pd-sc-row-bg-odd-col - Odd row background. Default: `var(--pd-default-bg-light-col)`.
+ * @cssprop --pd-sc-row-bg-even-col - Even row background. Default: `var(--pd-default-bg-dark-col)`.
+ * @cssprop --pd-sc-row-bg-col-hover - Row hover background. Default: `var(--pd-default-lightest-col)`.
+ * @cssprop --pd-sc-edit-provider-col - Provider label color. Default: `var(--pd-default-font-title-col)`.
+ * @cssprop --pd-sc-edit-value-col - Value text color. Default: `var(--pd-default-font-input-col)`.
+ */
+export declare class PdSocialmedia extends LitElement {
+    /** View mode (true) shows icons, edit mode (false) shows add/remove list. */
+    summary: boolean;
+    /** Initial social media entries. */
+    initItems: SocialEntry[];
+    /** Provider metadata definitions (injectable from outside). */
+    providers: SocialProvider[];
+    /** Show provider label below icon in view mode. */
+    showLabelBelowIcon: boolean;
+    /** Open links in same tab instead of new tab. */
+    openLinksInSameTab: boolean;
+    /** @ignore */
+    private _pendingAddProvider;
+    /** @ignore */
+    private _currentInputValue;
+    /** @ignore */
+    _editItems: SocialEntry[];
+    /** @ignore */
+    private _suggestForm;
+    static styles: import('lit').CSSResult;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    addItem(entry: SocialEntry): void;
+    removeIndex(index: number): void;
+    get value(): SocialEntry[];
+    protected render(): TemplateResult<1>;
+    protected renderView(): TemplateResult<1>;
+    protected renderEdit(): TemplateResult<1>;
+    private _renderAddRow;
+    private _searchSocialProviders;
+    private _openAddSuggestItem;
+    private _closeAddSuggestedItem;
+    private _findProvider;
+    private _toUrl;
+    private emitChange;
+}
+//# sourceMappingURL=PdSocialmedia.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdSocialmedia.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/PdSocialmedia.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAoB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG1E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,6EAA6E;IAE7E,OAAO,UAAS;IAEhB,oCAAoC;IAEpC,SAAS,EAAE,WAAW,EAAE,CAAM;IAE9B,+DAA+D;IAE/D,SAAS,EAAE,cAAc,EAAE,CAAoB;IAE/C,mDAAmD;IAEnD,kBAAkB,UAAS;IAE3B,iDAAiD;IAEjD,kBAAkB,UAAS;IAE3B,cAAc;IAEd,OAAO,CAAC,mBAAmB,CAA+B;IAE1D,cAAc;IAEd,OAAO,CAAC,kBAAkB,CAAuB;IAEjD,cAAc;IAEd,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmC;IAEvD,MAAM,CAAC,MAAM,0BA0IX;IAEF,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOvD,OAAO,CAAC,KAAK,EAAE,WAAW;IAM1B,WAAW,CAAC,KAAK,EAAE,MAAM;IAOhC,IAAI,KAAK,kBAER;IAGD,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,UAAU;IA+CpB,SAAS,CAAC,UAAU;IAwDpB,OAAO,CAAC,aAAa;YA+DP,sBAAsB;IAoBpC,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,sBAAsB,CAG5B;IAGF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,UAAU;CASnB"}

package/dist/pd-socialmedia/PdSocialmedia.js

@@ -0,0 +1,426 @@
+import { css, LitElement, html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import '@progressive-development/pd-forms/pd-suggestion-box';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-button';
+import '@progressive-development/pd-forms/pd-input';
+import '@progressive-development/pd-icon/pd-icon';
+import { SOCIAL_PROVIDERS } from './pd-socialmedia-model.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+
+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;
+};
+let PdSocialmedia = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.summary = false;
+    this.initItems = [];
+    this.providers = SOCIAL_PROVIDERS;
+    this.showLabelBelowIcon = false;
+    this.openLinksInSameTab = false;
+    this._pendingAddProvider = null;
+    this._currentInputValue = null;
+    this._editItems = [];
+    this._openAddSuggestItem = (e) => {
+      const metaProvider = e.detail;
+      const providerId = metaProvider?.id;
+      if (!providerId) return;
+      this._pendingAddProvider = metaProvider;
+      this._currentInputValue = null;
+    };
+    this._closeAddSuggestedItem = (_e) => {
+      this._pendingAddProvider = null;
+      this._currentInputValue = null;
+    };
+  }
+  willUpdate(_changedProperties) {
+    if (_changedProperties.has("initItems")) {
+      this._editItems = [...this.initItems || []];
+    }
+  }
+  // --- Public API helpers ---
+  addItem(entry) {
+    const next = [...this._editItems, entry];
+    this._editItems = next;
+    this.emitChange();
+  }
+  removeIndex(index) {
+    const next = this._editItems.slice();
+    next.splice(index, 1);
+    this._editItems = next;
+    this.emitChange();
+  }
+  get value() {
+    return this._editItems;
+  }
+  // --- Render ---
+  render() {
+    return this.summary ? this.renderView() : this.renderEdit();
+  }
+  renderView() {
+    const items = this._editItems ?? [];
+    const empty = items.length === 0;
+    return html`
+      <ul
+        class="view-list"
+        aria-label="${msg("Social-Media-Profile", {
+      id: "pd.socialmedia.aria.label"
+    })}"
+      >
+        ${empty ? html`<li>
+              <span
+                >${msg("Keine Einträge", { id: "pd.socialmedia.empty" })}</span
+              >
+            </li>` : items.map((item) => {
+      const provider = this._findProvider(item.providerId);
+      const label = provider?.label ?? item.label ?? item.providerId;
+      const href = this._toUrl(provider, item.value);
+      const title = `${label}: ${href}`;
+      const content = html`
+                <div class="icon-tile" title=${title}>
+                  ${provider?.icon ?? "link"}
+                  ${this.showLabelBelowIcon ? html`<div class="icon-label">${label}</div>` : nothing}
+                </div>
+              `;
+      return html` <li>
+                ${href ? html` <a
+                      href=${href}
+                      target=${this.openLinksInSameTab ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      aria-label=${label}
+                      >${content}</a
+                    >` : html`<div class="icon-tile" aria-label=${label}>
+                      ${content}
+                    </div>`}
+              </li>`;
+    })}
+      </ul>
+    `;
+  }
+  renderEdit() {
+    return html`
+      <div class="edit">
+        <div>
+          <pd-form-row>
+            <pd-suggestion-box
+              id="suggesBoxId"
+              span="full"
+              label="${msg("Neuer Eintrag", {
+      id: "pd.socialmedia.new.entry"
+    })}"
+              minCharsToSearch="1"
+              placeholder="${msg("Socialmedia eingeben...", {
+      id: "pd.socialmedia.placeholder"
+    })}"
+              .callFunction="${this._searchSocialProviders.bind(this)}"
+              @element-selected="${this._openAddSuggestItem}"
+              @element-unselected="${this._closeAddSuggestedItem}"
+              @pd-form-element-change="${(e) => e.stopPropagation()}"
+              @pd-form-element-register="${(e) => e.stopPropagation()}"
+              @pd-form-element-unregister="${(e) => e.stopPropagation()}"
+            ></pd-suggestion-box>
+          </pd-form-row>
+          ${this._pendingAddProvider !== null ? this._renderAddRow() : ""}
+        </div>
+
+        <div class="edit-list">
+          ${this._editItems?.map((item, i) => {
+      const meta = this._findProvider(item.providerId);
+      const label = meta?.label ?? item.providerId;
+      return html`
+              <div class="row">
+                <div class="provider">
+                  ${meta?.icon ?? "link"}<span>${label}</span>
+                </div>
+                <div class="value">${item.value}</div>
+                <button
+                  class="btn-icon danger"
+                  @click=${() => this.removeIndex(i)}
+                  aria-label="${msg("Eintrag löschen", {
+        id: "pd.socialmedia.delete"
+      })}"
+                >
+                  <pd-icon icon="${pdIcons.ICON_DELETE_NEW}"></pd-icon>
+                </button>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+  _renderAddRow() {
+    const provider = this._pendingAddProvider;
+    if (!provider) return html`<p>! Missing Provider !</p>`;
+    return html`
+      <pd-form-row class="no-padding">
+        <pd-input
+          id="scValueId"
+          maxlength="250"
+          span="full"
+          label="${`${provider.icon} ${provider.label}`}"
+          helperTxt="${`Pattern: ${provider.pattern}`}"
+          placeholder="${provider.placeholder || `Eingabe ${provider.inputKind}`}"
+          valueName="providerValue"
+          @pd-form-element-change="${(e) => {
+      this._currentInputValue = e.detail.value;
+      e.stopPropagation();
+    }}"
+          @pd-form-element-register="${(e) => e.stopPropagation()}"
+          @pd-form-element-unregister="${(e) => e.stopPropagation()}"
+          required
+        ></pd-input>
+      </pd-form-row>
+      <div class="current-input-url">
+        URL:
+        <a
+          target="_blank"
+          href="${this._toUrl(provider, this._currentInputValue || "") || ""}"
+          >${this._toUrl(provider, this._currentInputValue || "")}</a
+        >
+      </div>
+
+      <div class="add-button-group">
+        <pd-button
+          icon="${pdIcons.ICON_CLOSE}"
+          text="${msg("Abbrechen", { id: "pd.socialmedia.cancel" })}"
+          @button-clicked="${() => {
+      this._currentInputValue = null;
+      this._pendingAddProvider = null;
+      this._suggestForm?.reset();
+    }}"
+        ></pd-button>
+        <pd-button
+          icon="${pdIcons.ICON_SYNC}"
+          text="${msg("Speichern", { id: "pd.socialmedia.save" })}"
+          @button-clicked="${() => {
+      this.addItem({
+        providerId: this._pendingAddProvider?.id || "",
+        value: this._currentInputValue || ""
+      });
+      this._currentInputValue = null;
+      this._pendingAddProvider = null;
+      this._suggestForm?.reset();
+    }}"
+        ></pd-button>
+      </div>
+    `;
+  }
+  // --- Suggest Box Helper
+  async _searchSocialProviders(input) {
+    const includedIds = this._editItems.map((item) => item.providerId);
+    return Promise.resolve(
+      SOCIAL_PROVIDERS.filter(
+        (v) => !includedIds.includes(v.id) && (v.label.toLowerCase().includes(input.toLowerCase()) || v.category.toLowerCase().includes(input.toLowerCase()) || v.aliases?.join()?.toLowerCase().includes(input.toLowerCase()))
+      ).map((e) => ({
+        id: e.id,
+        name: `${e.icon || ""} ${e.label || "--"}`,
+        subInfo: html`<b><em>${e.category || "--"}:</em></b> ${e.aliases?.join(
+          ","
+        ) || e.id}`,
+        objectValue: e
+      }))
+    );
+  }
+  // --- Private helpers ---
+  _findProvider(id) {
+    if (!id) return void 0;
+    return this.providers?.find((p) => p.id === id);
+  }
+  _toUrl(meta, raw) {
+    const v = raw?.trim();
+    if (!v) return null;
+    if (meta?.toUrl) return meta.toUrl(v);
+    if (/^https?:\/\//i.test(v)) return v;
+    return null;
+  }
+  emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("items-change", {
+        detail: { items: this._editItems },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+PdSocialmedia.styles = css`
+    :host {
+      display: block;
+    }
+
+    /* View: icons row */
+    .view-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--pd-gap, 0.5rem);
+      align-items: center;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .view-list li:hover .icon-tile .icon-label {
+      color: var(--pd-default-hover-col);
+    }
+
+    .icon-tile {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.25rem;
+      padding: 0.25rem;
+      min-width: 2.25rem;
+    }
+
+    .icon-tile a,
+    .icon-tile button[role="link"] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+      outline: none;
+      border: none;
+      background: none;
+      cursor: pointer;
+    }
+
+    .icon-label {
+      font-size: 0.75rem;
+      line-height: 1;
+      color: var(--pd-sc-text-muted, var(--pd-default-disabled-col));
+      text-align: center;
+      max-width: 6rem;
+    }
+
+    /* Edit: list */
+    .edit {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .edit-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 0;
+      padding: 0 var(--pd-spacing-xs);
+      border-radius: var(--pd-radius-md);
+      max-width: 500px;
+    }
+
+    .edit-list > .row:nth-child(odd) {
+      background: var(--pd-sc-row-bg-odd-col, var(--pd-default-bg-light-col));
+    }
+
+    .edit-list > .row:nth-child(even) {
+      background: var(--pd-sc-row-bg-even-col, var(--pd-default-bg-dark-col));
+    }
+
+    .edit-list > .row:hover {
+      background: var(--pd-sc-row-bg-col-hover, var(--pd-default-lightest-col));
+    }
+
+    .provider {
+      font-family: var(--pd-default-font-title-family);
+      color: var(--pd-sc-edit-provider-col, var(--pd-default-font-title-col));
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-width: 10rem;
+    }
+
+    .value {
+      font-family: var(--pd-default-font-input-family);
+      font-size: 0.95rem;
+      color: var(--pd-sc-edit-value-col, var(--pd-default-font-input-col));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .btn-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      border: none;
+      background: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+    }
+
+    .btn-icon:hover {
+      background: var(--pd-surface-200, rgba(0, 0, 0, 0.05));
+    }
+
+    .danger {
+      --pd-icon-col: var(--pd-default-error-col, #c0392b);
+    }
+
+    .btn-icon:focus-visible {
+      outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+      outline-offset: 2px;
+    }
+
+    .current-input-url {
+      color: var(--pd-sc-text-muted, var(--pd-default-disabled-col));
+      padding-top: 0.2rem;
+      font-size: 1rem;
+    }
+
+    .add-button-group {
+      padding-top: 0.5rem;
+      --pd-button-font-size: 1rem;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdSocialmedia.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Array })
+], PdSocialmedia.prototype, "initItems", 2);
+__decorateClass([
+  property({ type: Array })
+], PdSocialmedia.prototype, "providers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSocialmedia.prototype, "showLabelBelowIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSocialmedia.prototype, "openLinksInSameTab", 2);
+__decorateClass([
+  state()
+], PdSocialmedia.prototype, "_pendingAddProvider", 2);
+__decorateClass([
+  state()
+], PdSocialmedia.prototype, "_currentInputValue", 2);
+__decorateClass([
+  state()
+], PdSocialmedia.prototype, "_editItems", 2);
+__decorateClass([
+  query("#suggesBoxId")
+], PdSocialmedia.prototype, "_suggestForm", 2);
+PdSocialmedia = __decorateClass([
+  localized()
+], PdSocialmedia);
+
+export { PdSocialmedia };

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

@@ -0,0 +1,16 @@
+export type ProviderInputKind = "username" | "url" | "id";
+export interface SocialProvider {
+    id: string;
+    label: string;
+    aliases?: string[];
+    category: "Social" | "Music" | "Streaming" | "DJ/Booking" | "Catalog";
+    icon: string;
+    brandColor?: string;
+    inputKind: ProviderInputKind;
+    placeholder?: string;
+    pattern?: RegExp;
+    toUrl: (input: string) => string;
+    normalize?: (raw: string) => string;
+}
+export declare const SOCIAL_PROVIDERS: SocialProvider[];
+//# sourceMappingURL=pd-socialmedia-model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-socialmedia-model.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/pd-socialmedia-model.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEjC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAiP5C,CAAC"}