import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/text-mask/text-mask.d.ts /** * * * @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 * * LOVE WHAT * YOU CREATE * * ``` * * **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 * *

Joy & Mystery

Whether lounging in a sunbeam or chasing invisible prey, cats bring joy and mystery to our homes.

* * ``` * * **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 * * * LOVE WHAT YOU CREATE * * * ``` * * @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 * * PATTERNS
* REPEAT
* FOREVER * * ``` * * @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 * * FIXED BACKGROUND * * ``` * * **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 *

* * BRIGHTNESS * * * *

* * * ``` * * @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 *

* * CONTRAST * * * *

* * * ``` * * @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 *

* * GRAYSCALE * * * *

* * * ``` * * @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 *

* * HUE ROTATE * * * *

* * * * * ``` * * */ 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): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-text-mask": SigveloTextMask; } } //#endregion export { SigveloTextMask as t };