@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/input/utils/input-renderers.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult, nothing } from 'lit';
+/**
+ * Rendering utilities for input component icons and elements
+ */
+export declare class InputRenderUtils {
+    /**
+     * Renders prefix content (Light DOM — children passed in directly)
+     */
+    static renderPrefix(children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders suffix content (Light DOM — children passed in directly)
+     */
+    static renderSuffix(children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders addon before content (outside input borders)
+     * Only renders if hasAddonBefore is true
+     */
+    static renderAddonBefore(hasAddonBefore: boolean, children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders addon after content (outside input borders)
+     * Only renders if hasAddonAfter is true
+     */
+    static renderAddonAfter(hasAddonAfter: boolean, children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders the copy icon when withCopy is enabled
+     */
+    static renderCopyIcon(withCopy: boolean, disabled: boolean, readonly: boolean, onCopy: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders the clear icon when allowClear is enabled and there's content
+     */
+    static renderClearIcon(allowClear: boolean, value: string, disabled: boolean, readonly: boolean, onClear: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders state-based icons (warning, error)
+     */
+    static renderStateIcon(state: string): TemplateResult | typeof nothing;
+    /**
+     * Renders the calendar icon for calendar input type
+     */
+    static renderCalendarIcon(state: string, type: string): TemplateResult | typeof nothing;
+    /**
+     * Renders password toggle icon
+     */
+    static renderPasswordIcon(type: string, inputType: string, disabled: boolean, readonly: boolean, onToggle: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders number input increment/decrement icons
+     */
+    static renderNumberIcons(type: string, state: string, disabled: boolean, readonly: boolean, onIncrement: () => void, onDecrement: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=input-renderers.d.ts.map

package/dist/src/components/input/utils/input-renderers.js

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Rendering utilities for input component icons and elements
+ */
+export class InputRenderUtils {
+    /**
+     * Renders prefix content (Light DOM — children passed in directly)
+     */
+    static renderPrefix(children = []) {
+        if (children.length === 0)
+            return nothing;
+        return html `
+      <div class="input-prefix">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders suffix content (Light DOM — children passed in directly)
+     */
+    static renderSuffix(children = []) {
+        if (children.length === 0)
+            return nothing;
+        return html `
+      <div class="input-suffix">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders addon before content (outside input borders)
+     * Only renders if hasAddonBefore is true
+     */
+    static renderAddonBefore(hasAddonBefore, children = []) {
+        if (!hasAddonBefore)
+            return nothing;
+        return html `
+      <div class="input-addon-before">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders addon after content (outside input borders)
+     * Only renders if hasAddonAfter is true
+     */
+    static renderAddonAfter(hasAddonAfter, children = []) {
+        if (!hasAddonAfter)
+            return nothing;
+        return html `
+      <div class="input-addon-after">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders the copy icon when withCopy is enabled
+     */
+    static renderCopyIcon(withCopy, disabled, readonly, onCopy, onKeydown) {
+        if (!withCopy)
+            return nothing;
+        return html `<nr-icon
+      name="copy"
+      type="regular"
+      id="copy-icon"
+      role="button"
+      aria-label="Copy input value"
+      tabindex="0"
+      @click=${!disabled && !readonly ? onCopy : nothing}
+      @keydown=${onKeydown}
+    ></nr-icon>`;
+    }
+    /**
+     * Renders the clear icon when allowClear is enabled and there's content
+     */
+    static renderClearIcon(allowClear, value, disabled, readonly, onClear, onKeydown) {
+        if (!allowClear || !value || disabled || readonly)
+            return nothing;
+        return html `<nr-icon
+      name="times-circle"
+      type="regular"
+      id="clear-icon"
+      role="button"
+      aria-label="Clear input value"
+      tabindex="0"
+      @click=${onClear}
+      @keydown=${onKeydown}
+    ></nr-icon>`;
+    }
+    /**
+     * Renders state-based icons (warning, error)
+     */
+    static renderStateIcon(state) {
+        switch (state) {
+            case "warning" /* INPUT_STATE.Warning */:
+                return html `<nr-icon name="warning" id="warning-icon"></nr-icon>`;
+            case "error" /* INPUT_STATE.Error */:
+                return html `<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;
+            default:
+                return nothing;
+        }
+    }
+    /**
+     * Renders the calendar icon for calendar input type
+     */
+    static renderCalendarIcon(state, type) {
+        if (state !== "default" /* INPUT_STATE.Default */ || type !== "calendar" /* INPUT_TYPE.CALENDAR */) {
+            return nothing;
+        }
+        return html `<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`;
+    }
+    /**
+     * Renders password toggle icon
+     */
+    static renderPasswordIcon(type, inputType, disabled, readonly, onToggle, onKeydown) {
+        if (type !== "password" /* INPUT_TYPE.PASSWORD */)
+            return nothing;
+        if (inputType === "text" /* INPUT_TYPE.TEXT */) {
+            return html `<nr-icon
+        name="eye-slash"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Hide password"
+        tabindex="0"
+        @click=${!disabled && !readonly ? onToggle : nothing}
+        @keydown=${onKeydown}
+      ></nr-icon>`;
+        }
+        else {
+            return html `<nr-icon
+        name="eye"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Show password"
+        tabindex="0"
+        @click=${!disabled && !readonly ? onToggle : nothing}
+        @keydown=${onKeydown}
+      ></nr-icon>`;
+        }
+    }
+    /**
+     * Renders number input increment/decrement icons
+     */
+    static renderNumberIcons(type, state, disabled, readonly, onIncrement, onDecrement, onKeydown) {
+        if (type !== "number" /* INPUT_TYPE.NUMBER */)
+            return nothing;
+        return html `
+      <div id="number-icons">
+        ${state !== "default" /* INPUT_STATE.Default */ ? html `<span id="icons-separator">|</span>` : nothing}
+        <nr-icon
+          name="minus"
+          aria-label="Decrease value"
+          role="button"
+          tabindex="0"
+          @click=${!disabled && !readonly ? onDecrement : nothing}
+          @keydown=${onKeydown}
+        ></nr-icon>
+        <span id="icons-separator">|</span>
+        <nr-icon
+          name="plus"
+          aria-label="Increase value"
+          role="button"
+          tabindex="0"
+          @click=${!disabled && !readonly ? onIncrement : nothing}
+          @keydown=${onKeydown}
+        ></nr-icon>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=input-renderers.js.map

package/dist/src/components/input/utils/input-validation.utils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Validation utilities for input components
+ */
+export declare class InputValidationUtils {
+    /**
+     * Validates numeric properties (min, max, step) to ensure they are valid numbers
+     */
+    static validateNumericProperties(type: string, min?: string, max?: string, step?: string): void;
+    /**
+     * Prevents non-numeric characters from being typed in number inputs
+     */
+    static preventNonNumericInput(keyDownEvent: KeyboardEvent, min?: string): void;
+    /**
+     * Validates a numeric value against min/max constraints
+     */
+    static validateNumericValue(value: string, min?: string, max?: string): {
+        isValid: boolean;
+        warnings: string[];
+    };
+}
+//# sourceMappingURL=input-validation.utils.d.ts.map

package/dist/src/components/input/utils/input-validation.utils.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Validation utilities for input components
+ */
+export class InputValidationUtils {
+    /**
+     * Validates numeric properties (min, max, step) to ensure they are valid numbers
+     */
+    static validateNumericProperties(type, min, max, step) {
+        if (type === "number" /* INPUT_TYPE.NUMBER */) {
+            if (min && Number.isNaN(Number(min))) {
+                console.warn(`Invalid min value: "${min}" is not a valid number`);
+            }
+            if (max && Number.isNaN(Number(max))) {
+                console.warn(`Invalid max value: "${max}" is not a valid number`);
+            }
+            if (step && Number.isNaN(Number(step))) {
+                console.warn(`Invalid step value: "${step}" is not a valid number`);
+            }
+            if (min && max && Number(min) >= Number(max)) {
+                console.warn(`Invalid range: min value (${min}) should be less than max value (${max})`);
+            }
+        }
+    }
+    /**
+     * Prevents non-numeric characters from being typed in number inputs
+     */
+    static preventNonNumericInput(keyDownEvent, min) {
+        const key = keyDownEvent.key;
+        const target = keyDownEvent.target;
+        const currentValue = target.value;
+        const cursorPosition = target.selectionStart || 0;
+        // Allow control keys (backspace, delete, tab, escape, enter, arrow keys, etc.)
+        const allowedControlKeys = [
+            'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End', 'PageUp', 'PageDown'
+        ];
+        // Allow Ctrl/Cmd combinations (copy, paste, select all, etc.)
+        if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
+            return;
+        }
+        // Allow control keys
+        if (allowedControlKeys.includes(key)) {
+            return;
+        }
+        // Allow digits
+        if (/^\d$/.test(key)) {
+            return;
+        }
+        // Allow decimal point (.) only once and allow it at the beginning for values like ".5"
+        if (key === '.' || key === ',') {
+            const hasDecimal = currentValue.includes('.') || currentValue.includes(',');
+            if (!hasDecimal) {
+                return;
+            }
+        }
+        // Allow minus sign (-) only at the beginning and if min allows negative numbers
+        if (key === '-') {
+            const hasMinusSign = currentValue.includes('-');
+            const minAllowsNegative = !min || Number(min) < 0;
+            if (!hasMinusSign && cursorPosition === 0 && minAllowsNegative) {
+                return;
+            }
+        }
+        // Allow plus sign (+) only at the beginning
+        if (key === '+') {
+            const hasPlusSign = currentValue.includes('+');
+            if (!hasPlusSign && cursorPosition === 0) {
+                return;
+            }
+        }
+        keyDownEvent.preventDefault();
+    }
+    /**
+     * Validates a numeric value against min/max constraints
+     */
+    static validateNumericValue(value, min, max) {
+        const warnings = [];
+        if (!value) {
+            return { isValid: true, warnings };
+        }
+        const numericValue = Number(value);
+        if (Number.isNaN(numericValue)) {
+            return {
+                isValid: false,
+                warnings: [`Invalid numeric value: "${value}"`]
+            };
+        }
+        if (min && numericValue < Number(min)) {
+            warnings.push(`Value ${numericValue} is below minimum ${min}`);
+        }
+        if (max && numericValue > Number(max)) {
+            warnings.push(`Value ${numericValue} is above maximum ${max}`);
+        }
+        return { isValid: true, warnings };
+    }
+}
+//# sourceMappingURL=input-validation.utils.js.map

package/dist/src/components/kv-secret-select/bundle.js

@@ -55,6 +55,7 @@ import{css as t,LitElement as e,html as r,nothing as i}from"lit";import{property
       </div>
     `}render(){const t=this.entries.filter(t=>t.isSecret).map(t=>({label:t.keyPath.replace(`${this.provider}/`,""),value:t.keyPath,icon:"url"===this.type?"link":"key"})),e=`No ${this.getTypeLabel().toLowerCase()}s for ${this.provider}`;return r`
       <nr-select
+        part="container"
         .value=${this.value}
         .options=${t}
         placeholder=${this.placeholder}
@@ -180,4 +181,4 @@ import{css as t,LitElement as e,html as r,nothing as i}from"lit";import{property
       color: var(--text-secondary, #6b7280);
       font-size: 13px;
     }
-  `,n([o({type:String})],d.prototype,"provider",void 0),n([o({type:String})],d.prototype,"value",void 0),n([o({type:String})],d.prototype,"placeholder",void 0),n([o({type:String})],d.prototype,"type",void 0),n([o({attribute:!1})],d.prototype,"entries",void 0),n([o({type:Boolean})],d.prototype,"loading",void 0),n([s()],d.prototype,"showCreateForm",void 0),n([s()],d.prototype,"newKeyName",void 0),n([s()],d.prototype,"newKeyValue",void 0),n([s()],d.prototype,"creating",void 0),n([s()],d.prototype,"error",void 0),d=n([a("nr-kv-secret-select")],d);export{d as NrKvSecretSelect};
+  `,d.useShadowDom=!0,n([o({type:String})],d.prototype,"provider",void 0),n([o({type:String})],d.prototype,"value",void 0),n([o({type:String})],d.prototype,"placeholder",void 0),n([o({type:String})],d.prototype,"type",void 0),n([o({attribute:!1})],d.prototype,"entries",void 0),n([o({type:Boolean})],d.prototype,"loading",void 0),n([s()],d.prototype,"showCreateForm",void 0),n([s()],d.prototype,"newKeyName",void 0),n([s()],d.prototype,"newKeyValue",void 0),n([s()],d.prototype,"creating",void 0),n([s()],d.prototype,"error",void 0),d=n([a("nr-kv-secret-select")],d);export{d as NrKvSecretSelect};

package/dist/src/components/kv-secret-select/kv-secret-select.component.d.ts

@@ -37,9 +37,12 @@ export interface KvSecretEntry {
  *
  * @fires value-change - Fired when selection changes
  * @fires create-entry - Fired when user submits the create form. Detail: { keyPath, value, scope, isSecret }
+ *
+ * @csspart container - The root nr-select wrapper
  */
 export declare class NrKvSecretSelect extends LitElement {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Provider/scope to filter display labels */
     provider: string;
     /** Currently selected key path */

package/dist/src/components/kv-secret-select/kv-secret-select.component.js

@@ -35,6 +35,8 @@ import { property, customElement, state } from 'lit/decorators.js';
  *
  * @fires value-change - Fired when selection changes
  * @fires create-entry - Fired when user submits the create form. Detail: { keyPath, value, scope, isSecret }
+ *
+ * @csspart container - The root nr-select wrapper
  */
 let NrKvSecretSelect = class NrKvSecretSelect extends LitElement {
     constructor() {
@@ -191,6 +193,7 @@ let NrKvSecretSelect = class NrKvSecretSelect extends LitElement {
         const noOptionsMessage = `No ${typeLabel}s for ${this.provider}`;
         return html `
       <nr-select
+        part="container"
         .value=${this.value}
         .options=${options}
         placeholder=${this.placeholder}
@@ -320,6 +323,7 @@ NrKvSecretSelect.styles = css `
       font-size: 13px;
     }
   `;
+NrKvSecretSelect.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrKvSecretSelect.prototype, "provider", void 0);

package/dist/src/components/label/bundle.js

@@ -1,104 +1,81 @@
-import{css as a,LitElement as l,html as r}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";var t=a`
-  ${a`
-  :host {
-    /* Typography */
-    --nuraly-label-font-family: var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
-    --nuraly-label-font-weight: var(--nuraly-font-weight-medium, 300);
-    --nuraly-label-line-height: var(--nuraly-line-height-base, auto);
-
-    /* Size variants */
-    --nuraly-label-small-font-size: var(--nuraly-font-size-xs, 12px);
-    --nuraly-label-medium-font-size: var(--nuraly-font-size-sm, 14px);
-    --nuraly-label-large-font-size: var(--nuraly-font-size-base, 16px);
-
-    /* Default font size */
-    --nuraly-label-font-size: var(--nuraly-label-medium-font-size);
-
-    /* Colors */
-    --nuraly-label-text-color: var(--nuraly-color-text-primary, #000000);
-    --nuraly-label-secondary-color: var(--nuraly-color-text-secondary, #666666);
-    --nuraly-label-error-color: var(--nuraly-color-error-500, #ff4d4f);
-    --nuraly-label-warning-color: var(--nuraly-color-warning-500, #faad14);
-    --nuraly-label-success-color: var(--nuraly-color-success-500, #52c41a);
-    --nuraly-label-required-color: var(--nuraly-color-error-500, #ff4d4f);
-    --nuraly-label-disabled-color: var(--nuraly-color-text-disabled, #bfbfbf);
-
-    /* Spacing */
-    --nuraly-label-margin-bottom: var(--nuraly-spacing-xs, 4px);
-    --nuraly-label-required-margin: var(--nuraly-spacing-2xs, 2px);
-
-    /* Transitions */
-    --nuraly-label-transition-duration: var(--nuraly-transition-duration-base, 150ms);
-    --nuraly-label-transition-timing: var(--nuraly-transition-timing-ease, ease);
-  }
-`}
-
+import{css as e,html as t,LitElement as s}from"lit";import{property as i,customElement as o}from"lit/decorators.js";var n=e`
   :host {
     display: inline-block;
     width: fit-content;
   }
 
   label {
-    font-family: var(--nuraly-label-font-family);
-    font-size: var(--nuraly-label-font-size);
-    font-weight: var(--nuraly-label-font-weight);
-    line-height: var(--nuraly-label-line-height);
-    color: var(--nuraly-label-text-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 300;
+    line-height: normal;
+    color: var(--nr-text, #161616);
     margin: 0;
-    margin-bottom: var(--nuraly-label-margin-bottom);
+    margin-bottom: 4px;
     display: block;
     user-select: none;
     cursor: pointer;
-    transition: color var(--nuraly-label-transition-duration) var(--nuraly-label-transition-timing);
+    transition: color 150ms ease;
   }
 
   /* Size variants */
   :host([size="small"]) label {
-    font-size: var(--nuraly-label-small-font-size);
+    font-size: 0.75rem;
   }
 
   :host([size="large"]) label {
-    font-size: var(--nuraly-label-large-font-size);
+    font-size: 1rem;
   }
 
   /* Variant colors */
   :host([variant="secondary"]) label {
-    color: var(--nuraly-label-secondary-color);
+    color: var(--nr-text-secondary, #525252);
   }
 
   :host([variant="error"]) label {
-    color: var(--nuraly-label-error-color);
+    color: #da1e28;
   }
 
   :host([variant="warning"]) label {
-    color: var(--nuraly-label-warning-color);
+    color: #f1c21b;
   }
 
   :host([variant="success"]) label {
-    color: var(--nuraly-label-success-color);
+    color: #198038;
   }
 
   /* Disabled state */
   :host([disabled]) label {
-    color: var(--nuraly-label-disabled-color);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
     opacity: 0.6;
   }
 
   /* Required asterisk */
   .required-asterisk {
-    color: var(--nuraly-label-required-color);
-    margin-left: var(--nuraly-label-required-margin);
+    color: #da1e28;
+    margin-left: 2px;
     font-weight: normal;
   }
-
-  /* Focus-within for accessibility when label is associated with form elements */
-  :host(:focus-within) label:not([disabled]) {
-    opacity: 0.8;
-  }
-`,i=function(a,l,r,e){for(var o,n=arguments.length,t=n<3?l:null===e?e=Object.getOwnPropertyDescriptor(l,r):e,i=a.length-1;i>=0;i--)(o=a[i])&&(t=(n<3?o(t):n>3?o(l,r,t):o(l,r))||t);return n>3&&t&&Object.defineProperty(l,r,t),t};let s=class extends(n(l)){constructor(){super(...arguments),this.size="medium",this.variant="default",this.required=!1,this.disabled=!1,this.value=""}connectedCallback(){super.connectedCallback(),this.updateDataTheme()}updated(){this.updateDataTheme()}updateDataTheme(){this.closest("[data-theme]")||this.setAttribute("data-theme",this.currentTheme)}render(){return r`
-            <label for=${this.for||""}>
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;const r=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,s;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(s=this.mediaQuery)||void 0===s||s.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const s=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return s||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},a=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},l=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(a())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!a())return!0;let t=!0;for(const s of this.requiredComponents)if(!this.isComponentAvailable(s)){t=!1;const i=new Error(`Required component "${s}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(s,i):console.error(i.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},c=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var s;const i=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(s=this.tagName)||void 0===s?void 0:s.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,i)}dispatchInputEvent(e,t){const s=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,s)}dispatchFocusEvent(e,t){const s=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,s)}dispatchValidationEvent(e,t){var s;const i=Object.assign({target:t.target||this,value:t.value,isValid:null!==(s=t.isValid)&&void 0!==s&&s,error:t.error},t);this.dispatchCustomEvent(e,i)}dispatchActionEvent(e,t){const s=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,s)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},d=new Set,h=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const u=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),s=e.styles;if(s){const e=m(s);e&&function(e,t,s){var i;if(!h.has(e)){const s=new CSSStyleSheet;s.replaceSync(t),h.set(e,s)}const o=h.get(e),n=`doc:${e}`;if(d.has(n)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],d.add(n)),s){let t=s;for(;t;){const s=t.getRootNode();if(!(s instanceof ShadowRoot))break;{const n=`shadow:${((null===(i=s.host)||void 0===i?void 0:i.tagName)||"").toLowerCase()}:${e}`;d.has(n)||(s.adoptedStyleSheets=[...s.adoptedStyleSheets,o],d.add(n)),t=s.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var p=function(e,t,s,i){for(var o,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i,a=e.length-1;a>=0;a--)(o=e[a])&&(r=(n<3?o(r):n>3?o(t,s,r):o(t,s))||r);return n>3&&r&&Object.defineProperty(t,s,r),r};let v=class extends((e=>l(r(c(u(e)))))(s)){constructor(){super(...arguments),this.size="medium",this.variant="default",this.required=!1,this.disabled=!1,this.value=""}render(){return t`
+            <label part="label" for=${this.for||""}>
                 <slot></slot>
-                ${this.required?r`<span class="required-asterisk">*</span>`:""}
+                ${this.required?t`<span part="required-asterisk" class="required-asterisk">*</span>`:""}
             </label>
-        `}};s.styles=t,i([e({reflect:!0})],s.prototype,"size",void 0),i([e({reflect:!0})],s.prototype,"variant",void 0),i([e({type:Boolean,reflect:!0})],s.prototype,"required",void 0),i([e({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),i([e()],s.prototype,"for",void 0),i([e()],s.prototype,"value",void 0),s=i([o("nr-label")],s);export{s as HyTextLabel};
+        `}};v.styles=n,v.useShadowDom=!0,p([i({reflect:!0})],v.prototype,"size",void 0),p([i({reflect:!0})],v.prototype,"variant",void 0),p([i({type:Boolean,reflect:!0})],v.prototype,"required",void 0),p([i({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),p([i()],v.prototype,"for",void 0),p([i()],v.prototype,"value",void 0),v=p([o("nr-label")],v);export{v as HyTextLabel};

package/dist/src/components/label/label.component.d.ts

@@ -1,17 +1,21 @@
 import { LitElement } from "lit";
 import { LabelSize, LabelVariant } from './label.types.js';
-declare const HyTextLabel_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const HyTextLabel_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * A flexible label component for form fields and descriptive text.
+ *
+ * @csspart label - The root native label element
+ * @csspart required-asterisk - The asterisk span shown when required is true
+ */
 export declare class HyTextLabel extends HyTextLabel_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     size: LabelSize;
     variant: LabelVariant;
     required: boolean;
     disabled: boolean;
     for?: string;
     value: string;
-    connectedCallback(): void;
-    updated(): void;
-    private updateDataTheme;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/src/components/label/label.component.js

@@ -8,6 +8,12 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import styles from "./label.style.js";
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * A flexible label component for form fields and descriptive text.
+ *
+ * @csspart label - The root native label element
+ * @csspart required-asterisk - The asterisk span shown when required is true
+ */
 let HyTextLabel = class HyTextLabel extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
@@ -17,28 +23,17 @@ let HyTextLabel = class HyTextLabel extends NuralyUIBaseMixin(LitElement) {
         this.disabled = false;
         this.value = '';
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateDataTheme();
-    }
-    updated() {
-        this.updateDataTheme();
-    }
-    updateDataTheme() {
-        if (!this.closest('[data-theme]')) {
-            this.setAttribute('data-theme', this.currentTheme);
-        }
-    }
     render() {
         return html `
-            <label for=${this.for || ''}>
+            <label part="label" for=${this.for || ''}>
                 <slot></slot>
-                ${this.required ? html `<span class="required-asterisk">*</span>` : ''}
+                ${this.required ? html `<span part="required-asterisk" class="required-asterisk">*</span>` : ''}
             </label>
         `;
     }
 };
 HyTextLabel.styles = styles;
+HyTextLabel.useShadowDom = true;
 __decorate([
     property({ reflect: true })
 ], HyTextLabel.prototype, "size", void 0);