@inera/ids-design 5.2.2 → 5.4.0

package/{components → dist/components}/popover/popover-content.css

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -34,15 +34,15 @@
 }
 
 .ids-popover-content {
-  background: white;
-  border: 1px solid var(--popover_border);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  border-radius: var(--popover-content_border-radius);
-  padding: 20px;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border: 0.063rem solid var(--IDS-POPOVER-CONTENT__BORDER);
+  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
+  border-radius: var(--IDS-POPOVER-CONTENT__BORDER-RADIUS);
+  padding: 1.25rem;
   position: relative;
   z-index: 2;
-  max-height: 260px;
-  width: 260px;
+  max-height: 16.25rem;
+  width: 16.25rem;
   box-sizing: border-box;
 }
 .ids-popover-content ::slotted(*) {
@@ -50,15 +50,15 @@
 }
 .ids-popover-content h3,
 .ids-popover-content ::slotted(h3) {
-  margin-bottom: 8px !important;
+  margin-bottom: 0.5rem !important;
   color: var(--IDS-BASE__FONT-COLOR) !important;
   font-style: normal !important;
-  color: var(--heading-xs-color);
-  font-family: var(--heading-xs-font-family) !important;
-  font-size: var(--heading-xs-font-size) !important;
-  line-height: var(--heading-xs-line-height) !important;
-  letter-spacing: var(--heading-xs-letter-spacing) !important;
-  font-weight: var(--heading-xs-font-weight) !important;
+  color: var(--IDS-HEADING-XS__COLOR);
+  font-family: var(--IDS-HEADING-XS__FONT-FAMILY) !important;
+  font-size: var(--IDS-HEADING-XS__FONT-SIZE) !important;
+  line-height: var(--IDS-HEADING-XS__LINE-HEIGHT) !important;
+  letter-spacing: var(--IDS-HEADING-XS__LETTER-SPACING) !important;
+  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT) !important;
 }
 .ids-popover-content .ids-popover-content__caret {
   position: absolute;
@@ -68,54 +68,54 @@
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--top {
   left: 50%;
-  bottom: -27px;
+  bottom: -1.688rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left {
-  left: 2px;
-  bottom: -28px;
+  left: 0.125rem;
+  bottom: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right {
-  right: 2px;
-  bottom: -28px;
+  right: 0.125rem;
+  bottom: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--left {
   top: 50%;
-  right: -28px;
+  right: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top {
-  bottom: 2px;
-  right: -28px;
+  bottom: 0.125rem;
+  right: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom {
-  top: 2px;
-  right: -28px;
+  top: 0.125rem;
+  right: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--right {
   top: 50%;
-  left: -28px;
+  left: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top {
-  bottom: 2px;
-  left: -28px;
+  bottom: 0.125rem;
+  left: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom {
-  top: 2px;
-  left: -28px;
+  top: 0.125rem;
+  left: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom {
   left: 50%;
-  top: -28px;
+  top: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left {
-  left: 2px;
-  top: -28px;
+  left: 0.125rem;
+  top: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right {
-  right: 2px;
-  top: -28px;
+  right: 0.125rem;
+  top: -1.75rem;
 }
 .ids-popover-content .ids-popover-content__caret-body {
-  background: white;
+  background: var(--IDS-COLOR-NEUTRAL-100);
   display: block;
   position: absolute;
   z-index: 4;
@@ -157,39 +157,39 @@
   top: 0;
 }
 .ids-popover-content .ids-popover-content__caret-border {
-  background-color: var(--popover_border);
+  background-color: var(--IDS-POPOVER-CONTENT__BORDER);
   position: absolute;
   z-index: 1;
 }
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right {
-  background-color: var(--popover_border);
+  background-color: var(--IDS-POPOVER-CONTENT__BORDER);
   height: 0.6rem;
   width: 1.2rem;
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   transform: translateX(-50%);
-  bottom: -2px;
+  bottom: -0.125rem;
 }
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom {
-  background-color: var(--popover_border);
+  background-color: var(--IDS-POPOVER-CONTENT__BORDER);
   height: 1.2rem;
   width: 0.6rem;
   clip-path: polygon(0 0, 100% 50%, 0 100%);
   transform: translateY(-50%);
-  right: -2px;
+  right: -0.125rem;
 }
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom {
-  background-color: var(--popover_border);
+  background-color: var(--IDS-POPOVER-CONTENT__BORDER);
   height: 1.2rem;
   width: 0.6rem;
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
   transform: translateY(-50%);
-  left: -2px;
+  left: -0.125rem;
 }
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,
 .ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,
@@ -198,12 +198,12 @@
   width: 1.2rem;
   clip-path: polygon(0 100%, 50% 0, 100% 100%);
   transform: translateX(-50%);
-  top: -2px;
+  top: -0.125rem;
 }
 .ids-popover-content .ids-popover-content__caret-shadow {
-  height: 0px;
-  width: 0px;
-  filter: blur(3px);
+  height: 0;
+  width: 0;
+  filter: blur(0.188rem);
   position: absolute;
   z-index: 1;
 }
@@ -214,7 +214,7 @@
   border-right: 0.625rem solid transparent;
   border-top: 0.625rem solid rgba(0, 0, 0, 0.15);
   transform: translateX(-50%);
-  bottom: -7px;
+  bottom: -0.438rem;
 }
 .ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,
 .ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top,
@@ -223,7 +223,7 @@
   border-bottom: 0.5625rem solid transparent;
   border-right: 0.5625rem solid rgba(53, 53, 53, 0.15);
   transform: translateY(-50%);
-  right: -7px;
+  right: -0.438rem;
 }
 .ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,
 .ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top,
@@ -232,7 +232,7 @@
   border-bottom: 0.5625rem solid transparent;
   border-right: 0.5625rem solid rgba(53, 53, 53, 0.15);
   transform: translateY(-50%);
-  left: -7px;
+  left: -0.438rem;
 }
 .ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,
 .ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,
@@ -241,7 +241,7 @@
   border-right: 0.625rem solid transparent;
   border-bottom: 0.625rem solid rgba(0, 0, 0, 0.15);
   transform: translateX(-50%);
-  top: -7px;
+  top: -0.438rem;
 }
 .ids-popover-content .ids-popover-content__inner-wrapper {
   display: flex;
@@ -256,7 +256,7 @@
   display: block;
   max-width: 100%;
   z-index: 1;
-  height: 20px;
+  height: 1.25rem;
 }
 .ids-popover-content .ids-popover-content__text-wrapper {
   display: block;
@@ -269,46 +269,38 @@
   text-align: left;
   overflow: auto;
   overflow-x: hidden;
-  padding-right: 20px;
-  margin-right: -17px;
-  height: calc(100% - 20px);
-  width: calc(100% - 20px);
+  padding-right: 1.25rem;
+  margin-right: -1.12rem;
+  height: calc(100% - 1.25rem);
+  width: calc(100% - 1.25rem);
 }
 .ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar {
-  width: 14px;
+  width: 1rem;
   position: absolute;
-  margin-left: -20px;
-  margin-top: 30px;
+  margin-left: -1.25rem;
 }
 .ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_TRACK-COLOR);
-  border-radius: 10px;
-  margin-top: 30px;
+  background: var(--IDS-COLOR-NEUTRAL-99);
+  border-radius: 0.625rem;
   margin-bottom: 0;
-}
-.ids-popover-content .ids-popover-content__text-wrapper::-webkit-resizer {
-  appearance: none;
-  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner {
-  background-color: transparent;
+  margin-top: 1.5rem;
 }
 .ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+  background: var(--IDS-SCROLL__COLOR);
+  border-radius: 0.625rem;
   box-sizing: border-box;
-  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
 }
 .ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover {
-  background: var(--IDS-SCROLL_HOVER-COLOR);
+  background: var(--IDS-SCROLL__HOVER-COLOR);
+}
+.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 .ids-popover-content .ids-popover-content__text-wrapper:focus {
-  outline: var(--focus_outline);
-  outline-offset: 10px;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: 0.625rem;
 }
 .ids-popover-content .ids-popover-content__close-btn {
   cursor: pointer;
@@ -319,11 +311,11 @@
   outline: inherit;
 }
 .ids-popover-content .ids-popover-content__close-btn:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-popover-content .ids-popover-content__close-btn:focus,
 .ids-popover-content .ids-popover-content__close-icon:focus {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }

package/dist/components/progressbar/progressbar-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-progressbar{border:var(--IDS-PROGRESSBAR__BORDER-COLOR);border-radius:.625rem;box-sizing:border-box;height:.938rem;position:relative}@media (max-width:1024px){.ids-progressbar{height:.625rem}}.ids-progressbar .ids-progressbar__progress{background-color:var(--IDS-PROGRESSBAR__PROGRESS-COLOR);border-radius:.625rem;display:block;height:.938rem;left:0;margin-left:-.063rem;margin-top:-.063rem;transition:width .3s ease;width:15%}@media (max-width:1024px){.ids-progressbar .ids-progressbar__progress{height:.625rem}}.ids-progressbar .ids-progressbar__progress--none{display:none}.ids-progressbar .ids-progressbar__label{color:var(--IDS-PROGRESSBAR__LABEL-COLOR);display:flex;font-size:1.25rem;font-weight:700;justify-content:center;letter-spacing:-.025rem;line-height:1.5rem;margin-top:.938rem}";
+
+var progressbarLit = css`${unsafeCSS(css_248z)}`;
+
+export { progressbarLit as default };

package/{components → dist/components}/progressbar/progressbar.css

@@ -11,31 +11,31 @@
 }
 
 .ids-progressbar {
-  border: var(--progressbar_border);
-  height: 15px;
+  border: var(--IDS-PROGRESSBAR__BORDER-COLOR);
+  height: 0.938rem;
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: 0.625rem;
   position: relative;
 }
 @media (max-width: 1024px) {
   .ids-progressbar {
-    height: 10px;
+    height: 0.625rem;
   }
 }
 .ids-progressbar .ids-progressbar__progress {
-  left: 0px;
-  background-color: var(--progressbar-fill_background-color);
+  left: 0;
+  background-color: var(--IDS-PROGRESSBAR__PROGRESS-COLOR);
   width: 15%;
   display: block;
-  height: 15px;
-  border-radius: 10px;
+  height: 0.938rem;
+  border-radius: 0.625rem;
   transition: width 0.3s ease;
-  margin-top: -1px;
-  margin-left: -1px;
+  margin-top: -0.063rem;
+  margin-left: -0.063rem;
 }
 @media (max-width: 1024px) {
   .ids-progressbar .ids-progressbar__progress {
-    height: 10px;
+    height: 0.625rem;
   }
 }
 .ids-progressbar .ids-progressbar__progress--none {
@@ -44,10 +44,10 @@
 .ids-progressbar .ids-progressbar__label {
   display: flex;
   justify-content: center;
-  margin-top: 15px;
+  margin-top: 0.938rem;
   font-size: 1.25rem;
-  line-height: 24px;
-  letter-spacing: -0.4px;
-  color: var(--progressbar_color);
+  line-height: 1.5rem;
+  letter-spacing: -0.025rem;
+  color: var(--IDS-PROGRESSBAR__LABEL-COLOR);
   font-weight: 700;
 }

package/dist/components/side-menu/side-menu-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}@media (max-width:1024px){.ids-side-menu.ids-side-menu--hide-on-mobile{display:none}}.ids-side-menu .ids-side-menu__header{background-color:var(--IDS-COLOR-NEUTRAL-100);border-bottom-right-radius:.313rem;border-left:.5rem solid var(--IDS-COLOR-NEUTRAL-100);border-top-right-radius:.313rem;display:flex}.ids-side-menu .ids-side-menu__header .ids-side-menu__header-inner{color:var(--IDS-SIDE-MENU__LINK-COLOR);display:grid;grid-template-columns:auto 1fr;margin-right:.5rem;width:100%}.ids-side-menu .ids-side-menu__header.ids-side-menu--child-leaf .ids-side-menu__header-inner{grid-template-columns:1fr}.ids-side-menu .ids-side-menu__header .ids-side-menu__icon-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;height:2.75rem;outline:inherit;padding:0;position:relative;width:1.5rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__icon-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__icon{left:50%;position:absolute;top:1.125rem;transform:translateX(-50%)}.ids-side-menu .ids-side-menu__header .ids-side-menu__label{line-height:1.625rem;margin:.25rem 0;padding:.313rem 0;text-align:left}.ids-side-menu .ids-side-menu__header .ids-side-menu__link{display:grid;grid-template-columns:1fr auto}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),.ids-side-menu .ids-side-menu__header .ids-side-menu__link a{align-items:flex-start;color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;line-height:1.625rem;margin:.25rem 0;padding:.313rem 0;text-align:left;text-decoration:none!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link a:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover ::slotted(a),.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover a{color:var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);text-decoration:underline!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),.ids-side-menu .ids-side-menu__header .ids-side-menu__link button{align-items:flex-start;background-color:transparent;border:0;border-radius:0;color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;line-height:1.625rem;margin:.25rem 0;padding:.313rem 0;text-align:left;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus{outline:var(--IDS-FOCUS__OUTLINE)}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-COLOR-NEUTRAL-40)!important;outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover ::slotted(button),.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover button{color:var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);text-decoration:underline!important}.ids-side-menu .ids-side-menu__header.ids-side-menu--active{background-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR)}.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__label,.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link{font-weight:700}.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(a),.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(button),.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover a,.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover button{color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:default;text-decoration:none!important}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__header-inner{margin-left:1.5rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-3 .ids-side-menu__header-inner{margin-left:3.125rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-4 .ids-side-menu__header-inner{margin-left:4.625rem}.ids-side-menu .ids-side-menu__label,.ids-side-menu .ids-side-menu__link{font-size:1rem;line-height:1.25rem}.ids-side-menu.ids-side-menu--disabled{cursor:default}.ids-side-menu ::slotted(button):focus,.ids-side-menu ::slotted(button):focus-visible,.ids-side-menu button:focus,.ids-side-menu button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-COLOR-NEUTRAL-40)!important;outline-offset:-.125rem!important}";
+
+var sideMenuLit = css`${unsafeCSS(css_248z)}`;
+
+export { sideMenuLit as default };

package/dist/components/side-menu/side-menu.css

@@ -0,0 +1,178 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+@media (max-width: 1024px) {
+  .ids-side-menu.ids-side-menu--hide-on-mobile {
+    display: none;
+  }
+}
+.ids-side-menu .ids-side-menu__header {
+  border-left: 0.5rem solid var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border-top-right-radius: 0.313rem;
+  border-bottom-right-radius: 0.313rem;
+  display: flex;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__header-inner {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  width: 100%;
+  color: var(--IDS-SIDE-MENU__LINK-COLOR);
+  margin-right: 0.5rem;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--child-leaf .ids-side-menu__header-inner {
+  grid-template-columns: 1fr;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__icon-button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  height: 2.75rem;
+  width: 1.5rem;
+  position: relative;
+  cursor: pointer;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__icon-button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__icon {
+  position: absolute;
+  top: 1.125rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__label {
+  text-align: left;
+  line-height: 1.625rem;
+  margin: 0.25rem 0;
+  padding: 0.313rem 0;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link a {
+  color: var(--IDS-SIDE-MENU__LINK-COLOR);
+  cursor: pointer;
+  text-decoration: none !important;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin: 0.25rem 0;
+  padding: 0.313rem 0;
+  line-height: 1.625rem;
+  text-align: left;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a):focus,
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link a:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover ::slotted(a),
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover a {
+  color: var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);
+  text-decoration: underline !important;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link button {
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--IDS-SIDE-MENU__LINK-COLOR);
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  align-items: flex-start;
+  line-height: 1.625rem;
+  width: 100%;
+  margin: 0.25rem 0;
+  padding: 0.313rem 0;
+  text-align: left;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: -0.125rem !important;
+  outline-color: var(--IDS-COLOR-NEUTRAL-40) !important;
+}
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover ::slotted(button),
+.ids-side-menu .ids-side-menu__header .ids-side-menu__link:hover button {
+  color: var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);
+  text-decoration: underline !important;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active {
+  background-color: var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);
+  border-color: var(--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR);
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__label {
+  font-weight: 700;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link {
+  font-weight: 700;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(a),
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover a,
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(button),
+.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover button {
+  cursor: default;
+  color: var(--IDS-SIDE-MENU__LINK-COLOR);
+  text-decoration: none !important;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__header-inner {
+  margin-left: 1.5rem;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--level-3 .ids-side-menu__header-inner {
+  margin-left: 3.125rem;
+}
+.ids-side-menu .ids-side-menu__header.ids-side-menu--level-4 .ids-side-menu__header-inner {
+  margin-left: 4.625rem;
+}
+.ids-side-menu .ids-side-menu__label,
+.ids-side-menu .ids-side-menu__link {
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+.ids-side-menu.ids-side-menu--disabled {
+  cursor: default;
+}
+.ids-side-menu ::slotted(button):focus, .ids-side-menu ::slotted(button):focus-visible,
+.ids-side-menu button:focus,
+.ids-side-menu button:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: -0.125rem !important;
+  outline-color: var(--IDS-COLOR-NEUTRAL-40) !important;
+}

package/dist/components/side-panel/side-panel-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-side-panel{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);overflow:hidden;z-index:1}.ids-side-panel .ids-side-panel__mobile-menu{background-color:var(--IDS-COLOR-NEUTRAL-100);display:none}.ids-side-panel.ids-side-panel--regular{bottom:0;height:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s linear .2s,visibility .3s,width 0s linear .4s,height 0s linear .4s;visibility:hidden;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:0;box-sizing:border-box;display:flex;flex-direction:column;height:70vh;overflow-x:hidden;padding:1.25rem 1rem 0;position:relative;transform:translateY(100vh);transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{box-sizing:border-box;order:1;overflow-x:hidden;overflow-y:auto;padding-bottom:1.25rem;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--regular .ids-side-panel__inner{padding:.5rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions{margin-right:.313rem;order:0;text-align:right;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100vh;opacity:1;transition:width 0s,height 0s;visibility:visible;width:100%}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(30vh);transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:50vh}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(50vh)}}@media (min-width:1024px){.ids-side-panel.ids-side-panel--regular{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;overflow-x:hidden;position:relative;transform:none;transition:width .3s ease-in-out,opacity 0s linear .3s,height .4s,visibility .4s,transform 0s linear;width:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:100%;padding:1.25rem 0 0 1rem;top:0;transform:none;transition:none}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{width:21.875rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100%;transform:none;transition:width .3s ease-in-out,visibility 0s,opacity 0s,transform 0s linear;width:23.75rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:none;transition:none}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left{border-left:0;border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel{direction:rtl;padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content{direction:ltr}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated{border-left:0;bottom:0;box-shadow:-.188rem 0 .25rem -.125rem rgba(0,0,0,.2);height:100%;left:auto;position:fixed;right:0;top:0;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2);left:0;right:auto}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel{padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show{width:23.75rem}}.ids-side-panel.ids-side-panel--menu{background-color:var(--IDS-COLOR-NEUTRAL-100);border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;height:100%;padding:0;position:relative;width:3.125rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{box-sizing:border-box;display:flex;flex-direction:column;padding:1.25rem 0 0;position:relative;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{box-sizing:border-box;height:100%;margin:-.5rem 0 0 -.5rem;opacity:0;overflow-x:hidden;overflow-y:auto;padding:.5rem;transition:visibility 0s,opacity 0s;visibility:hidden;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__actions{margin-right:1.25rem;text-align:right;width:2.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{border-bottom:.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);border-top:.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);box-sizing:border-box;display:flex;flex-direction:column;gap:1.25rem;opacity:0;padding:1.25rem;text-align:left;transition:visibility 0s,opacity 0s;visibility:hidden}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links,.ids-side-panel.ids-side-panel--menu ::slotted([slot=footer-links]){display:flex;flex-direction:column;gap:.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;height:1.875rem;margin-right:-.25rem;padding:0 .25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger{cursor:pointer;position:relative;transition:.2s;user-select:none}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;display:block;height:.188rem;position:relative;transition:.2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;content:\"\";display:inline-block;height:.188rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:.2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{top:.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after{top:-.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.313rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:2rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:0;bottom:0;left:0;position:fixed;right:0;top:0;width:100%}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__actions{width:auto}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__mobile-menu{display:block;margin-top:2.5rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{opacity:1;transition:visibility 0s,opacity 0s;visibility:visible}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{bottom:0;left:auto;position:fixed;right:calc(100% - 3.125rem);top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:3.125rem;z-index:2}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{transform:translateX(calc(100% - 3.125rem));width:100%}@media (min-width:1024px){.ids-side-panel.ids-side-panel--menu{transition:width .3s ease-in-out}.ids-side-panel.ids-side-panel--menu .ids-side-panel__mobile-menu{display:none!important}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{position:relative;transform:none;transition:none;width:23.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content,.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);height:100%;position:relative;transform:none;transition:width .3s ease-in-out;width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2)}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{position:fixed;transform:translateX(20.625rem);transition:transform .3s cubic-bezier(.4,0,.2,1);width:23.75rem}}";
+
+var sidePanelLit = css`${unsafeCSS(css_248z)}`;
+
+export { sidePanelLit as default };