@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/db-connection-select/db-connection-select.component.js

@@ -38,6 +38,8 @@ import { property, customElement, state } from 'lit/decorators.js';
  * @fires value-change - Fired when selection changes
  * @fires create-entry - Fired when user submits the create form
  * @fires test-connection - Fired when user clicks Test Connection
+ *
+ * @csspart container - The root nr-select wrapper
  */
 let NrDbConnectionSelect = class NrDbConnectionSelect extends LitElement {
     constructor() {
@@ -327,6 +329,7 @@ let NrDbConnectionSelect = class NrDbConnectionSelect extends LitElement {
         }));
         return html `
       <nr-select
+        part="container"
         .value=${this.value}
         .options=${options}
         placeholder=${this.placeholder}
@@ -515,6 +518,7 @@ NrDbConnectionSelect.styles = css `
       margin-bottom: 0;
     }
   `;
+NrDbConnectionSelect.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrDbConnectionSelect.prototype, "dbType", void 0);

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

@@ -1,4 +1,20 @@
-import{css as i,LitElement as r,html as t}from"lit";import{property as e,customElement as d}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as n}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as o}from"@nuralyui/common/mixins";var l=i`
+import{css as t,html as e,LitElement as i}from"lit";import{property as r,customElement as o}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{styleMap as d}from"lit/directives/style-map.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const n=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},a=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},l=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(a())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!a())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const r=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,r):console.error(r.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},h=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const r=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,r)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const r=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,r)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},c=new Set,v=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const p=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=u(i);t&&function(t,e,i){var r;if(!v.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),v.set(t,i)}const o=v.get(t),s=`doc:${t}`;if(c.has(s)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],c.add(s)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const s=`shadow:${((null===(r=i.host)||void 0===r?void 0:r.tagName)||"").toLowerCase()}:${t}`;c.has(s)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,o],c.add(s)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function u(t){return Array.isArray(t)?t.map(t=>u(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}var m=t`
   :host {
     display: block;
     box-sizing: border-box;
@@ -6,7 +22,7 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
 
   :host([type="vertical"]) {
     display: inline-flex;
-    align-self: stretch; /* Stretch to parent height in flex containers */
+    align-self: stretch;
     height: auto;
   }
 
@@ -14,8 +30,8 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: var(--nuraly-divider-text-color);
-    font-size: var(--nuraly-divider-font-size);
+    color: var(--nr-text, #161616);
+    font-size: 1rem;
     line-height: 1.5715;
     list-style: none;
     font-family: inherit;
@@ -27,18 +43,18 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
     clear: both;
     width: 100%;
     min-width: 100%;
-    margin: var(--nuraly-divider-margin-vertical, 10px) 0;
-    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    margin: 10px 0;
+    border-block-start: 1px solid var(--nr-border, #e0e0e0);
   }
 
   /* Horizontal with text */
   .divider--horizontal.divider--with-text {
     display: flex;
     align-items: center;
-    margin: var(--nuraly-divider-margin-vertical) 0;
-    color: var(--nuraly-divider-text-color);
+    margin: 10px 0;
+    color: var(--nr-text, #161616);
     font-weight: 500;
-    font-size: var(--nuraly-divider-font-size);
+    font-size: 1rem;
     white-space: nowrap;
     text-align: center;
     border-block-start: 0;
@@ -48,7 +64,7 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
   .divider--horizontal.divider--with-text::after {
     position: relative;
     width: 50%;
-    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-block-start: 1px solid var(--nr-border, #e0e0e0);
     border-block-end: 0;
     transform: translateY(50%);
     content: '';
@@ -56,7 +72,7 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
 
   /* Text positioning */
   .divider--start::before {
-    width: var(--nuraly-divider-orientation-margin-left, 5%);
+    width: 5%;
   }
 
   .divider--start::after {
@@ -68,15 +84,15 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
   }
 
   .divider--end::after {
-    width: var(--nuraly-divider-orientation-margin-right, 5%);
+    width: 5%;
   }
 
   /* Text wrapper */
   .divider__text {
     display: inline-block;
-    padding: 0 var(--nuraly-divider-text-padding, 1em);
-    color: var(--nuraly-divider-text-color, rgba(0, 0, 0, 0.88));
-    font-size: var(--nuraly-divider-font-size, 1rem);
+    padding: 0 1em;
+    color: var(--nr-text, #161616);
+    font-size: 1rem;
   }
 
   /* Plain text style */
@@ -90,54 +106,64 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
     top: -0.06em;
     display: inline-block;
     height: 0.9em;
-    margin: 0 var(--nuraly-divider-margin-horizontal, 8px);
+    margin: 0 8px;
     vertical-align: middle;
     border-top: 0;
-    border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-inline-start: 1px solid var(--nr-border, #e0e0e0);
   }
 
   /* Full height vertical divider when in flex container */
-  :host([type="vertical"]) {
-    height: 100%;
-  }
-
   :host([type="vertical"]) .divider--vertical {
     height: 100%;
     align-self: stretch;
     top: 0;
     vertical-align: top;
-    border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-inline-start-color: var(--nr-border, #e0e0e0);
   }
 
   /* Variant styles */
-  .divider--solid {
-    --nuraly-divider-variant-style: solid;
+  .divider--dashed.divider--horizontal {
+    border-block-start-style: dashed;
+  }
+
+  .divider--dashed.divider--with-text::before,
+  .divider--dashed.divider--with-text::after {
+    border-block-start-style: dashed;
+  }
+
+  .divider--dashed.divider--vertical {
+    border-inline-start-style: dashed;
+  }
+
+  .divider--dotted.divider--horizontal {
+    border-block-start-style: dotted;
   }
 
-  .divider--dashed {
-    --nuraly-divider-variant-style: dashed;
+  .divider--dotted.divider--with-text::before,
+  .divider--dotted.divider--with-text::after {
+    border-block-start-style: dotted;
   }
 
-  .divider--dotted {
-    --nuraly-divider-variant-style: dotted;
+  .divider--dotted.divider--vertical {
+    border-inline-start-style: dotted;
   }
 
   /* Size variations (horizontal only) */
   .divider--horizontal.divider--small {
-    margin: var(--nuraly-divider-margin-vertical-small) 0;
+    margin: 4px 0;
   }
 
   .divider--horizontal.divider--middle {
-    margin: var(--nuraly-divider-margin-vertical-middle) 0;
+    margin: 16px 0;
   }
 
   .divider--horizontal.divider--large {
-    margin: var(--nuraly-divider-margin-vertical-large) 0;
+    margin: 24px 0;
   }
-`,v=function(i,r,t,e){for(var d,a=arguments.length,n=a<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,t):e,o=i.length-1;o>=0;o--)(d=i[o])&&(n=(a<3?d(n):a>3?d(r,t,n):d(r,t))||n);return a>3&&n&&Object.defineProperty(r,t,n),n};let s=class extends(o(r)){constructor(){super(...arguments),this.type="horizontal",this.dashed=!1,this.variant="solid",this.orientation="center",this.plain=!0}get hasText(){var i;const r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("slot");return((null==r?void 0:r.assignedNodes({flatten:!0}))||[]).some(i=>{var r;return i.nodeType===Node.TEXT_NODE&&(null===(r=i.textContent)||void 0===r?void 0:r.trim())||i.nodeType===Node.ELEMENT_NODE})}render(){const i=this.dashed?"dashed":this.variant,r="horizontal"===this.type,e="vertical"===this.type,d={divider:!0,"divider--horizontal":r,"divider--vertical":e,"divider--with-text":r&&this.hasText,"divider--plain":this.plain,[`divider--${i}`]:!0,[`divider--${this.orientation}`]:r&&this.hasText,[`divider--${this.size}`]:r&&!!this.size},o={};if(void 0!==this.orientationMargin&&r&&this.hasText){const i="number"==typeof this.orientationMargin?`${this.orientationMargin}px`:this.orientationMargin;"start"===this.orientation?o["--nuraly-divider-orientation-margin-left"]=i:"end"===this.orientation&&(o["--nuraly-divider-orientation-margin-right"]=i)}return e?t`<div class=${a(d)}></div>`:this.hasText?t`
-      <div class=${a(d)} style=${n(o)}>
-        <span class="divider__text">
+`,b=function(t,e,i,r){for(var o,s=arguments.length,d=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,n=t.length-1;n>=0;n--)(o=t[n])&&(d=(s<3?o(d):s>3?o(e,i,d):o(e,i))||d);return s>3&&d&&Object.defineProperty(e,i,d),d};let f=class extends((t=>l(n(h(p(t)))))(i)){constructor(){super(...arguments),this.type="horizontal",this.dashed=!1,this.variant="solid",this.orientation="center",this.plain=!0}get hasText(){return Array.from(this.childNodes).some(t=>{var e;return t.nodeType===Node.TEXT_NODE&&(null===(e=t.textContent)||void 0===e?void 0:e.trim())||t.nodeType===Node.ELEMENT_NODE})}render(){const t=this.dashed?"dashed":this.variant,i="horizontal"===this.type,r="vertical"===this.type,o={divider:!0,"divider--horizontal":i,"divider--vertical":r,"divider--with-text":i&&this.hasText,"divider--plain":this.plain,[`divider--${t}`]:!0,[`divider--${this.orientation}`]:i&&this.hasText,[`divider--${this.size}`]:i&&!!this.size},n={};if(void 0!==this.orientationMargin&&i&&this.hasText){const t="number"==typeof this.orientationMargin?`${this.orientationMargin}px`:this.orientationMargin;"start"===this.orientation?n["--nuraly-divider-orientation-margin-left"]=t:"end"===this.orientation&&(n["--nuraly-divider-orientation-margin-right"]=t)}return r?e`<div part="divider" class=${s(o)}></div>`:this.hasText?e`
+      <div part="divider" class=${s(o)} style=${d(n)}>
+        <span part="text" class="divider__text">
           <slot></slot>
         </span>
       </div>
-    `:t`<div class=${a(d)}></div>`}};s.styles=l,v([e({type:String})],s.prototype,"type",void 0),v([e({type:Boolean})],s.prototype,"dashed",void 0),v([e({type:String})],s.prototype,"variant",void 0),v([e({type:String})],s.prototype,"orientation",void 0),v([e({type:String,attribute:"orientation-margin"})],s.prototype,"orientationMargin",void 0),v([e({type:Boolean})],s.prototype,"plain",void 0),v([e({type:String})],s.prototype,"size",void 0),s=v([d("nr-divider")],s);export{s as NrDividerElement};
+    `:e`<div part="divider" class=${s(o)}></div>`}};f.styles=m,f.useShadowDom=!0,b([r({type:String})],f.prototype,"type",void 0),b([r({type:Boolean})],f.prototype,"dashed",void 0),b([r({type:String})],f.prototype,"variant",void 0),b([r({type:String})],f.prototype,"orientation",void 0),b([r({type:String,attribute:"orientation-margin"})],f.prototype,"orientationMargin",void 0),b([r({type:Boolean})],f.prototype,"plain",void 0),b([r({type:String})],f.prototype,"size",void 0),f=b([o("nr-divider")],f);export{f as NrDividerElement};

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { DividerType, DividerOrientation, DividerVariant, DividerSize } from "./divider.types.js";
-declare const NrDividerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrDividerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * @element nr-divider
  *
@@ -20,11 +20,8 @@ declare const NrDividerElement_base: (new (...args: any[]) => import("@nuralyui/
  *
  * @slot - The title/text content to display in the divider
  *
- * @cssprop --nuraly-divider-color - Border color
- * @cssprop --nuraly-divider-text-color - Text color
- * @cssprop --nuraly-divider-font-size - Font size for title
- * @cssprop --nuraly-divider-margin - Vertical margin for horizontal divider
- * @cssprop --nuraly-divider-orientation-margin - Margin between text and edge
+ * @csspart divider - The root divider element
+ * @csspart text - The span wrapping the slot text content (present only when text is provided)
  *
  * @example
  * ```html
@@ -43,6 +40,7 @@ declare const NrDividerElement_base: (new (...args: any[]) => import("@nuralyui/
  */
 export declare class NrDividerElement extends NrDividerElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * The direction type of divider
      * @type {DividerType}

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

@@ -29,11 +29,8 @@ import styles from "./divider.style.js";
  *
  * @slot - The title/text content to display in the divider
  *
- * @cssprop --nuraly-divider-color - Border color
- * @cssprop --nuraly-divider-text-color - Text color
- * @cssprop --nuraly-divider-font-size - Font size for title
- * @cssprop --nuraly-divider-margin - Vertical margin for horizontal divider
- * @cssprop --nuraly-divider-orientation-margin - Margin between text and edge
+ * @csspart divider - The root divider element
+ * @csspart text - The span wrapping the slot text content (present only when text is provided)
  *
  * @example
  * ```html
@@ -84,12 +81,10 @@ let NrDividerElement = class NrDividerElement extends NuralyUIBaseMixin(LitEleme
      * Check if divider has text content
      */
     get hasText() {
-        var _a;
-        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        const nodes = (slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true })) || [];
-        return nodes.some(node => {
+        const children = Array.from(this.childNodes);
+        return children.some(node => {
             var _a;
-            return node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+            return (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ||
                 node.nodeType === Node.ELEMENT_NODE;
         });
     }
@@ -123,16 +118,16 @@ let NrDividerElement = class NrDividerElement extends NuralyUIBaseMixin(LitEleme
         }
         // Vertical divider (no text support)
         if (isVertical) {
-            return html `<div class=${classMap(classes)}></div>`;
+            return html `<div part="divider" class=${classMap(classes)}></div>`;
         }
         // Horizontal divider without text
         if (!this.hasText) {
-            return html `<div class=${classMap(classes)}></div>`;
+            return html `<div part="divider" class=${classMap(classes)}></div>`;
         }
         // Horizontal divider with text
         return html `
-      <div class=${classMap(classes)} style=${styleMap(orientationMarginStyle)}>
-        <span class="divider__text">
+      <div part="divider" class=${classMap(classes)} style=${styleMap(orientationMarginStyle)}>
+        <span part="text" class="divider__text">
           <slot></slot>
         </span>
       </div>
@@ -140,6 +135,7 @@ let NrDividerElement = class NrDividerElement extends NuralyUIBaseMixin(LitEleme
     }
 };
 NrDividerElement.styles = styles;
+NrDividerElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrDividerElement.prototype, "type", void 0);

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

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 export default css `
   :host {
     display: block;
@@ -7,7 +7,7 @@ export default css `
 
   :host([type="vertical"]) {
     display: inline-flex;
-    align-self: stretch; /* Stretch to parent height in flex containers */
+    align-self: stretch;
     height: auto;
   }
 
@@ -15,8 +15,8 @@ export default css `
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: var(--nuraly-divider-text-color);
-    font-size: var(--nuraly-divider-font-size);
+    color: var(--nr-text, #161616);
+    font-size: 1rem;
     line-height: 1.5715;
     list-style: none;
     font-family: inherit;
@@ -28,18 +28,18 @@ export default css `
     clear: both;
     width: 100%;
     min-width: 100%;
-    margin: var(--nuraly-divider-margin-vertical, 10px) 0;
-    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    margin: 10px 0;
+    border-block-start: 1px solid var(--nr-border, #e0e0e0);
   }
 
   /* Horizontal with text */
   .divider--horizontal.divider--with-text {
     display: flex;
     align-items: center;
-    margin: var(--nuraly-divider-margin-vertical) 0;
-    color: var(--nuraly-divider-text-color);
+    margin: 10px 0;
+    color: var(--nr-text, #161616);
     font-weight: 500;
-    font-size: var(--nuraly-divider-font-size);
+    font-size: 1rem;
     white-space: nowrap;
     text-align: center;
     border-block-start: 0;
@@ -49,7 +49,7 @@ export default css `
   .divider--horizontal.divider--with-text::after {
     position: relative;
     width: 50%;
-    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-block-start: 1px solid var(--nr-border, #e0e0e0);
     border-block-end: 0;
     transform: translateY(50%);
     content: '';
@@ -57,7 +57,7 @@ export default css `
 
   /* Text positioning */
   .divider--start::before {
-    width: var(--nuraly-divider-orientation-margin-left, 5%);
+    width: 5%;
   }
 
   .divider--start::after {
@@ -69,15 +69,15 @@ export default css `
   }
 
   .divider--end::after {
-    width: var(--nuraly-divider-orientation-margin-right, 5%);
+    width: 5%;
   }
 
   /* Text wrapper */
   .divider__text {
     display: inline-block;
-    padding: 0 var(--nuraly-divider-text-padding, 1em);
-    color: var(--nuraly-divider-text-color, rgba(0, 0, 0, 0.88));
-    font-size: var(--nuraly-divider-font-size, 1rem);
+    padding: 0 1em;
+    color: var(--nr-text, #161616);
+    font-size: 1rem;
   }
 
   /* Plain text style */
@@ -91,49 +91,59 @@ export default css `
     top: -0.06em;
     display: inline-block;
     height: 0.9em;
-    margin: 0 var(--nuraly-divider-margin-horizontal, 8px);
+    margin: 0 8px;
     vertical-align: middle;
     border-top: 0;
-    border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-inline-start: 1px solid var(--nr-border, #e0e0e0);
   }
 
   /* Full height vertical divider when in flex container */
-  :host([type="vertical"]) {
-    height: 100%;
-  }
-
   :host([type="vertical"]) .divider--vertical {
     height: 100%;
     align-self: stretch;
     top: 0;
     vertical-align: top;
-    border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-inline-start-color: var(--nr-border, #e0e0e0);
   }
 
   /* Variant styles */
-  .divider--solid {
-    --nuraly-divider-variant-style: solid;
+  .divider--dashed.divider--horizontal {
+    border-block-start-style: dashed;
+  }
+
+  .divider--dashed.divider--with-text::before,
+  .divider--dashed.divider--with-text::after {
+    border-block-start-style: dashed;
+  }
+
+  .divider--dashed.divider--vertical {
+    border-inline-start-style: dashed;
+  }
+
+  .divider--dotted.divider--horizontal {
+    border-block-start-style: dotted;
   }
 
-  .divider--dashed {
-    --nuraly-divider-variant-style: dashed;
+  .divider--dotted.divider--with-text::before,
+  .divider--dotted.divider--with-text::after {
+    border-block-start-style: dotted;
   }
 
-  .divider--dotted {
-    --nuraly-divider-variant-style: dotted;
+  .divider--dotted.divider--vertical {
+    border-inline-start-style: dotted;
   }
 
   /* Size variations (horizontal only) */
   .divider--horizontal.divider--small {
-    margin: var(--nuraly-divider-margin-vertical-small) 0;
+    margin: 4px 0;
   }
 
   .divider--horizontal.divider--middle {
-    margin: var(--nuraly-divider-margin-vertical-middle) 0;
+    margin: 16px 0;
   }
 
   .divider--horizontal.divider--large {
-    margin: var(--nuraly-divider-margin-vertical-large) 0;
+    margin: 24px 0;
   }
 `;
 //# sourceMappingURL=divider.style.js.map