@lukso/web-components 1.180.0 → 1.180.1
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.
|
@@ -107,7 +107,7 @@ exports.LuksoModal = class LuksoModal extends core.withTheme(index.TailwindStyle
|
|
|
107
107
|
<div class=${overlay()} @click=${this.handleBackdropClick}></div>
|
|
108
108
|
<div
|
|
109
109
|
class=${dialog()}
|
|
110
|
-
style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius);"
|
|
110
|
+
style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius, 12px);"
|
|
111
111
|
>
|
|
112
112
|
<slot></slot>
|
|
113
113
|
</div>
|
|
@@ -103,7 +103,7 @@ let LuksoModal = class extends withTheme(TailwindStyledElement(style)) {
|
|
|
103
103
|
<div class=${overlay()} @click=${this.handleBackdropClick}></div>
|
|
104
104
|
<div
|
|
105
105
|
class=${dialog()}
|
|
106
|
-
style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius);"
|
|
106
|
+
style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius, 12px);"
|
|
107
107
|
>
|
|
108
108
|
<slot></slot>
|
|
109
109
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n position: fixed !important;\n inset: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n z-index: 1011 !important;\n backdrop-filter: blur(8px) !important;\n background: rgb(196 202 206 / 60%) !important;\n pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties
|
|
3
|
+
const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n position: fixed !important;\n inset: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n z-index: 1011 !important;\n backdrop-filter: blur(8px) !important;\n background: rgb(196 202 206 / 60%) !important;\n pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties — defaults are inlined as var() fallbacks\n so inherited values from parent elements are not blocked by :host. */\n:host(:not([theme='dark'])) {\n --lukso-modal-resolved-bg: var(--lukso-modal-bg, #f8fafb); /* neutral-98 */\n}\n\n:host([theme='dark']) {\n --lukso-modal-resolved-bg: var(\n --lukso-modal-dark-bg,\n #121b21\n ); /* neutral-10 */\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = style;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n position: fixed !important;\n inset: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n z-index: 1011 !important;\n backdrop-filter: blur(8px) !important;\n background: rgb(196 202 206 / 60%) !important;\n pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties
|
|
1
|
+
const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n position: fixed !important;\n inset: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n z-index: 1011 !important;\n backdrop-filter: blur(8px) !important;\n background: rgb(196 202 206 / 60%) !important;\n pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties — defaults are inlined as var() fallbacks\n so inherited values from parent elements are not blocked by :host. */\n:host(:not([theme='dark'])) {\n --lukso-modal-resolved-bg: var(--lukso-modal-bg, #f8fafb); /* neutral-98 */\n}\n\n:host([theme='dark']) {\n --lukso-modal-resolved-bg: var(\n --lukso-modal-dark-bg,\n #121b21\n ); /* neutral-10 */\n}\n";
|
|
2
2
|
|
|
3
3
|
export { style as default };
|