@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-order-tickets/tl-order-tickets.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
+import { createElement, orderTicketsCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * tl-order-tickets - renders all the tickets for an order as scannable QR
  * cards with PDF download. Fetches the order through the SDK (order-access
@@ -7,101 +8,73 @@ import { whenSDK } from "../../utils/sdk-connector";
  *
  * Usage: <tl-order-tickets order-id="ord_xxx"></tl-order-tickets>
  *
- * On an empty result it waits rather than concluding there is nothing.
- *
- * Tickets are issued asynchronously: the payment confirms, the order is
- * marked paid, and entitlement issuance follows a moment later. A confirmation
- * page therefore renders BEFORE the passes exist - reliably, not occasionally.
- * The component used to answer that with "No tickets for this order yet",
- * which is true and reads as "something went wrong" to someone who has just
- * been charged. Refreshing showed them, so the only thing missing was the
- * waiting.
- *
- * So: an empty order is treated as issuance in flight and polled, with the
- * gaps widening, for about a minute. Then it stops and says the tickets are
- * coming by email, because at that point something probably is wrong and a
- * page that polls forever is worse than one that admits it.
+ * On an empty result it waits rather than concluding there is nothing: tickets
+ * are issued a moment after the order is paid, so a confirmation page renders
+ * before the passes exist. The waiting, the widening schedule behind it and
+ * the point at which it gives up are all in `orderTicketsCore`
+ * (`@ticketlayer/elements-core`, AGENTS.md, TKT-11), along with every string.
+ * This harness renders and forwards, and the one thing it owns is pairing
+ * `mount()` with its teardown - which is what stops the polling when the
+ * element goes off screen.
  */
 export class TlOrderTickets {
     constructor() {
         /** Columns in the grid (default 2). */
         this.columns = 2;
-        this.tickets = [];
-        this.loading = true;
-        this.error = null;
-        /** The order loaded, but has no tickets yet and we are still waiting. */
-        this.issuing = false;
-        this.poll = 0;
+        this.element = createElement(orderTicketsCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
+    /** A different order: forget this one and read again, from the top. */
     watchOrder() {
-        this.reset();
-        this.load();
+        this.syncProps();
+        this.element.actions.orderIdChanged();
     }
-    async componentWillLoad() {
-        await this.load();
-    }
-    disconnectedCallback() {
-        this.stopPolling();
+    syncProps() {
+        this.element.setProps({ orderId: this.orderId, columns: this.columns });
     }
-    reset() {
-        this.stopPolling();
-        this.poll = 0;
-        this.tickets = [];
-        this.issuing = false;
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    stopPolling() {
-        if (this.timer !== undefined) {
-            clearTimeout(this.timer);
-            this.timer = undefined;
-        }
+    /**
+     * Off screen: run the mount's teardown, which is what stops the polling.
+     * Not `destroy()`: Stencil calls this for a DOM move as well as a removal,
+     * and a destroyed core never mounts again.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    async load() {
-        try {
-            this.error = null;
-            const sdk = await whenSDK();
-            const orders = sdk.getOrdersManager?.();
-            if (!orders)
-                throw new Error('Tickets are not available');
-            const order = (await orders.get(this.orderId));
-            this.tickets = order?.tickets ?? [];
-            if (this.tickets.length > 0) {
-                // Arrived. Stop asking.
-                this.issuing = false;
-                this.stopPolling();
-            }
-            else {
-                const delay = TlOrderTickets.POLL_DELAYS_MS[this.poll];
-                // `undefined` once the schedule runs out: give up waiting, and say so.
-                this.issuing = delay !== undefined;
-                if (delay !== undefined) {
-                    this.poll += 1;
-                    this.stopPolling();
-                    this.timer = setTimeout(() => this.load(), delay);
-                }
-            }
-        }
-        catch (err) {
-            // A failed request is a different thing from an order with no tickets,
-            // and stops the polling: retrying a 403 a dozen times helps nobody.
-            this.stopPolling();
-            this.issuing = false;
-            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
-        }
-        finally {
-            this.loading = false;
-        }
+    /** The core declares no events, so nothing ever reaches here. */
+    forward(_event, _detail) {
+        // Intentionally empty: tl-order-tickets announces nothing to its host.
     }
     render() {
-        if (this.loading) {
-            return h("div", { class: "state" }, "Loading tickets\u2026");
+        const { status, state, strings, derived } = this.view;
+        if (status === 'loading') {
+            return h("div", { class: "state" }, strings.loading);
         }
-        if (this.error) {
-            return h("div", { class: "state error" }, this.error);
+        if (status === 'error') {
+            return h("div", { class: "state error" }, state.error);
         }
-        if (this.tickets.length === 0) {
-            return this.issuing ? (h("div", { class: "state issuing", role: "status", "aria-live": "polite" }, h("span", { class: "spinner", "aria-hidden": "true" }), "Preparing your tickets\u2026")) : (h("div", { class: "state", role: "status" }, "Your tickets are taking longer than usual. They will be emailed to you as soon as they are ready."));
+        if (status === 'issuing') {
+            return (h("div", { class: "state issuing", role: "status", "aria-live": "polite" }, h("span", { class: "spinner", "aria-hidden": "true" }), strings.preparing));
         }
-        return (h("div", { class: `grid cols-${this.columns}` }, this.tickets.map((t) => (h("tl-ticket", { key: t.id, ticket: t, orderId: this.orderId })))));
+        if (status === 'delayed') {
+            return (h("div", { class: "state", role: "status" }, strings.delayed));
+        }
+        return (h("div", { class: `grid cols-${derived.columns}` }, derived.tickets.map((t) => (h("tl-ticket", { key: t.id, ticket: t, orderId: derived.orderId })))));
     }
     static get is() { return "tl-order-tickets"; }
     static get encapsulation() { return "shadow"; }
@@ -160,24 +133,16 @@ export class TlOrderTickets {
     }
     static get states() {
         return {
-            "tickets": {},
-            "loading": {},
-            "error": {},
-            "issuing": {}
+            "view": {}
         };
     }
     static get watchers() {
         return [{
                 "propName": "orderId",
                 "methodName": "watchOrder"
+            }, {
+                "propName": "columns",
+                "methodName": "syncProps"
             }];
     }
 }
-/**
- * Gaps between polls, in milliseconds. Front-loaded because issuance
- * usually lands in the first few seconds, then widening so a genuinely
- * stuck order is not hammered. Sums to roughly one minute.
- */
-TlOrderTickets.POLL_DELAYS_MS = [
-    1000, 1500, 2000, 3000, 4000, 5000, 6000, 8000, 10000, 12000,
-];

package/dist/collection/components/tl-promo-code/tl-promo-code.css

@@ -1,46 +1,46 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
-  color: var(--tl-foreground, #111827);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 .field {
   display: flex;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .input {
   flex: 1;
   min-width: 0;
-  padding: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3);
   font: inherit;
   font-size: 0.875rem;
-  color: var(--tl-foreground, #111827);
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  color: var(--tl-foreground);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-md);
   text-transform: uppercase;
 }
 
 .input::placeholder {
   text-transform: none;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .input:focus {
-  outline: 2px solid var(--tl-primary, #6366f1);
+  outline: 2px solid var(--tl-primary);
   outline-offset: 1px;
 }
 
 .apply {
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-3) var(--tl-spacing-4);
   font: inherit;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--tl-primary-foreground, #ffffff);
-  background: var(--tl-primary, #6366f1);
+  color: var(--tl-primary-foreground);
+  background: var(--tl-primary);
   border: none;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   cursor: pointer;
   white-space: nowrap;
 }
@@ -56,45 +56,45 @@
 }
 
 .error {
-  margin: var(--tl-spacing-2, 0.5rem) 0 0;
+  margin: var(--tl-spacing-2) 0 0;
   font-size: 0.8125rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .applied {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tl-spacing-3, 0.75rem);
-  padding: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
+  padding: var(--tl-spacing-3);
   font-size: 0.875rem;
-  background: var(--tl-muted, #f9fafb);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  background: var(--tl-muted);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-md);
 }
 
 .applied-text {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .icon {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .code {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
 }
 
 .link {
   padding: 0;
   font: inherit;
   font-size: 0.8125rem;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
   background: none;
   border: none;
   cursor: pointer;

package/dist/collection/components/tl-promo-code/tl-promo-code.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage, isAuthError } from "../../utils/order-summary";
+import { createElement, promoCodeCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * tl-promo-code - an input plus Apply button that redeems a presale or promo
  * code for the current cart (POST /sales/presale-codes/redeem through the
@@ -10,6 +10,9 @@ import { errorMessage, isAuthError } from "../../utils/order-summary";
  * The API has no un-redeem, so the applied state offers only "use a different
  * code", which clears the input for another redemption.
  *
+ * The web harness for `promoCodeCore`: the redemption, the two error messages
+ * and every string are the core's (AGENTS.md, TKT-11).
+ *
  * Usage: <tl-promo-code></tl-promo-code>
  *
  * @event tlPromoApplied - a code was redeemed ({ code, benefit, alreadyHeld, cart })
@@ -21,59 +24,55 @@ export class TlPromoCode {
         this.placeholder = 'Promo or presale code';
         /** Apply button label. */
         this.buttonLabel = 'Apply';
-        this.code = '';
-        this.applying = false;
-        this.applied = null;
-        this.error = null;
+        this.element = createElement(promoCodeCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
         this.handleInput = (e) => {
-            this.code = e.target.value;
-            this.error = null;
+            this.element.actions.setCode(e.target.value);
         };
         this.handleSubmit = (e) => {
             e.preventDefault();
-            this.apply();
-        };
-        this.reset = () => {
-            this.applied = null;
-            this.error = null;
+            this.element.actions.apply();
         };
+        this.reset = () => this.element.actions.reset();
     }
-    async apply() {
-        const code = this.code.trim();
-        if (!code) {
-            this.error = 'Enter a code';
-            return;
-        }
-        this.applying = true;
-        this.error = null;
-        try {
-            const sdk = await whenSDK();
-            const presale = sdk.getPresaleManager?.();
-            if (!presale)
-                throw new Error('Promo codes are not available');
-            const result = await presale.redeem(code);
-            // The SDK refreshed the cart on redeem; read the cached copy for the payload.
-            const cart = await sdk.getCartManager?.()?.get().catch(() => null) ?? null;
-            this.applied = { code: code.toUpperCase(), ...result, cart };
-            this.code = '';
-            this.tlPromoApplied.emit(this.applied);
-        }
-        catch (err) {
-            console.error('[tl-promo-code] Redeem failed:', err);
-            this.error = isAuthError(err)
-                ? 'Sign in to use this code'
-                : errorMessage(err, 'That code could not be applied');
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.applying = false;
-        }
+    syncProps() {
+        this.element.setProps({ placeholder: this.placeholder, buttonLabel: this.buttonLabel });
+    }
+    /**
+     * This core has nothing to do on mount, and the harness calls `mount()`
+     * anyway: a harness never asks what a core's lifecycle means (TKT-197).
+     */
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlPromoApplied')
+            this.tlPromoApplied.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     render() {
-        if (this.applied) {
-            return (h("div", { class: "applied", role: "status" }, h("span", { class: "applied-text" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Code ", h("strong", { class: "code" }, this.applied.code), this.applied.alreadyHeld ? ' was already applied' : ' applied'), h("button", { type: "button", class: "link", onClick: this.reset }, "Use a different code")));
+        const { status, state, strings, derived } = this.view;
+        if (status === 'applied') {
+            return (h("div", { class: "applied", role: "status" }, h("span", { class: "applied-text" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), strings.codePrefix, h("strong", { class: "code" }, derived.appliedCode), derived.appliedSuffix), h("button", { type: "button", class: "link", onClick: this.reset }, strings.useDifferent)));
         }
-        return (h("form", { class: "promo", onSubmit: this.handleSubmit }, h("div", { class: "field" }, h("input", { class: "input", type: "text", autocomplete: "off", autoCapitalize: "characters", spellcheck: false, "aria-label": this.placeholder, placeholder: this.placeholder, value: this.code, disabled: this.applying, onInput: this.handleInput }), h("button", { type: "submit", class: "apply", disabled: this.applying }, this.applying ? 'Applying…' : this.buttonLabel)), this.error && (h("p", { class: "error", role: "alert" }, this.error))));
+        return (h("form", { class: "promo", onSubmit: this.handleSubmit }, h("div", { class: "field" }, h("input", { class: "input", type: "text", autocomplete: "off", autoCapitalize: "characters", spellcheck: false, "aria-label": this.placeholder, placeholder: this.placeholder, value: state.code, disabled: derived.disabled, onInput: this.handleInput }), h("button", { type: "submit", class: "apply", disabled: derived.disabled }, derived.actionLabel)), state.error && (h("p", { class: "error", role: "alert" }, state.error))));
     }
     static get is() { return "tl-promo-code"; }
     static get encapsulation() { return "shadow"; }
@@ -133,10 +132,7 @@ export class TlPromoCode {
     }
     static get states() {
         return {
-            "code": {},
-            "applying": {},
-            "applied": {},
-            "error": {}
+            "view": {}
         };
     }
     static get events() {
@@ -178,4 +174,13 @@ export class TlPromoCode {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "placeholder",
+                "methodName": "syncProps"
+            }, {
+                "propName": "buttonLabel",
+                "methodName": "syncProps"
+            }];
+    }
 }

package/dist/collection/components/tl-seat-map/tl-seat-map.css

@@ -4,14 +4,14 @@
 
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .seat-map-container {
   position: relative;
   overflow: hidden;
-  border-radius: var(--tl-radius-md, 0.5rem);
-  background: var(--tl-color-background, #ffffff);
+  border-radius: var(--tl-radius-md);
+  background: var(--tl-color-background);
 }
 
 .seat-map-iframe {
@@ -32,22 +32,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--tl-color-background, #ffffff);
-  color: var(--tl-color-foreground, #0f172a);
+  background: var(--tl-color-background);
+  color: var(--tl-color-foreground);
   gap: 1rem;
 }
 
 .loading p {
   margin: 0;
   font-size: 0.875rem;
-  color: var(--tl-color-muted-foreground, #64748b);
+  color: var(--tl-color-muted-foreground);
 }
 
 .spinner {
   width: 40px;
   height: 40px;
-  border: 3px solid var(--tl-color-border, #e2e8f0);
-  border-top-color: var(--tl-color-primary, #e64b12);
+  border: 3px solid var(--tl-color-border);
+  border-top-color: var(--tl-color-primary);
   border-radius: 50%;
   animation: tl-seat-map-spin 1s linear infinite;
 }
@@ -66,8 +66,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--tl-color-background, #ffffff);
-  color: var(--tl-color-error, #ef4444);
+  background: var(--tl-color-background);
+  color: var(--tl-color-error);
   padding: 1.5rem;
   text-align: center;
 }

package/dist/collection/components/tl-seat-map/tl-seat-map.js

@@ -132,10 +132,10 @@ export class TlSeatMap {
     // Render
     // -------------------------------------------------------------------------
     render() {
-        return (h("div", { key: 'c9beadc1792d7825ac3f99e6abc8b181e28fd1b6', class: "seat-map-container", style: {
+        return (h("div", { key: '1c6a23b0aa021c58fa62c106a92a2e970ca7f6d1', class: "seat-map-container", style: {
                 width: this.width,
                 height: this.height,
-            } }, this.isLoading && (h("div", { key: 'ad792ea35f433a268c81722ce4e7d0e34780d337', class: "loading" }, h("div", { key: 'dd3e0657b16c2f265f59fbaa2ac39c559c2093b7', class: "spinner" }), h("p", { key: '2714e3073d0e5cddc50d530aa1cf46a7f73ba96f' }, "Loading seat map..."))), this.error && (h("div", { key: '3de9d73ab89a1ee963e73b4192d5c93e9667f11b', class: "error" }, h("p", { key: '0fea5c828b5b212ffdb45c9c7702d241e2b79cc4', class: "error-title" }, "Error"), h("p", { key: 'f2c090b982bb1ee6fb7d347d8860b4ce4798a891', class: "error-message" }, this.error))), h("iframe", { key: '8023219fdd467ec736f9627190690a6f73df3bb3', ref: (el) => (this.iframeRef = el), src: this.getIframeSrc(), class: {
+            } }, this.isLoading && (h("div", { key: '4a09ddbdbd38eb68675bb320cf33fd3ead5974a4', class: "loading" }, h("div", { key: 'c622ba1f996427f0624cfda2c782abd49ec72e19', class: "spinner" }), h("p", { key: '802f42554fc238a1ddc0f8a0f6a6b0de89bdfb60' }, "Loading seat map..."))), this.error && (h("div", { key: 'dde73e2430bad68c0a67306c0aa2b44810007cc5', class: "error" }, h("p", { key: '392d51bbc47ab34eab5670aa7a2faf800dabe638', class: "error-title" }, "Error"), h("p", { key: 'fcf6810f767f34bf3490c1af21320d262bdb961b', class: "error-message" }, this.error))), h("iframe", { key: '2333206fa6eb4fe6cdcbb1d30864d56d54583e1f', ref: (el) => (this.iframeRef = el), src: this.getIframeSrc(), class: {
                 'seat-map-iframe': true,
                 hidden: this.isLoading || !!this.error,
             }, title: "Ticketlayer Seat Map", allow: "fullscreen" })));

package/dist/collection/components/tl-ticket/tl-ticket.css

@@ -1,13 +1,13 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .ticket {
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
-  background: var(--tl-card, #ffffff);
-  padding: var(--tl-spacing-5, 1.25rem);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
+  background: var(--tl-card);
+  padding: var(--tl-spacing-5);
   text-align: center;
 }
 
@@ -39,7 +39,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 0.25rem 0.5rem;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
   background: rgba(17, 24, 39, 0.85);
   color: #ffffff;
   font-size: 0.7rem;
@@ -51,37 +51,37 @@
 .name {
   margin: 1rem 0 0;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .meta {
   margin: 0.125rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .barcode {
   margin: 0.25rem 0 0;
   font-family: ui-monospace, monospace;
   font-size: 0.625rem;
-  color: var(--tl-muted-foreground, #9ca3af);
+  color: var(--tl-muted-foreground);
   word-break: break-all;
 }
 
 .download {
   margin-top: 0.75rem;
   padding: 0.375rem 0.75rem;
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-md);
   background: transparent;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
 }
 
 .download:hover {
-  background: var(--tl-muted, #f3f4f6);
+  background: var(--tl-muted);
 }
 
 .download:disabled {