@lukso/web-components 1.179.0 → 1.180.0

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 (10) hide show
  1. package/dist/components/lukso-modal/index.cjs +5 -2
  2. package/dist/components/lukso-modal/index.d.ts.map +1 -1
  3. package/dist/components/lukso-modal/index.js +5 -2
  4. package/dist/components/lukso-modal/lukso-modal.stories.d.ts +3 -2
  5. package/dist/components/lukso-modal/lukso-modal.stories.d.ts.map +1 -1
  6. package/dist/components/lukso-modal/style.css.cjs +1 -1
  7. package/dist/components/lukso-modal/style.css.js +1 -1
  8. package/dist/shared/tailwind-element/style.css.cjs +1 -1
  9. package/dist/shared/tailwind-element/style.css.js +1 -1
  10. package/package.json +1 -1
package/dist/components/lukso-modal/index.cjs CHANGED
@@ -33,7 +33,7 @@ exports.LuksoModal = class LuksoModal extends core.withTheme(index.TailwindStyle
33
33
  wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y isolate",
34
34
  inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
35
35
  overlay: "absolute inset-0 w-full h-full z-[1010]",
36
- dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012] mx-auto dark:bg-neutral-10"
36
+ dialog: "shadow-neutral-shadow-round-3xl z-[1012] mx-auto"
37
37
  },
38
38
  variants: {
39
39
  isOpen: {
@@ -105,7 +105,10 @@ exports.LuksoModal = class LuksoModal extends core.withTheme(index.TailwindStyle
105
105
  <div data-testid="modal" class=${wrapper()}>
106
106
  <div class=${inner()}>
107
107
  <div class=${overlay()} @click=${this.handleBackdropClick}></div>
108
- <div class=${dialog()}>
108
+ <div
109
+ class=${dialog()}
110
+ style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius);"
111
+ >
109
112
  <slot></slot>
110
113
  </div>
111
114
  </div>
package/dist/components/lukso-modal/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;;AAE7D,qBACa,UAAW,SAAQ,eAAuC;IAErE,MAAM,UAAQ;IAGd,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,UAAU,CAAU;IAG1B,gBAAgB,UAAQ;IAExB,OAAO,CAAC,MAAM,CAuDZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;;AAE7D,qBACa,UAAW,SAAQ,eAAuC;IAErE,MAAM,UAAQ;IAGd,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,UAAU,CAAU;IAG1B,gBAAgB,UAAQ;IAExB,OAAO,CAAC,MAAM,CAsDZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
package/dist/components/lukso-modal/index.js CHANGED
@@ -29,7 +29,7 @@ let LuksoModal = class extends withTheme(TailwindStyledElement(style)) {
29
29
  wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y isolate",
30
30
  inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
31
31
  overlay: "absolute inset-0 w-full h-full z-[1010]",
32
- dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012] mx-auto dark:bg-neutral-10"
32
+ dialog: "shadow-neutral-shadow-round-3xl z-[1012] mx-auto"
33
33
  },
34
34
  variants: {
35
35
  isOpen: {
@@ -101,7 +101,10 @@ let LuksoModal = class extends withTheme(TailwindStyledElement(style)) {
101
101
  <div data-testid="modal" class=${wrapper()}>
102
102
  <div class=${inner()}>
103
103
  <div class=${overlay()} @click=${this.handleBackdropClick}></div>
104
- <div class=${dialog()}>
104
+ <div
105
+ class=${dialog()}
106
+ style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius);"
107
+ >
105
108
  <slot></slot>
106
109
  </div>
107
110
  </div>
package/dist/components/lukso-modal/lukso-modal.stories.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { Meta } from '@storybook/web-components-vite';
1
+ import { Meta, StoryFn } from '@storybook/web-components-vite';
2
2
  /** Documentation and examples of `lukso-modal` component. */
3
3
  declare const meta: Meta;
4
4
  export default meta;
5
- export declare const DefaultModal: any;
5
+ export declare const DefaultModal: StoryFn;
6
+ export declare const CustomStyled: StoryFn;
6
7
  //# sourceMappingURL=lukso-modal.stories.d.ts.map
package/dist/components/lukso-modal/lukso-modal.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lukso-modal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/lukso-modal.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAChB,OAAO,iBAAiB,CAAA;AAExB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IA6EX,CAAA;AAED,eAAe,IAAI,CAAA;AA+CnB,eAAO,MAAM,YAAY,KAAoB,CAAA"}
1
+ {"version":3,"file":"lukso-modal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/lukso-modal.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,SAAS,CAAA;AAChB,OAAO,iBAAiB,CAAA;AAExB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAwGX,CAAA;AAED,eAAe,IAAI,CAAA;AA4DnB,eAAO,MAAM,YAAY,EAAE,OAA2B,CAAA;AAEtD,eAAO,MAAM,YAAY,EAAE,OAA2B,CAAA"}
package/dist/components/lukso-modal/style.css.cjs CHANGED
@@ -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";
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 */\n:host {\n --lukso-modal-border-radius: 12px; /* rounded-12 */\n --lukso-modal-bg: #f8fafb; /* neutral-98 */\n --lukso-modal-dark-bg: #121b21; /* neutral-10 */\n}\n\n:host(:not([theme='dark'])) {\n --lukso-modal-resolved-bg: var(--lukso-modal-bg);\n}\n\n:host([theme='dark']) {\n --lukso-modal-resolved-bg: var(--lukso-modal-dark-bg);\n}\n";
4
4
 
5
5
  module.exports = style;
package/dist/components/lukso-modal/style.css.js CHANGED
@@ -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";
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 */\n:host {\n --lukso-modal-border-radius: 12px; /* rounded-12 */\n --lukso-modal-bg: #f8fafb; /* neutral-98 */\n --lukso-modal-dark-bg: #121b21; /* neutral-10 */\n}\n\n:host(:not([theme='dark'])) {\n --lukso-modal-resolved-bg: var(--lukso-modal-bg);\n}\n\n:host([theme='dark']) {\n --lukso-modal-resolved-bg: var(--lukso-modal-dark-bg);\n}\n";
2
2
 
3
3
  export { style as default };