snice 4.9.0 → 4.10.0

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

@@ -0,0 +1,491 @@
+/*!
+ * snice v4.9.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-pricing-table.min.js");}
+var SnicePricingTable = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.render()];
+              _componentStyles_decorators = [snice.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 snice.html `<slot></slot>`;
+          }
+          componentStyles() {
+              return snice.css `:host { display: none; }`;
+          }
+          constructor() {
+              super(...arguments);
+              __runInitializers(this, _instanceExtraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+  let SniceFeature = (() => {
+      let _classDecorators = [snice.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 = [snice.render()];
+              _componentStyles_decorators = [snice.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 snice.html `<slot></slot>`;
+          }
+          componentStyles() {
+              return snice.css `:host { display: none; }`;
+          }
+          constructor() {
+              super(...arguments);
+              __runInitializers(this, _instanceExtraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+  let SnicePricingTable = (() => {
+      let _classDecorators = [snice.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 = [snice.property({ type: Array })];
+              _variant_decorators = [snice.property()];
+              _annual_decorators = [snice.property({ type: Boolean })];
+              _init_decorators = [snice.ready()];
+              _handleSlotChange_decorators = [snice.on('slotchange', { target: 'slot' })];
+              _handlePlansChange_decorators = [snice.watch('plans')];
+              _handleAnnualChange_decorators = [snice.watch('annual')];
+              _emitPlanSelect_decorators = [snice.dispatch('plan-select', { bubbles: true, composed: true })];
+              _renderContent_decorators = [snice.render()];
+              _componentStyles_decorators = [snice.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 snice.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 snice.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 snice.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 snice.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 snice.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 snice.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 => snice.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 snice.html /*html*/ `
+                  <td class="${plan.highlighted ? 'pricing__table-highlight' : ''}">
+                    <strong>${currency}${this.formatPrice(price)}</strong>${period}
+                  </td>
+                `;
+            })}
+            </tr>
+            ${featureNames.map(name => snice.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 snice.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) => snice.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 snice.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 snice.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;
+  })();
+
+  exports.SniceFeature = SniceFeature;
+  exports.SnicePlan = SnicePlan;
+  exports.SnicePricingTable = SnicePricingTable;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-pricing-table.js.map