@r2digisolutions/components 0.16.1 → 0.16.2

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.
@@ -86,8 +86,8 @@
86
86
  const viewTop = vv?.offsetTop ?? 0;
87
87
  const pad = 8;
88
88
 
89
- const panelW = Math.max(panelEl.offsetWidth, 280);
90
- const panelH = Math.max(panelEl.offsetHeight, 120);
89
+ const panelW = Math.max(panelEl.offsetWidth || 0, unstyled ? 1 : 280);
90
+ const panelH = Math.max(panelEl.offsetHeight || 0, unstyled ? 1 : 120);
91
91
 
92
92
  let place: PopoverPlacement = placement;
93
93
  if (place === 'top' || place === 'bottom') {
@@ -126,8 +126,15 @@
126
126
  `left:${Math.round(left)}px`,
127
127
  'right:auto',
128
128
  'bottom:auto',
129
- `width:${Math.round(panelW)}px`
130
- ].join(';');
129
+ unstyled ? 'width:max-content' : `width:${Math.round(panelW)}px`,
130
+ unstyled ? 'height:max-content' : null,
131
+ unstyled ? 'background:transparent' : null,
132
+ unstyled ? 'border:none' : null,
133
+ unstyled ? 'padding:0' : null,
134
+ unstyled ? 'overflow:visible' : null
135
+ ]
136
+ .filter(Boolean)
137
+ .join(';');
131
138
  }
132
139
 
133
140
  function syncNative() {
@@ -232,6 +239,7 @@
232
239
  role="dialog"
233
240
  ontoggle={onToggle}
234
241
  style={panelStyle}
242
+ data-unstyled={unstyled ? 'true' : undefined}
235
243
  class={[
236
244
  'popover-panel m-0 outline-none',
237
245
  unstyled
@@ -262,8 +270,19 @@
262
270
  </div>
263
271
 
264
272
  <style>
265
- /* UA popover defaults to inset:0force anchor via inline style */
273
+ /* UA popover paints a canvas background kill it for anchored panels */
274
+ .popover-panel {
275
+ background-color: transparent;
276
+ color: inherit;
277
+ }
266
278
  .popover-panel:popover-open {
267
279
  inset: unset;
268
280
  }
281
+ .popover-panel[data-unstyled='true'] {
282
+ background: transparent !important;
283
+ border: none !important;
284
+ padding: 0 !important;
285
+ box-shadow: none !important;
286
+ overflow: visible;
287
+ }
269
288
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@r2digisolutions/components",
3
- "version": "0.16.1",
3
+ "version": "0.16.2",
4
4
  "private": false,
5
5
  "description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
6
6
  "license": "MIT",