@tylertech/forge 3.14.0-dev.4 → 3.14.0

package/dist/secret/forge-secret.css

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+.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)));display:inline-block;vertical-align:bottom;display:flex;max-inline-size:fit-content}.forge-secret__content{display:inline-block;position:relative;transition:filter var(--_secret-transition-duration) var(--_secret-transition-easing)}.forge-secret__button{--forge-icon-button-background-color: var(--_secret-button-background);--forge-icon-button-icon-color: var(--_secret-button-color);--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)}.forge-secret__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)}.forge-secret__icon{--forge-icon-font-size: var(--_secret-icon-size)}.forge-secret--show-on-hover:where(:hover,:has(:where(.forge-secret__button,.forge-secret__text-button):focus-visible)) .forge-secret__content{filter:none !important}.forge-secret--show-on-hover:where(:hover,:has(:where(.forge-secret__button,.forge-secret__text-button):focus-visible)) .forge-secret__content::before{display:none}.forge-secret--show-on-hover:where(:hover,:has(:where(.forge-secret__button,.forge-secret__text-button):focus-visible)).forge-secret--masked:not(.forge-secret--block) .forge-secret__content{display:inline-block !important}.forge-secret--show-on-hover:where(:hover,:has(:where(.forge-secret__button,.forge-secret__text-button):focus-visible)).forge-secret--masked:not(.forge-secret--block) .forge-secret__masked::before{display:none}.forge-secret--show-on-hover:where(:hover,:has(:where(.forge-secret__button,.forge-secret__text-button):focus-visible)) .forge-secret__text-button{inset-block-start:-100%;translate:0 -50%}.forge-secret--block{display:block;vertical-align:initial;display:block;position:relative}.forge-secret--block .forge-secret__content{display:block}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button):not([aria-expanded=true])){cursor:pointer;cursor:unset}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button):not([aria-expanded=true])) .forge-secret__content{interactivity:inert;user-select:none}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button):not([aria-expanded=true])):where(.forge-secret--blur,.forge-secret--block.forge-secret--masked) .forge-secret__content{filter:blur(var(--_secret-blur))}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button):not([aria-expanded=true])).forge-secret--masked:not(.forge-secret--block) .forge-secret__content{display:none}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button):not([aria-expanded=true])).forge-secret--masked:not(.forge-secret--block) .forge-secret__masked::before{content:attr(data-mask)}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button):not([aria-expanded=true])).forge-secret--noise .forge-secret__content::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)}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button)[aria-expanded=true]) .forge-secret__text-button{inset-block-start:-100%;translate:0 -50%}.forge-secret:has(:where(.forge-secret__button,.forge-secret__text-button)[aria-expanded=true]):not(.forge-secret--block) .forge-secret__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)}@media(prefers-reduced-motion: reduce){.forge-secret{--_secret-transition-duration:var(--forge-secret-transition-duration, 0)}}

package/esm/button-area/button-area.js

@@ -68,9 +68,15 @@ let ButtonAreaComponent = class ButtonAreaComponent extends BaseLitElement {
         this.#stateLayer = createRef();
         this.#focusIndicator = createRef();
         this.#handleClick = (event) => {
+            // Ignore the click if it originates from an ignored element
+            if (this.#shouldIgnoreEvent(event)) {
+                event.stopPropagation();
+                return;
+            }
             // Prevent the click if disabled
             if (this.disabled) {
                 event.stopPropagation();
+                return;
             }
             // Prevent the click if a selection was made
             const selection = window.getSelection();
@@ -78,14 +84,19 @@ let ButtonAreaComponent = class ButtonAreaComponent extends BaseLitElement {
                 event.stopPropagation();
                 return;
             }
-            // Prevent the click if it originates from an ignored element
-            if (this.#shouldIgnoreEvent(event)) {
-                event.stopPropagation();
+            // If the click occured outside an external associated element, trigger a click on it
+            // The event doesn't bubble so the host won't receive duplicate clicks
+            const associatedElement = this.#associatedElement;
+            if (!associatedElement) {
                 return;
             }
-            // If the click occured outside an external associated element, trigger a click on it
-            if (this.targetElement && !event.composedPath().includes(this.targetElement)) {
-                this.targetElement.click();
+            const clickOccurredInAssociatedElement = event.composedPath().includes(associatedElement);
+            if (!clickOccurredInAssociatedElement) {
+                associatedElement.dispatchEvent(new PointerEvent('click', {
+                    bubbles: false,
+                    cancelable: true,
+                    composed: true
+                }));
             }
         };
         this.#handleKeydown = (event) => {

package/esm/index.d.ts

@@ -6,9 +6,9 @@ export * from './backdrop/index.js';
 export * from './badge/index.js';
 export * from './banner/index.js';
 export * from './bottom-sheet/index.js';
-export * from './button/index.js';
 export * from './button-area/index.js';
 export * from './button-toggle/index.js';
+export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
@@ -28,13 +28,13 @@ export * from './field/index.js';
 export * from './file-picker/index.js';
 export * from './floating-action-button/index.js';
 export * from './focus-indicator/index.js';
-export * from './icon/index.js';
 export * from './icon-button/index.js';
+export * from './icon/index.js';
 export * from './inline-message/index.js';
 export * from './key/index.js';
 export * from './keyboard-shortcut/index.js';
-export * from './label/index.js';
 export * from './label-value/index.js';
+export * from './label/index.js';
 export * from './linear-progress/index.js';
 export * from './list/index.js';
 export * from './menu/index.js';
@@ -46,6 +46,7 @@ export * from './paginator/index.js';
 export * from './popover/index.js';
 export * from './radio/index.js';
 export * from './scaffold/index.js';
+export * from './secret/index.js';
 export * from './select/index.js';
 export * from './skeleton/index.js';
 export * from './skip-link/index.js';

package/esm/index.js

@@ -12,9 +12,9 @@ import { defineBackdropComponent } from './backdrop/index.js';
 import { defineBadgeComponent } from './badge/index.js';
 import { defineBannerComponent } from './banner/index.js';
 import { defineBottomSheetComponent } from './bottom-sheet/index.js';
-import { defineButtonComponent } from './button/index.js';
 import { defineButtonAreaComponent } from './button-area/index.js';
 import './button-toggle/index.js';
+import { defineButtonComponent } from './button/index.js';
 import { defineCalendarComponent } from './calendar/index.js';
 import { defineCardComponent } from './card/index.js';
 import { defineCheckboxComponent } from './checkbox/index.js';
@@ -32,13 +32,13 @@ import { defineFieldComponent } from './field/index.js';
 import { defineFilePickerComponent } from './file-picker/index.js';
 import { defineFloatingActionButtonComponent } from './floating-action-button/index.js';
 import { defineFocusIndicatorComponent } from './focus-indicator/index.js';
-import { defineIconComponent } from './icon/index.js';
 import { defineIconButtonComponent } from './icon-button/index.js';
+import { defineIconComponent } from './icon/index.js';
 import { defineInlineMessageComponent } from './inline-message/index.js';
 import './key/index.js';
 import { defineKeyboardShortcutComponent } from './keyboard-shortcut/index.js';
-import { defineLabelComponent } from './label/index.js';
 import { defineLabelValueComponent } from './label-value/index.js';
+import { defineLabelComponent } from './label/index.js';
 import { defineLinearProgressComponent } from './linear-progress/index.js';
 import './list/index.js';
 import { defineListItemComponent } from './list/list-item/index.js';
@@ -51,6 +51,7 @@ import { definePaginatorComponent } from './paginator/index.js';
 import { definePopoverComponent } from './popover/index.js';
 import './radio/index.js';
 import { defineScaffoldComponent } from './scaffold/index.js';
+import { defineSecretComponent } from './secret/index.js';
 import './select/index.js';
 import { defineSelectDropdownComponent } from './select/select-dropdown/index.js';
 import { defineSkeletonComponent } from './skeleton/index.js';
@@ -353,6 +354,7 @@ export { RadioGroupAdapter } from './radio/radio-group/radio-group-adapter.js';
 export { RadioGroupComponent } from './radio/radio-group/radio-group.js';
 export { RadioGroupCore } from './radio/radio-group/radio-group-core.js';
 export { SCAFFOLD_CONSTANTS } from './scaffold/scaffold-constants.js';
+export { SECRET_TAG_NAME, SecretComponent } from './secret/secret.js';
 export { SELECT_CONSTANTS } from './select/select/select-constants.js';
 export { SELECT_DROPDOWN_CONSTANTS } from './select/select-dropdown/select-dropdown-constants.js';
 export { SKELETON_CONSTANTS } from './skeleton/skeleton-constants.js';
@@ -532,6 +534,7 @@ function defineComponents() {
     defineRadioComponent();
     defineRadioGroupComponent();
     defineScaffoldComponent();
+    defineSecretComponent();
     defineSelectComponent();
     defineSelectDropdownComponent();
     defineSkeletonComponent();
@@ -564,4 +567,4 @@ function defineDeprecatedComponents() {
     defineDeprecatedIconButtonComponent();
 }
 
-export { defineAccordionComponent, defineAppBarComponent, defineAppBarHelpButtonComponent, defineAppBarMenuButtonComponent, defineAppBarNotificationButtonComponent, defineAppBarProfileButtonComponent, defineAppBarSearchComponent, defineAutocompleteComponent, defineAvatarComponent, defineBackdropComponent, defineBadgeComponent, defineBannerComponent, defineBottomSheetComponent, defineButtonAreaComponent, defineButtonComponent, defineButtonToggleComponent, defineButtonToggleGroupComponent, defineCalendarComponent, defineCardComponent, defineCheckboxComponent, defineChipComponent, defineChipFieldComponent, defineChipSetComponent, defineCircularProgressComponent, defineColorPickerComponent, defineComponents, defineDatePickerComponent, defineDateRangePickerComponent, defineDeprecatedButtonComponent, defineDeprecatedComponents, defineDeprecatedIconButtonComponent, defineDialogComponent, defineDividerComponent, defineDrawerComponent, defineExpansionPanelComponent, defineFieldComponent, defineFilePickerComponent, defineFloatingActionButtonComponent, defineFocusIndicatorComponent, defineIconButtonComponent, defineIconComponent, defineInlineMessageComponent, defineKeyComponent, defineKeyItemComponent, defineKeyboardShortcutComponent, defineLabelComponent, defineLabelValueComponent, defineLinearProgressComponent, defineListComponent, defineListItemComponent, defineMenuComponent, defineMeterComponent, defineMeterGroupComponent, defineMiniDrawerComponent, defineModalDrawerComponent, defineOpenIconComponent, defineOptionComponent, defineOptionGroupComponent, defineOverlayComponent, definePageStateComponent, definePaginatorComponent, definePopoverComponent, defineProfileCardComponent, defineRadioComponent, defineRadioGroupComponent, defineScaffoldComponent, defineSelectComponent, defineSelectDropdownComponent, defineSkeletonComponent, defineSkipLinkComponent, defineSliderComponent, defineSplitViewComponent, defineStackComponent, defineStateLayerComponent, defineStepComponent, defineStepperComponent, defineSwitchComponent, defineTabBarComponent, defineTabComponent, defineTableComponent, defineTextFieldComponent, defineTimePickerComponent, defineToastComponent, defineToolbarComponent, defineTooltipComponent, defineTreeComponent, defineTreeItemComponent, defineViewComponent, defineViewSwitcherComponent };
+export { defineAccordionComponent, defineAppBarComponent, defineAppBarHelpButtonComponent, defineAppBarMenuButtonComponent, defineAppBarNotificationButtonComponent, defineAppBarProfileButtonComponent, defineAppBarSearchComponent, defineAutocompleteComponent, defineAvatarComponent, defineBackdropComponent, defineBadgeComponent, defineBannerComponent, defineBottomSheetComponent, defineButtonAreaComponent, defineButtonComponent, defineButtonToggleComponent, defineButtonToggleGroupComponent, defineCalendarComponent, defineCardComponent, defineCheckboxComponent, defineChipComponent, defineChipFieldComponent, defineChipSetComponent, defineCircularProgressComponent, defineColorPickerComponent, defineComponents, defineDatePickerComponent, defineDateRangePickerComponent, defineDeprecatedButtonComponent, defineDeprecatedComponents, defineDeprecatedIconButtonComponent, defineDialogComponent, defineDividerComponent, defineDrawerComponent, defineExpansionPanelComponent, defineFieldComponent, defineFilePickerComponent, defineFloatingActionButtonComponent, defineFocusIndicatorComponent, defineIconButtonComponent, defineIconComponent, defineInlineMessageComponent, defineKeyComponent, defineKeyItemComponent, defineKeyboardShortcutComponent, defineLabelComponent, defineLabelValueComponent, defineLinearProgressComponent, defineListComponent, defineListItemComponent, defineMenuComponent, defineMeterComponent, defineMeterGroupComponent, defineMiniDrawerComponent, defineModalDrawerComponent, defineOpenIconComponent, defineOptionComponent, defineOptionGroupComponent, defineOverlayComponent, definePageStateComponent, definePaginatorComponent, definePopoverComponent, defineProfileCardComponent, defineRadioComponent, defineRadioGroupComponent, defineScaffoldComponent, defineSecretComponent, defineSelectComponent, defineSelectDropdownComponent, defineSkeletonComponent, defineSkipLinkComponent, defineSliderComponent, defineSplitViewComponent, defineStackComponent, defineStateLayerComponent, defineStepComponent, defineStepperComponent, defineSwitchComponent, defineTabBarComponent, defineTabComponent, defineTableComponent, defineTextFieldComponent, defineTimePickerComponent, defineToastComponent, defineToolbarComponent, defineTooltipComponent, defineTreeComponent, defineTreeItemComponent, defineViewComponent, defineViewSwitcherComponent };

package/esm/secret/index.d.ts

@@ -0,0 +1,3 @@
+export * from './secret.js';
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/secret'`). */
+export declare function defineSecretComponent(): void;

package/esm/secret/index.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+import { defineCustomElement } from '@tylertech/forge-core';
+import { SecretComponent } from './secret.js';
+export { SECRET_TAG_NAME } from './secret.js';
+
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/secret'`). */
+function defineSecretComponent() {
+    defineCustomElement(SecretComponent);
+}
+
+export { SecretComponent, defineSecretComponent };

package/esm/secret/secret.d.ts

@@ -0,0 +1,138 @@
+import { CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { PropertyValues, TemplateResult } from 'lit';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { IconButtonComponent } from '../icon-button/index.js';
+import { IconComponent } from '../icon/index.js';
+import { TooltipComponent } from '../tooltip/index.js';
+import { ButtonComponent } from '../button/index.js';
+import '../button/button.js';
+import '../icon-button/icon-button.js';
+import '../tooltip/tooltip.js';
+export type SecretVariant = 'blur' | 'masked' | 'noise';
+export type SecretButtonPosition = 'start' | 'end';
+export declare const SECRET_TAG_NAME: keyof HTMLElementTagNameMap;
+/**
+ * @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.
+ */
+export declare class SecretComponent extends BaseLitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY]: (typeof IconComponent | typeof IconButtonComponent | typeof TooltipComponent | typeof ButtonComponent)[];
+    /**
+     * Whether the secret content is visible.
+     * @attribute
+     * @default false
+     */
+    open: boolean;
+    /**
+     * The style applied to hidden content when the secret is set to inline. Possible values are blur, masked, and noise.
+     * @attribute
+     * @default 'blur'
+     */
+    variant: SecretVariant;
+    /**
+     * The mask pattern to use with the masked variant. When empty the slotted text content is used as the mask.
+     * @attribute
+     * @default ''
+     */
+    mask: string;
+    /**
+     * The character to replace characters with in the masked variant.
+     * @attribute mask-character
+     * @default '●'
+     */
+    maskCharacter: string;
+    /**
+     * Characters that will not be replaced by the mask character in the masked variant.
+     * @attribute unmasked-characters
+     * @default ''
+     */
+    unmaskedCharacters: string;
+    /**
+     * Whether the secret content should be displayed as a block element instead of inline with text.
+     * @attribute
+     * @default false
+     */
+    block: boolean;
+    /**
+     * The position of the button when the secret is set to inline. Possible values are start and end.
+     * @attribute button-position
+     * @default 'end'
+     */
+    buttonPosition: SecretButtonPosition;
+    /**
+     * Whether to reveal content on hover/focus in addition to clicks.
+     * @attribute show-on-hover
+     * @default false
+     */
+    showOnHover: boolean;
+    /**
+     * When set, secrets with the same name will close when another secret with that name is opened.
+     * @attribute
+     * @default ''
+     */
+    name: string;
+    private _buttonElement;
+    private _contentNodes;
+    private _mask;
+    constructor();
+    firstUpdated(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-secret': SecretComponent;
+    }
+}

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 };