@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/collection/components/data-table/table-toolbar/table-toolbar.css

@@ -0,0 +1,93 @@
+:host {
+  box-sizing: border-box;
+  display: table-caption;
+  position: relative;
+  background-color: var(--sdds-data-table-toolbar-background);
+  color: var(--sdds-data-table-color);
+  padding: 0 var(--sdds-spacing-element-16);
+  height: 64px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .sdds-table__upper-bar-flex {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+:host .sdds-table__title {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  padding-top: var(--sdds-spacing-element-16);
+  text-align: left;
+}
+:host .sdds-table__actionbar {
+  display: flex;
+  align-self: center;
+  gap: 8px;
+}
+:host .sdds-table__searchbar {
+  display: flex;
+  align-self: center;
+  position: relative;
+  height: 40px;
+  width: 40px;
+  border-radius: 4px 4px 0 0;
+  transition: background-color 250ms ease, width 250ms ease;
+  overflow: hidden;
+  background-color: transparent;
+}
+:host .sdds-table__searchbar::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  bottom: 0;
+  background-color: var(--sdds-blue-400);
+  transform: scaleX(0);
+  transition: transform 150ms ease;
+}
+:host .sdds-table__searchbar:focus-within::after {
+  transform: scaleX(100%);
+}
+:host .sdds-table__searchbar:focus-within, :host .sdds-table__searchbar.sdds-table__searchbar--active {
+  width: 208px;
+  background-color: var(--sdds-data-table-toolbar-searchbar-background);
+}
+:host .sdds-table__searchbar:focus-within:hover, :host .sdds-table__searchbar.sdds-table__searchbar--active:hover {
+  background-color: var(--sdds-data-table-toolbar-searchbar-background);
+}
+:host .sdds-table__searchbar .sdds-table__searchbar-input {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--sdds-data-table-color);
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0 36px 0 16px;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+}
+:host .sdds-table__searchbar .sdds-table__searchbar-input :focus {
+  background-color: var(--sdds-data-table-toolbar-searchbar-background);
+}
+:host .sdds-table__searchbar:hover {
+  background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);
+}
+:host .sdds-table__searchbar .sdds-table__searchbar-icon {
+  z-index: 0;
+  position: absolute;
+  right: 9px;
+  top: 9px;
+  width: 20px;
+  height: 20px;
+}
+
+:host(.sdds-table--compact) {
+  height: 56px;
+}

package/dist/collection/components/data-table/table-toolbar/table-toolbar.js

@@ -0,0 +1,142 @@
+import { h, Host, } from '@stencil/core';
+const relevantTableProps = [
+  'compactDesign',
+  'noMinWidth',
+  'verticalDividers',
+];
+export class TableToolbar {
+  constructor() {
+    this.tableTitle = '';
+    this.enableFiltering = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.tableId = '';
+  }
+  tablePropsChangedEventListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  searchFunction(event) {
+    const searchTerm = event.currentTarget.value.toLowerCase();
+    const sddsTableSearchBar = event.currentTarget.parentElement;
+    this.tableFilteringTerm.emit([this.tableId, searchTerm]);
+    if (searchTerm.length > 0) {
+      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');
+    }
+    else {
+      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');
+    }
+  }
+  render() {
+    return (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("div", { class: "sdds-table__upper-bar-flex" }, h("caption", { class: "sdds-table__title" }, this.tableTitle), h("div", { class: "sdds-table__actionbar" }, this.enableFiltering && (h("div", { class: "sdds-table__searchbar" }, h("input", { class: "sdds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "sdds-table__searchbar-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z", fill: "currentColor" }))))), h("slot", { name: "sdds-table__actionbar" })))));
+  }
+  static get is() { return "sdds-table-toolbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-toolbar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-toolbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tableTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds title to the data-table"
+        },
+        "attribute": "table-title",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "enableFiltering": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables preview of searchbar"
+        },
+        "attribute": "enable-filtering",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "verticalDividers": {},
+      "compactDesign": {},
+      "noMinWidth": {},
+      "whiteBackground": {},
+      "tableId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tableFilteringTerm",
+        "name": "tableFilteringTerm",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Used for sending users input to main parent <sdds-table> component"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "tablePropsChangedEvent",
+        "method": "tablePropsChangedEventListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=table-toolbar.js.map

package/dist/collection/components/data-table/table-toolbar/table-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-toolbar.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-toolbar/table-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\n@Component({\n  tag: 'sdds-table-toolbar',\n  styleUrl: 'table-toolbar.scss',\n  shadow: true,\n})\nexport class TableToolbar {\n  /** Adds title to the data-table */\n  @Prop({ reflect: true }) tableTitle: string = '';\n\n  /** Enables preview of searchbar */\n  @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Used for sending users input to main parent <sdds-table> component */\n  @Event({\n    eventName: 'tableFilteringTerm',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  tableFilteringTerm: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  searchFunction(event) {\n    const searchTerm = event.currentTarget.value.toLowerCase();\n    const sddsTableSearchBar = event.currentTarget.parentElement;\n\n    this.tableFilteringTerm.emit([this.tableId, searchTerm]);\n\n    if (searchTerm.length > 0) {\n      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n    } else {\n      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <div class=\"sdds-table__upper-bar-flex\">\n          <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n          <div class=\"sdds-table__actionbar\">\n            {this.enableFiltering && (\n              <div class=\"sdds-table__searchbar\">\n                <input\n                  class=\"sdds-table__searchbar-input\"\n                  type=\"text\"\n                  onKeyUp={(event) => this.searchFunction(event)}\n                />\n                <span class=\"sdds-table__searchbar-icon\">\n                  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </span>\n              </div>\n            )}\n            <slot name=\"sdds-table__actionbar\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/datetime/datetime.css

@@ -0,0 +1,385 @@
+.sdds-datetime-input[type=datetime-local] ~ .icon-time,
+.sdds-datetime-input-md[type=datetime-local] ~ .icon-time,
+.sdds-datetime-input-sm[type=datetime-local] ~ .icon-time {
+  display: none;
+}
+.sdds-datetime-input[type=date] ~ .icon-time,
+.sdds-datetime-input-md[type=date] ~ .icon-time,
+.sdds-datetime-input-sm[type=date] ~ .icon-time {
+  display: none;
+}
+.sdds-datetime-input[type=time] ~ .icon-datetime-local,
+.sdds-datetime-input-md[type=time] ~ .icon-datetime-local,
+.sdds-datetime-input-sm[type=time] ~ .icon-datetime-local {
+  display: none;
+}
+
+.sdds-datetime-input {
+  box-sizing: border-box;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-datetime-color);
+  background-color: var(--sdds-datetime-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+}
+.sdds-datetime-input * {
+  box-sizing: border-box;
+}
+.sdds-datetime-input::placeholder {
+  opacity: 1;
+  color: var(--sdds-datetime-placeholder);
+}
+.sdds-datetime-input:focus::placeholder {
+  color: var(--sdds-datetime-placeholder-color-focus);
+}
+.sdds-datetime-input:disabled {
+  background-color: var(--sdds-datetime-background-disabled);
+  color: var(--sdds-datetime-color-disabled);
+  cursor: not-allowed;
+}
+.sdds-datetime-input:disabled::placeholder {
+  color: var(--sdds-datetime-placeholder-disabled);
+}
+.sdds-datetime-input:disabled ~ .sdds-datetime-label-inside {
+  color: var(--sdds-datetime-label-disabled);
+}
+
+.sdds-datetime-input-md {
+  box-sizing: border-box;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-datetime-color);
+  background-color: var(--sdds-datetime-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-16);
+}
+.sdds-datetime-input-md * {
+  box-sizing: border-box;
+}
+.sdds-datetime-input-md::placeholder {
+  opacity: 1;
+  color: var(--sdds-datetime-placeholder);
+}
+.sdds-datetime-input-md:focus::placeholder {
+  color: var(--sdds-datetime-placeholder-color-focus);
+}
+.sdds-datetime-input-md:disabled {
+  background-color: var(--sdds-datetime-background-disabled);
+  color: var(--sdds-datetime-color-disabled);
+  cursor: not-allowed;
+}
+.sdds-datetime-input-md:disabled::placeholder {
+  color: var(--sdds-datetime-placeholder-disabled);
+}
+.sdds-datetime-input-md:disabled ~ .sdds-datetime-label-inside {
+  color: var(--sdds-datetime-label-disabled);
+}
+
+.sdds-datetime-input-sm {
+  box-sizing: border-box;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-datetime-color);
+  background-color: var(--sdds-datetime-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-16);
+}
+.sdds-datetime-input-sm * {
+  box-sizing: border-box;
+}
+.sdds-datetime-input-sm::placeholder {
+  opacity: 1;
+  color: var(--sdds-datetime-placeholder);
+}
+.sdds-datetime-input-sm:focus::placeholder {
+  color: var(--sdds-datetime-placeholder-color-focus);
+}
+.sdds-datetime-input-sm:disabled {
+  background-color: var(--sdds-datetime-background-disabled);
+  color: var(--sdds-datetime-color-disabled);
+  cursor: not-allowed;
+}
+.sdds-datetime-input-sm:disabled::placeholder {
+  color: var(--sdds-datetime-placeholder-disabled);
+}
+.sdds-datetime-input-sm:disabled ~ .sdds-datetime-label-inside {
+  color: var(--sdds-datetime-label-disabled);
+}
+
+.sdds-datetime-container {
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  position: relative;
+  height: 56px;
+  box-sizing: border-box;
+  background-color: var(--sdds-datetime-background);
+  border-bottom: 1px solid var(--sdds-datetime-border-bottom);
+  transition: border-bottom-color 200ms ease;
+}
+.sdds-datetime-container:hover {
+  border-bottom-color: var(--sdds-datetime-border-bottom-hover);
+}
+.sdds-form-datetime-md .sdds-datetime-container {
+  height: 48px;
+}
+.sdds-form-datetime-sm .sdds-datetime-container {
+  height: 40px;
+}
+
+.sdds-datetime-input-container {
+  position: relative;
+  width: 100%;
+}
+.sdds-datetime-input-container .datetime-icon {
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 18px;
+  pointer-events: none;
+}
+.sdds-datetime-input-container .datetime-icon path {
+  fill: var(--sdds-datetime-icon);
+}
+
+.sdds-datetime-label {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: block;
+  margin-bottom: var(--sdds-spacing-element-8);
+  color: var(--sdds-datetime-label-color);
+}
+
+.sdds-datetime-label-inside {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  position: absolute;
+  pointer-events: none;
+  color: var(--sdds-datetime-label-inside-color);
+  left: 16px;
+}
+
+.sdds-form-datetime {
+  display: block;
+  min-width: 208px;
+}
+.sdds-form-datetime-nomin {
+  min-width: auto;
+}
+
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input {
+  padding-top: var(--sdds-spacing-element-24);
+  padding-bottom: 15px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ~ .sdds-datetime-label-inside {
+  top: 20px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::input-placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ::placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-datetime-placeholder-color-focus);
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md {
+  padding-top: var(--sdds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ~ .sdds-datetime-label-inside {
+  top: 16px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::input-placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ::placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-datetime-placeholder-color-focus);
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm {
+  padding-top: var(--sdds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {
+  top: 16px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::input-placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ::placeholder {
+  color: transparent;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-datetime-placeholder-color-focus);
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-sm ~ .sdds-datetime-label-inside, .sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-md ~ .sdds-datetime-label-inside, .sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-md ~ .sdds-datetime-label-inside {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input ~ .sdds-datetime-label-inside, .sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input ~ .sdds-datetime-label-inside {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 12px;
+}
+
+.sdds-datetime-bar {
+  position: absolute;
+  width: 100%;
+}
+.sdds-datetime-bar::before, .sdds-datetime-bar::after {
+  content: "";
+  height: 2px;
+  top: 54px;
+  width: 0;
+  position: absolute;
+  background: var(--sdds-datetime-bar);
+  transition: 0.35s ease all;
+}
+.sdds-form-datetime-md .sdds-datetime-bar::before, .sdds-form-datetime-md .sdds-datetime-bar::after {
+  top: 46px;
+}
+.sdds-form-datetime-sm .sdds-datetime-bar::before, .sdds-form-datetime-sm .sdds-datetime-bar::after {
+  top: 40px;
+}
+.sdds-datetime-bar::before {
+  left: 50%;
+}
+.sdds-datetime-bar::after {
+  right: 50%;
+}
+.sdds-datetime-focus .sdds-datetime-bar::before, .sdds-datetime-focus .sdds-datetime-bar::after {
+  width: 50%;
+}
+
+.sdds-datetime-helper {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: block;
+  flex-basis: 100%;
+  padding-top: var(--sdds-spacing-element-4);
+  color: var(--sdds-datetime-helper);
+}
+.sdds-datetime-helper .sdds-helper {
+  display: inline-flex;
+  gap: 8px;
+}
+
+.sdds-form-datetime-disabled .sdds-datetime-container {
+  border-bottom-color: transparent;
+}
+.sdds-form-datetime-disabled .datetime-icon svg path {
+  fill: var(--sdds-datetime-icon-disabled);
+}
+.sdds-form-datetime-disabled .sdds-datetime-label {
+  color: var(--sdds-datetime-label-disabled);
+  cursor: not-allowed;
+}
+
+.sdds-form-datetime-success .sdds-datetime-container {
+  border-bottom-color: var(--sdds-datetime-border-bottom-success);
+  color: var(--sdds-datetime-color-success);
+}
+.sdds-form-datetime-success .sdds-datetime-bar::before, .sdds-form-datetime-success .sdds-datetime-bar::after {
+  background: var(--sdds-datetime-bar-sucess);
+}
+
+.sdds-form-datetime-error .sdds-datetime-helper {
+  color: var(--sdds-datetime-helper-error);
+}
+.sdds-form-datetime-error .sdds-datetime-container {
+  border-bottom-color: var(--sdds-datetime-border-bottom-error);
+}
+.sdds-form-datetime-error .sdds-datetime-bar::before, .sdds-form-datetime-error .sdds-datetime-bar::after {
+  background: var(--sdds-datetime-bar-error);
+}
+.sdds-form-datetime-error .datetime-icon path {
+  fill: var(--sdds-datetime-icon-error);
+}
+
+.sdds-datetime-textcounter {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(--sdds-datetime-textcounter);
+  float: right;
+}
+.sdds-datetime-textcounter .sdds-datetime-textcounter-divider {
+  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(--sdds-datetime-textcounter-divider);
+}
+
+/* datetime picker icon remove testing */
+input[type=datetime-local]::-webkit-inner-spin-button,
+input[type=datetime-local]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+input[type=date]::-webkit-inner-spin-button,
+input[type=date]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+input[type=time]::-webkit-inner-spin-button,
+input[type=time]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+.sdds-mode-variant-primary {
+  --sdds-datetime-background: var(--sdds-datetime-background-primary);
+}
+
+.sdds-mode-variant-secondary {
+  --sdds-datetime-background: var(--sdds-datetime-background-secondary);
+}