import CwElement from '../../internal/cw-element.js'; import CwIconButton from '../icon-button/icon-button.component.js'; import type { CSSResultGroup } from 'lit'; type Platform = 'bluesky' | 'discord' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'mastodon' | 'threads' | 'tiktok' | 'twitter' | 'youtube'; /** * @summary A link to a social or fediverse profile, rendered as a single icon. Purpose-built for this domain rather * than a generic icon-link: set `platform` for one of the common networks and both the icon and accessible label * are filled in for you. * @documentation https://cordwainer.dev/components/social-link * @status experimental * @since 1.3 * * @dependency cw-icon-button * * @csspart base - The internal ``'s exported `base` part. * @csspart base__icon-button - An alias of `base`, kept for consistency with other components that forward an * icon-button's exported `base` part. */ export default class CwSocialLink extends CwElement { static styles: CSSResultGroup; static dependencies: { 'cw-icon-button': typeof CwIconButton; }; /** The URL of the profile to link to. */ href: string; /** Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site. */ target: '_blank' | '_parent' | '_self' | '_top'; /** * The `rel` attribute for the link. Defaults to `noreferrer noopener`. To mark this link as a verified profile * reference — the IndieWeb `rel="me"` convention Mastodon and the wider fediverse use for identity verification — * include `me` yourself, e.g. `rel="me noreferrer noopener"`. */ rel: string; /** * One of the common social/fediverse platforms. When set, both the icon and the accessible `label` default to * that platform's — set `name`/`library` and/or `label` explicitly to override either, or to support a platform * not in this list. */ platform?: Platform; /** The name of the icon to draw. Defaults to `platform`'s icon when set. */ name?: string; /** The name of a registered custom icon library. Defaults to `system` when `platform` is set. */ library?: string; /** A description that gets read by assistive devices. Defaults to `platform`'s name when set. */ label?: string; render(): import("lit-html").TemplateResult<1>; } export {};