@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -45,6 +45,11 @@ import { TextareaValidationController, TextareaEventController } from './control
  * @slot helper-text - Helper text
  * @slot addon-before - Content before textarea
  * @slot addon-after - Content after textarea
+ *
+ * @csspart container - The outermost wrapper div
+ * @csspart label - The label wrapper div
+ * @csspart input - The native textarea element
+ * @csspart helper-text - The helper/error text wrapper div
  */
 let NrTextareaElement = class NrTextareaElement extends NuralyUIBaseMixin(LitElement) {
     /** Clearable alias for controller interface compatibility */
@@ -459,7 +464,7 @@ let NrTextareaElement = class NrTextareaElement extends NuralyUIBaseMixin(LitEle
     }
     renderLabel() {
         return html `
-      <div class="textarea-label">
+      <div class="textarea-label" part="label">
         <slot name="label"></slot>
         ${this.required ? html `<span class="required-indicator">*</span>` : ''}
       </div>
@@ -469,6 +474,7 @@ let NrTextareaElement = class NrTextareaElement extends NuralyUIBaseMixin(LitEle
         return html `
       <textarea
         class="textarea-element"
+        part="input"
         .value=${this.value}
         .disabled=${this.disabled}
         .readOnly=${this.readonly}
@@ -519,7 +525,7 @@ let NrTextareaElement = class NrTextareaElement extends NuralyUIBaseMixin(LitEle
         if (!hasHelperSlotContent && !hasValidationMessages)
             return '';
         return html `
-      <div class="helper-text">
+      <div class="helper-text" part="helper-text">
         ${hasValidationMessages ?
             this.validationResult.messages.map(msg => html `<div class="validation-message ${this.validationResult.level}">${msg}</div>`) :
             html `<slot name="helper-text"></slot>`}
@@ -538,7 +544,7 @@ let NrTextareaElement = class NrTextareaElement extends NuralyUIBaseMixin(LitEle
             this.validationResult ? `validation-${this.validationResult.level}` : ''
         ].filter(Boolean).join(' ');
         return html `
-      <div class="${classes}">
+      <div class="${classes}" part="container">
         ${this.renderLabel()}
         
         <div class="textarea-wrapper">
@@ -565,6 +571,7 @@ let NrTextareaElement = class NrTextareaElement extends NuralyUIBaseMixin(LitEle
     `;
     }
 };
+NrTextareaElement.useShadowDom = true;
 NrTextareaElement.styles = styles;
 __decorate([
     query('textarea')

package/dist/src/components/textarea/textarea.style.d.ts

@@ -1,19 +1,7 @@
 /**
  * Textarea component styles for the Hybrid UI Library
  *
- * This file contains al  .textarea-element::placeholder {
-    color: var(--nuraly-color-textarea-placeholder, #8c8c8c);
-  }
-
-  .textarea-element:hover {
-    border-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-    border-bottom-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-  }
-
-  .textarea-element:focus {
-    border-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    border-bottom-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    box-shadow: 0 0 0 1px var(--nuraly-color-textarea-border-focus, #7c3aed); for the nr-textarea component, including:
+ * This file contains all styling for the nr-textarea component, including:
  * - Base textarea styles with CSS custom properties for theming
  * - Multiple textarea states (default, warning, error)
  * - Size variations (small, medium, large)

package/dist/src/components/textarea/textarea.style.js

@@ -2,19 +2,7 @@ import { css } from 'lit';
 /**
  * Textarea component styles for the Hybrid UI Library
  *
- * This file contains al  .textarea-element::placeholder {
-    color: var(--nuraly-color-textarea-placeholder, #8c8c8c);
-  }
-
-  .textarea-element:hover {
-    border-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-    border-bottom-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-  }
-
-  .textarea-element:focus {
-    border-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    border-bottom-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    box-shadow: 0 0 0 1px var(--nuraly-color-textarea-border-focus, #7c3aed); for the nr-textarea component, including:
+ * This file contains all styling for the nr-textarea component, including:
  * - Base textarea styles with CSS custom properties for theming
  * - Multiple textarea states (default, warning, error)
  * - Size variations (small, medium, large)
@@ -60,13 +48,13 @@ export const styles = css `
   :host {
     display: block;
     position: relative;
-    font-family: var(--nuraly-font-family-textarea, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
   }
 
   .textarea-container {
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-spacing-textarea-gap, 8px);
+    gap: 8px;
     width: 100%;
   }
 
@@ -74,21 +62,21 @@ export const styles = css `
     display: flex;
     align-items: center;
     gap: 4px;
-    font-size: var(--nuraly-font-size-textarea, 16px);
+    font-size: 16px;
     font-weight: 500;
-    color: var(--nuraly-color-textarea-label, #262626);
-    line-height: var(--nuraly-line-height-textarea, 1.5);
+    color: #262626;
+    line-height: 1.5;
   }
 
   .required-indicator {
-    color: var(--nuraly-color-textarea-error, #ef4444);
+    color: #ef4444;
     font-weight: 600;
   }
 
   .textarea-wrapper {
     display: flex;
     align-items: flex-start;
-    gap: var(--nuraly-spacing-textarea-gap, 8px);
+    gap: 8px;
     position: relative;
   }
 
@@ -96,7 +84,7 @@ export const styles = css `
   .addon-after {
     display: flex;
     align-items: flex-start;
-    padding-top: var(--nuraly-padding-textarea, 12px);
+    padding-top: 12px;
   }
 
   .textarea-input-container {
@@ -109,89 +97,89 @@ export const styles = css `
   .textarea-element {
     width: 100%;
     min-height: 80px;
-    padding: var(--nuraly-padding-textarea, 12px);
-    border-top: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
-    border-left: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
-    border-right: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
-    border-bottom: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border-bottom, var(--nuraly-color-textarea-border, #d9d9d9));
-    border-radius: var(--nuraly-border-radius-textarea, 6px);
-    background-color: var(--nuraly-color-textarea-background, #ffffff);
-    color: var(--nuraly-color-textarea-text, #262626);
-    font-family: var(--nuraly-font-family-textarea, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
-    font-size: var(--nuraly-font-size-textarea, 16px);
-    line-height: var(--nuraly-line-height-textarea, 1.5);
+    padding: 12px;
+    border-top: 1px solid #d9d9d9;
+    border-left: 1px solid #d9d9d9;
+    border-right: 1px solid #d9d9d9;
+    border-bottom: 1px solid #d9d9d9;
+    border-radius: 6px;
+    background-color: #ffffff;
+    color: #262626;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
     outline: none;
     transition: border-color 0.2s ease-in-out;
     box-sizing: border-box;
   }
 
   .textarea-element::placeholder {
-    color: var(--nuraly-color-textarea-placeholder, #8c8c8c);
+    color: #8c8c8c;
   }
 
   .textarea-element:hover:not(:disabled):not(:focus) {
-    border-top-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-    border-left-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-    border-right-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
-    border-bottom-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
+    border-top-color: #7c3aed;
+    border-left-color: #7c3aed;
+    border-right-color: #7c3aed;
+    border-bottom-color: #7c3aed;
   }
 
   .textarea-element:focus {
-    border-top-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    border-left-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    border-right-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    border-bottom-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
-    box-shadow: 0 0 0 1px var(--nuraly-color-textarea-border-focus, #7c3aed);
+    border-top-color: #7c3aed;
+    border-left-color: #7c3aed;
+    border-right-color: #7c3aed;
+    border-bottom-color: #7c3aed;
+    box-shadow: 0 0 0 1px #7c3aed;
   }
 
   .textarea-element:disabled {
-    background-color: var(--nuraly-color-surface-disabled, #f5f5f5);
-    color: var(--nuraly-color-text-disabled, #8c8c8c);
-    border-color: var(--nuraly-color-border-disabled, #d9d9d9);
+    background-color: #f5f5f5;
+    color: #8c8c8c;
+    border-color: #d9d9d9;
     cursor: not-allowed;
     resize: none;
   }
 
   .textarea-element:disabled {
-    background-color: var(--nuraly-color-surface-disabled, #f5f5f5);
-    color: var(--nuraly-color-text-disabled, #8c8c8c);
-    border-color: var(--nuraly-color-border-disabled, #d9d9d9);
+    background-color: #f5f5f5;
+    color: #8c8c8c;
+    border-color: #d9d9d9;
     cursor: not-allowed;
     resize: none;
   }
 
   .textarea-element:read-only {
-    background-color: var(--nuraly-color-surface-readonly, #f9f9f9);
+    background-color: #f9f9f9;
     cursor: default;
   }
 
   /* Size variants */
   .size-small .textarea-element {
-    font-size: var(--nuraly-font-size-textarea-small, 14px);
-    padding: calc(var(--nuraly-padding-textarea, 12px) * 0.75);
+    font-size: 14px;
+    padding: calc(12px * 0.75);
     min-height: 60px;
   }
 
   .size-large .textarea-element {
-    font-size: var(--nuraly-font-size-textarea-large, 18px);
-    padding: calc(var(--nuraly-padding-textarea, 12px) * 1.25);
+    font-size: 18px;
+    padding: calc(12px * 1.25);
     min-height: 100px;
   }
 
   /* Variant styles */
   .variant-outlined .textarea-element {
-    border: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
-    background-color: var(--nuraly-color-textarea-background, #ffffff);
+    border: 1px solid #d9d9d9;
+    background-color: #ffffff;
   }
 
   .variant-filled .textarea-element {
-    border: var(--nuraly-border-width-textarea, 1px) solid transparent;
-    background-color: var(--nuraly-color-surface-secondary, #f5f5f5);
+    border: 1px solid transparent;
+    background-color: #f5f5f5;
   }
 
   .variant-filled .textarea-element:focus {
-    background-color: var(--nuraly-color-textarea-background, #ffffff);
-    border-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
+    background-color: #ffffff;
+    border-color: #7c3aed;
   }
 
   .variant-borderless .textarea-element {
@@ -203,7 +191,7 @@ export const styles = css `
 
   .variant-underlined .textarea-element {
     border: none;
-    border-bottom: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
+    border-bottom: 1px solid #d9d9d9;
     border-radius: 0;
     background-color: transparent;
     padding-left: 0;
@@ -211,57 +199,57 @@ export const styles = css `
   }
 
   .variant-underlined .textarea-element:focus {
-    border-bottom-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
+    border-bottom-color: #7c3aed;
     box-shadow: none;
   }
 
   /* State styles */
   .state-error .textarea-element,
   .validation-error .textarea-element {
-    border-color: var(--nuraly-color-textarea-error, #ef4444);
+    border-color: #ef4444;
   }
 
   .state-error .textarea-element:focus,
   .validation-error .textarea-element:focus {
-    border-color: var(--nuraly-color-textarea-error, #ef4444);
-    box-shadow: 0 0 0 1px var(--nuraly-color-textarea-error, #ef4444);
+    border-color: #ef4444;
+    box-shadow: 0 0 0 1px #ef4444;
   }
 
   .state-warning .textarea-element,
   .validation-warning .textarea-element {
-    border-color: var(--nuraly-color-textarea-warning, #f59e0b);
+    border-color: #f59e0b;
   }
 
   .state-warning .textarea-element:focus,
   .validation-warning .textarea-element:focus {
-    border-color: var(--nuraly-color-textarea-warning, #f59e0b);
-    box-shadow: 0 0 0 1px var(--nuraly-color-textarea-warning, #f59e0b);
+    border-color: #f59e0b;
+    box-shadow: 0 0 0 1px #f59e0b;
   }
 
   /* Icons */
   .validation-icon,
   .clear-button {
     position: absolute;
-    top: var(--nuraly-padding-textarea, 12px);
-    right: var(--nuraly-padding-textarea, 12px);
+    top: 12px;
+    right: 12px;
     z-index: 1;
   }
 
   .validation-icon {
-    color: var(--nuraly-color-textarea-icon, #8c8c8c);
+    color: #8c8c8c;
     pointer-events: none;
   }
 
   .validation-icon.error {
-    color: var(--nuraly-color-textarea-error, #ef4444);
+    color: #ef4444;
   }
 
   .validation-icon.warning {
-    color: var(--nuraly-color-textarea-warning, #f59e0b);
+    color: #f59e0b;
   }
 
   .validation-icon.success {
-    color: var(--nuraly-color-textarea-success, #10b981);
+    color: #10b981;
   }
 
   .clear-button {
@@ -271,25 +259,25 @@ export const styles = css `
     background: none;
     border: none;
     cursor: pointer;
-    color: var(--nuraly-color-textarea-icon, #8c8c8c);
+    color: #8c8c8c;
     padding: 2px;
     border-radius: 4px;
     transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   }
 
   .clear-button:hover {
-    color: var(--nuraly-color-textarea-icon-hover, #7c3aed);
-    background-color: var(--nuraly-color-surface-hover, rgba(0, 0, 0, 0.05));
+    color: #7c3aed;
+    background-color: rgba(0, 0, 0, 0.05);
   }
 
   .clear-button:active {
-    color: var(--nuraly-color-textarea-icon-active, #6d28d9);
+    color: #6d28d9;
   }
 
   /* Adjust textarea padding when icons are present */
   :host([allow-clear]) .textarea-element,
   :host([has-feedback]) .textarea-element {
-    padding-right: calc(var(--nuraly-padding-textarea, 12px) + 16px + 8px);
+    padding-right: calc(12px + 16px + 8px);
   }
 
   /* Footer */
@@ -297,15 +285,15 @@ export const styles = css `
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    gap: var(--nuraly-spacing-textarea-gap, 8px);
+    gap: 8px;
     min-height: 20px;
   }
 
   .helper-text {
     flex: 1;
-    font-size: var(--nuraly-font-size-textarea-small, 14px);
+    font-size: 14px;
     line-height: 1.4;
-    color: var(--nuraly-color-textarea-helper-text, #666666);
+    color: #666666;
   }
 
   .validation-message {
@@ -317,26 +305,26 @@ export const styles = css `
   }
 
   .validation-message.error {
-    color: var(--nuraly-color-textarea-error, #ef4444);
+    color: #ef4444;
   }
 
   .validation-message.warning {
-    color: var(--nuraly-color-textarea-warning, #f59e0b);
+    color: #f59e0b;
   }
 
   .validation-message.success {
-    color: var(--nuraly-color-textarea-success, #10b981);
+    color: #10b981;
   }
 
   .character-count {
-    font-size: var(--nuraly-font-size-textarea-small, 14px);
-    color: var(--nuraly-color-textarea-counter, #666666);
+    font-size: 14px;
+    color: #666666;
     white-space: nowrap;
     line-height: 1.4;
   }
 
   .character-count.over-limit {
-    color: var(--nuraly-color-textarea-counter-over, #ef4444);
+    color: #ef4444;
     font-weight: 500;
   }
 
@@ -346,7 +334,7 @@ export const styles = css `
       flex-direction: column;
       align-items: stretch;
     }
-    
+
     .character-count {
       text-align: right;
     }
@@ -354,7 +342,7 @@ export const styles = css `
 
   /* Focus-visible for accessibility */
   .textarea-element:focus-visible {
-    outline: 2px solid var(--nuraly-color-textarea-border-focus, #7c3aed);
+    outline: 2px solid #7c3aed;
     outline-offset: 2px;
   }
 
@@ -363,9 +351,9 @@ export const styles = css `
     .textarea-element {
       border-width: 2px;
     }
-    
+
     .textarea-element:focus {
-      box-shadow: 0 0 0 2px var(--nuraly-color-textarea-border-focus, #7c3aed);
+      box-shadow: 0 0 0 2px #7c3aed;
     }
   }