@hashicorp/design-system-components 6.2.0 → 6.3.0-rc-20260507194626
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/declarations/components/hds/accordion/cds/index.d.ts +35 -0
- package/declarations/components/hds/accordion/cds/item/index.d.ts +61 -0
- package/declarations/components/hds/accordion/hds/index.d.ts +30 -0
- package/declarations/components/hds/accordion/{item → hds/item}/button.d.ts +1 -1
- package/declarations/components/hds/accordion/hds/item/index.d.ts +44 -0
- package/declarations/components/hds/accordion/index.d.ts +13 -6
- package/declarations/components/hds/accordion/item/index.d.ts +11 -14
- package/declarations/components/hds/badge/index.d.ts +8 -0
- package/declarations/components/hds/button/index.d.ts +12 -0
- package/declarations/components/hds/cds-accordion/index.d.ts +10 -0
- package/declarations/components/hds/cds-accordion/item.d.ts +7 -0
- package/declarations/components/hds/cds-badge/index.d.ts +28 -0
- package/declarations/components/hds/cds-button/index.d.ts +60 -0
- package/declarations/components/hds/cds-link/index.d.ts +9 -0
- package/declarations/components/hds/cds-modal/body-content.d.ts +15 -0
- package/declarations/components/hds/cds-modal/body.d.ts +15 -0
- package/declarations/components/hds/cds-modal/close-button.d.ts +17 -0
- package/declarations/components/hds/cds-modal/footer-button.d.ts +55 -0
- package/declarations/components/hds/cds-modal/footer.d.ts +15 -0
- package/declarations/components/hds/cds-modal/header.d.ts +15 -0
- package/declarations/components/hds/cds-modal/heading.d.ts +15 -0
- package/declarations/components/hds/cds-modal/index.d.ts +37 -0
- package/declarations/components/hds/cds-text-input/index.d.ts +12 -0
- package/declarations/components/hds/form/text-input/base.d.ts +12 -0
- package/declarations/components/hds/form/text-input/field.d.ts +4 -1
- package/declarations/components/hds/icon/index.d.ts +1 -1
- package/declarations/components/hds/link/inline.d.ts +13 -0
- package/declarations/components/hds/link/standalone.d.ts +10 -0
- package/declarations/components/hds/modal/cds/index.d.ts +106 -0
- package/declarations/components/hds/modal/hds/index.d.ts +52 -0
- package/declarations/components/hds/modal/index.d.ts +44 -28
- package/declarations/components/hds/modal/types.d.ts +5 -0
- package/declarations/components/hds/stepper/task/indicator.d.ts +1 -1
- package/declarations/components.d.ts +14 -0
- package/declarations/modifiers/hds-anchored-position.d.ts +1 -1
- package/declarations/template-registry.d.ts +0 -3
- package/declarations/utils/create-component.d.ts +23 -0
- package/dist/_app_/components/hds/accordion/cds/item.js +1 -0
- package/dist/_app_/components/hds/accordion/{item/button.js → cds.js} +1 -1
- package/dist/_app_/components/hds/accordion/hds/item/button.js +1 -0
- package/dist/_app_/components/hds/accordion/hds/item.js +1 -0
- package/dist/_app_/components/hds/accordion/hds.js +1 -0
- package/dist/_app_/components/hds/cds-accordion/item.js +1 -0
- package/dist/_app_/components/hds/cds-accordion.js +1 -0
- package/dist/_app_/components/hds/cds-badge.js +1 -0
- package/dist/_app_/components/hds/cds-button.js +1 -0
- package/dist/_app_/components/hds/cds-link.js +1 -0
- package/dist/_app_/components/hds/cds-modal/body-content.js +1 -0
- package/dist/_app_/components/hds/cds-modal/body.js +1 -0
- package/dist/_app_/components/hds/cds-modal/close-button.js +1 -0
- package/dist/_app_/components/hds/cds-modal/footer-button.js +1 -0
- package/dist/_app_/components/hds/cds-modal/footer.js +1 -0
- package/dist/_app_/components/hds/cds-modal/header.js +1 -0
- package/dist/_app_/components/hds/cds-modal/heading.js +1 -0
- package/dist/_app_/components/hds/cds-modal.js +1 -0
- package/dist/_app_/components/hds/cds-text-input.js +1 -0
- package/dist/_app_/components/hds/modal/cds.js +1 -0
- package/dist/_app_/components/hds/modal/hds.js +1 -0
- package/dist/components/hds/accordion/cds/index.js +58 -0
- package/dist/components/hds/accordion/cds/index.js.map +1 -0
- package/dist/components/hds/accordion/cds/item/index.js +142 -0
- package/dist/components/hds/accordion/cds/item/index.js.map +1 -0
- package/dist/components/hds/accordion/hds/index.js +51 -0
- package/dist/components/hds/accordion/hds/index.js.map +1 -0
- package/dist/components/hds/accordion/{item → hds/item}/button.js +2 -2
- package/dist/components/hds/accordion/hds/item/button.js.map +1 -0
- package/dist/components/hds/accordion/hds/item/index.js +101 -0
- package/dist/components/hds/accordion/hds/item/index.js.map +1 -0
- package/dist/components/hds/accordion/index.js +9 -29
- package/dist/components/hds/accordion/index.js.map +1 -1
- package/dist/components/hds/accordion/item/index.js +10 -81
- package/dist/components/hds/accordion/item/index.js.map +1 -1
- package/dist/components/hds/badge/index.js +35 -1
- package/dist/components/hds/badge/index.js.map +1 -1
- package/dist/components/hds/button/index.js +41 -2
- package/dist/components/hds/button/index.js.map +1 -1
- package/dist/components/hds/cds-accordion/index.js +14 -0
- package/dist/components/hds/cds-accordion/index.js.map +1 -0
- package/dist/components/hds/cds-accordion/item.js +11 -0
- package/dist/components/hds/cds-accordion/item.js.map +1 -0
- package/dist/components/hds/cds-badge/index.js +28 -0
- package/dist/components/hds/cds-badge/index.js.map +1 -0
- package/dist/components/hds/cds-button/index.js +26 -0
- package/dist/components/hds/cds-button/index.js.map +1 -0
- package/dist/components/hds/cds-link/index.js +12 -0
- package/dist/components/hds/cds-link/index.js.map +1 -0
- package/dist/components/hds/cds-modal/body-content.js +20 -0
- package/dist/components/hds/cds-modal/body-content.js.map +1 -0
- package/dist/components/hds/cds-modal/body.js +20 -0
- package/dist/components/hds/cds-modal/body.js.map +1 -0
- package/dist/components/hds/cds-modal/close-button.js +20 -0
- package/dist/components/hds/cds-modal/close-button.js.map +1 -0
- package/dist/components/hds/cds-modal/footer-button.js +21 -0
- package/dist/components/hds/cds-modal/footer-button.js.map +1 -0
- package/dist/components/hds/cds-modal/footer.js +20 -0
- package/dist/components/hds/cds-modal/footer.js.map +1 -0
- package/dist/components/hds/cds-modal/header.js +20 -0
- package/dist/components/hds/cds-modal/header.js.map +1 -0
- package/dist/components/hds/cds-modal/heading.js +20 -0
- package/dist/components/hds/cds-modal/heading.js.map +1 -0
- package/dist/components/hds/cds-modal/index.js +23 -0
- package/dist/components/hds/cds-modal/index.js.map +1 -0
- package/dist/components/hds/cds-text-input/index.js +16 -0
- package/dist/components/hds/cds-text-input/index.js.map +1 -0
- package/dist/components/hds/form/text-input/base.js +3 -1
- package/dist/components/hds/form/text-input/base.js.map +1 -1
- package/dist/components/hds/form/text-input/field.js +4 -3
- package/dist/components/hds/form/text-input/field.js.map +1 -1
- package/dist/components/hds/link/inline.js +20 -3
- package/dist/components/hds/link/inline.js.map +1 -1
- package/dist/components/hds/link/standalone.js +31 -3
- package/dist/components/hds/link/standalone.js.map +1 -1
- package/dist/components/hds/modal/cds/index.js +195 -0
- package/dist/components/hds/modal/cds/index.js.map +1 -0
- package/dist/components/hds/modal/hds/index.js +185 -0
- package/dist/components/hds/modal/hds/index.js.map +1 -0
- package/dist/components/hds/modal/index.js +15 -164
- package/dist/components/hds/modal/index.js.map +1 -1
- package/dist/components/hds/modal/types.js +10 -1
- package/dist/components/hds/modal/types.js.map +1 -1
- package/dist/components.js +15 -1
- package/dist/components.js.map +1 -1
- package/dist/styles/@hashicorp/design-system-components.css +12 -0
- package/dist/styles/@hashicorp/design-system-components.css.map +1 -1
- package/dist/styles/components/cds-badge.scss +12 -0
- package/dist/styles/components/cds-button.scss +12 -0
- package/dist/styles/components/cds-link.scss +12 -0
- package/dist/styles/components/index.scss +5 -0
- package/dist/utils/create-component.js +98 -0
- package/dist/utils/create-component.js.map +1 -0
- package/package.json +23 -2
- package/dist/components/hds/accordion/item/button.js.map +0 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2026
|
|
3
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
4
|
+
*/
|
|
5
|
+
import CDSTextInput from '@carbon/web-components/es/components/text-input/text-input.js';
|
|
6
|
+
import { INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE } from '@carbon/web-components/es/components/text-input/defs.js';
|
|
7
|
+
export declare const CDS_TEXT_INPUT_SIZE_OPTIONS: INPUT_SIZE[];
|
|
8
|
+
export declare const CDS_TEXT_INPUT_TOOLTIP_ALIGNMENT_OPTIONS: INPUT_TOOLTIP_ALIGNMENT[];
|
|
9
|
+
export declare const CDS_TEXT_INPUT_TOOLTIP_DIRECTION_OPTIONS: INPUT_TOOLTIP_DIRECTION[];
|
|
10
|
+
export declare const CDS_TEXT_INPUT_TYPE_OPTIONS: INPUT_TYPE[];
|
|
11
|
+
declare const _default: abstract new (...args: unknown[]) => import("@glimmer/component").default<import('../../../utils/create-component').WebComponentSignature<CDSTextInput>>;
|
|
12
|
+
export default _default;
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
import Component from '@glimmer/component';
|
|
6
|
+
import '@carbon/web-components/es/components/text-input/index.js';
|
|
7
|
+
import { INPUT_SIZE } from '@carbon/web-components/es/components/text-input/text-input.js';
|
|
6
8
|
import { HdsFormTextInputTypeValues } from './types.ts';
|
|
7
9
|
import type { HdsFormTextInputTypes } from './types.ts';
|
|
8
10
|
export declare const DEFAULT_TYPE = HdsFormTextInputTypeValues.Text;
|
|
@@ -17,6 +19,16 @@ export interface HdsFormTextInputBaseSignature {
|
|
|
17
19
|
width?: string;
|
|
18
20
|
id?: string;
|
|
19
21
|
ariaDescribedBy?: string;
|
|
22
|
+
size?: INPUT_SIZE;
|
|
23
|
+
label?: string;
|
|
24
|
+
helperText?: string;
|
|
25
|
+
enableCounter?: boolean;
|
|
26
|
+
invalidText?: string;
|
|
27
|
+
maxCount?: number;
|
|
28
|
+
useCds?: boolean;
|
|
29
|
+
};
|
|
30
|
+
Blocks: {
|
|
31
|
+
default: [];
|
|
20
32
|
};
|
|
21
33
|
Element: HTMLInputElement;
|
|
22
34
|
}
|
|
@@ -13,6 +13,9 @@ export interface HdsFormTextInputFieldSignature {
|
|
|
13
13
|
Args: Omit<HdsFormFieldSignature['Args'], 'contextualClass' | 'layout'> & HdsFormTextInputBaseSignature['Args'] & {
|
|
14
14
|
visibilityToggleAriaLabel?: HdsFormVisibilityToggleSignature['Args']['ariaLabel'];
|
|
15
15
|
visibilityToggleAriaMessageText?: HdsFormVisibilityToggleSignature['Args']['ariaMessageText'];
|
|
16
|
+
enableCounter?: boolean;
|
|
17
|
+
maxCount?: number;
|
|
18
|
+
useCds?: boolean;
|
|
16
19
|
};
|
|
17
20
|
Blocks: {
|
|
18
21
|
default: [
|
|
@@ -28,7 +31,7 @@ export interface HdsFormTextInputFieldSignature {
|
|
|
28
31
|
}
|
|
29
32
|
export default class HdsFormTextInputField extends Component<HdsFormTextInputFieldSignature> {
|
|
30
33
|
private _isPasswordMasked;
|
|
31
|
-
type: "search" | "
|
|
34
|
+
type: "search" | "time" | "email" | "tel" | "text" | "date" | "password" | "url" | "datetime-local" | "month" | "week";
|
|
32
35
|
constructor(owner: Owner, args: HdsFormTextInputFieldSignature['Args']);
|
|
33
36
|
get hasVisibilityToggle(): boolean;
|
|
34
37
|
get showVisibilityToggle(): boolean;
|
|
@@ -25,7 +25,7 @@ export default class HdsIcon extends Component<HdsIconSignature> {
|
|
|
25
25
|
private _titleId;
|
|
26
26
|
constructor(owner: Owner, args: HdsIconSignature['Args']);
|
|
27
27
|
get isInline(): boolean;
|
|
28
|
-
get predefinedColor(): "
|
|
28
|
+
get predefinedColor(): "strong" | "primary" | "disabled" | "faint" | "high-contrast" | "action" | "action-hover" | "action-active" | "highlight" | "highlight-on-surface" | "highlight-high-contrast" | "success" | "success-on-surface" | "success-high-contrast" | "warning" | "warning-on-surface" | "warning-high-contrast" | "critical" | "critical-on-surface" | "critical-high-contrast" | undefined;
|
|
29
29
|
get fillColor(): string;
|
|
30
30
|
get size(): "16" | "24" | HdsIconSizeValues.Sixteen;
|
|
31
31
|
get svgSize(): {
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
import Component from '@glimmer/component';
|
|
6
|
+
import '@carbon/web-components/es/components/link/index.js';
|
|
7
|
+
import { LINK_SIZE } from '@carbon/web-components/es/components/link/link.js';
|
|
6
8
|
import type Owner from '@ember/owner';
|
|
7
9
|
import { HdsLinkColorValues, HdsLinkIconPositionValues } from './types.ts';
|
|
8
10
|
import type { HdsInteractiveSignature } from '../interactive/index';
|
|
@@ -12,11 +14,20 @@ export declare const DEFAULT_ICON_POSITION = HdsLinkIconPositionValues.Trailing;
|
|
|
12
14
|
export declare const DEFAULT_COLOR = HdsLinkColorValues.Primary;
|
|
13
15
|
export declare const ICON_POSITIONS: HdsLinkIconPositions[];
|
|
14
16
|
export declare const COLORS: HdsLinkColors[];
|
|
17
|
+
type size = (typeof LINK_SIZE)[keyof typeof LINK_SIZE];
|
|
15
18
|
export interface HdsLinkInlineSignature {
|
|
16
19
|
Args: HdsInteractiveSignature['Args'] & {
|
|
20
|
+
useCds?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* @deprecated Carbon doesnt allow other colors
|
|
23
|
+
*/
|
|
17
24
|
color?: HdsLinkColors;
|
|
18
25
|
icon?: HdsIconSignature['Args']['name'];
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated Carbon doesnt allow leading icons for links
|
|
28
|
+
*/
|
|
19
29
|
iconPosition?: HdsLinkIconPositions;
|
|
30
|
+
size?: size;
|
|
20
31
|
};
|
|
21
32
|
Blocks: {
|
|
22
33
|
default: [];
|
|
@@ -28,4 +39,6 @@ export default class HdsLinkInline extends Component<HdsLinkInlineSignature> {
|
|
|
28
39
|
get color(): HdsLinkColors;
|
|
29
40
|
get iconPosition(): HdsLinkIconPositions;
|
|
30
41
|
get classNames(): string;
|
|
42
|
+
get shouldRenderCarbon(): boolean;
|
|
31
43
|
}
|
|
44
|
+
export {};
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
import Component from '@glimmer/component';
|
|
6
|
+
import '@carbon/web-components/es/components/link/index.js';
|
|
6
7
|
import type Owner from '@ember/owner';
|
|
7
8
|
import { HdsLinkIconPositionValues, HdsLinkColorValues, HdsLinkStandaloneSizeValues } from './types.ts';
|
|
8
9
|
import type { HdsInteractiveSignature } from '../interactive/index';
|
|
@@ -10,10 +11,17 @@ import type { HdsLinkColors, HdsLinkIconPositions, HdsLinkStandaloneSizes } from
|
|
|
10
11
|
import type { HdsIconSignature } from '../icon/index';
|
|
11
12
|
export interface HdsLinkStandaloneSignature {
|
|
12
13
|
Args: HdsInteractiveSignature['Args'] & {
|
|
14
|
+
useCds?: boolean;
|
|
13
15
|
size?: HdsLinkStandaloneSizes;
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Carbon doesnt allow other colors
|
|
18
|
+
*/
|
|
14
19
|
color?: HdsLinkColors;
|
|
15
20
|
text: string;
|
|
16
21
|
icon: HdsIconSignature['Args']['name'];
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Carbon doesnt allow leading icons for links
|
|
24
|
+
*/
|
|
17
25
|
iconPosition?: HdsLinkIconPositions;
|
|
18
26
|
};
|
|
19
27
|
Element: HdsInteractiveSignature['Element'];
|
|
@@ -33,4 +41,6 @@ export default class HdsLinkStandalone extends Component<HdsLinkStandaloneSignat
|
|
|
33
41
|
get size(): HdsLinkStandaloneSizes;
|
|
34
42
|
get iconSize(): HdsIconSignature['Args']['size'];
|
|
35
43
|
get classNames(): string;
|
|
44
|
+
get shouldRenderCarbon(): boolean;
|
|
45
|
+
get mappedCarbonSize(): string;
|
|
36
46
|
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
3
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
4
|
+
*/
|
|
5
|
+
import Component from '@glimmer/component';
|
|
6
|
+
import type { WithBoundArgs } from '@glint/template';
|
|
7
|
+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
|
|
8
|
+
import '@carbon/web-components/es/components/modal/index.js';
|
|
9
|
+
import { HdsModalSizeValues, HdsModalColorValues } from '../types.ts';
|
|
10
|
+
import type { HdsIconSignature } from '../../icon/index';
|
|
11
|
+
import type { HdsModalSizes, HdsModalColors } from '../types.ts';
|
|
12
|
+
export declare const DEFAULT_SIZE = HdsModalSizeValues.Medium;
|
|
13
|
+
export declare const DEFAULT_COLOR = HdsModalColorValues.Neutral;
|
|
14
|
+
export declare const SIZES: HdsModalSizes[];
|
|
15
|
+
export declare const COLORS: HdsModalColors[];
|
|
16
|
+
interface HdsModalHeaderSignature {
|
|
17
|
+
Args: {
|
|
18
|
+
id?: string;
|
|
19
|
+
icon?: HdsIconSignature['Args']['name'];
|
|
20
|
+
tagline?: string;
|
|
21
|
+
};
|
|
22
|
+
Blocks: {
|
|
23
|
+
default: [];
|
|
24
|
+
};
|
|
25
|
+
Element: Element;
|
|
26
|
+
}
|
|
27
|
+
declare const HdsModalHeader: TemplateOnlyComponent<HdsModalHeaderSignature>;
|
|
28
|
+
interface HdsModalBodySignature {
|
|
29
|
+
Args: Record<string, never>;
|
|
30
|
+
Blocks: {
|
|
31
|
+
default: [];
|
|
32
|
+
};
|
|
33
|
+
Element: Element;
|
|
34
|
+
}
|
|
35
|
+
declare const HdsModalBody: TemplateOnlyComponent<HdsModalBodySignature>;
|
|
36
|
+
interface HdsModalFooterSignature {
|
|
37
|
+
Args: {
|
|
38
|
+
onDismiss?: (event: MouseEvent, ...args: any[]) => void;
|
|
39
|
+
};
|
|
40
|
+
Blocks: {
|
|
41
|
+
default: [
|
|
42
|
+
{
|
|
43
|
+
close: (event: MouseEvent, ...args: any[]) => void;
|
|
44
|
+
}
|
|
45
|
+
];
|
|
46
|
+
};
|
|
47
|
+
Element: Element;
|
|
48
|
+
}
|
|
49
|
+
declare class HdsModalFooter extends Component<HdsModalFooterSignature> {
|
|
50
|
+
get onDismiss(): (event: MouseEvent, ...args: any[]) => void;
|
|
51
|
+
}
|
|
52
|
+
export interface HdsModalSignature {
|
|
53
|
+
Args: {
|
|
54
|
+
/** When `true`, prevents the modal from being closed via the close button, ESC key, or click outside. */
|
|
55
|
+
isDismissDisabled?: boolean;
|
|
56
|
+
/** The size of the modal. Maps to the underlying `cds-modal` `size` attribute. */
|
|
57
|
+
size?: HdsModalSizes;
|
|
58
|
+
/**
|
|
59
|
+
* @deprecated `@color` has no equivalent on the underlying Carbon `cds-modal` web
|
|
60
|
+
* component. The argument is preserved for backwards-compatibility but no longer
|
|
61
|
+
* affects the rendered output beyond a CSS class hook.
|
|
62
|
+
*/
|
|
63
|
+
color?: HdsModalColors;
|
|
64
|
+
/**
|
|
65
|
+
* @deprecated `@returnFocusTo` has no equivalent on the underlying Carbon `cds-modal`
|
|
66
|
+
* web component. Carbon automatically returns focus to the element that had focus
|
|
67
|
+
* before the modal was opened.
|
|
68
|
+
*/
|
|
69
|
+
returnFocusTo?: string;
|
|
70
|
+
/**
|
|
71
|
+
* @deprecated `@onOpen` has no equivalent on the underlying Carbon `cds-modal` web
|
|
72
|
+
* component. The callback is still invoked once on initial render for
|
|
73
|
+
* backwards-compatibility but should not be relied on.
|
|
74
|
+
*/
|
|
75
|
+
onOpen?: () => void;
|
|
76
|
+
/** Invoked after the modal has been closed by the user (close button, ESC, or click outside). */
|
|
77
|
+
onClose?: (event: Event) => void;
|
|
78
|
+
};
|
|
79
|
+
Blocks: {
|
|
80
|
+
default: [
|
|
81
|
+
{
|
|
82
|
+
Header?: WithBoundArgs<typeof HdsModalHeader, 'id'>;
|
|
83
|
+
Body?: typeof HdsModalBody;
|
|
84
|
+
Footer?: WithBoundArgs<typeof HdsModalFooter, 'onDismiss'>;
|
|
85
|
+
}
|
|
86
|
+
];
|
|
87
|
+
};
|
|
88
|
+
Element: HTMLElement;
|
|
89
|
+
}
|
|
90
|
+
export default class HdsModal extends Component<HdsModalSignature> {
|
|
91
|
+
private _isOpen;
|
|
92
|
+
private _element;
|
|
93
|
+
private _body;
|
|
94
|
+
private _bodyInitialOverflowValue;
|
|
95
|
+
get isDismissDisabled(): boolean;
|
|
96
|
+
get size(): HdsModalSizes;
|
|
97
|
+
get cdsSize(): 'sm' | 'md' | 'lg';
|
|
98
|
+
get color(): HdsModalColors;
|
|
99
|
+
get id(): string;
|
|
100
|
+
private _performCloseCleanup;
|
|
101
|
+
private _handleBeforeClose;
|
|
102
|
+
private _handleClosed;
|
|
103
|
+
private _registerModal;
|
|
104
|
+
onDismiss: () => Promise<void>;
|
|
105
|
+
}
|
|
106
|
+
export {};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
3
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
4
|
+
*/
|
|
5
|
+
import Component from '@glimmer/component';
|
|
6
|
+
import type { WithBoundArgs } from '@glint/template';
|
|
7
|
+
import HdsDialogPrimitiveHeader from '../../dialog-primitive/header';
|
|
8
|
+
import HdsDialogPrimitiveBody from '../../dialog-primitive/body';
|
|
9
|
+
import HdsDialogPrimitiveFooter from '../../dialog-primitive/footer';
|
|
10
|
+
import { HdsModalSizeValues, HdsModalColorValues } from '../types.ts';
|
|
11
|
+
import type { HdsModalSizes, HdsModalColors } from '../types.ts';
|
|
12
|
+
export declare const DEFAULT_SIZE = HdsModalSizeValues.Medium;
|
|
13
|
+
export declare const DEFAULT_COLOR = HdsModalColorValues.Neutral;
|
|
14
|
+
export declare const SIZES: HdsModalSizes[];
|
|
15
|
+
export declare const COLORS: HdsModalColors[];
|
|
16
|
+
export interface HdsModalSignature {
|
|
17
|
+
Args: {
|
|
18
|
+
isDismissDisabled?: boolean;
|
|
19
|
+
size?: HdsModalSizes;
|
|
20
|
+
color?: HdsModalColors;
|
|
21
|
+
returnFocusTo?: string;
|
|
22
|
+
onOpen?: () => void;
|
|
23
|
+
onClose?: (event: Event) => void;
|
|
24
|
+
};
|
|
25
|
+
Blocks: {
|
|
26
|
+
default: [
|
|
27
|
+
{
|
|
28
|
+
Header?: WithBoundArgs<typeof HdsDialogPrimitiveHeader, 'id' | 'onDismiss' | 'contextualClassPrefix'>;
|
|
29
|
+
Body?: WithBoundArgs<typeof HdsDialogPrimitiveBody, 'contextualClass'>;
|
|
30
|
+
Footer?: WithBoundArgs<typeof HdsDialogPrimitiveFooter, 'onDismiss' | 'contextualClass'>;
|
|
31
|
+
}
|
|
32
|
+
];
|
|
33
|
+
};
|
|
34
|
+
Element: HTMLDialogElement;
|
|
35
|
+
}
|
|
36
|
+
export default class HdsModal extends Component<HdsModalSignature> {
|
|
37
|
+
private _isOpen;
|
|
38
|
+
private _element;
|
|
39
|
+
private _body;
|
|
40
|
+
private _bodyInitialOverflowValue;
|
|
41
|
+
private _clickOutsideToDismissHandler;
|
|
42
|
+
get isDismissDisabled(): boolean;
|
|
43
|
+
get size(): HdsModalSizes;
|
|
44
|
+
get color(): HdsModalColors;
|
|
45
|
+
get id(): string;
|
|
46
|
+
get classNames(): string;
|
|
47
|
+
private _performCloseCleanup;
|
|
48
|
+
registerOnCloseCallback: (event: Event) => void;
|
|
49
|
+
private _registerDialog;
|
|
50
|
+
open: () => void;
|
|
51
|
+
onDismiss: () => Promise<void>;
|
|
52
|
+
}
|
|
@@ -3,16 +3,40 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
import Component from '@glimmer/component';
|
|
6
|
-
import type {
|
|
7
|
-
import
|
|
8
|
-
import HdsDialogPrimitiveBody from '../dialog-primitive/body';
|
|
9
|
-
import HdsDialogPrimitiveFooter from '../dialog-primitive/footer';
|
|
10
|
-
import { HdsModalSizeValues, HdsModalColorValues } from './types.ts';
|
|
6
|
+
import type { ComponentLike } from '@glint/template';
|
|
7
|
+
import type { HdsIconSignature } from '../icon/index';
|
|
11
8
|
import type { HdsModalSizes, HdsModalColors } from './types.ts';
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
export { SIZES, COLORS, DEFAULT_SIZE, DEFAULT_COLOR } from './cds/index';
|
|
10
|
+
type HdsModalHeaderLike = ComponentLike<{
|
|
11
|
+
Args: {
|
|
12
|
+
icon?: HdsIconSignature['Args']['name'];
|
|
13
|
+
tagline?: string;
|
|
14
|
+
};
|
|
15
|
+
Blocks: {
|
|
16
|
+
default: [];
|
|
17
|
+
};
|
|
18
|
+
Element: Element;
|
|
19
|
+
}>;
|
|
20
|
+
type HdsModalBodyLike = ComponentLike<{
|
|
21
|
+
Args: Record<string, never>;
|
|
22
|
+
Blocks: {
|
|
23
|
+
default: [];
|
|
24
|
+
};
|
|
25
|
+
Element: Element;
|
|
26
|
+
}>;
|
|
27
|
+
type HdsModalFooterLike = ComponentLike<{
|
|
28
|
+
Args: {
|
|
29
|
+
onDismiss?: (event: MouseEvent, ...args: any[]) => void;
|
|
30
|
+
};
|
|
31
|
+
Blocks: {
|
|
32
|
+
default: [
|
|
33
|
+
{
|
|
34
|
+
close: (event: MouseEvent, ...args: any[]) => void;
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
};
|
|
38
|
+
Element: Element;
|
|
39
|
+
}>;
|
|
16
40
|
export interface HdsModalSignature {
|
|
17
41
|
Args: {
|
|
18
42
|
isDismissDisabled?: boolean;
|
|
@@ -21,32 +45,24 @@ export interface HdsModalSignature {
|
|
|
21
45
|
returnFocusTo?: string;
|
|
22
46
|
onOpen?: () => void;
|
|
23
47
|
onClose?: (event: Event) => void;
|
|
48
|
+
/**
|
|
49
|
+
* When true, renders the Carbon (cds) modal implementation.
|
|
50
|
+
* When false (default), renders the original HDS modal implementation
|
|
51
|
+
* (native `<dialog>` with focus-trap).
|
|
52
|
+
*/
|
|
53
|
+
useCds?: boolean;
|
|
24
54
|
};
|
|
25
55
|
Blocks: {
|
|
26
56
|
default: [
|
|
27
57
|
{
|
|
28
|
-
Header?:
|
|
29
|
-
Body?:
|
|
30
|
-
Footer?:
|
|
58
|
+
Header?: HdsModalHeaderLike;
|
|
59
|
+
Body?: HdsModalBodyLike;
|
|
60
|
+
Footer?: HdsModalFooterLike;
|
|
31
61
|
}
|
|
32
62
|
];
|
|
33
63
|
};
|
|
34
|
-
Element: HTMLDialogElement;
|
|
64
|
+
Element: HTMLElement | HTMLDialogElement;
|
|
35
65
|
}
|
|
36
66
|
export default class HdsModal extends Component<HdsModalSignature> {
|
|
37
|
-
|
|
38
|
-
private _element;
|
|
39
|
-
private _body;
|
|
40
|
-
private _bodyInitialOverflowValue;
|
|
41
|
-
private _clickOutsideToDismissHandler;
|
|
42
|
-
get isDismissDisabled(): boolean;
|
|
43
|
-
get size(): HdsModalSizes;
|
|
44
|
-
get color(): HdsModalColors;
|
|
45
|
-
get id(): string;
|
|
46
|
-
get classNames(): string;
|
|
47
|
-
private _performCloseCleanup;
|
|
48
|
-
registerOnCloseCallback: (event: Event) => void;
|
|
49
|
-
private _registerDialog;
|
|
50
|
-
open: () => void;
|
|
51
|
-
onDismiss: () => Promise<void>;
|
|
67
|
+
get useCds(): boolean;
|
|
52
68
|
}
|
|
@@ -14,3 +14,8 @@ export declare enum HdsModalColorValues {
|
|
|
14
14
|
Critical = "critical"
|
|
15
15
|
}
|
|
16
16
|
export type HdsModalColors = `${HdsModalColorValues}`;
|
|
17
|
+
/**
|
|
18
|
+
* Maps the Helios `@size` argument values to the corresponding
|
|
19
|
+
* `cds-modal` `size` attribute values.
|
|
20
|
+
*/
|
|
21
|
+
export declare const HDS_MODAL_SIZE_TO_CDS: Record<HdsModalSizes, 'sm' | 'md' | 'lg'>;
|
|
@@ -8,7 +8,7 @@ import type { HdsIconSignature } from '../../icon/index';
|
|
|
8
8
|
import type { HdsStepperStatuses } from '../types.ts';
|
|
9
9
|
export declare const DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
|
|
10
10
|
export declare const STATUSES: HdsStepperStatuses[];
|
|
11
|
-
export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "ansible-community" | "ansible-community-color" | "ansible-automation-platform" | "ansible-automation-platform-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "cloudability" | "cloudability-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "openstack" | "openstack-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity" | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hash" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "key" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "image" | "music" | "pause" | "pause-circle" | "play" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "end" | "entry-point" | "exit-point" | "external-link" | "filter" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "link" | "list" | "maximize" | "maximize-alt" | "menu" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move-horizontal" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "repeat" | "resize-column" | "rotate-cw" | "rotate-ccw" | "search" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "start" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "tag" | "text-wrap" | "toggle-left" | "toggle-right" | "top" | "trash" | "type" | "unfold-close" | "unfold-open" | "upload" | "workspace" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "code" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "path" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "queue" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "move" | "shuffle" | "swap-horizontal" | "swap-vertical">;
|
|
11
|
+
export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "search" | "repeat" | "link" | "code" | "map" | "menu" | "video" | "home" | "filter" | "type" | "top" | "bottom" | "download" | "target" | "change" | "pause" | "play" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "ansible-community" | "ansible-community-color" | "ansible-automation-platform" | "ansible-automation-platform-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "cloudability" | "cloudability-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "openstack" | "openstack-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity" | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hash" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "key" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "image" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "command" | "crop" | "dashboard" | "delete" | "edit" | "end" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move-horizontal" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "start" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "tag" | "text-wrap" | "toggle-left" | "toggle-right" | "trash" | "unfold-close" | "unfold-open" | "upload" | "workspace" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "path" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "queue" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "move" | "shuffle" | "swap-horizontal" | "swap-vertical">;
|
|
12
12
|
export interface HdsStepperTaskIndicatorSignature {
|
|
13
13
|
Args: {
|
|
14
14
|
status?: HdsStepperStatuses;
|
|
@@ -2,6 +2,20 @@
|
|
|
2
2
|
* Copyright IBM Corp. 2021, 2025
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
|
+
export { default as HdsCdsAccordion } from './components/hds/cds-accordion/index';
|
|
6
|
+
export { default as HdsCdsAccordionItem } from './components/hds/cds-accordion/item';
|
|
7
|
+
export { default as HdsCdsBadge } from './components/hds/cds-badge/index';
|
|
8
|
+
export { default as HdsCdsButton } from './components/hds/cds-button/index';
|
|
9
|
+
export { default as HdsCdsLink } from './components/hds/cds-link/index';
|
|
10
|
+
export { default as HdsCdsModalBody } from './components/hds/cds-modal/body';
|
|
11
|
+
export { default as HdsCdsModalBodyContent } from './components/hds/cds-modal/body-content';
|
|
12
|
+
export { default as HdsCdsModalCloseButton } from './components/hds/cds-modal/close-button';
|
|
13
|
+
export { default as HdsCdsModalFooter } from './components/hds/cds-modal/footer';
|
|
14
|
+
export { default as HdsCdsModalFooterButton } from './components/hds/cds-modal/footer-button';
|
|
15
|
+
export { default as HdsCdsModalHeader } from './components/hds/cds-modal/header';
|
|
16
|
+
export { default as HdsCdsModalHeading } from './components/hds/cds-modal/heading';
|
|
17
|
+
export { default as HdsCdsModal } from './components/hds/cds-modal/index';
|
|
18
|
+
export { default as HdsCdsTextInput } from './components/hds/cds-text-input/index';
|
|
5
19
|
export { default as HdsAccordion } from './components/hds/accordion/index';
|
|
6
20
|
export { default as HdsAccordionItem } from './components/hds/accordion/item/index';
|
|
7
21
|
export * from './components/hds/accordion/types.ts';
|
|
@@ -46,7 +46,7 @@ declare const _default: import("ember-modifier").FunctionBasedModifier<{
|
|
|
46
46
|
Element: HTMLElement;
|
|
47
47
|
Args: {
|
|
48
48
|
Named: HdsAnchoredPositionOptions;
|
|
49
|
-
Positional: [
|
|
49
|
+
Positional: [HTMLElement | SVGElement];
|
|
50
50
|
};
|
|
51
51
|
}>;
|
|
52
52
|
export default _default;
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import type HdsAccordionComponent from './components/hds/accordion';
|
|
6
6
|
import type HdsAccordionItemComponent from './components/hds/accordion/item';
|
|
7
|
-
import type HdsAccordionItemButtonComponent from './components/hds/accordion/item/button';
|
|
8
7
|
import type HdsAdvancedTableComponent from './components/hds/advanced-table';
|
|
9
8
|
import type HdsAdvancedTableBodyComponent from './components/hds/advanced-table/body';
|
|
10
9
|
import type HdsAdvancedTableColumnManagerComponent from './components/hds/advanced-table/column-manager/index';
|
|
@@ -242,8 +241,6 @@ export default interface HdsComponentsRegistry {
|
|
|
242
241
|
'hds/accordion': typeof HdsAccordionComponent;
|
|
243
242
|
'Hds::Accordion::Item': typeof HdsAccordionItemComponent;
|
|
244
243
|
'hds/accordion/item': typeof HdsAccordionItemComponent;
|
|
245
|
-
'Hds::Accordion::Item::Button': typeof HdsAccordionItemButtonComponent;
|
|
246
|
-
'hds/accordion/item/button': typeof HdsAccordionItemButtonComponent;
|
|
247
244
|
'Hds::AdvancedTable': typeof HdsAdvancedTableComponent;
|
|
248
245
|
'hds/advanced-table': typeof HdsAdvancedTableComponent;
|
|
249
246
|
'Hds::AdvancedTable::Body': typeof HdsAdvancedTableBodyComponent;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2026
|
|
3
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
4
|
+
*/
|
|
5
|
+
import Component from '@glimmer/component';
|
|
6
|
+
type Constructor<T> = new () => T;
|
|
7
|
+
type ElementProps<I extends HTMLElement> = Partial<Omit<I, keyof HTMLElement>>;
|
|
8
|
+
type ComponentArgs<I extends HTMLElement> = ElementProps<I>;
|
|
9
|
+
type WebComponentSignature<I extends HTMLElement> = {
|
|
10
|
+
Args: ComponentArgs<I>;
|
|
11
|
+
Blocks: {
|
|
12
|
+
default: [];
|
|
13
|
+
};
|
|
14
|
+
Element: I;
|
|
15
|
+
};
|
|
16
|
+
type GlimmerComponentClass<Signature> = abstract new (...args: unknown[]) => Component<Signature>;
|
|
17
|
+
interface CreateComponentOptions<I extends HTMLElement> {
|
|
18
|
+
tagName: string;
|
|
19
|
+
elementClass: Constructor<I>;
|
|
20
|
+
displayName?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare const createComponent: <I extends HTMLElement>({ tagName, elementClass, displayName, }: CreateComponentOptions<I>) => GlimmerComponentClass<WebComponentSignature<I>>;
|
|
23
|
+
export type { ComponentArgs, CreateComponentOptions, ElementProps, WebComponentSignature, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/accordion/cds/item/index";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "@hashicorp/design-system-components/components/hds/accordion/
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/accordion/cds/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/accordion/hds/item/button";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/accordion/hds/item/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/accordion/hds/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-accordion/item";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-accordion/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-badge/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-button/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-link/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/body-content";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/body";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/close-button";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/footer-button";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/footer";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/header";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/heading";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-modal/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/cds-text-input/index";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "@hashicorp/design-system-components/components/hds/modal/cds/index";
|