All files / packages/design-system-2/scripts/plugins lbc-selector-map.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * LBC Selector Map
 *
 * Static mapping from SLDS root CSS class selectors to their corresponding
 * Lightning Base Component (LBC) custom element host selectors.
 *
 * Used by postcss-lbc-theme to generate host duplication + inner reset rules
 * for synthetic shadow DOM compatibility (RFC 1157).
 *
 * Only uplifted components (those with themes/ files) are included. Expand as
 * components are migrated to the theme layer architecture.
 *
 * Structure:
 *   Key   — SLDS root class (e.g. ".slds-button_neutral")
 *   Value — LBC host selector (e.g. "lightning-button[variant='neutral']")
 *
 * A validation test (lbcSelectorMap.test.js) checks this map against the
 * lightning-base-components package to flag missing or stale entries.
 */
 
const LBC_SELECTOR_MAP = new Map([
  // ── Accordion ───────────────────────────────────────────────────────────────
  ['.slds-accordion', 'lightning-accordion'],
 
  // ── Alert ───────────────────────────────────────────────────────────────────
  ['.slds-notify_alert', 'lightning-alert'],
  ['.slds-alert_warning', 'lightning-alert[variant="warning"]'],
  ['.slds-alert_error', 'lightning-alert[variant="error"]'],
  ['.slds-alert_offline', 'lightning-alert[variant="offline"]'],
 
  // ── Avatar ──────────────────────────────────────────────────────────────────
  ['.slds-avatar', 'lightning-avatar'],
 
  // ── Avatar Group ────────────────────────────────────────────────────────────
  ['.slds-avatar-group', 'lightning-avatar-group'],
 
  // ── Badge ───────────────────────────────────────────────────────────────────
  ['.slds-badge', 'lightning-badge'],
 
  // ── Breadcrumbs ─────────────────────────────────────────────────────────────
  ['.slds-breadcrumb', 'lightning-breadcrumbs'],
 
  // ── Button ──────────────────────────────────────────────────────────────────
  ['.slds-button', 'lightning-button'],
  ['.slds-button_neutral', "lightning-button[variant='neutral']"],
  ['.slds-button_brand', "lightning-button[variant='brand']"],
  ['.slds-button_outline-brand', "lightning-button[variant='brand-outline']"],
  ['.slds-button_destructive', "lightning-button[variant='destructive']"],
  ['.slds-button_text-destructive', "lightning-button[variant='destructive-text']"],
  ['.slds-button_inverse', "lightning-button[variant='inverse']"],
  ['.slds-button_success', "lightning-button[variant='success']"],
 
  // ── Button Dual Stateful ────────────────────────────────────────────────────
  ['.slds-button_dual-stateful', 'lightning-button-stateful'],
 
  // ── Button Icon ─────────────────────────────────────────────────────────────
  ['.slds-button_icon', 'lightning-button-icon'],
  ['.slds-button_icon-brand', "lightning-button-icon[variant='brand']"],
  ['.slds-button_icon-inverse', "lightning-button-icon[variant='bare-inverse']"],
  ['.slds-button_icon-border', "lightning-button-icon[variant='border']"],
  ['.slds-button_icon-border-filled', "lightning-button-icon[variant='border-filled']"],
  ['.slds-button_icon-border-inverse', "lightning-button-icon[variant='border-inverse']"],
  ['.slds-button_icon-container', "lightning-button-icon[variant='container']"],
  ['.slds-button_icon-bare', "lightning-button-icon[variant='bare']"],
  ['.slds-button_icon-error', "lightning-button-icon[variant='border']"],
  ['.slds-button_icon-more', "lightning-button-icon[variant='border']"],
 
  // ── Button Stateful ─────────────────────────────────────────────────────────
  ['.slds-button_stateful', 'lightning-button-stateful'],
 
  // ── Card ────────────────────────────────────────────────────────────────────
  ['.slds-card', 'lightning-card'],
 
  // ── Carousel ────────────────────────────────────────────────────────────────
  ['.slds-carousel', 'lightning-carousel'],
 
  // ── Color Picker ────────────────────────────────────────────────────────────
  ['.slds-color-picker', 'lightning-color-picker-panel'],
 
  // ── Icon ────────────────────────────────────────────────────────────────────
  ['.slds-icon_container', 'lightning-icon'],
 
  // ── Progress Bar ────────────────────────────────────────────────────────────
  ['.slds-progress-bar', 'lightning-progress-bar'],
 
  // ── Progress Indicator ──────────────────────────────────────────────────────
  ['.slds-progress', 'lightning-progress-indicator'],
 
  // ── Slider ──────────────────────────────────────────────────────────────────
  ['.slds-slider', 'lightning-slider'],
 
  // ── Tabs ────────────────────────────────────────────────────────────────────
  ['.slds-tabs_default', 'lightning-tabset'],
  ['.slds-tabs_scoped', 'lightning-tabset[variant="scoped"]'],
  ['.slds-vertical-tabs', 'lightning-tabset[variant="vertical"]'],
 
  // ── Toast ───────────────────────────────────────────────────────────────────
  ['.slds-notify_toast', 'lightning-toast'],
]);
 
export default LBC_SELECTOR_MAP;