@mcp-b/web-components 0.2.0

package/dist/splitter-MnD4In9H.js

@@ -0,0 +1,638 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { DraggableElement } from "@mcp-b/wc-support/utilities/drag";
+import { SigveloResizeEvent } from "@mcp-b/wc-support/events/resize";
+//#region src/components/splitter/splitter.styles.ts
+var splitter_styles_default = css`
+  :host {
+    --divider-min-position: 0%;
+    --divider-max-position: 100%;
+    --divider-draggable-area: 1rem;
+    --divider-width: 0.1875rem;
+
+    display: grid;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-md);
+  }
+
+  #start,
+  #end {
+    overflow: auto;
+    scrollbar-color: var(--sigvelo-color-neutral-bg) transparent;
+    scrollbar-width: thin;
+  }
+
+  #divider {
+    display: flex; /* Center slotted content */
+    z-index: 1; /* Ensure divider stays above content */
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: var(--divider-width);
+    height: var(--divider-width);
+    outline: none; /* Remove default focus outline */
+    background-color: var(--divider-color, var(--sigvelo-color-neutral-border-subtle));
+    cursor: ew-resize;
+    touch-action: none;
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) color ease;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  #divider::before {
+    z-index: 2; /* Above divider for dragging */
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: var(--divider-draggable-area);
+    height: 100%;
+    transform: translateX(-50%);
+    content: "";
+  }
+
+  #handle {
+    z-index: 3; /* Above both divider and drag area */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--divider-width);
+    height: 1.5rem;
+    transform: translate(-50%, -50%);
+    border-radius: var(--sigvelo-radius-xs);
+    background-color: var(--sigvelo-color-neutral-bg);
+    color: var(--sigvelo-color-neutral-text-on-bg);
+  }
+
+  ::slotted(sigvelo-icon) {
+    font-size: 1.25rem;
+  }
+
+  #divider:focus {
+    outline: none;
+  }
+
+  #divider.dragging,
+  #divider:focus-visible,
+  #divider.dragging #handle,
+  #divider:focus-visible #handle {
+    outline: none;
+    background-color: var(--sigvelo-color-primary-bg);
+    color: var(--sigvelo-color-primary-text-on-bg);
+  }
+
+  /* Disabled */
+  :host(:state(disabled)) #divider {
+    cursor: default;
+  }
+
+  :host(:state(disabled)) #handle {
+    display: none;
+  }
+
+  /* Orientation */
+  :host([orientation="horizontal"]) {
+    grid-template-areas: "start divider end";
+  }
+
+  :host([orientation="vertical"]) {
+    grid-template-areas: "start" "divider" "end";
+  }
+
+  :host([orientation="vertical"]) #divider {
+    width: 100%;
+    height: var(--divider-width);
+    cursor: ns-resize;
+  }
+
+  :host([orientation="vertical"]) #divider::before {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: var(--divider-draggable-area);
+    transform: translateY(-50%);
+  }
+
+  :host([orientation="vertical"]) #handle {
+    top: 50%;
+    left: 50%;
+    width: 1.5rem;
+    height: var(--divider-width);
+    transform: translate(-50%, -50%);
+  }
+
+  :host([orientation="horizontal"]) #divider {
+    height: 100%;
+  }
+
+  #start {
+    grid-area: start;
+  }
+
+  #divider {
+    grid-area: divider;
+  }
+
+  #end {
+    grid-area: end;
+  }
+`;
+//#endregion
+//#region src/components/splitter/splitter.ts
+/**
+* <sigvelo-splitter>
+*
+* @summary A draggable splitter that separates two panels, allowing users to resize them.
+* @tag sigvelo-splitter
+* @documentation https://design-system.sigvelo.com/docs/components/splitter
+* @status stable
+* @since 1.0
+*
+* @slot start - The content for the primary (start) panel.
+* @slot end - The content for the secondary (end) panel.
+* @slot handle - The draggable handle that separates the panels.
+*
+* @event sigvelo-resize - Dispatched when the splitter's handle is moved.
+*
+* @csspart start - The content to show in the first (start) panel.
+* @csspart end - The content to show in the second (end) panel.
+* @csspart divider - The draggable divider that separates the panels.
+* @csspart handle - The visual handle within the divider (only present when not using the `handle` slot).
+*
+* @cssstate disabled - Applied when the splitter is disabled.
+* @cssstate dragging - Applied when the splitter is being dragged.
+* @cssstate focused - Applied when the splitter has focus.
+*
+* @cssproperty [--divider-min-position=0%] - Minimum position of the divider (as a percentage or pixel value).
+* @cssproperty [--divider-max-position=100%] - Maximum position of the divider (as a percentage or pixel value).
+* @cssproperty [--divider-draggable-area=1rem] - The size of the divider's draggable area (can be larger than the
+*  visible area).
+* @cssproperty [--divider-width=0.125rem] - The width of the visual divider.
+*
+* @example Default
+* Splitters follow the ARIA APG window splitter pattern for accessibility. They consist of a draggable separator positioned between two resizable panels.
+*
+* ```html
+* <sigvelo-splitter id="splitter__overview">
+*   <div slot="start">Start panel</div>
+*   <div slot="end">End panel</div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__overview {
+*     height: 200px;
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*
+*
+*
+* You can set the initial position of the divider using the `position` attribute or update it programmatically via JavaScript. The value is a number from 0 to 1 representing the divider's position as a percentage.
+*
+* ```html
+* <sigvelo-splitter position=".75" id="splitter__position">
+*   <div slot="start">Start panel</div>
+*   <div slot="end">End panel</div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__position {
+*     height: 200px;
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Constraining the divider
+* Set the `--divider-min-position` and `--divider-max-position` custom properties to limit the range of the divider's movement. In this example, the divider is constrained between 25% and 75% of the splitter's size.
+*
+* ```html
+* <sigvelo-splitter style="--divider-min-position: 25%; --divider-max-position: 75%;" id="splitter__constraints">
+*   <div slot="start">Start panel</div>
+*   <div slot="end">End panel</div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__constraints {
+*     height: 200px;
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Changing the orientation
+* Set the `orientation` attribute to `vertical` to change the splitter's orientation.
+*
+* ```html
+* <sigvelo-splitter orientation="vertical" id="splitter__orientation">
+*   <div slot="start">Start panel</div>
+*   <div slot="end">End panel</div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__orientation {
+*     height: 400px;
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Snapping
+* Set the `snap` attribute to a space-separated list of positions at which to snap. Only percentages are supported, e.g. `snap="25% 50% 75%"`. Use the `snap-threshold` attribute to change the proximity at which snapping occurs.
+*
+* ```html
+* <div id="splitter__snap">
+*   <sigvelo-splitter snap="25% 50% 75%">
+*     <div slot="start">Start panel</div>
+*     <div slot="end">End panel</div>
+*   </sigvelo-splitter>
+*
+*   <div class="snap-dots">
+*     <span class="snap-dot" style="left: 25%;"></span>
+*     <span class="snap-dot" style="left: 50%;"></span>
+*     <span class="snap-dot" style="left: 75%;"></span>
+*   </div>
+* </div>
+*
+* <style>
+*   #splitter__snap {
+*     sigvelo-splitter {
+*       height: 200px;
+*     }
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*
+*     .snap-dots {
+*       position: relative;
+*       width: 100%;
+*       margin-top: .5rem;
+*     }
+*
+*     .snap-dot {
+*       position: absolute;
+*       width: 4px;
+*       height: 4px;
+*       background-color: gray;
+*       border-radius: var(--sigvelo-radius-circle);
+*       transform: translateX(-50%);
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Disabling
+* When the `disabled` attribute is set, the divider cannot be dragged or focused and the handle is hidden, though the divider line remains visible.
+*
+* ```html
+* <sigvelo-splitter disabled id="splitter__disabled">
+*   <div slot="start">Start panel</div>
+*   <div slot="end">End panel</div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__disabled {
+*     height: 200px;
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Nested splitters
+* Splitters can be nested to create advanced layouts.
+*
+* ```html
+* <sigvelo-splitter id="splitter__nested">
+*   <div slot="start">
+*     Panel 1
+*   </div>
+*   <div slot="end">
+*     <sigvelo-splitter orientation="vertical">
+*       <div slot="start">
+*         Panel 2
+*       </div>
+*       <div slot="end">
+*         Panel 3
+*       </div>
+*     </sigvelo-splitter>
+*   </div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__nested {
+*     height: 300px;
+*
+*     sigvelo-splitter {
+*       height: 100%;
+*       border-radius: 0;
+*       border: none;
+*
+*       > div {
+*         height: 100%;
+*       }
+*     }
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Styling the divider
+* You can customize the divider by slotting content such as an icon into the `handle` slot. To change the divider's width, set the `--divider-width` custom property.
+*
+* ```html
+* <sigvelo-splitter style="height: 200px;" id="splitter__custom-divider">
+*   <div slot="start">Start panel</div>
+*   <sigvelo-icon slot="handle" name="grip-vertical"></sigvelo-icon>
+*   <div slot="end">End panel</div>
+* </sigvelo-splitter>
+*
+* <style>
+*   #splitter__custom-divider {
+*     --divider-width: 1rem;
+*
+*     <!-- Center the text for the demo -->
+*     [slot="start"],
+*     [slot="end"] {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       height: 100%;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloSplitter = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.previousPosition = .5;
+		this.dragStartPosition = 0;
+		this.dragStartClientX = 0;
+		this.dragStartClientY = 0;
+		this.isCollapsed = false;
+		this.isDragging = false;
+		this.position = .5;
+		this.orientation = "horizontal";
+		this.disabled = false;
+		this.snap = "";
+		this.snapThreshold = 10;
+	}
+	static {
+		this.styles = [hostStyles, splitter_styles_default];
+	}
+	firstUpdated() {
+		this.setupDragging();
+		this.updateGridTemplate();
+		this.updateAriaValue();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("orientation") || changedProperties.has("snap")) {
+			this.updateGridTemplate();
+			this.setupDragging();
+		}
+		if (changedProperties.has("position")) {
+			this.updateGridTemplate();
+			this.updateAriaValue();
+		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("isDragging")) this.customStates.set("dragging", this.isDragging);
+	}
+	disconnectedCallback() {
+		this.dragHandler?.stop();
+		super.disconnectedCallback();
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+	}
+	getSnapPoints() {
+		if (!this.snap) return [];
+		return this.snap.split(" ").map((point) => parseFloat(point.replace("%", ""))).filter((point) => !isNaN(point) && point >= 0 && point <= 100);
+	}
+	snapToNearest(position) {
+		const snapPoints = this.getSnapPoints();
+		if (snapPoints.length === 0) return position;
+		const rect = this.getBoundingClientRect();
+		const totalSize = this.orientation === "horizontal" ? rect.width : rect.height;
+		const positionInPixels = position * 100 / 100 * totalSize;
+		for (const snapPoint of snapPoints) {
+			const snapPointInPixels = snapPoint / 100 * totalSize;
+			if (Math.abs(positionInPixels - snapPointInPixels) <= this.snapThreshold) return snapPoint / 100;
+		}
+		return position;
+	}
+	getDividerConstraint(value, totalSize, isMin) {
+		if (!value) return isMin ? 0 : 1;
+		if (value.endsWith("%")) return parseFloat(value.replace("%", "")) / 100;
+		else if (value.endsWith("px")) return parseFloat(value.replace("px", "")) / totalSize;
+		return isMin ? 0 : 1;
+	}
+	clampPosition(position) {
+		const rect = this.getBoundingClientRect();
+		const totalSize = this.orientation === "horizontal" ? rect.width : rect.height;
+		const minPosition = this.getDividerConstraint(getComputedStyle(this).getPropertyValue("--divider-min-position"), totalSize, true);
+		const maxPosition = this.getDividerConstraint(getComputedStyle(this).getPropertyValue("--divider-max-position"), totalSize, false);
+		return Math.max(minPosition, Math.min(maxPosition, position));
+	}
+	setupDragging() {
+		this.dragHandler?.stop();
+		if (this.disabled) return;
+		this.dragHandler = new DraggableElement(this.divider, {
+			start: (clientX, clientY) => {
+				this.isDragging = true;
+				this.dragStartPosition = this.position;
+				this.dragStartClientX = clientX;
+				this.dragStartClientY = clientY;
+				this.customStates.set("dragging", true);
+			},
+			move: (clientX, clientY) => {
+				const isRtl = this.localize.dir() === "rtl";
+				const rect = this.getBoundingClientRect();
+				let deltaPercentage;
+				if (this.orientation === "horizontal") deltaPercentage = (clientX - this.dragStartClientX) / rect.width * (isRtl ? -1 : 1);
+				else deltaPercentage = (clientY - this.dragStartClientY) / rect.height;
+				const newPositionRaw = this.dragStartPosition + deltaPercentage;
+				const newPosition = this.snapToNearest(this.clampPosition(newPositionRaw));
+				if (this.position !== newPosition) {
+					this.position = newPosition;
+					this.updateGridTemplate();
+					this.updateAriaValue();
+					this.dispatchEvent(new SigveloResizeEvent());
+				}
+			},
+			stop: () => {
+				this.isDragging = false;
+				this.customStates.set("dragging", false);
+			}
+		});
+	}
+	updateGridTemplate() {
+		const positionPercent = this.position * 100;
+		if (this.orientation === "horizontal") {
+			this.style.gridTemplateColumns = `minmax(0, ${positionPercent}%) var(--divider-width, 0.125rem) minmax(0, ${100 - positionPercent}%)`;
+			this.style.gridTemplateRows = "1fr";
+		} else {
+			this.style.gridTemplateRows = `minmax(0, ${positionPercent}%) var(--divider-width, 0.125rem) minmax(0, ${100 - positionPercent}%)`;
+			this.style.gridTemplateColumns = "1fr";
+		}
+	}
+	updateAriaValue() {
+		this.divider.setAttribute("aria-valuenow", (this.position * 100).toString());
+	}
+	handleKeydown(event) {
+		if (this.disabled) return;
+		const isRtl = this.localize.dir() === "rtl";
+		const step = .05;
+		let newPosition = this.position;
+		switch (event.key) {
+			case "ArrowLeft":
+			case "ArrowUp":
+				newPosition = isRtl ? this.position + step : this.position - step;
+				break;
+			case "ArrowRight":
+			case "ArrowDown":
+				newPosition = isRtl ? this.position - step : this.position + step;
+				break;
+			case "Home":
+				newPosition = isRtl ? 1 : 0;
+				break;
+			case "End":
+				newPosition = isRtl ? 0 : 1;
+				break;
+			case "Enter":
+				if (!this.isCollapsed) {
+					this.previousPosition = this.position;
+					newPosition = 0;
+					this.isCollapsed = true;
+				} else {
+					newPosition = this.previousPosition;
+					this.isCollapsed = false;
+				}
+				break;
+			default: return;
+		}
+		newPosition = this.clampPosition(newPosition);
+		if (newPosition !== this.position) {
+			event.preventDefault();
+			this.position = newPosition;
+			this.updateGridTemplate();
+			this.updateAriaValue();
+			this.dispatchEvent(new SigveloResizeEvent());
+		}
+	}
+	render() {
+		return html`
+      <div id="start" part="start">
+        <slot name="start"></slot>
+      </div>
+
+      <div
+        id="divider"
+        part="divider"
+        class=${classMap({ dragging: this.isDragging })}
+        role="separator"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-label=${this.localize.term("resize")}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="50"
+        @keydown=${this.handleKeydown}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot name="handle">
+          <div id="handle" part="handle"></div>
+        </slot>
+      </div>
+
+      <div id="end" part="end">
+        <slot name="end"></slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("#divider")], SigveloSplitter.prototype, "divider", void 0);
+__decorate([state()], SigveloSplitter.prototype, "isCollapsed", void 0);
+__decorate([state()], SigveloSplitter.prototype, "isDragging", void 0);
+__decorate([property({ type: Number })], SigveloSplitter.prototype, "position", void 0);
+__decorate([property({ reflect: true })], SigveloSplitter.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSplitter.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloSplitter.prototype, "snap", void 0);
+__decorate([property({
+	attribute: "snap-threshold",
+	type: Number
+})], SigveloSplitter.prototype, "snapThreshold", void 0);
+customElements.define("sigvelo-splitter", SigveloSplitter);
+//#endregion
+export { SigveloSplitter as t };