@mcp-b/web-components 0.2.0

package/dist/spinner-C04Dmc0H.js

@@ -0,0 +1,188 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/spinner/spinner.styles.ts
+var spinner_styles_default = css`
+  :host {
+    --indicator-color: var(--sigvelo-color-primary-bg);
+    --track-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg), transparent 75%);
+    --speed: 0.75s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+  }
+
+  /* Default spinner */
+  svg {
+    transform-origin: center;
+    animation: rotate var(--speed) linear infinite;
+
+    &:dir(rtl) {
+      animation-name: rotate-rtl;
+    }
+  }
+
+  #track {
+    stroke: var(--track-color);
+  }
+
+  #indicator {
+    stroke: var(--indicator-color);
+    stroke-dasharray: 30, 50;
+    stroke-dashoffset: -5;
+    stroke-linecap: round;
+  }
+
+  /* Custom spinners */
+  ::slotted(img),
+  ::slotted(svg) {
+    min-width: 1em;
+    min-height: 1em;
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotate-rtl {
+    0% {
+      transform: rotate(360deg);
+    }
+
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+`;
+//#endregion
+//#region src/components/spinner/spinner.ts
+/**
+* <sigvelo-spinner>
+*
+* @summary Tells the user that content is loading or a request is processing in the background.
+* @tag sigvelo-spinner
+* @documentation https://design-system.sigvelo.com/docs/components/spinner
+* @status stable
+* @since 1.0
+*
+* @slot - A custom spinner to show in lieu of the default one. Works best with `<img>` and `<svg>` elements. Custom
+*  spinners will not be animated, allowing you to use animated GIF, APNG, and SVG animations without conflict.
+*
+* @csspart track - the spinner's track, a `<circle>` SVG element.
+* @csspart indicator - the spinner's indicator, a `<circle>` SVG element.
+*
+* @cssproperty [--indicator-color=var(--sigvelo-color-primary-bg)] - The color of the spinner's indicator.
+* @cssproperty [--track-color=color-mix(in oklab, var(--sigvelo-color-neutral-bg), transparent 75%)] - The color of the
+*  spinner's track.
+* @cssproperty [--speed=0.75s] - The speed for one complete rotation.
+*
+* @example Default
+* ```html
+* <sigvelo-spinner></sigvelo-spinner>
+* ```
+*
+* @example Changing the size
+* Spinners are sized relative to the current font size. This allows you to place them into many contexts without having to explicitly size them. To change the size, set the `font-size` property on the spinner or an ancestor element.
+*
+* ```html
+* <sigvelo-spinner style="font-size: 1rem;"></sigvelo-spinner>
+* <sigvelo-spinner style="font-size: 2rem;"></sigvelo-spinner>
+* <sigvelo-spinner style="font-size: 3rem;"></sigvelo-spinner>
+* ```
+*
+* @example Changing the colors
+* To change the spinner's colors, set the `--indicator-color` and `--track-color` custom properties on the spinner.
+*
+* ```html
+* <div style="font-size: 2rem;">
+*   <sigvelo-spinner style="--indicator-color: royalblue;"></sigvelo-spinner>
+*   <sigvelo-spinner style="--indicator-color: deeppink;"></sigvelo-spinner>
+*   <sigvelo-spinner style="--indicator-color: forestgreen;"></sigvelo-spinner>
+* </div>
+* ```
+*
+* @example Using a custom spinner
+* To use a custom spinner, slot in an `<img>` or `<svg>` element. When using custom spinners, the default animation _will not_ be applied. This allows you to use GIF, APNG, or custom SVG images of your own. The spinner will still be correctly recognized by assistive devices as an indeterminate progress bar.
+*
+* Here's an example using an <abbr title="Animated PNG">APNG</abbr> image. You can <a href="/assets/examples/spinner.png" download>download it here</a> if you want to use it.
+*
+* ```html
+* <sigvelo-spinner style="font-size: 2rem;">
+*   <img src="/assets/examples/spinner.png" alt=""></img>
+* </sigvelo-spinner>
+* ```
+*
+* Here are some examples using animated SVGs from the SVG spinners library. These SVGs are available under the MIT License. Note that `fill="currentColor"` has been added to match the text color.
+*
+* ```html
+* <!-- Rotating dots -->
+* <sigvelo-spinner style="font-size: 2rem;">
+*   <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="2.5" r="1.5" opacity=".14"/><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"/><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"/><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"/><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"/><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"/><circle cx="12" cy="21.5" r="1.5"/><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
+* </sigvelo-spinner>
+*
+* <!-- Bouncing dots -->
+* <sigvelo-spinner style="font-size: 2rem;">
+*   <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3"><animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="12" cy="12" r="3"><animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="20" cy="12" r="3"><animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle></svg>
+* </sigvelo-spinner>
+*
+* <!-- Bars -->
+* <sigvelo-spinner style="font-size: 2rem;">
+*   <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="6" width="2.8" height="12"><animate id="spinner_CcmT" begin="0;spinner_IzZB.end-0.1s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="0;spinner_IzZB.end-0.1s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="5.8" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.1s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.1s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="10.6" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.2s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.2s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="15.4" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.3s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.3s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="20.2" y="6" width="2.8" height="12"><animate id="spinner_IzZB" begin="spinner_CcmT.begin+0.4s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.4s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect></svg>
+* </sigvelo-spinner>
+*
+* <!-- Pulse -->
+* <sigvelo-spinner style="font-size: 2rem;">
+*   <svg fill="currentColor" width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ngNb{animation:spinner_ZRWK 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_6TBP{animation-delay:.6s}@keyframes spinner_ZRWK{0%{transform:translate(12px,12px) scale(0);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}</style><path class="spinner_ngNb" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/><path class="spinner_ngNb spinner_6TBP" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/></svg>
+* </sigvelo-spinner>
+* ```
+*/
+var SigveloSpinner = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.label = "";
+	}
+	static {
+		this.styles = [hostStyles, spinner_styles_default];
+	}
+	firstUpdated() {
+		const label = this.label || this.localize.term("loading");
+		this.setAttribute("role", "progressbar");
+		this.setAttribute("aria-label", label);
+	}
+	render() {
+		return html`
+      <slot>
+        <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <circle id="track" part="track" cx="12" cy="12" r="10" fill="none" stroke-width="3" />
+          <circle
+            id="indicator"
+            part="indicator"
+            cx="12"
+            cy="12"
+            r="10"
+            fill="none"
+            stroke-width="3"
+          />
+        </svg>
+      </slot>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "label"
+})], SigveloSpinner.prototype, "label", void 0);
+customElements.define("sigvelo-spinner", SigveloSpinner);
+//#endregion
+export { SigveloSpinner as t };

package/dist/spinner-CZ19x_dC.d.ts

@@ -0,0 +1,99 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/spinner/spinner.d.ts
+/**
+ * <sigvelo-spinner>
+ *
+ * @summary Tells the user that content is loading or a request is processing in the background.
+ * @tag sigvelo-spinner
+ * @documentation https://design-system.sigvelo.com/docs/components/spinner
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - A custom spinner to show in lieu of the default one. Works best with `<img>` and `<svg>` elements. Custom
+ *  spinners will not be animated, allowing you to use animated GIF, APNG, and SVG animations without conflict.
+ *
+ * @csspart track - the spinner's track, a `<circle>` SVG element.
+ * @csspart indicator - the spinner's indicator, a `<circle>` SVG element.
+ *
+ * @cssproperty [--indicator-color=var(--sigvelo-color-primary-bg)] - The color of the spinner's indicator.
+ * @cssproperty [--track-color=color-mix(in oklab, var(--sigvelo-color-neutral-bg), transparent 75%)] - The color of the
+ *  spinner's track.
+ * @cssproperty [--speed=0.75s] - The speed for one complete rotation.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-spinner></sigvelo-spinner>
+ * ```
+ *
+ * @example Changing the size
+ * Spinners are sized relative to the current font size. This allows you to place them into many contexts without having to explicitly size them. To change the size, set the `font-size` property on the spinner or an ancestor element.
+ *
+ * ```html
+ * <sigvelo-spinner style="font-size: 1rem;"></sigvelo-spinner>
+ * <sigvelo-spinner style="font-size: 2rem;"></sigvelo-spinner>
+ * <sigvelo-spinner style="font-size: 3rem;"></sigvelo-spinner>
+ * ```
+ *
+ * @example Changing the colors
+ * To change the spinner's colors, set the `--indicator-color` and `--track-color` custom properties on the spinner.
+ *
+ * ```html
+ * <div style="font-size: 2rem;">
+ *   <sigvelo-spinner style="--indicator-color: royalblue;"></sigvelo-spinner>
+ *   <sigvelo-spinner style="--indicator-color: deeppink;"></sigvelo-spinner>
+ *   <sigvelo-spinner style="--indicator-color: forestgreen;"></sigvelo-spinner>
+ * </div>
+ * ```
+ *
+ * @example Using a custom spinner
+ * To use a custom spinner, slot in an `<img>` or `<svg>` element. When using custom spinners, the default animation _will not_ be applied. This allows you to use GIF, APNG, or custom SVG images of your own. The spinner will still be correctly recognized by assistive devices as an indeterminate progress bar.
+ *
+ * Here's an example using an <abbr title="Animated PNG">APNG</abbr> image. You can <a href="/assets/examples/spinner.png" download>download it here</a> if you want to use it.
+ *
+ * ```html
+ * <sigvelo-spinner style="font-size: 2rem;">
+ *   <img src="/assets/examples/spinner.png" alt=""></img>
+ * </sigvelo-spinner>
+ * ```
+ *
+ * Here are some examples using animated SVGs from the SVG spinners library. These SVGs are available under the MIT License. Note that `fill="currentColor"` has been added to match the text color.
+ *
+ * ```html
+ * <!-- Rotating dots -->
+ * <sigvelo-spinner style="font-size: 2rem;">
+ *   <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="2.5" r="1.5" opacity=".14"/><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"/><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"/><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"/><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"/><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"/><circle cx="12" cy="21.5" r="1.5"/><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
+ * </sigvelo-spinner>
+ *
+ * <!-- Bouncing dots -->
+ * <sigvelo-spinner style="font-size: 2rem;">
+ *   <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3"><animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="12" cy="12" r="3"><animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="20" cy="12" r="3"><animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle></svg>
+ * </sigvelo-spinner>
+ *
+ * <!-- Bars -->
+ * <sigvelo-spinner style="font-size: 2rem;">
+ *   <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="6" width="2.8" height="12"><animate id="spinner_CcmT" begin="0;spinner_IzZB.end-0.1s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="0;spinner_IzZB.end-0.1s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="5.8" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.1s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.1s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="10.6" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.2s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.2s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="15.4" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.3s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.3s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="20.2" y="6" width="2.8" height="12"><animate id="spinner_IzZB" begin="spinner_CcmT.begin+0.4s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.4s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect></svg>
+ * </sigvelo-spinner>
+ *
+ * <!-- Pulse -->
+ * <sigvelo-spinner style="font-size: 2rem;">
+ *   <svg fill="currentColor" width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ngNb{animation:spinner_ZRWK 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_6TBP{animation-delay:.6s}@keyframes spinner_ZRWK{0%{transform:translate(12px,12px) scale(0);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}</style><path class="spinner_ngNb" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/><path class="spinner_ngNb spinner_6TBP" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/></svg>
+ * </sigvelo-spinner>
+ * ```
+ */
+declare class SigveloSpinner extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  /** A custom label for screen readers. */
+  label: string;
+  firstUpdated(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-spinner": SigveloSpinner;
+  }
+}
+//#endregion
+export { SigveloSpinner as t };

package/dist/splitter-DBDJAzsp.d.ts

@@ -0,0 +1,325 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/splitter/splitter.d.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>
+ * ```
+ */
+declare class SigveloSplitter extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  private dragHandler?;
+  private previousPosition;
+  private dragStartPosition;
+  private dragStartClientX;
+  private dragStartClientY;
+  private divider;
+  isCollapsed: boolean;
+  isDragging: boolean;
+  /** The current position of the divider as a decimal (0-1). */
+  position: number;
+  /** The orientation of the splitter. */
+  orientation: "horizontal" | "vertical";
+  /** Disables the splitter, preventing it from being focused and resized. */
+  disabled: boolean;
+  /** A space-separated list of percentage snap points, e.g. "25% 50% 75%". */
+  snap: string;
+  /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
+  snapThreshold: number;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  disconnectedCallback(): void;
+  private handleFocus;
+  private handleBlur;
+  private getSnapPoints;
+  private snapToNearest;
+  private getDividerConstraint;
+  private clampPosition;
+  private setupDragging;
+  private updateGridTemplate;
+  private updateAriaValue;
+  private handleKeydown;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-splitter": SigveloSplitter;
+  }
+}
+//#endregion
+export { SigveloSplitter as t };