@siemens/ix 1.1.1 → 1.2.0

package/dist/siemens-ix/siemens-ix.css

@@ -16046,7 +16046,7 @@ textarea.form-control-lg {
   --theme-color-inv-weak-text: rgba(0, 0, 0, 0.3);
   --theme-color-lightbox: rgba(0, 0, 0, 0.55);
   --theme-color-backdrop: rgba(16, 24, 28, 0.85);
-  --theme-color-input-focus: #00ffb9;
+  --theme-color-input--focus: #00ffb9;
   --theme-app-header--color: rgba(255, 255, 255, 0.85);
   --theme-app-header--background: #555f69;
   --theme-app-header--border-color: rgba(0, 0, 0, 0);
@@ -16968,7 +16968,7 @@ textarea.form-control-lg {
   --theme-color-lightbox: rgba(255, 255, 255, 0.6);
   --theme-color-7: #879baa;
   --theme-color-backdrop: rgba(255, 255, 255, 0.85);
-  --theme-color-input-focus: #00d7a0;
+  --theme-color-input--focus: #00d7a0;
   --theme-app-header--color: rgba(255, 255, 255, 0.85);
   --theme-app-header--background: #555f69;
   --theme-app-header--border-color: rgba(0, 0, 0, 0);
@@ -18094,7 +18094,7 @@ a[href] .glyph::before {
   padding: 0;
   padding-bottom: 0.25rem;
   border: none;
-  align-items: flex-start;
+  align-items: center;
 }
 .modal-header [data-close-button] {
   margin-left: 1rem;
@@ -18199,6 +18199,7 @@ a[href] .glyph::before {
   color: var(--theme-btn-primary--color--selected-active);
 }
 .btn-primary.disabled, .btn-primary:disabled {
+  pointer-events: none;
   cursor: initial;
   border-color: var(--theme-btn-primary--border-color--disabled);
   background-color: var(--theme-btn-primary--background--disabled);
@@ -18242,6 +18243,7 @@ a[href] .glyph::before {
   color: var(--theme-btn-outline-primary--color--selected-active);
 }
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  pointer-events: none;
   cursor: initial;
   border-color: var(--theme-btn-outline-primary--border-color--disabled);
   background-color: var(--theme-btn-outline-primary--background--disabled);
@@ -18284,6 +18286,7 @@ a[href] .glyph::before {
   color: var(--theme-btn-invisible-primary--color--selected-active);
 }
 .btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
+  pointer-events: none;
   cursor: initial;
   background-color: var(--theme-btn-invisible-primary--background--disabled);
   color: var(--theme-btn-invisible-primary--color--disabled);
@@ -18326,6 +18329,7 @@ a[href] .glyph::before {
   color: var(--theme-btn-secondary--color--selected-active);
 }
 .btn-secondary.disabled, .btn-secondary:disabled {
+  pointer-events: none;
   cursor: initial;
   border-color: var(--theme-btn-secondary--border-color--disabled);
   background-color: var(--theme-btn-secondary--background--disabled);
@@ -18369,6 +18373,7 @@ a[href] .glyph::before {
   color: var(--theme-btn-outline-secondary--color--selected-active);
 }
 .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  pointer-events: none;
   cursor: initial;
   border-color: var(--theme-btn-outline-secondary--border-color--disabled);
   background-color: var(--theme-btn-outline-secondary--background--disabled);
@@ -18411,6 +18416,7 @@ a[href] .glyph::before {
   color: var(--theme-btn-invisible-secondary--color--selected-active);
 }
 .btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
+  pointer-events: none;
   cursor: initial;
   background-color: var(--theme-btn-invisible-secondary--background--disabled);
   color: var(--theme-btn-invisible-secondary--color--disabled);
@@ -18432,18 +18438,6 @@ a[href] .glyph::before {
   width: 2rem;
 }
 
-.btn-icon-xs {
-  height: 1rem;
-  width: 1rem;
-  min-width: 1rem;
-}
-
-.btn-icon-s {
-  height: 1.5rem;
-  width: 1.5rem;
-  min-width: 1.5rem;
-}
-
 /*
  * SPDX-FileCopyrightText: 2022 Siemens AG
  *
@@ -18655,23 +18649,21 @@ button.dropdown-toggle::after {
 /* Base for label styling */
 [type=checkbox]:not(:checked),
 [type=checkbox]:checked {
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
   position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.ag-checkbox-input-wrapper [type=checkbox]:not(:checked),
-.ag-checkbox-input-wrapper [type=checkbox]:checked {
-  position: absolute;
-  visibility: unset;
+  white-space: nowrap;
 }
 
 [type=checkbox]:not(:checked) + label,
 [type=checkbox]:checked + label {
   position: relative;
-  display: flex;
-  align-items: center;
-  line-height: 1rem;
+  display: inline-flex;
+  align-items: flex-start;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -18686,6 +18678,10 @@ button.dropdown-toggle::after {
   content: "";
   width: 1.125rem;
   height: 1.125rem;
+  min-width: 1.125rem;
+  min-height: 1.125rem;
+  max-width: 1.125rem;
+  max-height: 1.125rem;
   float: left;
   margin-right: 0.5rem;
   background-repeat: no-repeat;
@@ -18734,8 +18730,7 @@ button.dropdown-toggle::after {
   border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
   border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
   position: absolute;
-  top: 0.3rem;
-  left: 0.35rem;
+  margin: 0.3125rem 0.3125rem 0.1875rem;
   transform: rotate(-53deg) scale(2);
 }
 [type=checkbox]:checked:hover + label:before {
@@ -18766,8 +18761,7 @@ button.dropdown-toggle::after {
   height: 0.125rem;
   border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
   position: absolute;
-  top: 0.5rem;
-  left: 0.25rem;
+  margin: 0.5rem 0 0 0.25rem;
 }
 [type=checkbox]:indeterminate + label:before {
   background-color: var(--theme-checkbox-mixed--background);
@@ -18804,15 +18798,21 @@ button.dropdown-toggle::after {
 /* Base for label styling */
 [type=radio]:not(:checked),
 [type=radio]:checked {
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
   position: absolute;
-  opacity: 0;
-  pointer-events: none;
+  white-space: nowrap;
 }
 
 [type=radio]:not(:checked) + label,
 [type=radio]:checked + label {
+  display: inline-flex;
+  align-items: flex-start;
   position: relative;
-  line-height: 1.25rem;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -18828,6 +18828,10 @@ button.dropdown-toggle::after {
   content: "";
   width: 1.25rem;
   height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  max-width: 1.25rem;
+  max-height: 1.25rem;
   float: left;
   margin-right: 0.5rem;
   background-repeat: no-repeat;
@@ -18899,35 +18903,6 @@ button.dropdown-toggle::after {
   opacity: 0.5;
 }
 
-[type=radio]:indeterminate + label:after {
-  content: "";
-  position: relative;
-  display: block;
-  width: 0.875rem;
-  height: 0.0625rem;
-  border-bottom: 0.125rem solid var(--theme-radiobtn-mixed--color);
-  transform: translateX(0.3125rem) translateY(-0.8rem);
-}
-[type=radio]:indeterminate + label:before {
-  background-color: var(--theme-radiobtn-mixed--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color);
-}
-[type=radio]:indeterminate:hover + label:before {
-  background-color: var(--theme-radiobtn-mixed--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--hover);
-}
-[type=radio]:indeterminate:active + label:before {
-  background-color: var(--theme-radiobtn-mixed--background--active);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--active);
-}
-[type=radio]:indeterminate:disabled + label::before {
-  background-color: var(--theme-radiobtn-mixed--background--disabled);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--disabled);
-}
-[type=radio]:indeterminate:disabled + label::after {
-  border-color: var(--theme-radiobtn-mixed--color--disabled);
-}
-
 [type=radio]:disabled + label {
   color: var(--theme-radiobtn-label--color--disabled);
 }

package/dist/siemens-ix/siemens-ix.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./p-5c038d1d.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i(JSON.parse('[["p-b7a46add",[[6,"ix-icon",{"size":[1],"color":[1],"name":[513]}]]],["p-b8849072",[[2,"ix-datetime-picker",{"range":[4],"showHour":[4,"show-hour"],"showMinutes":[4,"show-minutes"],"showSeconds":[4,"show-seconds"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"dateFormat":[1,"date-format"],"timeFormat":[1,"time-format"],"from":[1],"to":[1],"time":[1],"showTimeReference":[8,"show-time-reference"],"eventDelimiter":[1,"event-delimiter"],"timeReference":[1,"time-reference"],"textSelectDate":[1,"text-select-date"]}]]],["p-dc8f82d5",[[0,"ix-modal-example"]]],["p-5b4399b3",[[6,"ix-split-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"label":[1],"icon":[1],"splitIcon":[1,"split-icon"],"disabled":[4],"placement":[1],"toggle":[32]}],[2,"ix-split-button-item",{"icon":[1],"label":[1]}]]],["p-44ab1dce",[[6,"ix-breadcrumb",{"visibleItemCount":[2,"visible-item-count"],"nextItems":[16],"ghost":[4],"previousButtonRef":[32],"nextButtonRef":[32],"items":[32]}],[6,"ix-breadcrumb-item",{"label":[1],"icon":[1]}]]],["p-0cdac3da",[[6,"ix-flip-tile",{"state":[1],"footer":[1],"index":[32],"isFlipAnimationActive":[32]}],[1,"ix-flip-tile-content"]]],["p-fca4a226",[[2,"ix-category-filter",{"initialState":[16],"filterState":[16],"placeholder":[1],"categories":[16],"nonSelectableCategories":[16],"suggestions":[16],"icon":[1],"hideIcon":[4,"hide-icon"],"repeatCategories":[4,"repeat-categories"],"tmpDisableScrollIntoView":[4,"tmp-disable-scroll-into-view"],"labelCategories":[1,"label-categories"],"i18nPlainText":[1,"i-1-8n-plain-text"],"hasFocus":[32],"showCategorySelection":[32],"categoryLogicalOperator":[32],"inputValue":[32],"category":[32],"filterTokens":[32],"offsetDropdownX":[32],"offsetDropdownY":[32],"maxHeightDropdown":[32],"maxWidthDropdown":[32]},[[9,"resize","setDropdownOffset"]]]]],["p-8e60010d",[[6,"ix-drawer",{"show":[1028],"closeOnClickOutside":[4,"close-on-click-outside"],"fullHeight":[4,"full-height"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"],"width":[8],"toggleDrawer":[64]}]]],["p-b49fbfc3",[[2,"ix-expanding-search",{"icon":[1],"placeholder":[1],"value":[1025],"isFieldChanged":[32],"expanded":[32],"hasFocus":[32]}]]],["p-1cd8f35f",[[6,"ix-message-bar",{"type":[1],"dismissible":[4],"icon":[32],"color":[32]}]]],["p-72b5c8d5",[[2,"ix-upload",{"accept":[1],"multiple":[4],"multiline":[4],"disabled":[4],"state":[1],"selectFileText":[1,"select-file-text"],"loadingText":[1,"loading-text"],"uploadFailedText":[1,"upload-failed-text"],"uploadSuccessText":[1,"upload-success-text"],"i18nUploadFile":[1,"i-1-8n-upload-file"],"i18nUploadDisabled":[1,"i-1-8n-upload-disabled"],"isFileOver":[32],"setFilesToUpload":[64]}]]],["p-a4ed41f9",[[6,"ix-animated-tabs",{"disableAnimations":[4,"disable-animations"],"selectedIndex":[2,"selected-index"],"tabPlacement":[1,"tab-placement"],"tabs":[32],"activeIndex":[32]},[[1,"mouseup","onMouseDown"]]],[6,"ix-animated-tab",{"icon":[1],"count":[514]}]]],["p-56bba5f9",[[6,"ix-workflow-step",{"vertical":[4],"disabled":[4],"status":[1],"clickable":[4],"selected":[1028],"position":[1],"iconName":[32],"iconColor":[32]}],[6,"ix-workflow-steps",{"vertical":[4],"linear":[4],"clickable":[4],"selectedIndex":[2,"selected-index"]}]]],["p-25fda9f7",[[1,"ix-application-header",{"name":[1]}]]],["p-c1674778",[[6,"ix-basic-navigation",{"applicationName":[1,"application-name"],"hideHeader":[4,"hide-header"]}]]],["p-e5da6672",[[6,"ix-chip",{"variant":[513],"active":[4],"closable":[4],"icon":[1],"background":[1],"color":[1],"outline":[4]}]]],["p-746ebc92",[[2,"ix-kpi",{"label":[1],"value":[8],"unit":[1],"state":[1],"orientation":[1]}]]],["p-afefc17c",[[6,"ix-pill",{"variant":[513],"outline":[4],"icon":[1],"background":[1],"color":[1],"alignLeft":[4,"align-left"]}]]],["p-0a85cdff",[[6,"ix-event-list",{"itemHeight":[8,"item-height"],"compact":[4],"animated":[4],"chevron":[4]}],[4,"ix-event-list-item",{"color":[1],"selected":[4],"disabled":[4],"chevron":[4],"opacity":[2]},[[1,"click","handleItemClick"]]]]],["p-87c46ff3",[[6,"ix-blind",{"collapsed":[1540],"label":[1]}]]],["p-6d075808",[[6,"ix-counter-pill",{"variant":[513],"outline":[4],"background":[1],"color":[1],"alignLeft":[4,"align-left"]}]]],["p-4f2fbbb5",[[6,"ix-input-group"]]],["p-e0c85889",[[6,"ix-tile",{"size":[1]}]]],["p-18652f43",[[2,"ix-toggle",{"checked":[1540],"disabled":[4],"indeterminate":[4],"color":[1],"textOn":[1,"text-on"],"textOff":[1,"text-off"],"textIndeterminate":[1,"text-indeterminate"],"hideText":[4,"hide-text"]},[[8,"keydown","onKeyDown"]]]]],["p-7fb73253",[[6,"ix-validation-tooltip",{"message":[1],"placement":[1],"isInputValid":[32]}]]],["p-b18d15c7",[[2,"my-component"]]],["p-a8b6454f",[[6,"ix-select",{"selectedIndices":[1025,"selected-indices"],"allowClear":[4,"allow-clear"],"mode":[1],"editable":[4],"disabled":[4],"readonly":[4],"i18nPlaceholder":[1,"i-1-8n-placeholder"],"i18nPlaceholderEditable":[1,"i-1-8n-placeholder-editable"],"i18nSelectListHeader":[1,"i-1-8n-select-list-header"],"dropdownShow":[32],"value":[32],"dropdownWrapperRef":[32],"dropdownAnchor":[32],"isDropdownEmpty":[32],"hasFocus":[32],"navigationItem":[32],"inputFilterText":[32],"inputValue":[32]},[[0,"itemClick","onItemClicked"],[8,"keydown","onKeyDown"]]],[2,"ix-select-item",{"label":[513],"value":[520],"selected":[4],"hover":[4],"onItemClick":[64]}]]],["p-c0a126c6",[[6,"ix-group",{"suppressHeaderSelection":[4,"suppress-header-selection"],"header":[1],"subHeader":[1,"sub-header"],"collapsed":[1540],"selected":[1540],"index":[1538],"expandOnHeaderClick":[4,"expand-on-header-click"],"dropdownTriggerRef":[32]},[[8,"keydown","onKeyDown"]]],[6,"ix-group-dropdown-item",{"label":[1],"icon":[1]}],[6,"ix-group-item",{"icon":[1],"text":[1],"secondaryText":[1,"secondary-text"],"suppressSelection":[4,"suppress-selection"],"selected":[4],"focusable":[4],"index":[2]},[[1,"click","clickListen"]]]]],["p-0e3aab52",[[6,"ix-map-navigation",{"applicationName":[1,"application-name"],"navigationTitle":[1,"navigation-title"],"hideContextMenu":[4,"hide-context-menu"],"isSidebarOpen":[32],"openOverlay":[64],"closeOverlay":[64]}],[6,"ix-map-navigation-overlay",{"name":[1],"icon":[1],"color":[1]}]]],["p-9cc43bf2",[[2,"ix-toast-container",{"containerId":[1,"container-id"],"containerClass":[1,"container-class"],"position":[1],"showToast":[64]}],[6,"ix-toast",{"type":[1],"toastTitle":[1,"toast-title"],"autoCloseDelay":[2,"auto-close-delay"],"autoClose":[4,"auto-close"],"icon":[1],"iconColor":[1,"icon-color"],"progress":[32],"isRunning":[32],"touched":[32]}]]],["p-d62d2304",[[6,"ix-tree",{"root":[1],"model":[16],"renderItem":[16],"context":[1040]}],[6,"ix-tree-item",{"text":[1],"hasChildren":[4,"has-children"],"context":[16]}]]],["p-477681a5",[[2,"ix-spinner",{"variant":[1],"size":[1]}]]],["p-8c5948e2",[[6,"ix-menu-about",{"activeTabLabel":[1025,"active-tab-label"],"label":[1],"show":[4],"labels":[32]}],[6,"ix-menu-avatar",{"top":[1],"bottom":[1],"i18nLogout":[1,"i-1-8n-logout"],"displayMenu":[32]},[[1,"click","toggleMenu"]]],[6,"ix-menu-settings",{"activeTabLabel":[1025,"active-tab-label"],"label":[1],"show":[4]}],[4,"ix-menu",{"showSettings":[1028,"show-settings"],"showAbout":[1028,"show-about"],"enableToggleTheme":[4,"enable-toggle-theme"],"enableSettings":[4,"enable-settings"],"enableMapExpand":[4,"enable-map-expand"],"applicationName":[1,"application-name"],"applicationDescription":[1,"application-description"],"maxVisibleMenuItems":[2,"max-visible-menu-items"],"i18nLegal":[1,"i-1-8n-legal"],"i18nSettings":[1,"i-1-8n-settings"],"i18nToggleTheme":[1,"i-1-8n-toggle-theme"],"i18nExpand":[1,"i-1-8n-expand"],"i18nCollapse":[1,"i-1-8n-collapse"],"i18nMore":[1,"i-1-8n-more"],"expand":[1540],"showMoreItems":[32],"visibleMenuItems":[32],"countMoreNotifications":[32],"mapExpand":[32],"activeTab":[32],"isMoreTabEmpty":[32],"toggleMapExpand":[64],"toggleMenu":[64],"toggleSettings":[64],"toggleAbout":[64]},[[9,"resize","onWindowResize"]]],[6,"ix-menu-about-news",{"show":[1540],"label":[1],"i18nShowMore":[1,"i-1-8n-show-more"],"aboutItemLabel":[1,"about-item-label"],"offsetBottom":[2,"offset-bottom"],"expanded":[4]}],[6,"ix-menu-about-item",{"label":[513]}],[6,"ix-menu-settings-item",{"label":[1]}],[2,"ix-menu-avatar-item",{"icon":[1],"label":[1]}],[4,"ix-menu-item",{"home":[4],"bottom":[4],"tabIcon":[1,"tab-icon"],"notifications":[2],"active":[4],"disabled":[4],"title":[32]}]]],["p-1d1eeeea",[[2,"ix-date-picker",{"format":[1],"range":[4],"individual":[4],"corners":[1],"from":[1],"to":[1],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"eventDelimiter":[1,"event-delimiter"],"textSelectDate":[1,"text-select-date"],"yearValue":[32],"today":[32],"monthValue":[32],"calendar":[32],"years":[32],"tempYear":[32],"tempMonth":[32],"start":[32],"end":[32],"dropdownButtonRef":[32],"yearContainerRef":[32],"getCurrentDate":[64]}],[2,"ix-time-picker",{"format":[1],"corners":[1],"individual":[4],"showHour":[4,"show-hour"],"showMinutes":[4,"show-minutes"],"showSeconds":[4,"show-seconds"],"time":[1],"showTimeReference":[1032,"show-time-reference"],"timeReference":[1,"time-reference"],"textSelectTime":[1,"text-select-time"],"hourInputRef":[32],"minuteInputRef":[32],"secondInputRef":[32],"referenceInputRef":[32],"getCurrentTime":[64]}]]],["p-d1a17dd8",[[6,"ix-filter-chip",{"disabled":[4]}]]],["p-aa620cc7",[[4,"ix-tab-item",{"selected":[4],"disabled":[4],"small":[4],"icon":[4],"rounded":[4],"counter":[2],"layout":[1],"placement":[1]}]]],["p-f34f7e30",[[4,"ix-tabs",{"small":[4],"rounded":[4],"selected":[1026],"layout":[1],"placement":[1],"totalItems":[32],"currentScrollAmount":[32],"scrollAmount":[32],"scrollActionAmount":[32]},[[9,"resize","onWindowResize"]]]]],["p-0419f23d",[[2,"ix-modal-container",{"showModal":[64]}],[6,"ix-modal",{"animation":[4],"ariaDescribedBy":[1,"aria-described-by"],"ariaLabelledBy":[1,"aria-labelled-by"],"backdrop":[8],"backdropClass":[1,"backdrop-class"],"beforeDismiss":[16],"centered":[4],"content":[1],"keyboard":[4],"icon":[1],"iconColor":[1,"icon-color"],"modalDialogClass":[1,"modal-dialog-class"],"scrollable":[4],"size":[1],"headerTitle":[1,"header-title"],"windowClass":[1,"window-class"],"dismiss":[64],"close":[64]}]]],["p-38a598ed",[[6,"ix-date-time-card",{"individual":[4],"corners":[1]}]]],["p-eff31ef4",[[6,"ix-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"selected":[4],"disabled":[516],"type":[1]}]]],["p-d5199425",[[6,"ix-dropdown-item",{"label":[1],"icon":[1],"hover":[4],"disabled":[4],"checked":[4],"emitItemClick":[64]}],[1,"ix-dropdown",{"show":[1540],"trigger":[1],"anchor":[1],"closeBehavior":[8,"close-behavior"],"placement":[1],"positioningStrategy":[1,"positioning-strategy"],"adjustDropdownWidthToReferenceWith":[4,"adjust-dropdown-width-to-reference-with"],"adjustDropdownWidthToReferenceWidth":[4,"adjust-dropdown-width-to-reference-width"],"header":[1],"updatePosition":[64]},[[8,"click","clickOutside"]]]]],["p-161561ef",[[6,"ix-icon-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"oval":[4],"icon":[1],"size":[1],"color":[1],"selected":[4],"disabled":[4],"type":[1]}]]]]'),e)));
+import{p as e,b as i}from"./p-05c16b94.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i(JSON.parse('[["p-72f851ae",[[6,"ix-icon",{"size":[1],"color":[1],"name":[513]}]]],["p-9b5290d4",[[2,"ix-datetime-picker",{"range":[4],"showHour":[4,"show-hour"],"showMinutes":[4,"show-minutes"],"showSeconds":[4,"show-seconds"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"dateFormat":[1,"date-format"],"timeFormat":[1,"time-format"],"from":[1],"to":[1],"time":[1],"showTimeReference":[8,"show-time-reference"],"eventDelimiter":[1,"event-delimiter"],"timeReference":[1,"time-reference"],"textSelectDate":[1,"text-select-date"]}]]],["p-eed28e55",[[0,"ix-modal-example"]]],["p-9e90827e",[[6,"ix-split-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"label":[1],"icon":[1],"splitIcon":[1,"split-icon"],"disabled":[4],"placement":[1],"toggle":[32]}],[2,"ix-split-button-item",{"icon":[1],"label":[1]}]]],["p-cc0f6f6b",[[6,"ix-breadcrumb",{"visibleItemCount":[2,"visible-item-count"],"nextItems":[16],"ghost":[4],"previousButtonRef":[32],"nextButtonRef":[32],"items":[32]}],[6,"ix-breadcrumb-item",{"label":[1],"icon":[1]}]]],["p-8a7141a6",[[6,"ix-flip-tile",{"state":[1],"footer":[1],"index":[32],"isFlipAnimationActive":[32]}],[1,"ix-flip-tile-content"]]],["p-a12f6079",[[2,"ix-category-filter",{"initialState":[16],"filterState":[16],"placeholder":[1],"categories":[16],"nonSelectableCategories":[16],"suggestions":[16],"icon":[1],"hideIcon":[4,"hide-icon"],"repeatCategories":[4,"repeat-categories"],"tmpDisableScrollIntoView":[4,"tmp-disable-scroll-into-view"],"labelCategories":[1,"label-categories"],"i18nPlainText":[1,"i-1-8n-plain-text"],"hasFocus":[32],"showCategorySelection":[32],"categoryLogicalOperator":[32],"inputValue":[32],"category":[32],"filterTokens":[32],"offsetDropdownX":[32],"offsetDropdownY":[32],"maxHeightDropdown":[32],"maxWidthDropdown":[32]},[[9,"resize","setDropdownOffset"]]]]],["p-e7621b0a",[[6,"ix-drawer",{"show":[1028],"closeOnClickOutside":[4,"close-on-click-outside"],"fullHeight":[4,"full-height"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"],"width":[8],"toggleDrawer":[64]}]]],["p-1cf3348f",[[2,"ix-expanding-search",{"icon":[1],"placeholder":[1],"value":[1025],"isFieldChanged":[32],"expanded":[32],"hasFocus":[32]}]]],["p-592f1ed3",[[6,"ix-message-bar",{"type":[1],"dismissible":[4],"icon":[32],"color":[32]}]]],["p-f7be9635",[[2,"ix-upload",{"accept":[1],"multiple":[4],"multiline":[4],"disabled":[4],"state":[1],"selectFileText":[1,"select-file-text"],"loadingText":[1,"loading-text"],"uploadFailedText":[1,"upload-failed-text"],"uploadSuccessText":[1,"upload-success-text"],"i18nUploadFile":[1,"i-1-8n-upload-file"],"i18nUploadDisabled":[1,"i-1-8n-upload-disabled"],"isFileOver":[32],"setFilesToUpload":[64]}]]],["p-a88618e3",[[6,"ix-animated-tabs",{"disableAnimations":[4,"disable-animations"],"selectedIndex":[2,"selected-index"],"tabPlacement":[1,"tab-placement"],"tabs":[32],"activeIndex":[32]},[[1,"mouseup","onMouseDown"]]],[6,"ix-animated-tab",{"icon":[1],"count":[514]}]]],["p-4b170382",[[6,"ix-workflow-step",{"vertical":[4],"disabled":[4],"status":[1],"clickable":[4],"selected":[1028],"position":[1],"iconName":[32],"iconColor":[32]}],[6,"ix-workflow-steps",{"vertical":[4],"linear":[4],"clickable":[4],"selectedIndex":[2,"selected-index"]}]]],["p-c993560f",[[1,"ix-application-header",{"name":[1]}]]],["p-2e24ae23",[[6,"ix-basic-navigation",{"applicationName":[1,"application-name"],"hideHeader":[4,"hide-header"]}]]],["p-47d55e3d",[[6,"ix-chip",{"variant":[513],"active":[4],"closable":[4],"icon":[1],"background":[1],"color":[1],"outline":[4]}]]],["p-ea333007",[[2,"ix-kpi",{"label":[1],"value":[8],"unit":[1],"state":[1],"orientation":[1]}]]],["p-5e222be2",[[6,"ix-pill",{"variant":[513],"outline":[4],"icon":[1],"background":[1],"color":[1],"alignLeft":[4,"align-left"]}]]],["p-d0bb8225",[[6,"ix-event-list",{"itemHeight":[8,"item-height"],"compact":[4],"animated":[4],"chevron":[4]}],[4,"ix-event-list-item",{"color":[1],"selected":[4],"disabled":[4],"chevron":[4],"opacity":[2]},[[1,"click","handleItemClick"]]]]],["p-e2925222",[[6,"ix-blind",{"collapsed":[1540],"label":[1]}]]],["p-0a8cfa42",[[6,"ix-counter-pill",{"variant":[513],"outline":[4],"background":[1],"color":[1],"alignLeft":[4,"align-left"]}]]],["p-150d7a02",[[6,"ix-input-group"]]],["p-33283dbf",[[6,"ix-tile",{"size":[1]}]]],["p-8b4e4718",[[2,"ix-toggle",{"checked":[1540],"disabled":[4],"indeterminate":[4],"color":[1],"textOn":[1,"text-on"],"textOff":[1,"text-off"],"textIndeterminate":[1,"text-indeterminate"],"hideText":[4,"hide-text"]},[[8,"keydown","onKeyDown"]]]]],["p-d8688602",[[6,"ix-validation-tooltip",{"message":[1],"placement":[1],"isInputValid":[32]}]]],["p-be641020",[[2,"my-component"]]],["p-1fe97752",[[6,"ix-select",{"selectedIndices":[1025,"selected-indices"],"allowClear":[4,"allow-clear"],"mode":[1],"editable":[4],"disabled":[4],"readonly":[4],"i18nPlaceholder":[1,"i-1-8n-placeholder"],"i18nPlaceholderEditable":[1,"i-1-8n-placeholder-editable"],"i18nSelectListHeader":[1,"i-1-8n-select-list-header"],"dropdownShow":[32],"value":[32],"dropdownWrapperRef":[32],"dropdownAnchor":[32],"isDropdownEmpty":[32],"hasFocus":[32],"navigationItem":[32],"inputFilterText":[32],"inputValue":[32]},[[0,"itemClick","onItemClicked"],[8,"keydown","onKeyDown"]]],[2,"ix-select-item",{"label":[513],"value":[520],"selected":[4],"hover":[4],"onItemClick":[64]}]]],["p-a5fa7ae5",[[6,"ix-group",{"suppressHeaderSelection":[4,"suppress-header-selection"],"header":[1],"subHeader":[1,"sub-header"],"collapsed":[1540],"selected":[1540],"index":[1538],"expandOnHeaderClick":[4,"expand-on-header-click"],"dropdownTriggerRef":[32]},[[8,"keydown","onKeyDown"]]],[6,"ix-group-dropdown-item",{"label":[1],"icon":[1]}],[6,"ix-group-item",{"icon":[1],"text":[1],"secondaryText":[1,"secondary-text"],"suppressSelection":[4,"suppress-selection"],"selected":[4],"focusable":[4],"index":[2]},[[1,"click","clickListen"]]]]],["p-23d5469a",[[6,"ix-map-navigation",{"applicationName":[1,"application-name"],"navigationTitle":[1,"navigation-title"],"hideContextMenu":[4,"hide-context-menu"],"isSidebarOpen":[32],"openOverlay":[64],"closeOverlay":[64]}],[6,"ix-map-navigation-overlay",{"name":[1],"icon":[1],"color":[1]}]]],["p-b242bd39",[[2,"ix-toast-container",{"containerId":[1,"container-id"],"containerClass":[1,"container-class"],"position":[1],"showToast":[64]}],[6,"ix-toast",{"type":[1],"toastTitle":[1,"toast-title"],"autoCloseDelay":[2,"auto-close-delay"],"autoClose":[4,"auto-close"],"icon":[1],"iconColor":[1,"icon-color"],"progress":[32],"isRunning":[32],"touched":[32]}]]],["p-5661957c",[[6,"ix-tree",{"root":[1],"model":[16],"renderItem":[16],"context":[1040]}],[6,"ix-tree-item",{"text":[1],"hasChildren":[4,"has-children"],"context":[16]}]]],["p-23d79e3d",[[6,"ix-group-context-menu",{"showContextMenu":[32]}]]],["p-3663f989",[[2,"ix-spinner",{"variant":[1],"size":[1]}]]],["p-9566c834",[[6,"ix-menu-about",{"activeTabLabel":[1025,"active-tab-label"],"label":[1],"show":[4],"labels":[32]}],[6,"ix-menu-avatar",{"top":[1],"bottom":[1],"i18nLogout":[1,"i-1-8n-logout"],"displayMenu":[32]},[[1,"click","toggleMenu"]]],[6,"ix-menu-settings",{"activeTabLabel":[1025,"active-tab-label"],"label":[1],"show":[4]}],[4,"ix-menu",{"showSettings":[1028,"show-settings"],"showAbout":[1028,"show-about"],"enableToggleTheme":[4,"enable-toggle-theme"],"enableSettings":[4,"enable-settings"],"enableMapExpand":[4,"enable-map-expand"],"applicationName":[1,"application-name"],"applicationDescription":[1,"application-description"],"maxVisibleMenuItems":[2,"max-visible-menu-items"],"i18nLegal":[1,"i-1-8n-legal"],"i18nSettings":[1,"i-1-8n-settings"],"i18nToggleTheme":[1,"i-1-8n-toggle-theme"],"i18nExpand":[1,"i-1-8n-expand"],"i18nCollapse":[1,"i-1-8n-collapse"],"i18nMore":[1,"i-1-8n-more"],"expand":[1540],"showMoreItems":[32],"visibleMenuItems":[32],"countMoreNotifications":[32],"mapExpand":[32],"activeTab":[32],"isMoreTabEmpty":[32],"toggleMapExpand":[64],"toggleMenu":[64],"toggleSettings":[64],"toggleAbout":[64]},[[9,"resize","onWindowResize"]]],[6,"ix-menu-about-news",{"show":[1540],"label":[1],"i18nShowMore":[1,"i-1-8n-show-more"],"aboutItemLabel":[1,"about-item-label"],"offsetBottom":[2,"offset-bottom"],"expanded":[4]}],[6,"ix-menu-about-item",{"label":[513]}],[6,"ix-menu-settings-item",{"label":[1]}],[2,"ix-menu-avatar-item",{"icon":[1],"label":[1]}],[4,"ix-menu-item",{"home":[4],"bottom":[4],"tabIcon":[1,"tab-icon"],"notifications":[2],"active":[4],"disabled":[4],"title":[32]}]]],["p-eb150313",[[2,"ix-date-picker",{"format":[1],"range":[4],"individual":[4],"corners":[1],"from":[1],"to":[1],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"eventDelimiter":[1,"event-delimiter"],"textSelectDate":[1,"text-select-date"],"yearValue":[32],"today":[32],"monthValue":[32],"calendar":[32],"years":[32],"tempYear":[32],"tempMonth":[32],"start":[32],"end":[32],"dropdownButtonRef":[32],"yearContainerRef":[32],"getCurrentDate":[64]}],[2,"ix-time-picker",{"format":[1],"corners":[1],"individual":[4],"showHour":[4,"show-hour"],"showMinutes":[4,"show-minutes"],"showSeconds":[4,"show-seconds"],"time":[1],"showTimeReference":[1032,"show-time-reference"],"timeReference":[1,"time-reference"],"textSelectTime":[1,"text-select-time"],"hourInputRef":[32],"minuteInputRef":[32],"secondInputRef":[32],"referenceInputRef":[32],"getCurrentTime":[64]}]]],["p-418e2d14",[[6,"ix-filter-chip",{"disabled":[4]}]]],["p-65e61684",[[4,"ix-tab-item",{"selected":[4],"disabled":[4],"small":[4],"icon":[4],"rounded":[4],"counter":[2],"layout":[1],"placement":[1]}]]],["p-fecf0ade",[[4,"ix-tabs",{"small":[4],"rounded":[4],"selected":[1026],"layout":[1],"placement":[1],"totalItems":[32],"currentScrollAmount":[32],"scrollAmount":[32],"scrollActionAmount":[32]},[[9,"resize","onWindowResize"]]]]],["p-16e95211",[[2,"ix-modal-container",{"showModal":[64]}],[6,"ix-modal",{"animation":[4],"ariaDescribedBy":[1,"aria-described-by"],"ariaLabelledBy":[1,"aria-labelled-by"],"backdrop":[8],"backdropClass":[1,"backdrop-class"],"beforeDismiss":[16],"centered":[4],"content":[1],"keyboard":[4],"icon":[1],"iconColor":[1,"icon-color"],"modalDialogClass":[1,"modal-dialog-class"],"scrollable":[4],"size":[1],"headerTitle":[1,"header-title"],"windowClass":[1,"window-class"],"dismiss":[64],"close":[64]}]]],["p-c3e90c06",[[6,"ix-date-time-card",{"individual":[4],"corners":[1]}]]],["p-537f0678",[[6,"ix-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"selected":[4],"disabled":[516],"type":[1]}]]],["p-7adc0686",[[6,"ix-dropdown-item",{"label":[1],"icon":[1],"hover":[4],"disabled":[4],"checked":[4],"emitItemClick":[64]}],[1,"ix-dropdown",{"show":[1540],"trigger":[1],"anchor":[1],"closeBehavior":[8,"close-behavior"],"placement":[1],"positioningStrategy":[1,"positioning-strategy"],"adjustDropdownWidthToReferenceWith":[4,"adjust-dropdown-width-to-reference-with"],"adjustDropdownWidthToReferenceWidth":[4,"adjust-dropdown-width-to-reference-width"],"header":[1],"updatePosition":[64]},[[8,"click","clickOutside"]]]]],["p-c0fecc2b",[[6,"ix-icon-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"oval":[4],"icon":[1],"size":[1],"color":[1],"selected":[4],"disabled":[4],"type":[1]}]]]]'),e)));

package/dist/types/components/chip/chip.d.ts

@@ -6,7 +6,7 @@ export declare class Chip {
    */
   variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
   /**
-   * Display chip in active state. Only working witht `variant="primary"`
+   * Display chip in active state. Only works with `variant="primary"`
    */
   active: boolean;
   /**

package/dist/types/components/group/group-context-menu.d.ts

@@ -0,0 +1,11 @@
+export declare class GroupContextMenu {
+  host: HTMLIxGroupContextMenuElement;
+  showContextMenu: boolean;
+  private observer;
+  get dropdownElement(): HTMLIxDropdownElement;
+  get groupDropdownItem(): NodeListOf<HTMLIxGroupDropdownItemElement>;
+  private configureDropdown;
+  componentWillRender(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/modal/modal-utils.d.ts

@@ -1,11 +1,12 @@
 import { NotificationColor } from '../utils/notification-color';
-export interface ModalConfig {
+import { TypedEvent } from '../utils/typed-event';
+export interface ModalConfig<TReason = any> {
   animation?: boolean;
   ariaDescribedBy?: string;
   ariaLabelledBy?: string;
   backdrop?: boolean | 'static';
   backdropClass?: string;
-  beforeDismiss?: (reason?: any) => boolean | Promise<boolean>;
+  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;
   centered?: boolean;
   container?: string | HTMLElement;
   content: string | HTMLElement;
@@ -18,9 +19,11 @@ export interface ModalConfig {
   icon?: string;
   iconColor?: NotificationColor;
 }
-export declare function modal(config: ModalConfig): Promise<{
-  onClose: import("../utils/typed-event").TypedEvent<any>;
-  onDismiss: import("../utils/typed-event").TypedEvent<any>;
-}>;
-export declare function closeModal(element: Element, closeResult: any): void;
+export interface ModalInstance<TReason = any> {
+  htmlElement: HTMLIxModalElement;
+  onClose: TypedEvent<TReason>;
+  onDismiss: TypedEvent<TReason>;
+}
+export declare function modal<TReson = any>(config: ModalConfig<TReson>): Promise<ModalInstance<TReson>>;
+export declare function closeModal<TClose = any>(element: Element, closeResult: TClose): void;
 export declare function dismissModal(element: Element, dismissResult?: any): void;

package/dist/types/components/modal/modal.d.ts

@@ -89,11 +89,11 @@ export declare class Modal {
    * Dismiss modal instance
    * @param reason
    */
-  dismiss(reason?: any): Promise<void>;
+  dismiss<T = any>(reason?: T): Promise<void>;
   /**
    * Close modal
    * @param result
    */
-  close(result: any): Promise<void>;
+  close<T = any>(result: T): Promise<void>;
   render(): any;
 }

package/dist/types/components/modal-container/modal-container.d.ts

@@ -1,5 +1,4 @@
-import { ModalConfig } from '../modal/modal-utils';
-import { TypedEvent } from '../utils/typed-event';
+import { ModalConfig, ModalInstance } from '../modal/modal-utils';
 export declare class ModalContainer {
   hostElement: HTMLIxModalContainerElement;
   /**
@@ -7,9 +6,6 @@ export declare class ModalContainer {
    *
    * @param config
    */
-  showModal(config: ModalConfig): Promise<{
-    onClose: TypedEvent<any>;
-    onDismiss: TypedEvent<any>;
-  }>;
+  showModal(config: ModalConfig): Promise<ModalInstance>;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -15,9 +15,9 @@ import { DateTimeSelectEvent } from "./components/datetime-picker/event";
 import { Placement, PositioningStrategy } from "@popperjs/core";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { NotificationColor } from "./components/utils/notification-color";
-import { TypedEvent } from "./components/utils/typed-event";
-import { ModalConfig } from "./components/modal/modal-utils";
+import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
 import { ToastConfig, ToastType } from "./components/toast/toast-utils";
+import { TypedEvent } from "./components/utils/typed-event";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
 import { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
@@ -180,7 +180,7 @@ export namespace Components {
     }
     interface IxChip {
         /**
-          * Display chip in active state. Only working witht `variant="primary"`
+          * Display chip in active state. Only works with `variant="primary"`
          */
         "active": boolean;
         /**
@@ -581,6 +581,8 @@ export namespace Components {
          */
         "suppressHeaderSelection": boolean;
     }
+    interface IxGroupContextMenu {
+    }
     interface IxGroupDropdownItem {
         /**
           * Group dropdown icon
@@ -945,7 +947,7 @@ export namespace Components {
           * Close modal
           * @param result
          */
-        "close": (result: any) => Promise<void>;
+        "close": <T = any>(result: T) => Promise<void>;
         /**
           * Content of modal
          */
@@ -954,7 +956,7 @@ export namespace Components {
           * Dismiss modal instance
           * @param reason
          */
-        "dismiss": (reason?: any) => Promise<void>;
+        "dismiss": <T = any>(reason?: T) => Promise<void>;
         /**
           * Header title
          */
@@ -993,7 +995,7 @@ export namespace Components {
           * Display modal dialog
           * @param config
          */
-        "showModal": (config: ModalConfig) => Promise<{ onClose: TypedEvent<any>; onDismiss: TypedEvent<any>; }>;
+        "showModal": (config: ModalConfig) => Promise<ModalInstance>;
     }
     interface IxModalExample {
     }
@@ -1768,6 +1770,12 @@ declare global {
         prototype: HTMLIxGroupElement;
         new (): HTMLIxGroupElement;
     };
+    interface HTMLIxGroupContextMenuElement extends Components.IxGroupContextMenu, HTMLStencilElement {
+    }
+    var HTMLIxGroupContextMenuElement: {
+        prototype: HTMLIxGroupContextMenuElement;
+        new (): HTMLIxGroupContextMenuElement;
+    };
     interface HTMLIxGroupDropdownItemElement extends Components.IxGroupDropdownItem, HTMLStencilElement {
     }
     var HTMLIxGroupDropdownItemElement: {
@@ -2039,6 +2047,7 @@ declare global {
         "ix-flip-tile": HTMLIxFlipTileElement;
         "ix-flip-tile-content": HTMLIxFlipTileContentElement;
         "ix-group": HTMLIxGroupElement;
+        "ix-group-context-menu": HTMLIxGroupContextMenuElement;
         "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement;
         "ix-group-item": HTMLIxGroupItemElement;
         "ix-icon": HTMLIxIconElement;
@@ -2264,7 +2273,7 @@ declare namespace LocalJSX {
     }
     interface IxChip {
         /**
-          * Display chip in active state. Only working witht `variant="primary"`
+          * Display chip in active state. Only works with `variant="primary"`
          */
         "active"?: boolean;
         /**
@@ -2731,6 +2740,8 @@ declare namespace LocalJSX {
          */
         "suppressHeaderSelection"?: boolean;
     }
+    interface IxGroupContextMenu {
+    }
     interface IxGroupDropdownItem {
         /**
           * Group dropdown icon
@@ -3705,6 +3716,7 @@ declare namespace LocalJSX {
         "ix-flip-tile": IxFlipTile;
         "ix-flip-tile-content": IxFlipTileContent;
         "ix-group": IxGroup;
+        "ix-group-context-menu": IxGroupContextMenu;
         "ix-group-dropdown-item": IxGroupDropdownItem;
         "ix-group-item": IxGroupItem;
         "ix-icon": IxIcon;
@@ -3776,6 +3788,7 @@ declare module "@stencil/core" {
             "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes<HTMLIxFlipTileElement>;
             "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes<HTMLIxFlipTileContentElement>;
             "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes<HTMLIxGroupElement>;
+            "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes<HTMLIxGroupContextMenuElement>;
             "ix-group-dropdown-item": LocalJSX.IxGroupDropdownItem & JSXBase.HTMLAttributes<HTMLIxGroupDropdownItemElement>;
             "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
             "ix-icon": LocalJSX.IxIcon & JSXBase.HTMLAttributes<HTMLIxIconElement>;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -70,7 +70,7 @@
     "autoprefixer": "10.4.5",
     "bootstrap": "~5.2.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
+    "eslint-config-ix": "*",
     "eslint-plugin-react": "^7.26.1",
     "fs-extra": "^10.0.0",
     "http-server": "^14.1.1",

package/scss/components/_buttons.scss

@@ -119,6 +119,7 @@ $button-categories: (primary, secondary);
 
     &.disabled,
     &:disabled {
+      pointer-events: none;
       cursor: initial;
 
       @if $enable-border {
@@ -152,15 +153,3 @@ $button-categories: (primary, secondary);
   border-radius: 6.25rem;
   width: $default-control-height;
 }
-
-.btn-icon-xs {
-  height: $default-space;
-  width: $default-space;
-  min-width: $default-space;
-}
-
-.btn-icon-s {
-  height: $large-space;
-  width: $large-space;
-  min-width: $large-space;
-}

package/scss/components/_checkboxes.scss

@@ -13,27 +13,21 @@
   /* Base for label styling */
   [type='checkbox']:not(:checked),
   [type='checkbox']:checked {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
     position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .ag-checkbox-input-wrapper {
-    [type='checkbox']:not(:checked),
-    [type='checkbox']:checked {
-      position: absolute;
-      visibility: unset;
-    }
+    white-space: nowrap;
   }
 
   [type='checkbox']:not(:checked) + label,
   [type='checkbox']:checked + label {
     position: relative;
-    display: flex;
-    align-items: center;
-    line-height: $default-space;
+    display: inline-flex;
+    align-items: flex-start;
     user-select: none;
-
     color: var(--theme-checkbox-label--color);
   }
 
@@ -45,6 +39,10 @@
     content: '';
     width: $size;
     height: $size;
+    min-width: $size;
+    min-height: $size;
+    max-width: $size;
+    max-height: $size;
     float: left;
     margin-right: $small-space;
 
@@ -110,8 +108,7 @@
       border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
       border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
       position: absolute;
-      top: 0.3rem;
-      left: 0.35rem;
+      margin: 0.3125rem 0.3125rem 0.1875rem;
       transform: rotate(-53deg) scale(2);
     }
 
@@ -151,8 +148,7 @@
       height: 0.125rem;
       border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
       position: absolute;
-      top: $small-space;
-      left: $tiny-space;
+      margin: 0.5rem 0 0 0.25rem;
     }
 
     & + label:before {

package/scss/components/_modal.scss

@@ -19,7 +19,7 @@
   padding: 0;
   padding-bottom: $tiny-space;
   border: none;
-  align-items: flex-start;
+  align-items: center;
 
   [data-close-button] {
     margin-left: 1rem;