@oslokommune/punkt-css 13.21.0 → 14.0.0

package/CHANGELOG.md

@@ -5,6 +5,68 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [14.0.0](https://github.com/oslokommune/punkt/compare/13.22.0...14.0.0) (2026-02-02)
+
+### ⚠ BREAKING CHANGES
+* Header (Service) (#3192) Nå også som custom element!. BREAKING CHANGE: Fjernet 'logIn' event (kun 'logOut' støttes nå)
+  BREAKING CHANGE: Erstattet 'fixed' prop med 'position' (verdier: 'fixed' | 'relative', default: 'fixed')
+  BREAKING CHANGE: Erstattet 'scrollToHide' prop med 'scrollBehavior' (verdier: 'hide' | 'none', default: 'hide')
+  BREAKING CHANGE: Erstattet 'showLogOutButton' med 'logOutButtonPlacement' (verdier: 'userMenu' | 'header' | 'both' | 'none', default: 'none')
+  BREAKING CHANGE: Fjernet 'showMenuButton' prop
+  BREAKING CHANGE: Fjernet 'user.shortname' fra user-objektet
+  BREAKING CHANGE: Fjernet 'representing.shortname' fra representing-objektet
+  BREAKING CHANGE: Endret 'userMenu.items.target' type fra 'string' til 'string | function'
+  BREAKING CHANGE: Utdatert 'userMenuFooter' og 'userOptions' props (bruk 'userMenu' i stedet)
+  BREAKING CHANGE: Fjernet default verdi for 'logoLink' (var `https://www.oslo.kommune.no/`)
+  
+  NYE FEATURES:
+  - Lagt til søkefunksjonalitet med props: 'showSearch', 'searchPlaceholder', 'searchValue'
+  - Nye events: 'onSearch' og 'onSearchChange' for søkeinteraksjon
+  - Nye events: 'logoClick' og 'serviceClick' for klikkhåndtering
+  - Nye React-props: 'logoClick' og 'serviceClick' callbacks
+  - Lagt til 'serviceLink' prop for tjenestenavnlenke
+  - Lagt til 'hideLogo' prop for å skjule Oslo-logoen
+  - Lagt til 'compact' prop for kompakt header-høyde
+  - Lagt til 'mobileBreakpoint' prop (default: 768px) for mobil-layout
+  - Lagt til 'tabletBreakpoint' prop (default: 1280px) for tablet-layout
+  - Lagt til 'openedMenu' prop for å kontrollere hvilken meny som er åpen ved oppstart
+  
+  FUNKSJONELLE ENDRINGER:
+  - Alle events har nå 'attribute' felt for custom element-støtte
+  - Forbedret type-dokumentasjon for 'user.lastLoggedIn' (string | Date)
+  - Forbedret type-dokumentasjon for 'representing.orgNumber' (string | number)
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.22.0](https://github.com/oslokommune/punkt/compare/13.21.0...13.22.0) (2026-01-30)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* update card styles (#3200). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.21.0](https://github.com/oslokommune/punkt/compare/13.20.0...13.21.0) (2026-01-30)
 
 ### ⚠ BREAKING CHANGES

package/dist/css/components/card.css

@@ -183,13 +183,13 @@ pkt-card {
 }
 .pkt-card--outlined, .pkt-card--outlined-beige {
   background-color: var(--pkt-color-background-default);
-  outline-offset: -4px;
+  outline-offset: -2px;
 }
 .pkt-card--outlined {
-  outline: 4px solid var(--pkt-color-grays-gray-100);
+  outline: 2px solid var(--pkt-color-grays-gray-100);
 }
 .pkt-card--outlined-beige {
-  outline: 4px solid var(--pkt-color-brand-light-beige-1000);
+  outline: 2px solid var(--pkt-color-brand-light-beige-1000);
 }
 .pkt-card--gray {
   background-color: var(--pkt-color-brand-neutrals-100);

package/dist/css/components/card.min.css

@@ -1 +1 @@
-pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:1.5rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-bottom:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-bottom:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-top:1rem;margin-bottom:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;margin-top:0}.pkt-card .pkt-card__tags-bottom{margin-top:.5rem;margin-bottom:0}.pkt-card.pkt-card--horizontal{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal{flex-direction:column}}.pkt-card.pkt-card--vertical{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;max-height:400px;max-width:400px}.pkt-card.pkt-card--horizontal .pkt-card__image{max-width:400px;margin-right:2rem}.pkt-card.pkt-card--horizontal .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal .pkt-card__image{margin-right:0;margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--horizontal .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--vertical .pkt-card__image{margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000);outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-4px}.pkt-card--outlined{outline:4px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:4px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}
+pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:1.5rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-bottom:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-bottom:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-top:1rem;margin-bottom:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;margin-top:0}.pkt-card .pkt-card__tags-bottom{margin-top:.5rem;margin-bottom:0}.pkt-card.pkt-card--horizontal{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal{flex-direction:column}}.pkt-card.pkt-card--vertical{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;max-height:400px;max-width:400px}.pkt-card.pkt-card--horizontal .pkt-card__image{max-width:400px;margin-right:2rem}.pkt-card.pkt-card--horizontal .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal .pkt-card__image{margin-right:0;margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--horizontal .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--vertical .pkt-card__image{margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000);outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-2px}.pkt-card--outlined{outline:2px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:2px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}

package/dist/css/components/header-service-mobile.css

@@ -0,0 +1,184 @@
+.pkt-header-service.pkt-header-service--mobile {
+  grid-template-rows: 4rem auto;
+  grid-template-columns: 1fr auto;
+}
+@media screen and (min-width: 80rem) {
+  .pkt-header-service.pkt-header-service--mobile {
+    grid-template-rows: 4.5rem auto;
+  }
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service--compact {
+  grid-template-rows: 4rem auto;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo-area, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__content, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user {
+  column-gap: 1rem;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo-area {
+  grid-column: 1;
+  grid-row: 1;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__content {
+  grid-column: 2;
+  grid-row: 1;
+  padding-right: 1rem;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user {
+  grid-column: 1/-1;
+  grid-row: 2;
+  justify-self: stretch;
+  padding: 0;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo svg {
+  height: 2rem;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__service-name {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu {
+  background-color: var(--pkt-color-background-default);
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container {
+  background-color: var(--pkt-color-background-default);
+  height: 3.5rem;
+  width: 100%;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button), .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button button {
+  height: 100%;
+  padding: 0 1.5rem;
+  width: 100%;
+  max-width: 100%;
+  border: none;
+  border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+  border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button) {
+  display: contents;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu {
+  max-width: 100%;
+  position: unset;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-content {
+  display: none;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content {
+  position: absolute;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  max-width: 100vw;
+}
+@media screen and (min-width: 80rem) {
+  .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content {
+    top: 4.5rem;
+  }
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu {
+  position: absolute;
+  top: 4rem;
+  left: 0;
+  right: 0;
+}
+@media screen and (min-width: 80rem) {
+  .pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu {
+    top: 4.5rem;
+  }
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-input {
+  padding: 1rem;
+}
+
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu.is-open,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__mobile-menu.is-open {
+  background-color: var(--pkt-color-background-default);
+  z-index: 100;
+  border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+  border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content::after, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu::after, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu.is-open::after,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content::after,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu::after,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__mobile-menu.is-open::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1.25rem;
+  pointer-events: none;
+  background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.06));
+  transform: translateY(100%);
+  z-index: 101;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content {
+  height: max-content;
+  max-height: calc(100dvh - var(--pkt-header-height));
+  overflow: visible;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents,
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul {
+  margin-left: 0;
+  gap: 1.5rem;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > *,
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul > *, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > *,
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul > *,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > *,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul > *,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > *,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul > * {
+  margin-left: 0;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content .pkt-contents,
+.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content .pkt-contents {
+  padding: 2rem;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-content {
+  display: none;
+}
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container, .pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container {
+  position: relative;
+}
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__mobile-menu, .pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__slot-content,
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu {
+  display: block;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 19rem;
+  width: fit-content;
+  max-width: 100%;
+  right: auto;
+  border: 2px solid var(--pkt-color-border-subtle);
+}
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content.align-right,
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__mobile-menu.align-right, .pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__slot-content.align-right,
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu.align-right {
+  left: auto;
+  right: 0;
+}
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-input {
+  padding: 1rem;
+}

package/dist/css/components/header-service-mobile.min.css

@@ -0,0 +1 @@
+.pkt-header-service.pkt-header-service--mobile{grid-template-rows:4rem auto;grid-template-columns:1fr auto}@media screen and (min-width: 80rem){.pkt-header-service.pkt-header-service--mobile{grid-template-rows:4.5rem auto}}.pkt-header-service.pkt-header-service--mobile .pkt-header-service--compact{grid-template-rows:4rem auto}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo-area,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__content,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user{column-gap:1rem}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo-area{grid-column:1;grid-row:1}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__content{grid-column:2;grid-row:1;padding-right:1rem}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user{grid-column:1/-1;grid-row:2;justify-self:stretch;padding:0}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo svg{height:2rem}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__service-name{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu{background-color:var(--pkt-color-background-default)}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container{background-color:var(--pkt-color-background-default);height:3.5rem;width:100%}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button),.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button button{height:100%;padding:0 1.5rem;width:100%;max-width:100%;border:none;border-top:1px solid var(--pkt-color-border-subtle, #f2f2f2);border-bottom:1px solid var(--pkt-color-border-subtle, #f2f2f2)}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button){display:contents}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu{max-width:100%;position:unset}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-content{display:none}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content{position:absolute;top:4rem;left:0;right:0;max-width:100vw}@media screen and (min-width: 80rem){.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content{top:4.5rem}}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu{position:absolute;top:4rem;left:0;right:0}@media screen and (min-width: 80rem){.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu{top:4.5rem}}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-input{padding:1rem}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu.is-open,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__mobile-menu.is-open{background-color:var(--pkt-color-background-default);z-index:100;border-top:1px solid var(--pkt-color-border-subtle, #f2f2f2);border-bottom:1px solid var(--pkt-color-border-subtle, #f2f2f2)}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content::after,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu::after,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu.is-open::after,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content::after,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu::after,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__mobile-menu.is-open::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1.25rem;pointer-events:none;background:linear-gradient(to top, transparent, rgba(0, 0, 0, 0.06));transform:translateY(100%);z-index:101}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content{height:max-content;max-height:calc(100dvh - var(--pkt-header-height));overflow:visible}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents{display:flex;flex-direction:column;align-items:stretch}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>ul,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents>ul,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>ul,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents>ul{margin-left:0;gap:1.5rem}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>*,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>ul>*,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents>*,.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents>ul>*,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>*,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>ul>*,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents>*,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content>.pkt-contents>ul>*{margin-left:0}.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content .pkt-contents,.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content .pkt-contents{padding:2rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-content{display:none}.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container{position:relative}.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__mobile-menu,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__slot-content,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu{display:block;position:absolute;top:100%;left:0;min-width:19rem;width:fit-content;max-width:100%;right:auto;border:2px solid var(--pkt-color-border-subtle)}.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content.align-right,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__mobile-menu.align-right,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__slot-content.align-right,.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu.align-right{left:auto;right:0}.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-input{padding:1rem}