@ukic/canary-web-components 3.0.0-canary.27 → 3.0.0-canary.28

package/dist/types/components/ic-date-input/ic-date-input.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
 /**
  * @slot helper-text - Content is set as the helper text for the date input.
  */
@@ -160,6 +160,10 @@ export declare class DateInput {
      * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
      */
     value?: string | Date | null | undefined;
+    /**
+     * The value of the `aria-live` attribute on the validation message.
+     */
+    validationAriaLive: IcAriaLive;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */

package/dist/types/components/ic-date-input/ic-date-input.stories.d.ts

@@ -88,40 +88,46 @@ export namespace Validation {
     let name_12: string;
     export { name_12 as name };
 }
-export namespace DisablePastDates {
-    export function render_14(): import("lit-html").TemplateResult<1>;
+export namespace AriaLiveBehaviour {
+    export function render_14(args: any): import("lit-html").TemplateResult<1>;
     export { render_14 as render };
     let name_13: string;
     export { name_13 as name };
 }
-export namespace DisableFutureDates {
+export namespace DisablePastDates {
     export function render_15(): import("lit-html").TemplateResult<1>;
     export { render_15 as render };
     let name_14: string;
     export { name_14 as name };
 }
-export namespace MinMax {
+export namespace DisableFutureDates {
     export function render_16(): import("lit-html").TemplateResult<1>;
     export { render_16 as render };
     let name_15: string;
     export { name_15 as name };
 }
-export namespace Form {
-    export function render_17(): HTMLFormElement;
+export namespace MinMax {
+    export function render_17(): import("lit-html").TemplateResult<1>;
     export { render_17 as render };
     let name_16: string;
     export { name_16 as name };
 }
-export namespace WithClearingValue {
-    export function render_18(): import("lit-html").TemplateResult<1>;
+export namespace Form {
+    export function render_18(): HTMLFormElement;
     export { render_18 as render };
     let name_17: string;
     export { name_17 as name };
 }
-export namespace IcChangeEmitDatePartChanges {
+export namespace WithClearingValue {
     export function render_19(): import("lit-html").TemplateResult<1>;
     export { render_19 as render };
     let name_18: string;
     export { name_18 as name };
 }
+export namespace IcChangeEmitDatePartChanges {
+    export function render_20(): import("lit-html").TemplateResult<1>;
+    export { render_20 as render };
+    let name_19: string;
+    export { name_19 as name };
+}
 import readme from "./readme.md";

package/dist/types/components/ic-date-picker/ic-date-picker.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
 /**
  * @slot helper-text - Content is set as the helper text for the date picker.
  */
@@ -162,6 +162,10 @@ export declare class DatePicker {
      * 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.
      */
     theme?: IcThemeMode;
+    /**
+     * The value of the `aria-live` attribute on the validation message.
+     */
+    validationAriaLive: IcAriaLive;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */

package/dist/types/components/ic-time-input/ic-time-input.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcDisableTimeSelection, IcInformationStatusOrEmpty, IcSizes, IcThemeMode, IcTimeFormat } from "../../utils/types";
+import { IcAriaLive, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcSizes, IcThemeMode, IcTimeFormat } from "../../utils/types";
 /**
  * @slot helper-text - Content is set as the helper text for the time input.
  */
@@ -129,6 +129,10 @@ export declare class TimeInput {
      * The value of the time input. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
      */
     value?: string | Date | null | undefined;
+    /**
+     * The value of the `aria-live` attribute on the validation message.
+     */
+    validationAriaLive: IcAriaLive;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.
      */

package/dist/types/components/ic-time-input/ic-time-input.stories.d.ts

@@ -76,46 +76,52 @@ export namespace Validation {
     let name_10: string;
     export { name_10 as name };
 }
-export namespace IcChangeEmitTimePartChanges {
-    export function render_12(): import("lit-html").TemplateResult<1>;
+export namespace AriaLiveBehaviour {
+    export function render_12(args: any): import("lit-html").TemplateResult<1>;
     export { render_12 as render };
     let name_11: string;
     export { name_11 as name };
 }
-export namespace TimePeriod {
+export namespace IcChangeEmitTimePartChanges {
     export function render_13(): import("lit-html").TemplateResult<1>;
     export { render_13 as render };
     let name_12: string;
     export { name_12 as name };
 }
-export namespace HHMM {
+export namespace TimePeriod {
     export function render_14(): import("lit-html").TemplateResult<1>;
     export { render_14 as render };
     let name_13: string;
     export { name_13 as name };
 }
-export namespace MinTime {
+export namespace HHMM {
     export function render_15(): import("lit-html").TemplateResult<1>;
     export { render_15 as render };
     let name_14: string;
     export { name_14 as name };
 }
-export namespace MaxTime {
+export namespace MinTime {
     export function render_16(): import("lit-html").TemplateResult<1>;
     export { render_16 as render };
     let name_15: string;
     export { name_15 as name };
 }
-export namespace DisableTimes {
+export namespace MaxTime {
     export function render_17(): import("lit-html").TemplateResult<1>;
     export { render_17 as render };
     let name_16: string;
     export { name_16 as name };
 }
-export namespace WithClearingValue {
+export namespace DisableTimes {
     export function render_18(): import("lit-html").TemplateResult<1>;
     export { render_18 as render };
     let name_17: string;
     export { name_17 as name };
 }
+export namespace WithClearingValue {
+    export function render_19(): import("lit-html").TemplateResult<1>;
+    export { render_19 as render };
+    let name_18: string;
+    export { name_18 as name };
+}
 import readme from "./readme.md";

package/dist/types/components.d.ts

@@ -8,14 +8,14 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
 import { IcThemeMode } from "@ukic/web-components";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-import { IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode as IcThemeMode1, IcTimeFormat, IcWeekDays } from "./utils/types";
+import { IcAriaLive, IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode as IcThemeMode1, IcTimeFormat, IcWeekDays } from "./utils/types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 import { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
 export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
 export { IcThemeMode } from "@ukic/web-components";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-export { IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode as IcThemeMode1, IcTimeFormat, IcWeekDays } from "./utils/types";
+export { IcAriaLive, IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode as IcThemeMode1, IcTimeFormat, IcWeekDays } from "./utils/types";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
@@ -329,6 +329,10 @@ export namespace Components {
          */
         "theme"?: IcThemeMode1;
         "triggerIcChange": (d: Date | null) => Promise<void>;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -451,6 +455,10 @@ export namespace Components {
           * 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.
          */
         "theme"?: IcThemeMode1;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -651,6 +659,10 @@ export namespace Components {
          */
         "timePeriod": "12" | "24";
         "triggerIcChange": (t: Date | null) => Promise<void>;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.
          */
@@ -1307,6 +1319,10 @@ declare namespace LocalJSX {
           * 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.
          */
         "theme"?: IcThemeMode1;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1433,6 +1449,10 @@ declare namespace LocalJSX {
           * 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.
          */
         "theme"?: IcThemeMode1;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1653,6 +1673,10 @@ declare namespace LocalJSX {
           * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
          */
         "timePeriod"?: "12" | "24";
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.
          */

package/dist/types/utils/types.d.ts

@@ -42,8 +42,10 @@ export type IcNavParentDetails = {
 export type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small" | "badge" | "badge-small";
 /**
  * @interface IcMenuOption
- * @field {string} A label field to options. Defaults to "label", but can have any custom name.
- * @field {string} A value field to options. Defaults to "value", but can have any custom name.
+ * Set "label" and "value" props to use as the option's label and value.
+ * Alternatively, custom names for these props can be used e.g. by setting the "labelField" and "valueField" props on the relevant component.
+ *
+ * Any props supplied to the "htmlProps" object will be spread onto the option's underlying <li> element.
  */
 export interface IcMenuOption {
     description?: string;
@@ -58,6 +60,7 @@ export interface IcMenuOption {
         ariaLabel: string;
     };
     icon?: any;
+    htmlProps?: Record<string, any>;
 }
 export type IcSearchMatchPositions = "start" | "anywhere";
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
@@ -158,4 +161,5 @@ export declare enum IcWeekDays {
     Saturday = 6
 }
 export type IcPositionTopOrRight = "top" | "right";
+export type IcAriaLive = "polite" | "assertive" | "off";
 export {};