@consent.software/catalog 1.6.1 → 2.0.1

package/dist_watch/bundle.js

@@ -19591,17 +19591,17 @@ var setDayOfYear_default = setDayOfYear;
 function setDefaultOptions2(options) {
   const result = {};
   const defaultOptions2 = getDefaultOptions();
-  for (const property3 in defaultOptions2) {
-    if (Object.prototype.hasOwnProperty.call(defaultOptions2, property3)) {
-      result[property3] = defaultOptions2[property3];
+  for (const property in defaultOptions2) {
+    if (Object.prototype.hasOwnProperty.call(defaultOptions2, property)) {
+      result[property] = defaultOptions2[property];
     }
   }
-  for (const property3 in options) {
-    if (Object.prototype.hasOwnProperty.call(options, property3)) {
-      if (options[property3] === void 0) {
-        delete result[property3];
+  for (const property in options) {
+    if (Object.prototype.hasOwnProperty.call(options, property)) {
+      if (options[property] === void 0) {
+        delete result[property];
       } else {
-        result[property3] = options[property3];
+        result[property] = options[property];
       }
     }
   }
@@ -26537,7 +26537,7 @@ var CallableInstance = (
    * @param {string | symbol} property
    * @returns {(...parameters: Array<unknown>) => unknown}
    */
-  (function(property3) {
+  (function(property) {
     const self2 = this;
     const constr = self2.constructor;
     const proto = (
@@ -26546,7 +26546,7 @@ var CallableInstance = (
       // type-coverage:ignore-next-line
       constr.prototype
     );
-    const value2 = proto[property3];
+    const value2 = proto[property];
     const apply = function() {
       return value2.apply(apply, arguments);
     };
@@ -38633,8 +38633,8 @@ var Schema = class {
    * @param {Normal} normal
    * @param {string} [space]
    */
-  constructor(property3, normal, space2) {
-    this.property = property3;
+  constructor(property, normal, space2) {
+    this.property = property;
     this.normal = normal;
     if (space2) {
       this.space = space2;
@@ -38647,14 +38647,14 @@ Schema.prototype.space = null;
 
 // node_modules/.pnpm/property-information@6.5.0/node_modules/property-information/lib/util/merge.js
 function merge3(definitions, space2) {
-  const property3 = {};
+  const property = {};
   const normal = {};
   let index2 = -1;
   while (++index2 < definitions.length) {
-    Object.assign(property3, definitions[index2].property);
+    Object.assign(property, definitions[index2].property);
     Object.assign(normal, definitions[index2].normal);
   }
-  return new Schema(property3, normal, space2);
+  return new Schema(property, normal, space2);
 }
 
 // node_modules/.pnpm/property-information@6.5.0/node_modules/property-information/lib/normalize.js
@@ -38669,8 +38669,8 @@ var Info = class {
    * @param {string} property
    * @param {string} attribute
    */
-  constructor(property3, attribute) {
-    this.property = property3;
+  constructor(property, attribute) {
+    this.property = property;
     this.attribute = attribute;
   }
 };
@@ -38718,9 +38718,9 @@ var DefinedInfo = class extends Info {
    * @param {number|null} [mask]
    * @param {string} [space]
    */
-  constructor(property3, attribute, mask, space2) {
+  constructor(property, attribute, mask, space2) {
     let index2 = -1;
-    super(property3, attribute);
+    super(property, attribute);
     mark(this, "space", space2);
     if (typeof mask === "number") {
       while (++index2 < checks.length) {
@@ -38740,7 +38740,7 @@ function mark(values, key2, value2) {
 // node_modules/.pnpm/property-information@6.5.0/node_modules/property-information/lib/util/create.js
 var own9 = {}.hasOwnProperty;
 function create6(definition3) {
-  const property3 = {};
+  const property = {};
   const normal = {};
   let prop;
   for (prop in definition3.properties) {
@@ -38755,12 +38755,12 @@ function create6(definition3) {
       if (definition3.mustUseProperty && definition3.mustUseProperty.includes(prop)) {
         info.mustUseProperty = true;
       }
-      property3[prop] = info;
+      property[prop] = info;
       normal[normalize4(prop)] = prop;
       normal[normalize4(info.attribute)] = prop;
     }
   }
-  return new Schema(property3, normal, definition3.space);
+  return new Schema(property, normal, definition3.space);
 }
 
 // node_modules/.pnpm/property-information@6.5.0/node_modules/property-information/lib/xlink.js
@@ -38795,8 +38795,8 @@ function caseSensitiveTransform(attributes, attribute) {
 }
 
 // node_modules/.pnpm/property-information@6.5.0/node_modules/property-information/lib/util/case-insensitive-transform.js
-function caseInsensitiveTransform(attributes, property3) {
-  return caseSensitiveTransform(attributes, property3.toLowerCase());
+function caseInsensitiveTransform(attributes, property) {
+  return caseSensitiveTransform(attributes, property.toLowerCase());
 }
 
 // node_modules/.pnpm/property-information@6.5.0/node_modules/property-information/lib/xmlns.js
@@ -44825,8 +44825,8 @@ var Lenis = class {
   };
   onTransitionEnd = (event) => {
     if (event.propertyName.includes("overflow")) {
-      const property3 = this.isHorizontal ? "overflow-x" : "overflow-y";
-      const overflow = getComputedStyle(this.rootElement)[property3];
+      const property = this.isHorizontal ? "overflow-x" : "overflow-y";
+      const overflow = getComputedStyle(this.rootElement)[property];
       if (["hidden", "clip"].includes(overflow)) {
         this.internalStop();
       } else {
@@ -47808,8 +47808,8 @@ var WccProperties = class WccProperties2 extends DeesElement {
           continue;
         }
         try {
-          const property3 = classProperties.get(key2);
-          const propertyTypeString = await determinePropertyType(property3);
+          const property = classProperties.get(key2);
+          const propertyTypeString = await determinePropertyType(property);
           propertyArray.push(x`
             <div class="property">
               <div class="property-label">${key2} (${propertyTypeString})</div>
@@ -47840,7 +47840,7 @@ var WccProperties = class WccProperties2 extends DeesElement {
                 }}"
                     />`;
               case "Enum":
-                const enumValues = getEnumValues(property3);
+                const enumValues = getEnumValues(property);
                 return x`<select
                       .value=${firstFoundInstantiatedElement[key2] || ""}
                       @change="${(eventArg) => {
@@ -48323,6 +48323,38 @@ __export(elements_exports, {
 
 // ts_web/elements/shared.ts
 var fontStack = r('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+var colors = {
+  light: {
+    background: "#ffffff",
+    foreground: "#09090b",
+    muted: "#f4f4f5",
+    mutedForeground: "#71717a",
+    border: "#e4e4e7",
+    input: "#e4e4e7",
+    primary: "#18181b",
+    primaryForeground: "#fafafa",
+    secondary: "#f4f4f5",
+    secondaryForeground: "#18181b",
+    accent: "#f4f4f5",
+    accentForeground: "#18181b",
+    ring: "#a1a1aa"
+  },
+  dark: {
+    background: "#09090b",
+    foreground: "#fafafa",
+    muted: "#27272a",
+    mutedForeground: "#a1a1aa",
+    border: "#27272a",
+    input: "#27272a",
+    primary: "#fafafa",
+    primaryForeground: "#18181b",
+    secondary: "#27272a",
+    secondaryForeground: "#fafafa",
+    accent: "#27272a",
+    accentForeground: "#fafafa",
+    ring: "#52525b"
+  }
+};
 
 // node_modules/.pnpm/@consent.software+interfaces@1.0.14/node_modules/@consent.software/interfaces/dist_ts/index.js
 var dist_ts_exports32 = {};
@@ -48389,14 +48421,190 @@ var CsWebclient = class {
 };
 
 // ts_web/elements/consentsoftware-cookieconsent.ts
-var _theme_dec, _a, _ConsentsoftwareCookieconsent_decorators, _init, _theme;
+var _ConsentsoftwareCookieconsent_decorators, _init, _a;
 _ConsentsoftwareCookieconsent_decorators = [t4("consentsoftware-cookieconsent")];
-var ConsentsoftwareCookieconsent = class extends (_a = i4, _theme_dec = [n5({ type: String, reflect: true })], _a) {
+var ConsentsoftwareCookieconsent = class extends (_a = DeesElement) {
+  static demo = () => x`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
+  csWebclientInstance = new CsWebclient();
+  csWebclientRan = false;
+  isMobile = false;
+  static styles = [
+    cssManager.defaultStyles,
+    i`
+      :host {
+        font-size: 14px;
+        user-select: none;
+      }
+
+      .pageOverlay {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        background: rgba(0, 0, 0, 0);
+        backdrop-filter: blur(0px);
+        transition: background 0.3s ease, backdrop-filter 0.3s ease;
+      }
+
+      .pageOverlay.shake {
+        background: rgba(0, 0, 0, 0.6) !important;
+      }
+
+      .modalBox {
+        display: block;
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+        background: ${cssManager.bdTheme(colors.light.background, colors.dark.background)};
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme(colors.light.border, colors.dark.border)},
+          0 16px 70px ${cssManager.bdTheme("rgba(0, 0, 0, 0.15)", "rgba(0, 0, 0, 0.35)")};
+        position: relative;
+        border-radius: 8px;
+        max-width: 520px;
+        min-width: 320px;
+        box-sizing: border-box;
+        overflow: hidden;
+        will-change: transform, opacity;
+        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+        transform: scale(0.92) translateY(20px);
+        opacity: 0;
+      }
+
+      .modalBox.visible {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+      }
+
+      .modalBox.hiding {
+        transform: scale(0.95) translateY(10px);
+        opacity: 0;
+      }
+
+      /* Mobile: slide up from bottom */
+      @media (max-width: 560px) {
+        .pageOverlay {
+          align-items: flex-end;
+        }
+
+        .modalBox {
+          max-width: 100%;
+          min-width: 100%;
+          border-radius: 16px 16px 0 0;
+          transform: translateY(100%);
+          opacity: 1;
+        }
+
+        .modalBox.visible {
+          transform: translateY(0);
+        }
+
+        .modalBox.hiding {
+          transform: translateY(100%);
+        }
+      }
+
+      .modalBox.shake {
+        animation: shake 120ms 2 linear;
+      }
+
+      @keyframes shake {
+        0% { transform: translateX(3px); }
+        50% { transform: translateX(-3px); }
+        100% { transform: translateX(0); }
+      }
+
+      :host([show='false']) { display: none; }
+      :host([show='true']) { display: block; }
+
+      .content {
+        margin: auto;
+      }
+
+      .text-container {
+        padding: 12px 16px;
+        font-size: 0.9em;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
+      }
+
+      .text-container a {
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+
+      .text-container a:hover {
+        opacity: 0.8;
+      }
+
+      .button-container {
+        padding: 12px 16px 16px;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+      }
+
+      @media (max-width: 560px) {
+        .button-container {
+          grid-template-columns: 1fr;
+          padding-bottom: max(16px, env(safe-area-inset-bottom));
+        }
+      }
+
+      .consent-button {
+        border-radius: 6px;
+        background: ${cssManager.bdTheme(colors.light.secondary, colors.dark.secondary)};
+        border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        padding: 8px 16px;
+        font-size: 0.85em;
+        font-weight: 500;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme(colors.light.secondaryForeground, colors.dark.secondaryForeground)};
+      }
+
+      .consent-button:hover {
+        background: ${cssManager.bdTheme(colors.light.accent, colors.dark.accent)};
+        border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
+      }
+
+      .consent-button:active {
+        transform: scale(0.98);
+      }
+
+      .consent-button:last-child {
+        background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
+        color: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
+        border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
+      }
+
+      .consent-button:last-child:hover {
+        opacity: 0.9;
+      }
+
+      .info-container {
+        text-align: center;
+        padding: 10px 16px;
+        background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
+        border-top: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        font-size: 0.75em;
+        color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
+      }
+
+      .info-container a {
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+        text-decoration: none;
+      }
+
+      .info-container a:hover {
+        text-decoration: underline;
+      }
+    `
+  ];
   constructor() {
     super();
-    __publicField(this, "csWebclientInstance", new CsWebclient());
-    __publicField(this, "csWebclientRan", false);
-    __privateAdd(this, _theme, __runInitializers(_init, 8, this, "light")), __runInitializers(_init, 11, this);
     this.setAttribute("show", "false");
   }
   render() {
@@ -48406,11 +48614,11 @@ var ConsentsoftwareCookieconsent = class extends (_a = i4, _theme_dec = [n5({ ty
           <div class="content">
             <consentsoftware-header></consentsoftware-header>
             <consentsoftware-tabs></consentsoftware-tabs>
-            <div class="text-container" style="padding: 16px;">
+            <div class="text-container">
               <div class="toptext">
-                This page uses cookies. Please review our
+                We use cookies to enhance your experience. Review our
                 <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
-                and choose which cookie level you are willing to accept.
+                and select your preferences.
               </div>
             </div>
             <consentsoftware-mainselection></consentsoftware-mainselection>
@@ -48445,64 +48653,64 @@ var ConsentsoftwareCookieconsent = class extends (_a = i4, _theme_dec = [n5({ ty
   }
   /**
    * Lifecycle method called when the element is connected to the DOM.
-   * It sets up the theme and displays the consent banner if no cookie levels are set.
+   * Displays the consent banner if no cookie levels are set.
    */
   async connectedCallback() {
-    super.connectedCallback();
-    this.updateTheme();
+    await super.connectedCallback();
+    this.isMobile = window.matchMedia("(max-width: 560px)").matches;
     const cookieLevel = await this.csWebclientInstance.getCookieLevels();
     if (!cookieLevel) {
       this.setAttribute("show", "true");
-      requestAnimationFrame(async () => {
-        await this.updated();
-        const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
-        if (pageOverlay) {
-          pageOverlay.style.background = "rgba(0,0,0, 0.5)";
-          pageOverlay.style.backdropFilter = "blur(20px)";
-        }
-        const modalBox = this.shadowRoot?.querySelector(".modalBox");
-        if (modalBox) {
-          modalBox.style.transform = `scale(1)`;
-          modalBox.style.opacity = "1";
-        }
-      });
+      await delayFor(50);
+      this.animateIn();
     } else {
       this.setAttribute("show", "false");
     }
   }
   async firstUpdated() {
-  }
-  /**
-   * Called after updates. Logs banner height and runs consent scripts if necessary.
-   */
-  async updated() {
-    console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
     const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
     if (!this.csWebclientRan && acceptedCookieLevels) {
       this.csWebclientRan = true;
       await this.csWebclientInstance.getAndRunConsentTuples();
     }
   }
-  /**
-   * Handles consent button clicks, sets cookie levels, and hides the banner.
-   * Uses theme variables for styling transitions.
-   */
-  async handleConsentButtonClick(event, levelsArg) {
-    console.log(`Set level to ${levelsArg}`);
+  animateIn() {
     const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
+    const modalBox = this.shadowRoot?.querySelector(".modalBox");
     if (pageOverlay) {
-      pageOverlay.style.background = "rgba(255,255,255, 0)";
-      pageOverlay.style.backdropFilter = "blur(0px)";
+      pageOverlay.style.background = "rgba(0, 0, 0, 0.5)";
+      pageOverlay.style.backdropFilter = "blur(4px)";
+    }
+    if (modalBox) {
+      modalBox.classList.remove("hiding");
+      modalBox.classList.add("visible");
     }
+  }
+  async animateOut() {
+    const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
     const modalBox = this.shadowRoot?.querySelector(".modalBox");
+    if (pageOverlay) {
+      pageOverlay.style.background = "rgba(0, 0, 0, 0)";
+      pageOverlay.style.backdropFilter = "blur(0px)";
+    }
     if (modalBox) {
-      modalBox.style.transform = `scale(0.95)`;
-      modalBox.style.opacity = "0";
+      modalBox.classList.remove("visible");
+      modalBox.classList.add("hiding");
     }
+    await delayFor(350);
+  }
+  /**
+   * Handles consent button clicks, sets cookie levels, and hides the banner.
+   */
+  async handleConsentButtonClick(_event, levelsArg) {
+    console.log(`Set level to ${levelsArg}`);
+    await this.animateOut();
     await this.csWebclientInstance.setCookieLevels(levelsArg);
-    await delayFor(300);
     this.setAttribute("show", "false");
-    this.updated();
+    if (!this.csWebclientRan) {
+      this.csWebclientRan = true;
+      await this.csWebclientInstance.getAndRunConsentTuples();
+    }
   }
   /**
    * Handles clicks on the page overlay. If clicked outside the modal,
@@ -48510,256 +48718,58 @@ var ConsentsoftwareCookieconsent = class extends (_a = i4, _theme_dec = [n5({ ty
    */
   async pageOverlayClick(e10) {
     if (e10.target === e10.currentTarget) {
-      const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
       const modalBox = this.shadowRoot?.querySelector(".modalBox");
-      if (pageOverlay && modalBox) {
-        pageOverlay.classList.add("shake");
+      if (modalBox) {
         modalBox.classList.add("shake");
-        await delayFor(2e3);
-        pageOverlay.classList.remove("shake");
+        await delayFor(300);
         modalBox.classList.remove("shake");
       }
     }
   }
-  /**
-   * Dynamically switches the theme between light and dark.
-   * Listens for system theme changes to update the component's theme.
-   */
-  updateTheme() {
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    this.theme = prefersDark ? "dark" : "light";
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e10) => {
-      this.theme = e10.matches ? "dark" : "light";
-    });
-  }
 };
 _init = __decoratorStart(_a);
-_theme = new WeakMap();
-__decorateElement(_init, 4, "theme", _theme_dec, ConsentsoftwareCookieconsent, _theme);
 ConsentsoftwareCookieconsent = __decorateElement(_init, 0, "ConsentsoftwareCookieconsent", _ConsentsoftwareCookieconsent_decorators, ConsentsoftwareCookieconsent);
-__publicField(ConsentsoftwareCookieconsent, "demo", () => x`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`);
-/**
- * Define component styles with CSS variables that adjust based on theme.
- * The default variables serve as baseline for the light theme.
- * Theme-specific overrides modify these for dark mode.
- */
-__publicField(ConsentsoftwareCookieconsent, "styles", i`
-    :host {
-      font-family: ${fontStack};
-      user-select: none;
-      /* Default variables for Light Theme */
-      --text-color: #333;
-      --background-color: #eeeeee;
-      --accent-color: #333333;
-      --button-bg: #ffffff;
-      --button-hover-bg: #f2f2f2;
-      --icon-color: #4496f5;
-      --link-color: #333;
-      --padding-sides: 16px;
-      /* Additional variables for modal and info container styling */
-      --info-bg: rgba(0, 0, 0, 0.1);
-      --info-text: rgba(255, 255, 255, 0.5);
-      --modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
-    }
-
-    /* Dark Theme Overrides:
-       When theme attribute is 'dark', override variables accordingly. */
-    :host([theme='dark']) {
-      --text-color: #fff;
-      --background-color: #111;
-      --accent-color: #333333;
-      --button-bg: #252525;
-      --button-hover-bg: #222222;
-      --icon-color: #4496f5;
-      --link-color: #fff;
-      --info-bg: rgba(0, 0, 0, 0.1);
-      --info-text: rgba(255, 255, 255, 0.5);
-      --modal-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
-    }
-
-    /* Light Theme Overrides:
-       Explicit light theme settings, currently matching defaults.
-       Can be customized independently if desired. */
-    :host([theme='light']) {
-      --text-color: #333;
-      --background-color: #eeeeee;
-      --accent-color: #333333;
-      --button-bg: #ffffff;
-      --button-hover-bg: #f2f2f2;
-      --icon-color: #4496f5;
-      --link-color: #333;
-      --info-bg: rgba(0, 0, 0, 0.1);
-      --info-text: rgba(0, 0, 0, 0.5);
-      --modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
-    }
-
-    /* Overlay covering the page behind the modal */
-    .pageOverlay {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      left: 0;
-      display: grid;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000; /* Ensures the overlay is on top of other elements */
-      background: rgba(255, 255, 255, 0);
-      backdrop-filter: blur(0px);
-      transition: all 0.2s;
-    }
-
-    /* Shake animation for overlay when clicked */
-    .pageOverlay.shake {
-      background: rgba(0, 0, 0, 0.5) !important;
-    }
-
-    /* Modal box styling using theme variables for colors and shadows */
-    .modalBox {
-      display: block;
-      color: var(--text-color);
-      background: var(--background-color);
-      box-shadow: var(--modal-box-shadow);
-      position: relative;
-      border: 1px dotted rgba(255, 255, 255, 0.1);
-      border-top: 1px solid var(--accent-color);
-      border-radius: 16px;
-      max-width: 1100px;
-      min-width: calc(100vw / 3);
-      box-sizing: border-box;
-      overflow: hidden;
-      will-change: transform;
-      transition: all 0.3s;
-      transform: scale(0.95);
-      opacity: 0;
-    }
-
-    /* Media query for mobile devices: stack buttons vertically */
-    @media (max-width: 600px) {
-      .modalBox {
-        height: 100vh;
-        box-shadow: none;
-        border-radius: 0px;
-      }
-    }
-
-    /* Shake animation for modal box */
-    .modalBox.shake {
-      animation: shake 150ms 2 linear;
-    }
-
-    @keyframes shake {
-      0% {
-        transform: translate(3px, 0);
-      }
-      50% {
-        transform: translate(-3px, 0);
-      }
-      100% {
-        transform: translate(0, 0);
-      }
-    }
-
-    /* Toggle display based on [show] attribute */
-    :host([show='false']) {
-      display: none;
-    }
-    :host([show='true']) {
-      display: block;
-    }
-
-    .content {
-      margin: auto;
-    }
-
-    .text-container {
-      padding-left: var(--padding-sides);
-      padding-right: var(--padding-sides);
-      display: grid;
-      grid-template-columns: auto;
-    }
-
-    .text-container a {
-      color: var(--link-color);
-      text-decoration: none;
-    }
-
-    .button-container {
-      padding: var(--padding-sides);
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 16px;
-    }
-
-    /* Media query for mobile devices: stack buttons vertically */
-    @media (max-width: 600px) {
-      .button-container {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    /* Consent button styling using theme variables */
-    .consent-button {
-      border-radius: 3px;
-      background: var(--button-bg);
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-      padding: 10px;
-      line-height: 30px;
-      text-align: center;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .consent-button:hover {
-      background: var(--button-hover-bg);
-    }
-
-    /* Use theme variables for info container background and text */
-    .info-container {
-      text-align: center;
-      line-height: 3em;
-      background: var(--info-bg);
-      border-top: 1px dotted rgba(255, 255, 255, 0.1);
-      font-size: 0.8em;
-      color: var(--info-text);
-    }
-
-    .info-container a {
-      text-decoration: underline;
-      color: var(--link-color);
-      transition: color 0.2s;
-    }
-    .info-container a:hover {
-      color: #ffffff;
-    }
-  `);
 __runInitializers(_init, 1, ConsentsoftwareCookieconsent);
 
 // ts_web/elements/consentsoftware-header.ts
 var _ConsentsoftwareHeader_decorators, _init2, _a2;
 _ConsentsoftwareHeader_decorators = [t4("consentsoftware-header")];
-var ConsentsoftwareHeader = class extends (_a2 = i4) {
-  static demo = () => x`<consentsoftware-tabs></consentsoftware-tabs>`;
-  static styles = i`
-    :host {
-      display: block;
-      line-height: 3em;
-      text-align: center;
-      font-family: ${fontStack};
-      border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
-    }
+var ConsentsoftwareHeader = class extends (_a2 = DeesElement) {
+  static demo = () => x`<consentsoftware-header></consentsoftware-header>`;
+  static styles = [
+    cssManager.defaultStyles,
+    i`
+      :host {
+        display: block;
+        padding: 14px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+      }
 
-    .heading {
-      
-    }
-  `;
-  constructor() {
-    super();
-  }
+      .heading {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 0.95em;
+        font-weight: 600;
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+      }
+
+      .icon {
+        width: 18px;
+        height: 18px;
+        opacity: 0.7;
+      }
+    `
+  ];
   render() {
     return x`
       <div class="heading">
-        What about cookies?
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"/>
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+          <path d="M12 17h.01"/>
+        </svg>
+        Cookie Preferences
       </div>
     `;
   }
@@ -48771,9 +48781,9 @@ __runInitializers(_init2, 1, ConsentsoftwareHeader);
 // ts_web/elements/consentsoftware-mainselection.ts
 var _selected_dec, _required_dec, _a3, _ConsentsoftwareMainSelection_decorators, _init3, _required, _selected;
 _ConsentsoftwareMainSelection_decorators = [t4("consentsoftware-mainselection")];
-var ConsentsoftwareMainSelection = class extends (_a3 = i4, _required_dec = [n5({ type: Boolean })], _selected_dec = [n5({ type: Boolean })], _a3) {
+var ConsentsoftwareMainSelection = class extends (_a3 = DeesElement, _required_dec = [n5({ type: Boolean })], _selected_dec = [n5({ type: Boolean })], _a3) {
   constructor() {
-    super();
+    super(...arguments);
     __privateAdd(this, _required, __runInitializers(_init3, 8, this, false)), __runInitializers(_init3, 11, this);
     __privateAdd(this, _selected, __runInitializers(_init3, 12, this, false)), __runInitializers(_init3, 15, this);
   }
@@ -48795,7 +48805,7 @@ var ConsentsoftwareMainSelection = class extends (_a3 = i4, _required_dec = [n5(
       </div>
     `;
   }
-  async getResults(mouseEvent) {
+  async getResults() {
   }
 };
 _init3 = __decoratorStart(_a3);
@@ -48805,41 +48815,68 @@ __decorateElement(_init3, 4, "required", _required_dec, ConsentsoftwareMainSelec
 __decorateElement(_init3, 4, "selected", _selected_dec, ConsentsoftwareMainSelection, _selected);
 ConsentsoftwareMainSelection = __decorateElement(_init3, 0, "ConsentsoftwareMainSelection", _ConsentsoftwareMainSelection_decorators, ConsentsoftwareMainSelection);
 __publicField(ConsentsoftwareMainSelection, "demo", () => x`<consentsoftware-mainselection></consentsoftware-mainselection>`);
-__publicField(ConsentsoftwareMainSelection, "styles", i`
-    :host {
-      display: block;
-      position: relative;
-    }
+__publicField(ConsentsoftwareMainSelection, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+        position: relative;
+      }
 
-    .maincontainer {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-    }
+      .maincontainer {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        padding: 8px 0;
+      }
 
-    .itemBox {
-      padding: 16px;
-      text-align: center;
-      border-right: 1px solid;
-      border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1;
-    }
-    .itemBox:last-child {
-      border-right: none;
-    }
-  `);
+      @media (max-width: 560px) {
+        .maincontainer {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 4px;
+        }
+      }
+
+      .itemBox {
+        padding: 12px 8px;
+        text-align: center;
+        border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+      }
+
+      .itemBox:last-child {
+        border-right: none;
+      }
+
+      @media (max-width: 560px) {
+        .itemBox {
+          padding: 10px 8px;
+          border-right: none;
+          border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        }
+
+        .itemBox:nth-child(odd) {
+          border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        }
+
+        .itemBox:nth-last-child(-n+2) {
+          border-bottom: none;
+        }
+      }
+    `
+]);
 __runInitializers(_init3, 1, ConsentsoftwareMainSelection);
 
 // ts_web/elements/consentsoftware-toggle.ts
 var _selected_dec2, _required_dec2, _a4, _ConsentsoftwareToggle_decorators, _init4, _required2, _selected2;
 _ConsentsoftwareToggle_decorators = [t4("consentsoftware-toggle")];
-var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type: Boolean })], _selected_dec2 = [n5({ type: Boolean, reflect: true })], _a4) {
+var ConsentsoftwareToggle = class extends (_a4 = DeesElement, _required_dec2 = [n5({ type: Boolean })], _selected_dec2 = [n5({ type: Boolean, reflect: true })], _a4) {
   constructor() {
-    super();
+    super(...arguments);
     __privateAdd(this, _required2, __runInitializers(_init4, 8, this, false)), __runInitializers(_init4, 11, this);
     __privateAdd(this, _selected2, __runInitializers(_init4, 12, this, false)), __runInitializers(_init4, 15, this);
     /**
-     * We always track the knob’s left offset in `currentX`.
-     * - 0 => fully left
-     * - 30 => fully right
+     * Knob position tracking (0 = off, maxTravel = on)
+     * This is the travel distance, not absolute left position.
+     * Actual left = padding + currentX
      */
     __publicField(this, "currentX", 0);
     /**
@@ -48848,9 +48885,15 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
     __publicField(this, "isDragging", false);
     __publicField(this, "hasDragged", false);
     __publicField(this, "startX", 0);
-    // pointerdown offset
-    __publicField(this, "knobWidth", 30);
-    __publicField(this, "trackWidth", 60);
+    // Toggle dimensions (with border-box, 1px border reduces inner by 2px)
+    __publicField(this, "trackWidth", 36);
+    // outer width
+    __publicField(this, "trackHeight", 20);
+    // outer height
+    __publicField(this, "knobSize", 14);
+    __publicField(this, "padding", 2);
+    // padding from inner edge to knob
+    __publicField(this, "maxTravel", 16);
   }
   render() {
     return x`
@@ -48862,7 +48905,7 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
             <!-- The knob itself, with pointer events for dragging. -->
             <div
               class="toggleKnobInner"
-              style="left: ${this.currentX}px;"
+              style="left: ${this.padding + this.currentX}px;"
               @pointerdown=${this.onPointerDown}
               @pointermove=${this.onPointerMove}
               @pointerup=${this.onPointerUp}
@@ -48876,13 +48919,14 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
   /**
    * If required = true on first render, auto-select and set the knob to the right.
    */
-  async firstUpdated() {
+  async firstUpdated(_changedProperties) {
+    await super.firstUpdated(_changedProperties);
     if (this.required) {
       this.selected = true;
-      this.currentX = this.knobWidth;
+      this.currentX = this.maxTravel;
       this.requestUpdate();
     } else {
-      this.currentX = this.selected ? this.knobWidth : 0;
+      this.currentX = this.selected ? this.maxTravel : 0;
       this.requestUpdate();
     }
   }
@@ -48896,20 +48940,20 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
       return;
     }
     if (this.required) {
-      this.currentX = this.knobWidth;
+      this.currentX = this.maxTravel;
       this.requestUpdate();
       await new Promise((r10) => setTimeout(r10, 10));
-      this.currentX = 20;
+      this.currentX = this.maxTravel - 3;
       this.requestUpdate();
-      await delayFor(200);
-      this.currentX = this.knobWidth;
+      await delayFor(150);
+      this.currentX = this.maxTravel;
       this.requestUpdate();
       return;
     }
     event.stopPropagation();
     event.preventDefault();
     this.selected = !this.selected;
-    this.currentX = this.selected ? this.knobWidth : 0;
+    this.currentX = this.selected ? this.maxTravel : 0;
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("toggle", { detail: { selected: this.selected } }));
     delayFor(0).then(() => {
@@ -48933,7 +48977,7 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
     this.hasDragged = true;
     const toggleKnobInner = this.shadowRoot.querySelector(".toggleKnobInner");
     toggleKnobInner.classList.add("dragging");
-    this.currentX = Math.max(0, Math.min(newX, this.trackWidth - this.knobWidth));
+    this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
     this.requestUpdate();
   }
   onPointerUp(event) {
@@ -48945,9 +48989,9 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
     }
     const toggleKnobInner = this.shadowRoot.querySelector(".toggleKnobInner");
     toggleKnobInner.classList.remove("dragging");
-    const midpoint = (this.trackWidth - this.knobWidth) / 2;
+    const midpoint = this.maxTravel / 2;
     this.selected = this.currentX > midpoint;
-    this.currentX = this.selected ? this.knobWidth : 0;
+    this.currentX = this.selected ? this.maxTravel : 0;
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("toggle", { detail: { selected: this.selected } }));
     delayFor(0).then(() => {
@@ -48959,7 +49003,7 @@ var ConsentsoftwareToggle = class extends (_a4 = i4, _required_dec2 = [n5({ type
    */
   updated(changedProperties) {
     if (changedProperties.has("selected") && !this.isDragging && !this.hasDragged && !this.required) {
-      this.currentX = this.selected ? this.knobWidth : 0;
+      this.currentX = this.selected ? this.maxTravel : 0;
       this.requestUpdate();
     }
     super.updated(changedProperties);
@@ -48974,119 +49018,141 @@ _selected2 = new WeakMap();
 __decorateElement(_init4, 4, "required", _required_dec2, ConsentsoftwareToggle, _required2);
 __decorateElement(_init4, 4, "selected", _selected_dec2, ConsentsoftwareToggle, _selected2);
 ConsentsoftwareToggle = __decorateElement(_init4, 0, "ConsentsoftwareToggle", _ConsentsoftwareToggle_decorators, ConsentsoftwareToggle);
-__publicField(ConsentsoftwareToggle, "styles", i`
-    :host {
-      display: block;
-      position: relative;
-    }
+// (36 - 2) - 14 - (2 * 2) = 34 - 14 - 4 = 16
+__publicField(ConsentsoftwareToggle, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+        position: relative;
+      }
 
-    .label {
-      margin-bottom: 16px;
-    }
+      .label {
+        margin-bottom: 8px;
+        font-size: 0.8em;
+        font-weight: 500;
+        color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
+      }
 
-    .toggle {
-      user-select: none; /* helps avoid text selection on drag */
-    }
+      .toggle {
+        user-select: none;
+      }
 
-    .toggleKnobArea {
-      position: relative;
-      margin: auto;
-      height: 30px;
-      width: 60px;
-      border-radius: 20px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0);
-      overflow: hidden;
-      transition: background 0.2s ease;
-      cursor: pointer;
-    }
+      .toggleKnobArea {
+        position: relative;
+        margin: auto;
+        height: 20px;
+        width: 36px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme(colors.light.input, colors.dark.input)};
+        border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        overflow: hidden;
+        transition: all 0.15s ease;
+        cursor: pointer;
+      }
 
-    :host([selected]) .toggleKnobArea {
-      background: green;
-    }
+      .toggleKnobArea:hover {
+        border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
+      }
 
-    .toggleKnobMover {
-      position: relative;
-      height: 100%;
-      width: 100%;
-    }
+      :host([selected]) .toggleKnobArea {
+        background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
+        border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
+      }
 
-    .toggleKnobInner {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 30px;
-      height: 30px;
-      border-radius: 15px;
-      background: rgba(255, 255, 255, 0.5);
-      transition: left 0.2s ease, background 0.2s ease;
-      transform: scale(0.7);
-      /* Prevent scroll gestures on mobile */
-      touch-action: none;
-    }
+      .toggleKnobMover {
+        position: relative;
+        height: 100%;
+        width: 100%;
+      }
 
-    .toggleKnobInner.dragging {
-      transition: background 0.2s ease;
-    }
+      .toggleKnobInner {
+        position: absolute;
+        top: 2px;
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        background: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
+        transition: left 0.15s ease, background 0.15s ease;
+        touch-action: none;
+      }
 
-    :host([selected]) .toggleKnobInner {
-      background: white;
-    }
+      .toggleKnobInner.dragging {
+        transition: background 0.15s ease;
+      }
 
-    :host([required]) .toggleKnobArea {
-      background: none;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
+      :host([selected]) .toggleKnobInner {
+        background: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
+      }
 
-    :host([required]) .toggleKnobInner {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  `);
+      :host([required]) .toggleKnobArea {
+        cursor: not-allowed;
+      }
+
+      :host([required][selected]) .toggleKnobArea {
+        background: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
+        border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
+      }
+
+      :host([required][selected]) .toggleKnobInner {
+        background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
+      }
+    `
+]);
 __runInitializers(_init4, 1, ConsentsoftwareToggle);
 
 // ts_web/elements/consentsoftware-tabs.ts
 var _ConsentsoftwareTabs_decorators, _init5, _a5;
 _ConsentsoftwareTabs_decorators = [t4("consentsoftware-tabs")];
-var ConsentsoftwareTabs = class extends (_a5 = i4) {
+var ConsentsoftwareTabs = class extends (_a5 = DeesElement) {
   static demo = () => x`<consentsoftware-tabs></consentsoftware-tabs>`;
-  static styles = i`
-    :host {
-      display: block;
-      position: relative;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .tabs {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-    }
+  static styles = [
+    cssManager.defaultStyles,
+    i`
+      :host {
+        display: block;
+        position: relative;
+        background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
+      }
 
-    .tabs .tab {
-      text-align: center;
-      line-height: 3em;
-      cursor: pointer;
-    }
+      .tabs {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
 
-    /* Media query for mobile devices: stack buttons vertically */
-    @media (max-width: 600px) {
       .tabs .tab {
+        text-align: center;
+        padding: 8px 0;
         font-size: 0.8em;
+        font-weight: 500;
+        color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
+        cursor: pointer;
+        transition: color 0.15s ease;
       }
-    }
 
-    .selector {
-      position: absolute;
-      width: calc(100% / 3);
-      height: 1px;
-      left: 0;
-      bottom: 0px;
-      background: orange;
-      transition: all 0.2s;
-    }
-  `;
-  constructor() {
-    super();
-  }
+      .tabs .tab:hover {
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+      }
+
+      @media (max-width: 560px) {
+        .tabs .tab {
+          font-size: 0.75em;
+          padding: 6px 0;
+        }
+      }
+
+      .selector {
+        position: absolute;
+        width: calc(100% / 3);
+        height: 2px;
+        left: 0;
+        bottom: 0;
+        background: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+        transition: all 0.2s ease-out;
+        border-radius: 1px;
+      }
+    `
+  ];
   render() {
     return x`
       <div class="tabs">