@nuralyui/button 0.0.18 → 0.0.19

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 (11) hide show
  1. package/bundle.js +78 -41
  2. package/button.component.d.ts +2 -2
  3. package/button.component.js +2 -2
  4. package/button.component.js.map +1 -1
  5. package/button.style.js +73 -36
  6. package/button.style.js.map +1 -1
  7. package/button.types.d.ts +2 -6
  8. package/button.types.js.map +1 -1
  9. package/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/react.js.map +1 -1
package/bundle.js CHANGED
@@ -30,7 +30,6 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
30
30
  font-weight: var(--nuraly-font-weight-regular);
31
31
  line-height: 1.125rem;
32
32
  letter-spacing: 0.16px;
33
- min-width: 5rem;
34
33
  height: 3rem;
35
34
  padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
36
35
  border: 1px solid transparent;
@@ -49,8 +48,8 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
49
48
  text-shadow: none;
50
49
 
51
50
  &:focus {
52
- outline: var(--nuraly-focus-outline);
53
- outline-offset: var(--nuraly-focus-outline-offset);
51
+ /* outline: var(--nuraly-focus-outline); */
52
+ /* outline-offset: var(--nuraly-focus-outline-offset); */
54
53
  }
55
54
 
56
55
  &:disabled {
@@ -115,6 +114,13 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
115
114
  border-color: var(--nuraly-color-button-primary);
116
115
  color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
117
116
 
117
+ /* Ensure icons inherit the white text color for primary buttons */
118
+ nr-icon {
119
+ fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
120
+ color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
121
+ --nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
122
+ }
123
+
118
124
  &:hover:not(:disabled) {
119
125
  background-color: var(--nuraly-color-button-primary-hover);
120
126
  border-color: var(--nuraly-color-button-primary-hover);
@@ -128,9 +134,9 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
128
134
  }
129
135
 
130
136
  &:focus:not(:disabled) {
131
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
132
- outline-offset: 2px;
133
- box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
137
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
138
+ /* outline-offset: 2px; */
139
+ /* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */
134
140
  }
135
141
 
136
142
  &:disabled {
@@ -161,8 +167,8 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
161
167
  }
162
168
 
163
169
  &:focus:not(:disabled) {
164
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
165
- outline-offset: 2px;
170
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
171
+ /* outline-offset: 2px; */
166
172
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
167
173
  }
168
174
 
@@ -194,8 +200,8 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
194
200
  }
195
201
 
196
202
  &:focus:not(:disabled) {
197
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
198
- outline-offset: 2px;
203
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
204
+ /* outline-offset: 2px; */
199
205
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
200
206
  }
201
207
 
@@ -208,27 +214,25 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
208
214
  }
209
215
  }
210
216
 
211
- /* Tertiary/Ghost Button - Carbon Design System compliant */
212
- :host([type="tertiary"]), :host([type="ghost"]) button {
217
+ /* Ghost Button - Transparent with border */
218
+ :host([type="ghost"]) button {
213
219
  background-color: var(--nuraly-color-button-outline, transparent);
214
220
  border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
215
- color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));
221
+ color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));
216
222
 
217
223
  &:hover:not(:disabled) {
218
224
  background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
219
- border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));
220
- color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));
225
+ border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));
226
+ color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));
221
227
  }
222
228
 
223
229
  &:active:not(:disabled) {
224
230
  background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
225
- border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
226
- color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
231
+ border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));
232
+ color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));
227
233
  }
228
234
 
229
235
  &:focus:not(:disabled) {
230
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
231
- outline-offset: 2px;
232
236
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
233
237
  }
234
238
 
@@ -237,7 +241,7 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
237
241
  border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
238
242
  color: var(--nuraly-color-button-disabled-text);
239
243
  cursor: not-allowed;
240
- opacity: 1; /* Reset opacity for proper disabled state */
244
+ opacity: 1;
241
245
  }
242
246
  }
243
247
 
@@ -260,8 +264,8 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
260
264
  }
261
265
 
262
266
  &:focus:not(:disabled) {
263
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
264
- outline-offset: 2px;
267
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
268
+ /* outline-offset: 2px; */
265
269
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
266
270
  }
267
271
 
@@ -278,26 +282,41 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
278
282
  :host(:not([size])) button {
279
283
  height: var(--nuraly-size-md);
280
284
  padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
285
+ min-width: var(--nuraly-button-min-width, 5rem);
281
286
  }
282
287
 
283
288
  /* Size variants */
284
289
  :host([size="small"]) button {
285
290
  height: var(--nuraly-size-sm);
286
- padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);
291
+ padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);
287
292
  font-size: 0.75rem;
288
- min-width: 4rem;
293
+ min-width: var(--nuraly-button-min-width, 4.5rem);
294
+ gap: 0.375rem;
295
+ }
296
+
297
+ :host([size="small"]) button nr-icon {
298
+ width: 0.875rem;
299
+ height: 0.875rem;
300
+ font-size: 0.875rem !important;
289
301
  }
290
302
 
291
303
  :host([size="medium"]) button {
292
304
  height: var(--nuraly-size-md);
293
- padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
305
+ padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));
306
+ min-width: var(--nuraly-button-min-width, 5rem);
294
307
  }
295
308
 
296
309
  :host([size="large"]) button {
297
310
  height: var(--nuraly-size-lg);
298
- padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
311
+ padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));
299
312
  font-size: 1rem;
300
- min-width: 6rem;
313
+ min-width: var(--nuraly-button-min-width, 6rem);
314
+ }
315
+
316
+ :host([size="large"]) button nr-icon {
317
+ width: 1.25rem;
318
+ height: 1.25rem;
319
+ font-size: 1.25rem !important;
301
320
  }
302
321
 
303
322
  /* Full width */
@@ -316,24 +335,44 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
316
335
  }
317
336
 
318
337
  /* Shape variants */
338
+
339
+ /* Round - Pill-shaped with rounded ends */
319
340
  :host([shape="round"]) button {
341
+ border-radius: 9999px;
342
+ padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);
343
+ }
344
+
345
+ :host([shape="round"][size="small"]) button {
346
+ padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);
347
+ }
348
+
349
+ :host([shape="round"][size="large"]) button {
350
+ padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);
351
+ }
352
+
353
+ /* Circle - Perfect circle for icon-only buttons */
354
+ :host([shape="circle"]) button {
320
355
  border-radius: 50%;
321
356
  min-width: auto;
322
357
  width: var(--nuraly-size-md);
358
+ height: var(--nuraly-size-md);
323
359
  aspect-ratio: 1;
324
360
  padding: 0;
325
361
  }
326
362
 
327
- :host([shape="round"][size="small"]) button {
363
+ :host([shape="circle"][size="small"]) button {
328
364
  width: var(--nuraly-size-sm);
365
+ height: var(--nuraly-size-sm);
329
366
  }
330
367
 
331
- :host([shape="round"][size="medium"]) button {
368
+ :host([shape="circle"][size="medium"]) button {
332
369
  width: var(--nuraly-size-md);
370
+ height: var(--nuraly-size-md);
333
371
  }
334
372
 
335
- :host([shape="round"][size="large"]) button {
373
+ :host([shape="circle"][size="large"]) button {
336
374
  width: var(--nuraly-size-lg);
375
+ height: var(--nuraly-size-lg);
337
376
  }
338
377
 
339
378
  /* Enhanced Ripple Effect Animation - Theme-aware */
@@ -376,9 +415,8 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
376
415
  opacity: 0.1;
377
416
  }
378
417
 
379
- :host([type="ghost"]) .ripple,
380
- :host([type="tertiary"]) .ripple {
381
- background: var(--nuraly-color-button-tertiary, #0f62fe);
418
+ :host([type="ghost"]) .ripple {
419
+ background: var(--nuraly-color-button-primary, #0f62fe);
382
420
  opacity: 0.2;
383
421
  }
384
422
 
@@ -392,9 +430,8 @@ import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property
392
430
  opacity: 0.1;
393
431
  }
394
432
 
395
- [data-theme="carbon-dark"] :host([type="ghost"]) .ripple,
396
- [data-theme="carbon-dark"] :host([type="tertiary"]) .ripple {
397
- background: var(--nuraly-color-button-tertiary, #78a9ff);
433
+ [data-theme="carbon-dark"] :host([type="ghost"]) .ripple {
434
+ background: var(--nuraly-color-button-primary, #78a9ff);
398
435
  opacity: 0.2;
399
436
  }
400
437
 
@@ -496,22 +533,22 @@ class u{constructor(t){this._host=t,this._host.addController(this)}get host(){re
496
533
  * @license
497
534
  * Copyright 2023 Nuraly, Laabidi Aymen
498
535
  * SPDX-License-Identifier: MIT
499
- */class d extends u{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,o=r.getBoundingClientRect(),e=2*Math.max(o.width,o.height),a=t.clientX-o.left-e/2,n=t.clientY-o.top-e/2,i=document.createElement("span");i.className="ripple",i.style.width=i.style.height=e+"px",i.style.left=a+"px",i.style.top=n+"px";r.querySelectorAll(".ripple").forEach((t=>t.remove())),r.appendChild(i),setTimeout((()=>{i.remove()}),600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
536
+ */class d extends u{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,o=r.getBoundingClientRect(),e=2*Math.max(o.width,o.height),a=t.clientX-o.left-e/2,n=t.clientY-o.top-e/2,i=document.createElement("span");i.className="ripple",i.style.width=i.style.height=e+"px",i.style.left=a+"px",i.style.top=n+"px";r.querySelectorAll(".ripple").forEach(t=>t.remove()),r.appendChild(i),setTimeout(()=>{i.remove()},600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
500
537
  /**
501
538
  * @license
502
539
  * Copyright 2023 Nuraly, Laabidi Aymen
503
540
  * SPDX-License-Identifier: MIT
504
- */class b extends u{handleKeyboardActivation(t){try{if(this.host.disabled)return;this.isActivationKey(t)&&(t.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:t.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"handleKeyboardActivation")}}handleKeydown(t){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(t))return void t.preventDefault()}this.handleKeyboardActivation(t)}catch(t){this.handleError(t,"handleKeydown")}}isActivationKey(t){return"Enter"===t.key||" "===t.key}isReadonlyKeyAllowed(t){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(t.key)}}
541
+ */class h extends u{handleKeyboardActivation(t){try{if(this.host.disabled)return;this.isActivationKey(t)&&(t.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:t.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"handleKeyboardActivation")}}handleKeydown(t){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(t))return void t.preventDefault()}this.handleKeyboardActivation(t)}catch(t){this.handleError(t,"handleKeydown")}}isActivationKey(t){return"Enter"===t.key||" "===t.key}isReadonlyKeyAllowed(t){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(t.key)}}
505
542
  /**
506
543
  * @license
507
544
  * Copyright 2023 Nuraly, Laabidi Aymen
508
545
  * SPDX-License-Identifier: MIT
509
- */class h extends u{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
546
+ */class b extends u{isLinkType(){return!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
510
547
  /**
511
548
  * @license
512
549
  * Copyright 2023 Nuraly, Laabidi Aymen
513
550
  * SPDX-License-Identifier: MIT
514
- */var y=function(t,r,o,e){for(var a,n=arguments.length,i=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,o):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(n<3?a(i):n>3?a(r,o,i):a(r,o))||i);return n>3&&i&&Object.defineProperty(r,o,i),i};let p=class extends(l(r)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=s,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=s,this.target=s,this.ripple=!0,this.buttonAriaLabel=s,this.ariaDescribedBy=s,this.htmlType=s,this.requiredComponents=["nr-icon"],this.rippleController=new d(this),this.keyboardController=new b(this),this.linkController=new h(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||o,"data-state":this.loading?"loading":o,"data-theme":this.currentTheme,"data-block":this.block?"true":o,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||o,"aria-describedby":this.ariaDescribedBy||o,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),o}const r=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const o=r();return e`<nr-icon name=${t} size=${i(o)}></nr-icon>`}const{name:a,type:n="solid",size:l,color:s,alt:c}=t,u=l||r();return e`<nr-icon
551
+ */var y=function(t,r,o,e){for(var a,n=arguments.length,i=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,o):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(n<3?a(i):n>3?a(r,o,i):a(r,o))||i);return n>3&&i&&Object.defineProperty(r,o,i),i};let p=class extends(l(r)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=s,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=s,this.target=s,this.ripple=!0,this.buttonAriaLabel=s,this.ariaDescribedBy=s,this.htmlType=s,this.requiredComponents=["nr-icon"],this.rippleController=new d(this),this.keyboardController=new h(this),this.linkController=new b(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||o,"data-state":this.loading?"loading":o,"data-theme":this.currentTheme,"data-block":this.block?"true":o,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||o,"aria-describedby":this.ariaDescribedBy||o,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),o}const r=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const o=r();return e`<nr-icon name=${t} size=${i(o)}></nr-icon>`}const{name:a,type:n="solid",size:l,color:s,alt:c}=t,u=l||r();return e`<nr-icon
515
552
  name=${a}
516
553
  type=${n}
517
554
  alt=${c||""}
@@ -566,4 +603,4 @@ class u{constructor(t){this._host=t,this._host.addController(this)}get host(){re
566
603
  >
567
604
  ${l}
568
605
  </button>
569
- `}};p.styles=c,y([a({type:Boolean})],p.prototype,"disabled",void 0),y([a({type:Boolean})],p.prototype,"loading",void 0),y([a({type:String})],p.prototype,"size",void 0),y([a({type:String})],p.prototype,"type",void 0),y([a({type:String})],p.prototype,"shape",void 0),y([a({type:Boolean})],p.prototype,"block",void 0),y([a({type:Boolean})],p.prototype,"dashed",void 0),y([a({type:Array})],p.prototype,"icon",void 0),y([a({type:Object})],p.prototype,"iconLeft",void 0),y([a({type:Object})],p.prototype,"iconRight",void 0),y([a({type:Object})],p.prototype,"icons",void 0),y([a({reflect:!0})],p.prototype,"iconPosition",void 0),y([a({type:String})],p.prototype,"href",void 0),y([a({type:String})],p.prototype,"target",void 0),y([a({type:Boolean})],p.prototype,"ripple",void 0),y([a({type:String})],p.prototype,"buttonAriaLabel",void 0),y([a({type:String})],p.prototype,"ariaDescribedBy",void 0),y([a({type:String})],p.prototype,"htmlType",void 0),p=y([n("nr-button")],p);export{p as NrButtonElement};
606
+ `}};p.styles=c,y([a({type:Boolean})],p.prototype,"disabled",void 0),y([a({type:Boolean})],p.prototype,"loading",void 0),y([a({type:String})],p.prototype,"size",void 0),y([a({type:String,reflect:!0})],p.prototype,"type",void 0),y([a({type:String})],p.prototype,"shape",void 0),y([a({type:Boolean})],p.prototype,"block",void 0),y([a({type:Boolean})],p.prototype,"dashed",void 0),y([a({type:Array})],p.prototype,"icon",void 0),y([a({type:Object})],p.prototype,"iconLeft",void 0),y([a({type:Object})],p.prototype,"iconRight",void 0),y([a({type:Object})],p.prototype,"icons",void 0),y([a({reflect:!0})],p.prototype,"iconPosition",void 0),y([a({type:String})],p.prototype,"href",void 0),y([a({type:String})],p.prototype,"target",void 0),y([a({type:Boolean})],p.prototype,"ripple",void 0),y([a({type:String})],p.prototype,"buttonAriaLabel",void 0),y([a({type:String})],p.prototype,"ariaDescribedBy",void 0),y([a({type:String})],p.prototype,"htmlType",void 0),p=y([n("nr-button")],p);export{p as NrButtonElement};
package/button.component.d.ts CHANGED
@@ -43,7 +43,7 @@ export declare class NrButtonElement extends NrButtonElement_base implements But
43
43
  loading: boolean;
44
44
  /** Button size (small, medium, large) */
45
45
  size: ButtonSize | '';
46
- /** Button type (default, primary, secondary, danger, ghost, link) */
46
+ /** Button type (default, primary, secondary, danger, ghost) */
47
47
  type: ButtonType;
48
48
  /** Button shape (default, circle, round) */
49
49
  shape: ButtonShape;
@@ -90,7 +90,7 @@ export declare class NrButtonElement extends NrButtonElement_base implements But
90
90
  * Get the resolved right icon from various sources
91
91
  */
92
92
  private getResolvedRightIcon;
93
- render(): import("lit").TemplateResult<1>;
93
+ render(): import("lit-html").TemplateResult<1>;
94
94
  }
95
95
  export {};
96
96
  //# sourceMappingURL=button.component.d.ts.map
package/button.component.js CHANGED
@@ -54,7 +54,7 @@ let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement
54
54
  this.loading = false;
55
55
  /** Button size (small, medium, large) */
56
56
  this.size = EMPTY_STRING;
57
- /** Button type (default, primary, secondary, danger, ghost, link) */
57
+ /** Button type (default, primary, secondary, danger, ghost) */
58
58
  this.type = "default" /* ButtonType.Default */;
59
59
  /** Button shape (default, circle, round) */
60
60
  this.shape = "default" /* ButtonShape.Default */;
@@ -261,7 +261,7 @@ __decorate([
261
261
  property({ type: String })
262
262
  ], NrButtonElement.prototype, "size", void 0);
263
263
  __decorate([
264
- property({ type: String })
264
+ property({ type: String, reflect: true })
265
265
  ], NrButtonElement.prototype, "type", void 0);
266
266
  __decorate([
267
267
  property({ type: String })
package/button.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import controllers\nimport {\n ButtonRippleController,\n ButtonKeyboardController,\n ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n static override styles = styles;\n /** Disables the button */\n @property({ type: Boolean })\n disabled = false;\n\n /** Shows loading spinner */\n @property({ type: Boolean })\n loading = false;\n\n /** Button size (small, medium, large) */\n @property({ type: String })\n size: ButtonSize | '' = EMPTY_STRING;\n\n /** Button type (default, primary, secondary, danger, ghost, link) */\n @property({ type: String })\n type: ButtonType = ButtonType.Default;\n\n /** Button shape (default, circle, round) */\n @property({ type: String })\n shape: ButtonShape = ButtonShape.Default;\n\n /** Makes button full width */\n @property({ type: Boolean })\n block = false;\n\n /** Applies dashed border */\n @property({ type: Boolean })\n dashed = false;\n\n /** Icon configuration (supports strings or enhanced config objects) */\n @property({ type: Array })\n icon: ButtonIcons = [];\n\n /** Left icon (alternative to icon array) */\n @property({ type: Object })\n iconLeft?: ButtonIcon;\n\n /** Right icon (alternative to icon array) */\n @property({ type: Object })\n iconRight?: ButtonIcon;\n\n /** Icon configuration object (alternative to icon array) */\n @property({ type: Object })\n icons?: ButtonIconsConfig;\n\n /** Icon position relative to text */\n @property({ reflect: true })\n iconPosition: IconPosition = IconPosition.Left;\n\n /** URL for link-type buttons */\n @property({ type: String })\n href = EMPTY_STRING;\n\n /** Target attribute for links */\n @property({ type: String })\n target = EMPTY_STRING;\n\n /** Enables ripple effect */\n @property({ type: Boolean })\n ripple = true;\n\n /** Custom aria-label */\n @property({ type: String })\n buttonAriaLabel = EMPTY_STRING;\n\n /** References to descriptive elements */\n @property({ type: String })\n ariaDescribedBy = EMPTY_STRING;\n\n /** HTML button type */\n @property({ type: String })\n htmlType = EMPTY_STRING;\n\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private rippleController = new ButtonRippleController(this);\n private keyboardController = new ButtonKeyboardController(this);\n private linkController = new ButtonLinkController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n private getCommonAttributes() {\n return {\n 'data-type': this.type,\n 'data-shape': this.shape,\n 'data-size': this.size || nothing,\n 'data-state': this.loading ? 'loading' : nothing,\n 'data-theme': this.currentTheme,\n 'data-block': this.block ? 'true' : nothing,\n 'class': this.dashed ? 'button-dashed' : '',\n 'aria-disabled': this.disabled ? 'true' : 'false',\n 'aria-label': this.buttonAriaLabel || nothing,\n 'aria-describedby': this.ariaDescribedBy || nothing,\n 'tabindex': this.disabled ? '-1' : '0'\n };\n }\n\n private renderIcon(iconConfig: ButtonIcon) {\n if (!this.isComponentAvailable('nr-icon')) {\n const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n console.warn(\n `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n `Ensure the icon component is imported and registered.`\n );\n return nothing;\n }\n\n // Get appropriate icon size based on button size\n const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n switch (this.size) {\n case ButtonSize.Small:\n return 'small';\n case ButtonSize.Medium:\n return 'medium';\n case ButtonSize.Large:\n return 'large';\n default:\n return 'medium'; // Default to medium if no size specified\n }\n };\n\n // Handle simple string input (backward compatibility)\n if (typeof iconConfig === 'string') {\n const iconSize = getIconSizeForButtonSize();\n return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n }\n\n // Handle enhanced icon configuration\n const {\n name,\n type = 'solid',\n size,\n color,\n alt\n } = iconConfig;\n\n // Use explicit size if provided, otherwise use size based on button size\n const resolvedSize = size || getIconSizeForButtonSize();\n const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n return html`<nr-icon \n name=${name}\n type=${type}\n alt=${alt || ''}\n size=${ifDefined(iconSize)}\n color=${color || ''}\n ></nr-icon>`;\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.rippleController.handleRippleClick(event);\n \n if (this.linkController.isLinkType()) {\n this.linkController.handleLinkNavigation(event);\n }\n \n this.dispatchEventWithMetadata('button-clicked', {\n type: this.type,\n disabled: this.disabled,\n loading: this.loading,\n href: this.href || null\n });\n }\n\n private handleKeydown(event: KeyboardEvent) {\n this.keyboardController.handleKeydown(event);\n }\n\n /**\n * Get the resolved left icon from various sources\n */\n private getResolvedLeftIcon(): ButtonIcon | undefined {\n // Priority: iconLeft > icons.left > icon[0]\n if (this.iconLeft) return this.iconLeft;\n if (this.icons?.left) return this.icons.left;\n if (this.icon?.length > 0) return this.icon[0];\n return undefined;\n }\n\n /**\n * Get the resolved right icon from various sources\n */\n private getResolvedRightIcon(): ButtonIcon | undefined {\n // Priority: iconRight > icons.right > icon[1]\n if (this.iconRight) return this.iconRight;\n if (this.icons?.right) return this.icons.right;\n if (this.icon?.length === 2) return this.icon[1];\n return undefined;\n }\n\n override render() {\n const elementTag = this.linkController.getElementTag();\n const commonAttributes = this.getCommonAttributes();\n const linkAttributes = this.linkController.getLinkAttributes();\n \n const leftIcon = this.getResolvedLeftIcon();\n const rightIcon = this.getResolvedRightIcon();\n \n const content = html`\n <span id=\"container\" part=\"container\">\n ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n <slot id=\"slot\"></slot>\n ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n </span>\n `;\n if (elementTag === 'a') {\n return html`\n <a\n href=\"${linkAttributes.href}\"\n target=\"${linkAttributes.target || nothing}\"\n rel=\"${linkAttributes.rel || nothing}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\"\n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </a>\n `;\n }\n \n return html`\n <button\n ?disabled=\"${this.disabled}\"\n type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\" \n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </button>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import controllers\nimport {\n ButtonRippleController,\n ButtonKeyboardController,\n ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n static override styles = styles;\n /** Disables the button */\n @property({ type: Boolean })\n disabled = false;\n\n /** Shows loading spinner */\n @property({ type: Boolean })\n loading = false;\n\n /** Button size (small, medium, large) */\n @property({ type: String })\n size: ButtonSize | '' = EMPTY_STRING;\n\n /** Button type (default, primary, secondary, danger, ghost) */\n @property({ type: String, reflect: true })\n type: ButtonType = ButtonType.Default;\n\n /** Button shape (default, circle, round) */\n @property({ type: String })\n shape: ButtonShape = ButtonShape.Default;\n\n /** Makes button full width */\n @property({ type: Boolean })\n block = false;\n\n /** Applies dashed border */\n @property({ type: Boolean })\n dashed = false;\n\n /** Icon configuration (supports strings or enhanced config objects) */\n @property({ type: Array })\n icon: ButtonIcons = [];\n\n /** Left icon (alternative to icon array) */\n @property({ type: Object })\n iconLeft?: ButtonIcon;\n\n /** Right icon (alternative to icon array) */\n @property({ type: Object })\n iconRight?: ButtonIcon;\n\n /** Icon configuration object (alternative to icon array) */\n @property({ type: Object })\n icons?: ButtonIconsConfig;\n\n /** Icon position relative to text */\n @property({ reflect: true })\n iconPosition: IconPosition = IconPosition.Left;\n\n /** URL for link-type buttons */\n @property({ type: String })\n href = EMPTY_STRING;\n\n /** Target attribute for links */\n @property({ type: String })\n target = EMPTY_STRING;\n\n /** Enables ripple effect */\n @property({ type: Boolean })\n ripple = true;\n\n /** Custom aria-label */\n @property({ type: String })\n buttonAriaLabel = EMPTY_STRING;\n\n /** References to descriptive elements */\n @property({ type: String })\n ariaDescribedBy = EMPTY_STRING;\n\n /** HTML button type */\n @property({ type: String })\n htmlType = EMPTY_STRING;\n\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private rippleController = new ButtonRippleController(this);\n private keyboardController = new ButtonKeyboardController(this);\n private linkController = new ButtonLinkController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n private getCommonAttributes() {\n return {\n 'data-type': this.type,\n 'data-shape': this.shape,\n 'data-size': this.size || nothing,\n 'data-state': this.loading ? 'loading' : nothing,\n 'data-theme': this.currentTheme,\n 'data-block': this.block ? 'true' : nothing,\n 'class': this.dashed ? 'button-dashed' : '',\n 'aria-disabled': this.disabled ? 'true' : 'false',\n 'aria-label': this.buttonAriaLabel || nothing,\n 'aria-describedby': this.ariaDescribedBy || nothing,\n 'tabindex': this.disabled ? '-1' : '0'\n };\n }\n\n private renderIcon(iconConfig: ButtonIcon) {\n if (!this.isComponentAvailable('nr-icon')) {\n const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n console.warn(\n `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n `Ensure the icon component is imported and registered.`\n );\n return nothing;\n }\n\n // Get appropriate icon size based on button size\n const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n switch (this.size) {\n case ButtonSize.Small:\n return 'small';\n case ButtonSize.Medium:\n return 'medium';\n case ButtonSize.Large:\n return 'large';\n default:\n return 'medium'; // Default to medium if no size specified\n }\n };\n\n // Handle simple string input (backward compatibility)\n if (typeof iconConfig === 'string') {\n const iconSize = getIconSizeForButtonSize();\n return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n }\n\n // Handle enhanced icon configuration\n const {\n name,\n type = 'solid',\n size,\n color,\n alt\n } = iconConfig;\n\n // Use explicit size if provided, otherwise use size based on button size\n const resolvedSize = size || getIconSizeForButtonSize();\n const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n return html`<nr-icon \n name=${name}\n type=${type}\n alt=${alt || ''}\n size=${ifDefined(iconSize)}\n color=${color || ''}\n ></nr-icon>`;\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.rippleController.handleRippleClick(event);\n \n if (this.linkController.isLinkType()) {\n this.linkController.handleLinkNavigation(event);\n }\n \n this.dispatchEventWithMetadata('button-clicked', {\n type: this.type,\n disabled: this.disabled,\n loading: this.loading,\n href: this.href || null\n });\n }\n\n private handleKeydown(event: KeyboardEvent) {\n this.keyboardController.handleKeydown(event);\n }\n\n /**\n * Get the resolved left icon from various sources\n */\n private getResolvedLeftIcon(): ButtonIcon | undefined {\n // Priority: iconLeft > icons.left > icon[0]\n if (this.iconLeft) return this.iconLeft;\n if (this.icons?.left) return this.icons.left;\n if (this.icon?.length > 0) return this.icon[0];\n return undefined;\n }\n\n /**\n * Get the resolved right icon from various sources\n */\n private getResolvedRightIcon(): ButtonIcon | undefined {\n // Priority: iconRight > icons.right > icon[1]\n if (this.iconRight) return this.iconRight;\n if (this.icons?.right) return this.icons.right;\n if (this.icon?.length === 2) return this.icon[1];\n return undefined;\n }\n\n override render() {\n const elementTag = this.linkController.getElementTag();\n const commonAttributes = this.getCommonAttributes();\n const linkAttributes = this.linkController.getLinkAttributes();\n \n const leftIcon = this.getResolvedLeftIcon();\n const rightIcon = this.getResolvedRightIcon();\n \n const content = html`\n <span id=\"container\" part=\"container\">\n ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n <slot id=\"slot\"></slot>\n ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n </span>\n `;\n if (elementTag === 'a') {\n return html`\n <a\n href=\"${linkAttributes.href}\"\n target=\"${linkAttributes.target || nothing}\"\n rel=\"${linkAttributes.rel || nothing}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\"\n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </a>\n `;\n }\n \n return html`\n <button\n ?disabled=\"${this.disabled}\"\n type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\" \n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </button>\n `;\n }\n}\n"]}
package/button.style.js CHANGED
@@ -38,7 +38,6 @@ export const buttonStyles = css `
38
38
  font-weight: var(--nuraly-font-weight-regular);
39
39
  line-height: 1.125rem;
40
40
  letter-spacing: 0.16px;
41
- min-width: 5rem;
42
41
  height: 3rem;
43
42
  padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
44
43
  border: 1px solid transparent;
@@ -57,8 +56,8 @@ export const buttonStyles = css `
57
56
  text-shadow: none;
58
57
 
59
58
  &:focus {
60
- outline: var(--nuraly-focus-outline);
61
- outline-offset: var(--nuraly-focus-outline-offset);
59
+ /* outline: var(--nuraly-focus-outline); */
60
+ /* outline-offset: var(--nuraly-focus-outline-offset); */
62
61
  }
63
62
 
64
63
  &:disabled {
@@ -123,6 +122,13 @@ export const buttonStyles = css `
123
122
  border-color: var(--nuraly-color-button-primary);
124
123
  color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
125
124
 
125
+ /* Ensure icons inherit the white text color for primary buttons */
126
+ nr-icon {
127
+ fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
128
+ color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
129
+ --nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
130
+ }
131
+
126
132
  &:hover:not(:disabled) {
127
133
  background-color: var(--nuraly-color-button-primary-hover);
128
134
  border-color: var(--nuraly-color-button-primary-hover);
@@ -136,9 +142,9 @@ export const buttonStyles = css `
136
142
  }
137
143
 
138
144
  &:focus:not(:disabled) {
139
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
140
- outline-offset: 2px;
141
- box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
145
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
146
+ /* outline-offset: 2px; */
147
+ /* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */
142
148
  }
143
149
 
144
150
  &:disabled {
@@ -169,8 +175,8 @@ export const buttonStyles = css `
169
175
  }
170
176
 
171
177
  &:focus:not(:disabled) {
172
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
173
- outline-offset: 2px;
178
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
179
+ /* outline-offset: 2px; */
174
180
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
175
181
  }
176
182
 
@@ -202,8 +208,8 @@ export const buttonStyles = css `
202
208
  }
203
209
 
204
210
  &:focus:not(:disabled) {
205
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
206
- outline-offset: 2px;
211
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
212
+ /* outline-offset: 2px; */
207
213
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
208
214
  }
209
215
 
@@ -216,27 +222,25 @@ export const buttonStyles = css `
216
222
  }
217
223
  }
218
224
 
219
- /* Tertiary/Ghost Button - Carbon Design System compliant */
220
- :host([type="tertiary"]), :host([type="ghost"]) button {
225
+ /* Ghost Button - Transparent with border */
226
+ :host([type="ghost"]) button {
221
227
  background-color: var(--nuraly-color-button-outline, transparent);
222
228
  border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
223
- color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));
229
+ color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));
224
230
 
225
231
  &:hover:not(:disabled) {
226
232
  background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
227
- border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));
228
- color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));
233
+ border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));
234
+ color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));
229
235
  }
230
236
 
231
237
  &:active:not(:disabled) {
232
238
  background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
233
- border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
234
- color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
239
+ border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));
240
+ color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));
235
241
  }
236
242
 
237
243
  &:focus:not(:disabled) {
238
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
239
- outline-offset: 2px;
240
244
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
241
245
  }
242
246
 
@@ -245,7 +249,7 @@ export const buttonStyles = css `
245
249
  border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
246
250
  color: var(--nuraly-color-button-disabled-text);
247
251
  cursor: not-allowed;
248
- opacity: 1; /* Reset opacity for proper disabled state */
252
+ opacity: 1;
249
253
  }
250
254
  }
251
255
 
@@ -268,8 +272,8 @@ export const buttonStyles = css `
268
272
  }
269
273
 
270
274
  &:focus:not(:disabled) {
271
- outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
272
- outline-offset: 2px;
275
+ /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
276
+ /* outline-offset: 2px; */
273
277
  box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
274
278
  }
275
279
 
@@ -286,26 +290,41 @@ export const buttonStyles = css `
286
290
  :host(:not([size])) button {
287
291
  height: var(--nuraly-size-md);
288
292
  padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
293
+ min-width: var(--nuraly-button-min-width, 5rem);
289
294
  }
290
295
 
291
296
  /* Size variants */
292
297
  :host([size="small"]) button {
293
298
  height: var(--nuraly-size-sm);
294
- padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);
299
+ padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);
295
300
  font-size: 0.75rem;
296
- min-width: 4rem;
301
+ min-width: var(--nuraly-button-min-width, 4.5rem);
302
+ gap: 0.375rem;
303
+ }
304
+
305
+ :host([size="small"]) button nr-icon {
306
+ width: 0.875rem;
307
+ height: 0.875rem;
308
+ font-size: 0.875rem !important;
297
309
  }
298
310
 
299
311
  :host([size="medium"]) button {
300
312
  height: var(--nuraly-size-md);
301
- padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
313
+ padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));
314
+ min-width: var(--nuraly-button-min-width, 5rem);
302
315
  }
303
316
 
304
317
  :host([size="large"]) button {
305
318
  height: var(--nuraly-size-lg);
306
- padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
319
+ padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));
307
320
  font-size: 1rem;
308
- min-width: 6rem;
321
+ min-width: var(--nuraly-button-min-width, 6rem);
322
+ }
323
+
324
+ :host([size="large"]) button nr-icon {
325
+ width: 1.25rem;
326
+ height: 1.25rem;
327
+ font-size: 1.25rem !important;
309
328
  }
310
329
 
311
330
  /* Full width */
@@ -324,24 +343,44 @@ export const buttonStyles = css `
324
343
  }
325
344
 
326
345
  /* Shape variants */
346
+
347
+ /* Round - Pill-shaped with rounded ends */
327
348
  :host([shape="round"]) button {
349
+ border-radius: 9999px;
350
+ padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);
351
+ }
352
+
353
+ :host([shape="round"][size="small"]) button {
354
+ padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);
355
+ }
356
+
357
+ :host([shape="round"][size="large"]) button {
358
+ padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);
359
+ }
360
+
361
+ /* Circle - Perfect circle for icon-only buttons */
362
+ :host([shape="circle"]) button {
328
363
  border-radius: 50%;
329
364
  min-width: auto;
330
365
  width: var(--nuraly-size-md);
366
+ height: var(--nuraly-size-md);
331
367
  aspect-ratio: 1;
332
368
  padding: 0;
333
369
  }
334
370
 
335
- :host([shape="round"][size="small"]) button {
371
+ :host([shape="circle"][size="small"]) button {
336
372
  width: var(--nuraly-size-sm);
373
+ height: var(--nuraly-size-sm);
337
374
  }
338
375
 
339
- :host([shape="round"][size="medium"]) button {
376
+ :host([shape="circle"][size="medium"]) button {
340
377
  width: var(--nuraly-size-md);
378
+ height: var(--nuraly-size-md);
341
379
  }
342
380
 
343
- :host([shape="round"][size="large"]) button {
381
+ :host([shape="circle"][size="large"]) button {
344
382
  width: var(--nuraly-size-lg);
383
+ height: var(--nuraly-size-lg);
345
384
  }
346
385
 
347
386
  /* Enhanced Ripple Effect Animation - Theme-aware */
@@ -384,9 +423,8 @@ export const buttonStyles = css `
384
423
  opacity: 0.1;
385
424
  }
386
425
 
387
- :host([type="ghost"]) .ripple,
388
- :host([type="tertiary"]) .ripple {
389
- background: var(--nuraly-color-button-tertiary, #0f62fe);
426
+ :host([type="ghost"]) .ripple {
427
+ background: var(--nuraly-color-button-primary, #0f62fe);
390
428
  opacity: 0.2;
391
429
  }
392
430
 
@@ -400,9 +438,8 @@ export const buttonStyles = css `
400
438
  opacity: 0.1;
401
439
  }
402
440
 
403
- [data-theme="carbon-dark"] :host([type="ghost"]) .ripple,
404
- [data-theme="carbon-dark"] :host([type="tertiary"]) .ripple {
405
- background: var(--nuraly-color-button-tertiary, #78a9ff);
441
+ [data-theme="carbon-dark"] :host([type="ghost"]) .ripple {
442
+ background: var(--nuraly-color-button-primary, #78a9ff);
406
443
  opacity: 0.2;
407
444
  }
408
445
 
package/button.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAue9B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-button component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const buttonStyles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n border-color: var(--nuraly-color-border);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-family: var(--nuraly-font-family);\n font-size: 0.875rem;\n font-weight: var(--nuraly-font-weight-regular);\n line-height: 1.125rem;\n letter-spacing: 0.16px;\n min-width: 5rem;\n height: 3rem;\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n border: 1px solid transparent;\n border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));\n background-color: var(--nuraly-color-background);\n color: var(--nuraly-color-text);\n text-decoration: none;\n cursor: pointer;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* Reset any inherited styles that might interfere with theme switching */\n box-shadow: none;\n text-shadow: none;\n \n &:focus {\n outline: var(--nuraly-focus-outline);\n outline-offset: var(--nuraly-focus-outline-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n /* Remove generic opacity - use specific disabled colors instead */\n }\n\n /* Icon styling */\n nr-icon {\n flex-shrink: 0;\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Better text alignment */\n vertical-align: middle;\n line-height: 1;\n /* Ensure icon inherits text color */\n color: inherit;\n /* Override any size attribute with CSS variable */\n font-size: var(--nuraly-button-icon-size, 1rem) !important;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n /* Inherit cursor from button */\n cursor: inherit;\n /* Prevent icon from being focusable */\n pointer-events: none;\n }\n\n /* Icon focus state */\n &:focus:not(:disabled) nr-icon {\n opacity: 1;\n filter: brightness(1.1);\n }\n\n /* Icon active state */\n &:active:not(:disabled) nr-icon {\n opacity: 0.9;\n transform: scale(0.95);\n }\n\n /* Icon hover state */\n &:hover:not(:disabled) nr-icon {\n opacity: 1;\n }\n\n /* Icon spacing - use gap for cleaner spacing */\n gap: 0.5rem;\n \n /* Ensure proper alignment of content */\n #container, [part=\"container\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: inherit;\n }\n }\n\n /* Primary Button - Carbon Design System compliant */\n :host([type=\"primary\"]) button {\n background-color: var(--nuraly-color-button-primary);\n border-color: var(--nuraly-color-button-primary);\n color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-hover);\n border-color: var(--nuraly-color-button-primary-hover);\n color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-active);\n border-color: var(--nuraly-color-button-primary-active);\n color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Secondary Button - Carbon Design System compliant */\n :host([type=\"secondary\"]) button {\n background-color: var(--nuraly-color-button-secondary);\n border-color: var(--nuraly-color-button-secondary);\n color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-hover);\n border-color: var(--nuraly-color-button-secondary-hover);\n color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-active);\n border-color: var(--nuraly-color-button-secondary-active);\n color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default Button - Clean white/light style with defined border */\n :host([type=\"default\"]) button {\n background-color: var(--nuraly-color-background, #ffffff);\n border-color: var(--nuraly-color-border, #d0d0d0);\n color: var(--nuraly-color-text, #161616);\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-background-hover, #f4f4f4);\n border-color: var(--nuraly-color-border-hover, #a8a8a8);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-background-active, #e0e0e0);\n border-color: var(--nuraly-color-border-active, #8d8d8d);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled, #f4f4f4);\n border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);\n color: var(--nuraly-color-button-disabled-text, #c6c6c6);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Tertiary/Ghost Button - Carbon Design System compliant */\n :host([type=\"tertiary\"]), :host([type=\"ghost\"]) button {\n background-color: var(--nuraly-color-button-outline, transparent);\n border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));\n color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));\n border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));\n color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));\n border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));\n color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: transparent;\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Danger Button - Carbon Design System compliant */\n :host([type=\"danger\"]) button {\n background-color: var(--nuraly-color-button-danger);\n border-color: var(--nuraly-color-button-danger);\n color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-hover);\n border-color: var(--nuraly-color-button-danger-hover);\n color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-active);\n border-color: var(--nuraly-color-button-danger-active);\n color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default size when no size attribute is provided (medium) */\n :host(:not([size])) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n }\n\n /* Size variants */\n :host([size=\"small\"]) button {\n height: var(--nuraly-size-sm);\n padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);\n font-size: 0.75rem;\n min-width: 4rem;\n }\n\n :host([size=\"medium\"]) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n }\n\n :host([size=\"large\"]) button {\n height: var(--nuraly-size-lg);\n padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);\n font-size: 1rem;\n min-width: 6rem;\n }\n\n /* Full width */\n :host([full-width]) {\n width: 100%;\n }\n\n :host([full-width]) button {\n width: 100%;\n }\n\n /* Loading state */\n :host([loading]) button {\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n /* Shape variants */\n :host([shape=\"round\"]) button {\n border-radius: 50%;\n min-width: auto;\n width: var(--nuraly-size-md);\n aspect-ratio: 1;\n padding: 0;\n }\n\n :host([shape=\"round\"][size=\"small\"]) button {\n width: var(--nuraly-size-sm);\n }\n\n :host([shape=\"round\"][size=\"medium\"]) button {\n width: var(--nuraly-size-md);\n }\n\n :host([shape=\"round\"][size=\"large\"]) button {\n width: var(--nuraly-size-lg);\n }\n\n /* Enhanced Ripple Effect Animation - Theme-aware */\n .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n transform: scale(0);\n animation: ripple-animation 0.6s linear;\n pointer-events: none;\n z-index: 1;\n }\n\n @keyframes ripple-animation {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 70% {\n transform: scale(3);\n opacity: 0.5;\n }\n 100% {\n transform: scale(4);\n opacity: 0;\n }\n }\n\n /* Ripple effect for different button types - Carbon Design System compliant */\n :host([type=\"primary\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n :host([type=\"secondary\"]) .ripple {\n background: rgba(255, 255, 255, 0.3);\n }\n\n :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #161616);\n opacity: 0.1;\n }\n\n :host([type=\"ghost\"]) .ripple,\n :host([type=\"tertiary\"]) .ripple {\n background: var(--nuraly-color-button-tertiary, #0f62fe);\n opacity: 0.2;\n }\n\n :host([type=\"danger\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n /* Theme-specific ripple adjustments for dark theme */\n [data-theme=\"carbon-dark\"] :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #f4f4f4);\n opacity: 0.1;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"ghost\"]) .ripple,\n [data-theme=\"carbon-dark\"] :host([type=\"tertiary\"]) .ripple {\n background: var(--nuraly-color-button-tertiary, #78a9ff);\n opacity: 0.2;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"primary\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"secondary\"]) .ripple {\n background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"danger\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n /* ========================================\n * CARBON THEME SPECIFIC STYLING\n * Enhanced padding and icon centering for Carbon Design System\n * ======================================== */\n \n /* Carbon theme button styling - apply to all carbon themes */\n :host([data-theme*=\"carbon\"]) button,\n [data-theme*=\"carbon\"] :host button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n }\n \n /* Icon spacing for Carbon theme - improved approach */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n }\n \n /* Specific Carbon theme selectors for better targeting */\n [data-theme=\"carbon-light\"] nr-button button,\n [data-theme=\"carbon-dark\"] nr-button button,\n [data-theme=\"carbon\"] nr-button button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n /* Slight adjustment for perfect optical centering */\n margin-top: -1px;\n }\n \n /* Target the SVG inside nr-icon for better alignment */\n nr-icon svg {\n display: block;\n margin: 0 auto;\n }\n \n /* Icon spacing for Carbon theme */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n \n /* Ensure text is also properly centered */\n span#container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n line-height: 1;\n }\n \n /* Ensure slot content aligns properly */\n slot#slot {\n display: inline-block;\n line-height: inherit;\n }\n }\n`;\n\nexport const styles = buttonStyles;\n"]}
1
+ {"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4gB9B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-button component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const buttonStyles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n border-color: var(--nuraly-color-border);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-family: var(--nuraly-font-family);\n font-size: 0.875rem;\n font-weight: var(--nuraly-font-weight-regular);\n line-height: 1.125rem;\n letter-spacing: 0.16px;\n height: 3rem;\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n border: 1px solid transparent;\n border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));\n background-color: var(--nuraly-color-background);\n color: var(--nuraly-color-text);\n text-decoration: none;\n cursor: pointer;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* Reset any inherited styles that might interfere with theme switching */\n box-shadow: none;\n text-shadow: none;\n \n &:focus {\n /* outline: var(--nuraly-focus-outline); */\n /* outline-offset: var(--nuraly-focus-outline-offset); */\n }\n\n &:disabled {\n cursor: not-allowed;\n /* Remove generic opacity - use specific disabled colors instead */\n }\n\n /* Icon styling */\n nr-icon {\n flex-shrink: 0;\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Better text alignment */\n vertical-align: middle;\n line-height: 1;\n /* Ensure icon inherits text color */\n color: inherit;\n /* Override any size attribute with CSS variable */\n font-size: var(--nuraly-button-icon-size, 1rem) !important;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n /* Inherit cursor from button */\n cursor: inherit;\n /* Prevent icon from being focusable */\n pointer-events: none;\n }\n\n /* Icon focus state */\n &:focus:not(:disabled) nr-icon {\n opacity: 1;\n filter: brightness(1.1);\n }\n\n /* Icon active state */\n &:active:not(:disabled) nr-icon {\n opacity: 0.9;\n transform: scale(0.95);\n }\n\n /* Icon hover state */\n &:hover:not(:disabled) nr-icon {\n opacity: 1;\n }\n\n /* Icon spacing - use gap for cleaner spacing */\n gap: 0.5rem;\n \n /* Ensure proper alignment of content */\n #container, [part=\"container\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: inherit;\n }\n }\n\n /* Primary Button - Carbon Design System compliant */\n :host([type=\"primary\"]) button {\n background-color: var(--nuraly-color-button-primary);\n border-color: var(--nuraly-color-button-primary);\n color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));\n\n /* Ensure icons inherit the white text color for primary buttons */\n nr-icon {\n fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;\n color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;\n --nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-hover);\n border-color: var(--nuraly-color-button-primary-hover);\n color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-active);\n border-color: var(--nuraly-color-button-primary-active);\n color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n /* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Secondary Button - Carbon Design System compliant */\n :host([type=\"secondary\"]) button {\n background-color: var(--nuraly-color-button-secondary);\n border-color: var(--nuraly-color-button-secondary);\n color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-hover);\n border-color: var(--nuraly-color-button-secondary-hover);\n color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-active);\n border-color: var(--nuraly-color-button-secondary-active);\n color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default Button - Clean white/light style with defined border */\n :host([type=\"default\"]) button {\n background-color: var(--nuraly-color-background, #ffffff);\n border-color: var(--nuraly-color-border, #d0d0d0);\n color: var(--nuraly-color-text, #161616);\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-background-hover, #f4f4f4);\n border-color: var(--nuraly-color-border-hover, #a8a8a8);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-background-active, #e0e0e0);\n border-color: var(--nuraly-color-border-active, #8d8d8d);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled, #f4f4f4);\n border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);\n color: var(--nuraly-color-button-disabled-text, #c6c6c6);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Ghost Button - Transparent with border */\n :host([type=\"ghost\"]) button {\n background-color: var(--nuraly-color-button-outline, transparent);\n border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));\n color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));\n border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));\n color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));\n border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));\n color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));\n }\n\n &:focus:not(:disabled) {\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: transparent;\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1;\n }\n }\n\n /* Danger Button - Carbon Design System compliant */\n :host([type=\"danger\"]) button {\n background-color: var(--nuraly-color-button-danger);\n border-color: var(--nuraly-color-button-danger);\n color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-hover);\n border-color: var(--nuraly-color-button-danger-hover);\n color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-active);\n border-color: var(--nuraly-color-button-danger-active);\n color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default size when no size attribute is provided (medium) */\n :host(:not([size])) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n min-width: var(--nuraly-button-min-width, 5rem);\n }\n\n /* Size variants */\n :host([size=\"small\"]) button {\n height: var(--nuraly-size-sm);\n padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);\n font-size: 0.75rem;\n min-width: var(--nuraly-button-min-width, 4.5rem);\n gap: 0.375rem;\n }\n\n :host([size=\"small\"]) button nr-icon {\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.875rem !important;\n }\n\n :host([size=\"medium\"]) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));\n min-width: var(--nuraly-button-min-width, 5rem);\n }\n\n :host([size=\"large\"]) button {\n height: var(--nuraly-size-lg);\n padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));\n font-size: 1rem;\n min-width: var(--nuraly-button-min-width, 6rem);\n }\n\n :host([size=\"large\"]) button nr-icon {\n width: 1.25rem;\n height: 1.25rem;\n font-size: 1.25rem !important;\n }\n\n /* Full width */\n :host([full-width]) {\n width: 100%;\n }\n\n :host([full-width]) button {\n width: 100%;\n }\n\n /* Loading state */\n :host([loading]) button {\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n /* Shape variants */\n\n /* Round - Pill-shaped with rounded ends */\n :host([shape=\"round\"]) button {\n border-radius: 9999px;\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);\n }\n\n :host([shape=\"round\"][size=\"small\"]) button {\n padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);\n }\n\n :host([shape=\"round\"][size=\"large\"]) button {\n padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);\n }\n\n /* Circle - Perfect circle for icon-only buttons */\n :host([shape=\"circle\"]) button {\n border-radius: 50%;\n min-width: auto;\n width: var(--nuraly-size-md);\n height: var(--nuraly-size-md);\n aspect-ratio: 1;\n padding: 0;\n }\n\n :host([shape=\"circle\"][size=\"small\"]) button {\n width: var(--nuraly-size-sm);\n height: var(--nuraly-size-sm);\n }\n\n :host([shape=\"circle\"][size=\"medium\"]) button {\n width: var(--nuraly-size-md);\n height: var(--nuraly-size-md);\n }\n\n :host([shape=\"circle\"][size=\"large\"]) button {\n width: var(--nuraly-size-lg);\n height: var(--nuraly-size-lg);\n }\n\n /* Enhanced Ripple Effect Animation - Theme-aware */\n .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n transform: scale(0);\n animation: ripple-animation 0.6s linear;\n pointer-events: none;\n z-index: 1;\n }\n\n @keyframes ripple-animation {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 70% {\n transform: scale(3);\n opacity: 0.5;\n }\n 100% {\n transform: scale(4);\n opacity: 0;\n }\n }\n\n /* Ripple effect for different button types - Carbon Design System compliant */\n :host([type=\"primary\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n :host([type=\"secondary\"]) .ripple {\n background: rgba(255, 255, 255, 0.3);\n }\n\n :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #161616);\n opacity: 0.1;\n }\n\n :host([type=\"ghost\"]) .ripple {\n background: var(--nuraly-color-button-primary, #0f62fe);\n opacity: 0.2;\n }\n\n :host([type=\"danger\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n /* Theme-specific ripple adjustments for dark theme */\n [data-theme=\"carbon-dark\"] :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #f4f4f4);\n opacity: 0.1;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"ghost\"]) .ripple {\n background: var(--nuraly-color-button-primary, #78a9ff);\n opacity: 0.2;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"primary\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"secondary\"]) .ripple {\n background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"danger\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n /* ========================================\n * CARBON THEME SPECIFIC STYLING\n * Enhanced padding and icon centering for Carbon Design System\n * ======================================== */\n \n /* Carbon theme button styling - apply to all carbon themes */\n :host([data-theme*=\"carbon\"]) button,\n [data-theme*=\"carbon\"] :host button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n }\n \n /* Icon spacing for Carbon theme - improved approach */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n }\n \n /* Specific Carbon theme selectors for better targeting */\n [data-theme=\"carbon-light\"] nr-button button,\n [data-theme=\"carbon-dark\"] nr-button button,\n [data-theme=\"carbon\"] nr-button button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n /* Slight adjustment for perfect optical centering */\n margin-top: -1px;\n }\n \n /* Target the SVG inside nr-icon for better alignment */\n nr-icon svg {\n display: block;\n margin: 0 auto;\n }\n \n /* Icon spacing for Carbon theme */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n \n /* Ensure text is also properly centered */\n span#container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n line-height: 1;\n }\n \n /* Ensure slot content aligns properly */\n slot#slot {\n display: inline-block;\n line-height: inherit;\n }\n }\n`;\n\nexport const styles = buttonStyles;\n"]}
package/button.types.d.ts CHANGED
@@ -1,18 +1,14 @@
1
1
  export declare const enum ButtonType {
2
2
  Primary = "primary",
3
3
  Secondary = "secondary",
4
- Tertiary = "tertiary",
5
4
  Danger = "danger",
6
5
  Ghost = "ghost",
7
- Default = "default",
8
- Text = "text",
9
- Link = "link"
6
+ Default = "default"
10
7
  }
11
8
  export declare const enum ButtonSize {
12
9
  Small = "small",
13
10
  Medium = "medium",
14
- Large = "large",
15
- Default = "medium"
11
+ Large = "large"
16
12
  }
17
13
  export declare const enum ButtonShape {
18
14
  Default = "default",
package/button.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AAmEA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n Primary = 'primary',\n Secondary = 'secondary',\n Tertiary = 'tertiary', // Carbon Ghost equivalent\n Danger = 'danger',\n Ghost = 'ghost', // Alias for tertiary for backward compatibility\n Default = 'default',\n Text = 'text',\n Link = 'link',\n}\n\nexport const enum ButtonSize {\n Small = 'small', // 32px - small\n Medium = 'medium', // 40px - medium (default)\n Large = 'large', // 48px - large\n Default = 'medium', // Default to medium for better UX\n}\n\nexport const enum ButtonShape {\n Default = 'default',\n Circle = 'circle',\n Round = 'round',\n}\n\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\n\n/**\n * Enhanced icon configuration for buttons\n */\nexport interface ButtonIconConfig {\n /** Icon name (required) */\n name: string;\n /** Icon type - solid or regular */\n type?: 'solid' | 'regular';\n /** Icon size override */\n size?: string;\n /** Icon color override */\n color?: string;\n /** Alternative text for accessibility */\n alt?: string;\n /** Custom attributes to pass to icon */\n attributes?: Record<string, string>;\n}\n\n/**\n * Union type for icon input - supports both simple string and enhanced config\n */\nexport type ButtonIcon = string | ButtonIconConfig;\n\n/**\n * Array of icons (supports 1-2 icons)\n */\nexport type ButtonIcons = ButtonIcon[];\n\n/**\n * Alternative icon configuration using positioned properties\n */\nexport interface ButtonIconsConfig {\n /** Left icon configuration */\n left?: ButtonIcon;\n /** Right icon configuration */\n right?: ButtonIcon;\n}\n\nexport const EMPTY_STRING = '';\n"]}
1
+ {"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../../src/components/button/button.types.ts"],"names":[],"mappings":"AA+DA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n Primary = 'primary',\n Secondary = 'secondary',\n Danger = 'danger',\n Ghost = 'ghost',\n Default = 'default',\n}\n\nexport const enum ButtonSize {\n Small = 'small', // 32px\n Medium = 'medium', // 40px (default)\n Large = 'large', // 48px\n}\n\nexport const enum ButtonShape {\n Default = 'default',\n Circle = 'circle',\n Round = 'round',\n}\n\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\n\n/**\n * Enhanced icon configuration for buttons\n */\nexport interface ButtonIconConfig {\n /** Icon name (required) */\n name: string;\n /** Icon type - solid or regular */\n type?: 'solid' | 'regular';\n /** Icon size override */\n size?: string;\n /** Icon color override */\n color?: string;\n /** Alternative text for accessibility */\n alt?: string;\n /** Custom attributes to pass to icon */\n attributes?: Record<string, string>;\n}\n\n/**\n * Union type for icon input - supports both simple string and enhanced config\n */\nexport type ButtonIcon = string | ButtonIconConfig;\n\n/**\n * Array of icons (supports 1-2 icons)\n */\nexport type ButtonIcons = ButtonIcon[];\n\n/**\n * Alternative icon configuration using positioned properties\n */\nexport interface ButtonIconsConfig {\n /** Left icon configuration */\n left?: ButtonIcon;\n /** Right icon configuration */\n right?: ButtonIcon;\n}\n\nexport const EMPTY_STRING = '';\n"]}
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './button.component.js';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './button.component.js';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/button",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "Button component for NuralyUI library",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/react.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrButtonElement } from './button.component.js';\nexport const NrButton = createComponent({\n tagName: 'nr-button',\n elementClass: NrButtonElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}
1
+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/button/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrButtonElement } from './button.component.js';\nexport const NrButton = createComponent({\n tagName: 'nr-button',\n elementClass: NrButtonElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}