@cbpds/web-components
Version:
Web components for the CBP Design System.
54 lines (47 loc) • 20.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, E as Env } from './index-6c11fa0c.js';
const resetCss = "html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none;margin:0;padding:0}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}img:not([height]){height:auto;}input,button,textarea,select,address{font:inherit;letter-spacing:inherit;word-spacing:inherit}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion: reduce){html{scroll-behavior:initial}*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
const CbpAppStyle0 = resetCss;
const cssVariablesCss = ":root{--cbp-motion-duration-instant:1ms;--cbp-motion-duration-shortest:200ms;--cbp-motion-duration-shorter:300ms;--cbp-motion-duration-short:400ms;--cbp-motion-duration-medium:500ms;--cbp-motion-duration-long:750ms;--cbp-motion-duration-longer:1s;--cbp-motion-duration-longest:2s;--cbp-motion-easing-linear:0, 0, 1, 1;--cbp-motion-easing-standard:0.2, 0, 0, 1;--cbp-motion-easing-standard-accelerate:0.3, 0, 1, 1;--cbp-motion-easing-standard-decelerate:0, 0, 0, 1;--cbp-motion-easing-emphasized:0.2, 0, 0, 1;--cbp-motion-easing-emphasized-accelerate:0.3, 0, 0.8, 0.15;--cbp-motion-easing-emphasized-decelerate:0.05, 0.7, 0.1, 1;--cbp-motion-easing-motion-path:linear;--cbp-border-size-sm:.0625rem;--cbp-border-size-md:.125rem;--cbp-border-size-lg:.1875rem;--cbp-border-size-xl:.25rem;--cbp-border-radius-sharp:0;--cbp-border-radius-soft:0.1875rem;--cbp-border-radius-softer:0.3125rem;--cbp-border-radius-softest:0.625rem;--cbp-border-radius-pill:9999px;--cbp-border-radius-circle:100%;--cbp-breakpoint-sm:37.5em;--cbp-breakpoint-md:37.5em;--cbp-breakpoint-lg:64em;--cbp-breakpoint-xl:90em;--cbp-color-black:#000000;--cbp-color-blue-5:#e8f5ff;--cbp-color-blue-10:#cfe8ff;--cbp-color-blue-20:#a1d3ff;--cbp-color-blue-30:#58b4ff;--cbp-color-blue-40:#2491ff;--cbp-color-blue-50:#0076d6;--cbp-color-blue-60:#005ea2;--cbp-color-blue-70:#0b4778;--cbp-color-blue-80:#112f4e;--cbp-color-blue-cool-5:#e1f3f8;--cbp-color-blue-cool-10:#c3ebfa;--cbp-color-blue-cool-20:#97d4ea;--cbp-color-blue-cool-30:#59b9de;--cbp-color-blue-cool-40:#28a0cb;--cbp-color-blue-cool-50:#0d7ea2;--cbp-color-blue-cool-60:#07648d;--cbp-color-blue-cool-70:#074b69;--cbp-color-blue-cool-80:#002d3f;--cbp-color-blue-warm-5:#edf5ff;--cbp-color-blue-warm-10:#d4e5ff;--cbp-color-blue-warm-20:#adcdff;--cbp-color-blue-warm-30:#81aefc;--cbp-color-blue-warm-40:#5994f6;--cbp-color-blue-warm-50:#2672de;--cbp-color-blue-warm-60:#0050d8;--cbp-color-blue-warm-70:#1a4480;--cbp-color-blue-warm-80:#162e51;--cbp-color-cyan-5:#e5faff;--cbp-color-cyan-10:#a8f2ff;--cbp-color-cyan-20:#52daf2;--cbp-color-cyan-30:#00bde3;--cbp-color-cyan-40:#009ec1;--cbp-color-cyan-50:#0081a1;--cbp-color-cyan-60:#00687d;--cbp-color-cyan-70:#0e4f5c;--cbp-color-cyan-80:#093b44;--cbp-color-gold-5:#fef0c8;--cbp-color-gold-10:#ffe396;--cbp-color-gold-20:#ffbe2e;--cbp-color-gold-30:#e5a000;--cbp-color-gold-40:#c2850c;--cbp-color-gold-50:#936f38;--cbp-color-gold-60:#7a591a;--cbp-color-gold-70:#5c410a;--cbp-color-gold-80:#3b2b15;--cbp-color-gray-1:#fcfcfc;--cbp-color-gray-2:#f9f9f9;--cbp-color-gray-3:#f6f6f6;--cbp-color-gray-4:#f3f3f3;--cbp-color-gray-5:#f0f0f0;--cbp-color-gray-10:#e6e6e6;--cbp-color-gray-20:#c9c9c9;--cbp-color-gray-30:#adadad;--cbp-color-gray-40:#919191;--cbp-color-gray-50:#757575;--cbp-color-gray-60:#5c5c5c;--cbp-color-gray-70:#454545;--cbp-color-gray-80:#2e2e2e;--cbp-color-gray-90:#1b1b1b;--cbp-color-gray-cool-1:#fbfcfd;--cbp-color-gray-cool-2:#f7f9fa;--cbp-color-gray-cool-3:#f5f6f7;--cbp-color-gray-cool-4:#f1f3f6;--cbp-color-gray-cool-5:#edeff0;--cbp-color-gray-cool-10:#dfe1e2;--cbp-color-gray-cool-20:#c6cace;--cbp-color-gray-cool-30:#a9aeb1;--cbp-color-gray-cool-40:#8d9297;--cbp-color-gray-cool-50:#71767a;--cbp-color-gray-cool-60:#565c65;--cbp-color-gray-cool-70:#3d4551;--cbp-color-gray-cool-80:#2d2e2f;--cbp-color-gray-cool-90:#1c1d1f;--cbp-color-gray-warm-1:#fcfcfb;--cbp-color-gray-warm-2:#f9f9f7;--cbp-color-gray-warm-3:#f6f6f2;--cbp-color-gray-warm-4:#f5f5f0;--cbp-color-gray-warm-5:#f0f0ec;--cbp-color-gray-warm-10:#e6e6e2;--cbp-color-gray-warm-20:#cac9c0;--cbp-color-gray-warm-30:#afaea2;--cbp-color-gray-warm-40:#929285;--cbp-color-gray-warm-50:#76766a;--cbp-color-gray-warm-60:#5d5d52;--cbp-color-gray-warm-70:#454540;--cbp-color-gray-warm-80:#2e2e2a;--cbp-color-gray-warm-90:#171716;--cbp-color-green-5:#ddf9c7;--cbp-color-green-10:#c5ee93;--cbp-color-green-20:#98d035;--cbp-color-green-30:#7fb135;--cbp-color-green-40:#719f2a;--cbp-color-green-50:#538200;--cbp-color-green-60:#466c04;--cbp-color-green-70:#2f4a0b;--cbp-color-green-80:#243413;--cbp-color-green-warm-5:#f5fbc1;--cbp-color-green-warm-10:#e7f434;--cbp-color-green-warm-20:#c5d30a;--cbp-color-green-warm-30:#a3b72c;--cbp-color-green-warm-40:#7e9c1d;--cbp-color-green-warm-50:#6a7d00;--cbp-color-green-warm-60:#5a6613;--cbp-color-green-warm-70:#4b4e10;--cbp-color-green-warm-80:#38380b;--cbp-color-green-cool-5:#e3f5e1;--cbp-color-green-cool-10:#b7f5bd;--cbp-color-green-cool-20:#70e17b;--cbp-color-green-cool-30:#21c834;--cbp-color-green-cool-40:#00a91c;--cbp-color-green-cool-50:#008817;--cbp-color-green-cool-60:#216e1f;--cbp-color-green-cool-70:#154c21;--cbp-color-green-cool-80:#19311e;--cbp-color-indigo-5:#f0f0ff;--cbp-color-indigo-10:#e0e0ff;--cbp-color-indigo-20:#ccceff;--cbp-color-indigo-30:#a3a7fa;--cbp-color-indigo-40:#8289ff;--cbp-color-indigo-50:#656bd7;--cbp-color-indigo-60:#4a50c4;--cbp-color-indigo-70:#3333a3;--cbp-color-indigo-80:#212463;--cbp-color-indigo-cool-5:#edf0ff;--cbp-color-indigo-cool-10:#dee5ff;--cbp-color-indigo-cool-20:#b8c8ff;--cbp-color-indigo-cool-30:#94adff;--cbp-color-indigo-cool-40:#628ef4;--cbp-color-indigo-cool-50:#4866ff;--cbp-color-indigo-cool-60:#3e4ded;--cbp-color-indigo-cool-70:#222fbf;--cbp-color-indigo-cool-80:#1b2b85;--cbp-color-indigo-warm-5:#f5f2ff;--cbp-color-indigo-warm-10:#e4deff;--cbp-color-indigo-warm-20:#cfc4fd;--cbp-color-indigo-warm-30:#b69fff;--cbp-color-indigo-warm-40:#967efb;--cbp-color-indigo-warm-50:#745fe9;--cbp-color-indigo-warm-60:#5942d2;--cbp-color-indigo-warm-70:#3d2c9d;--cbp-color-indigo-warm-80:#261f5b;--cbp-color-magenta-5:#fff2f5;--cbp-color-magenta-10:#ffddea;--cbp-color-magenta-20:#ffb4cf;--cbp-color-magenta-30:#ff87b2;--cbp-color-magenta-40:#fd4496;--cbp-color-magenta-50:#d72d79;--cbp-color-magenta-60:#ab2165;--cbp-color-magenta-70:#731f44;--cbp-color-magenta-80:#4f172e;--cbp-color-mint-5:#c9fbeb;--cbp-color-mint-10:#83fcd4;--cbp-color-mint-20:#0ceda6;--cbp-color-mint-30:#04c585;--cbp-color-mint-40:#00a871;--cbp-color-mint-50:#008659;--cbp-color-mint-60:#146947;--cbp-color-mint-70:#0c4e29;--cbp-color-mint-80:#0d351e;--cbp-color-mint-cool-5:#d5fbf3;--cbp-color-mint-cool-10:#7efbe1;--cbp-color-mint-cool-20:#29e1cb;--cbp-color-mint-cool-30:#1dc2ae;--cbp-color-mint-cool-40:#00a398;--cbp-color-mint-cool-50:#008480;--cbp-color-mint-cool-60:#0f6460;--cbp-color-mint-cool-70:#0b4b3f;--cbp-color-mint-cool-80:#123131;--cbp-color-orange-5:#fef2e4;--cbp-color-orange-10:#fce2c5;--cbp-color-orange-20:#ffbc78;--cbp-color-orange-30:#fa9441;--cbp-color-orange-40:#e66f0e;--cbp-color-orange-50:#c05600;--cbp-color-orange-60:#8c471c;--cbp-color-orange-70:#5f3617;--cbp-color-orange-80:#352313;--cbp-color-red-5:#fff3f2;--cbp-color-red-10:#fde0db;--cbp-color-red-20:#fdb8ae;--cbp-color-red-30:#ff8d7b;--cbp-color-red-40:#fb5a47;--cbp-color-red-50:#e52207;--cbp-color-red-60:#b50909;--cbp-color-red-70:#8b0a03;--cbp-color-red-80:#5c1111;--cbp-color-red-warm-5:#fff5ee;--cbp-color-red-warm-10:#fce1d4;--cbp-color-red-warm-20:#f6bd9c;--cbp-color-red-warm-30:#f39268;--cbp-color-red-warm-40:#ef5e25;--cbp-color-red-warm-50:#d54309;--cbp-color-red-warm-60:#9c3d10;--cbp-color-red-warm-70:#63340f;--cbp-color-red-warm-80:#3e2a1e;--cbp-color-red-cool-5:#fff2f5;--cbp-color-red-cool-10:#f8dfe2;--cbp-color-red-cool-20:#f8b9c5;--cbp-color-red-cool-30:#fd8ba0;--cbp-color-red-cool-40:#f45d79;--cbp-color-red-cool-50:#e41d3d;--cbp-color-red-cool-60:#b21d38;--cbp-color-red-cool-70:#822133;--cbp-color-red-cool-80:#4f1c24;--cbp-color-violet-5:#f7f2ff;--cbp-color-violet-10:#ede3ff;--cbp-color-violet-20:#d5bfff;--cbp-color-violet-30:#c39deb;--cbp-color-violet-40:#ad79e9;--cbp-color-violet-50:#9355dc;--cbp-color-violet-60:#783cb9;--cbp-color-violet-70:#54278f;--cbp-color-violet-80:#39215e;--cbp-color-violet-warm-5:#fef2ff;--cbp-color-violet-warm-10:#fbdcff;--cbp-color-violet-warm-20:#f4b2ff;--cbp-color-violet-warm-30:#ee83ff;--cbp-color-violet-warm-40:#d85bef;--cbp-color-violet-warm-50:#be32d0;--cbp-color-violet-warm-60:#93348c;--cbp-color-violet-warm-70:#711e6c;--cbp-color-violet-warm-80:#481441;--cbp-color-white:#ffffff;--cbp-color-yellow-5:#fff5c2;--cbp-color-yellow-10:#fee685;--cbp-color-yellow-20:#face00;--cbp-color-yellow-30:#ddaa01;--cbp-color-yellow-40:#b38c00;--cbp-color-yellow-50:#947100;--cbp-color-yellow-60:#776017;--cbp-color-yellow-70:#5c4809;--cbp-color-yellow-80:#422d19;--cbp-color-branding-dhs-blue:#005288;--cbp-color-backdrop-light:rgba(0, 0, 0, 0.3);--cbp-color-backdrop-dark:rgba(0, 0, 0, 0.5);--cbp-shadow-level-1-center:0px 0px 4px 0px rgba(0, 0, 0, 0.5);--cbp-shadow-level-1-up:0px -2px 4px 0px rgba(0, 0, 0, 0.5);--cbp-shadow-level-1-down:0px 2px 4px 0px rgba(0, 0, 0, 0.5);--cbp-shadow-level-1-right:2px 0px 4px 0px rgba(0, 0, 0, 0.5);--cbp-shadow-level-1-left:-2px 0px 4px 0px rgba(0, 0, 0, 0.5);--cbp-shadow-level-2-center:0px 0px 6px 1px rgba(0, 0, 0, 0.4);--cbp-shadow-level-2-up:0px -3px 6px 1px rgba(0, 0, 0, 0.4);--cbp-shadow-level-2-down:0px 3px 6px 1px rgba(0, 0, 0, 0.4);--cbp-shadow-level-2-right:3px 0px 6px 1px rgba(0, 0, 0, 0.4);--cbp-shadow-level-2-left:-3px 0px 6px 1px rgba(0, 0, 0, 0.4);--cbp-shadow-level-3-center:0px 0px 10px 2px rgba(0, 0, 0, 0.35);--cbp-shadow-level-3-up:0px -5px 10px 2px rgba(0, 0, 0, 0.35);--cbp-shadow-level-3-down:0px 5px 10px 2px rgba(0, 0, 0, 0.35);--cbp-shadow-level-3-right:5px 0px 10px 2px rgba(0, 0, 0, 0.35);--cbp-shadow-level-3-left:-5px 0px 10px 2px rgba(0, 0, 0, 0.35);--cbp-shadow-level-4-center:0px 0px 18px 2px rgba(0, 0, 0, 0.3);--cbp-shadow-level-4-up:0px -7px 18px 2px rgba(0, 0, 0, 0.3);--cbp-shadow-level-4-down:0px 7px 18px 2px rgba(0, 0, 0, 0.3);--cbp-shadow-level-4-right:7px 0px 18px 2px rgba(0, 0, 0, 0.3);--cbp-shadow-level-4-left:-7px 0px 18px 2px rgba(0, 0, 0, 0.3);--cbp-shadow-level-5-center:0px 0px 22px 3px rgba(0, 0, 0, 0.25);--cbp-shadow-level-5-up:0px -10px 22px 3px rgba(0, 0, 0, 0.25);--cbp-shadow-level-5-down:0px 10px 22px 3px rgba(0, 0, 0, 0.25);--cbp-shadow-level-5-right:10px 0px 22px 3px rgba(0, 0, 0, 0.25);--cbp-shadow-level-5-left:-10px 0px 22px 3px rgba(0, 0, 0, 0.25);--cbp-z-index-level-0:1;--cbp-z-index-level-1:100;--cbp-z-index-level-2:200;--cbp-z-index-level-3:300;--cbp-z-index-level-4:400;--cbp-z-index-level-top:999;--cbp-space-half-x:.125rem;--cbp-space-1x:.25rem;--cbp-space-2x:.5rem;--cbp-space-3x:.75rem;--cbp-space-4x:1rem;--cbp-space-5x:1.25rem;--cbp-space-6x:1.5rem;--cbp-space-7x:1.75rem;--cbp-space-8x:2rem;--cbp-space-9x:2.25rem;--cbp-space-10x:2.5rem;--cbp-space-11x:2.75rem;--cbp-space-12x:3rem;--cbp-space-13x:3.25rem;--cbp-space-14x:3.5rem;--cbp-space-15x:3.75rem;--cbp-space-16x:4rem;--cbp-font-family-roboto:\"Roboto\", Calibri, Tahoma, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, \"Apple color emoji\", \"Segoe UI Emoji\", \"Segoe Ui Symbol\", sans-serif;--cbp-font-family-roboto-mono:\"Roboto-mono\", \"Roboto Mono Web\", Consolas, \"Bitstream Vera Sans Mono\", Courier, monospace;--cbp-font-size-masthead-1:2.280rem;--cbp-font-size-masthead-2:2.027rem;--cbp-font-size-heading-xxl:1.802rem;--cbp-font-size-heading-xl:1.602rem;--cbp-font-size-heading-lg:1.424rem;--cbp-font-size-heading-md:1.266rem;--cbp-font-size-heading-sm:1.125rem;--cbp-font-size-heading-xs:1rem;--cbp-font-size-body:0.875rem;--cbp-font-size-button:0.875rem;--cbp-font-size-subhead:0.75rem;--cbp-font-weight-black:900;--cbp-font-weight-bold:700;--cbp-font-weight-medium:500;--cbp-font-weight-regular:400;--cbp-font-weight-light:300;--cbp-font-weight-thin:100;--cbp-letter-spacing-loosest:0.2em;--cbp-letter-spacing-loose:0.12em;--cbp-letter-spacing-regular:auto;--cbp-line-height-xs:1.25rem;--cbp-line-height-sm:1.5rem;--cbp-line-height-md:1.75rem;--cbp-line-height-lg:2rem;--cbp-line-height-xl:2.25rem;--cbp-line-height-xxl:2.5rem;--cbp-line-height-xxxl:2.75rem;--cbp-line-length-shortest:44ch;--cbp-line-length-short:60ch;--cbp-line-length-medium:64ch;--cbp-line-length-long:68ch;--cbp-line-length-longer:72ch;--cbp-line-length-longest:88ch;--cbp-color-branding-cbp-light:var(--cbp-color-gray-cool-3);--cbp-color-branding-cbp-dark:var(--cbp-color-gray-cool-80);--cbp-color-info-lighter:var(--cbp-color-blue-cool-10);--cbp-color-info-light:var(--cbp-color-blue-cool-30);--cbp-color-info-base:var(--cbp-color-blue-cool-50);--cbp-color-info-dark:var(--cbp-color-blue-cool-60);--cbp-color-info-darker:var(--cbp-color-blue-cool-70);--cbp-color-success-lighter:var(--cbp-color-green-10);--cbp-color-success-light:var(--cbp-color-green-30);--cbp-color-success-base:var(--cbp-color-green-50);--cbp-color-success-dark:var(--cbp-color-green-60);--cbp-color-success-darker:var(--cbp-color-green-70);--cbp-color-warning-lighter:var(--cbp-color-gold-5);--cbp-color-warning-light:var(--cbp-color-gold-10);--cbp-color-warning-base:var(--cbp-color-gold-20);--cbp-color-warning-dark:var(--cbp-color-gold-30);--cbp-color-warning-darker:var(--cbp-color-gold-50);--cbp-color-danger-lighter:var(--cbp-color-red-10);--cbp-color-danger-light:var(--cbp-color-red-30);--cbp-color-danger-base:var(--cbp-color-red-50);--cbp-color-danger-dark:var(--cbp-color-red-60);--cbp-color-danger-darker:var(--cbp-color-red-70);--cbp-color-text-lightest:var(--cbp-color-gray-1);--cbp-color-text-lighter:var(--cbp-color-gray-5);--cbp-color-text-light:var(--cbp-color-gray-20);--cbp-color-text-base:var(--cbp-color-gray-30);--cbp-color-text-dark:var(--cbp-color-gray-50);--cbp-color-text-darker:var(--cbp-color-gray-70);--cbp-color-text-darkest:var(--cbp-color-gray-90);--cbp-color-highlight:var(--cbp-color-yellow-20);--cbp-color-background-light:var(--cbp-color-gray-cool-3);--cbp-color-background-dark:var(--cbp-color-gray-cool-80);--cbp-color-base-primary-lighter:var(--cbp-color-blue-cool-10);--cbp-color-base-primary-light:var(--cbp-color-blue-cool-30);--cbp-color-base-primary-base:var(--cbp-color-blue-cool-50);--cbp-color-base-primary-dark:var(--cbp-color-blue-cool-60);--cbp-color-base-primary-darker:var(--cbp-color-blue-cool-70);--cbp-color-base-secondary-lighter:var(--cbp-color-mint-cool-10);--cbp-color-base-secondary-light:var(--cbp-color-mint-cool-30);--cbp-color-base-secondary-base:var(--cbp-color-mint-cool-50);--cbp-color-base-secondary-dark:var(--cbp-color-mint-cool-60);--cbp-color-base-secondary-darker:var(--cbp-color-mint-cool-70);--cbp-color-base-neutral-lightest:var(--cbp-color-gray-cool-4);--cbp-color-base-neutral-lighter:var(--cbp-color-gray-cool-10);--cbp-color-base-neutral-light:var(--cbp-color-gray-cool-30);--cbp-color-base-neutral-base:var(--cbp-color-gray-cool-50);--cbp-color-base-neutral-dark:var(--cbp-color-gray-cool-60);--cbp-color-base-neutral-darker:var(--cbp-color-gray-cool-80);--cbp-color-base-neutral-darkest:var(--cbp-color-gray-cool-90);--cbp-color-interactive-primary-lighter:var(--cbp-color-blue-10);--cbp-color-interactive-primary-light:var(--cbp-color-blue-30);--cbp-color-interactive-primary-base:var(--cbp-color-blue-50);--cbp-color-interactive-primary-dark:var(--cbp-color-blue-60);--cbp-color-interactive-primary-darker:var(--cbp-color-blue-70);--cbp-color-interactive-secondary-lighter:var(--cbp-color-gray-warm-10);--cbp-color-interactive-secondary-light:var(--cbp-color-gray-warm-30);--cbp-color-interactive-secondary-base:var(--cbp-color-gray-warm-50);--cbp-color-interactive-secondary-dark:var(--cbp-color-gray-warm-60);--cbp-color-interactive-secondary-darker:var(--cbp-color-gray-warm-70);--cbp-color-interactive-active-light:var(--cbp-color-blue-warm-10);--cbp-color-interactive-active-dark:var(--cbp-color-blue-warm-80);--cbp-color-interactive-disabled-light:var(--cbp-color-gray-10);--cbp-color-interactive-disabled-dark:var(--cbp-color-gray-40);--cbp-color-interactive-focus-light:var(--cbp-color-blue-20);--cbp-color-interactive-focus-dark:var(--cbp-color-blue-warm-70);--cbp-color-interactive-selected-light:var(--cbp-color-blue-warm-20);--cbp-color-interactive-selected-dark:var(--cbp-color-blue-warm-60);--cbp-color-interactive-visited-light:var(--cbp-color-blue-cool-20);--cbp-color-interactive-visited-dark:var(--cbp-color-blue-cool-70)}";
const CbpAppStyle1 = cssVariablesCss;
const coreCss = ":root{color-scheme:light;--cbp-app-color-scheme:light;--cbp-color-body-text:var(--cbp-color-text-darkest);--cbp-color-body-background:var(--cbp-color-branding-cbp-light);--cbp-responsive-spacing-outer:var(--cbp-space-5x);--cbp-responsive-spacing-inner:var(--cbp-responsive-spacing-outer);--cbp-responsive-spacing-gap:var(--cbp-space-4x)}@media (min-width: 37.5em){:root{--cbp-responsive-spacing-outer:var(--cbp-space-8x);--cbp-responsive-spacing-gap:var(--cbp-space-7x)}}@media (min-width: 90em){:root{--cbp-responsive-spacing-outer:var(--cbp-space-11x)}}[data-cbp-theme=light]{color-scheme:light;--cbp-app-color-scheme:light}[data-cbp-theme=dark]{color-scheme:dark;--cbp-app-color-scheme:dark;--cbp-color-body-text:var(--cbp-color-text-lightest);--cbp-color-body-background:var(--cbp-color-branding-cbp-dark)}html{font-size:100%}body{color:var(--cbp-color-body-text);background-color:var(--cbp-color-body-background);font:var(--cbp-font-size-body)/1rem var(--cbp-font-family-roboto)}*{scroll-margin-block:var(--cbp-space-15x)}h1,h2,h3,h4,h5,h6{line-height:normal}p,blockquote{margin-bottom:var(--cbp-space-4x)}p{line-height:1.25rem}mark,::highlight{color:var(--cbp-color-text-darkest);background-color:var(--cbp-color-highlight)}hr{border:none;height:1px;background-color:var(--cbp-color-body-text)}a[href],button{cursor:pointer}[aria-disabled=true],:disabled,input:read-only:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color]),textarea:read-only{cursor:not-allowed}[hidden]{display:none !important}";
const CbpAppStyle2 = coreCss;
const cbpAppCss = "cbp-app{display:block;position:relative;width:100%;min-height:100vh;color:var(--cbp-color-body-text);background-color:var(--cbp-color-body-background)}cbp-app[data-cbp-theme=dark]{--cbp-color-body-text:var(--cbp-color-text-lightest);--cbp-color-body-background:var(--cbp-color-branding-cbp-dark)}cbp-app:has(cbp-action-bar[variant=floating]){padding-block-end:var(--cbp-space-14x)}";
const CbpAppStyle3 = cbpAppCss;
const CbpApp = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.theme = "system";
this.debug = undefined;
this.appName = undefined;
this.appVersion = undefined;
}
handleThemeChange(mql) {
this.theme = mql.matches ? "dark" : "light";
}
componentDidLoad() {
const darkMode = window === null || window === void 0 ? void 0 : window.matchMedia(`(prefers-color-scheme: dark)`);
if (this.theme == "system") {
darkMode.addEventListener('change', mql => this.handleThemeChange(mql));
this.handleThemeChange(darkMode);
}
}
render() {
if (this.debug) {
let debugInfo = `DEBUGGING INFO:\n===============\n`;
if (this.appName)
debugInfo += `Application name: ${this.appName}\n`;
if (this.appVersion)
debugInfo += `Application version: ${this.appVersion}\n`;
debugInfo += `CBP Design System version: ${Env.version}\n`;
debugInfo += `Built with StencilJS: ${Env.stencil}`;
console.log(debugInfo);
}
return (h(Host, { key: '60046c1c1573c1222c9c83c532a253365ce888c1', "data-cbp-theme": this.theme }, h("slot", { key: 'b45b0471cab4f20e894ad8b024dfc31481b77ee3' })));
}
};
CbpApp.style = CbpAppStyle0 + (CbpAppStyle1 + (CbpAppStyle2 + CbpAppStyle3));
export { CbpApp as cbp_app };
//# sourceMappingURL=cbp-app.entry.js.map