@progressive-development/pd-content 0.5.9 → 0.6.1

package/dist/pd-more-info.js

@@ -1,4 +1,83 @@
-import { PdMoreInfo } from "./src/PdMoreInfo.js";
-if (!customElements.get("pd-more-info")) {
-  window.customElements.define("pd-more-info", PdMoreInfo);
-}
+import { css, LitElement, html } from "lit";
+import { state, customElement } 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;
+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 PdMoreInfo = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._lessInfo = true;
+  }
+  render() {
+    return html`
+      <p>
+        ${this._lessInfo ? html`
+              <slot name="small-view"></slot>
+              <a @click=${this._showMoreInfo}>
+                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
+              </a>
+            ` : html`
+              <slot name="large-view"></slot>
+              <a @click=${this._showLessInfo}>
+                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
+              </a>
+            `}
+      </p>
+    `;
+  }
+  _showMoreInfo() {
+    this._lessInfo = false;
+  }
+  _showLessInfo() {
+    this._lessInfo = true;
+    const rect = this.getBoundingClientRect();
+    window.scrollBy({
+      top: rect.top - 150,
+      left: 0,
+      behavior: "smooth"
+    });
+  }
+};
+PdMoreInfo.styles = [
+  PdFontStyles,
+  css`
+      :host {
+        display: block;
+      }
+
+      p {
+        color: var(--pd-default-font-content-col);
+        font-size: var(--pd-default-font-content-size);
+      }
+
+      a {
+        cursor: pointer;
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+      }
+
+      a:hover {
+        color: var(--pd-default-font-link-col-hover);
+      }
+    `
+];
+__decorateClass([
+  state()
+], PdMoreInfo.prototype, "_lessInfo", 2);
+PdMoreInfo = __decorateClass([
+  customElement("pd-more-info"),
+  localized()
+], PdMoreInfo);
+export {
+  PdMoreInfo
+};

package/dist/pd-panel-viewer.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class PdPanelViewer extends LitElement {
+    withProgress: boolean;
+    deltaCalc: number;
+    _index: number;
+    _panData: any;
+    _update: {};
+    static styles: import('lit').CSSResult;
+    get index(): number;
+    set index(value: number);
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+    update(changedProperties: any): void;
+    next(): void;
+    previous(): void;
+}
+//# sourceMappingURL=pd-panel-viewer.d.ts.map

package/dist/pd-panel-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel-viewer.d.ts","sourceRoot":"","sources":["../src/pd-panel-viewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,OAAO,0CAA0C,CAAC;AAIlD,qBACa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAGd,MAAM,SAAK;IAIX,QAAQ,EAAE,GAAG,CAAM;IAGnB,OAAO,KAAM;IAEb,MAAM,CAAC,MAAM,0BAkEX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IAmCN,YAAY;IAoBZ,MAAM,CAAC,iBAAiB,EAAE,GAAG;IAkC7B,IAAI;IASJ,QAAQ;CAOT"}

package/dist/pd-panel-viewer.js

@@ -0,0 +1,207 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import Hammer from "hammerjs";
+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 timer;
+let PdPanelViewer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.withProgress = false;
+    this.deltaCalc = 3;
+    this._index = 0;
+    this._panData = {};
+    this._update = {};
+  }
+  get index() {
+    return this._index;
+  }
+  set index(value) {
+    this.children[this._index].dispatchEvent(new CustomEvent("exited"));
+    this.children[value].dispatchEvent(new CustomEvent("entered"));
+    this._index = value;
+  }
+  render() {
+    return html`
+      <div class="panel-container">
+        <slot></slot>
+        <pd-icon
+          id="prev"
+          icon="previousArrow"
+          activeIcon
+          ?disabled="${this.index <= 0}"
+          @click=${this.previous}
+        ></pd-icon>
+        <pd-icon
+          id="next"
+          icon="nextArrow"
+          activeIcon
+          ?disabled="${this.index === this.children.length - 1}"
+          @click=${this.next}
+        ></pd-icon>
+      </div>
+      ${this.withProgress ? html` <div id="progress">
+            ${Array.from(this.children).map(
+      (childEl, i) => html` <div
+                  @click="${() => {
+        this._index = i;
+      }}"
+                  class=${classMap({ watched: i <= this.index })}
+                ></div>`
+    )}
+          </div>` : ""}
+    `;
+  }
+  firstUpdated() {
+    const hammerVal = new Hammer(this);
+    hammerVal.on("pan", (panEvent) => {
+      this._panData = panEvent;
+    });
+    const ro = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        window.clearTimeout(timer);
+        timer = setTimeout(() => {
+          this.requestUpdate();
+        }, 100);
+      });
+    });
+    ro.observe(this);
+  }
+  update(changedProperties) {
+    const { isFinal = false } = this._panData;
+    let { deltaX = 0 } = this._panData;
+    const width = this.clientWidth;
+    const minScale = 0.8;
+    if (!changedProperties.has("_index") && isFinal) {
+      if (deltaX > width / this.deltaCalc) {
+        this.previous();
+      } else if (deltaX < -width / this.deltaCalc) {
+        this.next();
+      }
+    }
+    deltaX = isFinal ? 0 : deltaX;
+    Array.from(this.children).forEach((el, i) => {
+      const x = (i - this.index) * width + deltaX;
+      const u = deltaX / width + (i - this.index);
+      const v = -Math.abs(u * (1 - minScale)) + 1;
+      const scale = Math.max(v, minScale);
+      el.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;
+      el.style.opacity = scale;
+    });
+    super.update(changedProperties);
+  }
+  /* Advance to the next story card if possible */
+  next() {
+    this.index = Math.max(
+      0,
+      Math.min(this.children.length - 1, this.index + 1)
+    );
+    this._update = false;
+  }
+  /* Go back to the previous story card if possible */
+  previous() {
+    this.index = Math.max(
+      0,
+      Math.min(this.children.length - 1, this.index - 1)
+    );
+    this._update = false;
+  }
+};
+PdPanelViewer.styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: var(--pd-panel-width, 1170px);
+      overflow: var(--pd-panel-overflow, hidden);
+      background-color: var(--pd-panel-viewer-bg-col);
+    }
+
+    .panel-container {
+      position: relative;
+      height: var(--pd-panel-height, 60vh);
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 0 2rem;
+      box-sizing: border-box;
+    }
+
+    pd-icon {
+      position: absolute;
+      top: calc(50% - 25px);
+      height: 50px;
+      cursor: pointer;
+    }
+
+    #prev {
+      left: 0;
+    }
+
+    #next {
+      right: 0;
+    }
+
+    #progress {
+      position: relative;
+      height: 20px;
+      width: 50%;
+      margin: 0.5rem auto;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      grid-gap: 10px;
+      align-content: center;
+      align-self: flex-end;
+    }
+
+    #progress > div {
+      background: var(--pd-panel-progress-col, grey);
+      height: 4px;
+      transition: background 0.3s linear;
+      cursor: pointer;
+    }
+
+    #progress > div.watched {
+      background: var(--pd-panel-progress-col, yellow);
+    }
+
+    ::slotted(*) {
+      position: absolute;
+      width: 100%;
+      height: calc(100%);
+      transition: transform 0.35s ease-out;
+      left: 0;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean })
+], PdPanelViewer.prototype, "withProgress", 2);
+__decorateClass([
+  property({ type: Number })
+], PdPanelViewer.prototype, "deltaCalc", 2);
+__decorateClass([
+  property({ type: Number, state: true })
+], PdPanelViewer.prototype, "_index", 2);
+__decorateClass([
+  property({ type: Object, state: true })
+], PdPanelViewer.prototype, "_panData", 2);
+__decorateClass([
+  property({ type: Boolean, state: true })
+], PdPanelViewer.prototype, "_update", 2);
+PdPanelViewer = __decorateClass([
+  customElement("pd-panel-viewer")
+], PdPanelViewer);
+export {
+  PdPanelViewer
+};

package/dist/pd-panel.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class PdPanel extends LitElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=pd-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel.d.ts","sourceRoot":"","sources":["../src/pd-panel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AAG5C,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BAsBX;IAEF,MAAM;CAOP"}

package/dist/pd-panel.js

@@ -0,0 +1,48 @@
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+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 = decorator(result) || result;
+  return result;
+};
+let PdPanel = class extends LitElement {
+  render() {
+    return html`
+      <div id="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+PdPanel.styles = css`
+    :host {
+      background: var(--pd-panel-bg, #afc1d2);
+      border-radius: var(--pd-panel-border-radius, 0.2em);
+    }
+
+    /* Default styles for content */
+    #content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    #content > slot::slotted(*) {
+      margin: 0;
+    }
+  `;
+PdPanel = __decorateClass([
+  customElement("pd-panel")
+], PdPanel);
+export {
+  PdPanel
+};

package/dist/pd-resize-content.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Komponente zur responsiven Darstellung von Inhalten.
+ * Wenn die Bildschirmbreite unter `resizeWidth` liegt, wird ein Popup angezeigt.
+ *
+ * @fires book-date – Wenn ein freier Termin ausgewählt wird (nicht aktiv)
+ * @fires edit-selection – Wenn der Nutzer Datum oder PLZ bearbeiten möchte (nicht aktiv)
+ *
+ * @slot resize-content - Der Hauptinhalt, der bei ausreichender Breite direkt angezeigt wird.
+ * @slot preview-content - Der Vorschauinhalt, der im Popup angezeigt wird, wenn die Breite nicht ausreicht.
+ */
+export declare class PdResizeContent extends LitElement {
+    /**
+     * Minimale Breite, ab der der Inhalt direkt dargestellt wird. Darunter erscheint ein Popup.
+     */
+    resizeWidth: string;
+    /**
+     * Interner Zustand: Gibt an, ob der Inhalt versteckt werden soll und stattdessen ein Popup angezeigt wird.
+     */
+    private _hideContent;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    protected render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=pd-resize-content.d.ts.map

package/dist/pd-resize-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-resize-content.d.ts","sourceRoot":"","sources":["../src/pd-resize-content.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,6CAA6C,CAAC;AAErD;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IAEH,WAAW,SAAY;IAEvB;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAS;IAE7B,MAAM,CAAC,MAAM,0BAaX;IAEF,iBAAiB,IAAI,IAAI;IAUzB,SAAS,CAAC,MAAM;CAUjB"}

package/dist/pd-resize-content.js

@@ -1,4 +1,64 @@
-import { PdResizeContent } from "./src/PdResizeContent.js";
-if (!customElements.get("pd-resize-content")) {
-  window.customElements.define("pd-resize-content", PdResizeContent);
-}
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { installMediaQueryWatcher } from "pwa-helpers/media-query.js";
+import "@progressive-development/pd-dialog/pd-popup";
+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 PdResizeContent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeWidth = "1232px";
+    this._hideContent = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    installMediaQueryWatcher(
+      `(min-width: ${this.resizeWidth})`,
+      (matches) => {
+        this._hideContent = !matches;
+      }
+    );
+  }
+  render() {
+    return this._hideContent ? html`
+          <pd-popup>
+            <div slot="small-view"><slot name="preview-content"></slot></div>
+            <div slot="content"><slot name="resize-content"></slot></div>
+          </pd-popup>
+        ` : html`<slot name="resize-content"></slot>`;
+  }
+};
+PdResizeContent.styles = css`
+    :host {
+      display: block;
+    }
+
+    h3 {
+      color: #084c61;
+      font-family: Oswald;
+    }
+
+    p {
+      color: #084c61;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], PdResizeContent.prototype, "resizeWidth", 2);
+__decorateClass([
+  state()
+], PdResizeContent.prototype, "_hideContent", 2);
+PdResizeContent = __decorateClass([
+  customElement("pd-resize-content")
+], PdResizeContent);
+export {
+  PdResizeContent
+};

package/dist/pd-tab.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, CSSResultGroup } from 'lit';
+export interface TabHeader {
+    key: string;
+    name: string;
+    disabled?: boolean;
+    pdIcon?: string;
+    otherIcon?: any;
+}
+export declare class PdTab extends LitElement {
+    tabs: TabHeader[];
+    defaultTab?: string;
+    _activeTab?: string;
+    static styles: CSSResultGroup;
+    protected update(changedProperties: any): void;
+    render(): import('lit-html').TemplateResult<1>;
+    reset(): void;
+    private _tabSelected;
+}
+//# sourceMappingURL=pd-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-tab.d.ts","sourceRoot":"","sources":["../src/pd-tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D,OAAO,0CAA0C,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,qBACa,KAAM,SAAQ,UAAU;IAEnC,IAAI,EAAE,SAAS,EAAE,CAAM;IAGvB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,MAAM,EAmGR,cAAc,CAAC;IAEpB,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,GAAG,GAAG,IAAI;IAQ9C,MAAM;IAgCN,KAAK;IAKL,OAAO,CAAC,YAAY;CAQrB"}

package/dist/pd-tab.js

@@ -0,0 +1,182 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
+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 PdTab = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tabs = [];
+  }
+  update(changedProperties) {
+    if (changedProperties.has("defaultTab") && this.defaultTab) {
+      console.log("PdTab: Set active from default selection", this.defaultTab);
+      this._activeTab = this.defaultTab;
+    }
+    super.update(changedProperties);
+  }
+  render() {
+    return html`
+      <div class="header-container">
+        ${this.tabs.map(
+      (t) => html`
+            <div
+              class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
+              data-key="${t.key}"
+              @click="${this._tabSelected}"
+            >
+              ${t.name}
+            </div>
+          `
+    )}
+      </div>
+      ${this.tabs.map(
+      (t) => html`
+          <div
+            id="${`slot${t.key}`}"
+            class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
+          >
+            <slot name="${t.key}"></slot>
+          </div>
+        `
+    )}
+    `;
+  }
+  reset() {
+    this._activeTab = this.defaultTab;
+  }
+  // eslint-disable-next-line class-methods-use-this
+  _tabSelected(e) {
+    var _a, _b;
+    this._activeTab = (_b = (_a = e.target) == null ? void 0 : _a.dataset) == null ? void 0 : _b.key;
+    this.dispatchEvent(
+      new CustomEvent("tab-selected", {
+        detail: this._activeTab
+      })
+    );
+  }
+};
+PdTab.styles = [
+  PdColorStyles,
+  PdFontStyles,
+  css`
+      :host {
+        display: block;
+      }
+
+      .header-container {
+        display: flex;
+      }
+
+      .tab-header {
+        padding: var(--pd-tab-header-padding, 0.8em 1.5em);
+        background-color: var(--pd-tab-bg-col, var(--pd-default-light-col));
+        font-family: var(--pd-default-font-title-family);
+        color: var(--pd-tab-text-col, var(--pd-default-font-title-col));
+        cursor: pointer;
+        border: 2px solid var(--pd-tab-border-col, #ccc); /* Dünner Rahmen */
+        border-bottom: none; /* Tabs sollen nahtlos an den Inhalt anschließen */
+        border-radius: 8px 8px 0 0; /* Abgerundete obere Ecken */
+        display: inline-block; /* Tabs nebeneinander anzeigen */
+        margin-right: 5px; /* Abstand zwischen Tabs */
+        box-shadow: var(
+          --pd-tab-shadow,
+          0 2px 4px rgba(0, 0, 0, 0.1)
+        ); /* Leichter Schatten für Tiefe */
+        transition:
+          background-color 0.3s,
+          box-shadow 0.3s; /* Weiche Übergänge bei Hover */
+      }
+
+      .tab-header:hover {
+        background-color: var(
+          --pd-tab-bg-hover-col,
+          var(--pd-default-hover-col)
+        );
+        box-shadow: var(
+          --pd-tab-shadow-hover,
+          0 4px 8px rgba(0, 0, 0, 0.2)
+        ); /* Schattenintensität bei Hover erhöhen */
+      }
+
+      .tab-header.active-header {
+        background-color: var(--pd-tab-bg-active-col, var(--pd-default-col));
+        border-bottom: 2px solid
+          var(--pd-tab-border-active-col, var(--pd-default-col));
+        color: var(
+          --pd-tab-active-text-col,
+          var(--pd-default-bg-col)
+        ); /* Textfarbe für aktiven Tab */
+        box-shadow: none; /* Schatten entfernen, wenn Tab aktiv ist */
+      }
+
+      .tab-header.disabled-header {
+        background-color: var(--pd-tab-bg-active-col, var(--pd-default-col));
+        border-bottom: 2px solid
+          var(--pd-tab-border-active-col, var(--pd-default-col));
+        color: var(
+          --pd-tab-active-text-col,
+          var(--pd-default-bg-col)
+        ); /* Textfarbe für aktiven Tab */
+        box-shadow: none; /* Schatten entfernen, wenn Tab aktiv ist */
+      }
+
+      .tab-header.disabled-header {
+        pointer-events: none; /* Deaktiviert die Klickbarkeit */
+        background-color: var(
+          --pd-tab-disabled-bg-col,
+          #f0f0f0
+        ); /* Hellere Farbe für deaktivierte Tabs */
+        color: var(--pd-tab-disabled-text-col, #999); /* Hellere Textfarbe */
+        border-color: var(
+          --pd-tab-disabled-border-col,
+          #ddd
+        ); /* Angepasste Rahmenfarbe */
+        cursor: not-allowed; /* Zeigt an, dass der Tab nicht interaktiv ist */
+        opacity: 0.6; /* Reduziert die Sichtbarkeit für einen "deaktivierten" Look */
+      }
+
+      .tab-header:focus {
+        outline: none; /* Entfernt den Standardfokusrahmen */
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Fokusring für Tastaturnavigation */
+      }
+
+      .slot-container {
+        display: none;
+      }
+
+      .active-slot {
+        padding: var(--pd-tab-content-padding, 1em);
+        display: block;
+        border: var(--pd-tab-content-border, 1px solid var(--pd-default-col));
+        border-top: var(
+          --pd-tab-content-border-top,
+          3px solid var(--pd-default-col)
+        );
+      }
+    `
+];
+__decorateClass([
+  property({ type: Array })
+], PdTab.prototype, "tabs", 2);
+__decorateClass([
+  property({ type: String })
+], PdTab.prototype, "defaultTab", 2);
+__decorateClass([
+  property({ type: String, state: true })
+], PdTab.prototype, "_activeTab", 2);
+PdTab = __decorateClass([
+  customElement("pd-tab")
+], PdTab);
+export {
+  PdTab
+};

package/dist/stories/pd-box-view.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    component: string;
+    render: () => import('lit-html').TemplateResult<1>;
+};
+export default meta;
+type Story = StoryObj;
+export declare const BoxView: Story;
+//# sourceMappingURL=pd-box-view.stories.d.ts.map