@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.11

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.css

@@ -15,7 +15,9 @@
 .title-bar-wrapper {
   flex-direction: column;
   padding: var(--ic-space-sm) var(--ic-space-xs);
-  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-300);
+  border-bottom: var(--ic-space-1px) solid
+    var(--ic-data-table-title-bar-keyline);
+  background-color: var(--ic-data-table-title-bar-background);
 }
 
 .full-width {
@@ -28,19 +30,22 @@ ic-typography.heading h3 {
 }
 
 ic-typography.ic-typography-subtitle-small {
-  --ic-typography-color: var(--ic-color-tertiary-text);
+  --ic-typography-color: var(--ic-data-table-title-bar-information);
 }
 
 ic-typography.ic-typography-h3,
 ::slotted([slot="header"]) {
   max-width: 50rem;
+  color: var(--ic-data-table-title-bar-title);
+
+  --ic-typography-color: var(--ic-data-table-title-bar-title);
 }
 
 ic-typography.ic-typography-body,
 ::slotted([slot="description"]) {
-  color: var(--ic-color-secondary-text);
+  color: var(--ic-data-table-title-bar-description);
 
-  --ic-typography-color: var(--ic-color-secondary-text);
+  --ic-typography-color: var(--ic-data-table-title-bar-description);
 }
 
 ic-typography.ic-typography-body,
@@ -53,26 +58,26 @@ ic-typography.ic-typography-subtitle-small,
   --input-width: 7.625rem;
 }
 
-@media screen and (max-width: 1200px) {
+@media (max-width: 1200px) {
   .header-container {
     flex-direction: column;
   }
 }
 
-@media screen and (min-width: 1201px) {
+@media (min-width: 1201px) {
   .header-container {
     gap: var(--ic-space-xs);
     align-items: baseline;
   }
 }
 
-@media screen and (min-width: 769px) {
+@media (min-width: 769px) {
   .description-actions {
     justify-content: space-between;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (max-width: 768px) {
   .description-actions {
     flex-direction: column;
     align-items: flex-start;
@@ -80,13 +85,13 @@ ic-typography.ic-typography-subtitle-small,
   }
 }
 
-@media screen and (min-width: 577px) {
+@media (min-width: 577px) {
   .action-area {
     align-items: center;
   }
 }
 
-@media screen and (max-width: 576px) {
+@media (max-width: 576px) {
   .action-area {
     flex-direction: column;
   }

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js

@@ -22,11 +22,11 @@ export class DataTableTitleBar {
     componentWillLoad() {
         const parentEl = this.el.parentElement;
         if (parentEl.tagName === "IC-DATA-TABLE") {
-            const dataTable = parentEl;
-            this.initialDensitySelectOption = dataTable.density;
-            this.isEmbedded = dataTable.embedded;
+            const { caption, density, embedded } = parentEl;
+            this.initialDensitySelectOption = density;
+            this.isEmbedded = embedded;
             if (this.heading === DEFAULT_TITLE_BAR_HEADING) {
-                this.heading = dataTable.caption;
+                this.heading = caption;
             }
         }
     }
@@ -39,7 +39,7 @@ export class DataTableTitleBar {
         return (h("div", { class: {
                 "title-bar-wrapper": true,
                 "full-width": isEmbedded,
-            } }, h("div", { class: "header-container" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3", className: "heading" }, h("h3", null, heading))), metadata && (h("ic-typography", { variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { class: "description-actions" }, h("slot", { name: "description" }, description && (h("ic-typography", { variant: "body" }, description))), showActionArea && (h("div", { class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { class: "custom-actions-wrapper" }, h("slot", { name: "custom-actions" }))), !hideDensitySelect && (h("ic-select", { size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
+            } }, h("div", { class: "header-container" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3", class: "heading" }, h("h3", null, heading))), metadata && (h("ic-typography", { variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { class: "description-actions" }, h("slot", { name: "description" }, description && (h("ic-typography", { variant: "body" }, description))), showActionArea && (h("div", { class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { class: "custom-actions-wrapper" }, h("slot", { name: "custom-actions" }))), !hideDensitySelect && (h("ic-select", { size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
                 { label: "Default", value: "default" },
                 { label: "Dense", value: "dense" },
                 { label: "Spacious", value: "spacious" },

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl.tagName === \"IC-DATA-TABLE\") {\n      const dataTable = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = dataTable.density;\n      this.isEmbedded = dataTable.embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = dataTable.caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" className=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-date-input/ic-date-input.css

@@ -441,6 +441,31 @@ video {
 }
 
 
+:host {
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
+  --input-bg-color: var(--ic-date-input-bg);
+  --ic-input-label-text-color: var(--ic-date-input-label);
+  --ic-input-label-helper-text-color: var(--ic-date-input-subtitle);
+  --border-color: var(--ic-date-input-border);
+  --border-color-disabled: var(--ic-date-input-border-disabled);
+  --border-color-hover: var(--ic-date-input-border-default-hover);
+  --border-color-pressed: var(--ic-date-input-border-default-pressed);
+  --border-error-color: var(--ic-date-input-border-error);
+  --border-error-color-hover: var(--ic-date-input-border-error-hover);
+  --border-error-color-pressed: var(--ic-date-input-border-error-pressed);
+  --border-success-color: var(--ic-date-input-border-success);
+  --border-success-color-hover: var(--ic-date-input-border-success-hover);
+  --border-success-color-pressed: var(--ic-date-input-border-success-pressed);
+  --border-warning-color: var(--ic-date-input-border-warning);
+  --border-warning-color-hover: var(--ic-date-input-border-warning-hover);
+  --border-warning-color-pressed: var(--ic-date-input-border-warning-pressed);
+}
+
+:host(.ic-date-input-disabled) {
+  --ic-input-label-text-color: var(--ic-date-input-label-disabled);
+  --ic-input-label-helper-text-color: var(--ic-date-input-subtitle-disabled);
+}
+
 input {
   border: 0;
   height: 100%;
@@ -450,6 +475,8 @@ input {
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
           appearance: textfield;
+  color: var(--ic-date-input-text-filled);
+  caret-color: var(--ic-date-input-typing-cursor);
 }
 
 input::-webkit-outer-spin-button,
@@ -457,13 +484,21 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-ic-input-component-container {
-  cursor: text;
+input:-webkit-autofill {
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;
+  -webkit-text-fill-color: var(--ic-date-input-text-filled) !important;
+}
+
+input::-moz-placeholder {
+  color: var(--ic-date-input-text-placeholder);
 }
 
-ic-input-component-container,
-ic-input-component-container:hover {
-  color: var(--ic-color-tertiary-text);
+input::placeholder {
+  color: var(--ic-date-input-text-placeholder);
+}
+
+ic-input-component-container {
+  cursor: text;
 }
 
 ic-input-component-container .focus-indicator {
@@ -471,6 +506,10 @@ ic-input-component-container .focus-indicator {
   align-items: center;
 }
 
+.date-inputs {
+  color: var(--ic-date-input-text-placeholder);
+}
+
 .day-input {
   width: 1.438rem;
 }
@@ -528,22 +567,41 @@ ic-input-component-container .focus-indicator {
 .calendar-button:focus,
 .clear-button:active,
 .calendar-button:active {
-  background-color: var(--ic-focus-blue) !important;
-  box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;
+  background-color: var(--ic-color-focus-inner) !important;
+  box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;
   border-radius: 0.25rem;
 }
 
+.calendar-button:focus,
+.calendar-button:active {
+  --ic-button-tertiary-text-active: var(--ic-atoms-input-clear-button-focus);
+  --ic-button-tertiary-text-hover-active: var(
+    --ic-atoms-input-clear-button-focus
+  );
+  --ic-button-tertiary-text-pressed-active: var(
+    --ic-atoms-input-clear-button-focus
+  );
+}
+
 .clear-button:focus,
 .calendar-button:focus,
 .clear-button:active *,
 .calendar-button:active * {
-  fill: var(--ic-architectural-white);
+  fill: var(--ic-atoms-input-clear-button-focus);
+}
+
+.clear-button svg {
+  color: var(--ic-date-input-clear-icon);
+}
+
+.clear-button:focus svg {
+  color: var(--ic-atoms-input-clear-button-focus);
 }
 
 .divider {
   margin: 0 var(--ic-space-xxs);
   width: var(--ic-space-1px);
-  background-color: var(--ic-architectural-400);
+  background-color: var(--ic-atoms-input-divider);
   border-radius: var(--ic-space-1px);
 }
 
@@ -558,3 +616,10 @@ ic-input-component-container .focus-indicator {
 .divider.large {
   height: var(--ic-space-lg);
 }
+
+ic-input-validation {
+  --ic-input-validation-status-text-color: var(--ic-date-input-status-text);
+  --ic-input-validation-error: var(--ic-date-input-icon-error);
+  --ic-input-validation-warning-icon-color: var(--ic-date-input-icon-warning);
+  --ic-input-validation-success-icon-color: var(--ic-date-input-icon-success);
+}

package/dist/collection/components/ic-date-input/ic-date-input.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
-import { IcInformationStatus, IcThemeForegroundEnum, IcDateInputMonths, IcDayNames, } from "../../utils/types";
+import { IcInformationStatus, IcDateInputMonths, IcDayNames, } from "../../utils/types";
 import { convertToDoubleDigits, createDate, dateMatches, extractDateFromZuluDateTime, isDateOrEpoch, splitStringDate, } from "../../utils/date-helpers";
-import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
+import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeDisabledFalse, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
 import Clear from "../../assets/clear-icon.svg";
 import Calendar from "../../assets/calendar.svg";
 let inputIds = 0;
@@ -146,8 +146,9 @@ export class DateInput {
             this.notifyScreenReader(input, event);
         };
         this.handleKeyDown = (event, isInputPrevented) => {
+            var _a;
             const input = event.target;
-            const eventKey = event.key.toLowerCase();
+            const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
             // Regex required due to FF allowing all characters as values for number text field.
             const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[/-]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
             if (!regex.test(eventKey) &&
@@ -173,6 +174,12 @@ export class DateInput {
                     this.preventAutoFormatting = true;
                     this.handleUpDownArrowKeyPress(input, event);
                     break;
+                case "backspace":
+                    if (input.value.length === 0) {
+                        event.preventDefault();
+                        this.moveToPreviousInput(input);
+                    }
+                    break;
                 default:
                     break;
             }
@@ -459,7 +466,7 @@ export class DateInput {
         // Includes text usually added using aria-describedby
         // (which doesn't work on input component container)
         this.setAriaLabelledBy = () => {
-            var _a;
+            var _a, _b;
             if (this.disabled &&
                 !isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
                 this.removeAriaLabelledBy();
@@ -472,12 +479,11 @@ export class DateInput {
             const labelId = `${this.inputId}-label`;
             if (labelEl !== null && labelEl !== undefined) {
                 labelEl.id = labelId;
-                const hasValidation = (!isEmptyString(this.validationStatus) &&
-                    !isEmptyString(this.validationText)) ||
-                    !isEmptyString(this.invalidDateText);
-                const labelledBy = `${labelId} ${this.screenReaderInfoId} ${getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
-                this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
             }
+            const hasValidation = !isEmptyString(this.validationStatus) ||
+                !isEmptyString(this.invalidDateText);
+            const labelledBy = `${(_b = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _b !== void 0 ? _b : ""} ${this.screenReaderInfoId} ${getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
+            this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
         };
         // Sets boolean for each input, used to limit the number of characters within each field (2 for day / month, 4 for year)
         this.setPreventInput = (input, isPrevented) => {
@@ -814,6 +820,7 @@ export class DateInput {
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
         this.hideHelperText = false;
+        this.hideLabel = false;
         this.inputId = `ic-date-input-${inputIds++}`;
         this.invalidDateMessage = "Please enter a valid date.";
         this.label = undefined;
@@ -824,10 +831,14 @@ export class DateInput {
         this.showCalendarButton = false;
         this.showClearButton = true;
         this.size = "medium";
+        this.theme = "inherit";
         this.value = "";
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchDisableFutureHandler() {
         this.watchMaxHandler();
     }
@@ -888,6 +899,7 @@ export class DateInput {
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
         this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
         addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
         this.setInputsInOrder();
@@ -1058,9 +1070,8 @@ export class DateInput {
         }
     }
     render() {
-        const { inputId, label, disabled, helperText, hideHelperText, showClearButton, showCalendarButton, size, } = this;
-        const hasCustomValidation = !isEmptyString(this.validationStatus) &&
-            !isEmptyString(this.validationText);
+        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, } = this;
+        const hasCustomValidation = !isEmptyString(this.validationStatus);
         const validationStatus = hasCustomValidation
             ? this.validationStatus
             : !isEmptyString(this.invalidDateText)
@@ -1068,16 +1079,15 @@ export class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (h(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { disabled: disabled }, h("ic-input-label", { for: inputId, label: label, helperText: !hideHelperText ? helperText : null, disabled: disabled }), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, h("div", { class: "input-container" }, h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { class: "action-buttons" }, showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
+        return (h(Host, { class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-date-input-disabled`]: disabled,
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { class: "input-container" }, h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { class: "action-buttons" }, showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark, size: size })), showCalendarButton && (h("div", { class: "show-calendar-button-wrapper" }, h("div", { class: { divider: true, [size]: true } }), h("ic-button", { id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, appearance: this.calendarFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Default })))))), h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { class: "show-calendar-button-wrapper" }, h("div", { class: { divider: true, [size]: true } }), h("ic-button", { id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1283,6 +1293,24 @@ export class DateInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the label will be visually hidden, but will still be read out by screen readers."
+                },
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "inputId": {
                 "type": "string",
                 "mutable": false,
@@ -1481,6 +1509,30 @@ export class DateInput {
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the date picker to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -1755,6 +1807,9 @@ export class DateInput {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
                 "propName": "disableFuture",
                 "methodName": "watchDisableFutureHandler"
             }, {