@progressive-development/pd-content 0.9.1 → 1.0.0

package/dist/pd-edit-content/PdEditContent.js

@@ -1,6 +1,6 @@
-import { html, LitElement, css } from 'lit';
+import { html, LitElement, css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import { msg } from '@lit/localize';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,6 +15,7 @@ const editIcon = html`<svg
   class="edit"
   viewBox="0 0 19 19"
   xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
 >
   <g>
     <path
@@ -41,8 +42,6 @@ const _PdEditContent = class _PdEditContent extends LitElement {
   }
   static {
     this.styles = [
-      PdColorStyles,
-      PdFontStyles,
       css`
       :host {
         display: block;
@@ -102,6 +101,12 @@ const _PdEditContent = class _PdEditContent extends LitElement {
         --edit-fill-color: var(--pd-default-font-link-col-hover);
       }
 
+      a:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm, 2px);
+      }
+
       .edit {
         width: 1.1em;
       }
@@ -149,7 +154,7 @@ const _PdEditContent = class _PdEditContent extends LitElement {
               <div class="circle">
                 <span class="step-number">${this.stepNumber}</span>
               </div>
-            ` : null}
+            ` : nothing}
         <h4>${this.contentTitle}</h4>
       </div>
       <div>
@@ -162,19 +167,31 @@ const _PdEditContent = class _PdEditContent extends LitElement {
                     </div>`
     )}
               </div>
-            ` : null}
+            ` : nothing}
         <slot></slot>
         <div class="link-row">
           ${!this.editDisabled ? html`
-                <a @click="${this._editContent}">
+                <a
+                  @click="${this._editContent}"
+                  @keydown="${this._onLinkKeyDown}"
+                  role="button"
+                  tabindex="0"
+                >
                   <div class="link-item">
-                    ${editIcon} Bewerk ${this.contentTitle}
+                    ${editIcon} ${msg("Edit", { id: "pd.edit.content.edit" })}
+                    ${this.contentTitle}
                   </div>
                 </a>
-              ` : null}
+              ` : nothing}
           ${this.editLinks.map(
       (link) => html`
-              <a data-link="${link.key}" @click="${this._editContent}">
+              <a
+                data-link="${link.key}"
+                @click="${this._editContent}"
+                @keydown="${this._onLinkKeyDown}"
+                role="button"
+                tabindex="0"
+              >
                 <div class="link-item">
                   ${_PdEditContent._getLinkLogo(link)} ${link.txt}
                 </div>
@@ -200,6 +217,12 @@ const _PdEditContent = class _PdEditContent extends LitElement {
       })
     );
   }
+  _onLinkKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._editContent(e);
+    }
+  }
 };
 __decorateClass([
   property({ type: Number })

package/dist/pd-edit-content/pd-edit-content.stories.d.ts

@@ -1,11 +1,55 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn<any>;
-export declare const WithEditLinks: StoryFn<any>;
-export declare const EditDisabled: StoryFn<any>;
-export declare const WithoutStepNumber: StoryFn<any>;
-export declare const CustomSlotContent: StoryFn<any>;
-export declare const EditContent: () => import('lit').TemplateResult<1>;
-export declare const NumberEditContent: () => import('lit').TemplateResult<1>;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdEditContentDataEntry, PdEditLink } from '../types.js';
+/**
+ * Story arguments interface for pd-edit-content component.
+ * Maps to the component's public API.
+ */
+interface PdEditContentArgs {
+    /** Step number displayed in circle (optional) */
+    stepNumber?: number;
+    /** Title of the content section */
+    contentTitle: string;
+    /** Data entries to display as label-value pairs */
+    data: PdEditContentDataEntry[];
+    /** Edit links displayed below the content */
+    editLinks: PdEditLink[];
+    /** Whether the main edit button is disabled */
+    editDisabled: boolean;
+}
+/**
+ * ## pd-edit-content
+ *
+ * A content card component for displaying editable data sections, commonly used in wizard flows.
+ *
+ * ### Features
+ * - Optional numbered step badge for wizard flows
+ * - Data display as label-value pairs from a data array
+ * - Configurable edit action links with icons
+ * - Default slot for custom additional content
+ * - Edit control: can disable all editing entirely
+ * - Localized "Edit" label via `@lit/localize`
+ *
+ * ### Accessibility
+ * - Edit links use `role="button"` with `tabindex="0"` and respond to Enter/Space
+ * - Focus-visible outline on focused interactive elements
+ * - Decorative edit icons have `aria-hidden="true"`
+ * - Step number badge provides visual context for wizard flows
+ */
+declare const meta: Meta<PdEditContentArgs>;
+export default meta;
+type Story = StoryObj<PdEditContentArgs>;
+/** Default edit-content with step number and data. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All edit-content configurations at a glance. */
+export declare const AllVariants: Story;
+/** Edit-content with additional action links below the data. */
+export declare const WithEditLinks: Story;
+/** Edit-content with custom HTML provided via the default slot. */
+export declare const WithSlotContent: Story;
+/** Multiple edit-content cards arranged in a pd-box-view grid. */
+export declare const InGridLayout: Story;
+/** Sequential numbered step cards for wizard flows. */
+export declare const NumberedSteps: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-edit-content.stories.d.ts.map

package/dist/pd-edit-content/pd-edit-content.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-edit-content.stories.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/pd-edit-content.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,sBAAsB,CAAC;wBASzB,IAAI;AAPT,wBAOU;AA+FV,eAAO,MAAM,OAAO,cAAoB,CAAC;AASzC,eAAO,MAAM,aAAa,cAAoB,CAAC;AAS/C,eAAO,MAAM,YAAY,cAAoB,CAAC;AAS9C,eAAO,MAAM,iBAAiB,cAAoB,CAAC;AAQnD,eAAO,MAAM,iBAAiB,cAAoB,CAAC;AAenD,eAAO,MAAM,WAAW,uCAsDvB,CAAC;AAGF,eAAO,MAAM,iBAAiB,uCA0B7B,CAAC"}
+{"version":3,"file":"pd-edit-content.stories.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/pd-edit-content.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,+BAA+B,CAAC;AAMvC;;;GAGG;AACH,UAAU,iBAAiB;IACzB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,EAAE,sBAAsB,EAAE,CAAC;IAC/B,6CAA6C;IAC7C,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,+CAA+C;IAC/C,YAAY,EAAE,OAAO,CAAC;CACvB;AAqBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAqFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,sFAAsF;AACtF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,mDAAmD;AACnD,eAAO,MAAM,WAAW,EAAE,KA2DzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAMF,mEAAmE;AACnE,eAAO,MAAM,eAAe,EAAE,KAqC7B,CAAC;AAMF,kEAAkE;AAClE,eAAO,MAAM,YAAY,EAAE,KAgD1B,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA2E3B,CAAC"}

package/dist/pd-loading-state/PdLoadingState.d.ts

@@ -0,0 +1,64 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * Sub-task item for loading state progress tracking.
+ */
+export interface LoadingSubTask {
+    /** Unique identifier for the sub-task */
+    actionKey: string;
+    /** Whether the sub-task is completed */
+    completed: boolean;
+    /** Display text for the sub-task */
+    loadingTxt: string;
+}
+/**
+ * Loading state configuration object.
+ */
+export interface LoadingState {
+    /** Timestamp when loading started */
+    creation?: Date;
+    /** Whether loading is active */
+    isLoading: boolean;
+    /** Unique identifier for the loading action */
+    actionKey: string;
+    /** Show as fullscreen modal overlay */
+    modal?: boolean;
+    /** Show as small background indicator (bottom-right corner) */
+    smallBackground?: boolean;
+    /** Custom loading message */
+    loadingTxt?: string;
+    /** Optional sub-tasks to display progress */
+    subTask?: LoadingSubTask[];
+}
+/**
+ * Loading state indicator component with modal and background modes.
+ *
+ * @tagname pd-loading-state
+ * @summary Displays loading progress with optional modal overlay or background indicator.
+ *
+ * @slot - Default slot (unused, component renders based on loadingState property)
+ *
+ * @cssprop --pd-popup-modal-bg-rgba - Modal overlay background color. Default: `rgba(175, 193, 210, 0.8)`.
+ * @cssprop --pd-loading-state-background-bg - Background mode container color. Default: `white`.
+ * @cssprop --pd-loading-state-bg-col - Content box background. Default: `#edf7fd`.
+ * @cssprop --pd-loading-state-border-col - Content box border color. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-loading-state-completed-col - Completed sub-task icon color. Default: `green`.
+ * @cssprop --pd-loading-state-loader-bg - Spinner background color. Default: `#0a3a48`.
+ * @cssprop --pd-loading-state-loader-fg - Spinner foreground (animated) color. Default: `#067394`.
+ * @cssprop --pd-loading-state-loading-col - In-progress sub-task icon color. Default: `orange`.
+ */
+export declare class PdLoadingState extends LitElement {
+    /**
+     * Loading state configuration object.
+     * Controls visibility, mode (modal/background), and content.
+     */
+    loadingState?: LoadingState;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1> | "";
+    private _renderContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "pd-loading-state": PdLoadingState;
+    }
+}
+//# sourceMappingURL=PdLoadingState.d.ts.map

package/dist/pd-loading-state/PdLoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdLoadingState.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/PdLoadingState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAEa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IAEH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAuHpC;IAEO,MAAM;IAsBf,OAAO,CAAC,cAAc;CAgEvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/pd-loading-state/PdLoadingState.js

@@ -0,0 +1,219 @@
+import { css, LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import { classMap } from 'lit/directives/class-map.js';
+import '@progressive-development/pd-icon/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 PdLoadingState = class extends LitElement {
+  render() {
+    if (!this.loadingState) {
+      return "";
+    }
+    return this.loadingState.modal ? html`
+          <div
+            id="modalId"
+            class="modal"
+            role="dialog"
+            aria-modal="true"
+            aria-busy="true"
+            aria-label="${msg("Ladevorgang", {
+      id: "pdContent.loadingstate.ariaLabel"
+    })}"
+          >
+            ${this._renderContent()}
+          </div>
+        ` : this._renderContent();
+  }
+  _renderContent() {
+    if (!this.loadingState) {
+      return "";
+    }
+    return html`
+      <div
+        class="${classMap({
+      content: !this.loadingState.smallBackground,
+      "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
+      "background-content": this.loadingState.smallBackground === true
+    })}"
+        role="status"
+        aria-live="polite"
+      >
+        <div
+          class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+      id: "pdContent.loadingstate.ariaLoading"
+    })}"
+        ></div>
+        <p>
+          ${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? msg("Daten werden synchronisiert", {
+      id: "pdContent.loadingstate.syncState"
+    }) : msg("Bitte warten, Daten werden geladen", {
+      id: "pdContent.loadingstate.pleaseWait"
+    }))}
+        </p>
+        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`
+              <ul class="sub-ul">
+                ${this.loadingState.subTask.map(
+      (task) => html`
+                    <li>
+                      <div class="sub-row">
+                        ${task.loadingTxt}
+                        ${task.completed ? html`<pd-icon
+                              class="sub-icon completed"
+                              icon="checkBox"
+                              activeIcon
+                            ></pd-icon>` : html`<pd-icon
+                              class="sub-icon loading"
+                              icon="syncIcon"
+                              activeIcon
+                            ></pd-icon>`}
+                      </div>
+                    </li>
+                  `
+    )}
+              </ul>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+PdLoadingState.styles = [
+  css`
+      :host {
+        display: block;
+      }
+
+      /* Modal overlay (fullscreen) */
+      .modal {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 500;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: var(
+          --pd-popup-modal-bg-rgba,
+          rgba(175, 193, 210, 0.8)
+        );
+      }
+
+      /* Centered content without modal */
+      .no-modal-content {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      /* Main content box */
+      .content {
+        padding: 1em;
+        text-align: center;
+        background-color: var(--pd-loading-state-bg-col, #edf7fd);
+        border: 2px solid
+          var(--pd-loading-state-border-col, var(--pd-default-col, #067394));
+        z-index: 101;
+      }
+
+      /* Background mode (bottom-right corner) */
+      .background-content {
+        position: fixed;
+        right: 0em;
+        bottom: 0em;
+
+        padding: 1em;
+        z-index: 600;
+
+        display: flex;
+        gap: 0.5em;
+        align-items: center;
+
+        background-color: var(--pd-loading-state-background-bg, white);
+      }
+
+      /* Main spinner */
+      .loader {
+        border: 16px solid var(--pd-loading-state-loader-bg, #0a3a48);
+        border-top: 16px solid var(--pd-loading-state-loader-fg, #067394);
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 2s linear infinite;
+
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      /* Small spinner for background mode */
+      .background-loader {
+        border: 10px solid var(--pd-loading-state-loader-bg, #0a3a48);
+        border-top: 10px solid var(--pd-loading-state-loader-fg, #067394);
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        animation: spin 2s linear infinite;
+      }
+
+      /* Sub-task list */
+      .sub-ul {
+        text-align: start;
+      }
+
+      .sub-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-right: 10px;
+      }
+
+      .sub-icon {
+        --pd-icon-size: 1rem;
+        padding: 0;
+        vertical-align: baseline;
+        margin: 0 0.25rem 0 0;
+      }
+
+      .completed {
+        --pd-icon-col-active: var(--pd-loading-state-completed-col, green);
+      }
+
+      .loading {
+        --pd-icon-col-active: var(--pd-loading-state-loading-col, orange);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `
+];
+__decorateClass([
+  property({ type: Object })
+], PdLoadingState.prototype, "loadingState", 2);
+PdLoadingState = __decorateClass([
+  localized(),
+  customElement("pd-loading-state")
+], PdLoadingState);
+
+export { PdLoadingState };

package/dist/pd-loading-state/pd-loading-state.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+export { PdLoadingState, type LoadingState, type LoadingSubTask, } from './PdLoadingState.js';
+//# sourceMappingURL=pd-loading-state.d.ts.map

package/dist/pd-loading-state/pd-loading-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-loading-state.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-loading-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,qBAAqB,CAAC"}

package/dist/pd-loading-state/pd-loading-state.stories.d.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { LoadingState } from './PdLoadingState.js';
+/**
+ * Story arguments interface for pd-loading-state component.
+ * Maps to the component's public API.
+ */
+interface PdLoadingStateArgs {
+    /** Loading state configuration */
+    loadingState: LoadingState;
+}
+/**
+ * ## pd-loading-state
+ *
+ * A loading state indicator component with multiple display modes for different
+ * use cases: modal overlay, centered inline, and background sync.
+ *
+ * ### Features
+ * - Modal mode: fullscreen overlay blocking user interaction
+ * - Background mode: small indicator in bottom-right corner
+ * - Centered mode: centered without overlay for inline loading
+ * - Sub-task progress tracking with completion states
+ * - Custom loading messages
+ * - CSS Custom Properties for full theming
+ *
+ * ### Accessibility
+ * - Uses `role="dialog"` with `aria-modal` and `aria-busy` for modal mode
+ * - Content area uses `role="status"` with `aria-live="polite"` for announcements
+ * - Spinner uses `role="progressbar"` with `aria-label`
+ * - Screen readers announce loading messages and sub-task status changes
+ */
+declare const meta: Meta<PdLoadingStateArgs>;
+export default meta;
+type Story = StoryObj<PdLoadingStateArgs>;
+/** Default modal loading state with fullscreen overlay. */
+export declare const Default: Story;
+/** Modal loading state with a custom message. */
+export declare const WithCustomMessage: Story;
+/** Centered loading without modal overlay, useful for inline loading areas. */
+export declare const CenteredNoModal: Story;
+/** Small background indicator in bottom-right corner for non-blocking sync operations. */
+export declare const BackgroundMode: Story;
+/** Loading state with sub-task progress tracking. */
+export declare const WithSubTasks: Story;
+/** All non-modal loading state variants side by side. Modal variant excluded as it covers the entire viewport. */
+export declare const AllVariants: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-loading-state.stories.d.ts.map

package/dist/pd-loading-state/pd-loading-state.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-loading-state.stories.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-loading-state.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMxD;;;GAGG;AACH,UAAU,kBAAkB;IAC1B,kCAAkC;IAClC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CA+ClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAM1C,2DAA2D;AAC3D,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAMF,0FAA0F;AAC1F,eAAO,MAAM,cAAc,EAAE,KAkC5B,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,YAAY,EAAE,KAkD1B,CAAC;AAMF,kHAAkH;AAClH,eAAO,MAAM,WAAW,EAAE,KA6FzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA0H3B,CAAC"}

package/dist/pd-loading-state.d.ts

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

package/dist/pd-loading-state.js

@@ -0,0 +1 @@
+export { PdLoadingState } from './pd-loading-state/PdLoadingState.js';

package/dist/pd-more-info/PdMoreInfo.d.ts

@@ -5,20 +5,24 @@ import { LitElement, CSSResultGroup } from 'lit';
  * `pd-more-info` Komponente zeigt zuerst einen kompakten Text (Slot `small-view`)
  * und erlaubt es dem Nutzer, bei Klick weitere Informationen (Slot `large-view`) einzublenden.
  *
- * @slot small-view - Der kompakte Textblock für die erste Ansicht
- * @slot large-view - Der erweiterte Textblock nach Klick auf "Mehr Informationen"
+ * @slot small-view - Compact text block shown in the initial collapsed view.
+ * @slot large-view - Extended text block revealed after clicking "More information".
  *
  * @cssprop --pd-default-font-content-col - Textfarbe
  * @cssprop --pd-default-font-content-size - Textgröße
+ * @cssprop --pd-default-font-content-family - Schriftart für Content
+ * @cssprop --pd-default-font-content-line-height - Zeilenhöhe für Content
  * @cssprop --pd-default-font-link-family - Schriftart für Link
  * @cssprop --pd-default-font-link-size - Schriftgröße für Link
  * @cssprop --pd-default-font-link-col - Linkfarbe
  * @cssprop --pd-default-font-link-col-hover - Hoverfarbe für Link
  */
 export declare class PdMoreInfo extends LitElement {
+    /** @ignore */
     private _lessInfo;
     static styles: CSSResultGroup;
     render(): import('lit').TemplateResult<1>;
+    private _onKeyDown;
     private _showMoreInfo;
     private _showLessInfo;
 }

package/dist/pd-more-info/PdMoreInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAuBpC;IAEO,MAAM;IAoBf,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAWtB"}
+{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,cAAc;IAEd,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAkCpC;IAEO,MAAM;IA8Bf,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAWtB"}

package/dist/pd-more-info/PdMoreInfo.js

@@ -1,7 +1,6 @@
 import { css, LitElement, html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
-import { PdFontStyles } from '@progressive-development/pd-shared-styles';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -23,18 +22,34 @@ let PdMoreInfo = class extends LitElement {
       <p>
         ${this._lessInfo ? html`
               <slot name="small-view"></slot>
-              <a @click=${this._showMoreInfo}>
+              <a
+                role="button"
+                tabindex="0"
+                @click=${this._showMoreInfo}
+                @keydown=${this._onKeyDown}
+              >
                 ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
               </a>
             ` : html`
               <slot name="large-view"></slot>
-              <a @click=${this._showLessInfo}>
+              <a
+                role="button"
+                tabindex="0"
+                @click=${this._showLessInfo}
+                @keydown=${this._onKeyDown}
+              >
                 ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
               </a>
             `}
       </p>
     `;
   }
+  _onKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.currentTarget?.click();
+    }
+  }
   _showMoreInfo() {
     this._lessInfo = false;
   }
@@ -49,7 +64,6 @@ let PdMoreInfo = class extends LitElement {
   }
 };
 PdMoreInfo.styles = [
-  PdFontStyles,
   css`
       :host {
         display: block;
@@ -57,7 +71,9 @@ PdMoreInfo.styles = [
 
       p {
         color: var(--pd-default-font-content-col);
+        font-family: var(--pd-default-font-content-family);
         font-size: var(--pd-default-font-content-size);
+        line-height: var(--pd-default-font-content-line-height, 1.4em);
       }
 
       a {
@@ -70,6 +86,16 @@ PdMoreInfo.styles = [
       a:hover {
         color: var(--pd-default-font-link-col-hover);
       }
+
+      a:focus {
+        outline: none;
+      }
+
+      a:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
     `
 ];
 __decorateClass([