npm - @inera/ids-design - Versions diffs - 5.3.0 → 5.4.1 - Mend

@inera/ids-design 5.3.0 → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/components/tabs/tab.css CHANGED Viewed

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -11,17 +11,17 @@
 * A11Y
 ********/
 :host {
-  border-radius: var(--IDS-TAB_BORDER-RADIUS);
+  border-radius: var(--IDS-TAB__BORDER-RADIUS);
 }
 :host(:not([selected]):focus) {
-  outline: var(--focus_outline);
-  outline-offset: 2px;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: 0.125rem;
 }
 .ids-tab {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -38,11 +38,11 @@
   outline: none;
   justify-content: center;
   align-items: flex-end;
-  padding: 10px 23px 14px 23px;
+  padding: 0.625rem 1.438rem 0.875rem 1.438rem;
   background: var(--IDS-TAB_BACKGROUND-COLOR);
   box-shadow: var(--IDS-TAB_BOX-SHADOW);
-  border-radius: var(--IDS-TAB_BORDER-RADIUS);
-  border: var(--IDS-TAB_BORDER);
+  border-radius: var(--IDS-TAB__BORDER-RADIUS);
+  border: var(--IDS-TAB__BORDER);
   cursor: pointer;
   position: relative;
   -webkit-touch-callout: none;
@@ -56,17 +56,17 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  color: var(--IDS-TAB_COLOR);
+  color: var(--IDS-TAB__COLOR);
   font-weight: 400;
   font-size: 1rem;
 }
 .ids-tab ids-notification-badge {
-  margin-left: 6px;
-  margin-bottom: -2px;
+  margin-left: 0.375rem;
+  margin-bottom: -0.125rem;
 }
 .ids-tab:has(.ids-tab__icon) .ids-tab__label, .ids-tab.ids-tab--has-icon .ids-tab__label {
-  margin-bottom: -7px;
-  line-height: 35px;
+  margin-bottom: -0.438rem;
+  line-height: 2.188rem;
 }
 .ids-tab ::slotted([slot=icon]),
 .ids-tab .ids-icon {
@@ -75,26 +75,26 @@
 }
 .ids-tab:after {
   content: "";
-  height: var(--IDS-TAB--SELECTED--AFTER_HEIGHT);
+  height: var(--IDS-TAB--SELECTED__AFTER-HEIGHT);
   background-color: transparent;
   position: absolute;
-  width: calc(100% + 2px);
-  left: -1px;
-  right: 0px;
-  bottom: var(--IDS-TAB--SELECTED--AFTER_BOTTOM);
+  width: calc(100% + 0.125rem);
+  left: -0.063rem;
+  right: 0;
+  bottom: var(--IDS-TAB--SELECTED__AFTER-BOTTOM);
 }
 .ids-tab.ids-tab--selected {
-  background-color: white;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
   border: var(--IDS-TAB--SELECTED-BORDER);
-  box-shadow: var(--IDS-TAB--SELECTED_BOX-SHADOW);
+  box-shadow: var(--IDS-TAB--SELECTED__BOX-SHADOW);
 }
 .ids-tab.ids-tab--selected .ids-tab__label {
   color: var(--IDS-TAB--SELECTED_COLOR);
 }
 .ids-tab.ids-tab--selected:after {
-  background-color: var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);
+  background-color: var(--IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR);
 }
 .ids-tab: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;
 }

package/components/tabs/tabs-lit.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z$1 = ".ids-tabs{align-items:flex-end;border-bottom:var(--IDS-TABS_BORDER-BOTTOM);display:flex;gap:3px;height:3rem;padding:0 20px;position:relative}.ids-tabs.ids-tabs--unresponsive{display:flex!important}.ids-tabs.ids-tabs--has-icons{height:4.7em}.ids-tabs:before{bottom:0;box-shadow:inset 0 -4px 4px -4px rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED--BEFORE_CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}.ids-tab-panels{position:relative;z-index:1}";
+var css_248z$1 = ".ids-tabs{align-items:flex-end;border-bottom:var(--IDS-TABS__BORDER-BOTTOM);display:flex;gap:.188rem;height:3rem;padding:0 1.25rem;position:relative}.ids-tabs.ids-tabs--unresponsive{display:flex!important}.ids-tabs.ids-tabs--has-icons{height:4.7rem}.ids-tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED__BEFORE-CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}.ids-tab-panels{position:relative;z-index:1}";
-var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-bottom:var(--IDS-INPUT__BORDER);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--font-family_1)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:0;transform:rotate(90deg);width:12px}.ids-select-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}";
+var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light:disabled,.ids-select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:0;transform:rotate(90deg);width:.75rem}.ids-select-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}";
 var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)}`;

package/components/tabs/tabs.css CHANGED Viewed

@@ -1,21 +1,21 @@
 .ids-tabs {
   display: flex;
-  border-bottom: var(--IDS-TABS_BORDER-BOTTOM);
-  gap: 3px;
+  border-bottom: var(--IDS-TABS__BORDER-BOTTOM);
+  gap: 0.188rem;
   position: relative;
   align-items: flex-end;
   height: 3rem;
-  padding: 0px 20px;
+  padding: 0 1.25rem;
 }
 .ids-tabs.ids-tabs--unresponsive {
   display: flex !important;
 }
 .ids-tabs.ids-tabs--has-icons {
-  height: 4.7em;
+  height: 4.7rem;
 }
 .ids-tabs::before {
-  content: var(--IDS-TAB--SELECTED--BEFORE_CONTENT);
-  box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.2) inset;
+  content: var(--IDS-TAB--SELECTED__BEFORE-CONTENT);
+  box-shadow: 0 -0.25rem 0.25rem -0.25rem rgba(0, 0, 0, 0.2) inset;
   position: absolute;
   left: 0;
   right: 0;

package/components/tag/tag-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = ".ids-tag{align-content:center;align-items:center;background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:1px solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-flex;flex-wrap:wrap;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;justify-content:center;line-height:1rem;padding:var(--IDS-TAG__PADDING)}.ids-tag.ids-tag--interactive{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--interactive:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tag.ids-tag--interactive:hover{color:var(--IDS-TAG--INTERACTIVE__COLOR--HOVER)}.ids-tag .ids-tag__close-btn-icon{background-color:var(--IDS-ICON-COLOR);height:14px;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='20' height='20' viewBox='0 0 40 40' aria-hidden='true'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' d='M4.268.732A2.5 2.5 0 0 0 .732 4.268L16.464 20 .733 35.732a2.5 2.5 0 0 0 3.536 3.536L20 23.535l15.732 15.733a2.5 2.5 0 0 0 3.536-3.536L23.535 20 39.269 4.268A2.5 2.5 0 1 0 35.732.732L20 16.464 4.268.733Z' fill='%23396291'/%3E%3C/svg%3E\");mask-size:cover;width:14px}.ids-tag .ids-tag__close-btn{align-items:center;background:none;border:none;border-radius:20px;color:inherit;cursor:pointer;display:flex;font:inherit;height:24px;justify-content:center;margin:-8px -8px -8px 8px;min-height:24px;min-width:24px;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:24px}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:0!important}.ids-tag .ids-tag__close-btn:active .ids-tag__close-btn-icon,.ids-tag .ids-tag__close-btn:focus .ids-tag__close-btn-icon,.ids-tag .ids-tag__close-btn:hover .ids-tag__close-btn-icon{background-color:var(--IDS-ICON-ACTIVE-COLOR);mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='20' height='20' viewBox='0 0 40 40' aria-hidden='true'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' d='M4.268.732A2.5 2.5 0 0 0 .732 4.268L16.464 20 .733 35.732a2.5 2.5 0 0 0 3.536 3.536L20 23.535l15.732 15.733a2.5 2.5 0 0 0 3.536-3.536L23.535 20 39.269 4.268A2.5 2.5 0 1 0 35.732.732L20 16.464 4.268.733Z' fill='%23396291'/%3E%3C/svg%3E\");mask-size:cover}";
+var css_248z = ".ids-tag{align-content:center;align-items:center;background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-flex;flex-wrap:wrap;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;justify-content:center;line-height:1rem;padding:var(--IDS-TAG__PADDING)}.ids-tag.ids-tag--interactive{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--interactive:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--interactive:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag .ids-tag__close-btn-icon{background-color:var(--IDS-ICON__COLOR);height:.875rem;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.268.732A2.5 2.5 0 0 0 .732 4.268L16.464 20 .733 35.732a2.5 2.5 0 0 0 3.536 3.536L20 23.535l15.732 15.733a2.5 2.5 0 0 0 3.536-3.536L23.535 20 39.269 4.268A2.5 2.5 0 1 0 35.732.732L20 16.464 4.268.733Z' fill='%23000'/%3E%3C/svg%3E\");mask-size:cover;width:.875rem}.ids-tag .ids-tag__close-btn{align-items:center;background:none;border:none;border-radius:1.25rem;color:inherit;cursor:pointer;display:flex;font:inherit;height:1.5rem;justify-content:center;margin:-.5rem -.5rem -.5rem .5rem;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:1.5rem}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn:active .ids-tag__close-btn-icon,.ids-tag .ids-tag__close-btn:focus .ids-tag__close-btn-icon,.ids-tag .ids-tag__close-btn:hover .ids-tag__close-btn-icon{background-color:var(--IDS-ICON--ACTIVE__COLOR);mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.268.732A2.5 2.5 0 0 0 .732 4.268L16.464 20 .733 35.732a2.5 2.5 0 0 0 3.536 3.536L20 23.535l15.732 15.733a2.5 2.5 0 0 0 3.536-3.536L23.535 20 39.269 4.268A2.5 2.5 0 1 0 35.732.732L20 16.464 4.268.733Z' fill='%23000'/%3E%3C/svg%3E\");mask-size:cover}";
 var tagLit = css`${unsafeCSS(css_248z)}`;

package/components/tag/tag.css CHANGED Viewed

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -10,36 +10,12 @@
 /*******
 * A11Y
 ********/
-/* css classes that need !important */
-/* @mixin ids-icon-close-svg-important($color) {
-  background-color: var($color) !important;
-  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="%23396291"></path></svg>') !important;
-  mask-size: cover !important;
-}
-.ids-icon__close {
-  @include ids-icon-close-svg-important(--IDS-ICON-COLOR);
-}
-.ids-icon__close-active {
-  @include ids-icon-close-svg-important(--IDS-ICON-ACTIVE-COLOR);
-}
-.ids-icon__close-interactive {
-  @include ids-icon-close-svg-important(--IDS-ICON-COLOR);
-  &:hover,
-  &:focus,
-  &:active {
-    @include ids-icon-close-svg-important(--IDS-ICON-ACTIVE-COLOR);
-  }
-} */
 .ids-tag {
   font-family: var(--IDS-TAG__FONT-FAMILY);
   font-weight: 400;
   color: var(--IDS-TAG__COLOR);
   padding: var(--IDS-TAG__PADDING);
-  border: 1px solid var(--IDS-TAG__BORDER-COLOR);
+  border: 0.063rem solid var(--IDS-TAG__BORDER-COLOR);
   background-color: var(--IDS-TAG__BACKGROUND-COLOR);
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
   display: inline-flex;
@@ -56,22 +32,22 @@
   font-weight: var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT);
 }
 .ids-tag.ids-tag--interactive:focus {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 .ids-tag.ids-tag--interactive:hover {
-  color: var(--IDS-TAG--INTERACTIVE__COLOR--HOVER);
+  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
 }
 .ids-tag .ids-tag__close-btn-icon {
-  background-color: var(--IDS-ICON-COLOR);
-  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="%23396291"></path></svg>');
+  background-color: var(--IDS-ICON__COLOR);
+  mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z' fill='black'/%3E%3C/svg%3E");
   mask-size: cover;
-  width: 14px;
-  height: 14px;
+  width: 0.875rem;
+  height: 0.875rem;
 }
 .ids-tag .ids-tag__close-btn {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -84,20 +60,20 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   display: flex;
-  border-radius: 20px;
-  margin: -8px -8px -8px 8px;
+  border-radius: 1.25rem;
+  margin: -0.5rem -0.5rem -0.5rem 0.5rem;
   justify-content: center;
   align-items: center;
 }
 .ids-tag .ids-tag__close-btn:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: 0 !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-tag .ids-tag__close-btn:hover .ids-tag__close-btn-icon, .ids-tag .ids-tag__close-btn:focus .ids-tag__close-btn-icon, .ids-tag .ids-tag__close-btn:active .ids-tag__close-btn-icon {
-  background-color: var(--IDS-ICON-ACTIVE-COLOR);
-  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="%23396291"></path></svg>');
+  background-color: var(--IDS-ICON--ACTIVE__COLOR);
+  mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z' fill='black'/%3E%3C/svg%3E");
   mask-size: cover;
 }

package/components/tooltip/tooltip-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = ":host{display:inline-flex}.ids-tooltip{display:inline-block;position:relative!important}.ids-tooltip .ids-tooltip__trigger{display:inline}.ids-tooltip .ids-tooltip__content{background-color:#fff;border:1px solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;max-width:90vw;padding:10px 20px;position:absolute;text-align:left;width:max-content;z-index:2}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-10px;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-10px;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-10px;left:50%;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-10px;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
+var css_248z = ".ids-tooltip{display:inline-block;position:relative!important}.ids-tooltip .ids-tooltip__trigger{display:inline}.ids-tooltip .ids-tooltip__content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;max-width:90vw;padding:.625rem 1.25rem;position:absolute;text-align:left;width:max-content;z-index:2}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-.625rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-.625rem;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-.625rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-.625rem;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-.625rem;left:50%;right:auto;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-.625rem;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
 var tooltipLit = css`${unsafeCSS(css_248z)}`;

package/components/tooltip/tooltip.css CHANGED Viewed

@@ -1,7 +1,3 @@
-:host {
-  display: inline-flex;
-}
 .ids-tooltip {
   display: inline-block;
   position: relative !important;
@@ -18,41 +14,42 @@
   width: max-content;
   max-width: 90vw;
   z-index: 2;
-  background-color: white;
-  border: 1px solid var(--IDS-TOOLTIP__BORDER-COLOR);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border: 0.063rem solid var(--IDS-TOOLTIP__BORDER-COLOR);
+  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
   border-radius: var(--IDS-BORDER-RADIUS);
-  padding: 10px 20px;
+  padding: 0.625rem 1.25rem;
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left {
   left: 0;
   transform: translateY(-100%);
-  top: -10px;
+  top: -0.625rem;
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--top {
   left: 50%;
   transform: translate(-50%, -100%);
-  top: -10px;
+  top: -0.625rem;
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right {
   right: 0;
   transform: translateY(-100%);
-  top: -10px;
+  top: -0.625rem;
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left {
   left: 0;
   transform: translateY(100%);
-  bottom: -10px;
+  bottom: -0.625rem;
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom {
   left: 50%;
+  right: auto;
   transform: translate(-50%, 100%);
-  bottom: -10px;
+  bottom: -0.625rem;
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right {
   right: 0;
   transform: translateY(100%);
-  bottom: -10px;
+  bottom: -0.625rem;
 }
 .ids-tooltip:focus-within .ids-tooltip__content, .ids-tooltip:hover .ids-tooltip__content {
   display: inline-block;

package/global/_partials.css CHANGED Viewed

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM