@tylertech/forge 3.14.0-dev.5 → 3.14.0

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-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:ub6135y;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub6135y{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:ub6136m;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub6136m{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:ub6137i;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub6137i{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:ub6138h;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub6138h{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:ub6138m;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub6138m{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:ub61396;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub61396{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:ub613a1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub613a1{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:ub613aj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@keyframes ub613aj{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.0",
   "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-02T12:09:51.416Z"
 }

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,169 @@
+@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)},
+      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);
+}

package/sass/secret/forge-secret.scss

@@ -0,0 +1,111 @@
+@use './core' as *;
+
+.forge-secret {
+  @include tokens;
+  @include host;
+  @include base;
+
+  &__content {
+    @include content;
+  }
+
+  &__button {
+    @include button;
+  }
+
+  &__text-button {
+    @include text-button;
+  }
+
+  &__icon {
+    @include icon;
+  }
+
+  &--show-on-hover:where(:hover, :has(:where(.forge-secret__button, .forge-secret__text-button):focus-visible)) {
+    .forge-secret__content {
+      filter: none !important;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &.forge-secret--masked:not(.forge-secret--block) {
+      .forge-secret__content {
+        display: inline-block !important;
+      }
+
+      .forge-secret__masked {
+        &::before {
+          display: none;
+        }
+      }
+    }
+
+    .forge-secret__text-button {
+      @include text-button-open;
+    }
+  }
+
+  &--block {
+    @include host-block;
+    @include base-block;
+
+    .forge-secret__content {
+      @include content-block;
+    }
+  }
+
+  &:has(:where(.forge-secret__button, .forge-secret__text-button):not([aria-expanded='true'])) {
+    @include closed;
+
+    cursor: unset;
+
+    .forge-secret__content {
+      interactivity: inert;
+      user-select: none;
+    }
+
+    &:where(.forge-secret--blur, .forge-secret--block.forge-secret--masked) {
+      .forge-secret__content {
+        @include content-blur;
+      }
+    }
+
+    &.forge-secret--masked:not(.forge-secret--block) {
+      .forge-secret__content {
+        display: none;
+      }
+
+      .forge-secret__masked {
+        &::before {
+          content: attr(data-mask);
+        }
+      }
+    }
+
+    &.forge-secret--noise {
+      .forge-secret__content {
+        @include content-noise;
+      }
+    }
+  }
+
+  &:has(:where(.forge-secret__button, .forge-secret__text-button)[aria-expanded='true']) {
+    .forge-secret__text-button {
+      @include text-button-open;
+    }
+
+    &:not(.forge-secret--block) {
+      .forge-secret__content {
+        @include content-inline-open;
+      }
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .forge-secret {
+    @include override(transition-duration, 0, 'value');
+  }
+}

package/sass/secret/index.scss

@@ -0,0 +1 @@
+@forward './core';

package/sass/secret/secret.scss

@@ -0,0 +1,104 @@
+@use './core' as *;
+@use '../utils/mixins' as utils;
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.forge-secret {
+  @include tokens;
+}
+
+.forge-secret {
+  @include base;
+}
+
+.reverse {
+  @include base-reverse;
+}
+
+.content {
+  @include content;
+}
+
+.blur {
+  @include content-blur;
+}
+
+.masked {
+  @include content-masked;
+}
+
+.noise {
+  @include content-noise;
+}
+
+.button {
+  @include button;
+}
+
+.icon {
+  @include icon;
+}
+
+.text-button {
+  @include text-button;
+}
+
+.show-on-hover:where(:hover, :has(button:focus-visible)) {
+  .content {
+    @include content-forced-open;
+  }
+
+  .masked {
+    @include content-masked-forced-open;
+  }
+
+  .text-button {
+    @include text-button-open;
+  }
+}
+
+:host(:state(open)) {
+  .text-button {
+    @include text-button-open;
+  }
+}
+
+:host(:not(:state(open))) {
+  .forge-secret {
+    @include closed;
+  }
+}
+
+:host(:not(:state(block)):state(open)) {
+  .content {
+    @include content-inline-open;
+  }
+}
+
+:host(:state(block)) {
+  @include host-block;
+
+  .forge-secret {
+    @include base-block;
+  }
+
+  .content {
+    @include content-block;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .forge-secret {
+    @include override(transition-duration, 0, 'value');
+  }
+}
+
+[hidden] {
+  display: none;
+}