tiny-essentials 1.16.0 → 1.16.1

package/dist/v1/TinyAfterScrollWatcher.js

@@ -0,0 +1,196 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  TinyAfterScrollWatcher: () => (/* reexport */ libs_TinyAfterScrollWatcher)
+});
+
+;// ./src/v1/libs/TinyAfterScrollWatcher.mjs
+/**
+ * @typedef {(() => void)} FnData - Function with no arguments and no return value
+ */
+
+/**
+ * A function that handles a scroll event.
+ * It receives a standard `Event` object when a scroll occurs.
+ *
+ * @typedef {(ev: Event) => void} OnScrollFunc
+ */
+
+/**
+ * A scroll tracker that queues functions to be executed
+ * after the user stops scrolling a specific element or the window.
+ */
+class TinyAfterScrollWatcher {
+  /** @type {Element|Window} */
+  #scrollTarget;
+
+  /** @type {number} */
+  lastScrollTime = 0;
+
+  /** @type {FnData[]} */
+  #afterScrollQueue = [];
+
+  /** @type {number} */
+  #inactivityTime = 100;
+
+  /** @type {Set<OnScrollFunc>} */
+  #externalScrollListeners = new Set();
+
+  /** @type {boolean} */
+  #destroyed = false;
+
+  /**
+   * @param {Element|Window} scrollTarget - The element or window to track scrolling on
+   * @param {number} [inactivityTime=100] - Time in milliseconds to wait after scroll ends before executing the queue
+   * @throws {TypeError} If scrollTarget is not a valid Element or Window
+   * @throws {TypeError} If inactivityTime is not a positive number
+   */
+  constructor(scrollTarget = window, inactivityTime = 100) {
+    if (!(scrollTarget instanceof Element) && !(scrollTarget instanceof Window))
+      throw new TypeError('scrollTarget must be an Element or the Window object.');
+    this.#scrollTarget = scrollTarget;
+
+    this._onScroll = this._onScroll.bind(this);
+    this._checkQueue = this._checkQueue.bind(this);
+
+    this.#scrollTarget.addEventListener('scroll', this._onScroll);
+    this.#inactivityTime = inactivityTime;
+
+    requestAnimationFrame(this._checkQueue);
+  }
+
+  /**
+   * Gets the current inactivity time in milliseconds.
+   * @returns {number}
+   */
+  get inactivityTime() {
+    return this.#inactivityTime;
+  }
+
+  /**
+   * Sets a new inactivity time.
+   * Must be a positive number (in milliseconds).
+   * @param {number} value
+   * @throws {Error} If value is not a positive number
+   */
+  set inactivityTime(value) {
+    if (typeof value !== 'number' || value <= 0 || !Number.isFinite(value))
+      throw new Error('inactivityTime must be a positive number in milliseconds.');
+    this.#inactivityTime = value;
+  }
+
+  /**
+   * Internal handler for scroll events.
+   * Updates the last scroll timestamp.
+   * @private
+   */
+  _onScroll() {
+    this.lastScrollTime = Date.now();
+  }
+
+  /**
+   * Continuously checks whether the user has stopped scrolling,
+   * and if so, runs all queued functions.
+   * @private
+   */
+  _checkQueue() {
+    if (this.#destroyed) return;
+    requestAnimationFrame(this._checkQueue);
+
+    if (Date.now() - this.lastScrollTime > this.#inactivityTime) {
+      while (this.#afterScrollQueue.length) {
+        const fn = this.#afterScrollQueue.pop();
+        if (typeof fn === 'function') fn();
+      }
+    }
+  }
+
+  /**
+   * Adds a function to be executed after scroll has stopped.
+   * The scroll is considered "stopped" after the configured inactivity time.
+   *
+   * @param {() => void} fn - A function to execute once scrolling has stopped.
+   * @throws {TypeError} If the argument is not a function.
+   */
+  doAfterScroll(fn) {
+    if (typeof fn !== 'function') throw new TypeError('Argument must be a function.');
+    this.lastScrollTime = Date.now();
+    this.#afterScrollQueue.push(fn);
+  }
+
+  /**
+   * Registers an external scroll listener on the tracked element.
+   *
+   * @param {OnScrollFunc} fn - The scroll listener to add
+   * @throws {TypeError} If the argument is not a function.
+   */
+  onScroll(fn) {
+    if (typeof fn !== 'function') throw new TypeError('Argument must be a function.');
+    this.#scrollTarget.addEventListener('scroll', fn);
+    this.#externalScrollListeners.add(fn);
+  }
+
+  /**
+   * Removes a previously registered scroll listener from the tracked element.
+   *
+   * @param {OnScrollFunc} fn - The scroll listener to remove
+   * @throws {TypeError} If the argument is not a function.
+   */
+  offScroll(fn) {
+    if (typeof fn !== 'function') throw new TypeError('Argument must be a function.');
+    if (this.#externalScrollListeners.has(fn)) {
+      this.#scrollTarget.removeEventListener('scroll', fn);
+      this.#externalScrollListeners.delete(fn);
+    }
+  }
+
+  /**
+   * Destroys the watcher by removing internal listeners and clearing data.
+   */
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+
+    this.#scrollTarget.removeEventListener('scroll', this._onScroll);
+    for (const fn of this.#externalScrollListeners)
+      this.#scrollTarget.removeEventListener('scroll', fn);
+
+    this.#externalScrollListeners.clear();
+  }
+}
+
+/* harmony default export */ const libs_TinyAfterScrollWatcher = (TinyAfterScrollWatcher);
+
+;// ./src/v1/build/TinyAfterScrollWatcher.mjs
+
+
+
+
+window.TinyAfterScrollWatcher = __webpack_exports__.TinyAfterScrollWatcher;
+/******/ })()
+;

package/dist/v1/TinyAfterScrollWatcher.min.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={d:(t,r)=>{for(var i in r)e.o(r,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:r[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{TinyAfterScrollWatcher:()=>r});const r=class{#e;lastScrollTime=0;#t=[];#r=100;#i=new Set;#o=!1;constructor(e=window,t=100){if(!(e instanceof Element||e instanceof Window))throw new TypeError("scrollTarget must be an Element or the Window object.");this.#e=e,this._onScroll=this._onScroll.bind(this),this._checkQueue=this._checkQueue.bind(this),this.#e.addEventListener("scroll",this._onScroll),this.#r=t,requestAnimationFrame(this._checkQueue)}get inactivityTime(){return this.#r}set inactivityTime(e){if("number"!=typeof e||e<=0||!Number.isFinite(e))throw new Error("inactivityTime must be a positive number in milliseconds.");this.#r=e}_onScroll(){this.lastScrollTime=Date.now()}_checkQueue(){if(!this.#o&&(requestAnimationFrame(this._checkQueue),Date.now()-this.lastScrollTime>this.#r))for(;this.#t.length;){const e=this.#t.pop();"function"==typeof e&&e()}}doAfterScroll(e){if("function"!=typeof e)throw new TypeError("Argument must be a function.");this.lastScrollTime=Date.now(),this.#t.push(e)}onScroll(e){if("function"!=typeof e)throw new TypeError("Argument must be a function.");this.#e.addEventListener("scroll",e),this.#i.add(e)}offScroll(e){if("function"!=typeof e)throw new TypeError("Argument must be a function.");this.#i.has(e)&&(this.#e.removeEventListener("scroll",e),this.#i.delete(e))}destroy(){if(!this.#o){this.#o=!0,this.#e.removeEventListener("scroll",this._onScroll);for(const e of this.#i)this.#e.removeEventListener("scroll",e);this.#i.clear()}}};window.TinyAfterScrollWatcher=t.TinyAfterScrollWatcher})();

package/dist/v1/TinyBasicsEs.js

@@ -5295,6 +5295,494 @@ class TinyHtml_TinyHtml {
 
   //////////////////////////////////////////////////////////////////////
 
+  /**
+   * Stores camelCase to kebab-case CSS property aliases.
+   *
+   * Used to normalize property names when interacting with `element.style` or `getComputedStyle`.
+   *
+   * ⚠️ This object should not be modified directly. Use `TinyHtml.cssPropAliases` instead to ensure reverse mappings stay in sync.
+   *
+   * Example of how to add a new alias:
+   *
+   * ```js
+   * TinyHtml.cssPropAliases.tinyPudding = 'tiny-pudding';
+   * ```
+   *
+   * This will automatically update `TinyHtml.cssPropRevAliases['tiny-pudding']` with `'tinyPudding'`.
+   *
+   * @type {Record<string | symbol, string>}
+   */
+  static #cssPropAliases = {
+    alignContent: 'align-content',
+    alignItems: 'align-items',
+    alignSelf: 'align-self',
+    animationDelay: 'animation-delay',
+    animationDirection: 'animation-direction',
+    animationDuration: 'animation-duration',
+    animationFillMode: 'animation-fill-mode',
+    animationIterationCount: 'animation-iteration-count',
+    animationName: 'animation-name',
+    animationPlayState: 'animation-play-state',
+    animationTimingFunction: 'animation-timing-function',
+    backfaceVisibility: 'backface-visibility',
+    backgroundAttachment: 'background-attachment',
+    backgroundBlendMode: 'background-blend-mode',
+    backgroundClip: 'background-clip',
+    backgroundColor: 'background-color',
+    backgroundImage: 'background-image',
+    backgroundOrigin: 'background-origin',
+    backgroundPosition: 'background-position',
+    backgroundRepeat: 'background-repeat',
+    backgroundSize: 'background-size',
+    borderBottom: 'border-bottom',
+    borderBottomColor: 'border-bottom-color',
+    borderBottomLeftRadius: 'border-bottom-left-radius',
+    borderBottomRightRadius: 'border-bottom-right-radius',
+    borderBottomStyle: 'border-bottom-style',
+    borderBottomWidth: 'border-bottom-width',
+    borderCollapse: 'border-collapse',
+    borderColor: 'border-color',
+    borderImage: 'border-image',
+    borderImageOutset: 'border-image-outset',
+    borderImageRepeat: 'border-image-repeat',
+    borderImageSlice: 'border-image-slice',
+    borderImageSource: 'border-image-source',
+    borderImageWidth: 'border-image-width',
+    borderLeft: 'border-left',
+    borderLeftColor: 'border-left-color',
+    borderLeftStyle: 'border-left-style',
+    borderLeftWidth: 'border-left-width',
+    borderRadius: 'border-radius',
+    borderRight: 'border-right',
+    borderRightColor: 'border-right-color',
+    borderRightStyle: 'border-right-style',
+    borderRightWidth: 'border-right-width',
+    borderSpacing: 'border-spacing',
+    borderStyle: 'border-style',
+    borderTop: 'border-top',
+    borderTopColor: 'border-top-color',
+    borderTopLeftRadius: 'border-top-left-radius',
+    borderTopRightRadius: 'border-top-right-radius',
+    borderTopStyle: 'border-top-style',
+    borderTopWidth: 'border-top-width',
+    borderWidth: 'border-width',
+    boxDecorationBreak: 'box-decoration-break',
+    boxShadow: 'box-shadow',
+    boxSizing: 'box-sizing',
+    breakAfter: 'break-after',
+    breakBefore: 'break-before',
+    breakInside: 'break-inside',
+    captionSide: 'caption-side',
+    caretColor: 'caret-color',
+    clipPath: 'clip-path',
+    columnCount: 'column-count',
+    columnFill: 'column-fill',
+    columnGap: 'column-gap',
+    columnRule: 'column-rule',
+    columnRuleColor: 'column-rule-color',
+    columnRuleStyle: 'column-rule-style',
+    columnRuleWidth: 'column-rule-width',
+    columnSpan: 'column-span',
+    columnWidth: 'column-width',
+    counterIncrement: 'counter-increment',
+    counterReset: 'counter-reset',
+    emptyCells: 'empty-cells',
+    flexBasis: 'flex-basis',
+    flexDirection: 'flex-direction',
+    flexFlow: 'flex-flow',
+    flexGrow: 'flex-grow',
+    flexShrink: 'flex-shrink',
+    flexWrap: 'flex-wrap',
+    fontFamily: 'font-family',
+    fontFeatureSettings: 'font-feature-settings',
+    fontKerning: 'font-kerning',
+    fontLanguageOverride: 'font-language-override',
+    fontSize: 'font-size',
+    fontSizeAdjust: 'font-size-adjust',
+    fontStretch: 'font-stretch',
+    fontStyle: 'font-style',
+    fontSynthesis: 'font-synthesis',
+    fontVariant: 'font-variant',
+    fontVariantAlternates: 'font-variant-alternates',
+    fontVariantCaps: 'font-variant-caps',
+    fontVariantEastAsian: 'font-variant-east-asian',
+    fontVariantLigatures: 'font-variant-ligatures',
+    fontVariantNumeric: 'font-variant-numeric',
+    fontVariantPosition: 'font-variant-position',
+    fontWeight: 'font-weight',
+    gridArea: 'grid-area',
+    gridAutoColumns: 'grid-auto-columns',
+    gridAutoFlow: 'grid-auto-flow',
+    gridAutoRows: 'grid-auto-rows',
+    gridColumn: 'grid-column',
+    gridColumnEnd: 'grid-column-end',
+    gridColumnGap: 'grid-column-gap',
+    gridColumnStart: 'grid-column-start',
+    gridGap: 'grid-gap',
+    gridRow: 'grid-row',
+    gridRowEnd: 'grid-row-end',
+    gridRowGap: 'grid-row-gap',
+    gridRowStart: 'grid-row-start',
+    gridTemplate: 'grid-template',
+    gridTemplateAreas: 'grid-template-areas',
+    gridTemplateColumns: 'grid-template-columns',
+    gridTemplateRows: 'grid-template-rows',
+    imageRendering: 'image-rendering',
+    justifyContent: 'justify-content',
+    letterSpacing: 'letter-spacing',
+    lineBreak: 'line-break',
+    lineHeight: 'line-height',
+    listStyle: 'list-style',
+    listStyleImage: 'list-style-image',
+    listStylePosition: 'list-style-position',
+    listStyleType: 'list-style-type',
+    marginBottom: 'margin-bottom',
+    marginLeft: 'margin-left',
+    marginRight: 'margin-right',
+    marginTop: 'margin-top',
+    maskClip: 'mask-clip',
+    maskComposite: 'mask-composite',
+    maskImage: 'mask-image',
+    maskMode: 'mask-mode',
+    maskOrigin: 'mask-origin',
+    maskPosition: 'mask-position',
+    maskRepeat: 'mask-repeat',
+    maskSize: 'mask-size',
+    maskType: 'mask-type',
+    maxHeight: 'max-height',
+    maxWidth: 'max-width',
+    minHeight: 'min-height',
+    minWidth: 'min-width',
+    mixBlendMode: 'mix-blend-mode',
+    objectFit: 'object-fit',
+    objectPosition: 'object-position',
+    offsetAnchor: 'offset-anchor',
+    offsetDistance: 'offset-distance',
+    offsetPath: 'offset-path',
+    offsetRotate: 'offset-rotate',
+    outlineColor: 'outline-color',
+    outlineOffset: 'outline-offset',
+    outlineStyle: 'outline-style',
+    outlineWidth: 'outline-width',
+    overflowAnchor: 'overflow-anchor',
+    overflowWrap: 'overflow-wrap',
+    overflowX: 'overflow-x',
+    overflowY: 'overflow-y',
+    paddingBottom: 'padding-bottom',
+    paddingLeft: 'padding-left',
+    paddingRight: 'padding-right',
+    paddingTop: 'padding-top',
+    pageBreakAfter: 'page-break-after',
+    pageBreakBefore: 'page-break-before',
+    pageBreakInside: 'page-break-inside',
+    perspectiveOrigin: 'perspective-origin',
+    placeContent: 'place-content',
+    placeItems: 'place-items',
+    placeSelf: 'place-self',
+    pointerEvents: 'pointer-events',
+    rowGap: 'row-gap',
+    scrollBehavior: 'scroll-behavior',
+    scrollMargin: 'scroll-margin',
+    scrollMarginBlock: 'scroll-margin-block',
+    scrollMarginBlockEnd: 'scroll-margin-block-end',
+    scrollMarginBlockStart: 'scroll-margin-block-start',
+    scrollMarginBottom: 'scroll-margin-bottom',
+    scrollMarginInline: 'scroll-margin-inline',
+    scrollMarginInlineEnd: 'scroll-margin-inline-end',
+    scrollMarginInlineStart: 'scroll-margin-inline-start',
+    scrollMarginLeft: 'scroll-margin-left',
+    scrollMarginRight: 'scroll-margin-right',
+    scrollMarginTop: 'scroll-margin-top',
+    scrollPadding: 'scroll-padding',
+    scrollPaddingBlock: 'scroll-padding-block',
+    scrollPaddingBlockEnd: 'scroll-padding-block-end',
+    scrollPaddingBlockStart: 'scroll-padding-block-start',
+    scrollPaddingBottom: 'scroll-padding-bottom',
+    scrollPaddingInline: 'scroll-padding-inline',
+    scrollPaddingInlineEnd: 'scroll-padding-inline-end',
+    scrollPaddingInlineStart: 'scroll-padding-inline-start',
+    scrollPaddingLeft: 'scroll-padding-left',
+    scrollPaddingRight: 'scroll-padding-right',
+    scrollPaddingTop: 'scroll-padding-top',
+    scrollSnapAlign: 'scroll-snap-align',
+    scrollSnapStop: 'scroll-snap-stop',
+    scrollSnapType: 'scroll-snap-type',
+    shapeImageThreshold: 'shape-image-threshold',
+    shapeMargin: 'shape-margin',
+    shapeOutside: 'shape-outside',
+    tabSize: 'tab-size',
+    tableLayout: 'table-layout',
+    textAlign: 'text-align',
+    textAlignLast: 'text-align-last',
+    textCombineUpright: 'text-combine-upright',
+    textDecoration: 'text-decoration',
+    textDecorationColor: 'text-decoration-color',
+    textDecorationLine: 'text-decoration-line',
+    textDecorationStyle: 'text-decoration-style',
+    textIndent: 'text-indent',
+    textJustify: 'text-justify',
+    textOrientation: 'text-orientation',
+    textOverflow: 'text-overflow',
+    textShadow: 'text-shadow',
+    textTransform: 'text-transform',
+    transformBox: 'transform-box',
+    transformOrigin: 'transform-origin',
+    transformStyle: 'transform-style',
+    transitionDelay: 'transition-delay',
+    transitionDuration: 'transition-duration',
+    transitionProperty: 'transition-property',
+    transitionTimingFunction: 'transition-timing-function',
+    unicodeBidi: 'unicode-bidi',
+    userSelect: 'user-select',
+    verticalAlign: 'vertical-align',
+    whiteSpace: 'white-space',
+    willChange: 'will-change',
+    wordBreak: 'word-break',
+    wordSpacing: 'word-spacing',
+    wordWrap: 'word-wrap',
+    writingMode: 'writing-mode',
+    zIndex: 'z-index',
+    WebkitTransform: '-webkit-transform',
+    WebkitTransition: '-webkit-transition',
+    WebkitBoxShadow: '-webkit-box-shadow',
+    MozBoxShadow: '-moz-box-shadow',
+    MozTransform: '-moz-transform',
+    MozTransition: '-moz-transition',
+    msTransform: '-ms-transform',
+    msTransition: '-ms-transition',
+  };
+
+  /** @type {Record<string | symbol, string>} */
+  static cssPropAliases = new Proxy(TinyHtml_TinyHtml.#cssPropAliases, {
+    set(target, camelCaseKey, kebabValue) {
+      target[camelCaseKey] = kebabValue;
+      // @ts-ignore
+      TinyHtml_TinyHtml.cssPropRevAliases[kebabValue] = camelCaseKey;
+      return true;
+    },
+  });
+
+  /** @type {Record<string | symbol, string>} */
+  static cssPropRevAliases = Object.fromEntries(
+    Object.entries(TinyHtml_TinyHtml.#cssPropAliases).map(([camel, kebab]) => [kebab, camel]),
+  );
+
+  /**
+   * Converts a camelCase string to kebab-case
+   * @param {string} str
+   * @returns {string}
+   */
+  static toStyleKc(str) {
+    if (typeof TinyHtml_TinyHtml.cssPropAliases[str] === 'string') return TinyHtml_TinyHtml.cssPropAliases[str];
+    return str;
+  }
+
+  /**
+   * Converts a kebab-case string to camelCase
+   * @param {string} str
+   * @returns {string}
+   */
+  static toStyleCc(str) {
+    if (typeof TinyHtml_TinyHtml.cssPropRevAliases[str] === 'string') return TinyHtml_TinyHtml.cssPropRevAliases[str];
+    return str;
+  }
+
+  /**
+   * Sets one or more CSS inline style properties on the given element(s).
+   *
+   * - If `prop` is a string, the `value` will be applied to that property.
+   * - If `prop` is an object, each key-value pair will be applied as a CSS property and value.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - The element to inspect.
+   * @param {string|Object} prop - The property name or an object with key-value pairs
+   * @param {string|null} [value=null] - The value to set (if `prop` is a string)
+   */
+  static setStyle(el, prop, value = null) {
+    TinyHtml_TinyHtml._preHtmlElems(el, 'setStyle').forEach((elem) => {
+      if (typeof prop === 'object') {
+        for (const [k, v] of Object.entries(prop)) {
+          elem.style.setProperty(
+            TinyHtml_TinyHtml.toStyleKc(k),
+            typeof v === 'string' ? v : typeof v === 'number' ? `${v}px` : String(v),
+          );
+        }
+      } else elem.style.setProperty(TinyHtml_TinyHtml.toStyleKc(prop), value);
+    });
+  }
+
+  /**
+   * Sets one or more CSS inline style properties on the given element(s).
+   *
+   * - If `prop` is a string, the `value` will be applied to that property.
+   * - If `prop` is an object, each key-value pair will be applied as a CSS property and value.
+   *
+   * @param {string|Object} prop - The property name or an object with key-value pairs
+   * @param {string|null} [value=null] - The value to set (if `prop` is a string)
+   */
+  setStyle(prop, value) {
+    return TinyHtml_TinyHtml.setStyle(this, prop, value);
+  }
+
+  /**
+   * Gets the value of a specific inline style property.
+   *
+   * Returns only the value set directly via the `style` attribute.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element to inspect.
+   * @param {string} prop - The style property name to retrieve.
+   * @returns {string} The style value of the specified property.
+   */
+  static getStyle(el, prop) {
+    return TinyHtml_TinyHtml._preHtmlElem(el, 'getStyle').style.getPropertyValue(TinyHtml_TinyHtml.toStyleKc(prop));
+  }
+
+  /**
+   * Gets the value of a specific inline style property.
+   *
+   * Returns only the value set directly via the `style` attribute.
+   *
+   * @param {string} prop - The style property name to retrieve.
+   * @returns {string} The style value of the specified property.
+   */
+  getStyle(prop) {
+    return TinyHtml_TinyHtml.getStyle(this, prop);
+  }
+
+  /**
+   * Gets all inline styles defined directly on the element (`style` attribute).
+   *
+   * Returns an object with all property-value pairs in kebab-case format.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element to inspect.
+   * @param {Object} [settings={}] - Optional configuration settings.
+   * @param {boolean} [settings.camelCase=false] - If `true`, the property names will be converted to camelCase.
+   * @param {boolean} [settings.rawAttr=false] - If `true`, reads the style string from the `style` attribute instead of using the style object.
+   * @returns {Record<string, string>} All inline styles as an object.
+   *
+   * @throws {TypeError} If `camelCase` or `rawAttr` is not a boolean.
+   */
+  static style(el, { camelCase = false, rawAttr = false } = {}) {
+    if (typeof camelCase !== 'boolean')
+      throw new TypeError(`"camelCase" must be a boolean. Received: ${typeof camelCase}`);
+    if (typeof rawAttr !== 'boolean')
+      throw new TypeError(`"rawAttr" must be a boolean. Received: ${typeof rawAttr}`);
+
+    const elem = TinyHtml_TinyHtml._preHtmlElem(el, 'style');
+    /** @type {Record<string, string>} */
+    const result = {};
+
+    if (rawAttr) {
+      const raw = elem.getAttribute('style') || '';
+      const entries = raw.split(';');
+      for (const entry of entries) {
+        const [rawProp, rawVal] = entry.split(':');
+        if (!rawProp || !rawVal) continue;
+
+        const prop = rawProp.trim();
+        const value = rawVal.trim();
+        result[camelCase ? TinyHtml_TinyHtml.toStyleCc(prop) : prop] = value;
+      }
+    } else {
+      const styles = elem.style;
+      for (let i = 0; i < styles.length; i++) {
+        const prop = styles[i]; // Already in kebab-case
+        const value = styles.getPropertyValue(prop);
+        result[camelCase ? TinyHtml_TinyHtml.toStyleCc(prop) : prop] = value;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Gets all inline styles defined directly on the element (`style` attribute).
+   *
+   * Returns an object with all property-value pairs in kebab-case format.
+   *
+   * @param {Object} [settings={}] - Optional configuration settings.
+   * @param {boolean} [settings.camelCase=false] - If `true`, the property names will be converted to camelCase.
+   * @param {boolean} [settings.rawAttr=false] - If `true`, reads the style string from the `style` attribute instead of using the style object.
+   * @returns {Record<string, string>} All inline styles as an object.
+   */
+  style(settings) {
+    return TinyHtml_TinyHtml.style(this, settings);
+  }
+
+  /**
+   * Removes one or more inline CSS properties from the given element(s).
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element or an array of elements.
+   * @param {string|string[]} prop - A property name or an array of property names to remove.
+   */
+  static removeStyle(el, prop) {
+    TinyHtml_TinyHtml._preHtmlElems(el, 'removeStyle').forEach((elem) => {
+      if (Array.isArray(prop)) {
+        for (const p of prop) {
+          elem.style.removeProperty(TinyHtml_TinyHtml.toStyleKc(p));
+        }
+      } else elem.style.removeProperty(TinyHtml_TinyHtml.toStyleKc(prop));
+    });
+  }
+
+  /**
+   * Removes one or more inline CSS properties from the given element(s).
+   *
+   * @param {string|string[]} prop - A property name or an array of property names to remove.
+   */
+  removeStyle(prop) {
+    return TinyHtml_TinyHtml.removeStyle(this, prop);
+  }
+
+  /**
+   * Toggles a CSS property value between two given values.
+   *
+   * The current computed value is compared to `val1`. If it matches, the property is set to `val2`. Otherwise, it is set to `val1`.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element or an array of elements.
+   * @param {string} prop - The CSS property to toggle.
+   * @param {string} val1 - The first value (used as "current" check).
+   * @param {string} val2 - The second value (used as the "alternative").
+   */
+  static toggleStyle(el, prop, val1, val2) {
+    TinyHtml_TinyHtml._preHtmlElems(el, 'toggleStyle').forEach((elem) => {
+      const current = TinyHtml_TinyHtml.getStyle(elem, prop).trim();
+      const newVal = current === TinyHtml_TinyHtml.toStyleKc(val1) ? val2 : val1;
+      TinyHtml_TinyHtml.setStyle(elem, prop, newVal);
+    });
+  }
+
+  /**
+   * Toggles a CSS property value between two given values.
+   *
+   * The current computed value is compared to `val1`. If it matches, the property is set to `val2`. Otherwise, it is set to `val1`.
+   *
+   * @param {string} prop - The CSS property to toggle.
+   * @param {string} val1 - The first value (used as "current" check).
+   * @param {string} val2 - The second value (used as the "alternative").
+   */
+  toggleStyle(prop, val1, val2) {
+    return TinyHtml_TinyHtml.toggleStyle(this, prop, val1, val2);
+  }
+
+  /**
+   * Removes all inline styles (`style` attribute) from the given element(s).
+   *
+   * @param {TinyElement|TinyElement[]} el - A single element or an array of elements.
+   */
+  static clearStyle(el) {
+    TinyHtml_TinyHtml._preElems(el, 'clearStyle').forEach((elem) => elem.removeAttribute('style'));
+  }
+
+  /**
+   * Removes all inline styles (`style` attribute) from the given element(s).
+   *
+   */
+  clearStyle() {
+    return TinyHtml_TinyHtml.clearStyle(this);
+  }
+
+  //////////////////////////////////////////////////////////////////////
+
   /**
    * Focus the element.
    *