@oicl/openbridge-webcomponents 2.0.0-next.170 → 2.0.0-next.172

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.
Files changed (100) hide show
  1. package/bundle/openbridge-webcomponents.bundle.js +974 -511
  2. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  3. package/custom-elements.json +1853 -377
  4. package/dist/ar/poi/poi-aton.d.ts +1 -0
  5. package/dist/ar/poi/poi-aton.d.ts.map +1 -1
  6. package/dist/ar/poi/poi-aton.js +1 -0
  7. package/dist/ar/poi/poi-aton.js.map +1 -1
  8. package/dist/ar/poi/poi-base.d.ts +39 -5
  9. package/dist/ar/poi/poi-base.d.ts.map +1 -1
  10. package/dist/ar/poi/poi-base.js +108 -37
  11. package/dist/ar/poi/poi-base.js.map +1 -1
  12. package/dist/ar/poi/poi-data.d.ts +1 -0
  13. package/dist/ar/poi/poi-data.d.ts.map +1 -1
  14. package/dist/ar/poi/poi-data.js +1 -0
  15. package/dist/ar/poi/poi-data.js.map +1 -1
  16. package/dist/ar/poi/poi-vessel.d.ts +1 -0
  17. package/dist/ar/poi/poi-vessel.d.ts.map +1 -1
  18. package/dist/ar/poi/poi-vessel.js +1 -0
  19. package/dist/ar/poi/poi-vessel.js.map +1 -1
  20. package/dist/ar/poi/poi.d.ts +4 -12
  21. package/dist/ar/poi/poi.d.ts.map +1 -1
  22. package/dist/ar/poi/poi.js +6 -72
  23. package/dist/ar/poi/poi.js.map +1 -1
  24. package/dist/ar/poi-button/poi-button.d.ts +6 -2
  25. package/dist/ar/poi-button/poi-button.d.ts.map +1 -1
  26. package/dist/ar/poi-button/poi-button.js +10 -1
  27. package/dist/ar/poi-button/poi-button.js.map +1 -1
  28. package/dist/ar/poi-card/poi-card.d.ts +12 -1
  29. package/dist/ar/poi-card/poi-card.d.ts.map +1 -1
  30. package/dist/ar/poi-card/poi-card.js +4 -1
  31. package/dist/ar/poi-card/poi-card.js.map +1 -1
  32. package/dist/ar/poi-controller/poi-controller.d.ts +45 -1
  33. package/dist/ar/poi-controller/poi-controller.d.ts.map +1 -1
  34. package/dist/ar/poi-controller/poi-controller.js +72 -14
  35. package/dist/ar/poi-controller/poi-controller.js.map +1 -1
  36. package/dist/ar/poi-group/poi-group.d.ts +28 -5
  37. package/dist/ar/poi-group/poi-group.d.ts.map +1 -1
  38. package/dist/ar/poi-group/poi-group.js +50 -7
  39. package/dist/ar/poi-group/poi-group.js.map +1 -1
  40. package/dist/ar/poi-layer/poi-layer.css.js +69 -18
  41. package/dist/ar/poi-layer/poi-layer.css.js.map +1 -1
  42. package/dist/ar/poi-layer/poi-layer.d.ts +64 -5
  43. package/dist/ar/poi-layer/poi-layer.d.ts.map +1 -1
  44. package/dist/ar/poi-layer/poi-layer.js +173 -39
  45. package/dist/ar/poi-layer/poi-layer.js.map +1 -1
  46. package/dist/ar/poi-layer-stack/poi-layer-stack.d.ts +82 -7
  47. package/dist/ar/poi-layer-stack/poi-layer-stack.d.ts.map +1 -1
  48. package/dist/ar/poi-layer-stack/poi-layer-stack.js +172 -100
  49. package/dist/ar/poi-layer-stack/poi-layer-stack.js.map +1 -1
  50. package/dist/ar/poi-projection/poi-projection.d.ts +88 -0
  51. package/dist/ar/poi-projection/poi-projection.d.ts.map +1 -0
  52. package/dist/ar/poi-projection/poi-projection.js +90 -0
  53. package/dist/ar/poi-projection/poi-projection.js.map +1 -0
  54. package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts +11 -1
  55. package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts.map +1 -1
  56. package/dist/automation/automation-button/abstract-automation-button-motorized.js +14 -4
  57. package/dist/automation/automation-button/abstract-automation-button-motorized.js.map +1 -1
  58. package/dist/automation/automation-button/abstract-automation-button-squared.d.ts +25 -1
  59. package/dist/automation/automation-button/abstract-automation-button-squared.d.ts.map +1 -1
  60. package/dist/automation/automation-button/abstract-automation-button-squared.js +27 -3
  61. package/dist/automation/automation-button/abstract-automation-button-squared.js.map +1 -1
  62. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts +12 -0
  63. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts.map +1 -1
  64. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js +8 -0
  65. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js.map +1 -1
  66. package/dist/automation/bipolar-transistor/bipolar-transistor.js +4 -4
  67. package/dist/automation/bipolar-transistor/bipolar-transistor.js.map +1 -1
  68. package/dist/automation/capacitor/capacitor.js +4 -4
  69. package/dist/automation/capacitor/capacitor.js.map +1 -1
  70. package/dist/automation/converter/converter.js +4 -4
  71. package/dist/automation/converter/converter.js.map +1 -1
  72. package/dist/automation/damper/damper.js +1 -1
  73. package/dist/automation/damper/damper.js.map +1 -1
  74. package/dist/automation/diodes/diodes.js +6 -6
  75. package/dist/automation/diodes/diodes.js.map +1 -1
  76. package/dist/automation/fan/fan.js +1 -1
  77. package/dist/automation/fan/fan.js.map +1 -1
  78. package/dist/automation/filter/filter.js +4 -4
  79. package/dist/automation/filter/filter.js.map +1 -1
  80. package/dist/automation/ground/ground.js +3 -3
  81. package/dist/automation/ground/ground.js.map +1 -1
  82. package/dist/automation/logic/logic.js +6 -6
  83. package/dist/automation/logic/logic.js.map +1 -1
  84. package/dist/automation/mosfet/mosfet.js +8 -8
  85. package/dist/automation/mosfet/mosfet.js.map +1 -1
  86. package/dist/automation/motor/motor.js +2 -2
  87. package/dist/automation/motor/motor.js.map +1 -1
  88. package/dist/automation/pump/pump.js +2 -2
  89. package/dist/automation/pump/pump.js.map +1 -1
  90. package/dist/automation/resistor/resistor.js +5 -5
  91. package/dist/automation/resistor/resistor.js.map +1 -1
  92. package/dist/automation/router/router.js +2 -2
  93. package/dist/automation/router/router.js.map +1 -1
  94. package/dist/automation/source/source.js +5 -5
  95. package/dist/automation/source/source.js.map +1 -1
  96. package/dist/automation/switch/switch.js +4 -4
  97. package/dist/automation/switch/switch.js.map +1 -1
  98. package/dist/automation/transformer/transformer.js +2 -2
  99. package/dist/automation/transformer/transformer.js.map +1 -1
  100. package/package.json +2 -2
@@ -14,10 +14,13 @@ var poi_layer_default = css`* {
14
14
 
15
15
  --obc-poi-layer-height: auto;
16
16
  --obc-poi-layer-auto-group-offset-y: 0;
17
- --obc-poi-layer-line-length: 120px;
18
17
  --obc-poi-layer-exit-delay-ms: 140;
19
18
  --obc-poi-layer-group-removal-delay-ms: 250;
20
19
  --obc-poi-layer-exit-lock-duration-ms: 500;
20
+ --obc-poi-layer-overlap-enter: 10px;
21
+ --obc-poi-layer-overlap-exit: 18px;
22
+ --obc-poi-layer-overlap-pre: 16px;
23
+ --obc-poi-layer-overlap-behind: 10px;
21
24
  }
22
25
 
23
26
  .wrapper.debug {
@@ -43,8 +46,10 @@ var poi_layer_default = css`* {
43
46
  pointer-events: none;
44
47
  }
45
48
 
46
- ::slotted([data-poi-target]),
47
- ::slotted(obc-poi-group) {
49
+ /* ---------- Main slot: ungrouped targets and manual groups ---------- */
50
+
51
+ .main::slotted([data-poi-target]),
52
+ .main::slotted(obc-poi-group) {
48
53
  position: absolute;
49
54
  bottom: 0;
50
55
  height: 100%;
@@ -64,59 +69,105 @@ var poi_layer_default = css`* {
64
69
  pointer-events: auto;
65
70
  }
66
71
 
67
- ::slotted([data-poi-target][data-grouped]) {
72
+ .main::slotted([data-poi-target][data-grouped]) {
68
73
  opacity: 0;
69
74
  }
70
75
 
71
- ::slotted([data-poi-target]:not([data-grouped])) {
76
+ .main::slotted([data-poi-target]:not([data-grouped])) {
72
77
  opacity: 1;
73
78
  }
74
79
 
75
- ::slotted([data-poi-target][data-behind]) {
80
+ .main::slotted([data-poi-target][data-behind]) {
76
81
  opacity: 0.4;
77
82
  --poi-size: 32px;
78
83
  --obc-poi-target-icon-opacity: 0;
79
84
  }
80
85
 
81
- ::slotted([data-poi-target][data-exiting]) {
86
+ .main::slotted([data-poi-target][data-exiting]) {
82
87
  opacity: 0.4;
83
88
  --poi-size: 32px;
84
89
  --obc-poi-target-icon-opacity: 0;
85
90
  }
86
91
 
87
- ::slotted([data-poi-target][data-front]) {
92
+ .main::slotted([data-poi-target][data-front]) {
88
93
  opacity: 1;
89
94
  --poi-size: 36px;
90
95
  --obc-poi-target-icon-opacity: 1;
91
96
  }
92
97
 
93
- ::slotted(obc-poi-group[data-auto-group]) {
94
- opacity: 1;
95
- }
96
-
97
- ::slotted(obc-poi-group) {
98
+ .main::slotted(obc-poi-group) {
98
99
  bottom: 0;
99
100
  height: 100%;
100
101
  transform: none;
101
102
  pointer-events: none;
102
103
  }
103
104
 
104
- ::slotted(obc-poi-group[data-auto-group]) {
105
+ .main::slotted(obc-poi-group[data-exiting]) {
106
+ pointer-events: none;
107
+ }
108
+
109
+ /* ---------- Auto groups: shadow chrome, members slot-assigned ---------- */
110
+
111
+ .wrapper > obc-poi-group[data-auto-group] {
105
112
  opacity: 0;
106
113
  z-index: 2;
107
114
  transition: opacity 0.1s ease-out;
108
115
  }
109
116
 
110
- ::slotted(obc-poi-group[data-auto-group][data-visible]) {
117
+ .wrapper > obc-poi-group[data-auto-group][data-visible] {
111
118
  opacity: 1;
112
119
  }
113
120
 
114
- ::slotted(obc-poi-group[data-exiting]) {
121
+ .wrapper > obc-poi-group[data-auto-group][data-exiting] {
115
122
  pointer-events: none;
116
123
  }
117
124
 
118
- :host([data-stack-inactive]) ::slotted([data-poi-target]:not([data-grouped])),
119
- :host([data-stack-inactive]) ::slotted(obc-poi-group) {
125
+ /*
126
+ * Members of auto groups stay in the consumer's light DOM but are assigned
127
+ * to the group's member slot, so they are styled from the layer stylesheet
128
+ * (mirrors the grouped-target rules previously in poi-group.css).
129
+ */
130
+ .auto-group-members::slotted([data-poi-target]) {
131
+ position: absolute;
132
+ top: auto;
133
+ bottom: 0;
134
+ height: 100%;
135
+ transform-origin: 50% 50%;
136
+ --obc-poi-layer-target-scale: 1;
137
+ --obc-poi-layer-target-shift: calc(
138
+ (1 - var(--obc-poi-layer-target-scale)) * 100%
139
+ );
140
+ transform: translateX(var(--obc-poi-target-offset-x, 0px))
141
+ translateY(calc(100% - var(--obc-poi-layer-target-shift)))
142
+ scale(var(--obc-poi-layer-target-scale));
143
+ transition: opacity 0.1s ease-out;
144
+ pointer-events: auto;
145
+ }
146
+
147
+ .auto-group-members::slotted([data-poi-target][data-behind]),
148
+ .auto-group-members::slotted([data-poi-target][data-exiting]) {
149
+ opacity: 0.4;
150
+ --poi-size: 32px;
151
+ --obc-poi-target-icon-opacity: 0;
152
+ }
153
+
154
+ .auto-group-members::slotted([data-poi-target][data-front]) {
155
+ opacity: 1;
156
+ --poi-size: 36px;
157
+ --obc-poi-target-icon-opacity: 1;
158
+ }
159
+
160
+ .auto-group-members::slotted([data-poi-target][data-grouped]) {
161
+ opacity: 1;
162
+ transition: opacity 0.1s ease-out;
163
+ }
164
+
165
+ /* ---------- Inactive stack layer dimming ---------- */
166
+
167
+ :host([data-stack-inactive])
168
+ .main::slotted([data-poi-target]:not([data-grouped])),
169
+ :host([data-stack-inactive]) .main::slotted(obc-poi-group),
170
+ :host([data-stack-inactive]) .wrapper > obc-poi-group[data-auto-group] {
120
171
  --obc-poi-object-frame-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
121
172
  --obc-poi-data-content-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
122
173
  --obc-poi-overlap-elements-opacity: var(
@@ -1 +1 @@
1
- {"version":3,"file":"poi-layer.css.js","names":[],"sources":["../../../src/ar/poi-layer/poi-layer.css?inline"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n min-height: var(--obc-poi-layer-min-height, 0);\n height: var(--obc-poi-layer-height, auto);\n pointer-events: auto;\n\n --obc-poi-layer-height: auto;\n --obc-poi-layer-auto-group-offset-y: 0;\n --obc-poi-layer-line-length: 120px;\n --obc-poi-layer-exit-delay-ms: 140;\n --obc-poi-layer-group-removal-delay-ms: 250;\n --obc-poi-layer-exit-lock-duration-ms: 500;\n}\n\n.wrapper.debug {\n background: var(--obc-poi-layer-debug-background, rgb(0 0 0 / 4%));\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n\n height: 100%;\n}\n\n.debug-label {\n position: absolute;\n top: 4px;\n left: 6px;\n\n font-size: 10px;\n line-height: 1;\n\n color: var(--obc-poi-layer-debug-color, rgb(0 0 0 / 60%));\n pointer-events: none;\n}\n\n::slotted([data-poi-target]),\n::slotted(obc-poi-group) {\n position: absolute;\n bottom: 0;\n height: 100%;\n transform-origin: 50% 50%;\n\n --obc-poi-layer-target-scale: 1;\n --obc-poi-layer-target-shift: calc(\n (1 - var(--obc-poi-layer-target-scale)) * 100%\n );\n\n transform: translateX(-50%)\n translateY(calc(100% - var(--obc-poi-layer-target-shift)))\n scale(var(--obc-poi-layer-target-scale));\n transition:\n transform 0.1s ease-out,\n opacity 0.1s ease-out;\n pointer-events: auto;\n}\n\n::slotted([data-poi-target][data-grouped]) {\n opacity: 0;\n}\n\n::slotted([data-poi-target]:not([data-grouped])) {\n opacity: 1;\n}\n\n::slotted([data-poi-target][data-behind]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n::slotted([data-poi-target][data-exiting]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n::slotted([data-poi-target][data-front]) {\n opacity: 1;\n --poi-size: 36px;\n --obc-poi-target-icon-opacity: 1;\n}\n\n::slotted(obc-poi-group[data-auto-group]) {\n opacity: 1;\n}\n\n::slotted(obc-poi-group) {\n bottom: 0;\n height: 100%;\n transform: none;\n pointer-events: none;\n}\n\n::slotted(obc-poi-group[data-auto-group]) {\n opacity: 0;\n z-index: 2;\n transition: opacity 0.1s ease-out;\n}\n\n::slotted(obc-poi-group[data-auto-group][data-visible]) {\n opacity: 1;\n}\n\n::slotted(obc-poi-group[data-exiting]) {\n pointer-events: none;\n}\n\n:host([data-stack-inactive]) ::slotted([data-poi-target]:not([data-grouped])),\n:host([data-stack-inactive]) ::slotted(obc-poi-group) {\n --obc-poi-object-frame-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n --obc-poi-data-content-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n --obc-poi-overlap-elements-opacity: var(\n --obc-poi-layer-inactive-opacity,\n 0.7\n );\n --obc-poi-label-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n}\n"],"mappings":""}
1
+ {"version":3,"file":"poi-layer.css.js","names":[],"sources":["../../../src/ar/poi-layer/poi-layer.css?inline"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n min-height: var(--obc-poi-layer-min-height, 0);\n height: var(--obc-poi-layer-height, auto);\n pointer-events: auto;\n\n --obc-poi-layer-height: auto;\n --obc-poi-layer-auto-group-offset-y: 0;\n --obc-poi-layer-exit-delay-ms: 140;\n --obc-poi-layer-group-removal-delay-ms: 250;\n --obc-poi-layer-exit-lock-duration-ms: 500;\n --obc-poi-layer-overlap-enter: 10px;\n --obc-poi-layer-overlap-exit: 18px;\n --obc-poi-layer-overlap-pre: 16px;\n --obc-poi-layer-overlap-behind: 10px;\n}\n\n.wrapper.debug {\n background: var(--obc-poi-layer-debug-background, rgb(0 0 0 / 4%));\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n\n height: 100%;\n}\n\n.debug-label {\n position: absolute;\n top: 4px;\n left: 6px;\n\n font-size: 10px;\n line-height: 1;\n\n color: var(--obc-poi-layer-debug-color, rgb(0 0 0 / 60%));\n pointer-events: none;\n}\n\n/* ---------- Main slot: ungrouped targets and manual groups ---------- */\n\n.main::slotted([data-poi-target]),\n.main::slotted(obc-poi-group) {\n position: absolute;\n bottom: 0;\n height: 100%;\n transform-origin: 50% 50%;\n\n --obc-poi-layer-target-scale: 1;\n --obc-poi-layer-target-shift: calc(\n (1 - var(--obc-poi-layer-target-scale)) * 100%\n );\n\n transform: translateX(-50%)\n translateY(calc(100% - var(--obc-poi-layer-target-shift)))\n scale(var(--obc-poi-layer-target-scale));\n transition:\n transform 0.1s ease-out,\n opacity 0.1s ease-out;\n pointer-events: auto;\n}\n\n.main::slotted([data-poi-target][data-grouped]) {\n opacity: 0;\n}\n\n.main::slotted([data-poi-target]:not([data-grouped])) {\n opacity: 1;\n}\n\n.main::slotted([data-poi-target][data-behind]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n.main::slotted([data-poi-target][data-exiting]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n.main::slotted([data-poi-target][data-front]) {\n opacity: 1;\n --poi-size: 36px;\n --obc-poi-target-icon-opacity: 1;\n}\n\n.main::slotted(obc-poi-group) {\n bottom: 0;\n height: 100%;\n transform: none;\n pointer-events: none;\n}\n\n.main::slotted(obc-poi-group[data-exiting]) {\n pointer-events: none;\n}\n\n/* ---------- Auto groups: shadow chrome, members slot-assigned ---------- */\n\n.wrapper > obc-poi-group[data-auto-group] {\n opacity: 0;\n z-index: 2;\n transition: opacity 0.1s ease-out;\n}\n\n.wrapper > obc-poi-group[data-auto-group][data-visible] {\n opacity: 1;\n}\n\n.wrapper > obc-poi-group[data-auto-group][data-exiting] {\n pointer-events: none;\n}\n\n/*\n * Members of auto groups stay in the consumer's light DOM but are assigned\n * to the group's member slot, so they are styled from the layer stylesheet\n * (mirrors the grouped-target rules previously in poi-group.css).\n */\n.auto-group-members::slotted([data-poi-target]) {\n position: absolute;\n top: auto;\n bottom: 0;\n height: 100%;\n transform-origin: 50% 50%;\n --obc-poi-layer-target-scale: 1;\n --obc-poi-layer-target-shift: calc(\n (1 - var(--obc-poi-layer-target-scale)) * 100%\n );\n transform: translateX(var(--obc-poi-target-offset-x, 0px))\n translateY(calc(100% - var(--obc-poi-layer-target-shift)))\n scale(var(--obc-poi-layer-target-scale));\n transition: opacity 0.1s ease-out;\n pointer-events: auto;\n}\n\n.auto-group-members::slotted([data-poi-target][data-behind]),\n.auto-group-members::slotted([data-poi-target][data-exiting]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n.auto-group-members::slotted([data-poi-target][data-front]) {\n opacity: 1;\n --poi-size: 36px;\n --obc-poi-target-icon-opacity: 1;\n}\n\n.auto-group-members::slotted([data-poi-target][data-grouped]) {\n opacity: 1;\n transition: opacity 0.1s ease-out;\n}\n\n/* ---------- Inactive stack layer dimming ---------- */\n\n:host([data-stack-inactive])\n .main::slotted([data-poi-target]:not([data-grouped])),\n:host([data-stack-inactive]) .main::slotted(obc-poi-group),\n:host([data-stack-inactive]) .wrapper > obc-poi-group[data-auto-group] {\n --obc-poi-object-frame-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n --obc-poi-data-content-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n --obc-poi-overlap-elements-opacity: var(\n --obc-poi-layer-inactive-opacity,\n 0.7\n );\n --obc-poi-label-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n}\n"],"mappings":""}
@@ -1,4 +1,5 @@
1
1
  import { LitElement, PropertyValues } from 'lit';
2
+ import { Poi } from '../poi/poi.js';
2
3
  import '../poi-group/poi-group.js';
3
4
  export declare enum OverlapMode {
4
5
  Grouping = "grouping",
@@ -12,7 +13,7 @@ export declare enum OverlapMode {
12
13
  *
13
14
  * ### Features
14
15
  * - Overlap strategies: `overlapMode="grouping"` builds overlap clusters; `overlapMode="crossing"` continuously adjusts horizontal offsets to reduce crossings.
15
- * - Auto-group lifecycle: Creates/removes auto groups and preserves front/behind/pre-group states during transitions.
16
+ * - Auto-group lifecycle: Creates/removes auto groups as shadow-internal chrome — the consumer's light DOM is never modified; members are placed via manual slot assignment. Reach the group elements through the `autoGroups` accessor.
16
17
  * - Manual group support: Respects existing `obc-poi-group` elements and can optionally join nearby targets while a group is expanded (`joinWhileExpanded`).
17
18
  * - Dynamic observation: Reacts to slot changes, target style/position mutations, and target size changes to recompute grouping and layer height.
18
19
  * - Layer diagnostics: `debug` shows a label overlay using `label`.
@@ -24,9 +25,11 @@ export declare enum OverlapMode {
24
25
  * - Choose `overlapMode` based on behavior:
25
26
  * - `grouping`: best when overlaps should collapse into expandable clusters.
26
27
  * - `crossing`: best when targets stay independent but should separate horizontally.
27
- * - Listen for `layer-resize` to keep parent containers in sync with computed layer height.
28
+ * - Handle `layer-resize` only when using the layer standalone; inside `obc-poi-layer-stack` / `obc-poi-controller` the container handles height syncing. Example: `layer.addEventListener('layer-resize', (e) => { host.style.height = e.detail.height + 'px'; })`.
29
+ * - After imperatively adding, removing, or moving POI children outside the layer's own observers, call the public `requestGroupingUpdate()` method to force a recompute; it is the supported hook for imperative DOM mutations.
30
+ * - Set `--obc-poi-layer-min-height` when the layer starts empty, otherwise the layer collapses to 0px height until targets exist.
28
31
  * - Enable `joinWhileExpanded` only when targets should be able to join an already expanded auto-group.
29
- * - **TODO(designer):** Confirm intended user-visible behavior for `isSelected`, since it currently reflects an attribute but is not consumed by the layer logic here.
32
+ * - **TODO(designer):** Confirm intended user-visible behavior for `isSelected`, since it has no runtime layout logic in this class — it only reflects the attribute and notifies containers via `layer-selection-changed` (consumed by `obc-poi-layer-stack` to pick the selected layer).
30
33
  *
31
34
  * ### Slots
32
35
  * | Slot | Renders When... | Purpose |
@@ -35,10 +38,22 @@ export declare enum OverlapMode {
35
38
  *
36
39
  * ### Events
37
40
  * - `layer-resize` - Fired when computed layer height changes. Detail: `{ height: number, label: string }`.
41
+ * - `grouping-change` - Fired when grouping membership or front/behind/pre-group state changes. Detail: `{ clusters: Poi[][], front: Poi[], behind: Poi[], pregrouped: Poi[] }`. Subscribe to this instead of observing the layer's internal `data-*` attributes.
42
+ *
43
+ * ### CSS Custom Properties
44
+ * | Property | Default | Purpose |
45
+ * | --- | --- | --- |
46
+ * | `--obc-poi-layer-overlap-enter` | `10px` | Max horizontal gap at which ungrouped targets start grouping. |
47
+ * | `--obc-poi-layer-overlap-exit` | `18px` | Gap at which grouped targets leave their group. Clamped to at least the enter threshold; keep it larger than enter so jittery positions do not oscillate in and out of groups. |
48
+ * | `--obc-poi-layer-overlap-pre` | `16px` | Gap at which targets get the pre-grouped visual state. |
49
+ * | `--obc-poi-layer-overlap-behind` | `10px` | Gap at which the shortest target gets the behind visual state. |
50
+ * | `--obc-poi-layer-exit-delay-ms` | `140` | Delay before exiting targets lose their exit visual state. |
51
+ * | `--obc-poi-layer-group-removal-delay-ms` | `250` | Delay before a dissolved auto-group element is removed. |
52
+ * | `--obc-poi-layer-exit-lock-duration-ms` | `500` | Duration a target is locked out of pre-group/behind states after leaving a group. |
38
53
  *
39
54
  * ### Best Practices
40
55
  * - Keep POI targets as direct descendants when possible to reduce grouping ambiguity.
41
- * - Use stable `x`/`y` updates for animated scenarios so grouping and crossing calculations remain predictable.
56
+ * - Targets may update `x`/`y` every animation frame; grouping stays stable as long as the horizontal gap between targets does not oscillate across the enter/exit band faster than the group lifecycle delays (~0.5s). Smooth noisy input coordinates or widen the enter/exit band to compensate.
42
57
  * - Avoid adding non-POI interactive wrappers inside the layer unless needed, as layer observers track POI-related descendants.
43
58
  *
44
59
  * ### Example
@@ -52,10 +67,17 @@ export declare enum OverlapMode {
52
67
  *
53
68
  * @slot - Default slot for POI targets and optional POI groups.
54
69
  * @fires {CustomEvent<{height:number,label:string}>} layer-resize - Fired when the layer height changes.
70
+ * @fires {CustomEvent<{clusters:Poi[][],front:Poi[],behind:Poi[],pregrouped:Poi[]}>} grouping-change - Fired when grouping membership or overlap state changes. Bubbles and is composed.
55
71
  * @fires {Event} layer-selection-changed - Fired when the layer's `isSelected` state changes. Bubbles.
56
72
  * @experimental
57
73
  */
58
74
  export declare class ObcPoiLayer extends LitElement {
75
+ /**
76
+ * Manual slot assignment lets the layer place consumer-owned targets into
77
+ * shadow-internal auto-group chrome (and back) without ever re-parenting
78
+ * them: grouping only changes which internal slot a target is assigned to.
79
+ */
80
+ static shadowRootOptions: ShadowRootInit;
59
81
  label: string;
60
82
  debug: boolean;
61
83
  overlapMode: OverlapMode;
@@ -67,6 +89,9 @@ export declare class ObcPoiLayer extends LitElement {
67
89
  private targetResizeObserver?;
68
90
  private lastHeight;
69
91
  private isGrouping;
92
+ private lastGroupingSignature;
93
+ private groupingIds;
94
+ private nextGroupingId;
70
95
  private targetObservers;
71
96
  private targetSizeElements;
72
97
  private groupingRaf;
@@ -105,9 +130,43 @@ export declare class ObcPoiLayer extends LitElement {
105
130
  private isPoiLayerRelevantNode;
106
131
  private setupLayerMutationObserver;
107
132
  requestGroupingUpdate(): void;
133
+ private getMainSlot;
134
+ /**
135
+ * Assign every light-DOM child that is not currently placed in an
136
+ * auto-group member slot to the main slot. With `slotAssignment: 'manual'`
137
+ * nothing renders unless explicitly assigned, so this runs after render,
138
+ * on child-list mutations, and after every grouping change.
139
+ */
140
+ private syncSlotAssignments;
141
+ /**
142
+ * Called by an auto-created `obc-poi-group` after it removed a target from
143
+ * its member slot, so the target immediately re-renders through the main
144
+ * slot instead of disappearing until the next grouping pass.
145
+ * @internal
146
+ */
147
+ releaseAssignedTarget(_target: Poi): void;
148
+ /**
149
+ * The auto-created `obc-poi-group` elements currently managed by this
150
+ * layer. Auto groups are shadow-internal chrome (they never appear in the
151
+ * consumer's light DOM); use this accessor — typically after a
152
+ * `grouping-change` event — to reach them, e.g. to expand a group
153
+ * programmatically.
154
+ */
155
+ get autoGroups(): HTMLElement[];
156
+ private getAutoGroups;
157
+ private getAutoGroupMemberSlot;
158
+ /** The auto group a target is currently assigned into, if any. */
159
+ private getAutoGroupOf;
160
+ /**
161
+ * Members of a group in either mode: slot-assigned (shadow auto groups) or
162
+ * light-DOM children (consumer-managed manual groups).
163
+ */
164
+ private getGroupMembers;
108
165
  private scheduleGrouping;
109
166
  private scheduleCrossingMode;
110
167
  private updateCrossingMode;
168
+ private getGroupingId;
169
+ private notifyGroupingChange;
111
170
  private toggleGroupLayerHook;
112
171
  private updateGrouping;
113
172
  private tryJoinExpandedGroup;
@@ -128,8 +187,8 @@ export declare class ObcPoiLayer extends LitElement {
128
187
  private getShortestTarget;
129
188
  private getAllTargets;
130
189
  private getGroupTargets;
131
- protected updated(changedProperties: PropertyValues): void;
132
190
  render(): import('lit-html').TemplateResult<1>;
191
+ protected updated(changedProperties: PropertyValues): void;
133
192
  static styles: import('lit').CSSResult;
134
193
  }
135
194
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"poi-layer.d.ts","sourceRoot":"","sources":["../../../src/ar/poi-layer/poi-layer.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"poi-layer.d.ts","sourceRoot":"","sources":["../../../src/ar/poi-layer/poi-layer.ts"],"names":[],"mappings":"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"}