@progressive-development/pd-content 0.9.2 → 1.0.0

package/dist/pd-tab/PdTab.js

@@ -1,5 +1,5 @@
-import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { LitElement, css, nothing, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
 import '@progressive-development/pd-icon/pd-icon';
 
 var __defProp = Object.defineProperty;
@@ -15,91 +15,108 @@ class PdTab extends LitElement {
   constructor() {
     super(...arguments);
     this.tabs = [];
+    this._resizeObserver = null;
   }
   static {
     this.styles = [
       css`
       :host {
         display: block;
+        --_font-size: var(--pd-tab-font-size, 0.875rem);
+        --_font-size-compact: var(--pd-tab-font-size-compact, 0.8rem);
+        --_active-col: var(
+          --pd-tab-active-indicator-col,
+          var(--pd-default-col)
+        );
+        --_active-height: var(--pd-tab-active-indicator-height, 2px);
+        --_icon-size: var(--pd-tab-icon-size, 1.125em);
       }
 
       .header-container {
         display: flex;
+        flex-wrap: nowrap;
+        border-bottom: 1px solid var(--pd-default-disabled-light-col, #e5e7eb);
+        font-size: var(--_font-size);
       }
 
+      /* --- Tab header --- */
       .tab-header {
-        padding: var(--pd-tab-header-padding, 0.8em 1.5em);
-        background-color: var(--pd-tab-bg-col, var(--pd-default-light-col));
+        padding: var(--pd-tab-header-padding, 0.5em 1em);
         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 */
+        background: transparent;
+        border: none;
+        border-bottom: var(--_active-height) solid transparent;
+        margin-bottom: calc(-1 * var(--_active-height) + 1px);
+        white-space: nowrap;
         transition:
-          background-color 0.3s,
-          box-shadow 0.3s; /* Weiche Übergänge bei Hover */
+          color 0.2s,
+          border-color 0.2s,
+          background-color 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--pd-tab-icon-gap, 0.35em);
+        flex-shrink: 0;
       }
 
       .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 */
+        background-color: var(--pd-tab-hover-bg-col, rgba(0, 0, 0, 0.04));
       }
 
       .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 */
+        color: var(--pd-tab-active-text-col, var(--_active-col));
+        border-bottom-color: var(--_active-col);
+        font-weight: 500;
       }
 
       .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));
+        pointer-events: none;
         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 */
+          --pd-tab-disabled-text-col,
+          var(--pd-default-disabled-text-col)
+        );
+        opacity: 0.5;
+        cursor: not-allowed;
       }
 
-      .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;
       }
 
-      .tab-header:focus {
-        outline: none; /* Entfernt den Standardfokusrahmen */
-        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Fokusring für Tastaturnavigation */
+      .tab-header:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: -2px;
+      }
+
+      /* --- Compact mode (short labels) --- */
+      :host([data-compact]) .header-container {
+        font-size: var(--_font-size-compact);
+      }
+
+      .full-label {
+        display: inline;
+      }
+
+      .short-label {
+        display: none;
+      }
+
+      :host([data-compact]) .full-label {
+        display: none;
       }
 
+      :host([data-compact]) .short-label {
+        display: inline;
+      }
+
+      /* --- Icon --- */
+      .tab-icon {
+        --pd-icon-size: var(--_icon-size);
+        flex-shrink: 0;
+      }
+
+      /* --- Content panels --- */
       .slot-container {
         display: none;
       }
@@ -107,33 +124,60 @@ class PdTab extends LitElement {
       .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)
+        border: var(
+          --pd-tab-content-border,
+          1px solid var(--pd-default-disabled-light-col, #e5e7eb)
         );
+        border-top: none;
       }
     `
     ];
   }
-  update(changedProperties) {
+  willUpdate(changedProperties) {
     if (changedProperties.has("defaultTab") && this.defaultTab) {
-      console.log("PdTab: Set active from default selection", this.defaultTab);
       this._activeTab = this.defaultTab;
     }
-    super.update(changedProperties);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("tabs")) {
+      this._checkOverflow();
+    }
+  }
+  firstUpdated() {
+    this._resizeObserver = new ResizeObserver(() => this._checkOverflow());
+    this._resizeObserver.observe(this._headerContainer);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
   }
   render() {
     return html`
-      <div class="header-container">
+      <div
+        id="hc"
+        class="header-container"
+        role="tablist"
+        @keydown=${this._onKeyDown}
+      >
         ${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}"
+              role="tab"
+              id="${`tab-${t.key}`}"
+              aria-selected="${this._activeTab === t.key}"
+              aria-controls="${`panel-${t.key}`}"
+              aria-disabled="${t.disabled || false}"
+              tabindex="${this._activeTab === t.key && !t.disabled ? 0 : -1}"
             >
-              ${t.name}
+              ${t.pdIcon ? html`<pd-icon class="tab-icon" .icon="${t.pdIcon}"></pd-icon>` : nothing}
+              <span class="full-label">${t.name}</span>
+              <span class="short-label">${t.shortLabel ?? t.name}</span>
             </div>
           `
     )}
@@ -141,7 +185,9 @@ class PdTab extends LitElement {
       ${this.tabs.map(
       (t) => html`
           <div
-            id="${`slot${t.key}`}"
+            id="${`panel-${t.key}`}"
+            role="tabpanel"
+            aria-labelledby="${`tab-${t.key}`}"
             class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
           >
             <slot name="${t.key}"></slot>
@@ -153,12 +199,76 @@ class PdTab extends LitElement {
   reset() {
     this._activeTab = this.defaultTab;
   }
-  // eslint-disable-next-line class-methods-use-this
+  // ---------------------------------------------------------------------------
+  // Overflow detection (compact mode)
+  // ---------------------------------------------------------------------------
+  _checkOverflow() {
+    this.removeAttribute("data-compact");
+    const c = this._headerContainer;
+    if (c.scrollWidth > c.clientWidth + 1 && this.tabs.some((t) => t.shortLabel)) {
+      this.setAttribute("data-compact", "");
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Tab selection & keyboard navigation
+  // ---------------------------------------------------------------------------
+  _onKeyDown(event) {
+    const enabledTabs = this.tabs.filter((t) => !t.disabled);
+    if (enabledTabs.length === 0) return;
+    const currentIndex = enabledTabs.findIndex(
+      (t) => t.key === this._activeTab
+    );
+    let nextIndex = -1;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = enabledTabs.length - 1;
+        break;
+      default:
+        return;
+    }
+    if (nextIndex >= 0 && nextIndex < enabledTabs.length) {
+      const nextTab = enabledTabs[nextIndex];
+      this._activeTab = nextTab.key;
+      this.dispatchEvent(
+        new CustomEvent("tab-selected", {
+          detail: this._activeTab,
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.updateComplete.then(() => {
+        const tabElement = this.shadowRoot?.querySelector(
+          `[data-key="${nextTab.key}"]`
+        );
+        tabElement?.focus();
+      });
+    }
+  }
   _tabSelected(e) {
-    this._activeTab = e.target?.dataset?.key;
+    const target = e.target;
+    const key = target.closest("[data-key]")?.dataset?.key;
+    if (!key) return;
+    this._activeTab = key;
     this.dispatchEvent(
       new CustomEvent("tab-selected", {
-        detail: this._activeTab
+        detail: this._activeTab,
+        bubbles: true,
+        composed: true
       })
     );
   }
@@ -170,7 +280,10 @@ __decorateClass([
   property({ type: String })
 ], PdTab.prototype, "defaultTab");
 __decorateClass([
-  property({ type: String, state: true })
+  state()
 ], PdTab.prototype, "_activeTab");
+__decorateClass([
+  query("#hc")
+], PdTab.prototype, "_headerContainer");
 
 export { PdTab };

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

@@ -1,23 +1,53 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: (args: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        backgroundColor: {
-            control: "color";
-        };
-        onClick: {
-            action: string;
-        };
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { TabHeader } from '../types.js';
+/**
+ * Story arguments interface for pd-tab component.
+ * Maps to the component's public API.
+ */
+interface PdTabArgs {
+    /** Array of tab header definitions */
+    tabs: TabHeader[];
+    /** Key of the initially active tab */
+    defaultTab: string;
+}
+/**
+ * ## pd-tab
+ *
+ * A tab navigation component with header tabs and named content slots.
+ *
+ * ### Features
+ * - Dynamic tabs configured via the `tabs` property (array of TabHeader)
+ * - Responsive label switching: full label -> short label when space is limited
+ * - Optional icon per tab header via `pdIcon`
+ * - Disabled state for individual tabs
+ * - Named slots for each tab's content, matched by tab key
+ * - Full WAI-ARIA tabs pattern with keyboard navigation
+ *
+ * ### Accessibility
+ * - Tab container uses `role="tablist"`
+ * - Tab headers use `role="tab"` with `aria-selected` and `aria-controls`
+ * - Tab panels use `role="tabpanel"` with `aria-labelledby`
+ * - `aria-disabled` on disabled tabs
+ * - Arrow keys (horizontal + vertical), Home, and End for tab navigation
+ * - Disabled tabs are skipped during keyboard navigation
+ * - Visible focus indicator via `:focus-visible`
+ */
+declare const meta: Meta<PdTabArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const TabDefault: Story;
+type Story = StoryObj<PdTabArgs>;
+/** Default tab component with three tabs. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Overview of different tab configurations: default, disabled, short labels, and minimal. */
+export declare const AllStates: Story;
+/**
+ * Resizable container to test responsive label switching.
+ * Drag the right edge to resize and watch: Full Label -> Short Label.
+ */
+export declare const ResponsiveCascade: Story;
+/** Behavior with six tabs in the navigation bar. */
+export declare const ManyTabs: Story;
+/** Tabs with rich content including lists and tables. */
+export declare const WithRichContent: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-tab.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-tab.stories.d.ts","sourceRoot":"","sources":["../../src/pd-tab/pd-tab.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,aAAa,CAAC;AAGrB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC"}
+{"version":3,"file":"pd-tab.stories.d.ts","sourceRoot":"","sources":["../../src/pd-tab/pd-tab.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C;;;GAGG;AACH,UAAU,SAAS;IACjB,sCAAsC;IACtC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAqCD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,SAAS,CA4DzB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAMjC,6EAA6E;AAC7E,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAMF,8FAA8F;AAC9F,eAAO,MAAM,SAAS,EAAE,KAkDvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,eAAe,EAAE,KAyE7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAkF3B,CAAC"}

package/dist/pd-timeline/PdTimeline.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { Orientation, PointItem } from '../types';
+/**
+ * Timeline/stepper component for displaying sequential steps or progress.
+ *
+ * @tagname pd-timeline
+ * @summary Timeline stepper for sequential steps or progress display.
+ *
+ * @event step-click - Fired when a clickable point is clicked. Emits `{index, id}`.
+ *
+ * @slot label-[index] - Named slots for custom label content at each point.
+ *
+ * @csspart label - The label container element for each timeline point.
+ *
+ * @cssprop --pd-timeline-line-color - Connecting line color.
+ * @cssprop --pd-timeline-line-width - Connecting line width.
+ * @cssprop --pd-timeline-line-style - Connecting line style.
+ * @cssprop --pd-timeline-point-size - Point circle size.
+ * @cssprop --pd-timeline-point-bg - Point background color.
+ * @cssprop --pd-timeline-point-color - Point text color.
+ * @cssprop --pd-timeline-point-border-color - Point border color.
+ * @cssprop --pd-timeline-point-border-width - Point border width.
+ * @cssprop --pd-timeline-point-font-size - Point text size.
+ * @cssprop --pd-timeline-label-gap - Gap between point and label.
+ * @cssprop --pd-timeline-label-max-width - Maximum label width.
+ * @cssprop --pd-timeline-vertical-row-gap - Vertical layout row gap.
+ * @cssprop --pd-timeline-vertical-block-size - Vertical layout height.
+ * @cssprop --pd-timeline-color-active - Active state color.
+ * @cssprop --pd-timeline-color-done - Done state color.
+ * @cssprop --pd-timeline-color-error - Error state color.
+ */
+export declare class PdTimeline extends LitElement {
+    /** Layout direction: 'horizontal' or 'vertical'. */
+    orientation: Orientation;
+    /** Array of point definitions for the timeline. */
+    points: PointItem[];
+    /** Index of the currently active step. */
+    activeIndex?: number;
+    /** Whether points are clickable. */
+    clickable: boolean;
+    static styles: import('lit').CSSResult;
+    protected updated(): void;
+    private _labelClass;
+    private _stateClass;
+    private _onClick;
+    private _onKeyDown;
+    private _renderDotContent;
+    protected render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=PdTimeline.d.ts.map

package/dist/pd-timeline/PdTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdTimeline.d.ts","sourceRoot":"","sources":["../../src/pd-timeline/PdTimeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAyB,MAAM,UAAU,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,oDAAoD;IAEpD,WAAW,EAAE,WAAW,CAAgB;IAExC,mDAAmD;IAEnD,MAAM,EAAE,SAAS,EAAE,CAAM;IAEzB,0CAA0C;IAE1C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IAEpC,SAAS,UAAS;IAElB,MAAM,CAAC,MAAM,0BA+LX;IAEF,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,iBAAiB;IAWzB,SAAS,CAAC,MAAM;CAoDjB"}