@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6
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/README.md +35 -11
- package/dist/README.md +35 -11
- package/dist/design-tokens.css +300 -85
- package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +100 -64
- package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +1 -1
- package/dist/icons.js +306 -0
- package/dist/package.json +24 -5
- package/{src/lib/site-drakkar/site-drakkar.config.ts → dist/site-drakkar.js} +64 -130
- package/dist/src/tokens/viking-tokens.json +9 -7
- package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts +97 -3
- package/dist/viking-components.css +161 -70
- package/dist/viking-tokens.json +9 -7
- package/dist/viking-ui-elements.js +44 -32
- package/dist/viking-ui.css +1 -1
- package/dist/web-components.js +44 -32
- package/package.json +30 -8
- package/dist/scripts/build-web-components.mjs +0 -37
- package/dist/src/web/badge/viking-badge-wc.ts +0 -116
- package/dist/src/web/button/viking-button-wc.ts +0 -165
- package/dist/src/web/callout/viking-callout-wc.ts +0 -105
- package/dist/src/web/card/viking-card-wc.ts +0 -67
- package/dist/src/web/core/base.ts +0 -56
- package/dist/src/web/core/dom.ts +0 -53
- package/dist/src/web/core/icons-inline.ts +0 -44
- package/dist/src/web/core/styles.ts +0 -1261
- package/dist/src/web/core/types.ts +0 -19
- package/dist/src/web/field/viking-field-wc.ts +0 -154
- package/dist/src/web/index.ts +0 -73
- package/dist/src/web/input/viking-input-wc.ts +0 -211
- package/dist/src/web/modal/viking-modal-wc.ts +0 -187
- package/dist/src/web/search-palette/viking-search-palette-wc.ts +0 -495
- package/dist/src/web/select/viking-select-wc.ts +0 -218
- package/dist/src/web/suite-header/viking-suite-header-wc.ts +0 -729
- package/dist/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
- package/dist/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
- package/dist/src/web/types.ts +0 -37
- package/dist/src/web/web-components.spec.ts +0 -297
- package/src/assets/drakkar-favicon.svg +0 -17
- package/src/assets/fonts/inter/InterVariable-Italic.woff2 +0 -0
- package/src/assets/fonts/inter/InterVariable.woff2 +0 -0
- package/src/core/brand/deml-lockup.svg +0 -5
- package/src/core/brand/deml-mark-compact.svg +0 -4
- package/src/core/brand/deml-mark-filled.svg +0 -3
- package/src/core/brand/deml-mark-outline.svg +0 -4
- package/src/core/brand-icons.ts +0 -62
- package/src/core/icons.spec.ts +0 -52
- package/src/core/icons.ts +0 -206
- package/src/core/integration-brand-icons.ts +0 -77
- package/src/core/lucide-paths.generated.ts +0 -130
- package/src/core/types.ts +0 -85
- package/src/core/uid.ts +0 -7
- package/src/elements/button/viking-button.ts +0 -201
- package/src/elements/card/viking-card.ts +0 -60
- package/src/elements/core/dom.ts +0 -33
- package/src/elements/core/styles.ts +0 -28
- package/src/elements/modal/viking-modal.ts +0 -154
- package/src/index.ts +0 -1
- package/src/lib/accordion/accordion.ts +0 -126
- package/src/lib/app-header/app-header.scss +0 -274
- package/src/lib/app-header/app-header.ts +0 -43
- package/src/lib/app-sidebar/app-sidebar.scss +0 -415
- package/src/lib/app-sidebar/app-sidebar.ts +0 -29
- package/src/lib/auth-panel/auth-panel.spec.ts +0 -132
- package/src/lib/auth-panel/auth-panel.ts +0 -228
- package/src/lib/autocomplete/autocomplete.ts +0 -223
- package/src/lib/avatar/avatar.ts +0 -126
- package/src/lib/badge/badge.ts +0 -182
- package/src/lib/bar/bar.ts +0 -31
- package/src/lib/brand/brand.ts +0 -60
- package/src/lib/breadcrumbs/breadcrumbs.ts +0 -81
- package/src/lib/button/button-group.ts +0 -40
- package/src/lib/button/button.scss +0 -119
- package/src/lib/button/button.ts +0 -98
- package/src/lib/calendar/calendar.ts +0 -253
- package/src/lib/callout/callout.ts +0 -211
- package/src/lib/card/card-title.spec.ts +0 -27
- package/src/lib/card/card-title.ts +0 -50
- package/src/lib/card/card.ts +0 -200
- package/src/lib/carousel/carousel.ts +0 -206
- package/src/lib/chart/chart-zoom.spec.ts +0 -65
- package/src/lib/chart/chart-zoom.ts +0 -71
- package/src/lib/chart/chart.ts +0 -1257
- package/src/lib/chart-card-header/chart-card-header.ts +0 -80
- package/src/lib/chart-empty-state/chart-empty-state.ts +0 -146
- package/src/lib/chart-panel/chart-panel.ts +0 -133
- package/src/lib/checkbox/checkbox.ts +0 -139
- package/src/lib/color-picker/color-picker.ts +0 -148
- package/src/lib/command/command.ts +0 -260
- package/src/lib/composer/composer.ts +0 -180
- package/src/lib/confirm-dialog/confirm-dialog.ts +0 -163
- package/src/lib/confirm-dialog/dialog.service.ts +0 -79
- package/src/lib/context/context.ts +0 -75
- package/src/lib/core/brand-icons.ts +0 -62
- package/src/lib/core/cva.ts +0 -33
- package/src/lib/core/icons.ts +0 -206
- package/src/lib/core/integration-brand-icons.ts +0 -77
- package/src/lib/core/lucide-paths.generated.ts +0 -130
- package/src/lib/date-picker/date-picker.ts +0 -139
- package/src/lib/dropdown/dropdown.ts +0 -188
- package/src/lib/editor/editor.ts +0 -170
- package/src/lib/empty-state/empty-state.ts +0 -100
- package/src/lib/fab/fab.ts +0 -76
- package/src/lib/field/field.ts +0 -111
- package/src/lib/file-upload/file-upload.ts +0 -208
- package/src/lib/footer/footer.scss +0 -162
- package/src/lib/footer/footer.ts +0 -28
- package/src/lib/form-section/form-section.ts +0 -200
- package/src/lib/forms.spec.ts +0 -92
- package/src/lib/gauge-arc/gauge-arc.ts +0 -85
- package/src/lib/hud-panel/hud-panel.ts +0 -27
- package/src/lib/icon/icon.ts +0 -284
- package/src/lib/icon-badge/icon-badge.ts +0 -87
- package/src/lib/icon-heading/icon-heading.spec.ts +0 -32
- package/src/lib/icon-heading/icon-heading.ts +0 -38
- package/src/lib/icon-text/icon-text.ts +0 -120
- package/src/lib/input/input.ts +0 -119
- package/src/lib/kanban/kanban.ts +0 -211
- package/src/lib/kbd/kbd.ts +0 -32
- package/src/lib/label/label.ts +0 -39
- package/src/lib/loading-overlay/loading-overlay.ts +0 -80
- package/src/lib/menubar/menubar.ts +0 -77
- package/src/lib/metric-card/metric-card.ts +0 -33
- package/src/lib/modal/modal.ts +0 -207
- package/src/lib/native-select/native-select.ts +0 -124
- package/src/lib/navbar/navbar.ts +0 -124
- package/src/lib/navigation-menu/navigation-menu.ts +0 -116
- package/src/lib/otp-input/otp-input.ts +0 -164
- package/src/lib/page-back-link/page-back-link.ts +0 -74
- package/src/lib/page-header/page-header.ts +0 -70
- package/src/lib/pagination/pagination.ts +0 -157
- package/src/lib/pillbox/pillbox.ts +0 -157
- package/src/lib/popover/popover.ts +0 -92
- package/src/lib/profile/profile.ts +0 -73
- package/src/lib/progress/progress.ts +0 -123
- package/src/lib/radio/radio.ts +0 -132
- package/src/lib/ring-gauge/ring-gauge.ts +0 -75
- package/src/lib/scroll-area/scroll-area.ts +0 -57
- package/src/lib/search-palette/search-palette.scss +0 -288
- package/src/lib/search-palette/search-palette.ts +0 -114
- package/src/lib/select/select.ts +0 -292
- package/src/lib/separator/separator.ts +0 -59
- package/src/lib/sheet/sheet.ts +0 -192
- package/src/lib/sidebar-nav/sidebar-nav.scss +0 -218
- package/src/lib/sidebar-nav/sidebar-nav.ts +0 -158
- package/src/lib/site-drakkar/site-footer.ts +0 -133
- package/src/lib/site-drakkar/site-navbar.scss +0 -2
- package/src/lib/site-drakkar/site-navbar.ts +0 -286
- package/src/lib/site-drakkar/suite-search-items.spec.ts +0 -61
- package/src/lib/site-drakkar/suite-search-items.ts +0 -246
- package/src/lib/skeleton/skeleton.ts +0 -51
- package/src/lib/slider/slider.ts +0 -133
- package/src/lib/spinner/spinner.ts +0 -75
- package/src/lib/status-metric-row/status-metric-row.ts +0 -74
- package/src/lib/suite-search-palette/suite-search-palette.ts +0 -95
- package/src/lib/switch/switch.ts +0 -131
- package/src/lib/table/table.ts +0 -137
- package/src/lib/tabs/tab-panel.ts +0 -61
- package/src/lib/tabs/tab.ts +0 -107
- package/src/lib/tabs/tabs.ts +0 -109
- package/src/lib/textarea/textarea.ts +0 -103
- package/src/lib/theme-toggle/theme-toggle.spec.ts +0 -40
- package/src/lib/theme-toggle/theme-toggle.ts +0 -40
- package/src/lib/time-picker/time-picker.ts +0 -197
- package/src/lib/timeline/timeline.ts +0 -152
- package/src/lib/toast/toast.ts +0 -196
- package/src/lib/toggle/toggle-group.ts +0 -60
- package/src/lib/toggle/toggle.ts +0 -101
- package/src/lib/tooltip/tooltip.ts +0 -119
- package/src/lib/typography/heading.ts +0 -52
- package/src/lib/typography/text.ts +0 -51
- package/src/lib/uptime-bar/uptime-bar.ts +0 -55
- package/src/lib/verification-code-field/verification-code-field.ts +0 -149
- package/src/lib/whitepaper-cta/whitepaper-cta.scss +0 -130
- package/src/lib/whitepaper-cta/whitepaper-cta.ts +0 -78
- package/src/lib/wizard/wizard.ts +0 -80
- package/src/public-api.ts +0 -172
- package/src/styles/_buttons.scss +0 -386
- package/src/styles/_component-primitives.scss +0 -183
- package/src/styles/_drakkar-buttons.scss +0 -85
- package/src/styles/_fonts.scss +0 -22
- package/src/styles/_forms.scss +0 -66
- package/src/styles/_input.scss +0 -106
- package/src/styles/_layout-enforcement.scss +0 -229
- package/src/styles/_layout-rhythm.scss +0 -158
- package/src/styles/_legacy-aliases.scss +0 -212
- package/src/styles/_series-colors.scss +0 -24
- package/src/styles/_static-primitives.scss +0 -857
- package/src/styles/_typography.scss +0 -87
- package/src/styles/_variables.scss +0 -527
- package/src/styles/components/a11y.scss +0 -90
- package/src/styles/components/badges.scss +0 -102
- package/src/styles/components/extracted-utilities.scss +0 -459
- package/src/styles/components/footer.scss +0 -168
- package/src/styles/components/icon-heading.scss +0 -47
- package/src/styles/components/icon-inline.scss +0 -101
- package/src/styles/components/layout.scss +0 -59
- package/src/styles/components/utilities.scss +0 -131
- package/src/styles/components/viking-inspired.scss +0 -204
- package/src/styles/components/whitepaper-cta.scss +0 -130
- package/src/styles/components-bundle.scss +0 -9
- package/src/styles/components.scss +0 -442
- package/src/styles/deml-components.scss +0 -10
- package/src/styles/index.scss +0 -8
- package/src/styles/layout-shell.scss +0 -111
- package/src/styles/page-shell.scss +0 -859
- package/src/styles/static-navbar.scss +0 -1250
- package/src/styles/surfaces/backend.scss +0 -154
- package/src/styles/surfaces/docs-global.scss +0 -73
- package/src/styles/surfaces/docs-shell.scss +0 -437
- package/src/styles/surfaces/docs-showcase.scss +0 -1153
- package/src/styles/surfaces/marketing-cta.scss +0 -62
- package/src/styles/surfaces/marketing-docs-bento.scss +0 -67
- package/src/styles/surfaces/marketing-global.scss +0 -748
- package/src/styles/surfaces/marketing-landing.scss +0 -1526
- package/src/styles/surfaces/marketing-publication.scss +0 -535
- package/src/styles/surfaces/marketing-theme.scss +0 -14
- package/src/styles/surfaces/swagger-ui.scss +0 -1013
- package/src/styles/tokens-export.scss +0 -18
- package/src/styles/tokens.scss +0 -5
- package/src/styles/viking-ui-bundle.scss +0 -23
- package/src/styles/viking-ui.scss +0 -272
- package/src/tokens/series-presets.ts +0 -15
- package/src/tokens/tailwind.preset.js +0 -209
- package/src/tokens/viking-tokens.json +0 -318
- package/src/viking-ui.spec.ts +0 -416
- package/src/web/badge/viking-badge-wc.ts +0 -116
- package/src/web/button/viking-button-wc.ts +0 -165
- package/src/web/callout/viking-callout-wc.ts +0 -105
- package/src/web/card/viking-card-wc.ts +0 -67
- package/src/web/core/base.ts +0 -56
- package/src/web/core/dom.ts +0 -53
- package/src/web/core/icons-inline.ts +0 -44
- package/src/web/core/styles.ts +0 -1261
- package/src/web/core/types.ts +0 -19
- package/src/web/field/viking-field-wc.ts +0 -154
- package/src/web/index.ts +0 -73
- package/src/web/input/viking-input-wc.ts +0 -211
- package/src/web/modal/viking-modal-wc.ts +0 -187
- package/src/web/search-palette/viking-search-palette-wc.ts +0 -495
- package/src/web/select/viking-select-wc.ts +0 -218
- package/src/web/suite-header/viking-suite-header-wc.ts +0 -729
- package/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
- package/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
- package/src/web/types.ts +0 -37
- package/src/web/web-components.spec.ts +0 -297
- package/src/web-components/index.ts +0 -1
|
@@ -1,297 +0,0 @@
|
|
|
1
|
-
import { beforeEach, describe, expect, it } from "vitest";
|
|
2
|
-
import {
|
|
3
|
-
registerVikingBadgeWc,
|
|
4
|
-
registerVikingCalloutWc,
|
|
5
|
-
registerVikingModalWc,
|
|
6
|
-
registerVikingSearchPaletteWc,
|
|
7
|
-
registerVikingSelectWc,
|
|
8
|
-
registerVikingSuiteHeaderWc,
|
|
9
|
-
registerVikingSuiteSearchPaletteWc,
|
|
10
|
-
} from "./index";
|
|
11
|
-
|
|
12
|
-
const registerAll = (): void => {
|
|
13
|
-
registerVikingBadgeWc();
|
|
14
|
-
registerVikingCalloutWc();
|
|
15
|
-
registerVikingSelectWc();
|
|
16
|
-
registerVikingModalWc();
|
|
17
|
-
registerVikingSearchPaletteWc();
|
|
18
|
-
registerVikingSuiteSearchPaletteWc();
|
|
19
|
-
registerVikingSuiteHeaderWc();
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
describe("Viking Web Components v2", () => {
|
|
23
|
-
beforeEach(() => {
|
|
24
|
-
document.body.innerHTML = "";
|
|
25
|
-
registerAll();
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
it("renders badge tones and emits viking-removed", () => {
|
|
29
|
-
const badge = document.createElement("viking-badge-wc");
|
|
30
|
-
badge.setAttribute("tone", "success");
|
|
31
|
-
badge.setAttribute("icon", "check");
|
|
32
|
-
badge.setAttribute("removable", "");
|
|
33
|
-
badge.textContent = "Healthy";
|
|
34
|
-
document.body.append(badge);
|
|
35
|
-
|
|
36
|
-
expect(badge.shadowRoot?.querySelector("svg")).toBeTruthy();
|
|
37
|
-
|
|
38
|
-
let removed = false;
|
|
39
|
-
badge.addEventListener("viking-removed", () => {
|
|
40
|
-
removed = true;
|
|
41
|
-
});
|
|
42
|
-
badge.shadowRoot
|
|
43
|
-
?.querySelector<HTMLButtonElement>(".viking-badge-remove")
|
|
44
|
-
?.click();
|
|
45
|
-
expect(removed).toBe(true);
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
it("dismisses callout and sets hidden attribute", () => {
|
|
49
|
-
const callout = document.createElement("viking-callout-wc");
|
|
50
|
-
callout.setAttribute("tone", "info");
|
|
51
|
-
callout.setAttribute("heading", "Notice");
|
|
52
|
-
callout.setAttribute("dismissible", "");
|
|
53
|
-
callout.textContent = "Body copy";
|
|
54
|
-
document.body.append(callout);
|
|
55
|
-
|
|
56
|
-
callout.shadowRoot
|
|
57
|
-
?.querySelector<HTMLButtonElement>(".viking-callout-close")
|
|
58
|
-
?.click();
|
|
59
|
-
expect(callout.hasAttribute("hidden")).toBe(true);
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
it("mirrors option children and emits viking-change", () => {
|
|
63
|
-
const select = document.createElement("viking-select-wc");
|
|
64
|
-
select.setAttribute("label", "Retention");
|
|
65
|
-
select.setAttribute("name", "retention");
|
|
66
|
-
select.innerHTML = `
|
|
67
|
-
<option value="7d">7 days</option>
|
|
68
|
-
<option value="30d">30 days</option>
|
|
69
|
-
`;
|
|
70
|
-
document.body.append(select);
|
|
71
|
-
|
|
72
|
-
const native = select.shadowRoot?.querySelector(
|
|
73
|
-
"select",
|
|
74
|
-
) as HTMLSelectElement;
|
|
75
|
-
expect(native.options.length).toBe(2);
|
|
76
|
-
|
|
77
|
-
let changed = "";
|
|
78
|
-
select.addEventListener("viking-change", (event) => {
|
|
79
|
-
changed = (event as CustomEvent<{ value: string }>).detail.value;
|
|
80
|
-
});
|
|
81
|
-
native.value = "30d";
|
|
82
|
-
native.dispatchEvent(new Event("change"));
|
|
83
|
-
expect(changed).toBe("30d");
|
|
84
|
-
expect(select.getAttribute("value")).toBe("30d");
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
it("opens and closes modal via attributes and methods", () => {
|
|
88
|
-
const modal = document.createElement("viking-modal-wc");
|
|
89
|
-
modal.setAttribute("title", "Confirm");
|
|
90
|
-
document.body.append(modal);
|
|
91
|
-
|
|
92
|
-
modal.openModal();
|
|
93
|
-
expect(modal.hasAttribute("open")).toBe(true);
|
|
94
|
-
|
|
95
|
-
modal.closeModal();
|
|
96
|
-
expect(modal.hasAttribute("open")).toBe(false);
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
it("filters command palette items and supports keyboard selection", async () => {
|
|
100
|
-
const palette = document.createElement("viking-command-palette");
|
|
101
|
-
palette.setAttribute(
|
|
102
|
-
"items",
|
|
103
|
-
JSON.stringify([
|
|
104
|
-
{
|
|
105
|
-
title: "Components",
|
|
106
|
-
href: "/components",
|
|
107
|
-
group: "Docs",
|
|
108
|
-
keywords: ["primitives"],
|
|
109
|
-
},
|
|
110
|
-
{ title: "Theming", href: "/theming", group: "Docs" },
|
|
111
|
-
]),
|
|
112
|
-
);
|
|
113
|
-
document.body.append(palette);
|
|
114
|
-
|
|
115
|
-
palette.openPalette();
|
|
116
|
-
await Promise.resolve();
|
|
117
|
-
expect(
|
|
118
|
-
palette.shadowRoot?.querySelectorAll(".viking-search-result").length,
|
|
119
|
-
).toBe(2);
|
|
120
|
-
|
|
121
|
-
const input = palette.shadowRoot?.querySelector("input");
|
|
122
|
-
expect(input?.getAttribute("aria-controls")).toMatch(
|
|
123
|
-
/^viking-search-results-/,
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
palette.search("primitives");
|
|
127
|
-
await Promise.resolve();
|
|
128
|
-
|
|
129
|
-
const results = palette.shadowRoot?.querySelectorAll(
|
|
130
|
-
".viking-search-result",
|
|
131
|
-
);
|
|
132
|
-
expect(results?.length).toBe(1);
|
|
133
|
-
expect(results?.[0]?.textContent).toContain("Components");
|
|
134
|
-
|
|
135
|
-
input?.dispatchEvent(
|
|
136
|
-
new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
|
|
137
|
-
);
|
|
138
|
-
expect(palette.hasAttribute("open")).toBe(false);
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
it("closes command palette from close button, Escape key, and outside click", async () => {
|
|
142
|
-
const palette = document.createElement("viking-command-palette");
|
|
143
|
-
palette.setAttribute(
|
|
144
|
-
"items",
|
|
145
|
-
JSON.stringify([{ title: "Docs", href: "/docs" }]),
|
|
146
|
-
);
|
|
147
|
-
document.body.append(palette);
|
|
148
|
-
|
|
149
|
-
palette.openPalette();
|
|
150
|
-
await Promise.resolve();
|
|
151
|
-
palette.shadowRoot
|
|
152
|
-
?.querySelector<HTMLButtonElement>(".viking-search-palette-close")
|
|
153
|
-
?.click();
|
|
154
|
-
expect(palette.hasAttribute("open")).toBe(false);
|
|
155
|
-
|
|
156
|
-
palette.openPalette();
|
|
157
|
-
await Promise.resolve();
|
|
158
|
-
palette.shadowRoot
|
|
159
|
-
?.querySelector("input")
|
|
160
|
-
?.dispatchEvent(
|
|
161
|
-
new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
|
|
162
|
-
);
|
|
163
|
-
expect(palette.hasAttribute("open")).toBe(false);
|
|
164
|
-
|
|
165
|
-
palette.openPalette();
|
|
166
|
-
await Promise.resolve();
|
|
167
|
-
const dialog = palette.shadowRoot?.querySelector("dialog");
|
|
168
|
-
dialog?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
169
|
-
expect(palette.hasAttribute("open")).toBe(false);
|
|
170
|
-
});
|
|
171
|
-
|
|
172
|
-
it("registers command palette aliases for legacy and semantic tags", () => {
|
|
173
|
-
expect(customElements.get("viking-command-palette")).toBeTruthy();
|
|
174
|
-
expect(customElements.get("viking-search-palette")).toBeTruthy();
|
|
175
|
-
expect(customElements.get("viking-search-palette-wc")).toBeTruthy();
|
|
176
|
-
expect(customElements.get("viking-suite-command-palette")).toBeTruthy();
|
|
177
|
-
expect(customElements.get("viking-suite-search-palette")).toBeTruthy();
|
|
178
|
-
expect(customElements.get("viking-suite-search-palette-wc")).toBeTruthy();
|
|
179
|
-
expect(customElements.get("viking-suite-header")).toBeTruthy();
|
|
180
|
-
});
|
|
181
|
-
|
|
182
|
-
it("toggles open state with the global shortcut handler", async () => {
|
|
183
|
-
const palette = document.createElement("viking-command-palette");
|
|
184
|
-
palette.setAttribute("global-shortcut", "");
|
|
185
|
-
palette.setAttribute(
|
|
186
|
-
"items",
|
|
187
|
-
JSON.stringify([{ title: "Docs", href: "/docs" }]),
|
|
188
|
-
);
|
|
189
|
-
document.body.append(palette);
|
|
190
|
-
|
|
191
|
-
document.dispatchEvent(
|
|
192
|
-
new KeyboardEvent("keydown", {
|
|
193
|
-
key: "k",
|
|
194
|
-
metaKey: true,
|
|
195
|
-
bubbles: true,
|
|
196
|
-
cancelable: true,
|
|
197
|
-
}),
|
|
198
|
-
);
|
|
199
|
-
await Promise.resolve();
|
|
200
|
-
expect(palette.hasAttribute("open")).toBe(true);
|
|
201
|
-
|
|
202
|
-
document.dispatchEvent(
|
|
203
|
-
new KeyboardEvent("keydown", {
|
|
204
|
-
key: "k",
|
|
205
|
-
metaKey: true,
|
|
206
|
-
bubbles: true,
|
|
207
|
-
cancelable: true,
|
|
208
|
-
}),
|
|
209
|
-
);
|
|
210
|
-
await Promise.resolve();
|
|
211
|
-
expect(palette.hasAttribute("open")).toBe(false);
|
|
212
|
-
});
|
|
213
|
-
|
|
214
|
-
it("mounts suite palette with curated items and openPalette()", async () => {
|
|
215
|
-
document.documentElement.setAttribute("data-deml-context", "marketing");
|
|
216
|
-
const suite = document.createElement("viking-suite-command-palette");
|
|
217
|
-
document.body.append(suite);
|
|
218
|
-
|
|
219
|
-
await Promise.resolve();
|
|
220
|
-
await Promise.resolve();
|
|
221
|
-
|
|
222
|
-
suite.openPalette();
|
|
223
|
-
await Promise.resolve();
|
|
224
|
-
|
|
225
|
-
const inner = suite.querySelector("viking-command-palette");
|
|
226
|
-
expect(inner?.hasAttribute("open")).toBe(true);
|
|
227
|
-
|
|
228
|
-
const itemsRaw = inner?.getAttribute("items") ?? "[]";
|
|
229
|
-
const items = JSON.parse(itemsRaw) as { title: string }[];
|
|
230
|
-
const titles = items.map((item) => item.title);
|
|
231
|
-
expect(titles).toContain("Documentation");
|
|
232
|
-
expect(titles).toContain("Privacy Policy");
|
|
233
|
-
expect(titles).toContain("Whitepaper");
|
|
234
|
-
});
|
|
235
|
-
|
|
236
|
-
it("renders the suite header with shared navigation and opens search", async () => {
|
|
237
|
-
const header = document.createElement("viking-suite-header");
|
|
238
|
-
header.setAttribute("context", "marketing");
|
|
239
|
-
document.body.append(header);
|
|
240
|
-
|
|
241
|
-
await Promise.resolve();
|
|
242
|
-
await Promise.resolve();
|
|
243
|
-
|
|
244
|
-
expect(
|
|
245
|
-
header.shadowRoot?.querySelector(".suite-header__brand"),
|
|
246
|
-
).toBeTruthy();
|
|
247
|
-
expect(header.shadowRoot?.textContent).toContain("Explore");
|
|
248
|
-
expect(header.shadowRoot?.textContent).toContain("Documentation");
|
|
249
|
-
expect(header.shadowRoot?.textContent).toContain("Sign In");
|
|
250
|
-
expect(
|
|
251
|
-
header.shadowRoot?.querySelector("viking-theme-toggle-wc"),
|
|
252
|
-
).toBeTruthy();
|
|
253
|
-
|
|
254
|
-
let opened = false;
|
|
255
|
-
header.addEventListener("viking-search-open", () => {
|
|
256
|
-
opened = true;
|
|
257
|
-
});
|
|
258
|
-
header.shadowRoot
|
|
259
|
-
?.querySelector<HTMLButtonElement>("[data-search-trigger]")
|
|
260
|
-
?.click();
|
|
261
|
-
await Promise.resolve();
|
|
262
|
-
|
|
263
|
-
const palette = header.shadowRoot?.querySelector(
|
|
264
|
-
"viking-suite-command-palette",
|
|
265
|
-
);
|
|
266
|
-
const commandPalette = palette?.querySelector("viking-command-palette");
|
|
267
|
-
expect(opened).toBe(true);
|
|
268
|
-
expect(commandPalette?.hasAttribute("open")).toBe(true);
|
|
269
|
-
});
|
|
270
|
-
|
|
271
|
-
it("renders authenticated suite header menu actions", () => {
|
|
272
|
-
const header = document.createElement("viking-suite-header");
|
|
273
|
-
header.setAttribute("authenticated", "");
|
|
274
|
-
header.setAttribute("user-name", "Ada Lovelace");
|
|
275
|
-
document.body.append(header);
|
|
276
|
-
|
|
277
|
-
expect(header.shadowRoot?.textContent).toContain("Ada Lovelace");
|
|
278
|
-
|
|
279
|
-
header.shadowRoot
|
|
280
|
-
?.querySelector<HTMLButtonElement>("[data-user-toggle]")
|
|
281
|
-
?.click();
|
|
282
|
-
expect(
|
|
283
|
-
header.shadowRoot
|
|
284
|
-
?.querySelector(".suite-header__user")
|
|
285
|
-
?.getAttribute("data-open"),
|
|
286
|
-
).toBe("true");
|
|
287
|
-
|
|
288
|
-
let signedOut = false;
|
|
289
|
-
header.addEventListener("viking-sign-out", () => {
|
|
290
|
-
signedOut = true;
|
|
291
|
-
});
|
|
292
|
-
header.shadowRoot
|
|
293
|
-
?.querySelector<HTMLButtonElement>("[data-sign-out]")
|
|
294
|
-
?.click();
|
|
295
|
-
expect(signedOut).toBe(true);
|
|
296
|
-
});
|
|
297
|
-
});
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Viking-UI">
|
|
2
|
-
<rect width="32" height="32" rx="6" fill="#111111"/>
|
|
3
|
-
<g
|
|
4
|
-
transform="translate(4, 4)"
|
|
5
|
-
fill="none"
|
|
6
|
-
stroke="#0d7377"
|
|
7
|
-
stroke-width="1.75"
|
|
8
|
-
stroke-linecap="round"
|
|
9
|
-
stroke-linejoin="round"
|
|
10
|
-
>
|
|
11
|
-
<path d="M12 10.189V14"/>
|
|
12
|
-
<path d="M12 2v3"/>
|
|
13
|
-
<path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/>
|
|
14
|
-
<path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/>
|
|
15
|
-
<path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
|
|
16
|
-
</g>
|
|
17
|
-
</svg>
|
|
Binary file
|
|
Binary file
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
|
|
2
|
-
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
|
3
|
-
<path d="M7 17V13M11 17V8M15 17V11"/>
|
|
4
|
-
<path d="M2 20h20"/>
|
|
5
|
-
</svg>
|
package/src/core/brand-icons.ts
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* DEML branded icon paths — optimized SVG geometry (not sourced from Lucide).
|
|
3
|
-
* Use via viking-icon name="deml" | "deml-compact" | "deml-lockup".
|
|
4
|
-
*/
|
|
5
|
-
export const VIKING_BRAND_ICON_PATHS = {
|
|
6
|
-
/** Primary bar-chart mark in rounded frame (outline). */
|
|
7
|
-
deml: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/>',
|
|
8
|
-
/** Compact monogram for favicons and dense Drakkar shell. */
|
|
9
|
-
"deml-compact":
|
|
10
|
-
'<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M9 16V12M12 16V9M15 16V13"/>',
|
|
11
|
-
/** Lockup mark with baseline accent bar. */
|
|
12
|
-
"deml-lockup":
|
|
13
|
-
'<rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/><path d="M3 20h18"/>',
|
|
14
|
-
} as const;
|
|
15
|
-
|
|
16
|
-
/** Drakkar — Viking-UI / site shell brand marks (Lucide ship, build-time inlined). */
|
|
17
|
-
export const VIKING_DRAKKAR_ICON_PATHS = {
|
|
18
|
-
/** Primary Drakkar longship mark (outline). */
|
|
19
|
-
drakkar:
|
|
20
|
-
'<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
|
|
21
|
-
/** Compact tile for favicons and dense navbar chrome. */
|
|
22
|
-
"drakkar-compact":
|
|
23
|
-
'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
|
|
24
|
-
/** Lockup mark with baseline accent bar. */
|
|
25
|
-
"drakkar-lockup":
|
|
26
|
-
'<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M3 21h18"/>',
|
|
27
|
-
} as const;
|
|
28
|
-
|
|
29
|
-
/** Filled-path overrides for DEML brand marks. */
|
|
30
|
-
export const VIKING_BRAND_ICON_FILLED_PATHS: Partial<
|
|
31
|
-
Record<keyof typeof VIKING_BRAND_ICON_PATHS, string>
|
|
32
|
-
> = {
|
|
33
|
-
deml: '<path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/>',
|
|
34
|
-
"deml-compact":
|
|
35
|
-
'<path d="M6 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5zM9 12h1.5v4H9v-4zM12 9h1.5v7H12V9zM15 11h1.5v5H15v-5z"/>',
|
|
36
|
-
"deml-lockup":
|
|
37
|
-
'<path d="M4 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/><rect x="3" y="19" width="18" height="2" rx="1"/>',
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
/** Filled-path overrides for Drakkar brand marks. */
|
|
41
|
-
export const VIKING_DRAKKAR_ICON_FILLED_PATHS: Partial<
|
|
42
|
-
Record<keyof typeof VIKING_DRAKKAR_ICON_PATHS, string>
|
|
43
|
-
> = {
|
|
44
|
-
drakkar:
|
|
45
|
-
'<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/>',
|
|
46
|
-
"drakkar-compact":
|
|
47
|
-
'<path d="M3 3h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M7.5 12.5 12 9.8l4.5 2.7v2.2c0 .8-.5 1.4-1.2 1.7L12 17.8l-3.3-1.6c-.7-.3-1.2-.9-1.2-1.7v-2.2z"/><rect x="11" y="6" width="2" height="5.5" rx="0.35"/>',
|
|
48
|
-
"drakkar-lockup":
|
|
49
|
-
'<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/><rect x="3" y="20" width="18" height="2" rx="1"/>',
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export type VikingBrandIconName = keyof typeof VIKING_BRAND_ICON_PATHS;
|
|
53
|
-
|
|
54
|
-
export type VikingDrakkarIconName = keyof typeof VIKING_DRAKKAR_ICON_PATHS;
|
|
55
|
-
|
|
56
|
-
export const VIKING_BRAND_ICON_NAMES_LIST = Object.keys(
|
|
57
|
-
VIKING_BRAND_ICON_PATHS,
|
|
58
|
-
) as VikingBrandIconName[];
|
|
59
|
-
|
|
60
|
-
export const VIKING_DRAKKAR_ICON_NAMES_LIST = Object.keys(
|
|
61
|
-
VIKING_DRAKKAR_ICON_PATHS,
|
|
62
|
-
) as VikingDrakkarIconName[];
|
package/src/core/icons.spec.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from "vitest";
|
|
2
|
-
import {
|
|
3
|
-
MATERIAL_ICON_ALIASES,
|
|
4
|
-
VIKING_ICON_PATHS,
|
|
5
|
-
resolveVikingIcon,
|
|
6
|
-
resolveVikingIconColor,
|
|
7
|
-
resolveVikingIconSize,
|
|
8
|
-
vikingIconViewBox,
|
|
9
|
-
} from "./icons";
|
|
10
|
-
|
|
11
|
-
describe("icons registry", () => {
|
|
12
|
-
it("resolves direct icon names case-insensitively", () => {
|
|
13
|
-
expect(resolveVikingIcon("search")).toBe("search");
|
|
14
|
-
expect(resolveVikingIcon("Shield")).toBe("shield");
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
it("maps legacy Material icon ligatures to Viking keys", () => {
|
|
18
|
-
expect(resolveVikingIcon("trending_up")).toBe("trending-up");
|
|
19
|
-
expect(resolveVikingIcon("verified_user")).toBe("user-shield");
|
|
20
|
-
expect(MATERIAL_ICON_ALIASES["rocket_launch"]).toBe("rocket");
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
it("falls back to info for unknown names", () => {
|
|
24
|
-
expect(resolveVikingIcon("does-not-exist")).toBe("info");
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it("resolves size presets to pixel dimensions", () => {
|
|
28
|
-
expect(resolveVikingIconSize(undefined, "sm")).toBe(16);
|
|
29
|
-
expect(resolveVikingIconSize(undefined, "md")).toBe(20);
|
|
30
|
-
expect(resolveVikingIconSize(undefined, "lg")).toBe(24);
|
|
31
|
-
expect(resolveVikingIconSize(28, null)).toBe(28);
|
|
32
|
-
expect(resolveVikingIconSize(undefined, null)).toBe(24);
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
it("maps semantic color tokens to CSS custom properties", () => {
|
|
36
|
-
expect(resolveVikingIconColor("accent")).toBe("var(--viking-accent)");
|
|
37
|
-
expect(resolveVikingIconColor("danger")).toBe("var(--viking-danger)");
|
|
38
|
-
expect(resolveVikingIconColor("inherit")).toBeUndefined();
|
|
39
|
-
expect(resolveVikingIconColor("var(--custom)")).toBe("var(--custom)");
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
it("uses a consistent 24×24 viewBox for registry icons", () => {
|
|
43
|
-
expect(vikingIconViewBox("check")).toBe("0 0 24 24");
|
|
44
|
-
expect(vikingIconViewBox("drakkar")).toBe("0 0 24 24");
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it("registers core Lucide and brand icons", () => {
|
|
48
|
-
expect(VIKING_ICON_PATHS["search"]).toBeTruthy();
|
|
49
|
-
expect(VIKING_ICON_PATHS["drakkar"]).toBeTruthy();
|
|
50
|
-
expect(VIKING_ICON_PATHS["deml"]).toBeTruthy();
|
|
51
|
-
});
|
|
52
|
-
});
|
package/src/core/icons.ts
DELETED
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Zero-dependency inline SVG icon registry (24×24 stroke icons).
|
|
3
|
-
* Lucide paths are synced at build time; DEML brand marks are custom artwork.
|
|
4
|
-
*/
|
|
5
|
-
import { LUCIDE_ICON_PATHS } from "./lucide-paths.generated";
|
|
6
|
-
import {
|
|
7
|
-
VIKING_BRAND_ICON_FILLED_PATHS,
|
|
8
|
-
VIKING_BRAND_ICON_PATHS,
|
|
9
|
-
VIKING_BRAND_ICON_NAMES_LIST,
|
|
10
|
-
VIKING_DRAKKAR_ICON_FILLED_PATHS,
|
|
11
|
-
VIKING_DRAKKAR_ICON_PATHS,
|
|
12
|
-
VIKING_DRAKKAR_ICON_NAMES_LIST,
|
|
13
|
-
} from "./brand-icons";
|
|
14
|
-
import {
|
|
15
|
-
VIKING_INTEGRATION_ICON_PATHS,
|
|
16
|
-
VIKING_INTEGRATION_ICON_NAMES_LIST,
|
|
17
|
-
} from "./integration-brand-icons";
|
|
18
|
-
|
|
19
|
-
export {
|
|
20
|
-
VIKING_DRAKKAR_ICON_NAMES_LIST,
|
|
21
|
-
VIKING_BRAND_ICON_NAMES_LIST,
|
|
22
|
-
} from "./brand-icons";
|
|
23
|
-
export {
|
|
24
|
-
VIKING_INTEGRATION_ICON_NAMES_LIST,
|
|
25
|
-
type VikingIntegrationIconName,
|
|
26
|
-
} from "./integration-brand-icons";
|
|
27
|
-
|
|
28
|
-
export type VikingIconName = keyof typeof VIKING_ICON_PATHS;
|
|
29
|
-
|
|
30
|
-
export type VikingIconSizePreset = "sm" | "md" | "lg";
|
|
31
|
-
|
|
32
|
-
export type VikingIconVariant = "outline" | "filled";
|
|
33
|
-
|
|
34
|
-
/** Semantic color tokens resolved to CSS custom properties. */
|
|
35
|
-
export type VikingIconColorToken =
|
|
36
|
-
| "inherit"
|
|
37
|
-
| "accent"
|
|
38
|
-
| "success"
|
|
39
|
-
| "warning"
|
|
40
|
-
| "danger"
|
|
41
|
-
| "info"
|
|
42
|
-
| "muted"
|
|
43
|
-
| "text";
|
|
44
|
-
|
|
45
|
-
/** Pixel sizes for sm / md / lg presets. */
|
|
46
|
-
export const VIKING_ICON_SIZE_PRESETS: Record<VikingIconSizePreset, number> = {
|
|
47
|
-
sm: 16,
|
|
48
|
-
md: 20,
|
|
49
|
-
lg: 24,
|
|
50
|
-
} as const;
|
|
51
|
-
|
|
52
|
-
/** Custom icons not covered by Lucide (hub topology, ML model tile, OAuth stubs). */
|
|
53
|
-
const VIKING_CUSTOM_ICON_PATHS = {
|
|
54
|
-
hub: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/>',
|
|
55
|
-
model:
|
|
56
|
-
'<rect x="4" y="8" width="16" height="10" rx="2"/><path d="M8 8V6a4 4 0 0 1 8 0v2"/>',
|
|
57
|
-
google:
|
|
58
|
-
'<path d="M12 11.2v2.4h6.6c-.3 1.5-1.8 4.4-6.6 4.4-4 0-7.2-3.3-7.2-7.3S8 3.4 12 3.4c2.3 0 3.9 1 4.8 1.8l3.2-3.1C17.5.8 14.9 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.8 11.5-11.6 0-.8-.1-1.4-.2-1.9H12z"/>',
|
|
59
|
-
apple:
|
|
60
|
-
'<path d="M16.365 12.14c.02 2.53 2.21 3.38 2.23 3.39-.02.07-.35 1.21-1.16 2.4-.7 1.02-1.43 2.03-2.58 2.05-1.13.02-1.49-.67-2.78-.67-1.29 0-1.69.65-2.75.69-1.11.04-1.95-1.12-2.66-2.13-1.44-2.08-2.54-5.87-1.07-8.43.73-1.27 2.04-2.08 3.46-2.1 1.08-.02 2.1.72 2.78.72.67 0 2.14-.89 3.61-.76.61.03 2.33.25 3.44 1.88-.09.06-2.05 1.2-2.03 3.55M13.75 3.64c.59-.71 1-1.7.89-2.68-.86.03-1.9.57-2.52 1.28-.55.63-1.03 1.65-.9 2.62.95.07 1.92-.49 2.53-1.22"/>',
|
|
61
|
-
} as const;
|
|
62
|
-
|
|
63
|
-
export const VIKING_ICON_PATHS = {
|
|
64
|
-
...LUCIDE_ICON_PATHS,
|
|
65
|
-
...VIKING_BRAND_ICON_PATHS,
|
|
66
|
-
...VIKING_DRAKKAR_ICON_PATHS,
|
|
67
|
-
...VIKING_INTEGRATION_ICON_PATHS,
|
|
68
|
-
...VIKING_CUSTOM_ICON_PATHS,
|
|
69
|
-
} as const;
|
|
70
|
-
|
|
71
|
-
/** Filled-path overrides used when variant="filled" (brand marks, solid shapes). */
|
|
72
|
-
export const VIKING_ICON_FILLED_PATHS: Partial<Record<VikingIconName, string>> =
|
|
73
|
-
{
|
|
74
|
-
...VIKING_BRAND_ICON_FILLED_PATHS,
|
|
75
|
-
...VIKING_DRAKKAR_ICON_FILLED_PATHS,
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
/** Legacy Material Icons ligature names → Viking icon registry keys. */
|
|
79
|
-
export const MATERIAL_ICON_ALIASES: Record<string, VikingIconName> = {
|
|
80
|
-
analytics: "deml",
|
|
81
|
-
security: "shield",
|
|
82
|
-
link: "link",
|
|
83
|
-
visibility: "eye",
|
|
84
|
-
shield: "shield",
|
|
85
|
-
trending_up: "trending-up",
|
|
86
|
-
lock: "lock",
|
|
87
|
-
fingerprint: "fingerprint",
|
|
88
|
-
gpp_maybe: "shield",
|
|
89
|
-
verified_user: "user-shield",
|
|
90
|
-
bolt: "bolt",
|
|
91
|
-
cloud: "cloud",
|
|
92
|
-
lan: "network",
|
|
93
|
-
hub: "hub",
|
|
94
|
-
speed: "speed",
|
|
95
|
-
rocket_launch: "rocket",
|
|
96
|
-
insights: "insights",
|
|
97
|
-
check: "check",
|
|
98
|
-
description: "file",
|
|
99
|
-
vpn_key: "key",
|
|
100
|
-
policy: "policy",
|
|
101
|
-
bug_report: "bug",
|
|
102
|
-
search: "search",
|
|
103
|
-
chevron_left: "chevron-left",
|
|
104
|
-
chevron_right: "chevron-right",
|
|
105
|
-
verified: "check-circle",
|
|
106
|
-
warning: "alert-triangle",
|
|
107
|
-
close: "x",
|
|
108
|
-
account_balance: "building",
|
|
109
|
-
send: "send",
|
|
110
|
-
check_circle: "check-circle",
|
|
111
|
-
play_circle: "play",
|
|
112
|
-
input: "terminal",
|
|
113
|
-
model_training: "model",
|
|
114
|
-
auto_awesome: "sparkle",
|
|
115
|
-
error_outline: "alert-circle",
|
|
116
|
-
home: "home",
|
|
117
|
-
cookie: "cookie",
|
|
118
|
-
search_off: "search-off",
|
|
119
|
-
person_add: "user",
|
|
120
|
-
storage: "aws-redshift",
|
|
121
|
-
data_object: "aws-redshift",
|
|
122
|
-
memory: "tensorflow",
|
|
123
|
-
psychology: "pytorch",
|
|
124
|
-
dns: "server",
|
|
125
|
-
login: "log-in",
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
/** Icons always rendered with fill (play triangle, dot grids). */
|
|
129
|
-
export const VIKING_FILLED_ICON_NAMES = [
|
|
130
|
-
"play",
|
|
131
|
-
"dots-horizontal",
|
|
132
|
-
"dots-vertical",
|
|
133
|
-
"grip-vertical",
|
|
134
|
-
] as const satisfies readonly VikingIconName[];
|
|
135
|
-
|
|
136
|
-
/** OAuth / vendor marks rendered with official brand artwork in viking-icon. */
|
|
137
|
-
export const VIKING_BRAND_ICON_NAMES = [
|
|
138
|
-
"google",
|
|
139
|
-
"apple",
|
|
140
|
-
...VIKING_BRAND_ICON_NAMES_LIST,
|
|
141
|
-
] as const satisfies readonly VikingIconName[];
|
|
142
|
-
|
|
143
|
-
const VIKING_ICON_COLOR_TOKENS: Record<
|
|
144
|
-
Exclude<VikingIconColorToken, "inherit">,
|
|
145
|
-
string
|
|
146
|
-
> = {
|
|
147
|
-
accent: "var(--viking-accent)",
|
|
148
|
-
success: "var(--viking-success)",
|
|
149
|
-
warning: "var(--viking-warning)",
|
|
150
|
-
danger: "var(--viking-danger)",
|
|
151
|
-
info: "var(--viking-info)",
|
|
152
|
-
muted: "var(--viking-text-muted)",
|
|
153
|
-
text: "var(--viking-text)",
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
export const vikingIconViewBox = (_name: VikingIconName): string => "0 0 24 24";
|
|
157
|
-
|
|
158
|
-
/** Resolve pixel size from preset or explicit value. */
|
|
159
|
-
export const resolveVikingIconSize = (
|
|
160
|
-
size: number | undefined,
|
|
161
|
-
preset: VikingIconSizePreset | null | undefined,
|
|
162
|
-
): number => {
|
|
163
|
-
if (preset) {
|
|
164
|
-
return VIKING_ICON_SIZE_PRESETS[preset];
|
|
165
|
-
}
|
|
166
|
-
return size ?? VIKING_ICON_SIZE_PRESETS.lg;
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
/** Resolve semantic color token or raw CSS value for icon tinting. */
|
|
170
|
-
export const resolveVikingIconColor = (
|
|
171
|
-
color: VikingIconColorToken | string | undefined,
|
|
172
|
-
): string | undefined => {
|
|
173
|
-
if (!color || color === "inherit") {
|
|
174
|
-
return undefined;
|
|
175
|
-
}
|
|
176
|
-
if (color in VIKING_ICON_COLOR_TOKENS) {
|
|
177
|
-
return VIKING_ICON_COLOR_TOKENS[
|
|
178
|
-
color as Exclude<VikingIconColorToken, "inherit">
|
|
179
|
-
];
|
|
180
|
-
}
|
|
181
|
-
return color;
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
const VIKING_ICON_PATH_KEYS = new Set(Object.keys(VIKING_ICON_PATHS));
|
|
185
|
-
|
|
186
|
-
/** Resolve a Viking or legacy Material icon name to a registry key. */
|
|
187
|
-
export const resolveVikingIcon = (name: string): VikingIconName => {
|
|
188
|
-
const normalized = name.trim().toLowerCase().replace(/\s+/g, "_");
|
|
189
|
-
if (VIKING_ICON_PATH_KEYS.has(normalized)) {
|
|
190
|
-
return normalized as VikingIconName;
|
|
191
|
-
}
|
|
192
|
-
const alias = MATERIAL_ICON_ALIASES[normalized];
|
|
193
|
-
if (alias) {
|
|
194
|
-
return alias;
|
|
195
|
-
}
|
|
196
|
-
return "info";
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
export const VIKING_ICON_NAMES = Object.keys(
|
|
200
|
-
VIKING_ICON_PATHS,
|
|
201
|
-
) as VikingIconName[];
|
|
202
|
-
|
|
203
|
-
/** Lucide-sourced icon names (for docs and showcase grouping). */
|
|
204
|
-
export const VIKING_LUCIDE_ICON_NAMES = Object.keys(
|
|
205
|
-
LUCIDE_ICON_PATHS,
|
|
206
|
-
) as (keyof typeof LUCIDE_ICON_PATHS)[];
|