@navikt/ds-css 5.2.1 → 5.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css
 
+## 5.3.1
+
+### Patch Changes
+
+- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
+
+- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
+
+## 5.3.0
+
+### Minor Changes
+
+- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
+
 ## 5.2.1
 
 ### Patch Changes

package/accordion.css

@@ -1,3 +1,7 @@
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+}
+
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -6,7 +10,6 @@
  * Header *
  *************************/
 .navds-accordion__header {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
   --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
     inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
 

package/dist/component/accordion.css

@@ -1,3 +1,7 @@
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+}
+
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -7,7 +11,6 @@
  *************************/
 
 .navds-accordion__header {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
   --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
     inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
 

package/dist/component/accordion.min.css

@@ -1 +1 @@
-.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider));--__ac-accordion-header-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;box-shadow:var(--__ac-accordion-header-shadow);cursor:pointer;display:flex;gap:var(--a-spacing-2);justify-content:flex-start;margin:0;padding:var(--a-spacing-3);position:relative;text-align:left;width:100%;z-index:1}.navds-accordion__header:hover{background-color:var(--ac-accordion-header-bg-hover,var(--a-surface-hover));color:var(--ac-accordion-header-text-hover,inherit);text-decoration:underline}.navds-accordion--small .navds-accordion__header{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-accordion--medium .navds-accordion__header{padding:var(--a-spacing-3)}.navds-accordion--large .navds-accordion__header{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-accordion__item:last-child>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item--open>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow)}.navds-accordion__header:focus-visible{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-accordion__header:focus{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}}.navds-accordion__header-content{overflow:hidden;text-overflow:ellipsis}.navds-accordion__icon-wrapper{align-self:center;border-radius:var(--a-border-radius-medium);display:grid;height:var(--a-spacing-6);place-content:center;width:var(--a-spacing-6)}.navds-accordion__header:hover>.navds-accordion__icon-wrapper{background-color:var(--ac-accordion-header-icon-bg-hover,var(--a-surface-neutral-subtle-hover))}.navds-accordion__header-chevron{align-self:center;border-radius:var(--a-border-radius-medium);flex-shrink:0;font-size:1.5rem;height:1.75rem;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-accordion__item--open>:where(.navds-accordion__header)>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(0) rotate(-180deg);transform:translateY(0) rotate(-180deg)}.navds-accordion__item--open>:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(-1px) rotate(-180deg);transform:translateY(-1px) rotate(-180deg)}.navds-accordion__item--open{background-color:var(--ac-accordion-item-bg-open,var(--a-transparent))}.navds-accordion__item--open.navds-accordion__item--neutral{background-color:var(--ac-accordion-neutral-item-bg-open,var(--a-surface-neutral-subtle))}.navds-accordion__content{-webkit-animation:fadeAccordionContent .25s ease;animation:fadeAccordionContent .25s ease;padding:0 var(--a-spacing-3) var(--a-spacing-5)}.navds-accordion--indent>:where(.navds-accordion__item)>:where(.navds-accordion__content){padding:0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11)}.navds-accordion__content--closed{display:none}.navds-accordion__item--no-animation :where(.navds-accordion__content){-webkit-animation:none;animation:none}@-webkit-keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
+.navds-accordion{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider))}.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{--__ac-accordion-header-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;box-shadow:var(--__ac-accordion-header-shadow);cursor:pointer;display:flex;gap:var(--a-spacing-2);justify-content:flex-start;margin:0;padding:var(--a-spacing-3);position:relative;text-align:left;width:100%;z-index:1}.navds-accordion__header:hover{background-color:var(--ac-accordion-header-bg-hover,var(--a-surface-hover));color:var(--ac-accordion-header-text-hover,inherit);text-decoration:underline}.navds-accordion--small .navds-accordion__header{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-accordion--medium .navds-accordion__header{padding:var(--a-spacing-3)}.navds-accordion--large .navds-accordion__header{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-accordion__item:last-child>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item--open>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow)}.navds-accordion__header:focus-visible{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-accordion__header:focus{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}}.navds-accordion__header-content{overflow:hidden;text-overflow:ellipsis}.navds-accordion__icon-wrapper{align-self:center;border-radius:var(--a-border-radius-medium);display:grid;height:var(--a-spacing-6);place-content:center;width:var(--a-spacing-6)}.navds-accordion__header:hover>.navds-accordion__icon-wrapper{background-color:var(--ac-accordion-header-icon-bg-hover,var(--a-surface-neutral-subtle-hover))}.navds-accordion__header-chevron{align-self:center;border-radius:var(--a-border-radius-medium);flex-shrink:0;font-size:1.5rem;height:1.75rem;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-accordion__item--open>:where(.navds-accordion__header)>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(0) rotate(-180deg);transform:translateY(0) rotate(-180deg)}.navds-accordion__item--open>:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(-1px) rotate(-180deg);transform:translateY(-1px) rotate(-180deg)}.navds-accordion__item--open{background-color:var(--ac-accordion-item-bg-open,var(--a-transparent))}.navds-accordion__item--open.navds-accordion__item--neutral{background-color:var(--ac-accordion-neutral-item-bg-open,var(--a-surface-neutral-subtle))}.navds-accordion__content{-webkit-animation:fadeAccordionContent .25s ease;animation:fadeAccordionContent .25s ease;padding:0 var(--a-spacing-3) var(--a-spacing-5)}.navds-accordion--indent>:where(.navds-accordion__item)>:where(.navds-accordion__content){padding:0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11)}.navds-accordion__content--closed{display:none}.navds-accordion__item--no-animation :where(.navds-accordion__content){-webkit-animation:none;animation:none}@-webkit-keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}

package/dist/component/guidepanel.css

@@ -1,62 +1,96 @@
-/**
- * GuidePanel component
- */
 .navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
   position: relative;
-  padding-left: var(--a-spacing-10);
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
+
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
+}
+
 .navds-guide-panel__content {
   background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-  min-height: 7.25rem;
-  padding: var(--a-spacing-6);
-  padding-left: var(--a-spacing-14);
-}
-.navds-guide-panel--poster {
-  padding-left: 0;
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
   padding-top: var(--a-spacing-12);
 }
-.navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--a-spacing-8);
-  padding-top: var(--a-spacing-16);
+
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
 }
-.navds-guide-panel .navds-guide {
-  position: absolute;
-  top: var(--a-spacing-4);
-  transform: translateX(-50%);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
+
+/* not-poster */
+
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
-.navds-guide-panel--poster .navds-guide {
-  left: 50%;
-  top: 0;
-}
-/**
- * Guide component
- */
-.navds-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--a-border-radius-full);
-}
-/* Guide illustration frame */
-.navds-guide__illustration {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
-  border-radius: var(--a-border-radius-full);
-  overflow: hidden;
+
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
 }
-.navds-guide__illustration svg,
-.navds-guide__illustration img {
-  height: 100%;
-  width: 100%;
+
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
 }
-/* Illustration sizes */
-.navds-guide__illustration--small {
-  height: 5rem;
-  width: 5rem;
+
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
 }
-.navds-guide__illustration--medium {
-  height: 6rem;
-  width: 6rem;
+
+/* responsive-poster (on desktop) */
+
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
 }

package/dist/component/guidepanel.min.css

@@ -1 +1 @@
-.navds-guide-panel{padding-left:var(--a-spacing-10);position:relative}.navds-guide-panel__content{background-color:var(--ac-guide-panel-bg,var(--a-surface-default));border:2px solid var(--ac-guide-panel-border,var(--a-border-action));border-radius:var(--a-border-radius-medium);min-height:7.25rem;padding:var(--a-spacing-6);padding-left:var(--a-spacing-14)}.navds-guide-panel--poster{padding-left:0;padding-top:var(--a-spacing-12)}.navds-guide-panel--poster .navds-guide-panel__content{padding:var(--a-spacing-8);padding-top:var(--a-spacing-16)}.navds-guide-panel .navds-guide{border:2px solid var(--ac-guide-panel-border,var(--a-border-action));position:absolute;top:var(--a-spacing-4);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.navds-guide-panel--poster .navds-guide{left:50%;top:0}.navds-guide{align-items:center;display:flex;justify-content:center}.navds-guide,.navds-guide__illustration{border-radius:var(--a-border-radius-full)}.navds-guide__illustration{background:var(--ac-guide-panel-illustration-bg,var(--a-surface-action-subtle));overflow:hidden}.navds-guide__illustration img,.navds-guide__illustration svg{height:100%;width:100%}.navds-guide__illustration--small{height:5rem;width:5rem}.navds-guide__illustration--medium{height:6rem;width:6rem}
+.navds-guide-panel{--__ac-guide-panel-guide-size:4rem;padding-top:calc(var(--__ac-guide-panel-guide-size)/2);position:relative}.navds-guide{background:var(--ac-guide-panel-illustration-bg,var(--a-surface-alt-3-subtle));border:2px solid var(--ac-guide-panel-border,var(--a-border-alt-3));border-radius:var(--a-border-radius-full);height:var(--__ac-guide-panel-guide-size);left:50%;overflow:hidden;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:var(--__ac-guide-panel-guide-size)}.navds-guide img,.navds-guide svg{height:100%;width:100%}.navds-guide-panel__content{background-color:var(--ac-guide-panel-bg,var(--a-surface-default));border:2px solid var(--ac-guide-panel-border,var(--a-border-alt-3));border-radius:var(--a-border-radius-large);padding:var(--a-spacing-4);padding-top:var(--a-spacing-12)}@media (min-width:480px){.navds-guide-panel{--__ac-guide-panel-guide-size:6.25rem}.navds-guide-panel__content{padding:var(--a-spacing-8);padding-top:4.25rem}}.navds-guide-panel--not-poster{padding-left:calc(var(--__ac-guide-panel-guide-size)/2);padding-top:0}.navds-guide-panel--not-poster .navds-guide{left:0;top:var(--a-spacing-5);-webkit-transform:none;transform:none}.navds-guide-panel--not-poster .navds-guide-panel__content{min-height:calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));padding:var(--a-spacing-4);padding-left:var(--a-spacing-10)}@media (min-width:480px){.navds-guide-panel--not-poster{--__ac-guide-panel-guide-size:5rem}.navds-guide-panel--not-poster .navds-guide-panel__content{padding:var(--a-spacing-6);padding-left:var(--a-spacing-14)}.navds-guide-panel--responsive-poster{--__ac-guide-panel-guide-size:5rem;padding-left:calc(var(--__ac-guide-panel-guide-size)/2);padding-top:0}.navds-guide-panel--responsive-poster .navds-guide{left:0;top:var(--a-spacing-5);-webkit-transform:none;transform:none}.navds-guide-panel--responsive-poster .navds-guide-panel__content{min-height:calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));padding:var(--a-spacing-6);padding-left:var(--a-spacing-14)}}

package/dist/component/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 28 Aug 2023 07:28:42 GMT
+ * Generated on Sun, 03 Sep 2023 10:42:10 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -877,6 +877,14 @@ body,
 .navds-body-long.navds-typo--spacing {
   margin-bottom: var(--a-spacing-7);
 }
+.navds-body-long--large {
+  font-size: var(--a-font-size-xlarge);
+  letter-spacing: -0.0013em;
+  line-height: var(--a-font-line-height-xlarge);
+}
+.navds-body-long--large.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-10);
+}
 .navds-body-long--small {
   font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
@@ -895,6 +903,14 @@ body,
 .navds-body-short.navds-typo--spacing {
   margin-bottom: var(--a-spacing-3);
 }
+.navds-body-short--large {
+  font-size: var(--a-font-size-xlarge);
+  letter-spacing: -0.0013em;
+  line-height: var(--a-font-line-height-large);
+}
+.navds-body-short--large.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-4);
+}
 .navds-body-short--small {
   font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
@@ -948,6 +964,42 @@ body,
 .navds-error-message {
   color: var(--ac-typo-error-text, var(--a-text-danger));
 }
+.navds-typo--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.navds-typo--semibold {
+  font-weight: var(--a-font-weight-bold);
+}
+.navds-typo--align-start {
+  text-align: start;
+}
+.navds-typo--align-center {
+  text-align: center;
+}
+.navds-typo--align-end {
+  text-align: end;
+}
+.navds-typo--visually-hidden {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  top: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+.navds-typo--color-subtle {
+  color: var(--a-text-subtle);
+}
+[data-theme="dark"].navds-typo--color-subtle,
+[data-theme="dark"] .navds-typo--color-subtle {
+  --a-text-subtle: var(--a-gray-300);
+}
 /**************************
  * .navds-grid *
  **************************/
@@ -1147,6 +1199,9 @@ body,
     grid-column: span 12;
   }
 }
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+}
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -1154,7 +1209,6 @@ body,
  * Header *
  *************************/
 .navds-accordion__header {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
   --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
     inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
 
@@ -2315,67 +2369,90 @@ body,
     transform: translateY(0);
   }
 }
-/**
- * GuidePanel component
- */
 .navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
   position: relative;
-  padding-left: var(--a-spacing-10);
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
 }
 .navds-guide-panel__content {
   background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-  min-height: 7.25rem;
-  padding: var(--a-spacing-6);
-  padding-left: var(--a-spacing-14);
-}
-.navds-guide-panel--poster {
-  padding-left: 0;
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
   padding-top: var(--a-spacing-12);
 }
-.navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--a-spacing-8);
-  padding-top: var(--a-spacing-16);
-}
-.navds-guide-panel .navds-guide {
-  position: absolute;
-  top: var(--a-spacing-4);
-  transform: translateX(-50%);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-}
-.navds-guide-panel--poster .navds-guide {
-  left: 50%;
-  top: 0;
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
 }
-/**
- * Guide component
- */
-.navds-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--a-border-radius-full);
+/* not-poster */
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
-/* Guide illustration frame */
-.navds-guide__illustration {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
-  border-radius: var(--a-border-radius-full);
-  overflow: hidden;
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
 }
-.navds-guide__illustration svg,
-.navds-guide__illustration img {
-  height: 100%;
-  width: 100%;
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
 }
-/* Illustration sizes */
-.navds-guide__illustration--small {
-  height: 5rem;
-  width: 5rem;
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
 }
-.navds-guide__illustration--medium {
-  height: 6rem;
-  width: 6rem;
+/* responsive-poster (on desktop) */
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
 }
 /*
   Order matters; rearrange with care