@pine-ds/core 4.0.0-mercury.0 → 4.1.0

package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js

@@ -1,24 +1,18 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-tooltip'),
+
   component: 'pds-tooltip',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'],
-    },
-  },
+  parameters: {},
   title: 'components/Tooltip'
 }
 
 const BaseTemplate = (args) => html`
-  <pds-tooltip content=${args.content} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
+  <pds-tooltip content=${args.content} max-width=${args.maxWidth} ?has-arrow=${args.hasArrow} placement=${args.placement} ?opened=${args.opened}>${args.slot}</pds-tooltip>`;
 
 const HTMLContentTemplate = (args) => html`
-  <pds-tooltip has-arrow=${args.hasArrow} placement=${args.placement} html-content=${args.htmlContent}>
+  <pds-tooltip ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} ?html-content=${args.htmlContent} ?opened=${args.opened}>
     <div slot="content">
       <p><strong>This is a tooltip</strong></p>
       <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
@@ -30,46 +24,46 @@ const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
       <div class="position-demo-grid-item">
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top-start" opened=${args.opened}>
+        <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" ?opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top" opened=${args.opened}>
+        <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" ?opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="top-end" opened=${args.opened}>
+        <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" ?opened=${args.opened}>
           <pds-button variant="accent">te</pds-button>
         </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="left-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" ?opened=${args.opened}>
             <pds-button variant="accent">ls</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="left" opened=${args.opened}>
+          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" ?opened=${args.opened}>
             <pds-button variant="accent">l</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="left-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" ?opened=${args.opened}>
             <pds-button variant="accent">le</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="bottom-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" ?opened=${args.opened}>
             <pds-button variant="accent">bs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="bottom" opened=${args.opened}>
+          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" ?opened=${args.opened}>
             <pds-button variant="accent">b</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="bottom-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" ?opened=${args.opened}>
             <pds-button variant="accent">be</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="right-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" ?opened=${args.opened}>
             <pds-button variant="accent">rs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="right" opened=${args.opened}>
+          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" ?opened=${args.opened}>
             <pds-button variant="accent">r</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="right-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" ?opened=${args.opened}>
             <pds-button variant="accent">re</pds-button>
           </pds-tooltip>
       </div>
@@ -79,25 +73,29 @@ const PositionTemplate = (args) => html`
 export const Default = BaseTemplate.bind({});
 Default.args = {
   content: "The tooltip content",
+  opened: false,
   placement: "right",
-  slot: "target text"
+  slot: "target text",
 };
 
 export const HTMLContent = HTMLContentTemplate.bind({});
 HTMLContent.args = {
   htmlContent: true,
+  opened: false,
   placement: "bottom-start",
 };
 
 export const Positioning = PositionTemplate.bind({});
 Positioning.args = {
   content: "Trigger",
+  opened: false
 };
 
 export const NoArrow = BaseTemplate.bind({});
 NoArrow.args = {
   content: "The tooltip content",
   hasArrow: false,
+  opened: false,
   placement: "bottom-start",
   slot: "target text"
 };

package/dist/collection/global/pine-ui-global.js

@@ -1,2 +1 @@
 import "@pine-ds/icons";
-//# sourceMappingURL=pine-ui-global.js.map

package/dist/collection/global/styles/utils/label.css

@@ -0,0 +1,17 @@
+:host {
+  display: inline-block;
+}
+
+:host([aria-disabled=true]) label {
+  color: var(--pine-color-text-label-disabled);
+}
+
+:host([aria-readonly=true]) label {
+  color: var(--pine-color-text-label-readonly);
+}
+
+label {
+  color: var(--pine-color-text-label);
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+}

package/dist/collection/i18n/i18n-format.js

@@ -0,0 +1,59 @@
+/**
+ * i18n formatting helpers for Pine components.
+ *
+ * Pine stays string-agnostic: user-facing text is supplied by the consumer as
+ * props (English-defaulted). These helpers only handle the two things a prop
+ * value can't express on its own — interpolating live component state into a
+ * translated template, and picking the right plural form. No stored strings, no
+ * locale registry; the locale is read from the DOM (`lang`), the web-standard
+ * signal a consumer already sets.
+ *
+ * Two limitations of DOM-`lang` locale resolution, both inherent to inferring
+ * locale from the DOM rather than being told it:
+ *
+ * 1. Not reactive. `resolveLocale` is read during render; Stencil has no
+ *    reactive dependency on a DOM attribute, so changing `lang` at runtime
+ *    (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
+ *    components — the plural form stays stale until unrelated state forces a
+ *    render. Fine when locale changes via full-page navigation; a consumer that
+ *    switches locale client-side should pass the already-formatted/pluralized
+ *    string as the prop instead.
+ * 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
+ *    shadow root. A Pine component nested inside another custom element whose
+ *    `lang` sits on that outer host will not see it and falls back to
+ *    `document.documentElement.lang`. Set `lang` on (or above) the Pine element
+ *    in the same tree, or pass a pre-formatted string, when that matters.
+ */
+/** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
+export function formatMessage(template, vars) {
+    if (!vars)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
+}
+/** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
+export function resolveLocale(el) {
+    var _a;
+    const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
+    const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
+    return fromEl || fromDoc || 'en';
+}
+/**
+ * Pick the CLDR plural form for `count` in the element's locale (via the
+ * platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
+ * caller — component props, English-defaulted — and fall back to `other`.
+ */
+export function pluralize(el, count, forms, vars) {
+    let category = 'other';
+    try {
+        category = new Intl.PluralRules(resolveLocale(el)).select(count);
+    }
+    catch (_a) {
+        /* invalid locale tag → fall back to 'other' */
+    }
+    // Prefer the selected category, then the required `other`, then `one`; never
+    // return empty. `||` (not `??`) so an empty-string form is skipped too, not
+    // treated as present — a bare `{count}` still shows the number rather than
+    // leaving the trigger with no accessible name.
+    const template = forms[category] || forms.other || forms.one || '{count}';
+    return formatMessage(template, Object.assign({ count }, vars));
+}

package/dist/collection/i18n/index.js

@@ -0,0 +1 @@
+export { formatMessage, pluralize, resolveLocale } from './i18n-format';

package/dist/collection/index.js

@@ -1,2 +1,2 @@
+export * from './components';
 import "@pine-ds/icons";
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/attributes.js

@@ -0,0 +1,83 @@
+/**
+ * Inherit attributes from the host element
+ * @param el - Host element
+ * @param attributes - Array of attributes to inherit
+ */
+export const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+export const inheritAriaAttributes = (el, ignoreList) => {
+    let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = ariaAttributes.filter(attr => !ignoreList.includes(attr));
+    }
+    return inheritAttributes(el, attributesToInherit);
+};

package/dist/collection/utils/closest.js

@@ -5,4 +5,3 @@ export const closest = (selector, el) => {
         (('closest' in el && el.closest(selector)) ||
             closest(selector, el.getRootNode().host)));
 };
-//# sourceMappingURL=closest.js.map

package/dist/collection/utils/form.js

@@ -6,14 +6,18 @@ export const messageId = (id, messageType) => {
 };
 /**
  * Assign aria-description id to relate messages with form element
+ *
+ * Returns the error message id when invalid, otherwise the helper message id.
+ * Pass only messages the component renders — a described id must exist in the DOM.
  */
-export const assignDescription = (id, invalid, helperMessage) => {
-    if (!helperMessage)
-        return;
-    let relatedId = messageId(id, 'helper');
-    if (invalid)
-        relatedId = messageId(id, 'error');
-    return relatedId;
+export const assignDescription = (id, invalid, helperMessage, errorMessage) => {
+    const hasErrorMessage = Boolean(errorMessage);
+    const hasHelperMessage = Boolean(helperMessage);
+    if (invalid && hasErrorMessage)
+        return messageId(id, 'error');
+    if (hasHelperMessage)
+        return messageId(id, 'helper');
+    return undefined;
 };
 /**
  * Updates the `invalid` prop of a form element based on it's values validity
@@ -25,4 +29,33 @@ export const isRequired = (target, component) => {
         (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;
     }
 };
-//# sourceMappingURL=form.js.map
+/**
+ * Exposes a readonly type property on a custom form element to match native form element behavior.
+ * This makes the type property enumerable and accessible via element.type, matching native HTML elements.
+ * The property is non-configurable, preventing it from being redefined or deleted at runtime.
+ *
+ * @param element - The custom element to add the type property to
+ * @param type - The type value (string literal) or a getter function that returns the type
+ */
+export function exposeTypeProperty(element, type) {
+    if (Object.getOwnPropertyDescriptor(element, 'type'))
+        return;
+    Object.defineProperty(element, 'type', {
+        get: typeof type === 'function' ? type : () => type,
+        enumerable: true,
+        configurable: false
+    });
+}
+/**
+ * Determines if code is running in Stencil's spec test environment.
+ * Stencil's mock-doc logs console.error on any ElementInternals
+ * property access during spec tests. Use this guard to skip
+ * ElementInternals calls in the mock environment.
+ *
+ * Uses __STENCIL_SPEC_TESTS__ (the same env var Stencil's mock-doc checks)
+ * to avoid false positives in downstream consumer test suites.
+ */
+export const isSpecTest = () => {
+    var _a;
+    return typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.__STENCIL_SPEC_TESTS__) === 'true';
+};

package/dist/collection/utils/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/overlay.js

@@ -1,68 +1,84 @@
 export const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
-    if (elem == undefined)
-        return;
+    if (elem === null || overlay === null)
+        return false;
+    if (typeof elemPlacement !== 'string' || elemPlacement.trim() === '') {
+        return false;
+    }
     const rect = elem.getBoundingClientRect();
     const contentRect = overlay.getBoundingClientRect();
-    // Exit the function if the placement is not set
-    if (!elemPlacement || elemPlacement == "")
-        return;
+    // Reset styles
+    overlay.style.top = '';
+    overlay.style.left = '';
+    overlay.style.right = '';
+    overlay.style.bottom = '';
+    overlay.style.transform = '';
+    // Use fixed positioning for portal overlays
+    overlay.style.position = 'fixed';
+    // Detect if the trigger is a span with only text or a text node
+    let isTextTrigger = false;
+    if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.TEXT_NODE) {
+        isTextTrigger = true;
+    }
+    else if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.ELEMENT_NODE) {
+        const child = elem.childNodes[0];
+        if (child.tagName === 'SPAN' && child.childNodes.length === 1 && child.childNodes[0].nodeType === Node.TEXT_NODE) {
+            isTextTrigger = true;
+        }
+    }
     switch (true) {
-        case elemPlacement.includes("right"):
-            overlay.style.top = '50%';
-            overlay.style.left = `calc(${rect.width}px + ${offset}px)`;
-            overlay.style.transform = 'translateY(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.top = '0';
-                overlay.style.transform = 'translateY(0)';
+        case elemPlacement.includes('right'):
+            if (isTextTrigger) {
+                // Align to the bottom of the trigger for text triggers
+                overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;
+            }
+            else {
+                overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.bottom = '0';
-                overlay.style.top = 'initial';
-                overlay.style.transform = 'translateY(0)';
+            overlay.style.left = `${rect.right + offset}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.top = `${rect.top}px`;
+            }
+            if (elemPlacement.includes('end')) {
+                overlay.style.top = `${rect.bottom - contentRect.height}px`;
             }
             break;
-        case elemPlacement.includes("left"):
-            overlay.style.top = '50%';
-            overlay.style.right = `calc(${rect.width}px + ${offset}px)`;
-            overlay.style.transform = 'translateY(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.top = '0';
-                overlay.style.transform = 'translateY(0)';
+        case elemPlacement.includes('left'):
+            if (isTextTrigger) {
+                overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;
+            }
+            else {
+                overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;
+            }
+            overlay.style.left = `${rect.left - contentRect.width - offset}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.top = `${rect.top}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.bottom = '0';
-                overlay.style.top = 'initial';
-                overlay.style.transform = 'translateY(0)';
+            if (elemPlacement.includes('end')) {
+                overlay.style.top = `${rect.bottom - contentRect.height}px`;
             }
             break;
-        case elemPlacement.includes("bottom"):
-            overlay.style.top = `calc(${rect.height}px + ${offset}px)`;
-            overlay.style.left = '50%';
-            overlay.style.transform = 'translateX(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.left = '0';
-                overlay.style.transform = 'translateX(0)';
+        case elemPlacement.includes('bottom'):
+            overlay.style.top = `${rect.bottom + offset}px`;
+            overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.left = `${rect.left}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.left = 'initial';
-                overlay.style.right = '0';
-                overlay.style.transform = 'translateX(0)';
+            if (elemPlacement.includes('end')) {
+                overlay.style.left = `${rect.right - contentRect.width}px`;
+                overlay.style.right = 'initial';
             }
             break;
-        case elemPlacement.includes("top"):
-            overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;
-            overlay.style.left = '50%';
-            overlay.style.transform = 'translateX(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.left = '0';
-                overlay.style.transform = 'translateX(0)';
+        case elemPlacement.includes('top'):
+            overlay.style.top = `${rect.top - contentRect.height - offset}px`;
+            overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.left = `${rect.left}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.left = 'initial';
-                overlay.style.right = '0';
-                overlay.style.transform = 'translateX(0)';
+            if (elemPlacement.includes('end')) {
+                overlay.style.left = `${rect.right - contentRect.width}px`;
+                overlay.style.right = 'initial';
             }
             break;
     }
+    return true;
 };
-//# sourceMappingURL=overlay.js.map

package/dist/collection/utils/reconnected-content.js

@@ -0,0 +1,25 @@
+/**
+ * Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
+ * left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
+ * component's previous render inside its freshly rendered one. Call from
+ * `componentDidRender` with the element that directly contains the rendered
+ * `<slot>` and the selector that identifies "another one of me." Unwraps in
+ * place (move-then-remove) so nested content is never lost.
+ *
+ * `contentSelector` is only needed when the wrapper itself further nests a
+ * separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
+ * `.pds-tab__content` div) — omit it when the wrapper's own children are the
+ * slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
+ */
+export function unwrapReconnectedContent(container, selector, contentSelector) {
+    var _a;
+    if (container === null)
+        return;
+    let stale = container.firstElementChild;
+    while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
+        const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
+        Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
+        stale.remove();
+        stale = container.firstElementChild;
+    }
+}

package/dist/collection/utils/scroll.js

@@ -0,0 +1,77 @@
+let cachedRtlScrollType = null;
+/**
+ * Detects how this browser reports scrollLeft for RTL overflow containers.
+ * @see https://github.com/othree/jquery.rtl-scroll-type
+ */
+export function getRtlScrollType() {
+    if (cachedRtlScrollType) {
+        return cachedRtlScrollType;
+    }
+    if (typeof document === 'undefined') {
+        cachedRtlScrollType = 'default';
+        return cachedRtlScrollType;
+    }
+    const probe = document.createElement('div');
+    probe.style.width = '100px';
+    probe.style.height = '100px';
+    probe.style.position = 'absolute';
+    probe.style.top = '-1000px';
+    probe.style.overflow = 'scroll';
+    probe.style.direction = 'rtl';
+    const inner = document.createElement('div');
+    inner.style.width = '200px';
+    inner.style.height = '100px';
+    probe.appendChild(inner);
+    document.body.appendChild(probe);
+    if (probe.scrollLeft > 0) {
+        cachedRtlScrollType = 'reverse';
+    }
+    else {
+        probe.scrollLeft = 1;
+        cachedRtlScrollType = probe.scrollLeft === 0 ? 'negative' : 'default';
+    }
+    document.body.removeChild(probe);
+    return cachedRtlScrollType;
+}
+/** Reset cached RTL scroll type (for tests). */
+export function resetRtlScrollTypeCache() {
+    cachedRtlScrollType = null;
+}
+/** True when the element's used text direction is RTL (inherits from ancestors). */
+export function isRtlDirection(element) {
+    return getComputedStyle(element).direction === 'rtl';
+}
+/**
+ * RTL scroll offset from inline-start for a known browser scrollLeft model.
+ * @see https://github.com/othree/jquery.rtl-scroll-type#3-types-of-scrollleft-scrollwidth--100
+ */
+export function getRtlScrollOffsetFromStart(scrollLeft, maxScroll, rtlType) {
+    switch (rtlType) {
+        case 'negative':
+            return Math.max(0, -scrollLeft);
+        case 'reverse':
+            return Math.max(0, scrollLeft);
+        case 'default':
+        default:
+            return Math.max(0, maxScroll - scrollLeft);
+    }
+}
+/**
+ * Distance scrolled from the inline-start edge (LTR: left, RTL: right).
+ */
+export function getScrollOffsetFromStart(container) {
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    const maxScroll = Math.max(0, scrollWidth - clientWidth);
+    if (maxScroll <= 0) {
+        return 0;
+    }
+    const isRtl = isRtlDirection(container);
+    if (!isRtl) {
+        return scrollLeft;
+    }
+    return getRtlScrollOffsetFromStart(scrollLeft, maxScroll, getRtlScrollType());
+}
+/** True when the container is scrolled away from its inline-start edge. */
+export function isScrolledFromInlineStart(container) {
+    return getScrollOffsetFromStart(container) > 0;
+}