@inera/ids-design 5.3.0 → 5.4.0

package/{components → dist/components}/tabs/tab.css

@@ -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/dist/components/tabs/tabs-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,9 @@
+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:.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: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)}`;
+
+export { tabsLit as default };

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

@@ -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/dist/components/tag/tag-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+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)}`;
+
+export { tagLit as default };

package/dist/components/tag/tag.css

@@ -0,0 +1,79 @@
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-tag {
+  font-family: var(--IDS-TAG__FONT-FAMILY);
+  font-weight: 400;
+  color: var(--IDS-TAG__COLOR);
+  padding: var(--IDS-TAG__PADDING);
+  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;
+  flex-wrap: wrap;
+  line-height: 1rem;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.ids-tag.ids-tag--interactive {
+  cursor: pointer;
+  border-color: var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);
+  color: var(--IDS-TAG--INTERACTIVE__COLOR);
+  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);
+  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: 0.875rem;
+  height: 0.875rem;
+}
+.ids-tag .ids-tag__close-btn {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  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: 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,%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/dist/components/tooltip/tooltip-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+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)}`;
+
+export { tooltipLit as default };

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

@@ -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 → dist/global}/_partials.css

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