@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/time-picker/time-picker.css

@@ -18,83 +18,567 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
-.header {
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+label {
+  color: var(--theme-color-soft-text);
+}
+
+input, input:-webkit-autofill {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color) !important;
+  border-color: var(--theme-input--border-color) !important;
+}
+input::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+input::placeholder {
+  color: var(--theme-input-hint--color);
+}
+input.hover, input:hover {
+  border-color: var(--theme-input--border-color--hover);
+  background-color: var(--theme-input--background--hover);
+}
+input.focus, input:focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus);
+}
+input:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input.read-only, input:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+
+input[type=number] {
+  text-align: right;
+}
+input[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+
+textarea {
+  height: 3.25rem;
+  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
+}
+textarea, textarea:-webkit-autofill {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+textarea:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color) !important;
+  border-color: var(--theme-input--border-color) !important;
+}
+textarea::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea::placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea.hover, textarea:hover {
+  border-color: var(--theme-input--border-color--hover);
+  background-color: var(--theme-input--background--hover);
+}
+textarea.focus, textarea:focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus);
+}
+textarea:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea.read-only, textarea:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+
+textarea ~ .valid-feedback,
+textarea ~ .invalid-feedback,
+input ~ .valid-feedback,
+input ~ .invalid-feedback {
+  display: none;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+}
+
+form textarea ~ .valid-feedback,
+form input ~ .valid-feedback {
+  color: var(--theme-color-success);
+}
+form textarea ~ .invalid-feedback,
+form input ~ .invalid-feedback {
+  color: var(--theme-color-alarm-text);
+}
+
+form:not([novalidate]) :invalid,
+form:not([novalidate]) .is-invalid,
+form.was-validated :invalid,
+form.was-validated .is-invalid {
+  background-color: var(--theme-input-error--background);
+  border-color: var(--theme-input-error--border-color);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}
+form:not([novalidate]) :invalid ~ .invalid-feedback,
+form:not([novalidate]) .is-invalid ~ .invalid-feedback,
+form.was-validated :invalid ~ .invalid-feedback,
+form.was-validated .is-invalid ~ .invalid-feedback {
+  display: block;
+}
+form:not([novalidate]) :valid ~ .valid-feedback,
+form:not([novalidate]) .is-valid ~ .valid-feedback,
+form.was-validated :valid ~ .valid-feedback,
+form.was-validated .is-valid ~ .valid-feedback {
+  display: block;
+}
+
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /* Dimensions */
+  /* Font sizes */
+  /* Line heights */
+  /* Animation timings */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .form-control,
+:host .form-control-plaintext {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+  color: var(--theme-input--color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--theme-input--border-radius);
+  height: 2rem;
+  min-height: 2rem;
+  min-width: 2rem;
+  background-color: var(--theme-input--background);
+  border: solid 1px var(--theme-input--border-color);
+  box-shadow: var(--theme-input--box-shadow);
+  -webkit-padding-start: 0.5rem;
+          padding-inline-start: 0.5rem;
+  -webkit-padding-end: 0.5rem;
+          padding-inline-end: 0.5rem;
+}
+:host .form-control::-moz-placeholder, :host .form-control-plaintext::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .form-control::placeholder,
+:host .form-control-plaintext::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled), :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),
+:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-input--background--hover);
+  border-color: var(--theme-input--border-color--hover);
+  cursor: auto;
+}
+:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-input--background--hover);
+  border-color: var(--theme-input--border-color--hover);
+  cursor: auto;
+}
+:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible, :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
+  background-color: var(--theme-input--background--focus);
+  border-color: var(--theme-input--border-color--focus);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  box-shadow: var(--theme-input--box-shadow);
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,
+:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
+  background-color: var(--theme-input--background--focus);
+  border-color: var(--theme-input--border-color--focus);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  box-shadow: var(--theme-input--box-shadow);
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+:host .form-control:focus-visible {
+  color: var(--theme-input--color);
+}
+:host .form-control[type=number] {
+  text-align: right;
+}
+:host .form-control[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .form-control.readonly,
+:host .form-control[readonly] {
+  background: transparent !important;
+  -webkit-border-before: none !important;
+          border-block-start: none !important;
+  -webkit-border-start: none !important;
+          border-inline-start: none !important;
+  -webkit-border-end: none !important;
+          border-inline-end: none !important;
+  border-radius: 0rem;
+}
+:host .form-control:-moz-read-only {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+:host .form-control:read-only,
+:host .form-control[readonly],
+:host .form-control[readOnly],
+:host .form-control.readonly {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+:host .form-control:read-only::-moz-placeholder, :host .form-control[readonly]::-moz-placeholder, :host .form-control[readOnly]::-moz-placeholder, :host .form-control.readonly::-moz-placeholder {
+  color: transparent;
+}
+:host .form-control:-moz-read-only::placeholder {
+  color: transparent;
+}
+:host .form-control:read-only::placeholder,
+:host .form-control[readonly]::placeholder,
+:host .form-control[readOnly]::placeholder,
+:host .form-control.readonly::placeholder {
+  color: transparent;
+}
+:host .form-control:disabled,
+:host .form-control.disabled {
+  background: transparent !important;
+  -webkit-border-before: none !important;
+          border-block-start: none !important;
+  -webkit-border-start: none !important;
+          border-inline-start: none !important;
+  -webkit-border-end: none !important;
+          border-inline-end: none !important;
+  border-radius: 0rem;
+  color: var(--theme-color-weak-text);
+  border-color: var(--theme-input--border-color-bottom--disabled);
+}
+:host .form-control:disabled::-moz-placeholder, :host .form-control.disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .form-control:disabled::placeholder,
+:host .form-control.disabled::placeholder {
+  color: transparent;
+}
+:host .form-control-plaintext {
+  outline: 0;
+}
+:host .form-group {
+  position: relative;
+}
+:host .input-wrapper {
   display: flex;
+  position: relative;
   align-items: center;
-  justify-content: center;
+  flex-wrap: nowrap;
 }
-
-.title {
+:host .input-wrapper > .glyph {
+  display: block;
+  position: absolute;
+  -webkit-margin-start: 0.312rem;
+          margin-inline-start: 0.312rem;
+  color: var(--theme-color-std-text);
+}
+:host .input-wrapper > input {
+  -webkit-padding-start: 2.2rem;
+          padding-inline-start: 2.2rem;
+}
+:host select.form-control {
+  padding: 0 0.312rem;
+}
+:host textarea.form-control {
+  padding: 0.375rem 0.5rem;
+}
+:host .was-validated .form-control:invalid,
+:host .was-validated .is-invalid {
+  background-color: var(--theme-input-error--background);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center !important;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}
+:host input.disabled, :host input:disabled {
+  color: var(--theme-input--color--disabled);
+}
+:host input:-moz-read-only {
+  cursor: default;
+}
+:host input:read-only, :host input.readonly {
+  cursor: default;
+}
+:host .header {
   display: flex;
   align-items: center;
-  font: var(--theme-text-default-title);
-  min-height: 2.5rem;
-  color: var(--theme-datepicker-time-header--color);
+  justify-content: center;
+  height: 2.5rem;
 }
-
-.clock {
-  height: 100%;
+:host .clock {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 5rem 0;
+  padding: 4.25rem 0;
 }
-
-input,
-.time-reference {
+:host input,
+:host .time-reference {
   width: 2.625rem;
   height: 1.5rem;
   text-align: center;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
   /* Chrome, Safari, Edge, Opera */
   /* Firefox */
 }
-input::-webkit-outer-spin-button, input::-webkit-inner-spin-button,
-.time-reference::-webkit-outer-spin-button,
-.time-reference::-webkit-inner-spin-button {
+:host input::-webkit-outer-spin-button, :host input::-webkit-inner-spin-button,
+:host .time-reference::-webkit-outer-spin-button,
+:host .time-reference::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0 0.3125rem;
 }
-input[type=number],
-.time-reference[type=number] {
+:host input[type=number],
+:host .time-reference[type=number] {
   -moz-appearance: textfield;
 }
-
-.form-control[type=number] {
+:host .form-control[type=number] {
   text-align: center;
 }
-
-.columns {
+:host .columns {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
 }
-
-.column-seperator {
+:host .column-seperator {
   display: flex;
   align-items: center;
   margin: 0 0.25rem;
 }
-
-.button {
+:host .button {
   display: flex;
   justify-content: flex-end;
 }
-
-.default-space {
+:host .default-space {
   margin-left: 1rem;
 }
-
-.text-align {
+:host .text-align {
   text-align: center;
 }
-
-.hidden {
+:host .hidden {
   display: none;
 }
-
-.time-reference {
-  margin: 0.75rem 0;
+:host .time-reference {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }

package/dist/collection/components/time-picker/time-picker.js

@@ -179,14 +179,14 @@ export class TimePicker {
     }
     const hideHourSeperator = hideMinutes || hideHour;
     const hideMinutesSeperator = hideSeconds || hideMinutes;
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("div", { class: "title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-typography", { variant: "default-title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: {
         columns: true,
         'default-space': true,
         hidden: hideTimeReference,
-      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("div", { class: "time-reference" }, this.timeReference), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
+      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { class: "time-reference" }, this.timeReference), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
   }
   static get is() { return "ix-time-picker"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["time-picker.scss"]
@@ -462,6 +462,5 @@ export class TimePicker {
       }
     };
   }
-  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=time-picker.js.map