@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/components/xplayer.d.ts

@@ -1,8 +1,9 @@
 import type { XtendCustomEventMap, XtendLayoutDisplayMediaUxProfile, XtendPublicEventContract } from './xtend-public-types';
 
 export type XPlayerAttributeName = 'src' | 'poster' | 'type' | 'media-chooser' | 'downloadable' | 'autoplay' | 'title' | 'height' | 'width';
-export type XPlayerEventName = 'xplayer-play' | 'xplayer-pause' | 'xplayer-fullscreen' | 'xplayer-pip' | 'xplayer-caption' | 'xplayer-mute';
+export type XPlayerEventName = 'xplayer-play' | 'xplayer-pause' | 'xplayer-state' | 'xplayer-fullscreen' | 'xplayer-pip' | 'xplayer-caption' | 'xplayer-mute';
 export type XPlayerLayoutDisplayMediaUxProfile = XtendLayoutDisplayMediaUxProfile<'x-player'>;
+export type XPlayerRmtCommandName = 'play-media' | 'pause-media' | 'set-source' | 'set-state' | 'apply-theme' | 'play' | 'pause';
 
 export interface XPlayerPlaybackEventDetail {
   currentTime: number;
@@ -16,6 +17,16 @@ export interface XPlayerMuteEventDetail {
   muted: boolean;
 }
 
+export interface XPlayerStateEventDetail {
+  src?: string | null;
+  type?: string;
+  playing: boolean;
+  currentTime: number;
+  volume: number;
+  muted: boolean;
+  fullscreen?: boolean;
+}
+
 export interface XPlayerEmptyEventDetail {
   [key: string]: never;
 }
@@ -34,6 +45,7 @@ export interface XPlayerSnapshot {
 export interface XPlayerEventDetailMap {
   'xplayer-play': XPlayerPlaybackEventDetail;
   'xplayer-pause': XPlayerPlaybackEventDetail;
+  'xplayer-state': XPlayerStateEventDetail;
   'xplayer-fullscreen': XPlayerFullscreenEventDetail;
   'xplayer-pip': XPlayerEmptyEventDetail;
   'xplayer-caption': XPlayerEmptyEventDetail;
@@ -41,10 +53,40 @@ export interface XPlayerEventDetailMap {
 }
 
 export type XPlayerEventMap = XtendCustomEventMap<XPlayerEventDetailMap>;
-export type XPlayerPublicEventContract = XtendPublicEventContract<XPlayerEventName, XPlayerPlaybackEventDetail | XPlayerFullscreenEventDetail | XPlayerMuteEventDetail | XPlayerEmptyEventDetail>;
+export type XPlayerPublicEventContract = XtendPublicEventContract<XPlayerEventName, XPlayerPlaybackEventDetail | XPlayerStateEventDetail | XPlayerFullscreenEventDetail | XPlayerMuteEventDetail | XPlayerEmptyEventDetail>;
+
+export interface XPlayerRmtPlayerContract {
+  schema: 'xtend.mm-rmt.player-contract.v1';
+  tag: 'x-player';
+  commands: XPlayerRmtCommandName[];
+  events: XPlayerEventName[];
+  stateKey: 'xplayer-state-<id>';
+  stateBridge: 'xstate-host-bridge';
+  themeTokens: string[];
+  parts: string[];
+}
+
+export interface XPlayerRmtCommand {
+  kind?: XPlayerRmtCommandName;
+  type?: XPlayerRmtCommandName;
+  command?: XPlayerRmtCommandName;
+  src?: string;
+  source?: string;
+  typeHint?: string;
+  poster?: string;
+  state?: Partial<XPlayerStateEventDetail>;
+  tokens?: Record<string, string | number>;
+  theme?: Record<string, string | number>;
+}
 
 export interface XPlayerElement extends HTMLElement {
   snapshot(): XPlayerSnapshot;
+  getRmtPlayerContract(): XPlayerRmtPlayerContract;
+  applyRmtPlayerCommand(command: XPlayerRmtCommandName | XPlayerRmtCommand, payload?: Record<string, unknown>): Promise<XPlayerSnapshot> | XPlayerStateEventDetail | { schema: 'xtend.mm-rmt.player-theme-report.v1'; tokenCount: number };
+  playMedia(): Promise<XPlayerSnapshot>;
+  pauseMedia(): XPlayerStateEventDetail;
+  setMediaState(patch?: Partial<XPlayerStateEventDetail>): XPlayerStateEventDetail;
+  applyRmtThemeTokens(tokens?: Record<string, string | number>): { schema: 'xtend.mm-rmt.player-theme-report.v1'; tokenCount: number };
   addEventListener<K extends keyof XPlayerEventMap>(type: K, listener: (event: XPlayerEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 }
 

package/components/xplayer.js

@@ -23,6 +23,19 @@ class XPlayer extends HTMLElement {
     };
   }
 
+  static get xtendRmtPlayerContract() {
+    return {
+      schema: "xtend.mm-rmt.player-contract.v1",
+      tag: "x-player",
+      commands: ["play-media", "pause-media", "set-source", "set-state", "apply-theme"],
+      events: ["xplayer-play", "xplayer-pause", "xplayer-state", "xplayer-fullscreen", "xplayer-pip", "xplayer-caption", "xplayer-mute"],
+      stateKey: "xplayer-state-<id>",
+      stateBridge: "xstate-host-bridge",
+      themeTokens: ["--x-player-primary", "--x-player-accent", "--x-player-background", "--x-player-radius"],
+      parts: ["root", "media", "title", "overlay", "spinner-overlay", "spinner", "big-controls", "controls", "progress"]
+    };
+  }
+
   static get xtendScaffoldA11yProfile() {
     return {
       schema: "xtend.a11y.screenreader-signals.v1",
@@ -44,6 +57,20 @@ class XPlayer extends HTMLElement {
     };
   }
 
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: "xtend.layout-stability.v1",
+      componentRef: "x-player",
+      minBlockSize: "var(--x-player-reserved-block-size, var(--xtend-layout-reserved-block-size, 18rem))",
+      intrinsicSize: "auto var(--x-player-reserved-block-size, 18rem)",
+      aspectRatio: "var(--x-player-aspect-ratio, 16 / 9)",
+      slotReserve: ["media", "controls", "poster"],
+      hydrationShiftPolicy: "no-geometry-shift",
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
+
   static get xtendLayoutDisplayMediaUxProfile() {
     return {
       schema: "xtend.component.layout-display-media-ux-profile.v1",
@@ -69,10 +96,23 @@ class XPlayer extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this._autoplayUnmuted = false;
     this._dialogOpen = false; // <--- NEU: Globales Dialog-Flag für Endlosschutz
+    this._resizeObserver = null;
+    this._resizeFrame = null;
     this.shadowRoot.innerHTML = `
       <style>
         :host {
           display: block;
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          min-height: var(--x-player-reserved-block-size, var(--xtend-layout-reserved-block-size, 0));
+          max-width: 100%;
+          max-height: 100%;
+          aspect-ratio: var(--x-player-aspect-ratio, 16 / 9);
+          contain-intrinsic-size: auto var(--x-player-reserved-block-size, var(--xtend-layout-reserved-block-size, 18rem));
+          overflow: hidden;
+          box-sizing: border-box;
+          container-type: inline-size;
           font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
           --glass-bg: rgba(30, 34, 44, 0.55);
           --glass-blur: 18px;
@@ -85,6 +125,13 @@ class XPlayer extends HTMLElement {
           --focus-outline: 2px solid var(--primary);
         }
         .player {
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          min-height: 0;
+          max-width: 100%;
+          max-height: 100%;
+          box-sizing: border-box;
           background: var(--glass-bg);
           border-radius: var(--border-radius);
           box-shadow: var(--shadow);
@@ -110,6 +157,10 @@ class XPlayer extends HTMLElement {
           left: 1.2em;
           right: 1.2em;
           z-index: 10;
+          box-sizing: border-box;
+          min-width: 0;
+          max-width: calc(100% - 2.4em);
+          overflow: visible;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.3s, box-shadow 0.3s;
@@ -122,7 +173,8 @@ class XPlayer extends HTMLElement {
           display: flex;
           align-items: center;
           gap: 0.5em;
-          flex: none;
+          flex: 0 1 auto;
+          min-width: 0;
         }
         .progress {
           flex: 1 1 0%;
@@ -140,11 +192,12 @@ class XPlayer extends HTMLElement {
           display: flex;
           align-items: center;
           justify-content: flex-end;
-          min-width: unset;
-          max-width: unset;
+          min-width: 0;
+          max-width: 100%;
           width: auto;
           gap: 0.5em;
-          flex: none;
+          flex: 0 1 auto;
+          overflow: visible;
         }
         .volume-container {
           display: flex;
@@ -181,6 +234,8 @@ class XPlayer extends HTMLElement {
           justify-content: center;
           padding: 0.7em 0;
         }
+        .volume-container:hover .volume-slider,
+        .volume-container:focus-within .volume-slider,
         .volume-container.expanded .volume-slider {
           opacity: 1;
           transform: translateX(-50%) scaleY(1);
@@ -201,9 +256,19 @@ class XPlayer extends HTMLElement {
           display: flex;
           align-items: center;
           gap: 0.5em;
-          flex-shrink: 0;
+          min-width: 0;
+          max-width: 100%;
+          overflow: hidden;
+          flex: 0 1 auto;
           transition: none;
         }
+        .time,
+        .branding {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
         button, .icon-btn {
           background: rgba(255,255,255,0.08);
           border: none;
@@ -340,6 +405,13 @@ class XPlayer extends HTMLElement {
           position: absolute;
           top: 1.2em;
           left: 1.2em;
+          box-sizing: border-box;
+          max-width: calc(100% - 2.4em);
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow-wrap: normal;
           color: var(--accent);
           background: rgba(30,34,44,0.38);
           padding: 0.4em 1.2em;
@@ -548,6 +620,8 @@ class XPlayer extends HTMLElement {
           justify-content: center;
           padding: 0.7em 0;
         }
+        .volume-container:hover .volume-slider,
+        .volume-container:focus-within .volume-slider,
         .volume-container.expanded .volume-slider {
           opacity: 1;
           transform: translateX(-50%) scaleY(1);
@@ -567,6 +641,12 @@ class XPlayer extends HTMLElement {
         .media-container {
           width: 100%;
           height: 100%;
+          min-width: 0;
+          min-height: 0;
+          max-width: 100%;
+          max-height: 100%;
+          box-sizing: border-box;
+          overflow: hidden;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -575,6 +655,11 @@ class XPlayer extends HTMLElement {
         video, audio {
           width: 100%;
           height: 100%;
+          min-width: 0;
+          min-height: 0;
+          max-width: 100%;
+          max-height: 100%;
+          box-sizing: border-box;
           object-fit: cover;
           display: block;
           border-radius: var(--border-radius);
@@ -589,6 +674,23 @@ class XPlayer extends HTMLElement {
             transition: none !important;
           }
         }
+        @container (max-width: 520px) {
+          .controls {
+            left: 0;
+            right: 0;
+            bottom: 0;
+            max-width: 100%;
+            gap: 0.35em;
+            padding: 0.5em;
+          }
+          .progress {
+            min-width: 28px;
+            margin: 0 0.35em;
+          }
+          .branding {
+            display: none;
+          }
+        }
         @media (forced-colors: active) {
           .player, .controls, button, .icon-btn, .progress {
             border: 1px solid CanvasText;
@@ -650,6 +752,13 @@ class XPlayer extends HTMLElement {
     `;
   }
 
+  _removeNativeTitles() {
+    if (!this.shadowRoot) return;
+    Array.from(this.shadowRoot.querySelectorAll('[title]')).forEach((element) => {
+      element.removeAttribute('title');
+    });
+  }
+
   connectedCallback() {
     this._loadMedia();
     this._initControls();
@@ -661,6 +770,8 @@ class XPlayer extends HTMLElement {
     this._setupBigControls();
     this._setupCursorHiding();
     this._updateDimensions();
+    this._observePlayerResize();
+    this._removeNativeTitles();
 
     // Add the loaded class to trigger branding animation
     this.classList.add("loaded");
@@ -906,6 +1017,18 @@ class XPlayer extends HTMLElement {
 
   disconnectedCallback() {
     if (this._unsubscribeState) this._unsubscribeState();
+    if (this._removeTitleInterval) {
+      clearInterval(this._removeTitleInterval);
+      this._removeTitleInterval = null;
+    }
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    if (this._resizeFrame) {
+      cancelAnimationFrame(this._resizeFrame);
+      this._resizeFrame = null;
+    }
   }
 
   snapshot() {
@@ -921,6 +1044,89 @@ class XPlayer extends HTMLElement {
     };
   }
 
+  getRmtPlayerContract() {
+    return XPlayer.xtendRmtPlayerContract;
+  }
+
+  setMediaState(patch = {}) {
+    const stateKey = `xplayer-state-${this.id || "unmounted"}`;
+    const currentState = typeof xstate.get === "function" ? (xstate.get(stateKey) || {}) : {};
+    if (patch.src && patch.src !== this.getAttribute("src")) {
+      this.setAttribute("src", patch.src);
+    }
+    if (this._media) {
+      if (typeof patch.currentTime === "number") this._media.currentTime = patch.currentTime;
+      if (typeof patch.volume === "number") this._media.volume = Math.max(0, Math.min(1, patch.volume));
+      if (typeof patch.muted === "boolean") this._media.muted = patch.muted;
+    }
+    const nextState = {
+      ...currentState,
+      ...patch,
+      src: patch.src || this.getAttribute("src"),
+      playing: typeof patch.playing === "boolean" ? patch.playing : (this._media ? !this._media.paused : Boolean(currentState.playing)),
+      currentTime: this._media ? this._media.currentTime : (patch.currentTime || currentState.currentTime || 0),
+      volume: this._media ? this._media.volume : (typeof patch.volume === "number" ? patch.volume : currentState.volume || 1),
+      muted: this._media ? this._media.muted : (typeof patch.muted === "boolean" ? patch.muted : Boolean(currentState.muted))
+    };
+    if (typeof xstate.set === "function") xstate.set(stateKey, nextState);
+    if (typeof CustomEvent === "function") {
+      this.dispatchEvent(new CustomEvent("xplayer-state", { detail: nextState }));
+    }
+    return nextState;
+  }
+
+  playMedia() {
+    if (!this._media || typeof this._media.play !== "function") {
+      return Promise.resolve(this.setMediaState({ playing: false }));
+    }
+    const playRequest = this._media.play();
+    this.setMediaState({ playing: true });
+    return playRequest && typeof playRequest.then === "function"
+      ? playRequest.then(() => this.snapshot()).catch((error) => {
+        this.setMediaState({ playing: this._media ? !this._media.paused : false });
+        throw error;
+      })
+      : Promise.resolve(this.snapshot());
+  }
+
+  pauseMedia() {
+    if (this._media && typeof this._media.pause === "function") {
+      this._media.pause();
+    }
+    return this.setMediaState({ playing: false });
+  }
+
+  applyRmtThemeTokens(tokens = {}) {
+    Object.entries(tokens || {}).forEach(([name, value]) => {
+      if (value === null || typeof value === "undefined") return;
+      const tokenName = String(name).startsWith("--") ? String(name) : `--x-player-${String(name).replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
+      this.style.setProperty(tokenName, String(value));
+    });
+    return {
+      schema: "xtend.mm-rmt.player-theme-report.v1",
+      tokenCount: Object.keys(tokens || {}).length
+    };
+  }
+
+  applyRmtPlayerCommand(command, payload = {}) {
+    const kind = typeof command === "string" ? command : command && (command.kind || command.type || command.command);
+    const data = typeof command === "object" && command && !Array.isArray(command)
+      ? { ...command, ...payload }
+      : payload;
+    if (kind === "play-media" || kind === "play") return this.playMedia(data);
+    if (kind === "pause-media" || kind === "pause") return this.pauseMedia(data);
+    if (kind === "set-source") {
+      const src = data.src || data.source || "";
+      if (src) this.setAttribute("src", src);
+      if (data.type) this.setAttribute("type", data.type);
+      if (data.poster) this.setAttribute("poster", data.poster);
+      return this.setMediaState({ src, type: data.type || this.getAttribute("type") || "video", playing: false });
+    }
+    if (kind === "set-state") return this.setMediaState(data.state || data);
+    if (kind === "apply-theme") return this.applyRmtThemeTokens(data.tokens || data.theme || data);
+    throw new Error(`Unsupported x-player RMT command: ${kind || "unknown"}`);
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (["src", "poster", "type", "media-chooser", "downloadable", "title"].includes(name)) {
       this._loadMedia();
@@ -1074,6 +1280,13 @@ class XPlayer extends HTMLElement {
       hasPlayed = true; // <-- Mark as played
       this.updatePlayPauseIcon();
       this._hideOverlay();
+      this.dispatchEvent(new CustomEvent("xplayer-play", {
+        detail: {
+          currentTime: media.currentTime,
+          src: media.currentSrc || media.src,
+          source: "media-event"
+        }
+      }));
 
       this._internalStateUpdate = true;
       const prev = xstate.get(`xplayer-state-${this.id}`) || {};
@@ -1089,6 +1302,15 @@ class XPlayer extends HTMLElement {
 
     media.addEventListener("pause", () => {
       if (hasPlayed) this._showOverlay();
+      if (hasPlayed) {
+        this.dispatchEvent(new CustomEvent("xplayer-pause", {
+          detail: {
+            currentTime: media.currentTime,
+            src: media.currentSrc || media.src,
+            source: "media-event"
+          }
+        }));
+      }
 
       this._internalStateUpdate = true;
       const prev = xstate.get(`xplayer-state-${this.id}`) || {};
@@ -1254,10 +1476,8 @@ class XPlayer extends HTMLElement {
           e.preventDefault();
           if (media.paused) {
             media.play();
-            this.dispatchEvent(new CustomEvent("xplayer-play", { detail: { currentTime: media.currentTime } }));
           } else {
             media.pause();
-            this.dispatchEvent(new CustomEvent("xplayer-pause", { detail: { currentTime: media.currentTime } }));
           }
           this.updatePlayPauseIcon();
         };
@@ -1493,10 +1713,8 @@ class XPlayer extends HTMLElement {
       e.preventDefault();
       if (this._media.paused) {
         this._media.play();
-        this.dispatchEvent(new CustomEvent("xplayer-play", { detail: { currentTime: this._media.currentTime } }));
       } else {
         this._media.pause();
-        this.dispatchEvent(new CustomEvent("xplayer-pause", { detail: { currentTime: this._media.currentTime } }));
       }
       this.updatePlayPauseIcon();
     });
@@ -1681,6 +1899,18 @@ class XPlayer extends HTMLElement {
     return `${m}:${s}`;
   }
 
+  _observePlayerResize() {
+    if (typeof ResizeObserver !== "function" || this._resizeObserver) return;
+    this._resizeObserver = new ResizeObserver(() => {
+      if (this._resizeFrame) cancelAnimationFrame(this._resizeFrame);
+      this._resizeFrame = requestAnimationFrame(() => {
+        this._resizeFrame = null;
+        this._updateDimensions();
+      });
+    });
+    this._resizeObserver.observe(this);
+  }
+
   _updateDimensions() {
     const container = this.shadowRoot.querySelector("#media-container");
     const player = this.shadowRoot.querySelector(".player");
@@ -1724,7 +1954,9 @@ class XPlayer extends HTMLElement {
   }
 }
 
-customElements.define("x-player", XPlayer);
+if (!customElements.get("x-player")) {
+  customElements.define("x-player", XPlayer);
+}
 
 // SVG-Icon Helper (direkt im File, keine Abhängigkeit)
 function svgIcon(name) {
@@ -1741,8 +1973,3 @@ function svgIcon(name) {
     default: return '';
   }
 }
-
-// Entferne alle title-Attribute von Steuerelementen im Shadow DOM
-Array.from(this.shadowRoot.querySelectorAll('[title]')).forEach(el => {
-  el.removeAttribute('title');
-});

package/components/xrouter.js

@@ -106,6 +106,20 @@ class XRouter extends HTMLElement {
     };
   }
 
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: 'xtend.layout-stability.v1',
+      componentRef: 'x-router',
+      minBlockSize: 'var(--xtend-router-reserved-block-size, var(--xtend-layout-reserved-block-size, 12rem))',
+      intrinsicSize: 'auto var(--xtend-router-reserved-block-size, 12rem)',
+      slotReserve: ['outlet'],
+      hydrationShiftPolicy: 'no-geometry-shift',
+      skeletonParity: true,
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
+
   static get xtendNavigationRoutingUxProfile() {
     return {
       schema: 'xtend.component.navigation-routing-ux-profile.v1',
@@ -465,6 +479,8 @@ class XRouter extends HTMLElement {
       <style>
         :host {
           display: block;
+          min-block-size: var(--xtend-router-reserved-block-size, var(--xtend-layout-reserved-block-size, 1px));
+          contain-intrinsic-size: auto var(--xtend-router-reserved-block-size, var(--xtend-layout-reserved-block-size, 12rem));
           --xtend-nav-surface: transparent;
           --xtend-nav-text: var(--xtend-text-primary, var(--xtend-text, CanvasText));
           --xtend-nav-border-color: transparent;
@@ -483,11 +499,12 @@ class XRouter extends HTMLElement {
           --xtend-router-text: var(--xtend-nav-text);
         }
         #outlet {
-          min-height: 1px;
+          min-height: var(--xtend-router-reserved-block-size, var(--xtend-layout-reserved-block-size, 1px));
           outline: none;
           color: var(--xtend-router-text);
           background: var(--xtend-router-surface);
           overflow-wrap: anywhere;
+          box-sizing: border-box;
         }
         #outlet[data-xtend-skeleton-active="true"] {
           display: block;
@@ -500,7 +517,7 @@ class XRouter extends HTMLElement {
           margin-inline: var(--xtend-skeleton-margin-inline, 0);
           min-width: 0;
           box-sizing: border-box;
-          min-height: var(--xtend-router-skeleton-min-height, 12rem);
+          min-height: var(--xtend-router-reserved-block-size, var(--xtend-layout-reserved-block-size, var(--xtend-router-skeleton-min-height, 12rem)));
           padding: var(--xtend-skeleton-padding, 1rem);
           border-radius: var(--xtend-skeleton-radius, 8px);
           background: var(--xtend-skeleton-surface, rgba(148, 163, 184, 0.12));
@@ -1094,6 +1111,14 @@ class XRouter extends HTMLElement {
   _showRouteSkeleton(route, context = {}) {
     if (!this._outlet || !this._routeSkeletonEnabled(route)) return null;
     const options = this._getRouteSkeletonOptions(route, context);
+    if (options.minHeight) {
+      this.style.setProperty('--xtend-router-skeleton-min-height', options.minHeight);
+      if (!this.style.getPropertyValue('--xtend-router-reserved-block-size')) {
+        this.style.setProperty('--xtend-router-reserved-block-size', options.minHeight);
+      }
+      this._outlet.style.setProperty('--xtend-router-skeleton-min-height', options.minHeight);
+      this._outlet.style.setProperty('--xtend-router-reserved-block-size', this.style.getPropertyValue('--xtend-router-reserved-block-size') || options.minHeight);
+    }
     const loader = typeof window !== 'undefined' && window.XTendLoader;
     const skeleton = loader && typeof loader.showSkeleton === 'function'
       ? loader.showSkeleton(this._outlet, options)

package/components/xsection.js

@@ -45,6 +45,19 @@ class XSection extends HTMLElement {
     };
   }
 
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: "xtend.layout-stability.v1",
+      componentRef: "x-section",
+      minBlockSize: "var(--section-reserved-block-size, var(--xtend-layout-reserved-block-size, auto))",
+      intrinsicSize: "auto var(--section-reserved-block-size, 12rem)",
+      slotReserve: ["default"],
+      hydrationShiftPolicy: "no-geometry-shift",
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
+
   static get xtendLayoutDisplayMediaUxProfile() {
     return {
       schema: "xtend.component.layout-display-media-ux-profile.v1",
@@ -90,6 +103,8 @@ class XSection extends HTMLElement {
           border: none;
           max-width: var(--section-content-max, var(--xtend-layout-content-max, 100%));
           min-width: 0;
+          min-block-size: var(--section-reserved-block-size, var(--xtend-layout-reserved-block-size, auto));
+          contain-intrinsic-size: auto var(--section-reserved-block-size, var(--xtend-layout-reserved-block-size, 12rem));
           overflow-wrap: anywhere;
         }
 

package/components/xsidepanel.js

@@ -322,7 +322,8 @@ class XSidePanel extends HTMLElement {
         .content {
           flex: 1;
           min-height: 0;
-          overflow: auto;
+          overflow-y: auto;
+          overflow-x: hidden;
           padding: var(--side-panel-content-padding, 1rem);
         }
         :host([collapsed]) .content {
@@ -609,6 +610,7 @@ class XSidePanel extends HTMLElement {
   _syncA11y(record) {
     if (!this._panel) return;
     const mode = record && record.mode || this._mode();
+    const placement = record && record.placement || this._placement();
     const collapsed = Boolean(record && record.collapsed) || this.hasAttribute('collapsed') || mode === 'collapsed';
     const modal = Boolean(record && record.modal) || this.hasAttribute('modal') || mode === 'overlay';
     this._panel.setAttribute('role', modal ? 'dialog' : 'complementary');
@@ -616,10 +618,16 @@ class XSidePanel extends HTMLElement {
     this._panel.setAttribute('aria-hidden', this.hasAttribute('open') ? 'false' : 'true');
     this._panel.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
     if (this._collapseButton) this._collapseButton.setAttribute('aria-label', collapsed ? 'Expand panel' : 'Collapse panel');
-    if (this._collapseIcon) this._collapseIcon.setAttribute('name', collapsed ? 'chevron-right' : 'chevron-left');
+    if (this._collapseIcon) this._collapseIcon.setAttribute('name', this._collapseIconName(collapsed, placement));
     if (this._pinButton) this._pinButton.setAttribute('aria-pressed', this.hasAttribute('pinned') ? 'true' : 'false');
   }
 
+  _collapseIconName(collapsed, placement) {
+    if (placement === 'right' || placement === 'inline') return collapsed ? 'chevron-left' : 'chevron-right';
+    if (placement === 'bottom') return collapsed ? 'chevron-up' : 'chevron-down';
+    return collapsed ? 'chevron-right' : 'chevron-left';
+  }
+
   _handleActionClick(event) {
     const control = event.target && event.target.closest && event.target.closest('button[data-action]');
     const action = control && control.getAttribute('data-action');

package/components/xsurfacemanager-controller.d.ts

@@ -4,7 +4,7 @@ export declare const SURFACE_SNAPSHOT_SCHEMA: 'xtend.surface.snapshot.v1';
 export declare const SURFACE_DIAGNOSTIC_SCHEMA: 'xtend.surface.diagnostic.v1';
 export declare const SURFACE_OPERATION_RESULT_SCHEMA: 'xtend.surface.operation-result.v1';
 
-export type XtendSurfaceType = 'window' | 'side-panel' | 'modal' | 'dialog' | 'drawer' | 'popover' | 'tooltip';
+export type XtendSurfaceType = 'window' | 'side-panel' | 'modal' | 'dialog' | 'drawer' | 'popover' | 'tooltip' | 'region' | 'toast' | 'lightbox' | 'menu';
 export type XtendSurfaceStatus = 'closed' | 'open' | 'minimized';
 
 export interface XtendSurfaceBounds {
@@ -21,6 +21,7 @@ export interface XtendSurfaceRecord {
   id: string;
   manager: string;
   type: XtendSurfaceType;
+  kind?: string | null;
   label: string;
   stateKey: string;
   status: XtendSurfaceStatus;