urnovl-web-components 0.0.260 → 0.0.261

package/dist/components/ur-select.js

@@ -1,534 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { a as i, M as MduiElement, x, E, c as componentStyle, _ as __decorate, t } from './p-zh2SzAzp.js';
-import { c as isString, n as n$2 } from './p-BtLRMsoz.js';
-import { r } from './p-cjRIIF9K.js';
-import { o as o$2 } from './p-DmwpJ3Xb.js';
-import { o as o$1 } from './p-BnvqNZ1a.js';
-import { o } from './p-M47DLKJl.js';
-import { e, D as DefinedController, n, b as booleanConverter } from './p-Do4Bpujz.js';
-import { n as n$1 } from './p-DEJm_QN9.js';
-import { F as FormController, f as formResets } from './p-DC-VXAjA.js';
-import { H as HasSlotController } from './p-BU8BvdHB.js';
-import { d as defaultValue } from './p-D3EjEfoI.js';
-import { o as observeResize } from './p-DuseCl0q.js';
-import { F as FocusableMixin } from './p-QRV_KyyP.js';
-import './p-sO4Hyn_2.js';
-import './p-EPyjQGT1.js';
-import './p-B3ewam1a.js';
-import './p-fu4W7bFN.js';
-import './p-DRMQwXMs.js';
-
-const style = i `:host{display:inline-block;width:100%}.hidden-input{display:none}.text-field{cursor:pointer}.chips{display:flex;flex-wrap:wrap;margin:-.5rem -.25rem;min-height:2.5rem}:host([variant=filled][label]) .chips{margin:0 -.25rem -1rem -.25rem}.chip{margin:.25rem}mdui-menu{max-width:none}`;
-
-/**
- * @summary 选择框组件。需配合 `<mdui-menu-item>` 组件使用
- *
- * ```html
- * <mdui-select>
- * ..<mdui-menu-item value="item-1">Item 1</mdui-menu-item>
- * ..<mdui-menu-item value="item-2">Item 2</mdui-menu-item>
- * </mdui-select>
- * ```
- *
- * @event focus - 获得焦点时触发
- * @event blur - 失去焦点时触发
- * @event change - 选中的值变更时触发
- * @event invalid - 表单字段验证未通过时触发
- * @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空选择框
- *
- * @slot - `<mdui-menu-item>` 元素
- * @slot icon - 左侧图标
- * @slot end-icon - 右侧图标
- * @slot error-icon - 验证失败状态的右侧图标
- * @slot prefix - 左侧文本
- * @slot suffix - 右侧文本
- * @slot clear-button - 清空按钮
- * @slot clear-icon - 清空按钮中的图标
- * @slot helper - 底部的帮助文本
- *
- * @csspart chips - 多选时，放置选中值对应的 chip 的容器
- * @csspart chip - 多选时，每一个选中的值对应的 chip
- * @csspart chip__button - chip 内部的 `<button>` 元素
- * @csspart chip__label - chip 内部的文本
- * @csspart chip__delete-icon - chip 内部的删除图标
- * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/docs/2/components/text-field) 元素
- * @csspart text-field__container - text-field 内部的文本框容器
- * @csspart text-field__icon - text-field 内部的左侧图标
- * @csspart text-field__end-icon - text-field 内部的右侧图标
- * @csspart text-field__error-icon - text-field 内部的验证失败状态的右侧图标
- * @csspart text-field__prefix - text-field 内部的左侧文本
- * @csspart text-field__suffix - text-field 内部的右侧文本
- * @csspart text-field__label - text-field 内部的标签文本
- * @csspart text-field__input - text-field 内部的 `<input>` 元素
- * @csspart text-field__clear-button - text-field 内部的清空按钮
- * @csspart text-field__clear-icon - text-field 内部的清空按钮中的图标
- * @csspart text-field__supporting - text-field 内部的底部辅助信息容器，包括 helper 和 error
- * @csspart text-field__helper - text-field 内部的底部帮助文本
- * @csspart text-field__error - text-field 内部的底部错误描述文本
- * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
- */
-let Select = class Select extends FocusableMixin(MduiElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * 选择框的样式。可选值包括：
-         *
-         * * `filled`：带背景色的选择框，视觉效果较强
-         * * `outlined`：带边框的选择框，视觉效果较弱
-         */
-        this.variant = 'filled';
-        /**
-         * 是否支持多选
-         */
-        this.multiple = false;
-        /**
-         * 选择框的名称，将与表单数据一起提交
-         */
-        this.name = '';
-        /**
-         * 选择框的值，将与表单数据一起提交。
-         *
-         * 如果未指定 `multiple` 属性，该值为字符串；如果指定了 `multiple` 属性，该值为字符串数组。HTML 属性只能设置字符串值；如果需要设置数组值，请通过 JavaScript 属性设置。
-         */
-        this.value = '';
-        /**
-         * 默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
-         */
-        this.defaultValue = '';
-        /**
-         * 是否可以清空选择框
-         */
-        this.clearable = false;
-        /**
-         * 选择框的位置。可选值包括：
-         *
-         * * `auto`：自动判断位置
-         * * `bottom`：位于下方
-         * * `top`：位于上方
-         */
-        this.placement = 'auto';
-        /**
-         * 文本是否右对齐
-         */
-        this.endAligned = false;
-        /**
-         * 是否为只读状态
-         */
-        this.readonly = false;
-        /**
-         * 是否为禁用状态
-         */
-        this.disabled = false;
-        /**
-         * 提交表单时，是否必须填写该字段
-         */
-        this.required = false;
-        /**
-         * 是否验证未通过
-         *
-         * 该验证为浏览器原生验证 API，基于 `required` 属性的验证结果
-         */
-        this.invalid = false;
-        this.menuRef = e();
-        this.textFieldRef = e();
-        this.hiddenInputRef = e();
-        this.formController = new FormController(this);
-        this.hasSlotController = new HasSlotController(this, 'icon', 'end-icon', 'error-icon', 'prefix', 'suffix', 'clear-button', 'clear-icon', 'helper');
-        this.definedController = new DefinedController(this, {
-            relatedElements: ['mdui-menu-item'],
-        });
-    }
-    /**
-     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
-     */
-    get validity() {
-        return this.hiddenInputRef.value.validity;
-    }
-    /**
-     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
-     */
-    get validationMessage() {
-        return this.hiddenInputRef.value.validationMessage;
-    }
-    get focusElement() {
-        return this.textFieldRef.value;
-    }
-    get focusDisabled() {
-        return this.disabled;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.value =
-            this.multiple && isString(this.value)
-                ? this.value
-                    ? [this.value]
-                    : []
-                : this.value;
-        this.defaultValue = this.multiple ? [] : '';
-        // 首次渲染时，slot 中的 mdui-menu-item 还未渲染完成，无法读取到其中的文本值
-        // 所以需要在首次更新后，再次重新渲染，此时 mdui-menu-item 已渲染完成，可以读取到文本值
-        this.definedController.whenDefined().then(() => {
-            this.requestUpdate();
-        });
-        this.updateComplete.then(() => {
-            this.observeResize = observeResize(this.textFieldRef.value, () => this.resizeMenu());
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.observeResize?.unobserve();
-    }
-    /**
-     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
-     */
-    checkValidity() {
-        const valid = this.hiddenInputRef.value.checkValidity();
-        if (!valid) {
-            this.emit('invalid', {
-                bubbles: false,
-                cancelable: true,
-                composed: false,
-            });
-        }
-        return valid;
-    }
-    /**
-     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
-     *
-     * 如果验证未通过，还会在组件上显示验证失败的提示。
-     */
-    reportValidity() {
-        this.invalid = !this.hiddenInputRef.value.reportValidity();
-        if (this.invalid) {
-            this.emit('invalid', {
-                bubbles: false,
-                cancelable: true,
-                composed: false,
-            });
-            this.focus();
-        }
-        return !this.invalid;
-    }
-    /**
-     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
-     *
-     * @param message 自定义的错误提示文本
-     */
-    setCustomValidity(message) {
-        this.hiddenInputRef.value.setCustomValidity(message);
-        this.invalid = !this.hiddenInputRef.value.checkValidity();
-    }
-    render() {
-        const hasSelection = this.multiple ? !!this.value.length : !!this.value;
-        return x `${this.multiple
-            ? x `<select ${n(this.hiddenInputRef)} class="hidden-input" name="${o$1(this.name)}" value="${o$1(this.value)}" .required="${this.required}" .disabled="${this.disabled}" multiple="multiple" tabindex="-1">${o(this.value, (value) => x `<option selected="selected" value="${value}"></option>`)}</select>`
-            : x `<input ${n(this.hiddenInputRef)} type="radio" class="hidden-input" name="${o$1(this.name)}" value="${o$1(this.value)}" .required="${this.required}" .disabled="${this.disabled}" .checked="${hasSelection}" tabindex="-1">`}<mdui-dropdown .stayOpenOnClick="${this.multiple}" .disabled="${this.readonly || this.disabled}" .placement="${this.placement === 'top'
-            ? 'top-start'
-            : this.placement === 'bottom'
-                ? 'bottom-start'
-                : 'auto'}" @open="${this.onDropdownOpen}" @close="${this.onDropdownClose}"><mdui-text-field ${n(this.textFieldRef)} slot="trigger" part="text-field" class="text-field" exportparts="${[
-            'container',
-            'icon',
-            'end-icon',
-            'error-icon',
-            'prefix',
-            'suffix',
-            'label',
-            'input',
-            'clear-button',
-            'clear-icon',
-            'supporting',
-            'helper',
-            'error',
-        ]
-            .map((v) => `${v}:text-field__${v}`)
-            .join(',')}" readonly="readonly" .readonlyButClearable="${true}" .variant="${this.variant}" .name="${this.name}" .value="${this.multiple
-            ? this.value.length
-                ? ' '
-                : ''
-            : this.getMenuItemLabelByValue(this.value)}" .label="${this.label}" .placeholder="${this.placeholder}" .helper="${this.helper}" .error="${this.hiddenInputRef.value?.validationMessage}" .clearable="${this.clearable}" .clearIcon="${this.clearIcon}" .endAligned="${this.endAligned}" .prefix="${this.prefix}" .suffix="${this.suffix}" .icon="${this.icon}" .endIcon="${this.endIcon}" .errorIcon="${this.errorIcon}" .form="${this.form}" .disabled="${this.disabled}" .required="${this.required}" .invalidStyle="${this.invalid}" @clear="${this.onClear}" @change="${(e) => e.stopPropagation()}" @keydown="${this.onTextFieldKeyDown}">${o([
-            'icon',
-            'end-icon',
-            'error-icon',
-            'prefix',
-            'suffix',
-            'clear-button',
-            'clear-icon',
-            'helper',
-        ], (slotName) => this.hasSlotController.test(slotName)
-            ? x `<slot name="${slotName}" slot="${slotName}"></slot>`
-            : E)} ${n$1(this.multiple && this.value.length, () => x `<div slot="input" class="chips" part="chips">${o(this.value, (valueItem) => x `<mdui-chip class="chip" part="chip" exportparts="${['button', 'label', 'delete-icon']
-            .map((v) => `${v}:chip__${v}`)
-            .join(',')}" variant="input" deletable tabindex="-1" @delete="${() => this.onDeleteOneValue(valueItem)}">${this.getMenuItemLabelByValue(valueItem)}</mdui-chip>`)}</div>`)}</mdui-text-field><mdui-menu ${n(this.menuRef)} part="menu" .selects="${this.multiple ? 'multiple' : 'single'}" .value="${this.value}" @change="${this.onValueChange}"><slot></slot></mdui-menu></mdui-dropdown>`;
-    }
-    getMenuItemLabelByValue(valueItem) {
-        if (!this.menuItems.length) {
-            return valueItem;
-        }
-        return (this.menuItems
-            .find((item) => item.value === valueItem)
-            ?.textContent?.trim() || valueItem);
-    }
-    resizeMenu() {
-        this.menuRef.value.style.width = `${this.textFieldRef.value.clientWidth}px`;
-    }
-    async onDropdownOpen() {
-        // @ts-ignore
-        this.textFieldRef.value.focusedStyle = true;
-    }
-    onDropdownClose() {
-        // @ts-ignore
-        this.textFieldRef.value.focusedStyle = false;
-        // 如果焦点在 <mdui-select> 组件内的元素上，则焦点回到 <mdui-select> 上
-        if (this.contains(document.activeElement) ||
-            this.contains(document.activeElement?.assignedSlot ?? null)) {
-            setTimeout(() => {
-                this.focus();
-            });
-        }
-    }
-    async onValueChange(e) {
-        const menu = e.target;
-        this.value = this.multiple
-            ? menu.value.map((v) => v ?? '')
-            : (menu.value ?? '');
-        await this.updateComplete;
-        // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
-        const form = this.formController.getForm();
-        if (form && formResets.get(form)?.has(this)) {
-            this.invalid = false;
-            formResets.get(form).delete(this);
-        }
-        else {
-            this.invalid = !this.hiddenInputRef.value.checkValidity();
-        }
-    }
-    /**
-     * multiple 为 true 时，点 chip 的删除按钮，删除其中一个值
-     */
-    onDeleteOneValue(valueItem) {
-        const value = [...this.value];
-        if (value.includes(valueItem)) {
-            value.splice(value.indexOf(valueItem), 1);
-        }
-        this.value = value;
-    }
-    onClear() {
-        this.value = this.multiple ? [] : '';
-    }
-    /**
-     * 焦点在 text-field 上时，按下回车键，打开下拉选项
-     */
-    onTextFieldKeyDown(event) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            this.textFieldRef.value.click();
-        }
-    }
-};
-Select.styles = [componentStyle, style];
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "variant", void 0);
-__decorate([
-    n$2({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
-], Select.prototype, "multiple", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "name", void 0);
-__decorate([
-    n$2()
-], Select.prototype, "value", void 0);
-__decorate([
-    defaultValue()
-], Select.prototype, "defaultValue", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "label", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "placeholder", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "helper", void 0);
-__decorate([
-    n$2({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
-], Select.prototype, "clearable", void 0);
-__decorate([
-    n$2({ reflect: true, attribute: 'clear-icon' })
-], Select.prototype, "clearIcon", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "placement", void 0);
-__decorate([
-    n$2({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-        attribute: 'end-aligned',
-    })
-], Select.prototype, "endAligned", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "prefix", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "suffix", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "icon", void 0);
-__decorate([
-    n$2({ reflect: true, attribute: 'end-icon' })
-], Select.prototype, "endIcon", void 0);
-__decorate([
-    n$2({ reflect: true, attribute: 'error-icon' })
-], Select.prototype, "errorIcon", void 0);
-__decorate([
-    n$2({ reflect: true })
-], Select.prototype, "form", void 0);
-__decorate([
-    n$2({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
-], Select.prototype, "readonly", void 0);
-__decorate([
-    n$2({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
-], Select.prototype, "disabled", void 0);
-__decorate([
-    n$2({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
-], Select.prototype, "required", void 0);
-__decorate([
-    r()
-], Select.prototype, "invalid", void 0);
-__decorate([
-    o$2({ flatten: true, selector: 'mdui-menu-item' })
-], Select.prototype, "menuItems", void 0);
-Select = __decorate([
-    t('mdui-select')
-], Select);
-
-const urSelectCss = ":host{display:block}:host mdui-select{font-size:12px;border:0}:host mdui-select::part(text-field){font-size:14px;background:transparent}:host mdui-select::part(text-field__container){background:transparent}:host mdui-select::part(text-field__input){font-size:14px;background:transparent;min-height:44px}:host mdui-select::part(chips){margin:-0.875rem -0.25rem}:host mdui-select[multiple]::part(chips){margin:-0.35rem -0.25rem -0.575rem -0.25rem}:host mdui-select::part(menu){max-height:300px;overflow-y:auto;padding:0}:host mdui-select::slotted(mdui-dropdown){margin:0;padding:0}:host mdui-select::part(container){border-radius:var(--mdui-shape-corner-small)}:host mdui-select::part(text-field__container){border-radius:var(--mdui-shape-corner-small)}:host mdui-select::part(menu){position:absolute !important;transform:none !important}";
-
-const UrSelect$1 = /*@__PURE__*/ proxyCustomElement(class UrSelect extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.valueChanged = createEvent(this, "valueChanged");
-        this.selectionChanged = createEvent(this, "selectionChanged");
-        this.value = ''; // Selected value(s)
-        this.displayText = ''; // Text to display for selected value
-        this.name = ''; // Name of the select
-        this.label = ''; // Label text
-        this.placeholder = ''; // Placeholder text
-        this.helper = ''; // Helper text
-        this.variant = 'filled'; // Variant of the select
-        this.usage = 'standard';
-        this.multiple = false; // Enable multi-select
-        this.clearable = false; // Enable clear button
-        this.disabled = false; // Disable the select
-        this.required = false; // Mark as required
-        this.readonly = false; // Make the select read-only
-        this.size = 'normal';
-        this.placement = 'bottom'; // Dropdown position
-        this.icon = ''; // Left icon
-        this.endIcon = 'arrow_drop_down'; // Right icon - default dropdown arrow
-        this.flex = true; // New fullWidth prop
-        this.suffix = ''; // Suffix text or icon
-        this.clearIcon = 'close'; // Icon for the clear button
-        this.handleChange = (event) => {
-            const target = event.target;
-            // Only handle direct changes from mdui-select
-            if (target && target.tagName === 'MDUI-SELECT') {
-                this.value = target.value;
-            }
-        };
-    }
-    handleMenuItemChange(event) {
-        event.stopPropagation();
-        this.value = event.detail.value;
-        this.displayText = event.detail.label;
-        // Emit selection change for ur-menu-item components to listen
-        this.selectionChanged.emit({ selectedValue: this.value });
-    }
-    handleValueChange(newValue) {
-        this.valueChanged.emit({ value: newValue });
-    }
-    componentDidLoad() {
-        // Simple initialization without debugging code
-    }
-    render() {
-        const selectStyles = {
-            flex: this.flex ? '1' : '0 1 auto',
-            maxWidth: this.usage === 'topBar' ? '350px' : 'initial',
-            fontSize: '10px',
-        };
-        // For multi-select, always use this.value directly, for single-select use displayText fallback
-        const selectValue = this.multiple ? this.value : (this.displayText || this.value);
-        return (h(Host, { key: '60d1f66b1983e77c5992a26a4214cd4755b04f56', style: selectStyles }, h("mdui-select", { key: '5b4c8a1d4b1ecf165ec99d7f454aac3c5acd20f0', name: this.name, value: selectValue, label: this.label || '', variant: this.variant, usage: this.usage, multiple: this.multiple, class: !this.multiple ? 'single-select' : '', flex: this.flex, clearable: this.clearable, disabled: this.disabled, required: this.required, readonly: this.readonly, placement: this.placement, placeholder: this.placeholder, onChange: this.handleChange }, this.icon && (h("mdui-icon", { key: 'e3263e18ee85c2729c94c52d140595560b97da1c', slot: "icon", name: this.icon })), this.endIcon && (h("mdui-icon", { key: '06d38a9b468cd81b3c24c08437c96583f810f8eb', slot: "end-icon", name: this.endIcon })), this.suffix && h("span", { key: 'f86cab0230835e0a034defef2eac69e6cc8904ab', slot: "suffix" }, this.suffix), h("slot", { key: '903b9e091a7e1e9d1ae708c6bb5550014fae1a66' }), this.helper && h("span", { key: '0cd5e0c311dbc5d05a2fdbd2bc77453576142073', slot: "helper" }, this.helper))));
-    }
-    static get watchers() { return {
-        "value": ["handleValueChange"]
-    }; }
-    static get style() { return urSelectCss; }
-}, [257, "ur-select", {
-        "value": [1],
-        "name": [1],
-        "label": [1],
-        "placeholder": [1],
-        "helper": [1],
-        "variant": [1],
-        "usage": [1],
-        "multiple": [4],
-        "clearable": [4],
-        "disabled": [4],
-        "required": [4],
-        "readonly": [4],
-        "size": [1],
-        "placement": [1],
-        "icon": [1],
-        "endIcon": [1, "end-icon"],
-        "flex": [4],
-        "suffix": [1],
-        "clearIcon": [1, "clear-icon"],
-        "displayText": [32]
-    }, [[0, "menuItemChange", "handleMenuItemChange"]], {
-        "value": ["handleValueChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ur-select"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ur-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UrSelect$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { U as UrSelect$1, d as defineCustomElement$1 } from './p-E7oF2Ho9.js';
 
 const UrSelect = UrSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ur-shelf-card.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import { N as NOVL_COVER_FALLBACK } from './p-bzE6bm1n.js';
-import { d as defineCustomElement$3 } from './p-DUoVib83.js';
+import { d as defineCustomElement$3 } from './p-CfldtLQf.js';
 import { d as defineCustomElement$2 } from './p-Au3FsgZW.js';
 
 const urShelfCardCss = ":host {\n    --shelf-card-width: 100%;\n    --shelf-card-border-radius: 8px;\n    --ur-color-on-background: var(--mdui-color-on-background);\n    --ur-color-background: var(--mdui-color-background);\n}\n\n@keyframes placeholderAnimate {\n    0% {\n        background-position: -650px 0;\n    }\n    100% {\n        background-position: 650px 0;\n    }\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    box-sizing: content-box;\n    container-type: inline-size;\n    container-name: shelf;\n    position: relative;\n}\n\n:host .shelf-card {\n    width: var(--shelf-card-width);\n    border-radius: var(--shelf-card-border-radius);\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n}\n\n:host .shelf-card:hover {\n    background: rgba(var(--ur-color-on-background), 0.12);\n}\n\n:host .stacked-effect-01 {\n    position: absolute;\n    top: -3px;\n    left: 10px;\n    width: calc(100% - 20px);\n    height: 3px;\n    border-radius: var(--shelf-card-border-radius) var(--shelf-card-border-radius) 0 0;\n    background-color: rgba(var(--ur-color-on-background), 0.34);\n}\n\n:host .stacked-effect-02 {\n    position: absolute;\n    top: -6px;\n    left: 16px;\n    width: calc(100% - 32px);\n    height: 3px;\n    background-color: rgba(var(--ur-color-on-background), 0.24);\n    border-radius: var(--shelf-card-border-radius) var(--shelf-card-border-radius) 0 0;\n}\n\n:host .shelf-card.loading {\n    cursor: default;\n}\n\n:host .cover {\n    aspect-ratio: 2.25;\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: center;\n    position: relative;\n    background-color: rgba(var(--ur-color-on-background), 0.4);\n}\n\n:host .shelf-card:hover .card-hover {\n    background-color: rgba(0, 0, 0, 0.24);\n    visibility: visible;\n}\n\n:host .cover .card-hover {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 600;\n    color: rgb(255, 255, 255);\n    visibility: hidden;\n    border-radius: var(--shelf-card-border-radius) var(--shelf-card-border-radius) 0 0;\n    padding: 8px;\n    box-sizing: border-box;\n}\n\n:host .cover.loading {\n    animation-duration: 1.7s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-name: placeholderAnimate;\n    background: linear-gradient(\n        to right,\n        rgba(var(--ur-color-on-background), 0.04) 2%,\n        rgba(var(--ur-color-on-background), 0.12) 18%,\n        rgba(var(--ur-color-on-background), 0.04) 33%\n    );\n    background-size: 1000px;\n}\n\n:host .cover .price {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    border-radius: 25px;\n    background: rgba(43, 43, 39, 0.55);\n    padding: 9px 16px;\n    box-sizing: border-box;\n    line-height: 14px;\n    font-weight: 700;\n    font-size: 14px;\n    color: #fff;\n}\n\n:host .cover .avatar-holder {\n    left: 0;\n    bottom: 0;\n    display: flex;\n    position: absolute;\n    align-items: center;\n    padding: 0 4px;\n    box-sizing: border-box;\n    column-gap: 8px;\n    transform: translateY(50%);\n}\n\n:host .cover .avatar-holder ur-avatar.author-avatar {\n    display: block;\n}\n\n:host .cover .avatar-holder .publisher-avatar-container {\n    position: absolute;\n    bottom: 2px;\n    right: -6px;\n    height: 18px;\n    width: 18px;\n}\n\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\n    display: block;\n}\n\n:host .txt-info-holder .publisher-info {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    column-gap: 4px;\n}\n\n:host .cover .avatar-holder .name {\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 12px; /* 100% */\n    color: #fff;\n}\n\n:host .info {\n    display: flex;\n    flex-direction: column;\n    padding: 24px 8px 8px 8px;\n    row-gap: 8px;\n    box-sizing: border-box;\n}\n\n:host .info:has(.loading) {\n    padding-left: 0;\n    padding-right: 0;\n}\n\n:host .info .title {\n    color: rgb(var(--ur-color-on-background));\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* Number of lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host .info .title.loading {\n    animation-duration: 1.7s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-name: placeholderAnimate;\n    background: linear-gradient(\n        to right,\n        rgba(var(--ur-color-on-background), 0.04) 2%,\n        rgba(var(--ur-color-on-background), 0.12) 18%,\n        rgba(var(--ur-color-on-background), 0.04) 33%\n    );\n    background-size: 1000px;\n}\n\n:host .info .stats {\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 12px;\n    display: flex;\n    flex-direction: row;\n    color: rgb(var(--ur-color-on-background));\n}\n\n:host .info .stats.loading {\n    height: 12px;\n    animation-duration: 1.7s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-name: placeholderAnimate;\n    background: linear-gradient(\n        to right,\n        rgba(var(--ur-color-on-background), 0.04) 2%,\n        rgba(var(--ur-color-on-background), 0.12) 18%,\n        rgba(var(--ur-color-on-background), 0.04) 33%\n    );\n    background-size: 1000px;\n}\n\n:host .info .stats b {\n    font-weight: 700;\n}\n\n:host .info .stats .followers {\n    display: flex;\n}\n\n:host .info .stats .dot {\n    margin-left: 4px;\n}\n\n:host .info .stats .stories-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    column-gap: 4px;\n}\n\n:host .info .stats .stories {\n    display: flex;\n}\n\n:host .info .txt-info-holder {\n    display: flex;\n    align-items: center;\n    font-size: 11px;\n    font-style: normal;\n    font-weight: 600;\n    color: rgb(var(--ur-color-on-background));\n    cursor: pointer;\n    column-gap: 4px;\n}\n\n:host .info .txt-info-holder .avatar {\n    height: 32px;\n    width: 32px;\n    border-radius: 50%;\n    background-size: cover;\n}\n\n:host .info .txt-info-holder .avatar.loading {\n    animation-duration: 1.7s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-name: placeholderAnimate;\n    background: linear-gradient(\n        to right,\n        rgba(var(--ur-color-on-background), 0.04) 2%,\n        rgba(var(--ur-color-on-background), 0.12) 18%,\n        rgba(var(--ur-color-on-background), 0.04) 33%\n    );\n    background-size: 1000px;\n}\n\n:host .info .txt-info-holder .name {\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 12px;\n}\n\n:host .info .txt-info-holder .name.loading {\n    height: 12px;\n    width: 50%;\n    animation-duration: 1.7s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-name: placeholderAnimate;\n    background: linear-gradient(\n        to right,\n        rgba(var(--ur-color-on-background), 0.04) 2%,\n        rgba(var(--ur-color-on-background), 0.12) 18%,\n        rgba(var(--ur-color-on-background), 0.04) 33%\n    );\n    background-size: 1000px;\n}\n\n@container shelf (max-width: 300px) {\n    :host .info .title {\n        font-size: 14px;\n        line-height: 1.2rem;\n    }\n\n    :host .info .txt-info-holder .avatar {\n        height: 24px;\n        width: 24px;\n    }\n\n    :host .cover .publisher {\n        height: 40px;\n        padding: 0 4px;\n    }\n\n    :host .cover .publisher .name {\n        font-size: 11px;\n    }\n\n    :host .info .txt-info-holder .name {\n        font-size: 11px;\n    }\n\n    :host .cover .ongoing {\n        width: 24px;\n        height: 24px;\n        left: 4px;\n    }\n\n    :host .cover .price {\n        padding: 5px 8px;\n        font-size: 12px;\n    }\n\n    :host .info .stats {\n        font-size: 11px;\n    }\n\n    :host .info .description {\n        font-size: 11px;\n    }\n\n    :host .info {\n        row-gap: 4px;\n        padding: 8px;\n        padding-top: 22px;\n    }\n\n    :host .info .title.loading {\n        margin: 0 4px;\n    }\n\n    :host .info .stats.loading {\n        margin: 0 4px;\n    }\n\n    :host .info .description.loading {\n        margin: 0 4px;\n    }\n\n    :host .info .txt-info-holder.loading {\n        margin: 0 4px;\n    }\n}\n";

package/dist/components/ur-snackbar.js

@@ -425,12 +425,12 @@ const UrSnackbar$1 = /*@__PURE__*/ proxyCustomElement(class UrSnackbar extends H
         };
     }
     render() {
-        return (h(Host, { key: 'd64f7d522bf180d864d1cbb5e37e85363e50ebbf' }, h("mdui-snackbar", { key: '7f3545a84846f45b494045120b8000b7896c7668', open: this.open, placement: this.placement, action: this.action, "action-loading": this.actionLoading, closeable: this.closeable, "close-icon": this.closeIcon, "message-line": this.messageLine, "auto-close-delay": this.autoCloseDelay, "close-on-outside-click": this.closeOnOutsideClick, onOpen: this.handleOpen, onOpened: this.handleOpened, onClose: this.handleClose, onClosed: this.handleClosed, "onAction-click": this.handleActionClick, style: {
+        return (h(Host, { key: 'ffb037f37e00a20933d13b5df681705c3b0f207b' }, h("mdui-snackbar", { key: '85b83426c89374deb849f820f15b4cd8b492f28b', open: this.open, placement: this.placement, action: this.action, "action-loading": this.actionLoading, closeable: this.closeable, "close-icon": this.closeIcon, "message-line": this.messageLine, "auto-close-delay": this.autoCloseDelay, "close-on-outside-click": this.closeOnOutsideClick, onOpen: this.handleOpen, onOpened: this.handleOpened, onClose: this.handleClose, onClosed: this.handleClosed, "onAction-click": this.handleActionClick, style: {
                 '--z-index': this.zIndex,
                 '--shape-corner': this.radius,
                 'background-color': this.backColor,
                 'color': this.fontColor,
-            } }, this.message, h("slot", { key: '59596333378d3278899820265bdcce3d77a04b9f' }), h("slot", { key: '8c4ca2a0c9462599faccecd11d84791a5c958f9e', name: "action", slot: "action" }), h("slot", { key: '91cb3f3e90d5d286f542082e3be434ae5f5cce07', name: "close-button", slot: "close-button" }), h("slot", { key: '653f7e2fd0d656af21a665d2574822b5adb0d764', name: "close-icon", slot: "close-icon" }))));
+            } }, this.message, h("slot", { key: 'c2551a3a53c0f5824d7330dfaf5bbe8fd0145853' }), h("slot", { key: '1be53de168a3795638ac73fc3ede76dc62cbdd15', name: "action", slot: "action" }), h("slot", { key: 'e4f5591dd91148f7719c91738375ab18d0136aea', name: "close-button", slot: "close-button" }), h("slot", { key: 'c2ec307a02be37dc6a21662ad626c870b084d89b', name: "close-icon", slot: "close-icon" }))));
     }
     static get style() { return urSnackbarCss; }
 }, [257, "ur-snackbar", {

package/dist/components/ur-stats.js

@@ -1,4 +1,4 @@
-import { U as UrStats$1, d as defineCustomElement$1 } from './p-CMaS5_FI.js';
+import { U as UrStats$1, d as defineCustomElement$1 } from './p-DIrqGiUJ.js';
 
 const UrStats = UrStats$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ur-stepper.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$3 } from './p-Bx6fE2l3.js';
+import { d as defineCustomElement$3 } from './p-BY4DFbqH.js';
 import { d as defineCustomElement$2 } from './p-BQj9UX8Z.js';
 
 const urStepperCss = ":host{display:block;width:100%;--ur-color-background:var(--mdui-color-background);--ur-color-on-background:var(--mdui-color-on-background);--ur-color-on-complete-surface:#1a5100;--ur-color-complete-surface:#c6f4d0;--ur-color-primary:var(--mdui-color-primary);--ur-color-primary-container:var(--mdui-color-primary-container);--ur-color-on-surface-lite:var(--mdui-color-on-surface-lite);--ur-color-surface-container-high:var(--mdui-color-surface-container-high)}:host .stepper-container{display:flex;flex-direction:column;width:100%;max-width:800px}:host .step-indicator{display:flex;flex-direction:column;width:100%;position:relative;margin-bottom:8px;transition:all 0.3s ease}:host .step-inline-info-holder{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}:host .step-indicator-header{display:flex;flex-direction:row;align-items:center;padding:1rem 0}:host .step-marker{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:rgb(var(--mdui-color-secondary));color:rgb(var(--mdui-color-on-secondary));font-weight:600;font-size:0.875rem;transition:all 0.3s ease;flex-shrink:0;z-index:2;position:relative}:host .step-indicator.active .step-marker{background-color:rgb(var(--mdui-color-primary)) !important;border-color:rgb(var(--mdui-color-primary)) !important;color:rgb(var(--mdui-color-on-primary)) !important;box-shadow:0 2px 8px rgba(var(--mdui-color-primary), 0.4) !important}:host .step-indicator.completed .step-marker{background-color:rgb(var(--mdui-color-primary));border-color:rgb(var(--mdui-color-primary));color:rgb(var(--mdui-color-on-primary))}:host .step-indicator.skipped .step-marker{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error));color:rgb(var(--mdui-color-on-error-container))}:host .step-number{line-height:1}:host .step-marker mdui-icon{font-size:1.25rem}:host .step-content{margin-top:8px;margin-left:16px;flex:1;border-left:2px solid rgb(var(--mdui-color-outline-variant))}:host .step-indicator.active .step-content{border-left:2px solid rgb(var(--mdui-color-primary))}:host .step-title{font-size:0.875rem;font-weight:600;color:rgb(var(--mdui-color-on-surface));line-height:1.25;margin-bottom:0.25rem}:host .step-indicator.active .step-title{color:rgb(var(--mdui-color-primary))}:host .step-indicator.completed .step-title{color:rgb(var(--mdui-color-primary))}:host .step-description{font-size:0.75rem;color:rgb(var(--mdui-color-on-surface-variant));line-height:1.4;max-width:200px}:host .step-connector{position:absolute;left:1.25rem;top:3.5rem;width:2px;height:calc(100% + 1rem);background-color:rgb(var(--mdui-color-outline-variant));transition:background-color 0.3s ease;z-index:1}:host .step-indicator.completed .step-connector{background-color:rgb(var(--mdui-color-primary))}:host .step-indicator:last-child .step-connector{display:none}:host .step-indicator.completed .step-marker{background-color:var(--ur-color-complete-surface);color:var(--ur-color-on-complete-surface)}:host .step-slot-content{margin-left:22px;margin-top:8px;margin-bottom:8px;padding:16px;background-color:rgb(var(--mdui-color-surface-container-low));border-radius:8px;animation:slideDown 0.3s ease-out}:host .step-actions{display:flex;justify-content:flex-start;gap:12px;padding-top:16px}@keyframes slideDown{from{opacity:0;transform:translateY(-10px);max-height:0}to{opacity:1;transform:translateY(0);max-height:1000px}}";
@@ -199,7 +199,7 @@ const UrStepper$1 = /*@__PURE__*/ proxyCustomElement(class UrStepper extends H {
         this.updateStepVisibility();
     }
     render() {
-        return (h(Host, { key: 'aa1327d979a2782573e70cac785b323f82a3cb8f', class: this.customClass }, h("div", { key: '76d7dd437419d95fda256c145dc04d11dfdf310f', class: "stepper-container" }, Array.from({ length: this.stepCount }, (_, index) => this.renderStepIndicator(index + 1)))));
+        return (h(Host, { key: '379d47e3c8ad0eae8961604743c74aba15b84926', class: this.customClass }, h("div", { key: 'ab2164b3d4595492f3e2ec21fa5b6c177dcbb347', class: "stepper-container" }, Array.from({ length: this.stepCount }, (_, index) => this.renderStepIndicator(index + 1)))));
     }
     get el() { return this; }
     static get style() { return urStepperCss; }

package/dist/components/ur-subscription-card.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import './p-CZtE3KBu.js';
 import './p-DRMQwXMs.js';
-import { d as defineCustomElement$2 } from './p-Bx6fE2l3.js';
+import { d as defineCustomElement$2 } from './p-BY4DFbqH.js';
 
 const urSubscriptionCardCss = ":host{display:block;width:100%}:host .card{padding:16px;width:100%;box-sizing:border-box}:host .card-content{display:flex;flex-direction:column;gap:12px}:host .row{display:flex;justify-content:space-between;align-items:center}:host .label{font-size:14px;color:rgb(var(--mdui-color-on-surface-variant))}:host .value{font-size:14px;font-weight:600;color:rgb(var(--mdui-color-on-surface));display:flex;align-items:center;gap:4px}:host .value.premium{color:rgb(var(--mdui-color-primary))}:host .premium-icon{font-size:18px}:host .status-active{color:rgb(var(--mdui-color-primary))}:host .status-cancelled{color:rgb(var(--mdui-color-error))}:host .status-past_due{color:rgb(var(--mdui-color-error))}:host .status-expired{color:rgb(var(--mdui-color-on-surface-variant))}:host .actions{margin-top:8px;display:flex;justify-content:flex-end}:host .tier-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}:host .tier-avatar{width:48px;height:48px;border-radius:50%;background:rgb(var(--mdui-color-surface-container-highest));display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host .tier-avatar img{width:100%;height:100%;object-fit:cover}:host .tier-avatar mdui-icon{font-size:24px;color:rgb(var(--mdui-color-on-surface-variant))}:host .tier-owner-info{display:flex;flex-direction:column;min-width:0}:host .tier-owner-name{font-size:16px;font-weight:600;color:rgb(var(--mdui-color-on-surface));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tier-name{font-size:14px;color:rgb(var(--mdui-color-on-surface-variant));margin-top:2px}:host .tier-actions{display:flex;gap:8px;justify-content:flex-end}";
 
@@ -94,7 +94,7 @@ const UrSubscriptionCard$1 = /*@__PURE__*/ proxyCustomElement(class UrSubscripti
         return (h("mdui-card", { variant: "outlined", class: "card tier-card" }, h("div", { class: "card-content" }, h("div", { class: "tier-header" }, h("div", { class: "tier-avatar" }, this.ownerAvatar ? (h("img", { src: this.ownerAvatar, alt: "" })) : (h("mdui-icon", { name: iconName }))), h("div", { class: "tier-owner-info" }, h("span", { class: "tier-owner-name" }, this.ownerName || 'Unknown'), h("span", { class: "tier-name" }, this.tierName, " \u00B7 ", this.tierPrice))), h("div", { class: "row" }, h("span", { class: "label" }, this.statusLabel), h("span", { class: `value status-${this.status}` }, this.getStatusDisplayName())), this.periodEnd && (h("div", { class: "row" }, h("span", { class: "label" }, dateLabel), h("span", { class: "value" }, this.formatDate(this.periodEnd)))), h("div", { class: "actions tier-actions" }, h("ur-button", { variant: "text", onClick: this.handleViewProfileClick }, this.viewProfileText), this.status === 'active' && !this.cancelAtPeriodEnd && (h("ur-button", { variant: "text", onClick: this.handleCancelClick }, this.cancelButtonText)), this.status === 'active' && this.cancelAtPeriodEnd && (h("ur-button", { variant: "text", onClick: this.handleCancelNowClick }, this.cancelNowButtonText)), h("ur-button", { variant: "tonal", onClick: this.handleManageClick }, this.manageButtonText)))));
     }
     render() {
-        return (h(Host, { key: '55bd660342fafafd6dd52c1945f622399e2d179a' }, this.mode === 'tier' ? this.renderTierCard() : this.renderPremiumCard()));
+        return (h(Host, { key: '63e01de6e0bd41fdac1710743666d3377223490d' }, this.mode === 'tier' ? this.renderTierCard() : this.renderPremiumCard()));
     }
     static get style() { return urSubscriptionCardCss; }
 }, [257, "ur-subscription-card", {

package/dist/components/ur-subscription-tier-editor.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 import './p-DRMQwXMs.js';
 import { d as defineCustomElement$2 } from './p-BqPt3V8I.js';
 import { d as defineCustomElement$3 } from './p-x3Fhy6xl.js';
-import { d as defineCustomElement$4 } from './p-Bx6fE2l3.js';
+import { d as defineCustomElement$4 } from './p-BY4DFbqH.js';
 
 const urSubscriptionTierEditorCss = ":host{display:block;--ur-color-error:var(--mdui-color-error)}:host .editor-container{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:550px}:host .editor-subtitle{font-size:14px;line-height:20px;letter-spacing:0.1px;margin:0 0 0.5rem 0;color:rgb(var(--mdui-color-on-surface-variant))}:host .form-section{display:flex;flex-direction:column;gap:0.5rem}:host .section-label{font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.1px;color:rgb(var(--mdui-color-on-surface));margin-bottom:0.25rem}:host .benefits-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}:host .benefit-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:rgba(var(--mdui-color-surface-variant), 0.5);border-radius:8px;animation:fadeIn 0.2s ease-in-out;transition:all 0.2s ease;border:2px solid transparent}:host .benefit-item.dragging{opacity:0.5;background:rgba(var(--mdui-color-primary), 0.1)}:host .benefit-item.drag-over{border-color:rgb(var(--mdui-color-primary));background:rgba(var(--mdui-color-primary), 0.05)}:host .drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:rgba(var(--mdui-color-on-surface), 0.4);transition:color 0.2s ease, background-color 0.2s ease;flex-shrink:0;min-width:44px;min-height:44px;margin:-0.75rem -0.5rem -0.75rem -1rem;padding:0.75rem 0.5rem 0.75rem 1rem;border-radius:8px 0 0 8px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}:host .drag-handle:hover{color:rgba(var(--mdui-color-on-surface), 0.7);background:rgba(var(--mdui-color-on-surface), 0.04)}:host .drag-handle:active{cursor:grabbing;background:rgba(var(--mdui-color-primary), 0.08);color:rgb(var(--mdui-color-primary))}:host .drag-handle mdui-icon{font-size:20px}:host .benefit-badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgb(var(--mdui-color-primary));color:rgb(var(--mdui-color-on-primary));flex-shrink:0}:host .benefit-badge mdui-icon{font-size:16px}:host .benefit-text{font-size:14px;line-height:20px;color:rgb(var(--mdui-color-on-surface));flex:1;word-break:break-word}:host .remove-benefit-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;cursor:pointer;border-radius:50%;color:rgb(var(--mdui-color-on-surface-variant));transition:background-color 0.2s, color 0.2s;flex-shrink:0;margin-left:0.5rem}:host .remove-benefit-btn:hover{background:rgba(var(--mdui-color-error), 0.1);color:rgb(var(--mdui-color-error))}:host .remove-benefit-btn mdui-icon{--mdui-comp-icon-size:18px}:host .benefits-count{font-size:12px;color:rgb(var(--mdui-color-on-surface-variant));text-align:right;display:block}:host .max-benefits-notice{font-size:12px;color:rgb(var(--mdui-color-on-surface-variant));margin:0.25rem 0 0 0;font-style:italic}:host .checkbox-section{padding:0}:host .checkbox-section+.checkbox-section{margin-top:-1rem}:host .checkbox-content{display:flex;flex-direction:column;gap:0.125rem}:host .checkbox-label{font-size:14px;font-weight:500;line-height:20px;color:rgb(var(--mdui-color-on-surface))}:host .checkbox-hint{font-size:12px;line-height:16px;color:rgb(var(--mdui-color-on-surface-variant))}:host .form-actions{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid rgba(var(--mdui-color-outline-variant), 0.5);margin-top:0.5rem}:host .actions-left{display:flex;align-items:center;gap:0.5rem}:host .actions-right{display:flex;align-items:center;gap:0.5rem}@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes skeleton-loading{0%{background-position:-650px 0}100%{background-position:650px 0}}:host .loading{animation-duration:1.7s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:skeleton-loading;background:linear-gradient(\n        to right,\n        rgba(var(--mdui-color-on-background), 0.04) 2%,\n        rgba(var(--mdui-color-on-background), 0.12) 18%,\n        rgba(var(--mdui-color-on-background), 0.04) 33%\n    );background-size:1000px;border-radius:4px}:host .skeleton-title{height:28px;width:200px;margin-bottom:1rem}:host .skeleton-field{height:56px;width:100%;margin-bottom:1rem;border-radius:8px}:host .skeleton-button{height:40px;width:100px;border-radius:20px}:host .benefit-picker .picker-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem}:host .benefit-picker .picker-header .editor-title{margin:0}:host .benefit-picker .form-section ur-button{margin-top:0.5rem}:host .back-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;cursor:pointer;border-radius:50%;color:rgb(var(--mdui-color-on-surface));transition:background-color 0.2s}:host .back-btn:hover{background:rgba(var(--mdui-color-on-surface), 0.08)}:host .back-btn mdui-icon{--mdui-comp-icon-size:24px}:host .picker-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}:host .picker-divider::before,:host .picker-divider::after{content:'';flex:1;height:1px;background:rgba(var(--mdui-color-outline-variant), 0.5)}:host .picker-divider span{font-size:12px;color:rgb(var(--mdui-color-on-surface-variant));white-space:nowrap}:host .preconfigured-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}:host .preconfigured-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:rgba(var(--mdui-color-surface-variant), 0.3);border-radius:8px;transition:background-color 0.2s}:host .preconfigured-item:hover{background:rgba(var(--mdui-color-surface-variant), 0.5)}:host .preconfigured-item.added{opacity:0.6}:host .preconfigured-badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgb(var(--mdui-color-primary));color:rgb(var(--mdui-color-on-primary));flex-shrink:0}:host .preconfigured-badge mdui-icon{font-size:16px}:host .preconfigured-text{font-size:14px;line-height:20px;color:rgb(var(--mdui-color-on-surface));flex:1}:host .preconfigured-item ur-button{flex-shrink:0}";