@vonage/vivid 5.23.1-preview.0 → 5.23.1

package/unbundled/definition6.js

@@ -1,24 +1,180 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { html } from "@microsoft/fast-element";
-//#region src/lib/visually-hidden/visually-hidden.ts
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as __decorate } from "./decorate.js";
+import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
+import { n as delegateAria } from "./delegates-aria.js";
+import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
+import { t as VividFoundationButton } from "./button.js";
+import { t as Linkable } from "./linkable.js";
+import { t as Localized } from "./localized.js";
+import { d as Size } from "./enums.js";
+import { attr, html, ref, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/button/button.ts
 /**
-* @component visually-hidden
+* @public
+* @component button
+* @slot icon - The preferred way to add an icon to the component.
+* @testSelector byLabel byLabel
+* @testAction click click #control
+* @testRef control shadow button.control
 */
-var VisuallyHidden = class extends VividElement {};
+var Button = class extends AffixIconWithTrailing(Localized(Linkable(VividFoundationButton))) {
+	constructor() {
+		super();
+		this.stacked = false;
+		this.pending = false;
+		this.dropdownIndicator = false;
+		this.active = false;
+		this.pressed = false;
+		this.title = "";
+	}
+	/**
+	* Handles click events.
+	* Prevents interaction when disabled or pending.
+	*
+	* @internal
+	*/
+	clickHandler(event) {
+		/* v8 ignore else -- @preserve */
+		if (this.disabled || this.pending) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
+		return true;
+	}
+};
+__decorate([attr({ converter: {
+	fromView: (value) => value || null,
+	toView: (value) => value || null
+} })], Button.prototype, "title", void 0);
+__decorate([attr], Button.prototype, "connotation", void 0);
+__decorate([attr], Button.prototype, "shape", void 0);
+__decorate([attr], Button.prototype, "appearance", void 0);
+__decorate([attr], Button.prototype, "size", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "stacked"
+})], Button.prototype, "stacked", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "pending"
+})], Button.prototype, "pending", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "dropdown-indicator"
+})], Button.prototype, "dropdownIndicator", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "active"
+})], Button.prototype, "active", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "pressed"
+})], Button.prototype, "pressed", void 0);
+__decorate([attr], Button.prototype, "label", void 0);
 //#endregion
-//#region src/lib/visually-hidden/visually-hidden.scss?inline
-var visually_hidden_default = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}";
+//#region src/lib/button/button.scss?inline
+var button_default = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-dim:var(--vvd-button-cta-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--vvd-button-cta-pale,var(--vvd-color-cta-300))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-dim:var(--vvd-button-success-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--vvd-button-success-pale,var(--vvd-color-success-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-dim:var(--vvd-button-alert-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--vvd-button-alert-pale,var(--vvd-color-alert-300))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-dim:var(--vvd-button-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--vvd-button-announcement-pale,var(--vvd-color-announcement-300))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-dim:var(--vvd-button-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-button-accent-pale,var(--vvd-color-neutral-300))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-subtle,.control:disabled.appearance-subtle-light,.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-subtle,.control.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
 //#endregion
-//#region src/lib/visually-hidden/visually-hidden.template.ts
-var VisuallyHiddenTemplate = () => html`<slot></slot>`;
+//#region src/shared/patterns/chevron.ts
+var chevronTemplateFactory = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return html`<${iconTag} class="chevron" aria-hidden="true" name="chevron-down-line"></${iconTag}>`;
+};
 //#endregion
-//#region src/lib/visually-hidden/definition.ts
-var visuallyHiddenDefinition = defineVividComponent("visually-hidden", VisuallyHidden, VisuallyHiddenTemplate, [], { styles: visually_hidden_default });
+//#region src/lib/button/button.template.ts
+function getEffectiveAppearance(appearance, pressed) {
+	const resolvedAppearance = appearance ?? "ghost";
+	if (pressed) {
+		if (resolvedAppearance === "ghost") return "subtle";
+		if (resolvedAppearance === "ghost-light") return "subtle-light";
+		if (resolvedAppearance === "outlined") return "filled";
+	}
+	return resolvedAppearance;
+}
+var getClasses = (x) => classNames("control", [`connotation-${x.connotation}`, Boolean(x.connotation)], `appearance-${getEffectiveAppearance(x.appearance, x.pressed)}`, ["disabled", x.disabled || x.pending], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-only", !x.label && !!(x.icon || x.iconSlottedContent?.length) && !x.dropdownIndicator], ["icon-trailing", x.iconTrailing], ["stacked", x.stacked], ["active", x.ariaExpanded === "true" || x.active]);
+function renderIconOrPending(context, icon, pending, size = Size.Normal) {
+	if (pending && size != Size.SuperCondensed) {
+		const progressTag = context.tagFor(ProgressRing);
+		const progressSize = {
+			[Size.Condensed]: "-6",
+			[Size.Normal]: "-5",
+			[Size.Expanded]: "-4"
+		};
+		const getClassName = (x) => {
+			const slottedIconElement = x.querySelector("[slot=\"icon\"]");
+			return classNames("icon", "pending", ["pending-no-icon", !(icon || slottedIconElement)]);
+		};
+		return html`<span class="${getClassName}" aria-hidden="true"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
+	} else return affixIconTemplateFactory(context)(icon, IconWrapper.Slot);
+}
+var getButtonType = (type) => {
+	if ([
+		"submit",
+		"button",
+		"reset"
+	].indexOf(type) > -1) return type;
+	return "submit";
+};
+var buttonContent = (context) => {
+	const chevronTemplate = chevronTemplateFactory(context);
+	return html`<span class="content">
+			${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+			${when((x) => x.label, html`<span class="text" aria-hidden="true">${(x) => x.label}</span>`)}
+			<span class="sr-only"
+				>${(x) => x.pending ? x.locale.button.pendingLabel : x.ariaLabel ?? x.label}</span
+			>
+		</span>
+		${when((x) => x.dropdownIndicator, chevronTemplate)}`;
+};
+function renderButtonContent(context) {
+	return html` <button
+		class="${getClasses}"
+		?autofocus="${(x) => x.autofocus}"
+		form="${(x) => x.formId}"
+		formaction="${(x) => x.formaction}"
+		formenctype="${(x) => x.formenctype}"
+		formmethod="${(x) => x.formmethod}"
+		formnovalidate="${(x) => x.formnovalidate}"
+		formtarget="${(x) => x.formtarget}"
+		name="${(x) => x.name}"
+		type="${(x) => getButtonType(x.type)}"
+		value="${(x) => x.value}"
+		title="${(x) => x.title}"
+		${delegateAria({
+		ariaLabel: null,
+		ariaDisabled: (x) => x.disabled || x.pending,
+		ariaPressed: (x) => x.pressed ? "true" : x.ariaPressed ?? null
+	})}
+		${ref("control")}
+		@click="${(x, c) => x.clickHandler(c.event)}"
+	>
+		${buttonContent(context)}
+	</button>`;
+}
+function renderAnchorContent(context) {
+	return html`${(x) => x._renderLinkElement(buttonContent(context), getClasses, { ariaLabel: null })}`;
+}
+var buttonTemplate = (context) => {
+	return html` <template>
+		${when((x) => !x.href, html`${renderButtonContent(context)}`)}
+		${when((x) => x.href, renderAnchorContent(context))}
+	</template>`;
+};
+//#endregion
+//#region src/lib/button/definition.ts
+/** @internal */
+var buttonDefinition = defineVividComponent("button", Button, buttonTemplate, [iconDefinition, progressRingDefinition], {
+	styles: button_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the visually-hidden element with the design system.
+* Registers the button elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerVisuallyHidden = createRegisterFunction(visuallyHiddenDefinition);
+var registerButton = createRegisterFunction(buttonDefinition);
 //#endregion
-export { visuallyHiddenDefinition as n, VisuallyHidden as r, registerVisuallyHidden as t };
+export { Button as i, registerButton as n, chevronTemplateFactory as r, buttonDefinition as t };

package/unbundled/definition60.cjs

@@ -3,10 +3,10 @@ const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition5.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition7.cjs");
-const require_definition$2 = require("./definition10.cjs");
-const require_definition$3 = require("./definition12.cjs");
-const require_definition$4 = require("./definition13.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_definition$2 = require("./definition9.cjs");
+const require_definition$3 = require("./definition11.cjs");
+const require_definition$4 = require("./definition12.cjs");
 const require_divider = require("./divider.cjs");
 const require_randomId = require("./randomId.cjs");
 const require_definition$5 = require("./definition26.cjs");
@@ -30,7 +30,7 @@ let prosemirror_inputrules = require("prosemirror-inputrules");
 let prosemirror_transform = require("prosemirror-transform");
 let prosemirror_schema_basic = require("prosemirror-schema-basic");
 //#region src/lib/rich-text-editor/rich-text-editor.scss?inline
-var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
+var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.ts
 /**
@@ -46,9 +46,7 @@ var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline
 * @dynamicSlot `{ id: string }` suggestions-empty - Empty state if no suggestions are found.
 */
 var RichTextEditor = class extends require_localized.WithObservableLocale(require_vivid_element.VividElement) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	instanceChanged(prevInstance) {
 		prevInstance?.[require_slottable_request.impl].destroyViewIfNeeded();
 		this._initViewIfNeeded();
@@ -73,9 +71,7 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 		super.disconnectedCallback();
 		this._destroyViewIfNeeded();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	localeChanged() {
 		this._syncStateIfNeeded();
 	}
@@ -247,7 +243,7 @@ var FeatureState = class {
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
-var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
+var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
 var RteForeignHtmlFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
@@ -275,13 +271,30 @@ var atomCursorFix = ($cursor) => {
 	if (nodeBefore && nodeBefore.isInline && nodeBefore.isAtom && !nodeBefore.isText) return {};
 	return null;
 };
+/**
+* When the cursor is positioned directly before an inline atom node (e.g. an image)
+* that wraps to the next line, browsers may display the cursor on the next line even
+* though typing inserts text on the previous line. A ZWSP between cursor and atom will be
+* layouted to the previous line and therefore fix the cursor position.
+*/
+var beforeAtomCursorFix = ($cursor) => {
+	const nodeAfter = $cursor.nodeAfter;
+	if (nodeAfter && nodeAfter.isInline && nodeAfter.isAtom && !nodeAfter.isText) return { afterCursor: true };
+	return null;
+};
+function createZwspWidget(style) {
+	const span = document.createElement("span");
+	span.textContent = "​";
+	for (const [prop, value] of Object.entries(style)) span.style.setProperty(prop, value);
+	return span;
+}
 var RteCursorFixFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
 	constructor(..._args) {
 		super(..._args);
 		this.name = "RteCursorFix";
 	}
 	getPlugins(rte) {
-		const cursorFixes = [atomCursorFix];
+		const cursorFixes = [atomCursorFix, beforeAtomCursorFix];
 		for (const markType of Object.values(rte.schema.marks)) {
 			const spec = markType.spec;
 			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
@@ -289,27 +302,28 @@ var RteCursorFixFeatureImpl = class extends require_slottable_request.RteFeature
 		return [this.contribution(new prosemirror_state.Plugin({ props: { decorations: (state) => {
 			const { $cursor } = state.selection;
 			if (!$cursor) return null;
-			let cursorFix = null;
+			const decorations = [];
+			const cursorFixStyles = {};
+			let before = false;
+			let after = false;
 			for (const fn of cursorFixes) {
 				const result = fn($cursor, state);
-				if (result) Object.assign(cursorFix ??= {}, result);
+				if (!result) continue;
+				if (result.style) Object.assign(cursorFixStyles, result.style);
+				if (result.afterCursor) after = true;
+				else before = true;
 			}
-			if (!cursorFix) return null;
-			return prosemirror_view.DecorationSet.create(state.doc, [prosemirror_view.Decoration.widget($cursor.pos, () => {
-				const span = document.createElement("span");
-				span.textContent = "​";
-				for (const [prop, value] of Object.entries(cursorFix)) span.style.setProperty(prop, value);
-				return span;
-			}, { side: -1 })]);
+			if (before) decorations.push(prosemirror_view.Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: -1 }));
+			if (after) decorations.push(prosemirror_view.Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: 1 }));
+			if (decorations.length === 0) return null;
+			return prosemirror_view.DecorationSet.create(state.doc, decorations);
 		} } }))];
 	}
 };
 require_slottable_request.featureFacade(RteCursorFixFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.ts
-/**
-* Plugin to bring state from the host web component into ProseMirror.
-*/
+/** Plugin to bring state from the host web component into ProseMirror. */
 var hostBridgePlugin = new prosemirror_state.Plugin({ state: {
 	init() {
 		return null;
@@ -336,7 +350,7 @@ var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
 		];
 	}
 	getPlugins(rte) {
-		const enterKeyChainCommands = (0, prosemirror_commands.chainCommands)(prosemirror_commands.newlineInCode, prosemirror_commands.createParagraphNear, prosemirror_commands.liftEmptyBlock, (0, prosemirror_commands.splitBlockAs)((node, atEnd, $from) => {
+		const splitFn = (0, prosemirror_commands.splitBlockAs)((node, atEnd, $from) => {
 			if (!atEnd) return {
 				type: node.type,
 				attrs: node.attrs
@@ -345,7 +359,13 @@ var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
 				type: defaultTextblockForMatch($from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))),
 				attrs: rte.textblockAttrs.extractFromNode(node)
 			};
+		});
+		const splitFnKeepMarks = (state, dispatch) => splitFn(state, dispatch && ((tr) => {
+			const marks = state.storedMarks || state.selection.$to.parentOffset && state.selection.$from.marks();
+			if (marks) tr.ensureMarks(marks);
+			dispatch(tr);
 		}));
+		const enterKeyChainCommands = (0, prosemirror_commands.chainCommands)(prosemirror_commands.newlineInCode, prosemirror_commands.createParagraphNear, prosemirror_commands.liftEmptyBlock, splitFnKeepMarks);
 		return [
 			this.contribution(this.disabled.plugin),
 			this.contribution(new prosemirror_state.Plugin({
@@ -439,15 +459,11 @@ var RteHtmlParser = class {
 	constructor(config, options) {
 		this[require_slottable_request.impl] = new RteHtmlParserImpl(config[require_slottable_request.impl], options);
 	}
-	/**
-	* Converts an HTML string to an RteDocument.
-	*/
+	/** Converts an HTML string to an RteDocument. */
 	parseDocument(html, options) {
 		return this[require_slottable_request.impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
 	}
-	/**
-	* Converts an HTML string to an RteFragment.
-	*/
+	/** Converts an HTML string to an RteFragment. */
 	parseFragment(html, options) {
 		return this[require_slottable_request.impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
 	}
@@ -468,6 +484,7 @@ var RteHtmlParserImpl = class {
 		options?.modifyParseRules?.(rules);
 		this.parser = buildDomParser(config.schema, rules);
 	}
+	/** Used by the editor when foreign HTML is pasted or dropped */
 	transform(html) {
 		return dompurify.default.sanitize(html);
 	}
@@ -503,15 +520,11 @@ var RteHtmlSerializer = class {
 	constructor(config, options) {
 		this[require_slottable_request.impl] = new RteHtmlSerializerImpl(config[require_slottable_request.impl], options);
 	}
-	/**
-	* Converts an RteDocument to an HTML string.
-	*/
+	/** Converts an RteDocument to an HTML string. */
 	serializeDocument(doc, options) {
 		return this[require_slottable_request.impl].serializeFragment(doc.content, options);
 	}
-	/**
-	* Converts an RteFragment to an HTML string.
-	*/
+	/** Converts an RteFragment to an HTML string. */
 	serializeFragment(fragment, options) {
 		return this[require_slottable_request.impl].serializeFragment(fragment, options);
 	}
@@ -567,15 +580,11 @@ var RteInstance = class {
 		};
 		this[require_slottable_request.impl] = new RteInstanceImpl(this, config, options);
 	}
-	/**
-	* Returns the current document state.
-	*/
+	/** Returns the current document state. */
 	getDocument() {
 		return this[require_slottable_request.impl].state.doc.toJSON();
 	}
-	/**
-	* Reset the editor to its initial state. Optionally, an initial document can be provided.
-	*/
+	/** Reset the editor to its initial state. Optionally, an initial document can be provided. */
 	reset(initialDocument) {
 		this[require_slottable_request.impl].reset(initialDocument);
 	}
@@ -886,9 +895,11 @@ var UiCtx = class {
 		this.props = props;
 		this.bindings = [];
 	}
+	/** Evaluates a prop, returning its current value. */
 	evalProp(prop) {
 		return isPropBinding(prop) ? prop(this) : prop;
 	}
+	/** On every state change, prop is re-evaluated and passed to bindFn. */
 	bindProp(prop, bindFn) {
 		if (prop === void 0) return;
 		else if (isPropBinding(prop)) {
@@ -897,12 +908,15 @@ var UiCtx = class {
 			binding();
 		} else bindFn(prop);
 	}
+	/** To be called on each state update to refresh all bindings. */
 	updateBindings() {
 		for (const binding of this.bindings) binding();
 	}
+	/** Whether to return focus to the editor after a toolbar action */
 	shouldReturnFocusToEditor() {
 		return this.evalProp(this.props.shouldReturnFocusToEditor);
 	}
+	/** Utility to more conveniently bind props to elements */
 	bindToEl(target, props = {}, events = [], children = []) {
 		for (const name in props) this.bindProp(props[name], (value) => {
 			target[name] = value;
@@ -1313,15 +1327,11 @@ var RteBasicTextBlocksImpl = class extends require_slottable_request.RteFeatureI
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/utils/text-before-cursor.ts
-/**
-* Get the text content before the cursor position in the current text block.
-*/
+/** Get the text content before the cursor position in the current text block. */
 var textBeforeCursor = ($cursor) => $cursor.parent.textBetween(0, $cursor.parentOffset, void 0, "");
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/input-rules.ts
-/**
-* Aggregates all input rules from other features.
-*/
+/** Aggregates all input rules from other features. */
 var RteInputRulesFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
 	constructor(..._args) {
 		super(..._args);
@@ -1581,7 +1591,10 @@ var RteHardBreakFeatureImpl = class extends require_slottable_request.RteFeature
 	}
 	getPlugins(_rte) {
 		const forceBreak = (state, dispatch) => {
-			dispatch?.(state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView());
+			const marks = state.storedMarks || state.selection.$from.marks();
+			const tr = state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView();
+			if (marks.length) tr.setStoredMarks(marks);
+			dispatch?.(tr);
 			return true;
 		};
 		const keyBindings = { "Shift-Enter": forceBreak };
@@ -1632,10 +1645,10 @@ var RteFontSizePickerFeatureImpl = class extends require_slottable_request.RteFe
 				const storedMarks = state.storedMarks;
 				if (!storedMarks) return null;
 				const fontSizeMark = storedMarks.find((m) => m.type.name === "fontSize");
-				if (fontSizeMark) return { "font-size": fontSizeMark.attrs.size };
+				if (fontSizeMark) return { style: { "font-size": fontSizeMark.attrs.size } };
 				if (storedMarks.length === 0) {
 					const defaultSize = this.defaultFontSizeForNode?.[$cursor.parent.type.name];
-					if (defaultSize) return { "font-size": defaultSize };
+					if (defaultSize) return { style: { "font-size": defaultSize } };
 				}
 				return null;
 			}
@@ -1979,6 +1992,7 @@ var RteTextColorPickerFeatureImpl = class extends require_slottable_request.RteF
 			}
 		}, 6)];
 	}
+	/** Determine the color of the current selection or null if colors are mixed */
 	getSelectionColor(state) {
 		const { selection } = state;
 		const { textColor } = state.schema.marks;
@@ -2822,6 +2836,7 @@ var RteInlineImageFeatureImpl = class extends require_slottable_request.RteFeatu
 					};
 				}
 			}],
+			/** Since we use a NodeView, this is only used for HTML serialization */
 			toDOM: (node) => {
 				const { imageUrl, alt, size, naturalWidth, naturalHeight } = node.attrs;
 				const resolvedUrl = this.config.serializeUrlToHtml ? this.config.serializeUrlToHtml(imageUrl) : imageUrl;
@@ -3208,6 +3223,7 @@ var RteAtomFeatureImpl = class extends require_slottable_request.RteFeatureImpl
 				tag: `span[data-atom-type="${this.atomName}"][data-value]`,
 				getAttrs: (dom) => ({ value: dom.getAttribute("data-value") })
 			}],
+			/** Since we use a NodeView, toDOM is only used for Rich Text View */
 			toDOM: (node) => {
 				const serializedValue = this.config.serializeValueToHtml ? this.config.serializeValueToHtml(node.attrs.value) : node.attrs.value;
 				if (serializedValue === null) return document.createDocumentFragment();
@@ -3283,7 +3299,7 @@ var RteKeyboardShortcutsFeatureImpl = class extends require_slottable_request.Rt
 var RteKeyboardShortcutsFeature = require_slottable_request.featureFacade(RteKeyboardShortcutsFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/suggest.style.scss?inline
-var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}";
+var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/suggest.ts
 var isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);