@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/esm/pn-action-menu.entry.js

@@ -2,8 +2,8 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
-import { a as animateHeightFactory } from './index-CosyroON.js';
+import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
+import { a as animateHeightFactory } from './index-DyhO6xPY.js';
 import { uuidv4, awaitTopbar, en, isSmallScreen, getTotalHeightOffset, getMenuWidth, ripple } from './index.js';
 import { c as chevron_down } from './chevron_down-DrYFvs2M.js';
 import { c as chevron_right, a as chevron_left } from './chevron_right-B6SVpr61.js';
@@ -19,15 +19,15 @@ const translations = {
     },
 };
 
-const pnActionMenuCss = () => `${transformTag("pn-action-menu")}{--pn-menu-height:unset;display:inline-block;position:relative}${transformTag("pn-action-menu")} .pn-action-menu{position:relative}${transformTag("pn-action-menu")} .pn-action-menu-container{--pn-action-menu-offset:0;scroll-behavior:smooth;list-style:none;text-align:left;position:absolute;z-index:100;top:calc(100% + 0.5em);left:var(--pn-action-menu-offset);right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;margin:0;padding:0;width:16em;visibility:hidden;overflow:hidden}${transformTag("pn-action-menu")} .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-action-menu")} .pn-action-menu-container[data-left]{right:0;left:unset}${transformTag("pn-action-menu")} .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}${transformTag("pn-action-menu")} .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}${transformTag("pn-action-menu")} .pn-action-menu-container{}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{border-radius:0.5em;visibility:hidden;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-delay:0.2s}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub{left:0;height:100%;box-shadow:unset;transform:translateX(0);visibility:hidden}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-corner,${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-button{display:none}${transformTag("pn-action-menu")} .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-corner,${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-button{display:none}${transformTag("pn-action-menu")} .pn-action-menu-group{margin:0;padding:0;list-style:none}${transformTag("pn-action-menu")} .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}${transformTag("pn-action-menu")} .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}${transformTag("pn-action-menu")} .pn-action-menu-sub{z-index:110;position:absolute;top:0;width:100%;min-width:12em;margin:0;padding:0;list-style:none;background:#ffffff;border-radius:0.5em;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);transform:translateX(-0.5em);opacity:0;visibility:hidden}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-corner,${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-button{display:none}${transformTag("pn-action-menu")} .pn-action-menu-sub{transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-sub{transition-delay:0s, 0s, 0.2s}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-open=false]{pointer-events:none}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=left]{left:-100%}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=center]{left:0}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=right]{left:100%}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-y=bottom]{top:0}${transformTag("pn-action-menu")} .pn-action-menu-item{position:relative}${transformTag("pn-action-menu")} .pn-action-menu-item:first-child>.pn-action-menu-item-content>.pn-action-menu-button{border-top-left-radius:0.5em;border-top-right-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-item:last-child>.pn-action-menu-item-content>.pn-action-menu-button{border-bottom-right-radius:0.5em;border-bottom-left-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}${transformTag("pn-action-menu")} .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}${transformTag("pn-action-menu")} .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}${transformTag("pn-action-menu")} .pn-action-menu-item-content{display:flex;align-items:center;flex-direction:row;flex:1 1 100%;gap:0.5em;position:relative}${transformTag("pn-action-menu")} .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}${transformTag("pn-action-menu")} .pn-action-menu-item-content>${transformTag("pn-icon")}{padding:0 0.25em}${transformTag("pn-action-menu")} .pn-action-menu-item[data-group],${transformTag("pn-action-menu")} .pn-action-menu-item[data-sub]{flex-direction:column}${transformTag("pn-action-menu")} .pn-action-menu-button{cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:0.75em 1em;border:0;width:100%;text-align:left;text-decoration-color:transparent;overflow:hidden;display:flex;align-items:center;flex:1 1 100%;gap:0.5em;font-size:1em;min-height:1.5em;background-color:#ffffff;transition-property:background-color, color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#0d234b;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-action-menu")} .pn-action-menu-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-action-menu")} .pn-action-menu-button:focus-visible{outline-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-button{outline-offset:-0.2rem}${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")} .pn-icon-svg>path{transform-origin:center;transform:rotate(0deg);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")} .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")}[data-suffix][data-active]>.pn-icon-svg>path{transform:rotate(180deg)}${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")}:last-child{margin-left:auto}${transformTag("pn-action-menu")} .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-button:hover{background-color:#effbff}${transformTag("pn-action-menu")} .pn-action-menu-button:focus{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-button[href]:hover,${transformTag("pn-action-menu")} .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-button{}${transformTag("pn-action-menu")} .pn-action-menu-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;margin-left:auto;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-delay:0s}${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}${transformTag("pn-action-menu")} .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}${transformTag("pn-action-menu")} .pn-action-menu-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-radio-inner{transform:scale(0);height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-input{position:absolute;z-index:10;cursor:pointer;height:100%;width:100%;top:0;left:0;margin:0;opacity:0;-webkit-tap-highlight-color:transparent}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox polyline.pn-action-menu-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-input:checked:hover{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled{pointer-events:none}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}${transformTag("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-radio .pn-action-menu-radio-outer{outline-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-p{margin:0}${transformTag("pn-action-menu")} .pn-action-menu>${transformTag("pn-button")}[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}${transformTag("pn-action-menu")} .pn-action-menu>${transformTag("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transform:rotate(0deg);transition-delay:0.2s;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu>${transformTag("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}`;
+const pnActionMenuCss = () => `${transformTag("pn-action-menu")}{--pn-menu-height:unset;display:inline-block;position:relative}${transformTag("pn-action-menu")} .pn-action-menu{position:relative}${transformTag("pn-action-menu")} .pn-action-menu-container{--pn-action-menu-offset:0;scroll-behavior:smooth;list-style:none;text-align:left;position:absolute;z-index:100;top:calc(100% + 0.5em);left:var(--pn-action-menu-offset);right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;margin:0;padding:0;width:16em;visibility:hidden;overflow:hidden}${transformTag("pn-action-menu")} .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-action-menu")} .pn-action-menu-container[data-left]{right:0;left:unset}${transformTag("pn-action-menu")} .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}${transformTag("pn-action-menu")} .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}${transformTag("pn-action-menu")} .pn-action-menu-container{}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{border-radius:0.5em;visibility:hidden;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-delay:0.2s}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub{left:0;height:100%;box-shadow:unset;transform:translateX(0);visibility:hidden}${transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-corner,${transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-button{display:none}${transformTag("pn-action-menu")} .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-corner,${transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-button{display:none}${transformTag("pn-action-menu")} .pn-action-menu-group{margin:0;padding:0;list-style:none}${transformTag("pn-action-menu")} .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}${transformTag("pn-action-menu")} .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}${transformTag("pn-action-menu")} .pn-action-menu-sub{z-index:110;position:absolute;top:0;width:100%;min-width:12em;margin:0;padding:0;list-style:none;background:#ffffff;border-radius:0.5em;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);transform:translateX(-0.5em);opacity:0;visibility:hidden}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-corner,${transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-button{display:none}${transformTag("pn-action-menu")} .pn-action-menu-sub{transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-sub{transition-delay:0s, 0s, 0.2s}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-open=false]{pointer-events:none}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=left]{left:-100%}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=center]{left:0}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=right]{left:100%}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}${transformTag("pn-action-menu")} .pn-action-menu-sub[data-y=bottom]{top:0}${transformTag("pn-action-menu")} .pn-action-menu-item{position:relative}${transformTag("pn-action-menu")} .pn-action-menu-item:first-child>.pn-action-menu-item-content>.pn-action-menu-button{border-top-left-radius:0.5em;border-top-right-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-item:last-child>.pn-action-menu-item-content>.pn-action-menu-button{border-bottom-right-radius:0.5em;border-bottom-left-radius:0.5em}${transformTag("pn-action-menu")} .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}${transformTag("pn-action-menu")} .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}${transformTag("pn-action-menu")} .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}${transformTag("pn-action-menu")} .pn-action-menu-item-content{display:flex;align-items:center;flex-direction:row;flex:1 1 100%;gap:0.5em;position:relative}${transformTag("pn-action-menu")} .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}${transformTag("pn-action-menu")} .pn-action-menu-item-content>${transformTag("pn-icon")}{padding:0 0.25em}${transformTag("pn-action-menu")} .pn-action-menu-item[data-group],${transformTag("pn-action-menu")} .pn-action-menu-item[data-sub]{flex-direction:column}${transformTag("pn-action-menu")} .pn-action-menu-button{cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:0.75em 1em;border:0;width:100%;text-align:left;text-decoration-color:transparent;overflow:hidden;display:flex;align-items:center;flex:1 1 100%;gap:0.5em;font-size:1em;min-height:1.5em;background-color:#ffffff;transition-property:background-color, color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#0d234b;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-action-menu")} .pn-action-menu-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-action-menu")} .pn-action-menu-button:focus-visible{outline-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-button{outline-offset:-0.2rem}${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")} .pn-icon-svg>path{transform-origin:center;transform:rotate(0deg)}${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")}[data-suffix][data-active] .pn-icon-svg>path{transform:rotate(180deg)}${transformTag("pn-action-menu")} .pn-action-menu-button>${transformTag("pn-icon")}:last-child{margin-left:auto}${transformTag("pn-action-menu")} .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-button:hover{background-color:#effbff}${transformTag("pn-action-menu")} .pn-action-menu-button:focus{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-button[href]:hover,${transformTag("pn-action-menu")} .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-button{}${transformTag("pn-action-menu")} .pn-action-menu-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;margin-left:auto;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-delay:0s}${transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}${transformTag("pn-action-menu")} .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}${transformTag("pn-action-menu")} .pn-action-menu-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-radio-inner{transform:scale(0);height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}${transformTag("pn-action-menu")} .pn-action-menu-input{position:absolute;z-index:10;cursor:pointer;height:100%;width:100%;top:0;left:0;margin:0;opacity:0;-webkit-tap-highlight-color:transparent}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox polyline.pn-action-menu-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-input:checked:hover{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled{pointer-events:none}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}${transformTag("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}${transformTag("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,${transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-radio .pn-action-menu-radio-outer{outline-color:#005d92}${transformTag("pn-action-menu")} .pn-action-menu-p{margin:0}${transformTag("pn-action-menu")} .pn-action-menu>${transformTag("pn-button")}[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}${transformTag("pn-action-menu")} .pn-action-menu>${transformTag("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transform:rotate(0deg);transition-delay:0.2s;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-action-menu")} .pn-action-menu>${transformTag("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}`;
 
 const PnActionMenu = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.menuToggle = createEvent(this, "menuToggle");
-        this.menuVisible = createEvent(this, "menuVisible");
-        this.menuOption = createEvent(this, "menuOption");
+        this.menuToggle = createEvent(this, "menuToggle", 7);
+        this.menuVisible = createEvent(this, "menuVisible", 7);
+        this.menuOption = createEvent(this, "menuOption", 7);
     }
     id = `pn-action-menu-${uuidv4()}`;
     menuButtonId = `${this.id}-button`;

package/umd/modules/@postnord/web-components/esm/pn-button-dropdown.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
 
 const pnButtonDropdownCss = () => `${transformTag("pn-button-dropdown")}{display:inline-block;position:relative}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container{z-index:10;position:absolute;top:130%;left:0;background-color:#ffffff;border-radius:1em;box-shadow:0 0.125em 1em rgba(0, 0, 0, 0.2);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;transform:scale(0);transform-origin:top left;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button-dropdown")} .pn-button-dropdown-container{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container{transition-delay:0.2s}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container[data-right]{left:unset;right:0;transform-origin:top right}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container[data-top]{top:unset;bottom:130%;transform-origin:bottom left}${transformTag("pn-button-dropdown")} .pn-button-dropdown-content{position:relative;padding:1em;opacity:0;width:max-content;max-width:100%;visibility:hidden;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button-dropdown")} .pn-button-dropdown-content{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button-dropdown")} .pn-button-dropdown-content{transition-delay:0s, 0.2s}${transformTag("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-container{transition-delay:0s}${transformTag("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-content{opacity:1;visibility:visible}`;

package/umd/modules/@postnord/web-components/esm/pn-button_2.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { ripple } from './index.js';
 
 const pnButtonCss = () => `${transformTag("pn-button")}{display:inline-block}${transformTag("pn-button")} .pn-button{position:relative;cursor:pointer;padding:0.75em 1.5em;width:round(up, 100%, 1px);min-height:3em;min-width:5.5em;border:none;border-radius:3em;font-family:inherit;font-size:1em;font-weight:500;color:#ffffff;background-color:transparent;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:1.5em;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button")} .pn-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button")} .pn-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-button")} .pn-button:focus-visible{outline-color:#005d92}${transformTag("pn-button")} .pn-button:disabled,${transformTag("pn-button")} .pn-button[aria-disabled]{cursor:auto;pointer-events:none}${transformTag("pn-button")} .pn-button-content{z-index:2;display:flex;justify-content:center;align-items:center;gap:0.5em;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button")} .pn-button-content{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button")} .pn-button-content{transition-delay:0.2s}${transformTag("pn-button")} .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;transform:translateX(-50%) translateY(0);border-radius:3em;border:none;background-color:#005d92;overflow:hidden;transition-property:width, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button")} .pn-button-bg{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button")} .pn-button-bg{transition-delay:0.2s, 0s, 0s}${transformTag("pn-button")} .pn-button-bg::after{content:"";position:absolute;will-change:transform;width:100%;height:100%;background-color:#0d234b;border-radius:inherit;left:0;transform:translateX(-103%);opacity:0.5;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button")} .pn-button-bg::after{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button")} .pn-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#ffffff;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-button")} .pn-button-tooltip{z-index:5;position:absolute;top:calc(100% + 0.35em);left:50%;pointer-events:none;color:#ffffff;background-color:#0d234b;box-shadow:0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);padding:0.25em 0.75em;border-radius:inherit;max-width:min(95vw, 40em);transform:translateX(-50%) translateX(var(--pn-dx));width:max-content;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button")} .pn-button-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button")} .pn-button-tooltip-text{font-size:0.875em;font-weight:300}${transformTag("pn-button")} .pn-button ${transformTag("pn-icon")}{flex-shrink:0}${transformTag("pn-button")} .pn-button ${transformTag("pn-icon")} .pn-icon-svg path{fill:#ffffff}${transformTag("pn-button")} .pn-button ${transformTag("pn-spinner")}{position:absolute;transform:scale(0)}${transformTag("pn-button")} .pn-button:hover .pn-button-bg:after,${transformTag("pn-button")} .pn-button:focus .pn-button-bg:after{transform:translateX(0)}${transformTag("pn-button")} .pn-button[data-appearance=light]{color:#005d92}${transformTag("pn-button")} .pn-button[data-appearance=light] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#005d92}${transformTag("pn-button")} .pn-button[data-appearance=light] ${transformTag("pn-spinner")} .pn-spinner-circle{stroke:#005d92}${transformTag("pn-button")} .pn-button[data-appearance=light] ${transformTag("pn-spinner")} .pn-spinner-dot{fill:#005d92}${transformTag("pn-button")} .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}${transformTag("pn-button")} .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}${transformTag("pn-button")} .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}${transformTag("pn-button")} .pn-button[data-appearance=warning]{color:#a70707}${transformTag("pn-button")} .pn-button[data-appearance=warning] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#a70707}${transformTag("pn-button")} .pn-button[data-appearance=warning] ${transformTag("pn-spinner")} .pn-spinner-circle{stroke:#a70707}${transformTag("pn-button")} .pn-button[data-appearance=warning] ${transformTag("pn-spinner")} .pn-spinner-dot{fill:#a70707}${transformTag("pn-button")} .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}${transformTag("pn-button")} .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${transformTag("pn-button")} .pn-button[data-appearance=warning]:hover,${transformTag("pn-button")} .pn-button[data-appearance=warning]:focus{color:#ffffff}${transformTag("pn-button")} .pn-button[data-appearance=warning]:hover ${transformTag("pn-icon")} .pn-icon-svg path,${transformTag("pn-button")} .pn-button[data-appearance=warning]:focus ${transformTag("pn-icon")} .pn-icon-svg path{fill:#ffffff}${transformTag("pn-button")} .pn-button[data-appearance=warning]:hover ${transformTag("pn-spinner")} .pn-spinner-circle,${transformTag("pn-button")} .pn-button[data-appearance=warning]:focus ${transformTag("pn-spinner")} .pn-spinner-circle{stroke:#ffffff}${transformTag("pn-button")} .pn-button[data-appearance=warning]:hover ${transformTag("pn-spinner")} .pn-spinner-dot,${transformTag("pn-button")} .pn-button[data-appearance=warning]:focus ${transformTag("pn-spinner")} .pn-spinner-dot{fill:#ffffff}${transformTag("pn-button")} .pn-button[data-appearance=warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-button")} .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}${transformTag("pn-button")} .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}${transformTag("pn-button")} .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}${transformTag("pn-button")} .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}${transformTag("pn-button")} .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${transformTag("pn-button")} .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}${transformTag("pn-button")} .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}${transformTag("pn-button")} .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}${transformTag("pn-button")} .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}${transformTag("pn-button")} .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}${transformTag("pn-button")} .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${transformTag("pn-button")} .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}${transformTag("pn-button")} .pn-button[data-icon-only]{width:3em;min-width:0}${transformTag("pn-button")} .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}${transformTag("pn-button")} .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}${transformTag("pn-button")} .pn-button[data-small] .pn-button-content{gap:0.25em}${transformTag("pn-button")} .pn-button[data-small] .pn-button-text{font-size:0.875em}${transformTag("pn-button")} .pn-button[data-small] ${transformTag("pn-icon")} .pn-icon-svg{height:1.25em;width:1.25em}${transformTag("pn-button")} .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}${transformTag("pn-button")} .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}${transformTag("pn-button")} .pn-button[data-loading] ${transformTag("pn-spinner")}{transform:scale(1);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-button")} .pn-button[data-loading] ${transformTag("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button")} .pn-button[data-loading] ${transformTag("pn-spinner")}{transition-delay:0.2s}${transformTag("pn-button")} .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}${transformTag("pn-button")} .pn-button[data-loading] .pn-button-bg{width:3em}${transformTag("pn-button")} .pn-button[data-loading][data-small] .pn-button-bg{width:2em}`;
@@ -10,7 +10,7 @@ const pnButtonCss = () => `${transformTag("pn-button")}{display:inline-block}${t
 const PnButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pnClick = createEvent(this, "pnClick");
+        this.pnClick = createEvent(this, "pnClick", 7);
     }
     buttonEl;
     tooltipEl;
@@ -241,7 +241,7 @@ const PnSpinner = class {
         return `${this.size}em`;
     }
     render() {
-        return (h(Host, { key: 'a9ecba01b5b30a660a44439c714b7ad57cf02a88' }, h("svg", { key: '03fbe990bf1ae0402fcb27707e0c1712d8a84492', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: '5f69d1bbbf864842f9ae54dc9a29b61603a83bff', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
+        return (h(Host, { key: 'a143e0f8959099811a49a4772809bea95ac7b3c5' }, h("svg", { key: '14d49833b52a340b3b3d1a3c1dfdfb8e9c176858', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'b66d19a748cf83364f508956c9c3e1a487de96fc', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'e576947e99cd98ead97e4a49327fcce9e5811af3', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
     }
 };
 PnSpinner.style = pnSpinnerCss();

package/umd/modules/@postnord/web-components/esm/pn-card.entry.js

@@ -2,17 +2,17 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
 import { o as open_in_new } from './open_in_new-IFVOY5Gf.js';
 import { uuidv4, ripple } from './index.js';
 
-const pnCardCss = () => `${transformTag("pn-card")}{position:relative;display:block}${transformTag("pn-card")} .pn-card{position:relative;background-color:#ffffff;color:#2d2013;border-radius:0.5em;display:flex;flex-direction:column;height:100%;overflow:hidden;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-card")} .pn-card{transition-duration:0s;transition-delay:0s}}${transformTag("pn-card")} .pn-card[data-link]:hover{background-color:#e0f8ff}${transformTag("pn-card")} .pn-card[data-link][data-focus]{outline-color:#005d92}${transformTag("pn-card")} .pn-card{}${transformTag("pn-card")} .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}${transformTag("pn-card")} .pn-card[data-horizontal]{flex-direction:row}${transformTag("pn-card")} .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}${transformTag("pn-card")} .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}${transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}${transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}${transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}${transformTag("pn-card")} .pn-card[data-reverse]{flex-direction:column-reverse}${transformTag("pn-card")} .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}${transformTag("pn-card")} .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}${transformTag("pn-card")} .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}${transformTag("pn-card")} .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}${transformTag("pn-card")} .pn-card-link{display:inline-flex;align-items:center;gap:0.25em;color:#005d92;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-card")} .pn-card-link{transition-duration:0s;transition-delay:0s}}${transformTag("pn-card")} .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}${transformTag("pn-card")} .pn-card-link:hover>${transformTag("pn-icon")}>.pn-icon-svg>path{fill:#0d234b}${transformTag("pn-card")} .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}${transformTag("pn-card")} .pn-card-link:focus>${transformTag("pn-icon")}>.pn-icon-svg>path{fill:#0d234b}${transformTag("pn-card")} .pn-card-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}${transformTag("pn-card")} .pn-card-content{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1;gap:clamp(0.5em, 5vw, 0.75em);padding:clamp(0.75em, 5vw, 1.5em) clamp(0.75em, 5vw, 1.5em)}${transformTag("pn-card")} .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}${transformTag("pn-card")} .pn-card-section-paragraph,${transformTag("pn-card")} .pn-card-section p{margin:0 0 0.25em}${transformTag("pn-card")} .pn-card-section-paragraph:last-child,${transformTag("pn-card")} .pn-card-section p:last-child{margin:0em}${transformTag("pn-card")} .pn-card-navigation{margin-top:auto;padding-top:clamp(0.5em, 5vw, 0.75em);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${transformTag("pn-card")} .pn-card-navigation>${transformTag("pn-button")}{flex:1 1 12em}${transformTag("pn-card")} .pn-card-navigation:empty{display:none}${transformTag("pn-card")} .pn-card-image{position:relative;display:flex;flex-direction:column}${transformTag("pn-card")} .pn-card-picture{margin:0;padding:0;display:block;overflow:hidden;clip-path:ellipse(175% 100% at top center);aspect-ratio:var(--pn-card-aspect-ratio)}${transformTag("pn-card")} .pn-card-picture:empty{display:none}${transformTag("pn-card")} .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${transformTag("pn-card")} .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${transformTag("pn-card")} .pn-card-tags:empty{display:none}${transformTag("pn-card")} .pn-card>.pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}`;
+const pnCardCss = () => `${transformTag("pn-card")}{position:relative;display:block}${transformTag("pn-card")} .pn-card{position:relative;background-color:#ffffff;color:#2d2013;border-radius:0.5em;display:flex;flex-direction:column;height:100%;overflow:hidden;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-card")} .pn-card{transition-duration:0s;transition-delay:0s}}${transformTag("pn-card")} .pn-card[data-link]:hover{background-color:#e0f8ff}${transformTag("pn-card")} .pn-card[data-link][data-focus]{outline-color:#005d92}${transformTag("pn-card")} .pn-card{}${transformTag("pn-card")} .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}${transformTag("pn-card")} .pn-card[data-horizontal]{flex-direction:row}${transformTag("pn-card")} .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}${transformTag("pn-card")} .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}${transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}${transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}${transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}${transformTag("pn-card")} .pn-card[data-reverse]{flex-direction:column-reverse}${transformTag("pn-card")} .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}${transformTag("pn-card")} .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}${transformTag("pn-card")} .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}${transformTag("pn-card")} .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}${transformTag("pn-card")} .pn-card-link{display:inline-flex;align-items:center;gap:0.25em;color:#005d92;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-card")} .pn-card-link{transition-duration:0s;transition-delay:0s}}${transformTag("pn-card")} .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}${transformTag("pn-card")} .pn-card-link:hover>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#0d234b}${transformTag("pn-card")} .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}${transformTag("pn-card")} .pn-card-link:focus>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#0d234b}${transformTag("pn-card")} .pn-card-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}${transformTag("pn-card")} .pn-card-content{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1;gap:clamp(0.5em, 5vw, 0.75em);padding:clamp(0.75em, 5vw, 1.5em) clamp(0.75em, 5vw, 1.5em)}${transformTag("pn-card")} .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}${transformTag("pn-card")} .pn-card-section-paragraph,${transformTag("pn-card")} .pn-card-section p{margin:0 0 0.25em}${transformTag("pn-card")} .pn-card-section-paragraph:last-child,${transformTag("pn-card")} .pn-card-section p:last-child{margin:0em}${transformTag("pn-card")} .pn-card-navigation{margin-top:auto;padding-top:clamp(0.5em, 5vw, 0.75em);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${transformTag("pn-card")} .pn-card-navigation>${transformTag("pn-button")}{flex:1 1 12em}${transformTag("pn-card")} .pn-card-navigation:empty{display:none}${transformTag("pn-card")} .pn-card-image{position:relative;display:flex;flex-direction:column}${transformTag("pn-card")} .pn-card-picture{margin:0;padding:0;display:block;overflow:hidden;clip-path:ellipse(175% 100% at top center);aspect-ratio:var(--pn-card-aspect-ratio)}${transformTag("pn-card")} .pn-card-picture:empty{display:none}${transformTag("pn-card")} .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${transformTag("pn-card")} .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${transformTag("pn-card")} .pn-card-tags:empty{display:none}${transformTag("pn-card")} .pn-card>.pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}`;
 
 const PnCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pnCard = createEvent(this, "pnCard");
+        this.pnCard = createEvent(this, "pnCard", 7);
     }
     id = `pn-card-${uuidv4()}`;
     idTitle = `${this.id}-title`;
@@ -93,7 +93,7 @@ const PnCard = class {
     }
     render() {
         const TitleTag = this.getHeadingTag();
-        return (h(Host, { key: '66bfbab30790857e909606b687989d845eef9c42' }, h("article", { key: 'eb3d30790de5f65da87dc40731b81fb9120c88db', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '626daade06dd8b45c47e58cd5fbcef0322e3398f', class: "pn-card-image" }, h("picture", { key: '5f0539bf93afe3a8070c4e31bcabcd6e09f6cd5b', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'ead1ab12ad886e48daf022a26afc0deb29998d9e', name: "image" }))), h("div", { key: '79b1e1dcf658daf770ef2038770ad36d827d61fb', class: "pn-card-content" }, h("header", { key: '9b122547f47bace150f3dd17ccbe0ffe17a499b7', class: "pn-card-header" }, h("div", { key: 'eff03ae597d4d47ec6ef78634b9f1e3b3c65d420', class: "pn-card-tags" }, h("slot", { key: 'bce8ed2e135c2f7575923678477c278c82b26664', name: "tags" })), !!this.overline && h("p", { key: '4c5012ffa0d5e4054be3dc99fea4fd3d2d2e4383', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'a1a2a9ce01834943f3909a95dd4ac9c12c62fcc5', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '7e231155db5155d5d4a5a272f845c6822235bb54', name: "header" })), h("section", { key: '118b273cd31a00de1fd16ee297bb206a33e7f977', class: "pn-card-section" }, !!this.text && h("p", { key: '66addec056571f3b511718cc8a4a60f64c3ac62b', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'f9ec7149a4e48f59143b81470677be0b24791c8e' })), h("nav", { key: 'bb0ea19f4db135fd1b32496e167b67358df6ada8', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '182c9afcbb00b56c16b53ad15f12449e5feaf11a', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '50ed52dbc3fd815c9d7b37542ad566a607e43da3', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '6204a8a4944a85d522b4522352f67e73bc52792a', name: "navigation" }))))));
+        return (h(Host, { key: '8126385831d763637aed6ebe4fa61fd0bdb42764' }, h("article", { key: '93c75dc2d9e71844e36a9cdd6914f42eae34f7b0', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '140936bb72867a5ef4351363dfda52698b9d9df0', class: "pn-card-image" }, h("picture", { key: '60de2f3f53b4d7f1e1cbe37b1ff47686c9e48b72', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: '47cffafc0d642f6cf0c682cd96f9fd11609f924e', name: "image" }))), h("div", { key: '6768342177fe3884d9bd20b0ca516cf026b69751', class: "pn-card-content" }, h("header", { key: '91e023c92c33bf74c39200387edc7a3d3c2f2d42', class: "pn-card-header" }, h("div", { key: '9d7771c4275569012021a07f9165ba4a8ce8c297', class: "pn-card-tags" }, h("slot", { key: 'c45641bd02093f8001dee361b6b8577a383f72ba', name: "tags" })), !!this.overline && h("p", { key: 'b152b16d2488e82556e9f56f90daf0edfe8ae33f', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: '3bc086490090afc05ad44c0e1736009b82fbe814', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '1188ca2c3260dd509811cfb5aa5356488f211e1a', name: "header" })), h("section", { key: 'ba0b7362ddd721041466ac979ba198170b016fb1', class: "pn-card-section" }, !!this.text && h("p", { key: '76aa9e90ac18ff66ec15a436ec8eec9e22c67748', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'bd0f035ce418425c1ac1871ec1cb98f850cd97e1' })), h("nav", { key: '1a538e55ed6c9c07f3f8c5dd823f80ed3a149ed6', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: 'a18605058f0dc733ceeeab9fa6a44fb524c93630', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '066242008cd49a69d64db93da7a87bbdcdd1beda', color: "blue700", icon: this.getIcon() }))), h("slot", { key: 'bbe0271663622b8adf542232daa573a467b34f16', name: "navigation" }))))));
     }
     static get watchers() { return {
         "cardId": [{

package/umd/modules/@postnord/web-components/esm/pn-checkbox.entry.js

@@ -2,40 +2,45 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, M as Mixin, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
-import { a as animateHeightFactory } from './index-CosyroON.js';
+import { a as animateHeightFactory } from './index-DyhO6xPY.js';
 
-const pnCheckboxCss = () => `${transformTag("pn-checkbox")}{position:relative;display:inline-block}${transformTag("pn-checkbox")} .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${transformTag("pn-checkbox")} .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${transformTag("pn-checkbox")} .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}${transformTag("pn-checkbox")} .pn-checkbox-helpertext:last-child{margin:0}${transformTag("pn-checkbox")} .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${transformTag("pn-checkbox")} .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox-svg{width:1.25em;fill:none}${transformTag("pn-checkbox")} .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-delay:0s}${transformTag("pn-checkbox")} .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}${transformTag("pn-checkbox")} .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}${transformTag("pn-checkbox")} .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${transformTag("pn-checkbox")} .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-checkbox")} .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}${transformTag("pn-checkbox")} .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${transformTag("pn-checkbox")} .pn-checkbox>${transformTag("pn-icon")}{margin-left:0.75em}${transformTag("pn-checkbox")}>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${transformTag("pn-checkbox")}>input[data-tile]:not([data-expand]){width:100%;height:100%}${transformTag("pn-checkbox")}>input[data-expand]{top:1em;left:1em}${transformTag("pn-checkbox")}>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${transformTag("pn-checkbox")}>input:disabled{pointer-events:none}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>${transformTag("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}${transformTag("pn-checkbox")}>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}${transformTag("pn-checkbox")}>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}`;
+const pnCheckboxCss = () => `${transformTag("pn-checkbox")}{position:relative;display:inline-block}${transformTag("pn-checkbox")} .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${transformTag("pn-checkbox")} .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${transformTag("pn-checkbox")} .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0;display:flex;flex-direction:column}${transformTag("pn-checkbox")} .pn-checkbox-helpertext:last-child{margin:0}${transformTag("pn-checkbox")} .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${transformTag("pn-checkbox")} .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox-svg{width:1.25em;fill:none}${transformTag("pn-checkbox")} .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-delay:0s}${transformTag("pn-checkbox")} .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}${transformTag("pn-checkbox")} .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}${transformTag("pn-checkbox")} .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${transformTag("pn-checkbox")} .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-checkbox")} .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}${transformTag("pn-checkbox")} .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${transformTag("pn-checkbox")} .pn-checkbox>${transformTag("pn-icon")}{margin-left:0.75em}${transformTag("pn-checkbox")}>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${transformTag("pn-checkbox")}>input[data-tile]:not([data-expand]){width:100%;height:100%}${transformTag("pn-checkbox")}>input[data-expand]{top:1em;left:1em}${transformTag("pn-checkbox")}>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${transformTag("pn-checkbox")}>input:disabled{pointer-events:none}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}${transformTag("pn-checkbox")}>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}${transformTag("pn-checkbox")}>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}`;
 
 const PnCheckbox = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
+        this.pnCheckboxChange = createEvent(this, "pnCheckboxChange", 3);
     }
     id = `pn-checkbox-${uuidv4()}`;
     idHelpertext = `${this.id}-helpertext`;
     contentArea;
     get hostElement() { return getElement(this); }
-    /** The checkbox label */
+    /** The checkbox label, this is required for the checkbox to be 100% accessible out of the box. */
     label;
     /** This adds an optional helpertext under the label. */
     helpertext;
-    /** This will be emitted on change and input events. */
+    /** This will be emitted on change and input events. @category Native attributes  */
     value;
-    /** The name of the checkbox group. */
+    /** The name of the checkbox group. @category Native attributes  */
     name;
-    /** Check the checkbox. */
+    /** Programmatically check the input. @category Native attributes  */
     checked = false;
-    /** A unique HTML ID for the checkbox. */
-    checkboxid = this.id;
-    /** Set the checkbox as required. @category State */
+    /** Set the checkbox as required. @category Native attributes */
     required = false;
-    /** Disable the checkbox. @category State */
+    /** Disable the checkbox. @category Native attributes */
     disabled = false;
-    /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox. @category State */
+    /**
+     * If set to true, color scheme will turn red, indicating that there is an issue related to the checkbox.
+     * @category Native attributes
+     */
     invalid = false;
-    /** Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. @category State */
+    /**
+     * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state.
+     * @category Native attributes
+     */
     indeterminate = false;
     /**
      * Turn the checkbox into a clickable tile. A border and padding is added.
@@ -44,7 +49,7 @@ const PnCheckbox = class extends Mixin(animateHeightFactory) {
      * An exception is made when using the `tile` + `expand` props together,
      * which allows you to use interactive elements.
      *
-     * @category Tile
+     * @category Features
      */
     tile = false;
     /**
@@ -54,35 +59,62 @@ const PnCheckbox = class extends Mixin(animateHeightFactory) {
      * The prop `tile` must be used at the same time.
      * @see {@link tile}
      * @since v7.17.0
-     * @category Tile
+     * @category Features
      */
     expand = false;
     /**
      * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
      * @see {@link tile}
-     * @category Tile
+     * @category Features
      */
     icon = null;
+    /** A unique HTML ID for the checkbox. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** A unique HTML ID for the checkbox. @deprecated Use `pn-id` instead. @category HTML attributes */
+    checkboxid;
     handleId() {
-        this.idHelpertext = `${this.checkboxid}-helpertext`;
+        this.idHelpertext = `${this.getId()}-helpertext`;
     }
     handleChecked() {
         if (this.displayContent()) {
             this.checked ? this.openDropdown(this.contentArea) : this.closeDropdown(this.contentArea);
         }
     }
-    componentWillLoad() {
-        this.handleId();
-    }
+    /**
+     * This is the same as the native `change` event, but without bubbling.
+     * This is useful when you want to listen to the event directly on the `pn-checkbox` element without
+     * having to worry about catching events from nested pn-checkboxes.
+     *
+     * @since v7.25.0
+     **/
+    pnCheckboxChange;
     componentDidLoad() {
         if (this.displayContent() && this.checked) {
             requestAnimationFrame(() => this.openDropdown(this.contentArea));
         }
     }
+    getId() {
+        return this.pnId || this.checkboxid || this.id;
+    }
     handleChange(e) {
         const { checked } = e.target;
         this.indeterminate = false;
         this.checked = checked;
+        this.pnCheckboxChange.emit(e);
     }
     isInvalid() {
         return this.invalid && !this.disabled;
@@ -99,16 +131,26 @@ const PnCheckbox = class extends Mixin(animateHeightFactory) {
     displayIcon() {
         return this.tile && !!this.icon;
     }
+    /** Allow the checkbox to expand and control the slot area "content". */
     displayContent() {
         return this.tile && this.expand;
     }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     render() {
-        return (h(Host, { key: '52273e4f6d71183fa2360c147c5d2ed6fbb3d31a' }, h("input", { key: 'fba94a81a38009f36d938751c6362ed7340d68d7', type: "checkbox", id: this.checkboxid, class: "pn-checkbox-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.helpertext && this.idHelpertext, "data-tile": this.tile, "data-expand": this.expand, onChange: e => this.handleChange(e) }), h("div", { key: '850ecfd3abddccfe8b0ada1d0272dfa3155a669f', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '728efcdb0cd59f1af39839dd9fd1accc66f2da00', class: "pn-checkbox-outer" }, h("svg", { key: '55d82cc64b735706a57d301e9c8f64edc4aeebe9', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '02a30f7a2cbf5d502be29ff14945f22e89ca19c5', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '9c01a39dec7dc5d3961bffd07badf694ebdbadc1', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), h("p", { key: '0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48', class: "pn-checkbox-content", hidden: !this.displayText() }, h("label", { key: '9aeebad0076718474224594b5c17cd5e3c3590dc', htmlFor: this.checkboxid, class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '1d99d825512267e4560b817f8853319b10b05d08', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11', name: "helpertext" })), h("slot", { key: '192f09f50bd3592c41e8836c70dc264edfc3e332' })), this.displayIcon() && h("pn-icon", { key: '4ab2aaf2819ca83f08233cac99922e5234837408', icon: this.icon, color: "gray900" }), h("div", { key: '6247821b031e2d57a216612b166db6622aaa2225', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'd35445d61a6e9a7faca6ca349f56b36097a077d2', class: "pn-checkbox-area" }, h("slot", { key: '7cbcc9648ae405d6aa8729f2071c3b03a914a027', name: "content" }))))));
+        return (h(Host, { key: '4952d473c243232a6ee267cfac9414c8feb3e9c7' }, h("input", { key: 'e478ca15bde8fdf54833fe5b5a834513813db65e', type: "checkbox", id: this.getId(), class: "pn-checkbox-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.displayHelpertext() && this.idHelpertext, "aria-invalid": this.isInvalid()?.toString(), "data-tile": this.tile, "data-expand": this.expand, onChange: e => this.handleChange(e) }), h("div", { key: 'e918f05ea8a0f5e26a7963dcdbd9cef7a1ae8a57', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: 'e876cc7ae77d0496c745da65de5883404d0a01c7', class: "pn-checkbox-outer" }, h("svg", { key: '2349e0a978e6824658b572462eb5baf9ccda2ec9', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'c01925a07dfb5bbed352ecb741a3e9c830a32b3b', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '0d4dfa8da28e602bf0c579c6ca48fda9f1748a38', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), h("div", { key: 'd3c1f4a8d7aa27d7d9ca192438b84619574fcf39', class: "pn-checkbox-content", hidden: !this.displayText() }, h("label", { key: '467ca071291cbd977670300bb45affc7153ae7f4', htmlFor: this.getId(), class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), h("p", { key: '5c790a6b8583415168a3e92c7b6d3a38125b39cd', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext && h("span", { key: 'e35b4ac4a6abd759d7fb5e1d41fd2f198515e106' }, this.helpertext), h("slot", { key: 'ac060762533af07379cc80225a83de6e01ca26e4', name: "helpertext" })), h("slot", { key: '4f0309028f9266d016f19d8983343ff010d89195' })), this.displayIcon() && h("pn-icon", { key: '742b544ed4ed61ff311de992eea37b768cc6efef', icon: this.icon, color: "gray900" }), h("div", { key: '45cdad0df43248b340feed887659d6c63e90b85f', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: '060550d9876021ba85a1821c51c60b1bb34b8a3c', class: "pn-checkbox-area" }, h("slot", { key: 'bbe34f9d29a922ab20b8696595a9ed469005f59e', name: "content" }))))));
     }
     static get watchers() { return {
         "checkboxid": [{
                 "handleId": 0
             }],
+        "pnId": [{
+                "handleId": 1
+            }],
         "checked": [{
                 "handleChecked": 0
             }]

package/umd/modules/@postnord/web-components/esm/pn-choice-chip.entry.js

@@ -2,42 +2,62 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
 import { c as check } from './check-BpI8peGn.js';
 
-const pnChoiceChipCss = () => `${transformTag("pn-choice-chip")}{display:inline-block}${transformTag("pn-choice-chip")} .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}${transformTag("pn-choice-chip")} .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}${transformTag("pn-choice-chip")} .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}${transformTag("pn-choice-chip")} .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}${transformTag("pn-choice-chip")} .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled{cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container ${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}`;
+const pnChoiceChipCss = () => `${transformTag("pn-choice-chip")}{display:inline-block}${transformTag("pn-choice-chip")} .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}${transformTag("pn-choice-chip")} .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-large]{padding:0.6875em 1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}${transformTag("pn-choice-chip")} .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}${transformTag("pn-choice-chip")} .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}${transformTag("pn-choice-chip")} .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled{cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container ${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}`;
 
 const PnChoiceChip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    id = `pn-choice-chip-${uuidv4()}`;
     get hostElement() { return getElement(this); }
-    moving = false;
-    /** The choice chip label */
+    /** The choice chip label. This is required for the component to be accessible. */
     label;
-    /** This will be emitted on change and input */
+    /** This will be emitted on change and input. @category Native attributes */
     value;
-    /** The name of the checkbox group */
+    /** The name of the checkbox group. This is required if you use the `radio` prop. @category Native attributes */
     name;
-    /** Precheck the choice chip */
+    /** Programatically check the input. @category Native attributes */
     checked = false;
-    /** Make the choice chip a radio */
-    radio = false;
-    /** A unique HTML id */
-    choiceid = `pn-choice-chip-${uuidv4()}`;
-    /** Include an icon */
-    icon;
-    /** Set the choice chip as required. @category State */
+    /** Set the input as required. @category Native attributes */
     required = false;
-    /** Disable the choice chip. @category State */
+    /** Disable the input. @category Native attributes */
     disabled = false;
-    /** Set the size to small. @category Size */
+    /**
+     * Make the choice chip a radio input. By default, it behaves as a checkbox.
+     * You must assign a `name` for the radio to work.
+     *  @category Features
+     */
+    radio = false;
+    /** Add an icon to the choice chip. @category Features */
+    icon;
+    /** Use the small size for the choice chip. @category Features */
     small = false;
-    /** Set the size to large. @category Size */
+    /** Use the large size for the choice chip. @category Features*/
     large = false;
+    /**
+     * A unique HTML ID for the choice chip
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnId;
+    /**
+     * A unique HTML ID for the choice chip.
+     * @deprecated Use the `pn-id` prop instead.
+     * @category HTML attributes
+     */
+    choiceid;
+    inputType() {
+        return this.radio ? 'radio' : 'checkbox';
+    }
+    getId() {
+        return this.pnId || this.choiceid || this.id;
+    }
     render() {
-        return (h(Host, { key: '8d5686163aba07794c4700e91a9d378200aa2bf9' }, h("div", { key: '233605ae9b531853d9f941f99cc0cf6fcce21bba', class: "pn-choice-chip" }, h("input", { key: 'aacdd59b76f20029234722e49ab5b2aa27198206', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '69a287ffabea602b28360dc5a15d979dcb3d6526', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: 'c2d89b6817b623264e903aed26947d8a422a1ee2', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'd405b85cec9b30f85a5949862dec48cdacc618de', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'af080ab55ce96b7d0bc3e0c168130bd772302d52', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '2ed2b62f84c1e2c85ace67151bd1997bcc762027' }, this.label), h("slot", { key: '3512fdee318749598e66d096ec56a66e3daa564a' }))))));
+        return (h(Host, { key: '34b4a84a6fa6ebd0c592a4d585d333084e72c89f' }, h("div", { key: '66c7aa91b09795d9d452b1d6c0b65f0b64ba25f9', class: "pn-choice-chip" }, h("input", { key: '8723fd54d3ff2fed1a64c955ab3ea2e4812ff04f', type: this.inputType(), id: this.getId(), value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '9fd84d08b519181f954c3b62b1644afab67569ad', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '29b394a6806acbd2d9f905971555242f8bf81d32', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '22031f1693f50efa6b9e049c643e9ecbc931bea6', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '573e411940efa3054290a5cb574978dddddfb766', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'c0deb7c6cd33da32bc4b89af84d04a7383664024', class: "pn-choice-chip-label", htmlFor: this.getId() }, h("span", { key: 'ea43103d3f3d2332a52e9191ff37262bce642dbb' }, this.label), h("slot", { key: '904ac98a84bd191e74323154b7ea6de39dca964a' }))))));
     }
 };
 PnChoiceChip.style = pnChoiceChipCss();