@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
77 lines • 2.3 kB
TypeScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { LitElement, type PropertyValues } from 'lit';
import type { IIcon } from './icon.interface';
declare global {
interface HTMLElementTagNameMap {
"mdc-icon": MDCIcon;
}
}
declare const MDCIcon_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object);
/**
* mdc-icon sets the size and font by default.
*
* If you use an external font, the global style of the external font
* will override the style of `@layer` mdc.icon.base.
*
* Because the priority of `@layer` style is lower than that of global style,
* you need to manually cancel the font size of the external style
* to make the font style of mdc-icon take effect.
*
* The following code example shows an icon send
* modified.
* You must set `style="font-size: 18px"` to change the mdc-icon icon size.
*
* @example
* ```html
* <mdc-button>
* <span>Filled Button with Icon</span>
* <mdc-icon slot="icon" name="send" style="font-size: 14px;"></mdc-icon>
* </mdc-button>
* ```
* @version
* Material Design 3 - MaterialSymbols Supported
*
* @link
* https://m3.material.io/styles/icons/overview
*/
export declare class MDCIcon extends MDCIcon_base implements IIcon {
static styles: import("lit").CSSResult;
/**
* The name of the icon (ligature text).
* Recommended over slot content for dynamic icons.
*/
name: string | undefined;
/**
* Material Symbols: Fill axis (0 or 1).
*/
filled: boolean;
/**
* Material Symbols: Weight axis (100-700).
* Default is 400.
*/
weight: number;
/**
* Material Symbols: Grade axis (-25, 0, 200).
* Granular weight adjustments.
*/
grade: number;
/**
* Material Symbols: Optical Size axis (20-48).
* Adjusts stroke thickness based on icon size.
*/
opticalSize: number;
protected render(): import("lit-html").TemplateResult<1>;
connectedCallback(): void;
protected updated(changedProperties: PropertyValues): void;
/**
* Intelligently manages aria-hidden.
* Default to hidden (decorative), but reveal if labeled (semantic).
*/
private updateAriaState;
}
export {};
//# sourceMappingURL=icon.d.ts.map