@inera/ids-design 5.1.2 → 5.2.0

package/components/table/table.css

@@ -1,26 +1,28 @@
 .ids-table {
   table-layout: fixed;
   border-collapse: separate;
-  border-radius: var(--table_broder-radius);
-  border-top: var(--table_border-top);
-  border-left: var(--table_border-lr);
-  border-right: var(--table_border-lr);
-  border-bottom: var(--table_border-bottom);
+  border-radius: var(--IDS-TABLE__BORDER-RADIUS);
+  border-top: var(--IDS-TABLE__BORDER-TOP);
+  border-left: var(--IDS-TABLE__BORDER-LR);
+  border-right: var(--IDS-TABLE__BORDER-LR);
+  border-bottom: var(--IDS-TABLE__BORDER-BOTTOM);
   border-spacing: 0px;
   overflow: hidden;
 }
 .ids-table th {
-  background-color: var(--table-head_background-color);
+  background-color: var(--IDS-TABLE-HEAD__BACKGROUND_COLOR);
   text-align: start;
-  color: var(--table-head_color);
+  color: var(--IDS-COLOR-NEUTRAL-20);
 }
-.ids-table th, .ids-table td {
+.ids-table th,
+.ids-table td {
   padding: 10px;
 }
-.ids-table td, .ids-table th {
-  border-left: var(--table-cell_border);
-  border-top: var(--table-cell_border);
-  color: var(--table-cell_color);
+.ids-table td,
+.ids-table th {
+  border-left: var(--IDS-TABLE-CELL__BORDER);
+  border-top: var(--IDS-TABLE-CELL__BORDER);
+  color: var(--IDS-COLOR-NEUTRAL-20);
 }
 .ids-table tr:first-child th {
   border-top: 0;

package/components/tabs/tab-panel.css

@@ -1,11 +1,3 @@
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
 :host([selected=true]) {
   display: block;
 }

package/components/tabs/tab.css

@@ -1,11 +1,15 @@
-/* 1177 Typography - no margins */
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 :host {
   border-radius: var(--IDS-TAB_BORDER-RADIUS);
 }

package/components/tabs/tabs-lit.js

@@ -1,11 +1,9 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z$2 = ".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: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-select{background-color:var(--IDS-INPUT_BACKGROUND);border:var(--IDS-INPUT_BORDER);border-radius:var(--IDS-INPUT_BORDER-RADIUS);color:var(--IDS-INPUT_COLOR);display:block;font-family:var(--font-family_1)!important;font-size:16px;padding:.75rem 1.25rem}.ids-select:disabled{background:var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);background-image:var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);border:none}.ids-label-wrapper{align-items:center;display:inline-flex;gap:10px}.ids-select :after,.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:25px;top:0;transform:rotate(90deg);width:12px}.ids-select.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);background-image:var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);border:1px solid transparent}.ids-select:disabled{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;border:var(--select_border);border-bottom:var(--IDS-INPUT_BORDER-BOTTOM);cursor:pointer;display:inline-block!important;overflow:hidden;padding-right:50px!important;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light{background-color:#fff}.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: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)}.ids-select:disabled{cursor:default}";
+var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT_BACKGROUND);border:var(--select_border);border-bottom:var(--IDS-INPUT_BORDER-BOTTOM);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:16px;overflow:hidden;padding:.75rem 1.25rem;padding-right:50px!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select:disabled{background:var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);background-image:var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);border:none}.ids-select.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);background-image:var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);border:1px solid transparent}.ids-select:disabled{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--light{background-color:#fff}.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:25px;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)}.ids-select:disabled{cursor:default}";
 
-var css_248z = ".ids-label{color:var(--IDS-FORM__LABEL__COLOR);display:inline-block;font-family:var(--IDS-FORM__LABEL__FONT-FAMILY);font-size:var(--IDS-FORM__LABEL__FONT-SIZE);font-style:normal;font-weight:var(--IDS-FORM__LABEL__FONT-WEIGHT);letter-spacing:var(--IDS-FORM__LABEL__LETTER-SPACING);line-height:var(--IDS-FORM__LABEL__HEIGHT);margin-bottom:5px;min-height:24px;min-width:24px}.ids-label.ids-label--disabled{color:var(--IDS-FORM__LABEL--DISABLED__COLOR);font-style:italic}";
-
-var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)} ${unsafeCSS(css_248z$2)}`;
+var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)}`;
 
 export { tabsLit as default };

package/components/tabs/tabs.css

@@ -1,11 +1,3 @@
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
 .ids-tabs {
   display: flex;
   border-bottom: var(--IDS-TABS_BORDER-BOTTOM);

package/components/tag/tag.css

@@ -1,11 +1,15 @@
-/* 1177 Typography - no margins */
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 /* css classes that need !important */
 /* @mixin ids-icon-close-svg-important($color) {
   background-color: var($color) !important;

package/components/tooltip/tooltip-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tooltip{position:relative!important}.ids-tooltip,.ids-tooltip .ids-tooltip__trigger{display:inline-block}.ids-tooltip .ids-tooltip__content{background-color:#fff;border:1px solid var(--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(--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 = ":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(--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(--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 tooltipLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tooltip/tooltip.css

@@ -1,41 +1,13 @@
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
-/* 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;
+:host {
+  display: inline-flex;
 }
 
-.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-tooltip {
   display: inline-block;
   position: relative !important;
 }
 .ids-tooltip .ids-tooltip__trigger {
-  display: inline-block;
+  display: inline;
 }
 .ids-tooltip .ids-tooltip__content {
   display: none;
@@ -48,7 +20,7 @@
   z-index: 2;
   background-color: white;
   border: 1px solid var(--tooltip_border-color);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   border-radius: var(--IDS-BORDER-RADIUS);
   padding: 10px 20px;
 }

package/global/_partials.css

@@ -1,8 +1,12 @@
-/* 1177 Typography - no margins */
 /*******
-* FORM
+* BUTTONS
 ********/
 /*******
-* Accessibility
+* SCROLLBAR
 ********/
-/* headings */
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/