@lukso/web-components 1.172.13 → 1.172.17

package/dist/components/lukso-markdown-editor/index.js

@@ -1,17 +1,18 @@
-import { b as TailwindStyledElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { e } from '../../chunks/query-CHb9Ft_d.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../../tailwind-config.js';
-import { a as axe, c as cn } from '../../chunks/axe-DJKac19y.js';
+import '../../chunks/index-CSnDkMHN.js';
+import { c as cn } from '../../chunks/cn-Df_5FiGi.js';
+import 'viem';
+import axe from 'axe-core';
 import '../lukso-textarea/index.js';
 import '../lukso-markdown/index.js';
 import '../lukso-switch/index.js';
 import '../lukso-button/index.js';
 import '../lukso-icon/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA_aKopU.js';
 import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
 import '../lukso-tooltip/index.js';
@@ -311,7 +312,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         this.isAlignmentDropdownOpen = false;
       }
     };
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "w-[inherit]",
         header: "flex items-center justify-between gap-2 border border-neutral-90 rounded-12 px-3 py-2 bg-neutral-100",
@@ -335,7 +336,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       },
       compoundVariants: [{ isFullWidth: false, class: { wrapper: "w-[500px]" } }]
     });
-    this.toolbarButton = ce({
+    this.toolbarButton = tv({
       base: "hover:bg-neutral-95 transition border-0 !shadow-none",
       variants: {
         active: { true: "bg-neutral-95" },
@@ -2147,7 +2148,7 @@ ${indent}${nextNumber}. `;
     }
   }
   buttonTemplate(icon, handler, name, isActive = false) {
-    return x`
+    return html`
       <lukso-tooltip text=${name} placement="top">
         <lukso-button
           @click=${() => {
@@ -2172,10 +2173,10 @@ ${indent}${nextNumber}. `;
     `;
   }
   toolbarTemplate() {
-    return x`
+    return html`
       <div class="flex items-center gap-1">
         <!-- Heading -->
-        ${this.toolsState.includes("heading") ? x`<div class=${cn(this.styles().headingMenu())}>
+        ${this.toolsState.includes("heading") ? html`<div class=${cn(this.styles().headingMenu())}>
               <lukso-tooltip text="Heading options" placement="top">
                 <lukso-button
                   id=${this.headingTriggerId}
@@ -2270,7 +2271,7 @@ ${indent}${nextNumber}. `;
                   Heading 4
                 </lukso-dropdown-option>
               </lukso-dropdown>
-            </div>` : E}
+            </div>` : nothing}
 
         <!-- Bold -->
         ${this.toolsState.includes("bold") ? this.buttonTemplate(
@@ -2278,7 +2279,7 @@ ${indent}${nextNumber}. `;
       () => this.toggleWrap("**"),
       "Bold",
       this.activeFormats.bold
-    ) : E}
+    ) : nothing}
 
         <!-- Italic -->
         ${this.toolsState.includes("italic") ? this.buttonTemplate(
@@ -2286,10 +2287,10 @@ ${indent}${nextNumber}. `;
       () => this.toggleWrap("*"),
       "Italic",
       this.activeFormats.italic
-    ) : E}
+    ) : nothing}
 
         <!-- List -->
-        ${this.toolsState.includes("list") ? x`
+        ${this.toolsState.includes("list") ? html`
               <div class=${this.styles().listMenu()}>
                 <lukso-tooltip text="List options" placement="top">
                   <lukso-button
@@ -2363,7 +2364,7 @@ ${indent}${nextNumber}. `;
                   </lukso-dropdown-option>
                 </lukso-dropdown>
               </div>
-            ` : E}
+            ` : nothing}
 
         <!-- Link -->
         ${this.toolsState.includes("link") ? this.buttonTemplate(
@@ -2371,10 +2372,10 @@ ${indent}${nextNumber}. `;
       () => this.insertLink(),
       "Link",
       this.activeFormats.link
-    ) : E}
+    ) : nothing}
 
         <!-- Text Alignment -->
-        ${this.toolsState.includes("alignment") ? x`
+        ${this.toolsState.includes("alignment") ? html`
               <div class=${this.styles().alignmentMenu()}>
                 <lukso-tooltip text="Text alignment" placement="top">
                   <lukso-button
@@ -2475,10 +2476,10 @@ ${indent}${nextNumber}. `;
                   </lukso-dropdown-option>
                 </lukso-dropdown>
               </div>
-            ` : E}
+            ` : nothing}
 
         <!-- Color -->
-        ${this.toolsState.includes("color") ? x`
+        ${this.toolsState.includes("color") ? html`
               <div class=${this.styles().colorMenu()}>
                 <lukso-tooltip text="Text color" placement="top">
                   <lukso-button
@@ -2528,7 +2529,7 @@ ${indent}${nextNumber}. `;
                       class="col-span-8 mb-2 flex items-center justify-between"
                     >
                       <span class="text-xs text-neutral-60">Text Color</span>
-                      ${this.activeFormats.color ? x`<button
+                      ${this.activeFormats.color ? html`<button
                             class="text-xs text-neutral-60 hover:text-neutral-20 underline"
                             @click=${(e) => {
       e.stopPropagation();
@@ -2539,10 +2540,10 @@ ${indent}${nextNumber}. `;
                             aria-label="Clear color"
                           >
                             Clear
-                          </button>` : E}
+                          </button>` : nothing}
                     </div>
                     ${this.colorSamples.map(
-      (color) => x`
+      (color) => html`
                         <button
                           class="w-6 h-6 rounded-4 border transition-all ${this.activeFormats.activeColor === color ? "border-neutral-20 ring-2 ring-purple-51" : "border-neutral-90 hover:border-neutral-60"}"
                           style="background-color: ${color}"
@@ -2560,19 +2561,19 @@ ${indent}${nextNumber}. `;
                   </div>
                 </lukso-dropdown>
               </div>
-            ` : E}
+            ` : nothing}
 
         <!-- Divider -->
-        ${this.toolsState.length > 0 ? x`<div class=${this.styles().divider()}></div>` : E}
+        ${this.toolsState.length > 0 ? html`<div class=${this.styles().divider()}></div>` : nothing}
       </div>
     `;
   }
   accessibilityIndicatorTemplate() {
     if (!this.hasAccessibilityViolations || this.accessibilityViolations.length === 0 || !this.isPreview) {
-      return E;
+      return nothing;
     }
     const tooltipText = formatViolationsForTooltip(this.accessibilityViolations);
-    return x`
+    return html`
       <div
         class="accessibility-indicator has-violations absolute top-2 right-2 z-10"
         style="pointer-events: auto;"
@@ -2619,7 +2620,7 @@ ${indent}${nextNumber}. `;
         error
       );
     }
-    return x`
+    return html`
       <div class=${wrapper()}>
         <div>
           <lukso-form-label
@@ -2643,14 +2644,14 @@ ${indent}${nextNumber}. `;
           </div>
 
           <div class=${area()}>
-            ${!this.isPreview ? x`<div class=${editor()}>
+            ${!this.isPreview ? html`<div class=${editor()}>
                   <lukso-textarea
                     .value=${this.value}
-                    name=${this.name ? this.name : E}
-                    size=${this.size ? this.size : E}
-                    rows=${this.rows ? this.rows : E}
-                    placeholder=${this.placeholder ? this.placeholder : E}
-                    error=${this.error ? this.error : E}
+                    name=${this.name ? this.name : nothing}
+                    size=${this.size ? this.size : nothing}
+                    rows=${this.rows ? this.rows : nothing}
+                    placeholder=${this.placeholder ? this.placeholder : nothing}
+                    error=${this.error ? this.error : nothing}
                     ?is-full-width=${true}
                     ?is-disabled=${this.isDisabled}
                     ?is-readonly=${this.isReadonly}
@@ -2660,7 +2661,7 @@ ${indent}${nextNumber}. `;
                     @on-input-click=${this.handleTextareaClick}
                   ></lukso-textarea>
                   ${this.accessibilityIndicatorTemplate()}
-                </div>` : x`<div
+                </div>` : html`<div
                   class=${preview()}
                   style="background-color: ${this.previewBackgroundColor};"
                 >
@@ -2678,98 +2679,98 @@ ${indent}${nextNumber}. `;
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "value", 2);
 __decorateClass([
-  n({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], LuksoMarkdownEditor.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoMarkdownEditor.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoMarkdownEditor.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoMarkdownEditor.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-non-resizable" })
+  property({ type: Boolean, attribute: "is-non-resizable" })
 ], LuksoMarkdownEditor.prototype, "isNonResizable", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoMarkdownEditor.prototype, "autofocus", 2);
 __decorateClass([
-  n({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], LuksoMarkdownEditor.prototype, "size", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-preview", reflect: true })
+  property({ type: Boolean, attribute: "is-preview", reflect: true })
 ], LuksoMarkdownEditor.prototype, "isPreview", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoMarkdownEditor.prototype, "rows", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "placeholder", 2);
 __decorateClass([
-  n({
+  property({
     type: String,
     attribute: "preview-background-color",
     reflect: true
   })
 ], LuksoMarkdownEditor.prototype, "previewBackgroundColor", 2);
 __decorateClass([
-  n({ type: String, attribute: "preview-text-color", reflect: true })
+  property({ type: String, attribute: "preview-text-color", reflect: true })
 ], LuksoMarkdownEditor.prototype, "previewTextColor", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "strip-html-tags" })
+  property({ type: Boolean, attribute: "strip-html-tags" })
 ], LuksoMarkdownEditor.prototype, "stripHtmlTags", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "tools", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "toolsState", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "savedSelectionForPreview", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isHeadingDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isColorDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isListDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isAlignmentDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "currentSelection", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "savedSelection", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "activeFormats", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "accessibilityViolations", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "hasAccessibilityViolations", 2);
 __decorateClass([
-  e("lukso-textarea")
+  query("lukso-textarea")
 ], LuksoMarkdownEditor.prototype, "textareaEl", 2);
 LuksoMarkdownEditor = __decorateClass([
   safeCustomElement("lukso-markdown-editor")

package/dist/components/lukso-modal/index.cjs

@@ -2,28 +2,31 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const chunkLQIOVPBE = require('../../chunks/chunk-LQIOVPBE-kQFZF_OS.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const core = require('@lukso/core');
+const index = require('../../chunks/index-BBPgtFEP.js');
+require('../../chunks/index-Bm2Lo_3c.js');
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.TailwindElement) {
+exports.LuksoModal = class LuksoModal extends core.withTheme(index.TailwindElement) {
   constructor() {
     super(...arguments);
     this.isOpen = false;
     this.disableAnimations = false;
     this.size = "small";
     this.hasBottomPadding = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y",
         inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
@@ -96,7 +99,7 @@ class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.Ta
       disableAnimations: this.disableAnimations,
       hasBottomPadding: this.hasBottomPadding
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div data-testid="modal" class=${wrapper()}>
         <div class=${inner()}>
           <div class=${overlay()} @click=${this.handleBackdropClick}></div>
@@ -107,19 +110,19 @@ class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.Ta
       </div>
     `;
   }
-}
+};
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-open" })
-], LuksoModal.prototype, "isOpen");
+  decorators_js.property({ type: Boolean, attribute: "is-open" })
+], exports.LuksoModal.prototype, "isOpen", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "disable-animations" })
-], LuksoModal.prototype, "disableAnimations");
+  decorators_js.property({ type: Boolean, attribute: "disable-animations" })
+], exports.LuksoModal.prototype, "disableAnimations", 2);
 __decorateClass([
-  property.n({ type: String })
-], LuksoModal.prototype, "size");
+  decorators_js.property({ type: String })
+], exports.LuksoModal.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-bottom-padding" })
-], LuksoModal.prototype, "hasBottomPadding");
-customElements.define("lukso-modal", LuksoModal);
-
-exports.LuksoModal = LuksoModal;
+  decorators_js.property({ type: Boolean, attribute: "has-bottom-padding" })
+], exports.LuksoModal.prototype, "hasBottomPadding", 2);
+exports.LuksoModal = __decorateClass([
+  index.safeCustomElement("lukso-modal")
+], exports.LuksoModal);

package/dist/components/lukso-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;;AAE7D,qBAAa,UAAW,SAAQ,eAA0B;IAExD,MAAM,UAAQ;IAGd,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,UAAU,CAAU;IAG1B,gBAAgB,UAAQ;IAExB,OAAO,CAAC,MAAM,CAwDZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAmBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;;AAE7D,qBACa,UAAW,SAAQ,eAA0B;IAExD,MAAM,UAAQ;IAGd,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,UAAU,CAAU;IAG1B,gBAAgB,UAAQ;IAExB,OAAO,CAAC,MAAM,CAwDZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/lukso-modal/index.js

@@ -1,25 +1,28 @@
-import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { w as withTheme } from '../../chunks/chunk-LQIOVPBE-CGhQ79Di.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { withTheme } from '@lukso/core';
+import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
+import '../../chunks/index-N2DggpF2.js';
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class LuksoModal extends withTheme(TailwindElement) {
+let LuksoModal = class extends withTheme(TailwindElement) {
   constructor() {
     super(...arguments);
     this.isOpen = false;
     this.disableAnimations = false;
     this.size = "small";
     this.hasBottomPadding = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y",
         inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
@@ -92,7 +95,7 @@ class LuksoModal extends withTheme(TailwindElement) {
       disableAnimations: this.disableAnimations,
       hasBottomPadding: this.hasBottomPadding
     });
-    return x`
+    return html`
       <div data-testid="modal" class=${wrapper()}>
         <div class=${inner()}>
           <div class=${overlay()} @click=${this.handleBackdropClick}></div>
@@ -103,19 +106,21 @@ class LuksoModal extends withTheme(TailwindElement) {
       </div>
     `;
   }
-}
+};
 __decorateClass([
-  n({ type: Boolean, attribute: "is-open" })
-], LuksoModal.prototype, "isOpen");
+  property({ type: Boolean, attribute: "is-open" })
+], LuksoModal.prototype, "isOpen", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "disable-animations" })
-], LuksoModal.prototype, "disableAnimations");
+  property({ type: Boolean, attribute: "disable-animations" })
+], LuksoModal.prototype, "disableAnimations", 2);
 __decorateClass([
-  n({ type: String })
-], LuksoModal.prototype, "size");
+  property({ type: String })
+], LuksoModal.prototype, "size", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-bottom-padding" })
-], LuksoModal.prototype, "hasBottomPadding");
-customElements.define("lukso-modal", LuksoModal);
+  property({ type: Boolean, attribute: "has-bottom-padding" })
+], LuksoModal.prototype, "hasBottomPadding", 2);
+LuksoModal = __decorateClass([
+  safeCustomElement("lukso-modal")
+], LuksoModal);
 
 export { LuksoModal };