urnovl-web-components 0.0.259 → 0.0.261

package/dist/cjs/radio-DWksGWLi.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var componentStyle = require('./component-style-BC5DdXyd.js');
+var directive = require('./directive-CxKj9eM_.js');
+var state = require('./state-BClMM5R0.js');
+var classMap = require('./class-map-Epaosh8c.js');
+var ref = require('./ref-Dnp-_rKJ.js');
+var watch = require('./watch-MAiBzcfm.js');
+var attr = require('./attr-D_LyPdSc.js');
+var svgTag = require('./svg-tag-BC3DRit2.js');
+var rippleMixin = require('./ripple-mixin-CsKjDjw-.js');
+require('./index-DqsOXF7F.js');
+
+let IconCircle = class IconCircle extends componentStyle.i {
+    render() {
+        return svgTag.svgTag('<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/>');
+    }
+};
+IconCircle.styles = svgTag.style;
+IconCircle = componentStyle.__decorate([
+    componentStyle.t('mdui-icon-circle')
+], IconCircle);
+
+let IconRadioButtonUnchecked = class IconRadioButtonUnchecked extends componentStyle.i {
+    render() {
+        return svgTag.svgTag('<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>');
+    }
+};
+IconRadioButtonUnchecked.styles = svgTag.style;
+IconRadioButtonUnchecked = componentStyle.__decorate([
+    componentStyle.t('mdui-icon-radio-button-unchecked')
+], IconRadioButtonUnchecked);
+
+const radioStyle = componentStyle.i$1 `:host{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none;border-radius:.125rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon{display:flex;position:absolute;font-size:1.5rem}:not(.initial) .icon{transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.unchecked-icon{transition-property:color;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .unchecked-icon,:host([hover]) .unchecked-icon,:host([pressed]) .unchecked-icon{color:rgb(var(--mdui-color-on-surface))}.checked-icon{opacity:0;transform:scale(.2);transition-property:color,opacity,transform;color:rgb(var(--mdui-color-primary))}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:50%;width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface))}.label:not(.initial){transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]:not([checked=false i])) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]:not([checked=false i])) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]:not([checked=false i])) .checked-icon{opacity:1;transform:scale(.5)}i.invalid{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}i.invalid .icon{color:rgb(var(--mdui-color-error))}.label.invalid{color:rgb(var(--mdui-color-error))}:host([disabled]:not([disabled=false i])),:host([group-disabled]){cursor:default;pointer-events:none}:host([disabled]:not([disabled=false i])) .icon,:host([group-disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]:not([disabled=false i])) .label,:host([group-disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}`;
+
+/**
+ * @summary 单选框组件。需配合 `<mdui-radio-group>` 组件使用
+ *
+ * ```html
+ * <mdui-radio-group value="chinese">
+ * ..<mdui-radio value="chinese">Chinese</mdui-radio>
+ * ..<mdui-radio value="english">English</mdui-radio>
+ * </mdui-radio-group>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 选中该单选项时触发
+ *
+ * @slot - 文本内容
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ *
+ * @csspart control - 左侧图标容器
+ * @csspart unchecked-icon 未选中状态的图标
+ * @csspart checked-icon 选中状态的图标
+ * @csspart label - 文本内容
+ */
+let Radio = class Radio extends rippleMixin.RippleMixin(rippleMixin.FocusableMixin(componentStyle.MduiElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 当前单选项的值
+         */
+        this.value = '';
+        /**
+         * 是否禁用当前单选项
+         */
+        this.disabled = false;
+        /**
+         * 当前单选项是否已选中
+         */
+        this.checked = false;
+        // 是否验证未通过。由 <mdui-radio-group> 控制该参数
+        this.invalid = false;
+        // 父组件中是否设置了禁用。由 <mdui-radio-group> 控制该参数
+        this.groupDisabled = false;
+        // 是否可聚焦。
+        // 单独使用该组件时，默认可聚焦。
+        // 如果放在 <mdui-radio-group> 组件中使用，则由 <mdui-radio-group> 控制该参数
+        this.focusable = true;
+        // 是否是初始状态，不显示动画。由 <mdui-radio-group> 组件控制该参数
+        this.isInitial = true;
+        this.rippleRef = ref.e();
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.isDisabled();
+    }
+    get focusElement() {
+        return this;
+    }
+    get focusDisabled() {
+        return this.isDisabled() || !this.focusable;
+    }
+    onCheckedChange() {
+        this.emit('change');
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.addEventListener('click', () => {
+            if (!this.isDisabled()) {
+                this.checked = true;
+            }
+        });
+    }
+    render() {
+        const className = classMap.e({
+            invalid: this.invalid,
+            initial: this.isInitial,
+        });
+        return componentStyle.x `<i part="control" class="${className}"><mdui-ripple ${ref.n(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
+            ? componentStyle.x `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : componentStyle.x `<mdui-icon-radio-button-unchecked class="i"></mdui-icon-radio-button-unchecked>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
+            ? componentStyle.x `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+            : componentStyle.x `<mdui-icon-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label ${className}"></slot>`;
+    }
+    isDisabled() {
+        return this.disabled || this.groupDisabled;
+    }
+};
+Radio.styles = [componentStyle.componentStyle, radioStyle];
+componentStyle.__decorate([
+    directive.n({ reflect: true })
+], Radio.prototype, "value", void 0);
+componentStyle.__decorate([
+    directive.n({
+        type: Boolean,
+        reflect: true,
+        converter: attr.booleanConverter,
+    })
+], Radio.prototype, "disabled", void 0);
+componentStyle.__decorate([
+    directive.n({
+        type: Boolean,
+        reflect: true,
+        converter: attr.booleanConverter,
+    })
+], Radio.prototype, "checked", void 0);
+componentStyle.__decorate([
+    directive.n({ reflect: true, attribute: 'unchecked-icon' })
+], Radio.prototype, "uncheckedIcon", void 0);
+componentStyle.__decorate([
+    directive.n({ reflect: true, attribute: 'checked-icon' })
+], Radio.prototype, "checkedIcon", void 0);
+componentStyle.__decorate([
+    state.r()
+], Radio.prototype, "invalid", void 0);
+componentStyle.__decorate([
+    directive.n({
+        type: Boolean,
+        reflect: true,
+        converter: attr.booleanConverter,
+        attribute: 'group-disabled',
+    })
+], Radio.prototype, "groupDisabled", void 0);
+componentStyle.__decorate([
+    state.r()
+], Radio.prototype, "focusable", void 0);
+componentStyle.__decorate([
+    state.r()
+], Radio.prototype, "isInitial", void 0);
+componentStyle.__decorate([
+    watch.watch('checked', true)
+], Radio.prototype, "onCheckedChange", null);
+Radio = componentStyle.__decorate([
+    componentStyle.t('mdui-radio')
+], Radio);

package/dist/cjs/{tab-panel-BS_8ksq9.js → tab-BVwUIXQ4.js}

@@ -345,52 +345,3 @@ componentStyle.__decorate([
 Tab = componentStyle.__decorate([
     componentStyle.t('mdui-tab')
 ], Tab);
-
-const tabPanelStyle = componentStyle.i$1 `:host{display:block;overflow-y:auto;flex:1 1 auto}:host(:not([active])){display:none}`;
-
-/**
- * @summary 选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用
- *
- * ```html
- * <mdui-tabs value="tab-1">
- * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
- * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
- * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
- *
- * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
- * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
- * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
- * </mdui-tabs>
- * ```
- *
- * @slot - 选项卡面板项内容
- */
-let TabPanel = class TabPanel extends componentStyle.MduiElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * 是否为激活状态，由 `<mdui-tabs>` 组件控制该状态
-         */
-        this.active = false;
-    }
-    render() {
-        return componentStyle.x `<slot></slot>`;
-    }
-};
-TabPanel.styles = [
-    componentStyle.componentStyle,
-    tabPanelStyle,
-];
-componentStyle.__decorate([
-    directive.n({ reflect: true })
-], TabPanel.prototype, "value", void 0);
-componentStyle.__decorate([
-    directive.n({
-        type: Boolean,
-        reflect: true,
-        converter: attr.booleanConverter,
-    })
-], TabPanel.prototype, "active", void 0);
-TabPanel = componentStyle.__decorate([
-    componentStyle.t('mdui-tab-panel')
-], TabPanel);

package/dist/cjs/tab-panel-KdoHPsyE.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var componentStyle = require('./component-style-BC5DdXyd.js');
+var directive = require('./directive-CxKj9eM_.js');
+var attr = require('./attr-D_LyPdSc.js');
+
+const tabPanelStyle = componentStyle.i$1 `:host{display:block;overflow-y:auto;flex:1 1 auto}:host(:not([active])){display:none}`;
+
+/**
+ * @summary 选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @slot - 选项卡面板项内容
+ */
+let TabPanel = class TabPanel extends componentStyle.MduiElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为激活状态，由 `<mdui-tabs>` 组件控制该状态
+         */
+        this.active = false;
+    }
+    render() {
+        return componentStyle.x `<slot></slot>`;
+    }
+};
+TabPanel.styles = [
+    componentStyle.componentStyle,
+    tabPanelStyle,
+];
+componentStyle.__decorate([
+    directive.n({ reflect: true })
+], TabPanel.prototype, "value", void 0);
+componentStyle.__decorate([
+    directive.n({
+        type: Boolean,
+        reflect: true,
+        converter: attr.booleanConverter,
+    })
+], TabPanel.prototype, "active", void 0);
+TabPanel = componentStyle.__decorate([
+    componentStyle.t('mdui-tab-panel')
+], TabPanel);

package/dist/cjs/ur-ad-banner.cjs.entry.js

@@ -80,13 +80,13 @@ const UrAdBanner = class {
     }
     render() {
         const isAnchor = this.adFormat === 'anchor';
-        return (index.h(index.Host, { key: '2b13045d41f3b06427d99ec011e692dcffbffe51', class: {
+        return (index.h(index.Host, { key: 'a72f771341ac759c41643b0ea31dc58fb130cab2', class: {
                 'ur-ad-banner': true,
                 [`ur-ad-banner--${this.position}`]: true,
                 'ur-ad-banner--anchor': isAnchor,
-            } }, this.showLabel && !isAnchor && (index.h("div", { key: '15f1036bc85c05dd40856b3bb555269465dfa7ae', class: "ur-ad-banner__label" }, index.h("span", { key: 'ef68cb57833a2f2adc2c175ef0d8f14c091b0f4a', class: "ur-ad-banner__label-text" }, "Advertisement"))), index.h("ins", { key: '66f8018d3190cebaca4c0fb36d9607e7914f8791', class: "adsbygoogle", style: {
+            } }, this.showLabel && !isAnchor && (index.h("div", { key: '6408d0cc2597766f186fe4a7ac0de08e17427050', class: "ur-ad-banner__label" }, index.h("span", { key: '8827ad938f9671fa1e2f9fbe2b4c53c31c844df4', class: "ur-ad-banner__label-text" }, "Advertisement"))), index.h("ins", { key: '5f1da5aa0d9f5dbcae5ebf3eda22eb74cb6e0481', class: "adsbygoogle", style: {
                 display: 'block',
-            }, "data-ad-client": this.adClient, "data-ad-slot": this.adSlot, "data-ad-format": this.adFormat, "data-full-width-responsive": this.fullWidthResponsive ? 'true' : 'false' }), this.showGoAdFree && !isAnchor && (index.h("div", { key: '4d8d82f5d71f34fa51de890605214c34858b94b2', class: "ur-ad-banner__cta" }, index.h("button", { key: '7e3402ac93324d387c41f296ea8eefd5a439b511', class: "ur-ad-banner__cta-button", onClick: () => this.handleGoAdFree(), type: "button" }, index.h("svg", { key: '0e90f73ca3dcc6c6329cf3b0c4ce616072615cdd', class: "ur-ad-banner__cta-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '4fe80b81a1f6ae04efa73d7f1d0c41e05d7ec234', d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })), index.h("span", { key: 'ca95a4c936b15f6c77eea491ea6a9f8ca5b389f4' }, "Go Ad-Free"))))));
+            }, "data-ad-client": this.adClient, "data-ad-slot": this.adSlot, "data-ad-format": this.adFormat, "data-full-width-responsive": this.fullWidthResponsive ? 'true' : 'false' }), this.showGoAdFree && !isAnchor && (index.h("div", { key: '3f7622634c6d17522e3abea7ab3352695f9060bb', class: "ur-ad-banner__cta" }, index.h("button", { key: '63aded45da7bc021c6b6d7f3fb68de9d46914e8f', class: "ur-ad-banner__cta-button", onClick: () => this.handleGoAdFree(), type: "button" }, index.h("svg", { key: 'bd7fa595be7b34d5585b7cb9eddbb5d9a241ee8f', class: "ur-ad-banner__cta-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '47e284a3ce66b69440c36a076efb9acf217b32a3', d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })), index.h("span", { key: 'f69569d74b751f6e10f420518a823eb9dc53f972' }, "Go Ad-Free"))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ur-author-page-profile.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DlgBfuIH.js');
-require('./ur-avatar-COaGB2q6.js');
+require('./ur-avatar-BV3tq4vp.js');
 require('./ur-button.cjs.entry.js');
 require('./ur-long-description.cjs.entry.js');
 require('./ur-chip.cjs.entry.js');
@@ -89,13 +89,13 @@ const UrAuthorPageProfile = class {
             'profile-mobile-main': this.platform === 'mobile-main',
             'profile-mobile-secondary': this.platform === 'mobile-secondary',
         };
-        return (index.h(index.Host, { key: 'a760fc233b152e51281940ec7c0c93bcb04e0d59', class: classes }, index.h("div", { key: '677aaf2ae2753ff602808e51672604dac40ed320', class: classes }, this.platform === 'desktop' && (index.h("div", { key: '2cf53c6c306ac999d8ac9188a93f63739b3f8f5d', class: "desktop-content" }, index.h("div", { key: '1eee2f64867938e48d9516808c531a927e553875', class: "avatar" }, index.h("ur-avatar", { key: '1da9a3cae98f007fa9618ffb6ffd7dbc8bf51efd', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton })), index.h("div", { key: 'cd48e093dc7399dd0e035c7300ba52c3990f4181', class: "info" }, index.h("div", { key: 'cbdd62301b96432a7100cc114ea54e3a73954009', class: "name" }, this.skeleton ? index.h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name), index.h("div", { key: 'd01a969c301a89b53b800c95561800ece4c60816', class: "author-label" }, this.authorText), this.skeleton ? index.h("ur-long-description", { class: "bio", skeleton: true }) : this.bio && index.h("ur-long-description", { class: "bio", description: this.bio, markdown: this.markdown, showLessText: this.showLessText, showMoreText: this.showMoreText }), this.renderLocation(), this.renderAllLinks()))), this.platform === 'desktop' && [
+        return (index.h(index.Host, { key: 'a2d154dea6cb406e660e662f9e30aaf6a035555e', class: classes }, index.h("div", { key: 'f897c3e1f92bf0d6cd1098c9c114df31a2f1b028', class: classes }, this.platform === 'desktop' && (index.h("div", { key: '8f0f1ae2dc1647c0905b3b54789a4ad43eea309d', class: "desktop-content" }, index.h("div", { key: '45b223eb1ac66fff5d29b63ce9edab5357fab60f', class: "avatar" }, index.h("ur-avatar", { key: 'b2f811286f72a844a7581312bd403bbc43b75395', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton })), index.h("div", { key: '34a6d8e6299bf25e255a125a70db1955d48b7441', class: "info" }, index.h("div", { key: 'e7d2e44375f193b8c5e63a650200d7c4cbd573b0', class: "name" }, this.skeleton ? index.h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name), index.h("div", { key: '6c8cbd36c60c9858777e7c6448b6b2ad077dad28', class: "author-label" }, this.authorText), this.skeleton ? index.h("ur-long-description", { class: "bio", skeleton: true }) : this.bio && index.h("ur-long-description", { class: "bio", description: this.bio, markdown: this.markdown, showLessText: this.showLessText, showMoreText: this.showMoreText }), this.renderLocation(), this.renderAllLinks()))), this.platform === 'desktop' && [
             this.renderStats(),
             this.renderTopWork(),
             this.renderGenres(),
             this.renderAlternateNames(),
             this.renderLifeDates(),
-        ], this.platform === 'mobile-main' && (index.h("div", { key: 'df82225062dc81a36afba99077b6de2b3f936470', class: "mobile-main-content" }, index.h("div", { key: '37d40cbb4b1895bf3ffb1fca791f5cd748b45dad', class: "avatar" }, index.h("ur-avatar", { key: '56333a5af312e62a915d0ee55b8d745fdff1284b', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton })), index.h("div", { key: '6f2868b8979022953edd13a07bb905abbafb0819', class: "info" }, index.h("div", { key: 'dbe025080e3a301fe2ab651b4cd747f118c9d700', class: "name" }, this.skeleton ? index.h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name), index.h("div", { key: 'bb02909028f6b914fe295334596855100803cfe7', class: "author-label" }, this.authorText), this.skeleton ? index.h("ur-long-description", { class: "bio", skeleton: true }) : this.bio && index.h("ur-long-description", { class: "bio", description: this.bio, markdown: this.markdown, showLessText: this.showLessText, showMoreText: this.showMoreText }), this.renderLocation(), this.renderAllLinks()))), this.platform === 'mobile-secondary' && [
+        ], this.platform === 'mobile-main' && (index.h("div", { key: '360e7e7673a11e22aee7c75728a61e18e297429b', class: "mobile-main-content" }, index.h("div", { key: 'b517e0e40ac1d0f4716f1c0e24fc8956965416e1', class: "avatar" }, index.h("ur-avatar", { key: 'e8299f83dbf52c838b84ae7d207846bc7fa76951', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton })), index.h("div", { key: '71eb777b0186e84b4e92187c129fe3ff16af4230', class: "info" }, index.h("div", { key: 'e51858945e9fbaf85a3d17d879042f453df64e34', class: "name" }, this.skeleton ? index.h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name), index.h("div", { key: '9bf0608b4840640c5aafb2e4f912ae5ebd3b3593', class: "author-label" }, this.authorText), this.skeleton ? index.h("ur-long-description", { class: "bio", skeleton: true }) : this.bio && index.h("ur-long-description", { class: "bio", description: this.bio, markdown: this.markdown, showLessText: this.showLessText, showMoreText: this.showMoreText }), this.renderLocation(), this.renderAllLinks()))), this.platform === 'mobile-secondary' && [
             this.renderStats(),
             this.renderTopWork(),
             this.renderGenres(),

package/dist/cjs/ur-autosave-drawer.cjs.entry.js

@@ -107,7 +107,7 @@ const UrAutosaveDrawer = class {
         return (index.h("div", { class: "confirmation-content" }, index.h("div", { class: "confirmation-title" }, this.deleteConfirmMessage), index.h("div", { class: "confirmation-buttons" }, index.h("ur-button-icon", { icon: "check", variant: "standard", buttonHeight: "32px", buttonWidth: "32px", onClick: event => this.handleDeleteConfirm(event, autosave) }), index.h("ur-button-icon", { icon: "close", variant: "standard", buttonHeight: "32px", buttonWidth: "32px", onClick: event => this.handleDeleteCancel(event, autosave) }))));
     }
     render() {
-        return (index.h(index.Host, { key: 'b97b9fe1448b4bae027df77b2507e63680b9aef8' }, index.h("div", { key: '4ffd2df7cba9f9543b7443f14136357d1f2215ed', class: "drawer" }, this.autosaves && this.autosaves.length > 0 && (index.h("div", { key: 'cd1b90e7e91312dd42163f5bf95f1efa620aa764', class: "autosaves-container" }, index.h("div", { key: '6ba8ed38dba7601be5c646d44762f5a71450be7c', class: "autosaves-title" }, this.autosavesTitle), index.h("ur-list", { key: '9e0efc0b92591c2143ed17590d2d9e7cfcf93d3c' }, this.autosaves.map((autosave, index$1) => autosave.showOptions ? (index.h("ur-list-item", { key: autosave.id || autosave._id || index$1, nonclickable: true, class: "confirmation-item" }, this.renderDeleteConfirmation(autosave))) : (index.h("div", { class: "autosave-item" }, index.h("ur-list-item", { key: autosave.id || autosave._id || index$1, onClick: event => this.handleOpenAutosave(event, autosave) }, this.renderAutosaveContent(autosave)), index.h("ur-button-icon", { class: "delete-button", icon: "delete", variant: "standard", buttonHeight: "40px", buttonWidth: "40px", onClick: event => this.handleDeleteRequest(event, autosave) }))))))))));
+        return (index.h(index.Host, { key: 'b9b9e18edcf0157f821fafd71e6e22d88dd6378d' }, index.h("div", { key: 'bb07dcbdc4c8333455291049158b6057c80a7c7c', class: "drawer" }, this.autosaves && this.autosaves.length > 0 && (index.h("div", { key: 'aa07506ed6a09bb93c984ec8f12243b23460a3d0', class: "autosaves-container" }, index.h("div", { key: '1619d8e7c1a8ff0f841b56f1a0e27ec9cbe02597', class: "autosaves-title" }, this.autosavesTitle), index.h("ur-list", { key: '1fdcd75b4480fc8ca003edf5bc94d6e9d8bc8457' }, this.autosaves.map((autosave, index$1) => autosave.showOptions ? (index.h("ur-list-item", { key: autosave.id || autosave._id || index$1, nonclickable: true, class: "confirmation-item" }, this.renderDeleteConfirmation(autosave))) : (index.h("div", { class: "autosave-item" }, index.h("ur-list-item", { key: autosave.id || autosave._id || index$1, onClick: event => this.handleOpenAutosave(event, autosave) }, this.renderAutosaveContent(autosave)), index.h("ur-button-icon", { class: "delete-button", icon: "delete", variant: "standard", buttonHeight: "40px", buttonWidth: "40px", onClick: event => this.handleDeleteRequest(event, autosave) }))))))))));
     }
     static get watchers() { return {
         "autosaves": ["autosavesChanged"]

package/dist/cjs/{ur-avatar-COaGB2q6.js → ur-avatar-BV3tq4vp.js}

@@ -9,7 +9,6 @@ const UrAvatar = class {
         index.registerInstance(this, hostRef);
         this.size = '32px';
         this.border = '0';
-        this.radius = '50%';
         this.variant = 'user';
         this.skeleton = false;
         this.imageError = false;
@@ -20,6 +19,14 @@ const UrAvatar = class {
             this.updateImageSrc();
         };
     }
+    get effectiveRadius() {
+        // If radius is explicitly set, use it
+        if (this.radius) {
+            return this.radius;
+        }
+        // Otherwise, use default based on variant
+        return this.variant === 'page' ? '8px' : '50%';
+    }
     componentWillLoad() {
         this.updateImageSrc();
     }
@@ -40,20 +47,20 @@ const UrAvatar = class {
         if (this.skeleton) {
             return (index.h(index.Host, { style: {
                     background: 'rgb(var(--ur-color-background))',
-                    borderRadius: this.radius,
+                    borderRadius: this.effectiveRadius,
                     height: this.size,
                     width: this.size,
                     minHeight: this.size,
                     minWidth: this.size
                 } }, index.h("div", { class: "avatar-skeleton loading", style: {
-                    borderRadius: this.radius,
+                    borderRadius: this.effectiveRadius,
                     height: this.size,
                     width: this.size
                 } })));
         }
         return (index.h(index.Host, { style: {
                 background: 'rgb(var(--ur-color-background))',
-                borderRadius: this.radius,
+                borderRadius: this.effectiveRadius,
                 height: this.size,
                 width: this.size,
                 minHeight: this.size,
@@ -61,10 +68,10 @@ const UrAvatar = class {
                 borderWidth: this.border,
                 borderStyle: 'solid',
                 borderColor: 'rgb(var(--ur-color-background))'
-            } }, this.imageSrc && (index.h("img", { class: "avatar", src: this.imageSrc, onError: this.handleImageError, style: { height: this.size, width: this.size, borderRadius: this.radius }, alt: this.name || (this.variant === 'page' ? 'Page Avatar' : 'User Avatar') })), !this.imageSrc && this.name && (index.h("div", { class: "avatar-initials", style: {
+            } }, this.imageSrc && (index.h("img", { class: "avatar", src: this.imageSrc, onError: this.handleImageError, style: { height: this.size, width: this.size, borderRadius: this.effectiveRadius }, alt: this.name || (this.variant === 'page' ? 'Page Avatar' : 'User Avatar') })), !this.imageSrc && this.name && (index.h("div", { class: "avatar-initials", style: {
                 height: this.size,
                 width: this.size,
-                borderRadius: this.radius,
+                borderRadius: this.effectiveRadius,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

package/dist/cjs/ur-avatar_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var urAvatar = require('./ur-avatar-COaGB2q6.js');
+var urAvatar = require('./ur-avatar-BV3tq4vp.js');
 var index = require('./index-DlgBfuIH.js');
 var novls = require('./novls-BHGdrCzu.js');
 var urTooltip = require('./ur-tooltip-8JU9DWrs.js');

package/dist/cjs/ur-bottom-sheet.cjs.entry.js

@@ -137,7 +137,7 @@ const UrBottomSheet = class {
             // Stop click from reaching backdrop
             e.stopPropagation();
         };
-        return (index.h("div", { key: '4b528e5141471ff6376d8f396d0ce61f6ecfb574', class: backdropClasses, onClick: this.handleBackdropClick, "aria-hidden": !this.isVisible }, index.h("div", { key: '8da9fcb4c2995a76ebafc83dfdfac69c6b4a6684', class: sheetClasses, ref: el => (this.sheetElement = el), onClick: handleSheetClick }, index.h("div", { key: '7f598edd87990a9b43125b4514a29f42a6f7bfed', class: "sheet-header", ref: el => (this.headerElement = el), onMouseDown: this.handlePointerDown, onTouchStart: this.handlePointerDown, role: "banner" }, index.h("div", { key: '885c6d62217ac7e3d92f2adbcecb84ebcbdf2a54', class: "sheet-handle" }), index.h("slot", { key: 'ecac7e4aad6a783b8cce4afdd697246c23335b08', name: "header" })), index.h("div", { key: 'b0c4166a5f29d5a50e81014b4acccee064bb1e50', class: "sheet-content", role: "main" }, index.h("slot", { key: '38ff9f7879fe8e3fb6cd3b53214361adb8ab75d2' })), index.h("div", { key: '96b5e0933962b6480e920a62bbf056f75e652a18', class: "sheet-footer", role: "contentinfo" }, index.h("slot", { key: 'f0e5f83d8e47f0bf4affaeb567098fe494d10979', name: "footer" })))));
+        return (index.h("div", { key: 'b048d3e9457c71cb3cfca7a05fcb0075e89f6345', class: backdropClasses, onClick: this.handleBackdropClick, "aria-hidden": !this.isVisible }, index.h("div", { key: '0b4da4b6e04a5654510d1b1e1d40cbdc963f6889', class: sheetClasses, ref: el => (this.sheetElement = el), onClick: handleSheetClick }, index.h("div", { key: '59c174b6d2a504b96d03d89c9bcf4fa735091cbf', class: "sheet-header", ref: el => (this.headerElement = el), onMouseDown: this.handlePointerDown, onTouchStart: this.handlePointerDown, role: "banner" }, index.h("div", { key: 'a3ec116754a5941777778f579fdb4451d173e3a4', class: "sheet-handle" }), index.h("slot", { key: 'a437eb1797f3ff9373c8b8ed5182f286cf548e8d', name: "header" })), index.h("div", { key: 'bed60fb4c40640cb7702ff82fc0ff2262ddec1ee', class: "sheet-content", role: "main" }, index.h("slot", { key: 'ba73f010973f018e167e47315d358116b765c3eb' })), index.h("div", { key: '451dd45d0228b0ac350478a962a661b71c0d11ef', class: "sheet-footer", role: "contentinfo" }, index.h("slot", { key: 'a35c721e40ac4d8661260c496e78fd2e42511620', name: "footer" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ur-bravo.cjs.entry.js

@@ -120,12 +120,12 @@ const UrBravo = class {
         return AMOUNTS.indexOf(this.selectedAmount);
     }
     ;
-    componentDidLoad() {
+    async componentDidLoad() {
         var _a;
         // Set up the label formatter for the slider
         const slider = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ur-slider');
         if (slider) {
-            slider.setLabelFormatter((index) => {
+            await slider.setLabelFormatter((index) => {
                 return `${this.currencySymbol}${AMOUNTS[index]}`;
             });
         }

package/dist/cjs/ur-button-arrow-left_2.cjs.entry.js

@@ -32,7 +32,7 @@ const UrButtonArrowLeft = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '2abb9ab38fb74876cb28e83956e88b3d7b657967' }, index.h("mdui-button-icon", { key: 'a4d1d9cd7ec142f4177ae0fdc371f0c1953a5e1a', borderRadius: "12px", disabled: this.disabled, onClick: () => this.leftClicked.emit() }, index.h("svg", { key: '924026686ffdd505023115ed1b720afb814263b3', xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", viewBox: "0 0 29 28", fill: "none" }, index.h("g", { key: 'e6127b381837755278655696bc68aab45ccb56fa' }, index.h("path", { key: '8787603ebfe6da31675ff8088fc4370841633954', d: "M22.6667 13.9998L6.33334 13.9998M6.33334 13.9998L14.5 22.1665M6.33334 13.9998L14.5 5.83317", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (index.h(index.Host, { key: '0876cbf47f77b9edc80233202c64819fd7cac909' }, index.h("mdui-button-icon", { key: 'e0df47737417fb00ab9cd369be6efc2cba62c4ec', borderRadius: "12px", disabled: this.disabled, onClick: () => this.leftClicked.emit() }, index.h("svg", { key: '270586c8074388d9ee653caf119bbda0dc5518df', xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", viewBox: "0 0 29 28", fill: "none" }, index.h("g", { key: 'f4d3c9cc895da81cfbab009fe001fb094de925bf' }, index.h("path", { key: '984e155c115c8888f550a88ea173aad9bc30bc12', d: "M22.6667 13.9998L6.33334 13.9998M6.33334 13.9998L14.5 22.1665M6.33334 13.9998L14.5 5.83317", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
 };
 UrButtonArrowLeft.style = urButtonArrowLeftCss;
@@ -46,7 +46,7 @@ const UrButtonArrowRight = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '5e4655d187725aadc9852f22658d47135d160f36' }, index.h("mdui-button-icon", { key: 'e8401887af4159576c0ff6395c1e0f0410639478', disabled: this.disabled, onClick: () => this.rightClicked.emit() }, index.h("svg", { key: '041f6505d815ae65aa37053ff22f4881102d1307', width: "29", height: "28", viewBox: "0 0 29 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'b1836c0b452dd8b5f8e84d155d5933a26535a0a0', id: "Arrow right" }, index.h("path", { key: '05a3c327503c329c9714e4b8d1e73751141ae53a', id: "Icon", d: "M6.33331 14.0002H22.6666M22.6666 14.0002L14.5 5.8335M22.6666 14.0002L14.5 22.1668", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (index.h(index.Host, { key: '0b1893e70c1329e2544898baf6f0bf7bfd31750a' }, index.h("mdui-button-icon", { key: '547d288d9fe9a0832b80823b3e370ce1d0e061c2', disabled: this.disabled, onClick: () => this.rightClicked.emit() }, index.h("svg", { key: '064cc987eb29b044ae482613eee76c432c36e3a8', width: "29", height: "28", viewBox: "0 0 29 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'f63405a6bf7969caaeea899143461773675f009a', id: "Arrow right" }, index.h("path", { key: '75bd491be3977c7427cf240654c278070a8ffc57', id: "Icon", d: "M6.33331 14.0002H22.6666M22.6666 14.0002L14.5 5.8335M22.6666 14.0002L14.5 22.1668", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
 };
 UrButtonArrowRight.style = urButtonArrowRightCss;

package/dist/cjs/ur-button-icon.cjs.entry.js

@@ -54,7 +54,7 @@ const UrButtonIcon = class {
             'ur-button-icon': true,
             'ur-button-icon--active': this.active
         };
-        return (index.h(index.Host, { key: 'b0f3c832c53851c5cade6c1181af7c68aeaeb190', style: { borderRadius: this.borderRadius, color: this.fontColor, width: this.buttonWidth, height: this.buttonHeight, backgroundColor: this.backgroundColor } }, index.h("mdui-button-icon", { key: '7cb510c12c3e7cca3e2ee85b300f72bc02ae475b', style: { borderRadius: this.borderRadius, color: this.fontColor, width: this.buttonWidth, height: this.buttonHeight, backgroundColor: this.backgroundColor }, class: classes, variant: this.variant, loading: this.loading, disabled: this.disabled, selected: this.selected }, index.h("slot", { key: '9364b1920ee03c7e4144a166d74f8655d8f01c59' }, this.renderIcon()))));
+        return (index.h(index.Host, { key: '4d97e8c25953d7c643692cc7897b435dd7783d8c', style: { borderRadius: this.borderRadius, color: this.fontColor, width: this.buttonWidth, height: this.buttonHeight, backgroundColor: this.backgroundColor } }, index.h("mdui-button-icon", { key: 'eb2c9fd72ad1c8f27d8f20aecc408664fc585c21', style: { borderRadius: this.borderRadius, color: this.fontColor, width: this.buttonWidth, height: this.buttonHeight, backgroundColor: this.backgroundColor }, class: classes, variant: this.variant, loading: this.loading, disabled: this.disabled, selected: this.selected }, index.h("slot", { key: 'a04233ad72004ec631db6f839c4c12c77dfc5e9a' }, this.renderIcon()))));
     }
 };
 UrButtonIcon.style = urButtonIconCss;

package/dist/cjs/ur-button.cjs.entry.js

@@ -54,7 +54,9 @@ const UrButton = class {
             display: this.maxWidth ? 'inline-block' : (this.fullWidth ? 'block' : 'inline-block')
         };
         const buttonStyle = {
-            color: this.fontColor,
+            color: this.color || this.fontColor,
+            '--mdui-comp-button-text-button-label-text-color': this.color,
+            '--mdui-comp-button-text-button-icon-color': this.color,
             height: this.buttonHeight,
             borderRadius: this.borderRadius,
             backgroundColor: this.backgroundColor,

package/dist/cjs/ur-chapter-item.cjs.entry.js

@@ -56,7 +56,7 @@ const UrChapterItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '45beebc5e61f8a2aaebc5b270a0e3b192cb76cbb' }, index.h("div", { key: '4ec053e9fa3442fa5b3386533c52453e8bfbd6c6', class: "chapter-container" }, index.h("div", { key: 'a646560862e519e854964408e7d4c6a4a806918b', class: `chapter ${this.isBound ? 'bound' : ''}` }, index.h("div", { key: 'c84dfa94322e608edcc5984add5c956ced43b2f1', class: "chapter-card" }, index.h("div", { key: '4f30e776a18f2a2424016e0fb6d399ef67ccf15c', class: "top-hld" }, index.h("div", { key: 'cc32e1c180d8eb22f1baebae52ea8cdb67a75124', class: "txt-hld" }, index.h("span", { key: '643518e56ca470a122d2bc0199b98b0562703430', class: "chapter-number" }, this.chapterNumber), index.h("span", { key: '6ff6cd1788b12ff13f2d6df76a4faa8ee262444f', class: "main-holder" }, index.h("span", { key: 'f79dbd4cfa4a91b9633a79efeb81afe159a3061e', class: "chapter-title", onClick: () => this.onReadChapter(this.chapterId) }, this.chapterTitle), index.h("span", { key: 'd40bfa4e487c8ad2277e0cc0614bf473961f9ae8', class: "story-stats" }, this.likes > 0 && (index.h("span", { key: '71e592c30bdc6bb31dc882777c67bc08f8132b94', class: "story-stat" }, index.h("span", { key: 'b7e83c9cc446785c295666a32a1dae3db2271d65', class: "story-stat-value" }, this.likes), index.h("span", { key: '45024e66f2afccb6c890403cfc59e133d9204f9a', class: "story-stat-label" }, this.likesText))), this.likes > 0 && index.h("span", { key: '35f11b5f9a64e2e4264cebb175906077c2951a1c', class: "story-stat-separator" }, "\u00B7"), this.views > 0 && (index.h("span", { key: '4af2afbd8a45ccb2701a1fe78568217755dc54ea', class: "story-stat" }, index.h("span", { key: '3ae4340e258d7cb44fa98b49c47d091d0f40ded1', class: "story-stat-value" }, this.views), index.h("span", { key: 'ec5f510cbc74a732be07e095ad0895fa1919c5a7', class: "story-stat-label" }, this.viewsText))), this.views > 0 && index.h("span", { key: '4294082939e1008e1cc79986cbab7c559f5597c8', class: "story-stat-separator" }, "\u00B7"), index.h("span", { key: '5ca228695f3b105fb023b634555fe53e89e33141', class: "story-stat" }, index.h("span", { key: 'b779a56648cd3412e8108c4ab77aedbf03814739', class: "story-stat-value" }, this.readingDuration === -1 ? 'N/A' : this.readingDuration), index.h("span", { key: 'aba624fee3d6760eba4f895f219f06a36fdc9514', class: "story-stat-label" }, this.readingDurationText))), index.h("ur-time-ago", { key: '5a6d72785f91a724bd3162081de231d25ecd2ecd', class: "when", date: this.createdAt, locale: this.locale }))))), index.h("div", { key: 'cbca848e0df3e87ae1ec2109a66c4ba0c01f1fc4', class: "action-buttons" }, this.isOwner && (index.h("ur-button", { key: '7ebb4e847f0aef4acf43bd2a5cec79ca81160169', class: "action-button", disabled: this.loading, variant: "text", onClick: () => this.onReadChapter(this.chapterId) }, this.readChapterText)), !this.isLocked && !this.isOwner && (index.h("ur-button", { key: 'ed4b8510cd41150700ddc37078c87570a70302f6', class: "action-button", disabled: this.loading, variant: "text", onClick: () => this.onReadChapter(this.chapterId) }, this.readChapterText)), this.isOwner && !this.isStoryCompleted && this.isLastChapter && (index.h("ur-button-icon", { key: '7ee29b0f2e29f7ecf5aeb369724ce3a50021ca00', fontColor: "rgb(var(--ur-color-primary))", class: "menu-button", icon: "delete", onClick: () => this.onChapterDelete(this.chapterId, this.chapterTitle) })), this.isLocked && (index.h("ur-button-icon", { key: 'e67b3a9ec612e976a4fc882e4b25ada3f9f1d23b', disabled: true, class: "menu-button", icon: "lock" })))))));
+        return (index.h(index.Host, { key: 'f90c3f66435e92f8fde8738d8f58a06dc42ff134' }, index.h("div", { key: '05fed758df81d762d9d8410c6e0615bf4532e537', class: "chapter-container" }, index.h("div", { key: '714a9f5bcfbbac0eeda10c36d8c8b3f2fcae1a92', class: `chapter ${this.isBound ? 'bound' : ''}` }, index.h("div", { key: '5b5bdc3908c4707cdcd0c7c9f26a2879b8be30e2', class: "chapter-card" }, index.h("div", { key: '58fc7e60048d71f953db5667ebf172b0a1424f69', class: "top-hld" }, index.h("div", { key: 'e3fbdb9944919246d75e469f2fd7fb7f5b4c36b8', class: "txt-hld" }, index.h("span", { key: 'a1ad83de4204c8bb23921591f90a142c7a668056', class: "chapter-number" }, this.chapterNumber), index.h("span", { key: '92dd28796b2df95eb09d8c2d74db022b213fb730', class: "main-holder" }, index.h("span", { key: '69c118590986430dcf349f71052ca68c7d5f3645', class: "chapter-title", onClick: () => this.onReadChapter(this.chapterId) }, this.chapterTitle), index.h("span", { key: '4bcb5459ca2b6c0c8542ffce4c930c9cc46e3090', class: "story-stats" }, this.likes > 0 && (index.h("span", { key: '28ce8ffc11b1e2d00435917ae9e342dc08e642c9', class: "story-stat" }, index.h("span", { key: '0e9cfb7ec95339ea1cffef348f8b319371d57c56', class: "story-stat-value" }, this.likes), index.h("span", { key: 'fcc6a389bbc9efef4ae52c6b5d8a4aca3282eb2d', class: "story-stat-label" }, this.likesText))), this.likes > 0 && index.h("span", { key: 'e0aec9eb5083ddc4cacd460780aed40d86e87df6', class: "story-stat-separator" }, "\u00B7"), this.views > 0 && (index.h("span", { key: '58886d2ebe07b87ed86fa14a306aeffc5a1d10f4', class: "story-stat" }, index.h("span", { key: '768b0742715af745024b7733393f64c2a4c1c1c1', class: "story-stat-value" }, this.views), index.h("span", { key: 'f72422cd7c15452c5df8391d60c54d832c4e8fe4', class: "story-stat-label" }, this.viewsText))), this.views > 0 && index.h("span", { key: '7519ae3d5012286db128a0f5152c154748e9a826', class: "story-stat-separator" }, "\u00B7"), index.h("span", { key: '1a38075c0658632dbe2921be48ffe2efd5dfca8c', class: "story-stat" }, index.h("span", { key: '6661717b5a859441dd44fa6d7b4ca36444813b24', class: "story-stat-value" }, this.readingDuration === -1 ? 'N/A' : this.readingDuration), index.h("span", { key: '010b7d820ef82ede24034fa96adadba10219c437', class: "story-stat-label" }, this.readingDurationText))), index.h("ur-time-ago", { key: 'cbfb7631bf37a6fdb5a3719e94213b2c7cd92f55', class: "when", date: this.createdAt, locale: this.locale }))))), index.h("div", { key: 'b66f8da5b8fef9ff379b9cc7a3c5c33109d9ecf6', class: "action-buttons" }, this.isOwner && (index.h("ur-button", { key: 'd6ff29861ad50fdbf3aebe6809f11397863bc407', class: "action-button", disabled: this.loading, variant: "text", onClick: () => this.onReadChapter(this.chapterId) }, this.readChapterText)), !this.isLocked && !this.isOwner && (index.h("ur-button", { key: 'f2da39f0780472edb327e82d6db3ce0c803e2e37', class: "action-button", disabled: this.loading, variant: "text", onClick: () => this.onReadChapter(this.chapterId) }, this.readChapterText)), this.isOwner && !this.isStoryCompleted && this.isLastChapter && (index.h("ur-button-icon", { key: 'd02aa74dd1b2f0ce49d3ae7985a8d9b9544bbb82', fontColor: "rgb(var(--ur-color-primary))", class: "menu-button", icon: "delete", onClick: () => this.onChapterDelete(this.chapterId, this.chapterTitle) })), this.isLocked && (index.h("ur-button-icon", { key: '26d4b1f29c3a55433b92dd1fd2475c23c911f4d3', disabled: true, class: "menu-button", icon: "lock" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ur-checkbox-group.cjs.entry.js

@@ -154,7 +154,7 @@ const UrCheckboxGroup = class {
     }
     render() {
         const showSelectAll = this.selectAll && this.maxSelectable === null;
-        return (index.h(index.Host, { key: '5be5d838703876088034862772da87a08f7936ff' }, showSelectAll && (index.h("ur-checkbox", { key: '986aa046cb867aab6a2d75204dd1c0dc8f165e80', value: "select-all", onValueChanged: this.handleValueChange }, this.selectAllText)), index.h("slot", { key: '4c7439938654f6d4663eae079b86525f9655874b', onSlotchange: this.onSlotChange })));
+        return (index.h(index.Host, { key: 'a7f98ba1fdd3118e527e7c674f647b4b7e88a02c' }, showSelectAll && (index.h("ur-checkbox", { key: '3cb7b3d88c2366fe346aaa796f7778b3baca3d74', value: "select-all", onValueChanged: this.handleValueChange }, this.selectAllText)), index.h("slot", { key: '7eacc3dec4e83bc18b4358f1615e72ff2f72dd61', onSlotchange: this.onSlotChange })));
     }
 };
 UrCheckboxGroup.style = urCheckboxGroupCss;

package/dist/cjs/ur-circular-progress.cjs.entry.js

@@ -21,7 +21,7 @@ const UrCircularProgress = class {
      * Render the circular progress component.
      */
     render() {
-        return (index.h(index.Host, { key: 'f04e644ec7459f8ead28a75b32554dfc7f51dfc2' }, index.h("mdui-circular-progress", { key: 'd4cf3b8aee243b75f5f0f3b56ea75531079e36b9', max: this.max, value: this.value !== undefined ? this.value : undefined, style: { "width": this.width, "height": this.height } })));
+        return (index.h(index.Host, { key: 'a071ba1203ad287b202400f583f7093bc364c5a8' }, index.h("mdui-circular-progress", { key: '69bc9d2ad827bb86b2ce4fed02a7f8561b563878', max: this.max, value: this.value !== undefined ? this.value : undefined, style: { "width": this.width, "height": this.height } })));
     }
 };
 UrCircularProgress.style = urCircularProgressCss;

package/dist/cjs/ur-comment-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DlgBfuIH.js');
 
-const urCommentFormCss = ":host{display:block;width:100%}:host .form-content{display:flex;gap:12px;padding:12px;padding-right:0}:host .form-main{flex:1;display:flex;flex-direction:column;gap:12px}:host .input-container{width:100%;position:relative}:host .button-container{display:flex;justify-content:flex-end;gap:8px}:host .mobile-form ur-text-field{margin-right:4px;flex:1;}:host .mobile-form ur-button-icon{flex-shrink:0;display:flex;justify-content:center;align-items:center}:host .mobile-form{gap:4px;display:flex;flex-direction:row;align-items:flex-end}:host([variant=\"mobile\"]) .form-content{flex-direction:row;align-items:center;gap:4px}:host([variant=\"mobile\"]) .form-main{flex-direction:row;gap:4px;align-items:center}:host([variant=\"mobile\"]) .input-container{flex:1}:host([variant=\"mobile\"]) ur-text-field{--ur-text-field-padding:4px;--ur-text-field-font-size:14px}:host([variant=\"mobile\"]) .button-container{flex-shrink:0;margin:0;padding:0}";
+const urCommentFormCss = ":host{display:block;width:100%}:host .form-content{display:flex;gap:12px}:host .form-main{flex:1;display:flex;flex-direction:column;gap:12px}:host .input-container{width:100%;position:relative}:host .button-container{display:flex;justify-content:flex-end;gap:8px}:host .mobile-form ur-text-field{margin-right:4px;flex:1;}:host .mobile-form ur-button-icon{flex-shrink:0;display:flex;justify-content:center;align-items:center}:host .mobile-form{gap:4px;display:flex;flex-direction:row;align-items:center}:host([mobile-stretch-alignment]) .mobile-form{align-items:stretch}:host([mobile-stretch-alignment]) .mobile-form ur-avatar{align-self:flex-start}:host([mobile-stretch-alignment]) .mobile-form ur-button-icon{align-self:flex-end}:host([variant=\"mobile\"]) .form-content{flex-direction:row;align-items:center;gap:4px}:host([variant=\"mobile\"]) .form-main{flex-direction:row;gap:4px;align-items:center}:host([variant=\"mobile\"]) .input-container{flex:1}:host([variant=\"mobile\"]) ur-text-field{--ur-text-field-padding:4px;--ur-text-field-font-size:14px}:host([variant=\"mobile\"]) .button-container{flex-shrink:0;margin:0;padding:0}";
 
 const UrCommentForm = class {
     constructor(hostRef) {
@@ -22,6 +22,9 @@ const UrCommentForm = class {
         this.submitButtonText = 'Post';
         this.showCancelButton = false;
         this.cancelButtonText = 'Cancel';
+        this.mobileAvatarSize = '56px';
+        this.mobileGap = '4px';
+        this.mobileStretchAlignment = false;
         // Internal state
         this.formState = {
             text: '',
@@ -69,7 +72,7 @@ const UrCommentForm = class {
         if (this.isServer) {
             return null;
         }
-        return (index.h("div", { class: `comment-form ${this.variant}` }, this.variant === 'desktop' ? (index.h("div", { class: "form-content" }, this.user && index.h("ur-avatar", { src: this.user.picture, name: this.user.displayName, size: "40px" }), index.h("div", { class: "form-main" }, index.h("div", { class: "input-container" }, index.h("ur-text-field", { label: "", placeholder: this.placeholder, maxlength: this.maxLength, rows: 3, autosize: true, counter: true, disabled: this.disabled, error: !!this.formState.error, errorMessage: this.formState.error, value: this.formState.text, onValueChanged: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("div", { class: "button-container" }, this.showCancelButton && (index.h("ur-button", { variant: "text", onClick: this.handleCancel }, this.cancelButtonText)), index.h("ur-button", { variant: "filled", "end-icon": "send", disabled: !this.isFormValid(), onClick: this.handleSubmit }, this.submitButtonText))))) : (index.h("div", { class: "mobile-form" }, this.user && index.h("ur-avatar", { src: this.user.picture, name: this.user.displayName, size: "56px" }), index.h("ur-text-field", { label: "", placeholder: this.placeholder, maxlength: this.maxLength, rows: 1, autosize: true, counter: false, disabled: this.disabled, error: !!this.formState.error, errorMessage: this.formState.error, value: this.formState.text, onValueChanged: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), index.h("ur-button-icon", { buttonWidth: "56px", buttonHeight: "56px", icon: "send", variant: "filled", disabled: !this.isFormValid(), onClick: this.handleSubmit })))));
+        return (index.h("div", { class: `comment-form ${this.variant}` }, this.variant === 'desktop' ? (index.h("div", { class: "form-content" }, this.user && index.h("ur-avatar", { src: this.user.picture, name: this.user.displayName, size: "40px" }), index.h("div", { class: "form-main" }, index.h("div", { class: "input-container" }, index.h("ur-text-field", { label: "", placeholder: this.placeholder, maxlength: this.maxLength, rows: 3, autosize: true, counter: true, disabled: this.disabled, error: !!this.formState.error, errorMessage: this.formState.error, value: this.formState.text, onValueChanged: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("div", { class: "button-container" }, this.showCancelButton && (index.h("ur-button", { variant: "text", onClick: this.handleCancel }, this.cancelButtonText)), index.h("ur-button", { variant: "filled", "end-icon": "send", disabled: !this.isFormValid(), onClick: this.handleSubmit }, this.submitButtonText))))) : (index.h("div", { class: "mobile-form", style: { gap: this.mobileGap } }, this.user && index.h("ur-avatar", { src: this.user.picture, name: this.user.displayName, size: this.mobileAvatarSize }), index.h("ur-text-field", { label: "", placeholder: this.placeholder, maxlength: this.maxLength, rows: 1, autosize: true, counter: false, disabled: this.disabled, error: !!this.formState.error, errorMessage: this.formState.error, value: this.formState.text, onValueChanged: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), index.h("ur-button-icon", { buttonWidth: this.mobileAvatarSize, buttonHeight: this.mobileAvatarSize, icon: "send", variant: "filled", disabled: !this.isFormValid(), onClick: this.handleSubmit })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ur-competition-carousel.cjs.entry.js

@@ -150,7 +150,7 @@ const UrCompetitionCarousel = class {
     }
     render() {
         const displayCompetitions = this.skeleton ? this.generateSkeletonCompetitions() : this.competitions;
-        return (index.h(index.Host, { key: 'ed946b3caec184c8d1a527ca6b3a9ce7f9d4c86d', class: { skeleton: this.skeleton } }, index.h("div", { key: '6a626da0b113b9e8eb44ee6f241e6d9f31516815', class: "carousel" }, this.navigation && (index.h("ur-button-arrow-left", { key: '40c9e6b2dc5991c631ae34b1a86a0b1a89547957', disabled: this.skeleton || this.disabledPrev })), this.navigation && (index.h("ur-button-arrow-right", { key: '1934082875dea781b020cec016da0dc4fbf1c0d7', disabled: this.skeleton || this.loading || this.disabledNext })), index.h("swiper-container", { key: 'fdd36585fd67a4d963616d51ff87e70a3b182b86', init: true, observer: true, "observe-slide-children": true, "slides-per-group-auto": true, "watch-slides-progress": true, "breakpoint-base": "container", grid: this.grid, breakpoints: this.breakpoints, "slides-per-view": this.slidesPerView, "space-between": this.spaceBetween }, displayCompetitions.map((competition, index) => this.renderCompetition(competition, index))))));
+        return (index.h(index.Host, { key: '11138abc0d17c0c4897948b35acd2ef4225a99fb', class: { skeleton: this.skeleton } }, index.h("div", { key: '8dbedc3dc039b4126a4c78a9bea00c4d3989a890', class: "carousel" }, this.navigation && (index.h("ur-button-arrow-left", { key: '94ed3585708ff272dd3933264b0a99589bffaa1a', disabled: this.skeleton || this.disabledPrev })), this.navigation && (index.h("ur-button-arrow-right", { key: 'ba7b6b30e9753b3ac0257905937e0979fd66945b', disabled: this.skeleton || this.loading || this.disabledNext })), index.h("swiper-container", { key: '27c2efeef8d0777047f2efe83988cac468eb0470', init: true, observer: true, "observe-slide-children": true, "slides-per-group-auto": true, "watch-slides-progress": true, "breakpoint-base": "container", grid: this.grid, breakpoints: this.breakpoints, "slides-per-view": this.slidesPerView, "space-between": this.spaceBetween }, displayCompetitions.map((competition, index) => this.renderCompetition(competition, index))))));
     }
     get el() { return index.getElement(this); }
 };