@tylertech/forge 3.14.0-dev.5 → 3.14.1

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-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)}.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/calendar/calendar-adapter.js

@@ -207,6 +207,11 @@ class CalendarAdapter extends BaseAdapter {
     setMonth(month, locale) {
         const monthButton = this._container.querySelector(CALENDAR_CONSTANTS.selectors.MONTH_BUTTON);
         if (monthButton) {
+            const span = monthButton.querySelector('span');
+            if (span) {
+                span.textContent = getLocalizedMonth(month, 'long', locale);
+                return;
+            }
             const content = getMonthButtonContent(month, locale);
             monthButton.replaceChildren(content[0], content[1]);
             return;
@@ -219,6 +224,11 @@ class CalendarAdapter extends BaseAdapter {
     setYear(year, locale) {
         const yearButton = this._container.querySelector(CALENDAR_CONSTANTS.selectors.YEAR_BUTTON);
         if (yearButton) {
+            const span = yearButton.querySelector('span');
+            if (span) {
+                span.textContent = getLocalizedYear(year, 'numeric', locale);
+                return;
+            }
             const content = getYearButtonContent(year, locale);
             yearButton.replaceChildren(content[0], content[1]);
             return;

package/esm/calendar/calendar-menu/calendar-menu-adapter.js

@@ -52,8 +52,8 @@ class CalendarMenuAdapter extends BaseAdapter {
     setClosed() {
         this._container.classList.remove(CALENDAR_MENU_CONSTANTS.classes.OPEN);
         this._container.classList.add(CALENDAR_MENU_CONSTANTS.classes.CLOSING);
-        this.toggleHostAttribute('hidden', true);
         playKeyframeAnimation(this._container, CALENDAR_MENU_CONSTANTS.classes.CLOSING, true).then(() => {
+            this.toggleHostAttribute('hidden', true);
             removeAllChildren(this._container);
         });
     }
@@ -67,6 +67,7 @@ class CalendarMenuAdapter extends BaseAdapter {
         }
         this._container.appendChild(element);
         this.toggleHostAttribute('hidden', false);
+        this._container.classList.remove(CALENDAR_MENU_CONSTANTS.classes.CLOSING);
         this._container.classList.add(CALENDAR_MENU_CONSTANTS.classes.OPEN);
         if (!replace) {
             this.setFocusAtIndex(focusedIndex, setFocus, preventFocus);
@@ -82,6 +83,7 @@ class CalendarMenuAdapter extends BaseAdapter {
         }
         this._container.appendChild(element);
         this.toggleHostAttribute('hidden', false);
+        this._container.classList.remove(CALENDAR_MENU_CONSTANTS.classes.CLOSING);
         this._container.classList.add(CALENDAR_MENU_CONSTANTS.classes.OPEN);
         this._scrollItemIntoView('selected');
         if (!replace) {

package/esm/expansion-panel/expansion-panel.js

@@ -139,11 +139,13 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseLitEleme
         if (changedProperties.has('open')) {
             this.#handleOpen();
         }
-        if (changedProperties.has('open') || changedProperties.has('openIconElement')) {
-            this.#tryToggleOpenIcon();
-        }
         if (changedProperties.has('openIcon')) {
-            this.openIconElement = this.#getOpenIconElementById(this.openIcon);
+            if (this.openIcon) {
+                this.openIconElement = this.#getOpenIconElementById(this.openIcon);
+            }
+        }
+        if (changedProperties.has('open') || changedProperties.has('openIcon') || changedProperties.has('openIconElement')) {
+            this.#tryToggleOpenIcon();
         }
         if (changedProperties.has('orientation')) {
             toggleState(this.#internals, 'horizontal', this.orientation === 'horizontal');

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