@oscarpalmer/oui 0.26.0 → 0.26.1

package/dist/js/dialog.d.mts

@@ -7,6 +7,10 @@ declare class OuiDialog {
    * Is the dialog open?
    */
   get open(): boolean;
+  /**
+   * Open or close the dialog
+   */
+  set open(value: boolean);
   constructor(state: OuiDialogState);
   /**
    * Closes the dialog by request

package/dist/js/dialog.mjs

@@ -10,6 +10,13 @@ var OuiDialog = class {
 	get open() {
 		return this.#state.element.open;
 	}
+	/**
+	* Open or close the dialog
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
 	constructor(state) {
 		this.#state = state;
 	}

package/dist/js/{embedded-ai6cqURc.d.mts → embedded-CSOh5njI.d.mts}

@@ -3,39 +3,39 @@ import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 //#region src/js/floatable/embedded.d.ts
 type CreateOuiFloatableOptions = {
   /**
-   * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+   * Open the floatable when created? _(defaults to `true`)_
    */
   open?: boolean;
   /**
-   * Position of the _OuiFloatable_ _(defaults to `below`)_
+   * Position of the floatable _(defaults to `below`)_
    */
   position?: OuiFloatablePosition;
 };
 declare class OuiFloatable {
   #private;
   /**
-   * Is the _OuiFloatable_ open?
+   * Is the floatable open?
    */
   get open(): boolean;
   /**
-   * Open or close the _OuiFloatable_
+   * Open or close the floatable
    */
   set open(value: boolean);
   constructor(state: OuiFloatableState, standalone: boolean);
   /**
-   * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+   * Destroy the floatable, removing it from the DOM and cleaning up references
    */
   destroy(): void;
   /**
-   * Closes the _OuiFloatable_
+   * Closes the floatable
    */
   hide(): void;
   /**
-   * Opens the _OuiFloatable_
+   * Opens the floatable
    */
   show(): void;
   /**
-   * Update the position of the _OuiFloatable_, with an optional new position
+   * Update the position of the floatable, with an optional new position
    *
    * @param position Optional new position
    */

package/dist/js/floatable/embedded.d.mts

@@ -1,2 +1,2 @@
-import { a as createEmbeddedFloatable, c as removeFloatable, i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable, r as OuiFloatableOptions, s as getOnBeforeToggleListener, t as ATTRIBUTE_FLOATABLE } from "../embedded-ai6cqURc.mjs";
+import { a as createEmbeddedFloatable, c as removeFloatable, i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable, r as OuiFloatableOptions, s as getOnBeforeToggleListener, t as ATTRIBUTE_FLOATABLE } from "../embedded-CSOh5njI.mjs";
 export { ATTRIBUTE_FLOATABLE, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

package/dist/js/floatable/embedded.mjs

@@ -6,13 +6,13 @@ var OuiFloatable = class {
 	#destroyed = false;
 	#state;
 	/**
-	* Is the _OuiFloatable_ open?
+	* Is the floatable open?
 	*/
 	get open() {
 		return this.#state.content.checkVisibility();
 	}
 	/**
-	* Open or close the _OuiFloatable_
+	* Open or close the floatable
 	*/
 	set open(value) {
 		if (value === true) this.show();
@@ -30,7 +30,7 @@ var OuiFloatable = class {
 		content.style.positionAnchor = anchorName;
 	}
 	/**
-	* Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	* Destroy the floatable, removing it from the DOM and cleaning up references
 	*/
 	destroy() {
 		if (this.#destroyed) return;
@@ -40,19 +40,19 @@ var OuiFloatable = class {
 		this.#state.content = null;
 	}
 	/**
-	* Closes the _OuiFloatable_
+	* Closes the floatable
 	*/
 	hide() {
 		if (!this.#destroyed && this.open) this.#state.content.hidePopover();
 	}
 	/**
-	* Opens the _OuiFloatable_
+	* Opens the floatable
 	*/
 	show() {
 		if (!this.#destroyed && !this.open) this.#state.content.showPopover();
 	}
 	/**
-	* Update the position of the _OuiFloatable_, with an optional new position
+	* Update the position of the floatable, with an optional new position
 	*
 	* @param position Optional new position
 	*/

package/dist/js/floatable/standalone.d.mts

@@ -1,2 +1,2 @@
-import { i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable } from "../embedded-ai6cqURc.mjs";
+import { i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable } from "../embedded-CSOh5njI.mjs";
 export { type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/index.d.mts

@@ -1,5 +1,5 @@
 import { OuiDialog, getDialog } from "./dialog.mjs";
-import { i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable } from "./embedded-ai6cqURc.mjs";
+import { i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable } from "./embedded-CSOh5njI.mjs";
 import { a as createFocusTrap, i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";

package/dist/js/popover.d.mts

@@ -1,4 +1,4 @@
-import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
+import { n as OuiFloatable } from "./embedded-CSOh5njI.mjs";
 import { i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
@@ -9,6 +9,7 @@ declare class OuiPopover {
    * Is the popover open?
    */
   get open(): boolean;
+  set open(value: boolean);
   constructor(state: OuiPopoverState);
   /**
    * Closes the popover

package/dist/js/popover.mjs

@@ -12,6 +12,10 @@ var OuiPopover = class {
 	get open() {
 		return this.#state.content.checkVisibility();
 	}
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
 	constructor(state) {
 		this.#state = state;
 		this.#state.floatable.update();

package/dist/js/splitter.d.mts

@@ -7,13 +7,37 @@ declare global {
 declare class OuiSplitterElement extends HTMLElement {
   #private;
   static readonly observedAttributes: string[];
+  /**
+   * Maximum size for the first panel
+   */
   get max(): number;
+  /**
+   * Maximum size for the first panel
+   */
   set max(value: number);
+  /**
+   * Minimum size for the first panel
+   */
   get min(): number;
+  /**
+   * Minimum size for the first panel
+   */
   set min(value: number);
+  /**
+   * Current size for the first panel
+   */
   get size(): number;
+  /**
+   * Current size for the first panel
+   */
   set size(value: number);
+  /**
+   * Orientation of the splitter
+   */
   get type(): string;
+  /**
+   * Orientation of the splitter
+   */
   set type(value: string);
   constructor();
   connectedCallback(): void;

package/dist/js/splitter.mjs

@@ -62,29 +62,53 @@ var OuiSplitterElement = class extends HTMLElement {
 		ATTRIBUTE_TYPE
 	];
 	#splitter;
+	/**
+	* Maximum size for the first panel
+	*/
 	get max() {
 		return this.#splitter.values.max;
 	}
+	/**
+	* Maximum size for the first panel
+	*/
 	set max(value) {
 		this.setAttribute(ATTRIBUTE_MAX, String(value));
 	}
+	/**
+	* Minimum size for the first panel
+	*/
 	get min() {
 		return this.#splitter.values.min;
 	}
+	/**
+	* Minimum size for the first panel
+	*/
 	set min(value) {
-		this.setAttribute("min", String(value));
+		this.setAttribute(ATTRIBUTE_MIN, String(value));
 	}
+	/**
+	* Current size for the first panel
+	*/
 	get size() {
 		return this.#splitter.values.now.current;
 	}
+	/**
+	* Current size for the first panel
+	*/
 	set size(value) {
-		this.setAttribute("size", String(value));
+		this.setAttribute(ATTRIBUTE_SIZE, String(value));
 	}
+	/**
+	* Orientation of the splitter
+	*/
 	get type() {
-		return this.getAttribute("type") ?? "vertical";
+		return this.getAttribute(ATTRIBUTE_TYPE) ?? "vertical";
 	}
+	/**
+	* Orientation of the splitter
+	*/
 	set type(value) {
-		this.setAttribute("type", value);
+		this.setAttribute(ATTRIBUTE_TYPE, value);
 	}
 	constructor() {
 		super();

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
+import { n as OuiFloatable } from "./embedded-CSOh5njI.mjs";
 
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
@@ -7,6 +7,10 @@ declare class OuiTooltip {
    * Is the tooltip open?
    */
   get open(): boolean;
+  /**
+   * Open or close the tooltip
+   */
+  set open(value: boolean);
   constructor(state: OuiTooltipState);
   /**
    * Closes the tooltip
@@ -24,6 +28,12 @@ type OuiTooltipState = {
   timer?: number;
   tooltip: OuiTooltip;
 };
+/**
+ * Get the _OuiTooltip_ for an element
+ *
+ * @param element Element to get _OuiTooltip_ for
+ * @returns _OuiTooltip_ instance
+ */
 declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
 /**
  * Set the delay before showing the tooltip, in milliseconds

package/dist/js/tooltip.mjs

@@ -14,6 +14,13 @@ var OuiTooltip = class {
 	get open() {
 		return this.#state.content.checkVisibility();
 	}
+	/**
+	* Open or close the tooltip
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
 	constructor(state) {
 		this.#state = state;
 		state.floatable.update();
@@ -129,6 +136,12 @@ function getState(anchor, content) {
 	state.tooltip = new OuiTooltip(state);
 	return state;
 }
+/**
+* Get the _OuiTooltip_ for an element
+*
+* @param element Element to get _OuiTooltip_ for
+* @returns _OuiTooltip_ instance
+*/
 function getTooltip(element) {
 	return states.get(element)?.tooltip;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.26.0",
+	"version": "0.26.1",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",

package/src/js/dialog.ts

@@ -15,6 +15,17 @@ class OuiDialog {
 		return this.#state.element.open;
 	}
 
+	/**
+	 * Open or close the dialog
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiDialogState) {
 		this.#state = state;
 	}

package/src/js/floatable/embedded.ts

@@ -7,11 +7,11 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 
 type CreateOuiFloatableOptions = {
 	/**
-	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+	 * Open the floatable when created? _(defaults to `true`)_
 	 */
 	open?: boolean;
 	/**
-	 * Position of the _OuiFloatable_ _(defaults to `below`)_
+	 * Position of the floatable _(defaults to `below`)_
 	 */
 	position?: OuiFloatablePosition;
 };
@@ -22,14 +22,14 @@ export class OuiFloatable {
 	readonly #state: OuiFloatableState;
 
 	/**
-	 * Is the _OuiFloatable_ open?
+	 * Is the floatable open?
 	 */
 	get open(): boolean {
 		return this.#state.content.checkVisibility();
 	}
 
 	/**
-	 * Open or close the _OuiFloatable_
+	 * Open or close the floatable
 	 */
 	set open(value: boolean) {
 		if (value === true) {
@@ -57,7 +57,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	 * Destroy the floatable, removing it from the DOM and cleaning up references
 	 */
 	destroy(): void {
 		if (this.#destroyed) {
@@ -73,7 +73,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Closes the _OuiFloatable_
+	 * Closes the floatable
 	 */
 	hide(): void {
 		if (!this.#destroyed && this.open) {
@@ -82,7 +82,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Opens the _OuiFloatable_
+	 * Opens the floatable
 	 */
 	show(): void {
 		if (!this.#destroyed && !this.open) {
@@ -91,7 +91,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Update the position of the _OuiFloatable_, with an optional new position
+	 * Update the position of the floatable, with an optional new position
 	 *
 	 * @param position Optional new position
 	 */

package/src/js/popover.ts

@@ -23,6 +23,14 @@ class OuiPopover {
 		return this.#state.content.checkVisibility();
 	}
 
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiPopoverState) {
 		this.#state = state;
 

package/src/js/splitter.ts

@@ -109,36 +109,60 @@ export class OuiSplitterElement extends HTMLElement {
 
 	// Getters and setters
 
+	/**
+	 * Maximum size for the first panel
+	 */
 	get max(): number {
 		return this.#splitter.values.max;
 	}
 
+	/**
+	 * Maximum size for the first panel
+	 */
 	set max(value: number) {
 		this.setAttribute(ATTRIBUTE_MAX, String(value));
 	}
 
+	/**
+	 * Minimum size for the first panel
+	 */
 	get min(): number {
 		return this.#splitter.values.min;
 	}
 
+	/**
+	 * Minimum size for the first panel
+	 */
 	set min(value: number) {
-		this.setAttribute('min', String(value));
+		this.setAttribute(ATTRIBUTE_MIN, String(value));
 	}
 
+	/**
+	 * Current size for the first panel
+	 */
 	get size(): number {
 		return this.#splitter.values.now.current;
 	}
 
+	/**
+	 * Current size for the first panel
+	 */
 	set size(value: number) {
-		this.setAttribute('size', String(value));
+		this.setAttribute(ATTRIBUTE_SIZE, String(value));
 	}
 
+	/**
+	 * Orientation of the splitter
+	 */
 	get type(): string {
-		return this.getAttribute('type') ?? 'vertical';
+		return this.getAttribute(ATTRIBUTE_TYPE) ?? 'vertical';
 	}
 
+	/**
+	 * Orientation of the splitter
+	 */
 	set type(value: string) {
-		this.setAttribute('type', value);
+		this.setAttribute(ATTRIBUTE_TYPE, value);
 	}
 
 	// Constructor

package/src/js/tooltip.ts

@@ -22,6 +22,17 @@ class OuiTooltip {
 		return this.#state.content.checkVisibility();
 	}
 
+	/**
+	 * Open or close the tooltip
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiTooltipState) {
 		this.#state = state;
 
@@ -230,6 +241,12 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiTooltipState {
 	return state;
 }
 
+/**
+ * Get the _OuiTooltip_ for an element
+ *
+ * @param element Element to get _OuiTooltip_ for
+ * @returns _OuiTooltip_ instance
+ */
 function getTooltip(element: HTMLElement): OuiTooltip | undefined {
 	return states.get(element)?.tooltip;
 }