@carbon/styles 1.17.0 → 1.18.0

package/css/styles.css

@@ -5293,6 +5293,31 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--checkbox-wrapper--readonly .cds--checkbox-label {
+  cursor: default;
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
+  cursor: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
+  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
+  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  background: transparent;
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
+  border-color: var(--cds-text-primary, #161616);
+}
+
 .cds--checkbox-skeleton .cds--checkbox-label {
   cursor: default;
 }
@@ -5751,14 +5776,14 @@ fieldset[disabled] .cds--form__helper-text {
   overflow-x: auto;
 }
 
-.cds--snippet--multi .cds--snippet-container pre::after {
+.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
   position: absolute;
   top: 0;
   right: 0;
   width: 1rem;
   height: 100%;
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--cds-layer), 0)), to(var(--cds-layer)));
-  background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
+  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--cds-layer)));
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
   content: "";
 }
 
@@ -6544,6 +6569,17 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--text-input__counter-alert {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+}
+
 .cds--text-input:disabled {
   outline: 2px solid transparent;
   outline-offset: -2px;
@@ -8027,6 +8063,46 @@ fieldset[disabled] .cds--form__helper-text {
   width: 100%;
 }
 
+.cds--contained-list--on-page.cds--contained-list--sm .cds--contained-list__header {
+  height: 2rem;
+}
+
+.cds--contained-list--sm .cds--contained-list-item__content,
+.cds--contained-list--sm .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 2rem;
+  padding: calc(0.5rem - 0.125rem) 1rem;
+}
+
+.cds--contained-list--on-page.cds--contained-list--md .cds--contained-list__header {
+  height: 2.5rem;
+}
+
+.cds--contained-list--md .cds--contained-list-item__content,
+.cds--contained-list--md .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 2.5rem;
+  padding: calc(0.75rem - 0.125rem) 1rem;
+}
+
+.cds--contained-list--on-page.cds--contained-list--lg .cds--contained-list__header {
+  height: 3rem;
+}
+
+.cds--contained-list--lg .cds--contained-list-item__content,
+.cds--contained-list--lg .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 3rem;
+  padding: calc(1rem - 0.125rem) 1rem;
+}
+
+.cds--contained-list--on-page.cds--contained-list--xl .cds--contained-list__header {
+  height: 4rem;
+}
+
+.cds--contained-list--xl .cds--contained-list-item__content,
+.cds--contained-list--xl .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 4rem;
+  padding: calc(1.5rem - 0.125rem) 1rem;
+}
+
 .cds--contained-list--on-page + .cds--contained-list--on-page {
   -webkit-margin-before: 1rem;
           margin-block-start: 1rem;
@@ -8037,7 +8113,6 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-heading-compact-01-font-weight, 600);
   line-height: var(--cds-heading-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
-  height: 3rem;
   border-bottom: 1px solid var(--cds-border-subtle);
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-primary, #161616);
@@ -8108,7 +8183,6 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-body-01-font-weight, 400);
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
-  padding: calc(1rem - 0.125rem) 1rem;
   color: var(--cds-text-primary, #161616);
 }
 
@@ -11423,6 +11497,15 @@ th .cds--table-sort__flex {
   }
 }
 
+.cds--date-picker__input[readonly] {
+  background: transparent;
+  cursor: text;
+}
+
+.cds--date-picker__input[readonly] + .cds--date-picker__icon {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--dropdown__wrapper--inline {
   display: inline-grid;
   -webkit-box-align: center;
@@ -12695,19 +12778,19 @@ button.cds--dropdown-text:focus {
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field {
   position: absolute;
-  bottom: 0.8125rem;
+  top: 2.25rem;
   left: 1rem;
   width: 50%;
-  height: 1rem;
+  height: 0.5rem;
   padding: 0;
 }
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
   position: absolute;
-  top: 0.8125rem;
+  top: 1rem;
   left: 1rem;
   width: 25%;
-  height: 1rem;
+  height: 0.5rem;
 }
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field,
@@ -12953,12 +13036,15 @@ button.cds--dropdown-text:focus {
 .cds--date-picker--fluid__skeleton--container {
   position: relative;
   width: 100%;
-  height: 4rem;
-  padding: 0.8125rem 2.5rem 0.8125rem 1rem;
+  height: 100%;
 }
 
 .cds--date-picker--fluid__skeleton .cds--skeleton {
-  height: 1rem;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  width: 25%;
+  height: 0.5rem;
 }
 
 .cds--date-picker--fluid__skeleton .cds--label {
@@ -12966,13 +13052,17 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--date-picker--fluid__skeleton .cds--text-input {
-  width: 80%;
-  height: 1.125rem;
+  position: absolute;
+  top: 2.25rem;
+  left: 1rem;
+  width: 50%;
+  height: 0.5rem;
+  padding: 0;
 }
 
 .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
   top: auto;
-  bottom: 0.125rem;
+  bottom: 0.5rem;
 }
 
 .cds--date-picker--fluid__skeleton--range {
@@ -13000,12 +13090,8 @@ button.cds--dropdown-text:focus {
   border-right: 1px solid var(--cds-skeleton-element, #c6c6c6);
 }
 
-.cds--date-picker--fluid__skeleton--range .cds--text-input {
-  width: 100%;
-}
-
 .cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
-  bottom: 0.3125rem;
+  bottom: 0.5rem;
 }
 
 .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
@@ -13266,6 +13352,15 @@ optgroup.cds--select-optgroup:disabled,
   cursor: not-allowed;
 }
 
+.cds--select--readonly .cds--select-input {
+  background-color: transparent;
+  cursor: default;
+}
+
+.cds--select--readonly .cds--select__arrow {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--select.cds--skeleton {
   position: relative;
   padding: 0;
@@ -13334,13 +13429,13 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--select--fluid .cds--select-input {
   min-height: 4rem;
-  padding: 2rem 1rem 0.8125rem;
+  padding: 2rem 2rem 0.8125rem 1rem;
   outline: none;
+  text-overflow: ellipsis;
 }
 
 .cds--select--fluid .cds--select__arrow {
-  top: auto;
-  bottom: 1rem;
+  top: 2rem;
   height: 1rem;
 }
 
@@ -13350,13 +13445,12 @@ optgroup.cds--select-optgroup:disabled,
   transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--select--fluid .cds--select--invalid {
+.cds--select--fluid .cds--select--invalid .cds--select-input__wrapper {
   outline: 2px solid var(--cds-support-error, #da1e28);
   outline-offset: -2px;
-  outline-offset: 0;
 }
 @media screen and (prefers-contrast) {
-  .cds--select--fluid .cds--select--invalid {
+  .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper {
     outline-style: dotted;
   }
 }
@@ -13372,6 +13466,7 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input,
 .cds--select--fluid .cds--select--warning .cds--select-input {
+  padding-right: 2rem;
   border-bottom: 1px solid transparent;
 }
 
@@ -13379,11 +13474,29 @@ optgroup.cds--select-optgroup:disabled,
   border-bottom: 1px solid var(--cds-border-strong);
 }
 
+.cds--select--fluid .cds--select-input__wrapper {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
 .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
 .cds--select--fluid .cds--select--warning .cds--select-input:not(:focus) {
   outline: none;
 }
 
+.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement,
+.cds--select--fluid .cds--select--warning .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 100%;
+}
+
+.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
 .cds--select--fluid .cds--form-requirement {
   padding: 0.5rem 2.5rem 0.5rem 1rem;
   margin: 0;
@@ -13401,13 +13514,12 @@ optgroup.cds--select-optgroup:disabled,
   pointer-events: none;
 }
 
-.cds--select--fluid .cds--select--fluid--focus {
+.cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
-  outline-offset: 0;
 }
 @media screen and (prefers-contrast) {
-  .cds--select--fluid .cds--select--fluid--focus {
+  .cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper {
     outline-style: dotted;
   }
 }
@@ -13700,22 +13812,209 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--text-input--fluid__skeleton {
   position: relative;
-  height: 100%;
-  padding: 1rem;
+  height: 4rem;
   border-bottom: 1px solid var(--cds-skeleton-element, #c6c6c6);
   background: var(--cds-skeleton-background, #e8e8e8);
 }
 
 .cds--text-input--fluid__skeleton .cds--skeleton {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  width: 25%;
   height: 0.5rem;
 }
 
 .cds--text-input--fluid__skeleton .cds--label {
-  margin-bottom: 0.75rem;
+  position: absolute;
+  top: 2.25rem;
+  left: 1rem;
+  width: 50%;
+  height: 0.5rem;
+  padding: 0;
 }
 
-.cds--text-input--fluid__skeleton .cds--text-input {
-  width: 80%;
+.cds--time-picker--fluid {
+  background: var(--cds-field);
+}
+
+.cds--time-picker--fluid .cds--time-picker--fluid__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.cds--time-picker--fluid__wrapper > *:nth-child(1),
+.cds--time-picker--fluid__wrapper > *:nth-child(2) {
+  -ms-flex-preferred-size: 25%;
+      flex-basis: 25%;
+}
+
+.cds--time-picker--equal-width .cds--time-picker--fluid__wrapper > * {
+  -ms-flex-preferred-size: 50%;
+      flex-basis: 50%;
+}
+
+.cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
+.cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before {
+  position: absolute;
+  display: block;
+  width: 1px;
+  height: calc(100% - 1px);
+  background-color: var(--cds-border-strong);
+  content: "";
+  opacity: 1;
+  -webkit-transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--time-picker--fluid__wrapper .cds--select-input__wrapper::after {
+  right: 0;
+}
+
+.cds--time-picker--fluid__wrapper .cds--select-input__wrapper::before {
+  left: 0;
+}
+
+.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child):hover .cds--select-input__wrapper::before,
+.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):hover:not(:last-child) ~ * .cds--select-input__wrapper::before,
+.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:last-child:hover .cds--select-input__wrapper::before {
+  opacity: 0;
+}
+
+.cds--time-picker--fluid--disabled .cds--time-picker--fluid__wrapper .cds--select--disabled .cds--select-input__wrapper::before {
+  background: var(--cds-border-disabled, #c6c6c6);
+}
+
+.cds--time-picker--fluid .cds--form-requirement {
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin: 0;
+  background: var(--cds-field);
+}
+
+.cds--time-picker--fluid--invalid {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+  position: relative;
+}
+@media screen and (prefers-contrast) {
+  .cds--time-picker--fluid--invalid {
+    outline-style: dotted;
+  }
+}
+
+.cds--time-picker--fluid--invalid .cds--text-input,
+.cds--time-picker--fluid--invalid .cds--text-input-wrapper,
+.cds--time-picker--fluid--invalid .cds--select-input,
+.cds--time-picker--fluid--invalid .cds--select {
+  background: transparent;
+}
+
+.cds--time-picker--fluid--invalid .cds--select-input {
+  padding-top: 1.875rem;
+  border-top: 2px solid transparent;
+}
+
+.cds--select--fluid:last-of-type .cds--select-input {
+  border-right: 2px solid transparent;
+}
+
+.cds--time-picker--fluid--invalid .cds--select-input:hover:not([disabled]) {
+  background: var(--cds-field-hover);
+}
+
+.cds--time-picker--fluid--invalid .cds--select-input:hover {
+  border-top: 2px solid var(--cds-support-error, #da1e28);
+}
+
+.cds--time-picker--fluid--invalid .cds--select--fluid:last-of-type .cds--select-input:hover {
+  border-right: 2px solid var(--cds-support-error, #da1e28);
+}
+
+.cds--time-picker--fluid--warning {
+  position: relative;
+}
+
+.cds--time-picker__icon {
+  display: none;
+}
+
+.cds--time-picker--fluid--invalid .cds--time-picker__icon,
+.cds--time-picker--fluid--warning .cds--time-picker__icon {
+  position: absolute;
+  top: 4.5rem;
+  right: 1rem;
+  display: block;
+}
+
+.cds--time-picker--fluid--invalid .cds--time-picker__icon {
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.cds--time-picker--fluid--warning .cds--time-picker__icon {
+  fill: var(--cds-support-warning, #f1c21b);
+}
+
+.cds--time-picker--fluid--warning .cds--time-picker__icon path:first-of-type {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--time-picker--fluid--invalid .cds--form-requirement,
+.cds--time-picker--fluid--warning .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 100%;
+}
+
+.cds--time-picker--fluid--invalid .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
+.cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
+.cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before,
+.cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
+.cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before {
+  top: 8px;
+  height: calc(100% - 1rem);
+}
+
+.cds--time-picker--fluid--invalid .cds--text-input,
+.cds--time-picker--fluid--warning .cds--text-input,
+.cds--time-picker--fluid--invalid .cds--select-input,
+.cds--time-picker--fluid--warning .cds--select-input {
+  border-bottom: 1px solid transparent;
+}
+
+.cds--time-picker--fluid.cds--time-picker--fluid--invalid .cds--time-picker__divider,
+.cds--time-picker--fluid.cds--time-picker--fluid--warning .cds--time-picker__divider {
+  width: calc(100% - 2rem);
+  border-style: solid;
+  border-color: var(--cds-border-subtle);
+  border-bottom: none;
+  margin: 0 1rem;
+}
+
+.cds--time-picker--fluid--skeleton {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 4rem;
+}
+
+.cds--time-picker--fluid--skeleton > * {
+  width: auto;
+  height: 100%;
+}
+
+.cds--time-picker--fluid--skeleton > *:nth-child(1),
+.cds--time-picker--fluid--skeleton > *:nth-child(2) {
+  width: 25%;
+}
+
+.cds--time-picker--fluid--skeleton > *:last-child,
+.cds--time-picker--fluid--skeleton.cds--time-picker--equal-width > *:first-child {
+  width: 50%;
 }
 
 @-webkit-keyframes stroke {
@@ -16151,13 +16450,29 @@ optgroup.cds--select-optgroup:disabled,
   background: transparent;
 }
 
-.cds--number--readonly .cds--number__controls {
-  display: none;
+.cds--number--readonly .cds--number__control-btn {
+  color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  pointer-events: none;
+}
+.cds--number--readonly .cds--number__control-btn:hover {
+  background-color: transparent;
+  cursor: pointer;
+}
+.cds--number--readonly .cds--number__control-btn:hover::before, .cds--number--readonly .cds--number__control-btn:hover::after {
+  background-color: transparent;
 }
 
-.cds--number__readonly-icon {
-  position: absolute;
-  right: 1rem;
+.cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
+  outline: none;
+}
+
+.cds--number--readonly .cds--number__control-btn::before,
+.cds--number--readonly .cds--number__control-btn::after {
+  background: transparent;
+}
+
+.cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type) {
+  background-color: var(--cds-border-subtle);
 }
 
 .cds--number.cds--skeleton {
@@ -16302,7 +16617,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 .cds--overflow-menu:hover,
 .cds--overflow-menu__trigger:hover {
-  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+  background-color: var(--cds-layer-hover);
 }
 
 .cds--overflow-menu--sm {
@@ -16772,7 +17087,7 @@ a.cds--overflow-menu-options__btn::before {
   border-right: 1px solid var(--cds-border-subtle);
 }
 
-.cds--pagination .cds--select__page-number .cds--select-input {
+.cds--pagination__right {
   border-left: 1px solid var(--cds-border-subtle);
 }
 
@@ -16806,6 +17121,15 @@ a.cds--overflow-menu-options__btn::before {
   margin-left: 0.0625rem;
 }
 
+.cds--pagination__right .cds--pagination__text.cds--pagination__page-text {
+  margin-right: 0.0625rem;
+  margin-left: 1rem;
+}
+
+.cds--pagination__right .cds--pagination__text:empty {
+  margin: 0;
+}
+
 .cds--pagination__left {
   padding: 0 1rem 0 0;
 }
@@ -18407,6 +18731,22 @@ span.cds--pagination__text.cds--pagination__items-count {
   background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
+  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--radio-button-group--readonly .cds--radio-button__label {
+  cursor: default;
+}
+
+.cds--radio-button-group--readonly .cds--radio-button__label-text {
+  cursor: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
 .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: 1.5px;
@@ -19324,6 +19664,19 @@ span.cds--pagination__text.cds--pagination__items-count {
   outline: none;
 }
 
+.cds--slider--readonly {
+  cursor: default;
+}
+
+.cds--slider--readonly .cds--slider__thumb {
+  width: 0;
+  height: 0;
+}
+
+.cds--slider--readonly ~ .cds--slider-text-input {
+  background-color: transparent;
+}
+
 .cds--slider-container.cds--skeleton .cds--slider__range-label {
   position: relative;
   padding: 0;
@@ -19981,6 +20334,9 @@ span.cds--pagination__text.cds--pagination__items-count {
   border-bottom: 0;
   line-height: calc(3rem - (0.5rem * 2));
 }
+.cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
+  overflow-x: visible;
+}
 .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -20841,6 +21197,19 @@ span.cds--pagination__text.cds--pagination__items-count {
   max-height: 3rem;
 }
 
+.cds--time-picker--readonly .cds--time-picker__input-field {
+  background-color: transparent;
+}
+
+.cds--time-picker--readonly .cds--select-input {
+  background-color: transparent;
+  cursor: default;
+}
+
+.cds--time-picker--readonly .cds--select-input + .cds--select__arrow {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--toggletip-label {
   font-size: var(--cds-label-01-font-size, 0.75rem);
   font-weight: var(--cds-label-01-font-weight, 400);
@@ -21085,6 +21454,34 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-button-disabled, #c6c6c6);
 }
 
+.cds--toggle--readonly .cds--toggle__appearance {
+  cursor: default;
+}
+
+.cds--toggle--readonly .cds--toggle__switch {
+  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  background-color: transparent;
+}
+.cds--toggle--readonly .cds--toggle__switch::before {
+  top: 0.125rem;
+  left: 0.125rem;
+  background-color: var(--cds-text-primary, #161616);
+}
+
+.cds--toggle--readonly .cds--toggle__check {
+  top: 0.3125rem;
+  right: 0.25rem;
+  fill: var(--cds-background, #ffffff);
+}
+
+.cds--toggle--readonly .cds--toggle__text {
+  cursor: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--toggle__switch,
 .cds--toggle__switch::before {