@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,360 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement, state } from 'lit/decorators.js';
+/**
+ * KV Secret Select Component
+ *
+ * A select component for choosing API keys, filtered by provider scope.
+ * Includes inline creation of new secrets.
+ *
+ * Data-in / events-out:
+ * - Host provides `entries` and `loading`
+ * - Component fires `create-entry` when the user submits the create form
+ * - Component fires `value-change` when the selection changes
+ *
+ * @example
+ * ```html
+ * <nr-kv-secret-select
+ *   provider="openai"
+ *   .entries=${secretEntries}
+ *   value="openai/my-key"
+ *   @value-change=${(e) => console.log(e.detail.value)}
+ *   @create-entry=${(e) => handleCreate(e.detail)}
+ * ></nr-kv-secret-select>
+ * ```
+ *
+ * @fires value-change - Fired when selection changes
+ * @fires create-entry - Fired when user submits the create form. Detail: { keyPath, value, scope, isSecret }
+ */
+let NrKvSecretSelect = class NrKvSecretSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Provider/scope to filter display labels */
+        this.provider = 'openai';
+        /** Currently selected key path */
+        this.value = '';
+        /** Placeholder text */
+        this.placeholder = 'Select API key...';
+        /** Type of secret - affects labels */
+        this.type = 'api-key';
+        /** Entries provided by the host */
+        this.entries = [];
+        /** Loading state provided by the host */
+        this.loading = false;
+        this.showCreateForm = false;
+        this.newKeyName = '';
+        this.newKeyValue = '';
+        this.creating = false;
+        this.error = '';
+    }
+    handleSelectChange(e) {
+        var _a;
+        const value = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || '';
+        this.value = value;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    toggleCreateForm() {
+        this.showCreateForm = !this.showCreateForm;
+        if (!this.showCreateForm) {
+            this.resetCreateForm();
+        }
+    }
+    resetCreateForm() {
+        this.newKeyName = '';
+        this.newKeyValue = '';
+        this.error = '';
+        this.creating = false;
+    }
+    handleCreate() {
+        if (!this.newKeyName || !this.newKeyValue)
+            return;
+        this.creating = true;
+        this.error = '';
+        const keyPath = `${this.provider}/${this.newKeyName}`;
+        this.dispatchEvent(new CustomEvent('create-entry', {
+            detail: {
+                keyPath,
+                value: this.newKeyValue,
+                scope: this.provider,
+                isSecret: true,
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Called by host after create-entry succeeds to reset the form and select the new entry.
+     */
+    notifyCreateSuccess(keyPath) {
+        this.value = keyPath;
+        this.showCreateForm = false;
+        this.resetCreateForm();
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: keyPath },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Called by host if create-entry fails.
+     */
+    notifyCreateError(message) {
+        this.error = message;
+        this.creating = false;
+    }
+    getTypeLabel() {
+        return this.type === 'url' ? 'URL' : 'API Key';
+    }
+    getValuePlaceholder() {
+        return this.type === 'url' ? 'http://localhost:11434' : 'sk-...';
+    }
+    renderCreateForm() {
+        const typeLabel = this.getTypeLabel();
+        return html `
+      <div class="create-form">
+        <div class="create-form-header">
+          <span class="create-form-title">Add ${this.provider} ${typeLabel}</span>
+        </div>
+
+        <div class="form-field">
+          <label>${this.type === 'url' ? 'Name' : 'Key Name'}</label>
+          <nr-input
+            .value=${this.newKeyName}
+            placeholder="e.g., production, dev"
+            @nr-input=${(e) => { var _a; return this.newKeyName = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+          ></nr-input>
+        </div>
+
+        <div class="form-field">
+          <label>${typeLabel} Value</label>
+          <nr-input
+            type=${this.type === 'url' ? 'text' : 'password'}
+            .value=${this.newKeyValue}
+            placeholder=${this.getValuePlaceholder()}
+            @nr-input=${(e) => { var _a; return this.newKeyValue = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+          ></nr-input>
+        </div>
+
+        ${this.error ? html `<div class="error-message">${this.error}</div>` : nothing}
+
+        <div class="form-actions">
+          <button
+            class="btn btn-primary"
+            ?disabled=${!this.newKeyName || !this.newKeyValue || this.creating}
+            @click=${this.handleCreate}
+          >
+            ${this.creating ? 'Creating...' : 'Create'}
+          </button>
+          <button
+            class="btn btn-secondary"
+            @click=${this.toggleCreateForm}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderAddButton() {
+        const typeLabel = this.getTypeLabel().toLowerCase();
+        return html `
+      <div class="add-btn-container">
+        <button class="add-btn" @click=${this.toggleCreateForm}>
+          <nr-icon name="plus" size="small"></nr-icon>
+          Add new ${this.provider} ${typeLabel}
+        </button>
+      </div>
+    `;
+    }
+    render() {
+        const secretEntries = this.entries.filter(e => e.isSecret);
+        const options = secretEntries.map(entry => ({
+            label: entry.keyPath.replace(`${this.provider}/`, ''),
+            value: entry.keyPath,
+            icon: this.type === 'url' ? 'link' : 'key'
+        }));
+        const typeLabel = this.getTypeLabel().toLowerCase();
+        const noOptionsMessage = `No ${typeLabel}s for ${this.provider}`;
+        return html `
+      <nr-select
+        .value=${this.value}
+        .options=${options}
+        placeholder=${this.placeholder}
+        .noOptionsMessage=${noOptionsMessage}
+        @nr-change=${this.handleSelectChange}
+      >
+        <div slot="after-options">
+          ${this.loading ? html `<div class="loading">Loading...</div>` : nothing}
+          ${this.showCreateForm ? this.renderCreateForm() : this.renderAddButton()}
+        </div>
+      </nr-select>
+    `;
+    }
+};
+NrKvSecretSelect.styles = css `
+    :host {
+      display: block;
+    }
+
+    .create-form {
+      padding: 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+      background: var(--bg-secondary, #f9fafb);
+    }
+
+    .create-form-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .create-form-title {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--text-primary, #1f2937);
+    }
+
+    .form-field {
+      margin-bottom: 12px;
+    }
+
+    .form-field label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      margin-bottom: 4px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .btn {
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+    }
+
+    .btn-primary {
+      background: var(--primary-color, #6366f1);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: #4f46e5;
+    }
+
+    .btn-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .btn-secondary {
+      background: var(--bg-secondary, #f3f4f6);
+      color: var(--text-primary, #1f2937);
+      border: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .btn-secondary:hover {
+      background: #e5e7eb;
+    }
+
+    .add-btn-container {
+      padding: 8px 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .add-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 8px 12px;
+      background: transparent;
+      border: 1px dashed var(--border-color, #d1d5db);
+      border-radius: 6px;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .add-btn:hover {
+      border-color: var(--primary-color, #6366f1);
+      color: var(--primary-color, #6366f1);
+      background: #f5f3ff;
+    }
+
+    .error-message {
+      color: #dc2626;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .loading {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], NrKvSecretSelect.prototype, "provider", void 0);
+__decorate([
+    property({ type: String })
+], NrKvSecretSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NrKvSecretSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], NrKvSecretSelect.prototype, "type", void 0);
+__decorate([
+    property({ attribute: false })
+], NrKvSecretSelect.prototype, "entries", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrKvSecretSelect.prototype, "loading", void 0);
+__decorate([
+    state()
+], NrKvSecretSelect.prototype, "showCreateForm", void 0);
+__decorate([
+    state()
+], NrKvSecretSelect.prototype, "newKeyName", void 0);
+__decorate([
+    state()
+], NrKvSecretSelect.prototype, "newKeyValue", void 0);
+__decorate([
+    state()
+], NrKvSecretSelect.prototype, "creating", void 0);
+__decorate([
+    state()
+], NrKvSecretSelect.prototype, "error", void 0);
+NrKvSecretSelect = __decorate([
+    customElement('nr-kv-secret-select')
+], NrKvSecretSelect);
+export { NrKvSecretSelect };
+//# sourceMappingURL=kv-secret-select.component.js.map

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

@@ -0,0 +1,104 @@
+import{css as a,LitElement as l,html as r}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";var t=a`
+  ${a`
+  :host {
+    /* Typography */
+    --nuraly-label-font-family: var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
+    --nuraly-label-font-weight: var(--nuraly-font-weight-medium, 300);
+    --nuraly-label-line-height: var(--nuraly-line-height-base, auto);
+
+    /* Size variants */
+    --nuraly-label-small-font-size: var(--nuraly-font-size-xs, 12px);
+    --nuraly-label-medium-font-size: var(--nuraly-font-size-sm, 14px);
+    --nuraly-label-large-font-size: var(--nuraly-font-size-base, 16px);
+
+    /* Default font size */
+    --nuraly-label-font-size: var(--nuraly-label-medium-font-size);
+
+    /* Colors */
+    --nuraly-label-text-color: var(--nuraly-color-text-primary, #000000);
+    --nuraly-label-secondary-color: var(--nuraly-color-text-secondary, #666666);
+    --nuraly-label-error-color: var(--nuraly-color-error-500, #ff4d4f);
+    --nuraly-label-warning-color: var(--nuraly-color-warning-500, #faad14);
+    --nuraly-label-success-color: var(--nuraly-color-success-500, #52c41a);
+    --nuraly-label-required-color: var(--nuraly-color-error-500, #ff4d4f);
+    --nuraly-label-disabled-color: var(--nuraly-color-text-disabled, #bfbfbf);
+
+    /* Spacing */
+    --nuraly-label-margin-bottom: var(--nuraly-spacing-xs, 4px);
+    --nuraly-label-required-margin: var(--nuraly-spacing-2xs, 2px);
+
+    /* Transitions */
+    --nuraly-label-transition-duration: var(--nuraly-transition-duration-base, 150ms);
+    --nuraly-label-transition-timing: var(--nuraly-transition-timing-ease, ease);
+  }
+`}
+
+  :host {
+    display: inline-block;
+    width: fit-content;
+  }
+
+  label {
+    font-family: var(--nuraly-label-font-family);
+    font-size: var(--nuraly-label-font-size);
+    font-weight: var(--nuraly-label-font-weight);
+    line-height: var(--nuraly-label-line-height);
+    color: var(--nuraly-label-text-color);
+    margin: 0;
+    margin-bottom: var(--nuraly-label-margin-bottom);
+    display: block;
+    user-select: none;
+    cursor: pointer;
+    transition: color var(--nuraly-label-transition-duration) var(--nuraly-label-transition-timing);
+  }
+
+  /* Size variants */
+  :host([size="small"]) label {
+    font-size: var(--nuraly-label-small-font-size);
+  }
+
+  :host([size="large"]) label {
+    font-size: var(--nuraly-label-large-font-size);
+  }
+
+  /* Variant colors */
+  :host([variant="secondary"]) label {
+    color: var(--nuraly-label-secondary-color);
+  }
+
+  :host([variant="error"]) label {
+    color: var(--nuraly-label-error-color);
+  }
+
+  :host([variant="warning"]) label {
+    color: var(--nuraly-label-warning-color);
+  }
+
+  :host([variant="success"]) label {
+    color: var(--nuraly-label-success-color);
+  }
+
+  /* Disabled state */
+  :host([disabled]) label {
+    color: var(--nuraly-label-disabled-color);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  /* Required asterisk */
+  .required-asterisk {
+    color: var(--nuraly-label-required-color);
+    margin-left: var(--nuraly-label-required-margin);
+    font-weight: normal;
+  }
+
+  /* Focus-within for accessibility when label is associated with form elements */
+  :host(:focus-within) label:not([disabled]) {
+    opacity: 0.8;
+  }
+`,i=function(a,l,r,e){for(var o,n=arguments.length,t=n<3?l:null===e?e=Object.getOwnPropertyDescriptor(l,r):e,i=a.length-1;i>=0;i--)(o=a[i])&&(t=(n<3?o(t):n>3?o(l,r,t):o(l,r))||t);return n>3&&t&&Object.defineProperty(l,r,t),t};let s=class extends(n(l)){constructor(){super(...arguments),this.size="medium",this.variant="default",this.required=!1,this.disabled=!1,this.value=""}connectedCallback(){super.connectedCallback(),this.updateDataTheme()}updated(){this.updateDataTheme()}updateDataTheme(){this.closest("[data-theme]")||this.setAttribute("data-theme",this.currentTheme)}render(){return r`
+            <label for=${this.for||""}>
+                <slot></slot>
+                ${this.required?r`<span class="required-asterisk">*</span>`:""}
+            </label>
+        `}};s.styles=t,i([e({reflect:!0})],s.prototype,"size",void 0),i([e({reflect:!0})],s.prototype,"variant",void 0),i([e({type:Boolean,reflect:!0})],s.prototype,"required",void 0),i([e({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),i([e()],s.prototype,"for",void 0),i([e()],s.prototype,"value",void 0),s=i([o("nr-label")],s);export{s as HyTextLabel};

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

@@ -0,0 +1,2 @@
+export * from './label.component.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './label.component.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+import { LabelSize, LabelVariant } from './label.types.js';
+declare const HyTextLabel_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+export declare class HyTextLabel extends HyTextLabel_base {
+    static styles: import("lit").CSSResult;
+    size: LabelSize;
+    variant: LabelVariant;
+    required: boolean;
+    disabled: boolean;
+    for?: string;
+    value: string;
+    connectedCallback(): void;
+    updated(): void;
+    private updateDataTheme;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=label.component.d.ts.map

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

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "./label.style.js";
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+let HyTextLabel = class HyTextLabel extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.size = 'medium';
+        this.variant = 'default';
+        this.required = false;
+        this.disabled = false;
+        this.value = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateDataTheme();
+    }
+    updated() {
+        this.updateDataTheme();
+    }
+    updateDataTheme() {
+        if (!this.closest('[data-theme]')) {
+            this.setAttribute('data-theme', this.currentTheme);
+        }
+    }
+    render() {
+        return html `
+            <label for=${this.for || ''}>
+                <slot></slot>
+                ${this.required ? html `<span class="required-asterisk">*</span>` : ''}
+            </label>
+        `;
+    }
+};
+HyTextLabel.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HyTextLabel.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], HyTextLabel.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HyTextLabel.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HyTextLabel.prototype, "disabled", void 0);
+__decorate([
+    property()
+], HyTextLabel.prototype, "for", void 0);
+__decorate([
+    property()
+], HyTextLabel.prototype, "value", void 0);
+HyTextLabel = __decorate([
+    customElement('nr-label')
+], HyTextLabel);
+export { HyTextLabel };
+//# sourceMappingURL=label.component.js.map

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

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=label.style.d.ts.map

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

@@ -0,0 +1,70 @@
+import { css } from "lit";
+import { styleVariables } from './label.style.variables.js';
+export default css `
+  ${styleVariables}
+
+  :host {
+    display: inline-block;
+    width: fit-content;
+  }
+
+  label {
+    font-family: var(--nuraly-label-font-family);
+    font-size: var(--nuraly-label-font-size);
+    font-weight: var(--nuraly-label-font-weight);
+    line-height: var(--nuraly-label-line-height);
+    color: var(--nuraly-label-text-color);
+    margin: 0;
+    margin-bottom: var(--nuraly-label-margin-bottom);
+    display: block;
+    user-select: none;
+    cursor: pointer;
+    transition: color var(--nuraly-label-transition-duration) var(--nuraly-label-transition-timing);
+  }
+
+  /* Size variants */
+  :host([size="small"]) label {
+    font-size: var(--nuraly-label-small-font-size);
+  }
+
+  :host([size="large"]) label {
+    font-size: var(--nuraly-label-large-font-size);
+  }
+
+  /* Variant colors */
+  :host([variant="secondary"]) label {
+    color: var(--nuraly-label-secondary-color);
+  }
+
+  :host([variant="error"]) label {
+    color: var(--nuraly-label-error-color);
+  }
+
+  :host([variant="warning"]) label {
+    color: var(--nuraly-label-warning-color);
+  }
+
+  :host([variant="success"]) label {
+    color: var(--nuraly-label-success-color);
+  }
+
+  /* Disabled state */
+  :host([disabled]) label {
+    color: var(--nuraly-label-disabled-color);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  /* Required asterisk */
+  .required-asterisk {
+    color: var(--nuraly-label-required-color);
+    margin-left: var(--nuraly-label-required-margin);
+    font-weight: normal;
+  }
+
+  /* Focus-within for accessibility when label is associated with form elements */
+  :host(:focus-within) label:not([disabled]) {
+    opacity: 0.8;
+  }
+`;
+//# sourceMappingURL=label.style.js.map

package/dist/src/components/label/label.style.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=label.style.variables.d.ts.map

package/dist/src/components/label/label.style.variables.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :host {
+    /* Typography */
+    --nuraly-label-font-family: var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
+    --nuraly-label-font-weight: var(--nuraly-font-weight-medium, 300);
+    --nuraly-label-line-height: var(--nuraly-line-height-base, auto);
+
+    /* Size variants */
+    --nuraly-label-small-font-size: var(--nuraly-font-size-xs, 12px);
+    --nuraly-label-medium-font-size: var(--nuraly-font-size-sm, 14px);
+    --nuraly-label-large-font-size: var(--nuraly-font-size-base, 16px);
+
+    /* Default font size */
+    --nuraly-label-font-size: var(--nuraly-label-medium-font-size);
+
+    /* Colors */
+    --nuraly-label-text-color: var(--nuraly-color-text-primary, #000000);
+    --nuraly-label-secondary-color: var(--nuraly-color-text-secondary, #666666);
+    --nuraly-label-error-color: var(--nuraly-color-error-500, #ff4d4f);
+    --nuraly-label-warning-color: var(--nuraly-color-warning-500, #faad14);
+    --nuraly-label-success-color: var(--nuraly-color-success-500, #52c41a);
+    --nuraly-label-required-color: var(--nuraly-color-error-500, #ff4d4f);
+    --nuraly-label-disabled-color: var(--nuraly-color-text-disabled, #bfbfbf);
+
+    /* Spacing */
+    --nuraly-label-margin-bottom: var(--nuraly-spacing-xs, 4px);
+    --nuraly-label-required-margin: var(--nuraly-spacing-2xs, 2px);
+
+    /* Transitions */
+    --nuraly-label-transition-duration: var(--nuraly-transition-duration-base, 150ms);
+    --nuraly-label-transition-timing: var(--nuraly-transition-timing-ease, ease);
+  }
+`;
+//# sourceMappingURL=label.style.variables.js.map