@mcp-b/web-components 0.2.0

package/dist/text-mask-CNKVKSFp.d.ts

@@ -0,0 +1,336 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/text-mask/text-mask.d.ts
+/**
+ * <sigvelo-text-mask>
+ *
+ * @summary Applies text as a mask over an image, creating visually stylized characters.
+ * @tag sigvelo-text-mask
+ * @documentation https://design-system.sigvelo.com/docs/components/text-mask
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The text to be masked.
+ *
+ * @cssproperty --brightness - Adjusts the brightness of the mask image (0-200%, where 100% is normal)
+ * @cssproperty --contrast - Adjusts the contrast of the mask image (0-200%, where 100% is normal)
+ * @cssproperty --grayscale - Converts the mask to grayscale (0-100%, where 0% is normal and 100% is fully grayscale)
+ * @cssproperty --hue-rotate - Rotates the hue of the mask (0-360deg)
+ *
+ * @example Default
+ * Text masks create eye-catching headlines that capture visitors' attention, making them great for landing pages. For best results, use a font with a heavy weight, e.g. 700+ or bold/black variants, as thicker letter forms provide more surface area for the image to show through.
+ *
+ * ```html
+ * <sigvelo-text-mask
+ *   image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *   fixed
+ *   style="
+ *     font-family: 'Fira Sans', sans-serif;
+ *     font-size: 7em;
+ *     font-weight: 900;
+ *     line-height: 1;
+ *     text-align: center;
+ *     --brightness: 90%;
+ *     --contrast: 60%;
+ *   "
+ * >
+ *   <sigvelo-fit-text>LOVE WHAT</sigvelo-fit-text>
+ *   <sigvelo-fit-text>YOU CREATE</sigvelo-fit-text>
+ * </sigvelo-text-mask>
+ * ```
+ *
+ * **Note:** If you're using light and dark color schemes, ensure the text has sufficient contrast for both by selecting images with high color variation or adjusting the brightness/contrast to ensure readability regardless of the background.
+ *
+ * @example Providing text
+ * All text inside the text mask will be masked. The font, size, weight, etc. is inherited, meaning you can provide them on the text mask or an ancestor element.
+ *
+ * ```html
+ * <sigvelo-text-mask
+ *   image="https://images.unsplash.com/photo-1566847438217-76e82d383f84?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *   style="
+ *     font-family: 'Fira Sans', sans-serif;
+ *     font-size: 2rem;
+ *     font-weight: 900;
+ *     line-height: 1.5;
+ *     text-transform: uppercase;
+ *   "
+ * >
+ *   <h4 style="font: inherit; font-size: 3rem;">Joy &amp; Mystery</h4>
+ *   <p>Whether lounging in a sunbeam or chasing invisible prey, cats bring joy and mystery to our homes.</p>
+ * </sigvelo-text-mask>
+ * ```
+ *
+ * **Note:** Most text decorations, such as underlines and text shadows, will not work as expected inside text masks.
+ *
+ * @example Fitting text
+ * Draw a text mask that fits the full width of its container without wrapping.
+ *
+ * ```html
+ * <sigvelo-text-mask
+ *   image="https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *   style="
+ *     font-family: 'Fira Sans', sans-serif;
+ *     font-size: 4em;
+ *     font-weight: 900;
+ *     line-height: 1;
+ *     text-align: center;
+ *     --brightness: 90%;
+ *     --contrast: 60%;
+ *   "
+ * >
+ *   <sigvelo-fit-text>
+ *     LOVE WHAT YOU CREATE
+ *   </sigvelo-fit-text>
+ * </sigvelo-text-mask>
+ * ```
+ *
+ * @example Repeating patterns
+ * For a tiled background, use a repeating image and set `background-repeat` and `background-size` to the appropriate values in your CSS.
+ *
+ * ```html
+ * <sigvelo-text-mask
+ *   image="/assets/images/purple-tile.webp"
+ *   style="
+ *     font-family: 'Fira Sans', sans-serif;
+ *     font-size: 4em;
+ *     font-weight: 900;
+ *     text-align: center;
+ *     line-height: 1;
+ *     background-repeat: repeat;
+ *     background-size: 140px;
+ *   "
+ * >
+ *   PATTERNS<br>
+ *   REPEAT<br>
+ *   FOREVER
+ * </sigvelo-text-mask>
+ * ```
+ *
+ * @example Fixed backgrounds
+ * Use the `fixed` attribute to create a parallax-like effect where the image stays fixed while scrolling. Not supported in iOS Safari.
+ *
+ * ```html
+ * <sigvelo-text-mask
+ *   image="https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *   fixed
+ *   style="
+ *     font-family: 'Fira Sans', sans-serif;
+ *     font-size: 4em;
+ *     font-weight: 900;
+ *     text-align: center;
+ *     --brightness: 90%;
+ *     --contrast: 60%;
+ *   "
+ * >
+ *   <sigvelo-fit-text>FIXED BACKGROUND</sigvelo-fit-text>
+ * </sigvelo-text-mask>
+ * ```
+ *
+ * **Warning:** Due to [a very old bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1313757), this feature is disabled in Firefox. If you'd like to see this fixed, consider logging in and voting for the bug.
+ *
+ * @example Brightness
+ * Adjust the brightness of the masked image using the `--brightness` custom property (0-200%). Normal brightness is 100%. Values below 100% darken the image, and values above 100% brighten it.
+ *
+ * ```html
+ * <div id="mask__brightness">
+ *   <sigvelo-text-mask
+ *     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *     style="
+ *       font-family: 'Fira Sans', sans-serif;
+ *       font-size: 4em;
+ *       font-weight: 900;
+ *       text-align: center;
+ *       --brightness: 75%;
+ *     "
+ *   >
+ *     <sigvelo-fit-text>BRIGHTNESS</sigvelo-fit-text>
+ *   </sigvelo-text-mask>
+ *
+ *   <sigvelo-slider
+ *     label="Brightness"
+ *     min="0"
+ *     max="200"
+ *     value="75"
+ *     indicator-offset="100"
+ *     with-tooltip
+ *     class="sigvelo-vh-label"
+ *   ></sigvelo-slider>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('mask__brightness');
+ *   const mask = container.querySelector('sigvelo-text-mask');
+ *   const slider = container.querySelector('sigvelo-slider');
+ *
+ *   slider.addEventListener('sigvelo-input', () => {
+ *     mask.style.setProperty('--brightness', `${slider.value}%`);
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Contrast
+ * Control the contrast of the masked image with the `--contrast` custom property (0-200%). Normal contrast is 100%. Lower values reduce contrast for a more subtle effect, while higher values increase it for more dramatic definition in the text mask.
+ *
+ * ```html
+ * <div id="mask__contrast">
+ *   <sigvelo-text-mask
+ *     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *     style="
+ *       font-family: 'Fira Sans', sans-serif;
+ *       font-size: 4em;
+ *       font-weight: 900;
+ *       text-align: center;
+ *       --contrast: 50%;
+ *     "
+ *   >
+ *     <sigvelo-fit-text>CONTRAST</sigvelo-fit-text>
+ *   </sigvelo-text-mask>
+ *
+ *   <sigvelo-slider
+ *     label="Contrast"
+ *     min="0"
+ *     max="200"
+ *     value="50"
+ *     indicator-offset="100"
+ *     with-tooltip
+ *     class="sigvelo-vh-label"
+ *   ></sigvelo-slider>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('mask__contrast');
+ *   const mask = container.querySelector('sigvelo-text-mask');
+ *   const slider = container.querySelector('sigvelo-slider');
+ *
+ *   slider.addEventListener('sigvelo-input', () => {
+ *     mask.style.setProperty('--contrast', `${slider.value}%`);
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Grayscale
+ * Remove color from the masked image using the `--grayscale` custom property (0-100%). A value of 100% creates a completely black and white effect, while lower values retain some of the original color.
+ *
+ * ```html
+ * <div id="mask__grayscale">
+ *   <sigvelo-text-mask
+ *     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *     style="
+ *       font-family: 'Fira Sans', sans-serif;
+ *       font-size: 4em;
+ *       font-weight: 900;
+ *       text-align: center;
+ *       --grayscale: 100%;
+ *     "
+ *   >
+ *     <sigvelo-fit-text>GRAYSCALE</sigvelo-fit-text>
+ *   </sigvelo-text-mask>
+ *
+ *   <sigvelo-slider
+ *     label="Grayscale"
+ *     min="0"
+ *     max="100"
+ *     value="100"
+ *     with-tooltip
+ *     class="sigvelo-vh-label"
+ *   ></sigvelo-slider>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('mask__grayscale');
+ *   const mask = container.querySelector('sigvelo-text-mask');
+ *   const slider = container.querySelector('sigvelo-slider');
+ *
+ *   slider.addEventListener('sigvelo-input', () => {
+ *     mask.style.setProperty('--grayscale', `${slider.value}%`);
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Hue rotation
+ * Transform the colors of the masked image with the `--hue-rotate` custom property (0-360deg). Values represent degrees of rotation around the color wheel, creating unique color shifts while maintaining the original luminosity.
+ *
+ * ```html
+ * <div id="mask__hue">
+ *   <sigvelo-text-mask
+ *     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *     style="
+ *       font-family: 'Fira Sans', sans-serif;
+ *       font-size: 4em;
+ *       font-weight: 900;
+ *       text-align: center;
+ *       --hue-rotate: 180deg;
+ *     "
+ *   >
+ *     <sigvelo-fit-text>HUE ROTATE</sigvelo-fit-text>
+ *   </sigvelo-text-mask>
+ *
+ *   <sigvelo-slider
+ *     label="Hue Rotation"
+ *     min="0"
+ *     max="360"
+ *     value="180"
+ *     with-tooltip
+ *     class="sigvelo-vh-label"
+ *   ></sigvelo-slider>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('mask__hue');
+ *   const mask = container.querySelector('sigvelo-text-mask');
+ *   const slider = container.querySelector('sigvelo-slider');
+ *   const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'degree', unitDisplay: 'narrow' });
+ *
+ *   // Format the slider's tooltip as an angle
+ *   customElements.whenDefined('sigvelo-slider').then(() => {
+ *     slider.valueFormatter = value => formatter.format(value);
+ *   });
+ *
+ *   // Change with the slider
+ *   slider.addEventListener('sigvelo-input', () => {
+ *     mask.style.setProperty('--hue-rotate', `${slider.value}deg`);
+ *   });
+ * </script>
+ *
+ * <style>
+ *   #mask__hue {
+ *     sigvelo-slider::part(track) {
+ *       background-image:
+ *         linear-gradient(
+ *           to right,
+ *           rgb(255, 0, 0) 0%,
+ *           rgb(255, 255, 0) 17%,
+ *           rgb(0, 255, 0) 33%,
+ *           rgb(0, 255, 255) 50%,
+ *           rgb(0, 0, 255) 67%,
+ *           rgb(255, 0, 255) 83%,
+ *           rgb(255, 0, 0) 100%
+ *         );
+ *     }
+ *
+ *     sigvelo-slider::part(indicator) {
+ *       display: none;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * <!-- Font for demos -->
+ */
+declare class SigveloTextMask extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** The URL of the image to use for the mask. */
+  image: string;
+  /** Creates a parallax-like effect where the image stays fixed while scrolling */
+  fixed: boolean;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-text-mask": SigveloTextMask;
+  }
+}
+//#endregion
+export { SigveloTextMask as t };

package/dist/text-mask-DDEurj90.js

@@ -0,0 +1,370 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/text-mask/text-mask.styles.ts
+var text_mask_styles_default = css`
+  :host {
+    --brightness: 100%;
+    --contrast: 100%;
+    --grayscale: 0%;
+    --hue-rotate: 0deg;
+
+    display: block;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+    text-shadow: none !important; /* this will break the mask effect */
+    filter: brightness(var(--brightness)) contrast(var(--contrast)) grayscale(var(--grayscale))
+      hue-rotate(var(--hue-rotate));
+  }
+`;
+//#endregion
+//#region src/components/text-mask/text-mask.ts
+/**
+* <sigvelo-text-mask>
+*
+* @summary Applies text as a mask over an image, creating visually stylized characters.
+* @tag sigvelo-text-mask
+* @documentation https://design-system.sigvelo.com/docs/components/text-mask
+* @status stable
+* @since 1.0
+*
+* @slot - The text to be masked.
+*
+* @cssproperty --brightness - Adjusts the brightness of the mask image (0-200%, where 100% is normal)
+* @cssproperty --contrast - Adjusts the contrast of the mask image (0-200%, where 100% is normal)
+* @cssproperty --grayscale - Converts the mask to grayscale (0-100%, where 0% is normal and 100% is fully grayscale)
+* @cssproperty --hue-rotate - Rotates the hue of the mask (0-360deg)
+*
+* @example Default
+* Text masks create eye-catching headlines that capture visitors' attention, making them great for landing pages. For best results, use a font with a heavy weight, e.g. 700+ or bold/black variants, as thicker letter forms provide more surface area for the image to show through.
+*
+* ```html
+* <sigvelo-text-mask
+*   image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*   fixed
+*   style="
+*     font-family: 'Fira Sans', sans-serif;
+*     font-size: 7em;
+*     font-weight: 900;
+*     line-height: 1;
+*     text-align: center;
+*     --brightness: 90%;
+*     --contrast: 60%;
+*   "
+* >
+*   <sigvelo-fit-text>LOVE WHAT</sigvelo-fit-text>
+*   <sigvelo-fit-text>YOU CREATE</sigvelo-fit-text>
+* </sigvelo-text-mask>
+* ```
+*
+* **Note:** If you're using light and dark color schemes, ensure the text has sufficient contrast for both by selecting images with high color variation or adjusting the brightness/contrast to ensure readability regardless of the background.
+*
+* @example Providing text
+* All text inside the text mask will be masked. The font, size, weight, etc. is inherited, meaning you can provide them on the text mask or an ancestor element.
+*
+* ```html
+* <sigvelo-text-mask
+*   image="https://images.unsplash.com/photo-1566847438217-76e82d383f84?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*   style="
+*     font-family: 'Fira Sans', sans-serif;
+*     font-size: 2rem;
+*     font-weight: 900;
+*     line-height: 1.5;
+*     text-transform: uppercase;
+*   "
+* >
+*   <h4 style="font: inherit; font-size: 3rem;">Joy &amp; Mystery</h4>
+*   <p>Whether lounging in a sunbeam or chasing invisible prey, cats bring joy and mystery to our homes.</p>
+* </sigvelo-text-mask>
+* ```
+*
+* **Note:** Most text decorations, such as underlines and text shadows, will not work as expected inside text masks.
+*
+* @example Fitting text
+* Draw a text mask that fits the full width of its container without wrapping.
+*
+* ```html
+* <sigvelo-text-mask
+*   image="https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*   style="
+*     font-family: 'Fira Sans', sans-serif;
+*     font-size: 4em;
+*     font-weight: 900;
+*     line-height: 1;
+*     text-align: center;
+*     --brightness: 90%;
+*     --contrast: 60%;
+*   "
+* >
+*   <sigvelo-fit-text>
+*     LOVE WHAT YOU CREATE
+*   </sigvelo-fit-text>
+* </sigvelo-text-mask>
+* ```
+*
+* @example Repeating patterns
+* For a tiled background, use a repeating image and set `background-repeat` and `background-size` to the appropriate values in your CSS.
+*
+* ```html
+* <sigvelo-text-mask
+*   image="/assets/images/purple-tile.webp"
+*   style="
+*     font-family: 'Fira Sans', sans-serif;
+*     font-size: 4em;
+*     font-weight: 900;
+*     text-align: center;
+*     line-height: 1;
+*     background-repeat: repeat;
+*     background-size: 140px;
+*   "
+* >
+*   PATTERNS<br>
+*   REPEAT<br>
+*   FOREVER
+* </sigvelo-text-mask>
+* ```
+*
+* @example Fixed backgrounds
+* Use the `fixed` attribute to create a parallax-like effect where the image stays fixed while scrolling. Not supported in iOS Safari.
+*
+* ```html
+* <sigvelo-text-mask
+*   image="https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*   fixed
+*   style="
+*     font-family: 'Fira Sans', sans-serif;
+*     font-size: 4em;
+*     font-weight: 900;
+*     text-align: center;
+*     --brightness: 90%;
+*     --contrast: 60%;
+*   "
+* >
+*   <sigvelo-fit-text>FIXED BACKGROUND</sigvelo-fit-text>
+* </sigvelo-text-mask>
+* ```
+*
+* **Warning:** Due to [a very old bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1313757), this feature is disabled in Firefox. If you'd like to see this fixed, consider logging in and voting for the bug.
+*
+* @example Brightness
+* Adjust the brightness of the masked image using the `--brightness` custom property (0-200%). Normal brightness is 100%. Values below 100% darken the image, and values above 100% brighten it.
+*
+* ```html
+* <div id="mask__brightness">
+*   <sigvelo-text-mask
+*     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     style="
+*       font-family: 'Fira Sans', sans-serif;
+*       font-size: 4em;
+*       font-weight: 900;
+*       text-align: center;
+*       --brightness: 75%;
+*     "
+*   >
+*     <sigvelo-fit-text>BRIGHTNESS</sigvelo-fit-text>
+*   </sigvelo-text-mask>
+*
+*   <sigvelo-slider
+*     label="Brightness"
+*     min="0"
+*     max="200"
+*     value="75"
+*     indicator-offset="100"
+*     with-tooltip
+*     class="sigvelo-vh-label"
+*   ></sigvelo-slider>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('mask__brightness');
+*   const mask = container.querySelector('sigvelo-text-mask');
+*   const slider = container.querySelector('sigvelo-slider');
+*
+*   slider.addEventListener('sigvelo-input', () => {
+*     mask.style.setProperty('--brightness', `${slider.value}%`);
+*   });
+* <\/script>
+* ```
+*
+* @example Contrast
+* Control the contrast of the masked image with the `--contrast` custom property (0-200%). Normal contrast is 100%. Lower values reduce contrast for a more subtle effect, while higher values increase it for more dramatic definition in the text mask.
+*
+* ```html
+* <div id="mask__contrast">
+*   <sigvelo-text-mask
+*     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     style="
+*       font-family: 'Fira Sans', sans-serif;
+*       font-size: 4em;
+*       font-weight: 900;
+*       text-align: center;
+*       --contrast: 50%;
+*     "
+*   >
+*     <sigvelo-fit-text>CONTRAST</sigvelo-fit-text>
+*   </sigvelo-text-mask>
+*
+*   <sigvelo-slider
+*     label="Contrast"
+*     min="0"
+*     max="200"
+*     value="50"
+*     indicator-offset="100"
+*     with-tooltip
+*     class="sigvelo-vh-label"
+*   ></sigvelo-slider>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('mask__contrast');
+*   const mask = container.querySelector('sigvelo-text-mask');
+*   const slider = container.querySelector('sigvelo-slider');
+*
+*   slider.addEventListener('sigvelo-input', () => {
+*     mask.style.setProperty('--contrast', `${slider.value}%`);
+*   });
+* <\/script>
+* ```
+*
+* @example Grayscale
+* Remove color from the masked image using the `--grayscale` custom property (0-100%). A value of 100% creates a completely black and white effect, while lower values retain some of the original color.
+*
+* ```html
+* <div id="mask__grayscale">
+*   <sigvelo-text-mask
+*     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     style="
+*       font-family: 'Fira Sans', sans-serif;
+*       font-size: 4em;
+*       font-weight: 900;
+*       text-align: center;
+*       --grayscale: 100%;
+*     "
+*   >
+*     <sigvelo-fit-text>GRAYSCALE</sigvelo-fit-text>
+*   </sigvelo-text-mask>
+*
+*   <sigvelo-slider
+*     label="Grayscale"
+*     min="0"
+*     max="100"
+*     value="100"
+*     with-tooltip
+*     class="sigvelo-vh-label"
+*   ></sigvelo-slider>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('mask__grayscale');
+*   const mask = container.querySelector('sigvelo-text-mask');
+*   const slider = container.querySelector('sigvelo-slider');
+*
+*   slider.addEventListener('sigvelo-input', () => {
+*     mask.style.setProperty('--grayscale', `${slider.value}%`);
+*   });
+* <\/script>
+* ```
+*
+* @example Hue rotation
+* Transform the colors of the masked image with the `--hue-rotate` custom property (0-360deg). Values represent degrees of rotation around the color wheel, creating unique color shifts while maintaining the original luminosity.
+*
+* ```html
+* <div id="mask__hue">
+*   <sigvelo-text-mask
+*     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     style="
+*       font-family: 'Fira Sans', sans-serif;
+*       font-size: 4em;
+*       font-weight: 900;
+*       text-align: center;
+*       --hue-rotate: 180deg;
+*     "
+*   >
+*     <sigvelo-fit-text>HUE ROTATE</sigvelo-fit-text>
+*   </sigvelo-text-mask>
+*
+*   <sigvelo-slider
+*     label="Hue Rotation"
+*     min="0"
+*     max="360"
+*     value="180"
+*     with-tooltip
+*     class="sigvelo-vh-label"
+*   ></sigvelo-slider>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('mask__hue');
+*   const mask = container.querySelector('sigvelo-text-mask');
+*   const slider = container.querySelector('sigvelo-slider');
+*   const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'degree', unitDisplay: 'narrow' });
+*
+*   // Format the slider's tooltip as an angle
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     slider.valueFormatter = value => formatter.format(value);
+*   });
+*
+*   // Change with the slider
+*   slider.addEventListener('sigvelo-input', () => {
+*     mask.style.setProperty('--hue-rotate', `${slider.value}deg`);
+*   });
+* <\/script>
+*
+* <style>
+*   #mask__hue {
+*     sigvelo-slider::part(track) {
+*       background-image:
+*         linear-gradient(
+*           to right,
+*           rgb(255, 0, 0) 0%,
+*           rgb(255, 255, 0) 17%,
+*           rgb(0, 255, 0) 33%,
+*           rgb(0, 255, 255) 50%,
+*           rgb(0, 0, 255) 67%,
+*           rgb(255, 0, 255) 83%,
+*           rgb(255, 0, 0) 100%
+*         );
+*     }
+*
+*     sigvelo-slider::part(indicator) {
+*       display: none;
+*     }
+*   }
+* </style>
+* ```
+*
+* <!-- Font for demos -->
+*/
+var SigveloTextMask = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.image = "";
+		this.fixed = false;
+	}
+	static {
+		this.styles = [hostStyles, text_mask_styles_default];
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("fixed")) if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) this.style.backgroundAttachment = "scroll";
+		else this.style.backgroundAttachment = this.fixed ? "fixed" : "scroll";
+		if (changedProperties.has("image")) this.style.backgroundImage = `url(${this.image})`;
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property()], SigveloTextMask.prototype, "image", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloTextMask.prototype, "fixed", void 0);
+customElements.define("sigvelo-text-mask", SigveloTextMask);
+//#endregion
+export { SigveloTextMask as t };