dap-design-system 0.61.2 → 0.61.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/link/_styles/link.scss.js +2 -2
- package/dist/components/link/link.component.d.ts +2 -11
- package/dist/components/link/link.component.js.map +1 -1
- package/dist/components/navigation-menu/navigation-menu-item.component.d.ts +12 -0
- package/dist/components/navigation-menu/navigation-menu-item.component.js +305 -286
- package/dist/components/navigation-menu/navigation-menu-item.component.js.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.component.js +2 -4
- package/dist/components/navigation-menu/navigation-menu.component.js.map +1 -1
- package/dist/components/sidenav/sidenav-item.component.d.ts +9 -1
- package/dist/components/sidenav/sidenav-item.component.js +45 -30
- package/dist/components/sidenav/sidenav-item.component.js.map +1 -1
- package/dist/components/sidenav/sidenav-item.scss.js +1 -1
- package/dist/components.native.css +0 -8
- package/dist/components.native.css.map +1 -1
- package/dist/manifest/types/vue/index.d.ts +146 -136
- package/dist/manifest/vscode.html-custom-data.json +167 -151
- package/dist/manifest/web-types.json +260 -222
- package/dist/react/dap-ds-link/index.d.ts +2 -11
- package/dist/react/dap-ds-link/index.js.map +1 -1
- package/dist/react/index.d.ts +3 -3
- package/dist/react-types.ts +3 -3
- package/dist/react.js +52 -52
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const
|
|
1
|
+
const n = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-link-neutral-color: var(--dds-link-neutral-enabled);--dds-link-neutral-hover-color: var(--dds-link-neutral-hover);--dds-link-neutral-active-color: var(--dds-link-neutral-pressed);--dds-link-neutral-visited-color: var(--dds-link-neutral-pressed);--dds-link-brand-color: var(--dds-link-enabled);--dds-link-brand-hover-color: var(--dds-link-hover);--dds-link-brand-active-color: var(--dds-link-pressed);--dds-link-brand-visited-color: var(--dds-link-pressed);--dds-link-inverted-color: var(--dds-link-inverted-enabled);--dds-link-inverted-hover-color: var(--dds-link-inverted-hover);--dds-link-inverted-active-color: var(--dds-link-inverted-pressed);--dds-link-inverted-visited-color: var(--dds-link-inverted-pressed);--dds-link-warning-color: var(--dds-banner-action-inverted-enabled);--dds-link-warning-hover-color: var(--dds-banner-action-inverted-hover);--dds-link-warning-active-color: var(--dds-banner-action-inverted-pressed);--dds-link-warning-visited-color: var(--dds-banner-action-inverted-pressed);--dds-link-disabled-color: var(--dds-text-neutral-disabled);--dds-link-disabled-hover-color: var(--dds-text-neutral-disabled);--dds-link-disabled-active-color: var(--dds-text-neutral-disabled);--dds-link-disabled-visited-color: var(--dds-text-neutral-disabled);--dds-link-lg-font-size: var(--dds-font-lg);--dds-link-lg-line-height: var(--dds-font-line-height-xlarge);--dds-link-md-font-size: var(--dds-font-base);--dds-link-md-line-height: var(--dds-font-line-height-xlarge);--dds-link-sm-font-size: var(--dds-font-sm);--dds-link-sm-line-height: var(--dds-font-line-height-xlarge);--dds-link-xs-font-size: var(--dds-font-xs);--dds-link-xs-line-height: var(--dds-font-line-height-xlarge);--dds-link-normal-font-weight: var(--dds-font-weight-medium);--dds-link-bold-font-weight: var(--dds-font-weight-bold);--dds-link-no-underline-text-decoration: none}.link{align-items:center;justify-content:center;transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;flex-direction:row;text-decoration:none;text-decoration:underline;cursor:pointer}.link:focus-visible{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);border-radius:var(--dds-radius-base);outline-style:solid}.link--neutral:hover{color:var(--dds-link-neutral-hover-color)}.link--neutral:active{color:var(--dds-link-neutral-active-color)}.link--neutral:link,.link--neutral:visited{color:var(--dds-link-neutral-color)}.link--neutral:visited:hover{color:var(--dds-link-neutral-hover-color)}.link--brand:link{color:var(--dds-link-brand-color)}.link--brand:hover{color:var(--dds-link-brand-hover-color)}.link--brand:active{color:var(--dds-link-brand-active-color)}.link--brand:visited{color:var(--dds-link-brand-visited-color)}.link--brand:visited:hover{color:var(--dds-link-brand-hover-color)}.link--inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring)}.link--inverted:link{color:var(--dds-link-inverted-color)}.link--inverted:hover{color:var(--dds-link-inverted-hover-color)}.link--inverted:active{color:var(--dds-link-inverted-active-color)}.link--inverted:visited{color:var(--dds-link-inverted-visited-color)}.link--inverted:visited:hover{color:var(--dds-link-inverted-hover-color)}.link--warning:link{color:var(--dds-link-warning-color)}.link--warning:hover{color:var(--dds-link-warning-hover-color)}.link--warning:active{color:var(--dds-link-warning-active-color)}.link--warning:visited{color:var(--dds-link-warning-visited-color)}.link--warning:visited:hover{color:var(--dds-link-warning-hover-color)}.link--disabled{pointer-events:none}.link--disabled:link,.link--disabled:visited{color:var(--dds-link-disabled-color);text-decoration:none;pointer-events:none}.link--disabled>*{pointer-events:none}.link--lg{font-size:var(--dds-link-lg-font-size);line-height:var(--dds-link-lg-line-height)}.link--md{font-size:var(--dds-link-md-font-size);line-height:var(--dds-link-md-line-height)}.link--sm{font-size:var(--dds-link-sm-font-size);line-height:var(--dds-link-sm-line-height)}.link--xs{font-size:var(--dds-link-xs-font-size);line-height:var(--dds-link-xs-line-height)}.link--normal{font-weight:var(--dds-link-normal-font-weight)}.link--bold{font-weight:var(--dds-link-bold-font-weight)}.link--no-under-line,.link--no-under-line:hover{text-decoration:var(--dds-link-no-underline-text-decoration)}.link__text{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.link__link-wrapper{position:absolute;width:0;height:0;overflow:hidden;clip:rect(0,0,0,0)}";
|
|
2
2
|
export {
|
|
3
|
-
|
|
3
|
+
n as default
|
|
4
4
|
};
|
|
5
5
|
//# sourceMappingURL=link.scss.js.map
|
|
@@ -15,15 +15,6 @@ import { DdsElement } from '../../internal/dds-hu-element';
|
|
|
15
15
|
* @csspart base - The main link container.
|
|
16
16
|
* @csspart text - The text of the link.
|
|
17
17
|
*
|
|
18
|
-
* @cssproperty --dds-link-color - The color of the link text (default: var(--dds-link-enabled)).
|
|
19
|
-
* @cssproperty --dds-link-hover-color - The color of the link text on hover (default: var(--dds-link-hover)).
|
|
20
|
-
* @cssproperty --dds-link-active-color - The color of the link text when active (default: var(--dds-link-pressed)).
|
|
21
|
-
* @cssproperty --dds-link-visited-color - The color of the visited link text (default: var(--dds-link-pressed)).
|
|
22
|
-
* @cssproperty --dds-link-font-size - The font size of the link text (default: var(--dds-font-base)).
|
|
23
|
-
* @cssproperty --dds-link-line-height - The line height of the link text (default: var(--dds-font-line-height-xlarge)).
|
|
24
|
-
* @cssproperty --dds-link-font-weight - The font weight of the link text (default: var(--dds-font-weight-medium)).
|
|
25
|
-
* @cssproperty --dds-link-text-decoration - The text decoration of the link (default: underline).
|
|
26
|
-
*
|
|
27
18
|
* @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).
|
|
28
19
|
* @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).
|
|
29
20
|
* @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).
|
|
@@ -37,12 +28,12 @@ import { DdsElement } from '../../internal/dds-hu-element';
|
|
|
37
28
|
* @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).
|
|
38
29
|
* @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).
|
|
39
30
|
* @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).
|
|
40
|
-
* @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-
|
|
31
|
+
* @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-pressed)).
|
|
41
32
|
*
|
|
42
33
|
* @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).
|
|
43
34
|
* @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).
|
|
44
35
|
* @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).
|
|
45
|
-
* @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-
|
|
36
|
+
* @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).
|
|
46
37
|
*
|
|
47
38
|
* @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).
|
|
48
39
|
* @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.component.js","sources":["../../../src/components/link/link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { LinkSize, LinkTarget, LinkVariant } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/link.scss?inline'\n\n/**\n * `dap-ds-link`\n * @summary A link is a reference to a web resource.\n * @element dap-ds-link\n * @title - Link\n *\n * @event {{ event: Event }} dds-click - Emitted when the link is clicked.\n *\n * @slot - The text of the link.\n * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.\n * Rendered outside the visible link so it is always accessible to programmatic clicks.\n *\n * @csspart base - The main link container.\n * @csspart text - The text of the link.\n *\n * @cssproperty --dds-link-color - The color of the link text (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-hover-color - The color of the link text on hover (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-active-color - The color of the link text when active (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-visited-color - The color of the visited link text (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-font-size - The font size of the link text (default: var(--dds-font-base)).\n * @cssproperty --dds-link-line-height - The line height of the link text (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-font-weight - The font weight of the link text (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-text-decoration - The text decoration of the link (default: underline).\n *\n * @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).\n * @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).\n * @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n * @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n *\n * @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)).\n *\n * @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).\n * @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).\n * @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n * @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-visited)).\n *\n * @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n * @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).\n * @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n * @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n *\n * @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)).\n *\n * @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)).\n * @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)).\n * @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)).\n * @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)).\n * @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)).\n *\n * @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)).\n *\n * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).\n */\nexport default class DapDSLink extends DdsElement {\n static tagName = 'dap-ds-link'\n\n /** The size of the link\n * @type {'lg' | 'md' | 'sm' | 'xs'}\n */\n @property({ reflect: true }) size?: LinkSize\n\n /** The theme of the link\n * @type {'neutral' | 'brand' | 'inverted' | 'warning'}\n */\n @property() variant: LinkVariant = 'brand'\n\n /** The target of the link.\n * @type {'_blank' | '_self' | '_parent' | '_top'}\n */\n @property() target: LinkTarget = '_self'\n\n /** Bold link style */\n @property({ type: Boolean }) bold: boolean\n\n /** Removes underline style */\n @property({ type: Boolean }) noUnderline: boolean\n\n /** The href / URL of the link */\n @property() href: string = '#'\n\n /** Disabled state of the link */\n @property({ type: Boolean, reflect: true }) disabled = false\n\n /** The rel of the link */\n @property({ type: String }) rel = 'noreferrer noopener'\n\n /** The download attribute of the link */\n @property({ type: Boolean }) download = false\n\n /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n @property({ type: String }) targetBlankText: string\n\n static readonly styles = unsafeCSS(styles)\n\n @state() private hasLink = false\n\n private _getLinkElement(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"link\"]',\n ) as HTMLSlotElement\n if (!slot) return null\n const elements = slot.assignedElements()\n return elements.length > 0 ? (elements[0] as HTMLElement) : null\n }\n\n private _handleLinkSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement\n if (slot) {\n const elements = slot.assignedElements()\n this.hasLink = elements.length > 0\n // Remove link element from tab order — the visible <a> is the tab stop\n elements.forEach(el => el.setAttribute('tabindex', '-1'))\n }\n }\n\n private handleClick(event: Event) {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n\n if (this.hasLink) {\n event.preventDefault()\n const linkEl = this._getLinkElement()\n if (linkEl) {\n linkEl.click()\n }\n this.emit('dds-click', event)\n return\n }\n\n if (!this.href) {\n this.emit('dds-click', event)\n }\n }\n\n override focus() {\n if (!this.disabled) {\n ;(this.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement)?.focus()\n }\n }\n\n render() {\n return html`\n <a\n part=\"base\"\n .disabled=${this.disabled}\n aria-label=${ifDefined(this.ariaLabel ?? '')}\n target=${this.target}\n href=${this.href}\n ?download=${this.download}\n rel=${ifDefined(this.target ? this.rel : undefined)}\n class=${clsx(\n 'link',\n `link--${this.size}`,\n { 'link--bold': this.bold },\n { 'link--no-under-line': this.noUnderline },\n { 'link--disabled': this.disabled },\n `link--${this.variant}`,\n )}\n @click=${this.handleClick}>\n <span part=\"text\" class=\"link__text\">\n <slot></slot>\n </span>\n ${this.target === '_blank'\n ? html`<span class=\"sr-only\">\n ${this.targetBlankText ?? t('opensInNewTab')}</span\n >`\n : nothing}\n </a>\n <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->\n <div class=\"link__link-wrapper\" aria-hidden=\"true\">\n <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n </div>\n `\n }\n}\n"],"names":["_DapDSLink","DdsElement","e","slot","elements","el","_a","event","linkEl","_b","html","ifDefined","clsx","t","nothing","unsafeCSS","styles","DapDSLink","__decorateClass","property","state"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"link.component.js","sources":["../../../src/components/link/link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { LinkSize, LinkTarget, LinkVariant } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/link.scss?inline'\n\n/**\n * `dap-ds-link`\n * @summary A link is a reference to a web resource.\n * @element dap-ds-link\n * @title - Link\n *\n * @event {{ event: Event }} dds-click - Emitted when the link is clicked.\n *\n * @slot - The text of the link.\n * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.\n * Rendered outside the visible link so it is always accessible to programmatic clicks.\n *\n * @csspart base - The main link container.\n * @csspart text - The text of the link.\n *\n * @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).\n * @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).\n * @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n * @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n *\n * @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)).\n *\n * @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).\n * @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).\n * @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n * @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n *\n * @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n * @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).\n * @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n * @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n *\n * @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)).\n *\n * @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)).\n * @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)).\n * @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)).\n * @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)).\n * @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)).\n *\n * @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)).\n *\n * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).\n */\nexport default class DapDSLink extends DdsElement {\n static tagName = 'dap-ds-link'\n\n /** The size of the link\n * @type {'lg' | 'md' | 'sm' | 'xs'}\n */\n @property({ reflect: true }) size?: LinkSize\n\n /** The theme of the link\n * @type {'neutral' | 'brand' | 'inverted' | 'warning'}\n */\n @property() variant: LinkVariant = 'brand'\n\n /** The target of the link.\n * @type {'_blank' | '_self' | '_parent' | '_top'}\n */\n @property() target: LinkTarget = '_self'\n\n /** Bold link style */\n @property({ type: Boolean }) bold: boolean\n\n /** Removes underline style */\n @property({ type: Boolean }) noUnderline: boolean\n\n /** The href / URL of the link */\n @property() href: string = '#'\n\n /** Disabled state of the link */\n @property({ type: Boolean, reflect: true }) disabled = false\n\n /** The rel of the link */\n @property({ type: String }) rel = 'noreferrer noopener'\n\n /** The download attribute of the link */\n @property({ type: Boolean }) download = false\n\n /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n @property({ type: String }) targetBlankText: string\n\n static readonly styles = unsafeCSS(styles)\n\n @state() private hasLink = false\n\n private _getLinkElement(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"link\"]',\n ) as HTMLSlotElement\n if (!slot) return null\n const elements = slot.assignedElements()\n return elements.length > 0 ? (elements[0] as HTMLElement) : null\n }\n\n private _handleLinkSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement\n if (slot) {\n const elements = slot.assignedElements()\n this.hasLink = elements.length > 0\n // Remove link element from tab order — the visible <a> is the tab stop\n elements.forEach(el => el.setAttribute('tabindex', '-1'))\n }\n }\n\n private handleClick(event: Event) {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n\n if (this.hasLink) {\n event.preventDefault()\n const linkEl = this._getLinkElement()\n if (linkEl) {\n linkEl.click()\n }\n this.emit('dds-click', event)\n return\n }\n\n if (!this.href) {\n this.emit('dds-click', event)\n }\n }\n\n override focus() {\n if (!this.disabled) {\n ;(this.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement)?.focus()\n }\n }\n\n render() {\n return html`\n <a\n part=\"base\"\n .disabled=${this.disabled}\n aria-label=${ifDefined(this.ariaLabel ?? '')}\n target=${this.target}\n href=${this.href}\n ?download=${this.download}\n rel=${ifDefined(this.target ? this.rel : undefined)}\n class=${clsx(\n 'link',\n `link--${this.size}`,\n { 'link--bold': this.bold },\n { 'link--no-under-line': this.noUnderline },\n { 'link--disabled': this.disabled },\n `link--${this.variant}`,\n )}\n @click=${this.handleClick}>\n <span part=\"text\" class=\"link__text\">\n <slot></slot>\n </span>\n ${this.target === '_blank'\n ? html`<span class=\"sr-only\">\n ${this.targetBlankText ?? t('opensInNewTab')}</span\n >`\n : nothing}\n </a>\n <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->\n <div class=\"link__link-wrapper\" aria-hidden=\"true\">\n <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n </div>\n `\n }\n}\n"],"names":["_DapDSLink","DdsElement","e","slot","elements","el","_a","event","linkEl","_b","html","ifDefined","clsx","t","nothing","unsafeCSS","styles","DapDSLink","__decorateClass","property","state"],"mappings":"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"}
|
|
@@ -154,6 +154,18 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
|
|
|
154
154
|
/** Computed property to detect if this item contains nested navigation menu items. */
|
|
155
155
|
get hasNestedItems(): boolean;
|
|
156
156
|
private get _trigger();
|
|
157
|
+
/**
|
|
158
|
+
* The element keyboard activation should act on: the element slotted into
|
|
159
|
+
* `trigger` when one is provided, otherwise the default trigger button
|
|
160
|
+
* rendered in the shadow root.
|
|
161
|
+
*/
|
|
162
|
+
get activationTrigger(): HTMLElement | null;
|
|
163
|
+
/**
|
|
164
|
+
* Activate the trigger the way a mouse click would. Custom element triggers
|
|
165
|
+
* -- including the default `dap-ds-button` -- keep the real interactive
|
|
166
|
+
* element inside their shadow root, so clicking the host alone does nothing.
|
|
167
|
+
*/
|
|
168
|
+
activateTrigger(): void;
|
|
157
169
|
/** Get the element slotted into the `link` slot, if any. */
|
|
158
170
|
private _getLinkElement;
|
|
159
171
|
/** Handle slot change for the `link` slot. */
|