snice 4.9.0 → 4.10.0

package/dist/components/pricing-table/snice-pricing-table.js

@@ -0,0 +1,422 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, render, styles, html, css, property, ready, on, watch, dispatch } from 'snice';
+
+var cssContent = ":host{display:block;contain:style;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);color:var(--snice-color-text,rgb(23 23 23));--pt-bg:var(--snice-color-background, rgb(255 255 255));--pt-bg-element:var(--snice-color-background-element, rgb(252 251 249));--pt-border:var(--snice-color-border, rgb(226 226 226));--pt-text:var(--snice-color-text, rgb(23 23 23));--pt-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--pt-text-tertiary:var(--snice-color-text-tertiary, rgb(115 115 115));--pt-primary:var(--snice-color-primary, rgb(37 99 235));--pt-success:var(--snice-color-success, rgb(22 163 74));--pt-shadow:var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));--pt-shadow-lg:var(--snice-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))}*{box-sizing:border-box}.pricing{display:flex;flex-direction:column;align-items:center;gap:var(--snice-spacing-lg,1.5rem)}.pricing__toggle{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem);background:var(--pt-bg-element);border-radius:var(--snice-border-radius-lg,.5rem);border:1px solid var(--pt-border)}.pricing__toggle-btn{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border:none;border-radius:var(--snice-border-radius-md,.25rem);background:0 0;color:var(--pt-text-secondary);cursor:pointer;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);transition:background var(--snice-transition-fast, 150ms),color var(--snice-transition-fast, 150ms)}.pricing__toggle-btn:hover{color:var(--pt-text)}.pricing__toggle-btn--active{background:var(--pt-bg);color:var(--pt-text);box-shadow:0 1px 2px rgb(0 0 0 / .05)}.pricing__toggle-btn:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.pricing__cards{display:flex;gap:var(--snice-spacing-md,1rem);align-items:stretch;width:100%;justify-content:center;flex-wrap:wrap;padding-top:var(--snice-spacing-sm,.75rem);padding-bottom:var(--snice-spacing-2xs,.25rem)}.pricing__card{flex:1;min-width:14rem;max-width:22rem;border:1px solid var(--pt-border);border-radius:var(--snice-border-radius-lg,.5rem);background:var(--pt-bg);padding:var(--snice-spacing-lg,1.5rem);display:flex;flex-direction:column;gap:var(--snice-spacing-md,1rem);position:relative;transition:transform var(--snice-transition-medium, 250ms),box-shadow var(--snice-transition-medium, 250ms)}.pricing__card:hover{transform:translateY(-2px);box-shadow:var(--pt-shadow)}.pricing__card--highlighted{border-color:var(--pt-primary);border-width:2px;box-shadow:var(--pt-shadow-lg);transform:scale(1.03);z-index:1}.pricing__card--highlighted:hover{transform:scale(1.03) translateY(-2px)}.pricing__badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--pt-primary);color:rgb(255 255 255);font-size:.75rem;font-weight:var(--snice-font-weight-semibold,600);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-sm,.75rem);border-radius:999px;white-space:nowrap}.pricing__plan-name{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--pt-text);margin:0}.pricing__plan-description{font-size:.875rem;color:var(--pt-text-secondary);margin:0}.pricing__price{display:flex;align-items:baseline;gap:var(--snice-spacing-3xs,.125rem)}.pricing__currency{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--pt-text)}.pricing__amount{font-size:2.5rem;font-weight:var(--snice-font-weight-bold,700);line-height:1;color:var(--pt-text)}.pricing__period{font-size:.875rem;color:var(--pt-text-tertiary)}.pricing__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem);flex:1}.pricing__feature{display:flex;align-items:flex-start;gap:var(--snice-spacing-xs,.5rem);font-size:.875rem;color:var(--pt-text-secondary);line-height:var(--snice-line-height-normal, 1.5)}.pricing__feature-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem}.pricing__feature-icon--included{color:var(--pt-success)}.pricing__feature-icon--excluded{color:var(--pt-text-tertiary);opacity:.5}.pricing__feature--excluded{opacity:.5;text-decoration:line-through}.pricing__feature-value{color:var(--pt-text);font-weight:var(--snice-font-weight-medium,500)}.pricing__cta{width:100%;padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,.25rem);font-family:inherit;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-semibold,600);cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms);text-align:center}.pricing__cta:hover{opacity:.9}.pricing__cta:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.pricing__cta--primary{background:var(--pt-primary);color:rgb(255 255 255);border:none}.pricing__cta--secondary{background:var(--pt-bg-element);color:var(--pt-text);border:1px solid var(--pt-border)}.pricing__cta--outline{background:0 0;color:var(--pt-primary);border:1px solid var(--pt-primary)}.pricing__table-wrapper{width:100%;overflow-x:auto}.pricing__table{width:100%;border-collapse:collapse;border:1px solid var(--pt-border);border-radius:var(--snice-border-radius-lg,.5rem);overflow:hidden}.pricing__table td,.pricing__table th{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);text-align:center;border-bottom:1px solid var(--pt-border);font-size:.875rem}.pricing__table th{background:var(--pt-bg-element);font-weight:var(--snice-font-weight-semibold,600);color:var(--pt-text)}.pricing__table td:first-child{text-align:left;font-weight:var(--snice-font-weight-medium,500);color:var(--pt-text-secondary)}.pricing__table-highlight{background:rgb(37 99 235 / .03)}.pricing__table tr:last-child td{border-bottom:none}@media (max-width:768px){.pricing__cards{flex-direction:column;align-items:center}.pricing__card{max-width:100%;width:100%}.pricing__card--highlighted{transform:none}.pricing__card--highlighted:hover{transform:translateY(-2px)}}";
+
+/**
+ * <snice-plan> — declarative child element for pricing plans.
+ *
+ * Usage:
+ *   <snice-pricing-table>
+ *     <snice-plan name="Free" price="0" cta="Get Started">
+ *       <snice-feature>5 projects</snice-feature>
+ *       <snice-feature excluded>API access</snice-feature>
+ *       <snice-feature value="1GB">Storage</snice-feature>
+ *     </snice-plan>
+ *     <snice-plan name="Pro" price="29" annual-price="24" highlighted badge="Popular" cta="Start Trial">
+ *       <snice-feature>Unlimited projects</snice-feature>
+ *       <snice-feature>API access</snice-feature>
+ *     </snice-plan>
+ *   </snice-pricing-table>
+ */
+let SnicePlan = (() => {
+    let _classDecorators = [element('snice-plan')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        renderContent() {
+            return html `<slot></slot>`;
+        }
+        componentStyles() {
+            return css `:host { display: none; }`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _instanceExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+let SniceFeature = (() => {
+    let _classDecorators = [element('snice-feature')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        renderContent() {
+            return html `<slot></slot>`;
+        }
+        componentStyles() {
+            return css `:host { display: none; }`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _instanceExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+let SnicePricingTable = (() => {
+    let _classDecorators = [element('snice-pricing-table')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _plans_decorators;
+    let _plans_initializers = [];
+    let _plans_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _annual_decorators;
+    let _annual_initializers = [];
+    let _annual_extraInitializers = [];
+    let _init_decorators;
+    let _handleSlotChange_decorators;
+    let _handlePlansChange_decorators;
+    let _handleAnnualChange_decorators;
+    let _emitPlanSelect_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _plans_decorators = [property({ type: Array })];
+            _variant_decorators = [property()];
+            _annual_decorators = [property({ type: Boolean })];
+            _init_decorators = [ready()];
+            _handleSlotChange_decorators = [on('slotchange', { target: 'slot' })];
+            _handlePlansChange_decorators = [watch('plans')];
+            _handleAnnualChange_decorators = [watch('annual')];
+            _emitPlanSelect_decorators = [dispatch('plan-select', { bubbles: true, composed: true })];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSlotChange_decorators, { kind: "method", name: "handleSlotChange", static: false, private: false, access: { has: obj => "handleSlotChange" in obj, get: obj => obj.handleSlotChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePlansChange_decorators, { kind: "method", name: "handlePlansChange", static: false, private: false, access: { has: obj => "handlePlansChange" in obj, get: obj => obj.handlePlansChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleAnnualChange_decorators, { kind: "method", name: "handleAnnualChange", static: false, private: false, access: { has: obj => "handleAnnualChange" in obj, get: obj => obj.handleAnnualChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitPlanSelect_decorators, { kind: "method", name: "emitPlanSelect", static: false, private: false, access: { has: obj => "emitPlanSelect" in obj, get: obj => obj.emitPlanSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _plans_decorators, { kind: "field", name: "plans", static: false, private: false, access: { has: obj => "plans" in obj, get: obj => obj.plans, set: (obj, value) => { obj.plans = value; } }, metadata: _metadata }, _plans_initializers, _plans_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _annual_decorators, { kind: "field", name: "annual", static: false, private: false, access: { has: obj => "annual" in obj, get: obj => obj.annual, set: (obj, value) => { obj.annual = value; } }, metadata: _metadata }, _annual_initializers, _annual_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        init() {
+            this.collectPlansFromChildren();
+        }
+        handleSlotChange() {
+            this.collectPlansFromChildren();
+        }
+        /** Reads <snice-plan> and <snice-feature> children into the plans array (only if no plans set via property) */
+        collectPlansFromChildren() {
+            // Don't override programmatically-set plans
+            if (this.plans.length > 0)
+                return;
+            const planEls = Array.from(this.querySelectorAll('snice-plan'));
+            if (planEls.length === 0)
+                return;
+            const collected = planEls.map(planEl => {
+                const features = Array.from(planEl.querySelectorAll('snice-feature')).map(featureEl => {
+                    const excluded = featureEl.hasAttribute('excluded');
+                    const value = featureEl.getAttribute('value');
+                    const name = featureEl.textContent?.trim() || '';
+                    return {
+                        name,
+                        included: value ? value : !excluded
+                    };
+                });
+                const price = parseFloat(planEl.getAttribute('price') || '0');
+                const annualPriceAttr = planEl.getAttribute('annual-price');
+                const plan = {
+                    name: planEl.getAttribute('name') || '',
+                    price,
+                    features,
+                    cta: planEl.getAttribute('cta') || 'Select',
+                };
+                if (annualPriceAttr)
+                    plan.annualPrice = parseFloat(annualPriceAttr);
+                if (planEl.getAttribute('period'))
+                    plan.period = planEl.getAttribute('period');
+                if (planEl.getAttribute('currency'))
+                    plan.currency = planEl.getAttribute('currency');
+                if (planEl.getAttribute('description'))
+                    plan.description = planEl.getAttribute('description');
+                if (planEl.hasAttribute('highlighted'))
+                    plan.highlighted = true;
+                if (planEl.getAttribute('badge'))
+                    plan.badge = planEl.getAttribute('badge');
+                if (planEl.getAttribute('cta-variant'))
+                    plan.ctaVariant = planEl.getAttribute('cta-variant');
+                return plan;
+            });
+            this.plans = collected;
+        }
+        handlePlansChange() {
+            // Re-render on plans change
+        }
+        handleAnnualChange() {
+            // Re-render on billing toggle
+        }
+        getPrice(plan) {
+            if (this.annual && plan.annualPrice !== undefined) {
+                return plan.annualPrice;
+            }
+            return plan.price;
+        }
+        formatPrice(price) {
+            return price.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+        }
+        handleSelect(plan, index) {
+            this.emitPlanSelect({
+                plan,
+                index,
+                billing: this.annual ? 'annual' : 'monthly'
+            });
+        }
+        emitPlanSelect(detail) {
+            return detail;
+        }
+        hasAnnualPricing() {
+            return this.plans.some(p => p.annualPrice !== undefined);
+        }
+        renderCheckIcon() {
+            return html /*html*/ `
+      <svg class="pricing__feature-icon pricing__feature-icon--included" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+      </svg>
+    `;
+        }
+        renderXIcon() {
+            return html /*html*/ `
+      <svg class="pricing__feature-icon pricing__feature-icon--excluded" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+      </svg>
+    `;
+        }
+        renderFeature(feature) {
+            const isBoolean = typeof feature.included === 'boolean';
+            const included = isBoolean ? feature.included : true;
+            return html /*html*/ `
+      <li class="pricing__feature ${!included ? 'pricing__feature--excluded' : ''}">
+        <if ${isBoolean && included}>
+          ${this.renderCheckIcon()}
+        </if>
+        <if ${isBoolean && !included}>
+          ${this.renderXIcon()}
+        </if>
+        <span>
+          ${feature.name}
+          <if ${!isBoolean}>
+            <span class="pricing__feature-value"> - ${feature.included}</span>
+          </if>
+        </span>
+      </li>
+    `;
+        }
+        renderCard(plan, index) {
+            const price = this.getPrice(plan);
+            const currency = plan.currency || '$';
+            const period = plan.period || '/mo';
+            const ctaClass = `pricing__cta pricing__cta--${plan.ctaVariant || (plan.highlighted ? 'primary' : 'secondary')}`;
+            return html /*html*/ `
+      <div class="pricing__card ${plan.highlighted ? 'pricing__card--highlighted' : ''}" part="card">
+        <if ${plan.badge}>
+          <span class="pricing__badge">${plan.badge}</span>
+        </if>
+        <div>
+          <h3 class="pricing__plan-name">${plan.name}</h3>
+          <if ${plan.description}>
+            <p class="pricing__plan-description">${plan.description}</p>
+          </if>
+        </div>
+        <div class="pricing__price">
+          <span class="pricing__currency">${currency}</span>
+          <span class="pricing__amount">${this.formatPrice(price)}</span>
+          <span class="pricing__period">${period}</span>
+        </div>
+        <ul class="pricing__features">
+          ${plan.features.map(f => this.renderFeature(f))}
+        </ul>
+        <button class="${ctaClass}"
+                @click=${() => this.handleSelect(plan, index)}
+                part="cta">
+          ${plan.cta}
+        </button>
+      </div>
+    `;
+        }
+        renderCardsView() {
+            return html /*html*/ `
+      <div class="pricing__cards" part="cards">
+        ${this.plans.map((plan, i) => this.renderCard(plan, i))}
+      </div>
+    `;
+        }
+        getAllFeatureNames() {
+            const names = new Set();
+            for (const plan of this.plans) {
+                for (const f of plan.features) {
+                    names.add(f.name);
+                }
+            }
+            return Array.from(names);
+        }
+        getFeatureValue(plan, featureName) {
+            return plan.features.find(f => f.name === featureName);
+        }
+        renderTableView() {
+            const featureNames = this.getAllFeatureNames();
+            return html /*html*/ `
+      <div class="pricing__table-wrapper" part="table-wrapper">
+        <table class="pricing__table" part="table">
+          <thead>
+            <tr>
+              <th>Feature</th>
+              ${this.plans.map(plan => html /*html*/ `
+                <th class="${plan.highlighted ? 'pricing__table-highlight' : ''}">${plan.name}</th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Price</td>
+              ${this.plans.map(plan => {
+                const price = this.getPrice(plan);
+                const currency = plan.currency || '$';
+                const period = plan.period || '/mo';
+                return html /*html*/ `
+                  <td class="${plan.highlighted ? 'pricing__table-highlight' : ''}">
+                    <strong>${currency}${this.formatPrice(price)}</strong>${period}
+                  </td>
+                `;
+            })}
+            </tr>
+            ${featureNames.map(name => html /*html*/ `
+              <tr>
+                <td>${name}</td>
+                ${this.plans.map(plan => {
+                const feature = this.getFeatureValue(plan, name);
+                const isIncluded = feature ? (typeof feature.included === 'boolean' ? feature.included : true) : false;
+                const value = feature && typeof feature.included === 'string' ? feature.included : '';
+                return html /*html*/ `
+                    <td class="${plan.highlighted ? 'pricing__table-highlight' : ''}">
+                      <if ${!feature}>
+                        ${this.renderXIcon()}
+                      </if>
+                      <if ${feature && typeof feature.included === 'boolean' && isIncluded}>
+                        ${this.renderCheckIcon()}
+                      </if>
+                      <if ${feature && typeof feature.included === 'boolean' && !isIncluded}>
+                        ${this.renderXIcon()}
+                      </if>
+                      <if ${value}>
+                        ${value}
+                      </if>
+                    </td>
+                  `;
+            })}
+              </tr>
+            `)}
+            <tr>
+              <td></td>
+              ${this.plans.map((plan, i) => html /*html*/ `
+                <td class="${plan.highlighted ? 'pricing__table-highlight' : ''}">
+                  <button class="pricing__cta pricing__cta--${plan.ctaVariant || (plan.highlighted ? 'primary' : 'outline')}"
+                          @click=${() => this.handleSelect(plan, i)}>
+                    ${plan.cta}
+                  </button>
+                </td>
+              `)}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+        }
+        renderContent() {
+            const isCards = this.variant === 'cards';
+            const showToggle = this.hasAnnualPricing();
+            return html /*html*/ `
+      <div class="pricing" part="base">
+        <if ${showToggle}>
+          <div class="pricing__toggle" part="toggle" role="radiogroup" aria-label="Billing period">
+            <button class="pricing__toggle-btn ${!this.annual ? 'pricing__toggle-btn--active' : ''}"
+                    @click=${() => { this.annual = false; }}
+                    role="radio"
+                    aria-checked="${!this.annual}">
+              Monthly
+            </button>
+            <button class="pricing__toggle-btn ${this.annual ? 'pricing__toggle-btn--active' : ''}"
+                    @click=${() => { this.annual = true; }}
+                    role="radio"
+                    aria-checked="${this.annual}">
+              Annual
+            </button>
+          </div>
+        </if>
+
+        <if ${isCards}>
+          ${this.renderCardsView()}
+        </if>
+        <if ${!isCards}>
+          ${this.renderTableView()}
+        </if>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css `${cssContent}`;
+        }
+        constructor() {
+            super(...arguments);
+            this.plans = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _plans_initializers, []));
+            this.variant = (__runInitializers(this, _plans_extraInitializers), __runInitializers(this, _variant_initializers, 'cards'));
+            this.annual = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _annual_initializers, false));
+            __runInitializers(this, _annual_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceFeature, SnicePlan, SnicePricingTable };
+//# sourceMappingURL=snice-pricing-table.js.map

package/dist/components/pricing-table/snice-pricing-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-pricing-table.js","sources":["../../../components/pricing-table/snice-pricing-table.css?inline","../../../../components/pricing-table/snice-pricing-table.ts"],"sourcesContent":["export default \":host{display:block;contain:style;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);color:var(--snice-color-text,rgb(23 23 23));--pt-bg:var(--snice-color-background, rgb(255 255 255));--pt-bg-element:var(--snice-color-background-element, rgb(252 251 249));--pt-border:var(--snice-color-border, rgb(226 226 226));--pt-text:var(--snice-color-text, rgb(23 23 23));--pt-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--pt-text-tertiary:var(--snice-color-text-tertiary, rgb(115 115 115));--pt-primary:var(--snice-color-primary, rgb(37 99 235));--pt-success:var(--snice-color-success, rgb(22 163 74));--pt-shadow:var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));--pt-shadow-lg:var(--snice-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))}*{box-sizing:border-box}.pricing{display:flex;flex-direction:column;align-items:center;gap:var(--snice-spacing-lg,1.5rem)}.pricing__toggle{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem);background:var(--pt-bg-element);border-radius:var(--snice-border-radius-lg,.5rem);border:1px solid var(--pt-border)}.pricing__toggle-btn{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border:none;border-radius:var(--snice-border-radius-md,.25rem);background:0 0;color:var(--pt-text-secondary);cursor:pointer;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);transition:background var(--snice-transition-fast, 150ms),color var(--snice-transition-fast, 150ms)}.pricing__toggle-btn:hover{color:var(--pt-text)}.pricing__toggle-btn--active{background:var(--pt-bg);color:var(--pt-text);box-shadow:0 1px 2px rgb(0 0 0 / .05)}.pricing__toggle-btn:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.pricing__cards{display:flex;gap:var(--snice-spacing-md,1rem);align-items:stretch;width:100%;justify-content:center;flex-wrap:wrap;padding-top:var(--snice-spacing-sm,.75rem);padding-bottom:var(--snice-spacing-2xs,.25rem)}.pricing__card{flex:1;min-width:14rem;max-width:22rem;border:1px solid var(--pt-border);border-radius:var(--snice-border-radius-lg,.5rem);background:var(--pt-bg);padding:var(--snice-spacing-lg,1.5rem);display:flex;flex-direction:column;gap:var(--snice-spacing-md,1rem);position:relative;transition:transform var(--snice-transition-medium, 250ms),box-shadow var(--snice-transition-medium, 250ms)}.pricing__card:hover{transform:translateY(-2px);box-shadow:var(--pt-shadow)}.pricing__card--highlighted{border-color:var(--pt-primary);border-width:2px;box-shadow:var(--pt-shadow-lg);transform:scale(1.03);z-index:1}.pricing__card--highlighted:hover{transform:scale(1.03) translateY(-2px)}.pricing__badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--pt-primary);color:rgb(255 255 255);font-size:.75rem;font-weight:var(--snice-font-weight-semibold,600);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-sm,.75rem);border-radius:999px;white-space:nowrap}.pricing__plan-name{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--pt-text);margin:0}.pricing__plan-description{font-size:.875rem;color:var(--pt-text-secondary);margin:0}.pricing__price{display:flex;align-items:baseline;gap:var(--snice-spacing-3xs,.125rem)}.pricing__currency{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--pt-text)}.pricing__amount{font-size:2.5rem;font-weight:var(--snice-font-weight-bold,700);line-height:1;color:var(--pt-text)}.pricing__period{font-size:.875rem;color:var(--pt-text-tertiary)}.pricing__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem);flex:1}.pricing__feature{display:flex;align-items:flex-start;gap:var(--snice-spacing-xs,.5rem);font-size:.875rem;color:var(--pt-text-secondary);line-height:var(--snice-line-height-normal, 1.5)}.pricing__feature-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem}.pricing__feature-icon--included{color:var(--pt-success)}.pricing__feature-icon--excluded{color:var(--pt-text-tertiary);opacity:.5}.pricing__feature--excluded{opacity:.5;text-decoration:line-through}.pricing__feature-value{color:var(--pt-text);font-weight:var(--snice-font-weight-medium,500)}.pricing__cta{width:100%;padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,.25rem);font-family:inherit;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-semibold,600);cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms);text-align:center}.pricing__cta:hover{opacity:.9}.pricing__cta:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.pricing__cta--primary{background:var(--pt-primary);color:rgb(255 255 255);border:none}.pricing__cta--secondary{background:var(--pt-bg-element);color:var(--pt-text);border:1px solid var(--pt-border)}.pricing__cta--outline{background:0 0;color:var(--pt-primary);border:1px solid var(--pt-primary)}.pricing__table-wrapper{width:100%;overflow-x:auto}.pricing__table{width:100%;border-collapse:collapse;border:1px solid var(--pt-border);border-radius:var(--snice-border-radius-lg,.5rem);overflow:hidden}.pricing__table td,.pricing__table th{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);text-align:center;border-bottom:1px solid var(--pt-border);font-size:.875rem}.pricing__table th{background:var(--pt-bg-element);font-weight:var(--snice-font-weight-semibold,600);color:var(--pt-text)}.pricing__table td:first-child{text-align:left;font-weight:var(--snice-font-weight-medium,500);color:var(--pt-text-secondary)}.pricing__table-highlight{background:rgb(37 99 235 / .03)}.pricing__table tr:last-child td{border-bottom:none}@media (max-width:768px){.pricing__cards{flex-direction:column;align-items:center}.pricing__card{max-width:100%;width:100%}.pricing__card--highlighted{transform:none}.pricing__card--highlighted:hover{transform:translateY(-2px)}}\";",null],"names":[],"mappings":"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"}

package/dist/components/pricing-table/snice-pricing-table.types.d.ts

@@ -0,0 +1,49 @@
+export type PricingTableVariant = 'cards' | 'table';
+export interface PricingFeature {
+    name: string;
+    included: boolean | string;
+}
+export interface PricingPlan {
+    name: string;
+    price: number;
+    annualPrice?: number;
+    period?: string;
+    currency?: string;
+    description?: string;
+    features: PricingFeature[];
+    cta: string;
+    ctaVariant?: 'primary' | 'secondary' | 'outline';
+    highlighted?: boolean;
+    badge?: string;
+}
+export interface SnicePricingTableElement extends HTMLElement {
+    plans: PricingPlan[];
+    variant: PricingTableVariant;
+    annual: boolean;
+}
+export interface PlanSelectDetail {
+    plan: PricingPlan;
+    index: number;
+    billing: 'monthly' | 'annual';
+}
+export interface SnicePricingTableEventMap {
+    'plan-select': CustomEvent<PlanSelectDetail>;
+}
+/**
+ * Declarative usage via child elements:
+ *
+ * <snice-pricing-table>
+ *   <snice-plan name="Free" price="0" cta="Get Started">
+ *     <snice-feature>5 projects</snice-feature>
+ *     <snice-feature excluded>API access</snice-feature>
+ *     <snice-feature value="1GB">Storage</snice-feature>
+ *   </snice-plan>
+ *   <snice-plan name="Pro" price="29" annual-price="24" highlighted badge="Popular" cta="Start Trial" cta-variant="primary">
+ *     <snice-feature>Unlimited projects</snice-feature>
+ *     <snice-feature>API access</snice-feature>
+ *   </snice-plan>
+ * </snice-pricing-table>
+ *
+ * <snice-plan> attributes: name, price, annual-price, period, currency, description, cta, cta-variant, highlighted, badge
+ * <snice-feature> attributes: excluded (boolean), value (string for custom display values)
+ */

package/dist/components/rating/snice-rating.d.ts

@@ -0,0 +1,15 @@
+import type { RatingPrecision, RatingSize, SniceRatingElement } from './snice-rating.types';
+export declare class SniceRating extends HTMLElement implements SniceRatingElement {
+    value: number;
+    max: number;
+    icon: string;
+    size: RatingSize;
+    readonly: boolean;
+    precision: RatingPrecision;
+    private emitRatingChange;
+    private handleClick;
+    private handleKeydown;
+    private getStarFill;
+    template(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
+}