@tylertech/forge 3.14.0-dev.5 → 3.14.1

package/esm/secret/secret.js

@@ -0,0 +1,331 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+import { __decorate } from 'tslib';
+import { CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, LiveAnnouncer } from '@tylertech/forge-core';
+import { tylIconEyeOutline, tylIconEyeClosed } from '@tylertech/tyler-icons';
+import { unsafeCSS, html, nothing } from 'lit';
+import { property, query, queryAssignedNodes, state, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { setDefaultAria } from '../core/utils/a11y-utils.js';
+import { toggleState } from '../core/utils/utils.js';
+import '../icon-button/index.js';
+import '../icon/index.js';
+import '../tooltip/index.js';
+import '../button/index.js';
+import { ButtonComponent } from '../button/button.js';
+import { IconButtonComponent } from '../icon-button/icon-button.js';
+import { TooltipComponent } from '../tooltip/tooltip.js';
+import styles from './secret.scss.js';
+import { IconRegistry } from '../icon/icon-registry.js';
+import { IconComponent } from '../icon/icon.js';
+
+var _a, _b;
+const SECRET_TAG_NAME = 'forge-secret';
+/**
+ * @tag forge-secret
+ *
+ * @summary A component that conceals content with a blur or dot mask, revealing it on user interaction.
+ *
+ * @description
+ * The secret component blurs or masks content and provides a connected button to reveal it.
+ * Content is revealed on click/keyboard interaction, with optional hover reveal. Multiple instances
+ * sharing a name act as a radio group where only one can be revealed at a time.
+ *
+ * @cssproperty --forge-secret-blur - The radius of the blur effect.
+ * @cssproperty --forge-secret-button-background - The background color of the button.
+ * @cssproperty --forge-secret-button-color - The text and icon color of the button.
+ * @cssproperty --forge-secret-button-shape - The button's border radius.
+ * @cssproperty --forge-secret-button-padding - The inline padding around the button or inline and block padding around the text button.
+ * @cssproperty --forge-secret-icon-size - The icon's size.
+ * @cssproperty --forge-secret-text-button-shape - The text button's border radius.
+ * @cssproperty --forge-secret-text-decoration-line - The decoration line applied to open inline content.
+ * @cssproperty --forge-secret-text-decoration-style - The style of the text decoration line.
+ * @cssproperty --forge-secret-text-decoration-color - The color of the text decoration line.
+ * @cssproperty --forge-secret-text-underline-offset - The spacing between the inline content and the text decoration line.
+ * @cssproperty --forge-secret-transition-duration - The duration of transitions.
+ * @cssproperty --forge-secret-transition-easing - The timing function of transitions.
+ *
+ * @slot - Default slot for the secret content.
+ * @slot close-icon - An icon that is shown when the secret is open, indicating it can be closed.
+ * @slot open-icon - An icon that is shown when the secret is closed, indicating it can be opened.
+ * @slot label - Text content that appears in the tooltip attached to the button or as the button text when set to block.
+ *
+ * @state open - Indicates that the content is visible.
+ * @state block - Indicates that the secret is displayed as a block element instead of inline.
+ *
+ * @csspart root - The root container.
+ * @csspart content - The content container.
+ * @csspart button - The toggle button element.
+ * @csspart text-button - The toggle button element when the secret is set to block.
+ *
+ * @cssclass forge-secret - The secret component container (required).
+ * @cssclass forge-secret--blur - Applies a blur effect to conceal content when the button has `aria-expanded="false"`.
+ * @cssclass forge-secret--masked - Applies a dot mask to conceal content when the button has `aria-expanded="false"`. Not applicable when the secret is set to block. In that case the blur variant is used instead.
+ * @cssclass forge-secret--noise - Applies a noise effect to conceal content when the button has `aria-expanded="false"`.
+ * @cssclass forge-secret--block - Displays the secret as a block element.
+ * @cssclass forge-secret--show-on-hover - Reveals the secret content when hovering over the component or focusing the button.
+ * @cssclass forge-secret__content - The content to be concealed or revealed.
+ * @cssclass forge-secret__button - The icon button used to toggle an inline secret.
+ * @cssclass forge-secret__text-button - The text button used to toggle a block secret.
+ * @cssclass forge-secret__masked - The element replacing concealed content when the masked variant is used. The `data-mask` attribute on this element sets its content.
+ *
+ * @fires {ToggleEvent} toggle - Dispatched when the secret opens or closes.
+ */
+let SecretComponent = class SecretComponent extends BaseLitElement {
+    static { _a = CUSTOM_ELEMENT_NAME_PROPERTY, _b = CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY; }
+    static {
+        IconRegistry.define([tylIconEyeOutline, tylIconEyeClosed]);
+    }
+    static { this.styles = unsafeCSS(styles); }
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_a] = SECRET_TAG_NAME; }
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_b] = [ButtonComponent, IconButtonComponent, IconComponent, TooltipComponent]; }
+    #toggleTextRef;
+    #internals;
+    constructor() {
+        super();
+        /**
+         * Whether the secret content is visible.
+         * @attribute
+         * @default false
+         */
+        this.open = false;
+        /**
+         * The style applied to hidden content when the secret is set to inline. Possible values are blur, masked, and noise.
+         * @attribute
+         * @default 'blur'
+         */
+        this.variant = 'blur';
+        /**
+         * The mask pattern to use with the masked variant. When empty the slotted text content is used as the mask.
+         * @attribute
+         * @default ''
+         */
+        this.mask = '';
+        /**
+         * The character to replace characters with in the masked variant.
+         * @attribute mask-character
+         * @default '●'
+         */
+        this.maskCharacter = '●';
+        /**
+         * Characters that will not be replaced by the mask character in the masked variant.
+         * @attribute unmasked-characters
+         * @default ''
+         */
+        this.unmaskedCharacters = '';
+        /**
+         * Whether the secret content should be displayed as a block element instead of inline with text.
+         * @attribute
+         * @default false
+         */
+        this.block = false;
+        /**
+         * The position of the button when the secret is set to inline. Possible values are start and end.
+         * @attribute button-position
+         * @default 'end'
+         */
+        this.buttonPosition = 'end';
+        /**
+         * Whether to reveal content on hover/focus in addition to clicks.
+         * @attribute show-on-hover
+         * @default false
+         */
+        this.showOnHover = false;
+        /**
+         * When set, secrets with the same name will close when another secret with that name is opened.
+         * @attribute
+         * @default ''
+         */
+        this.name = '';
+        this._mask = '';
+        this.#toggleTextRef = createRef();
+        this.#internals = this.attachInternals();
+    }
+    firstUpdated() {
+        setDefaultAria(this, this.#internals, { role: 'group', ariaLabel: 'secret' });
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('block')) {
+            toggleState(this.#internals, 'block', this.block);
+        }
+        if (changedProperties.has('open')) {
+            toggleState(this.#internals, 'open', this.open);
+            if (this.open && this.name) {
+                this.#hideOtherSecretsInGroup();
+            }
+        }
+    }
+    updated(changedProperties) {
+        this.#tryUpdateInternalMask(changedProperties);
+        if (changedProperties.has('open') && this.open) {
+            this.#announceContent();
+        }
+    }
+    render() {
+        return html `
+      <span
+        part="root"
+        class=${classMap({ 'forge-secret': true, reverse: this.buttonPosition === 'start', 'show-on-hover': this.showOnHover })}
+        @click="${this.#handleClick}">
+        <span
+          class=${classMap({
+            content: true,
+            blur: !this.open && (this.variant === 'blur' || (this.block && this.variant === 'masked')),
+            masked: !this.open && !this.block && this.variant === 'masked',
+            noise: !this.open && this.variant === 'noise'
+        })}
+          part="content"
+          ?inert=${!this.open}
+          data-mask=${this._mask || nothing}>
+          <slot></slot>
+        </span>
+        ${this.block ? this.#renderTextButton() : this.#renderIconButton()}
+      </span>
+    `;
+    }
+    #renderTextButton() {
+        return html `
+      <forge-button
+        class="text-button"
+        exportparts="text-button"
+        aria-expanded="${this.open}"
+        .ariaControlsElements=${[this]}
+        @keydown="${this.#handleKeyDown}">
+        ${this.#renderIcon()}
+        <slot name="label">${this.open ? 'Hide' : 'Show'}</slot>
+      </forge-button>
+    `;
+    }
+    #renderIconButton() {
+        const buttonAriaLabelledByElements = [this];
+        if (this.#toggleTextRef.value) {
+            buttonAriaLabelledByElements.unshift(this.#toggleTextRef.value);
+        }
+        return html `
+      <span hidden ${ref(this.#toggleTextRef)}>Toggle</span>
+      <forge-icon-button
+        class="button"
+        exportparts="button"
+        aria-expanded="${this.open}"
+        .ariaControlsElements=${[this]}
+        .ariaLabelledByElements=${buttonAriaLabelledByElements}
+        @keydown="${this.#handleKeyDown}">
+        ${this.#renderIcon()}
+      </forge-icon-button>
+      <forge-tooltip anchor="button" placement="top">
+        <slot name="label">${this.open ? 'Hide' : 'Show'}</slot>
+      </forge-tooltip>
+    `;
+    }
+    #renderIcon() {
+        return html `
+      <slot name="${this.open ? 'close-icon' : 'open-icon'}">
+        <forge-icon class="icon" .name=${this.open ? 'eye_closed' : 'eye_outline'}></forge-icon>
+      </slot>
+    `;
+    }
+    #handleClick(evt) {
+        const didClickButton = evt.composedPath().indexOf(this._buttonElement) !== -1;
+        if (!didClickButton) {
+            // Ignore clicks from the content when visible
+            if (this.open) {
+                return;
+            }
+            // Focus the button as if it were clicked instead of the content
+            this._buttonElement.focus({ focusVisible: false });
+        }
+        this.open = !this.open;
+        this.#dispatchToggleEvent();
+    }
+    #handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            event.stopPropagation();
+            this.open = false;
+            this.#dispatchToggleEvent();
+        }
+    }
+    #hideOtherSecretsInGroup() {
+        const root = this.getRootNode();
+        const allSecrets = Array.from(root.querySelectorAll('forge-secret'));
+        allSecrets
+            .filter(secret => secret !== this && secret.name === this.name && secret.open)
+            .forEach(secret => {
+            secret.open = false;
+            secret.#dispatchToggleEvent();
+        });
+    }
+    #dispatchToggleEvent() {
+        const event = new ToggleEvent('toggle', { oldState: (!this.open).toString(), bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    #getTextContent() {
+        return Array.from(this._contentNodes)
+            .map(node => node.textContent)
+            .join(' ')
+            .trim();
+    }
+    #announceContent() {
+        LiveAnnouncer.instance.announce(this.#getTextContent(), 'polite');
+    }
+    #tryUpdateInternalMask(changedProperties) {
+        if (this.block || this.variant !== 'masked') {
+            return;
+        }
+        const maskRelatedProperties = ['unmaskedCharacters', 'block', 'mask', 'maskCharacter', 'variant'];
+        if (!maskRelatedProperties.some(prop => changedProperties.has(prop))) {
+            return;
+        }
+        const content = this.mask || this.#getTextContent();
+        const regex = new RegExp(`[^${this.unmaskedCharacters.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')}]`, 'g');
+        this._mask = content.replace(regex, this.maskCharacter);
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], SecretComponent.prototype, "open", void 0);
+__decorate([
+    property()
+], SecretComponent.prototype, "variant", void 0);
+__decorate([
+    property()
+], SecretComponent.prototype, "mask", void 0);
+__decorate([
+    property({ attribute: 'mask-character' })
+], SecretComponent.prototype, "maskCharacter", void 0);
+__decorate([
+    property({ attribute: 'unmasked-characters' })
+], SecretComponent.prototype, "unmaskedCharacters", void 0);
+__decorate([
+    property({ type: Boolean })
+], SecretComponent.prototype, "block", void 0);
+__decorate([
+    property({ attribute: 'button-position' })
+], SecretComponent.prototype, "buttonPosition", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-on-hover' })
+], SecretComponent.prototype, "showOnHover", void 0);
+__decorate([
+    property({ reflect: true })
+], SecretComponent.prototype, "name", void 0);
+__decorate([
+    query(':is(forge-button, forge-icon-button)')
+], SecretComponent.prototype, "_buttonElement", void 0);
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], SecretComponent.prototype, "_contentNodes", void 0);
+__decorate([
+    state()
+], SecretComponent.prototype, "_mask", void 0);
+SecretComponent = __decorate([
+    customElement(SECRET_TAG_NAME)
+], SecretComponent);
+
+export { SECRET_TAG_NAME, SecretComponent };

package/esm/secret/secret.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{display:inline-block;vertical-align:bottom}:host([hidden]){display:none}.forge-secret{--_secret-blur:var(--forge-secret-blur, var(--forge-spacing-xsmall, 8px));--_secret-button-background:var(--forge-secret-button-background, var(--forge-theme-surface-inverse, #333333));--_secret-button-color:var(--forge-secret-button-color, var(--forge-theme-on-surface-inverse, #ffffff));--_secret-button-shape:var(--forge-secret-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_secret-button-padding:var(--forge-secret-button-padding, var(--forge-spacing-xsmall, 8px));--_secret-icon-size:var(--forge-secret-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1));--_secret-text-button-shape:var(--forge-secret-text-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_secret-text-decoration-line:var(--forge-secret-text-decoration-line, underline);--_secret-text-decoration-style:var(--forge-secret-text-decoration-style, dotted);--_secret-text-decoration-color:var(--forge-secret-text-decoration-color, inherit);--_secret-text-underline-offset:var(--forge-secret-text-underline-offset, var(--forge-spacing-xxxsmall, 2px));--_secret-transition-duration:var(--forge-secret-transition-duration, var(--forge-animation-duration-short4, 200ms));--_secret-transition-easing:var(--forge-secret-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-secret{display:flex;max-inline-size:fit-content}.reverse{flex-direction:row-reverse}.content{display:inline-block;position:relative;transition:filter var(--_secret-transition-duration) var(--_secret-transition-easing)}.blur{filter:blur(var(--_secret-blur))}.masked::before{content:attr(data-mask)}.masked slot:not([name]){display:none}.noise::before{content:\"\";position:absolute;inset:0;width:100%;height:100%;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"600\"><filter id=\"noise\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.85\" numOctaves=\"8\" stitchTiles=\"stitch\" /><feColorMatrix type=\"matrix\" values=\"0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0\" /></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23noise)\" opacity=\".5\" /></svg>');background-size:600px 600px;background-repeat:repeat;backdrop-filter:blur(24px)}.button{--forge-icon-button-background-color: var(--_secret-button-background);--forge-icon-button-icon-color: var(--_secret-button-color);--forge-icon-button-icon-size: inherit;--forge-icon-button-padding: 0;--forge-icon-button-shape: var(--_secret-button-shape);--forge-icon-button-size: 1lh;--forge-focus-indicator-outward-offset: 2px;block-size:0;padding-inline:var(--_secret-button-padding)}.icon{--forge-icon-font-size: var(--_secret-icon-size)}.text-button{--_button-dense-height:var(--forge-button-dense-height, 24px);--forge-button-background: var(--_secret-button-background);--forge-button-color: var(--_secret-button-color);--forge-button-shape: var(--_secret-text-button-shape);--forge-button-height: var(--_button-dense-height);--forge-focus-indicator-shape: var(--_secret-text-button-shape);padding:var(--_secret-button-padding);position:absolute;place-self:center;inset:0;translate:0;transition-property:inset-block-start,translate;transition-duration:var(--_secret-transition-duration);transition-timing-function:var(--_secret-transition-easing)}.show-on-hover:where(:hover,:has(button:focus-visible)) .content{filter:none}.show-on-hover:where(:hover,:has(button:focus-visible)) .content::before{visibility:hidden}.show-on-hover:where(:hover,:has(button:focus-visible)) .content slot:not([name]){display:initial}.show-on-hover:where(:hover,:has(button:focus-visible)) .masked{display:grid}.show-on-hover:where(:hover,:has(button:focus-visible)) .masked>*,.show-on-hover:where(:hover,:has(button:focus-visible)) .masked::before{grid-row:1;grid-column:1}.show-on-hover:where(:hover,:has(button:focus-visible)) .text-button{inset-block-start:-100%;translate:0 -50%}:host(:state(open)) .text-button{inset-block-start:-100%;translate:0 -50%}:host(:not(:state(open))) .forge-secret{cursor:pointer}:host(:not(:state(block)):state(open)) .content{text-decoration-line:var(--_secret-text-decoration-line);text-decoration-style:var(--_secret-text-decoration-style);text-decoration-color:var(--_secret-text-decoration-color);text-underline-offset:var(--_secret-text-underline-offset)}:host(:state(block)){display:block;vertical-align:initial}:host(:state(block)) .forge-secret{display:block;position:relative}:host(:state(block)) .content{display:block}@media(prefers-reduced-motion: reduce){.forge-secret{--_secret-transition-duration:var(--forge-secret-transition-duration, 0)}}[hidden]{display:none}";
+
+export { styles as default };

package/esm/split-view/split-view-panel/split-view-panel.scss.js

@@ -4,6 +4,6 @@
  * License: Apache-2.0
  */
 
-var styles = ".forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));background-color:var(--forge-theme-outline, #e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:none}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width, 8px);width:calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, 8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width, 8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u0p183v;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p183v{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u0p184g;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p184g{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u0p184m;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p184m{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u0p1856;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p1856{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width, 8px);height:calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, 8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width, 8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u0p185b;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p185b{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u0p185d;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p185d{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u0p1868;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p1868{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u0p1877;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u0p1877{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer) !important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width: 2px}";
+var styles = ".forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));background-color:var(--forge-theme-outline, #e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:none}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width, 8px);width:calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, 8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width, 8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u38yt61;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt61{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u38yt6x;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt6x{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u38yt7f;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt7f{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u38yt82;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt82{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width, 8px);height:calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, 8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width, 8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u38yt83;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt83{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u38yt92;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt92{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u38yt9n;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38yt9n{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u38ytae;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes u38ytae{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer) !important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width: 2px}";
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge",
-  "version": "3.14.0-dev.5",
+  "version": "3.14.1",
   "description": "Tyler Forge™ Web Components library",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",
@@ -52,11 +52,11 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "@lit/context": "^1.1.6",
-    "@tylertech/forge-core": "3.3.0-dev.0",
-    "@tylertech/tyler-icons": "^2.0.4",
+    "@tylertech/tyler-icons": "^2.1.0",
     "imask": "^7.6.1",
     "lit": "^3.3.2",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "@tylertech/forge-core": "3.3.0"
   },
-  "publishedAt": "2026-03-26T17:42:19.460Z"
+  "publishedAt": "2026-04-23T18:05:24.922Z"
 }

package/sass/core/styles/tokens/secret/_tokens.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '../../animation';
+@use '../../spacing';
+@use '../../shape';
+@use '../../theme';
+@use '../../typography';
+@use '../../utils';
+
+$tokens: (
+  blur: utils.module-val(secret, blur, spacing.variable(xsmall)),
+  button-background: utils.module-val(secret, button-background, theme.variable(surface-inverse)),
+  button-color: utils.module-val(secret, button-color, theme.variable(on-surface-inverse)),
+  button-shape: utils.module-val(secret, button-shape, shape.variable(medium)),
+  button-padding: utils.module-val(secret, button-padding, spacing.variable(xsmall)),
+  icon-size: utils.module-val(secret, icon-size, typography.font-size-relative('1000')),
+  text-button-shape: utils.module-val(secret, text-button-shape, shape.variable(full)),
+  text-decoration-line: utils.module-val(secret, text-decoration-line, underline),
+  text-decoration-style: utils.module-val(secret, text-decoration-style, dotted),
+  text-decoration-color: utils.module-val(secret, text-decoration-color, inherit),
+  text-underline-offset: utils.module-val(secret, text-underline-offset, spacing.variable(xxxsmall)),
+  transition-duration: utils.module-val(secret, transition-duration, animation.variable(duration-short4)),
+  transition-easing: utils.module-val(secret, transition-easing, animation.variable(easing-standard))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/sass/secret/_core.scss

@@ -0,0 +1,170 @@
+@use '../core/styles/typography';
+@use './token-utils' as *;
+@use '../button' as button;
+@use '../focus-indicator' as focus-indicator;
+@use '../icon-button' as icon-button;
+@use '../icon' as icon;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+@mixin host-block {
+  display: block;
+  vertical-align: initial;
+}
+
+@mixin base {
+  display: flex;
+  max-inline-size: fit-content;
+}
+
+@mixin base-reverse {
+  flex-direction: row-reverse;
+}
+
+@mixin base-block {
+  display: block;
+  position: relative;
+}
+
+@mixin content {
+  display: inline-block;
+  position: relative;
+  transition: filter #{token(transition-duration)} #{token(transition-easing)};
+}
+
+@mixin content-block {
+  display: block;
+}
+
+@mixin content-inline-open {
+  text-decoration-line: #{token(text-decoration-line)};
+  text-decoration-style: #{token(text-decoration-style)};
+  text-decoration-color: #{token(text-decoration-color)};
+  text-underline-offset: #{token(text-underline-offset)};
+}
+
+@mixin content-blur {
+  filter: blur(#{token(blur)});
+}
+
+@mixin content-masked {
+  &::before {
+    content: attr(data-mask);
+  }
+
+  slot:not([name]) {
+    display: none;
+  }
+}
+
+@mixin content-noise {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="8" stitchTiles="stitch" /><feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity=".5" /></svg>');
+    background-size: 600px 600px;
+    background-repeat: repeat;
+    backdrop-filter: blur(24px);
+  }
+}
+
+@mixin content-forced-open {
+  filter: none;
+
+  &::before {
+    visibility: hidden;
+  }
+
+  slot:not([name]) {
+    display: initial;
+  }
+}
+
+@mixin content-masked-forced-open {
+  // Using grid to force the masked and unmasked content into the same space, setting the width of
+  // the container to the maximum of the two and preventing layout shift while hovering
+  display: grid;
+
+  & > *,
+  &::before {
+    grid-row: 1;
+    grid-column: 1;
+  }
+}
+
+@mixin button {
+  @include icon-button.provide-theme(
+    (
+      background-color: #{token(button-background)},
+      icon-color: #{token(button-color)},
+      icon-size: inherit,
+      padding: 0,
+      shape: #{token(button-shape)},
+      size: 1lh
+    )
+  );
+  @include focus-indicator.provide-theme(
+    (
+      outward-offset: 2px
+    )
+  );
+
+  // Set the block size to 0 to prevent the button from affecting text layout
+  block-size: 0;
+  padding-inline: #{token(button-padding)};
+}
+
+@mixin text-button {
+  @include button.tokens(
+    $includes: (
+      dense-height
+    )
+  );
+  @include button.provide-theme(
+    (
+      background: #{token(button-background)},
+      color: #{token(button-color)},
+      shape: #{token(text-button-shape)},
+      height: #{button.token(dense-height)}
+    )
+  );
+  @include focus-indicator.provide-theme(
+    (
+      shape: #{token(text-button-shape)}
+    )
+  );
+
+  padding: #{token(button-padding)};
+  position: absolute;
+  place-self: center;
+  inset: 0;
+  translate: 0;
+  transition-property: inset-block-start, translate;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-easing)};
+}
+
+@mixin text-button-open {
+  inset-block-start: -100%;
+  translate: 0 -50%;
+}
+
+@mixin icon {
+  @include icon.provide-theme(
+    (
+      font-size: #{token(icon-size)}
+    )
+  );
+}
+
+@mixin closed {
+  cursor: pointer;
+}

package/sass/secret/_token-utils.scss

@@ -0,0 +1,25 @@
+@use '../core/styles/tokens/secret/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: secret;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}