@ukic/web-components 3.7.0 → 3.9.0

package/dist/types/components.d.ts

@@ -6,9 +6,9 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcBackToTopPositions, IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.types";
@@ -16,6 +16,7 @@ import { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-stat
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
+import { IcGridBreakpoints, IcGridType } from "./components/ic-layout-grid/ic-layout-grid.types";
 import { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./components/ic-search-bar/ic-search-bar.types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
@@ -36,9 +37,9 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcBackToTopPositions, IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 export { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.types";
@@ -46,6 +47,7 @@ export { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-stat
 export { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 export { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 export { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
+export { IcGridBreakpoints, IcGridType } from "./components/ic-layout-grid/ic-layout-grid.types";
 export { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 export { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./components/ic-search-bar/ic-search-bar.types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
@@ -126,6 +128,92 @@ export namespace Components {
          */
         "theme"?: IcThemeMode;
     }
+    interface IcActionChip {
+        /**
+          * If `true`, the chip will appear disabled.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the user can save the linked URL instead of navigating to it.
+         */
+        "download": string | boolean;
+        /**
+          * The <form> element to associate the chip with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner.
+         */
+        "formtarget"?: string;
+        /**
+          * The URL that the link points to. This will render the chip as an "a" tag.
+         */
+        "href"?: string;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The text rendered within the chip.
+         */
+        "label": string;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome": boolean;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * Sets focus on the chip.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the chip.
+         */
+        "size": IcSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme": IcThemeMode;
+        /**
+          * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
+         */
+        "transparentBackground": boolean;
+        /**
+          * The type of the chip.
+         */
+        "type": IcButtonTypes;
+        /**
+          * The emphasis of the chip.
+         */
+        "variant": IcEmphasisType;
+    }
     interface IcAlert {
         /**
           * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
@@ -370,6 +458,10 @@ export namespace Components {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme": IcThemeMode;
+        /**
+          * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        "tooltipFixedPositioning": boolean;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -966,6 +1058,66 @@ export namespace Components {
          */
         "status"?: IcInformationStatusOrEmpty;
     }
+    interface IcLayoutGrid {
+        /**
+          * The alignment of the grid.
+         */
+        "aligned"?: IcAlignment;
+        /**
+          * The number of columns in the grid. This can be a number or an object specifying different values for each breakpoint.
+         */
+        "columns"?: IcGridBreakpoints;
+        /**
+          * The default column span for grid items.
+         */
+        "defaultColSpan"?: IcGridBreakpoints;
+        /**
+          * The default column width for grid items. This is used when the grid type is set to "fixed".
+         */
+        "defaultColWidth"?: string;
+        /**
+          * The default row span for grid items.
+         */
+        "defaultRowSpan"?: number;
+        /**
+          * If `true`, the standard vertical padding from the grid will be removed.
+         */
+        "fullHeight"?: boolean;
+        /**
+          * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).
+         */
+        "gridSpacing"?: number;
+        /**
+          * The number of rows in the grid.
+         */
+        "rows"?: number;
+        /**
+          * The layout type of the grid.
+         */
+        "type": IcGridType;
+    }
+    interface IcLayoutGridItem {
+        /**
+          * The number of columns the grid item should span.
+         */
+        "colSpan"?: number;
+        /**
+          * The column the grid item should start at.
+         */
+        "colStart"?: number;
+        /**
+          * If `true`, the grid item will be hidden on smaller screens.
+         */
+        "hideInMobileMode"?: boolean;
+        /**
+          * The number of rows the grid item should span.
+         */
+        "rowSpan"?: number;
+        /**
+          * The row the grid item should start at.
+         */
+        "rowStart"?: number;
+    }
     interface IcLink {
         /**
           * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.
@@ -1434,6 +1586,10 @@ export namespace Components {
           * @param setFocusToAnchor when true return focus to anchor element when menu is closed
          */
         "closeMenu": (setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>;
+        /**
+          * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        "fixedPositioning": boolean;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -2417,6 +2573,10 @@ export namespace Components {
           * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
          */
         "displayTooltip": (show: boolean, persistTooltip?: boolean) => Promise<void>;
+        /**
+          * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        "fixedPositioning": boolean;
         "isTooltipVisible": () => Promise<boolean>;
         /**
           * The text to display on the tooltip.
@@ -2675,6 +2835,12 @@ declare global {
         prototype: HTMLIcAccordionGroupElement;
         new (): HTMLIcAccordionGroupElement;
     };
+    interface HTMLIcActionChipElement extends Components.IcActionChip, HTMLStencilElement {
+    }
+    var HTMLIcActionChipElement: {
+        prototype: HTMLIcActionChipElement;
+        new (): HTMLIcActionChipElement;
+    };
     interface HTMLIcAlertElementEventMap {
         "icDismiss": void;
     }
@@ -2907,6 +3073,18 @@ declare global {
         prototype: HTMLIcInputValidationElement;
         new (): HTMLIcInputValidationElement;
     };
+    interface HTMLIcLayoutGridElement extends Components.IcLayoutGrid, HTMLStencilElement {
+    }
+    var HTMLIcLayoutGridElement: {
+        prototype: HTMLIcLayoutGridElement;
+        new (): HTMLIcLayoutGridElement;
+    };
+    interface HTMLIcLayoutGridItemElement extends Components.IcLayoutGridItem, HTMLStencilElement {
+    }
+    var HTMLIcLayoutGridItemElement: {
+        prototype: HTMLIcLayoutGridItemElement;
+        new (): HTMLIcLayoutGridItemElement;
+    };
     interface HTMLIcLinkElement extends Components.IcLink, HTMLStencilElement {
     }
     var HTMLIcLinkElement: {
@@ -3459,6 +3637,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "ic-accordion": HTMLIcAccordionElement;
         "ic-accordion-group": HTMLIcAccordionGroupElement;
+        "ic-action-chip": HTMLIcActionChipElement;
         "ic-alert": HTMLIcAlertElement;
         "ic-back-to-top": HTMLIcBackToTopElement;
         "ic-badge": HTMLIcBadgeElement;
@@ -3484,6 +3663,8 @@ declare global {
         "ic-input-container": HTMLIcInputContainerElement;
         "ic-input-label": HTMLIcInputLabelElement;
         "ic-input-validation": HTMLIcInputValidationElement;
+        "ic-layout-grid": HTMLIcLayoutGridElement;
+        "ic-layout-grid-item": HTMLIcLayoutGridItemElement;
         "ic-link": HTMLIcLinkElement;
         "ic-loading-indicator": HTMLIcLoadingIndicatorElement;
         "ic-menu": HTMLIcMenuElement;
@@ -3577,6 +3758,88 @@ declare namespace LocalJSX {
          */
         "theme"?: IcThemeMode;
     }
+    interface IcActionChip {
+        /**
+          * If `true`, the chip will appear disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the user can save the linked URL instead of navigating to it.
+         */
+        "download"?: string | boolean;
+        /**
+          * The <form> element to associate the chip with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner.
+         */
+        "formtarget"?: string;
+        /**
+          * The URL that the link points to. This will render the chip as an "a" tag.
+         */
+        "href"?: string;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The text rendered within the chip.
+         */
+        "label": string;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome"?: boolean;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * The size of the chip.
+         */
+        "size"?: IcSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
+         */
+        "transparentBackground"?: boolean;
+        /**
+          * The type of the chip.
+         */
+        "type"?: IcButtonTypes;
+        /**
+          * The emphasis of the chip.
+         */
+        "variant"?: IcEmphasisType;
+    }
     interface IcAlert {
         /**
           * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
@@ -3824,6 +4087,10 @@ declare namespace LocalJSX {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode;
+        /**
+          * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        "tooltipFixedPositioning"?: boolean;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -4423,6 +4690,66 @@ declare namespace LocalJSX {
          */
         "status"?: IcInformationStatusOrEmpty;
     }
+    interface IcLayoutGrid {
+        /**
+          * The alignment of the grid.
+         */
+        "aligned"?: IcAlignment;
+        /**
+          * The number of columns in the grid. This can be a number or an object specifying different values for each breakpoint.
+         */
+        "columns"?: IcGridBreakpoints;
+        /**
+          * The default column span for grid items.
+         */
+        "defaultColSpan"?: IcGridBreakpoints;
+        /**
+          * The default column width for grid items. This is used when the grid type is set to "fixed".
+         */
+        "defaultColWidth"?: string;
+        /**
+          * The default row span for grid items.
+         */
+        "defaultRowSpan"?: number;
+        /**
+          * If `true`, the standard vertical padding from the grid will be removed.
+         */
+        "fullHeight"?: boolean;
+        /**
+          * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).
+         */
+        "gridSpacing"?: number;
+        /**
+          * The number of rows in the grid.
+         */
+        "rows"?: number;
+        /**
+          * The layout type of the grid.
+         */
+        "type"?: IcGridType;
+    }
+    interface IcLayoutGridItem {
+        /**
+          * The number of columns the grid item should span.
+         */
+        "colSpan"?: number;
+        /**
+          * The column the grid item should start at.
+         */
+        "colStart"?: number;
+        /**
+          * If `true`, the grid item will be hidden on smaller screens.
+         */
+        "hideInMobileMode"?: boolean;
+        /**
+          * The number of rows the grid item should span.
+         */
+        "rowSpan"?: number;
+        /**
+          * The row the grid item should start at.
+         */
+        "rowStart"?: number;
+    }
     interface IcLink {
         /**
           * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.
@@ -4858,6 +5185,10 @@ declare namespace LocalJSX {
           * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
          */
         "anchor"?: string;
+        /**
+          * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        "fixedPositioning"?: boolean;
         /**
           * Emitted when the popover menu is closed.
          */
@@ -5918,6 +6249,10 @@ declare namespace LocalJSX {
           * If `true`, the tooltip will not be displayed on hover, it will require a click.
          */
         "disableHover"?: boolean;
+        /**
+          * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        "fixedPositioning"?: boolean;
         /**
           * The text to display on the tooltip.
          */
@@ -6018,6 +6353,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "ic-accordion": IcAccordion;
         "ic-accordion-group": IcAccordionGroup;
+        "ic-action-chip": IcActionChip;
         "ic-alert": IcAlert;
         "ic-back-to-top": IcBackToTop;
         "ic-badge": IcBadge;
@@ -6043,6 +6379,8 @@ declare namespace LocalJSX {
         "ic-input-container": IcInputContainer;
         "ic-input-label": IcInputLabel;
         "ic-input-validation": IcInputValidation;
+        "ic-layout-grid": IcLayoutGrid;
+        "ic-layout-grid-item": IcLayoutGridItem;
         "ic-link": IcLink;
         "ic-loading-indicator": IcLoadingIndicator;
         "ic-menu": IcMenu;
@@ -6089,6 +6427,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "ic-accordion": LocalJSX.IcAccordion & JSXBase.HTMLAttributes<HTMLIcAccordionElement>;
             "ic-accordion-group": LocalJSX.IcAccordionGroup & JSXBase.HTMLAttributes<HTMLIcAccordionGroupElement>;
+            "ic-action-chip": LocalJSX.IcActionChip & JSXBase.HTMLAttributes<HTMLIcActionChipElement>;
             "ic-alert": LocalJSX.IcAlert & JSXBase.HTMLAttributes<HTMLIcAlertElement>;
             "ic-back-to-top": LocalJSX.IcBackToTop & JSXBase.HTMLAttributes<HTMLIcBackToTopElement>;
             "ic-badge": LocalJSX.IcBadge & JSXBase.HTMLAttributes<HTMLIcBadgeElement>;
@@ -6114,6 +6453,8 @@ declare module "@stencil/core" {
             "ic-input-container": LocalJSX.IcInputContainer & JSXBase.HTMLAttributes<HTMLIcInputContainerElement>;
             "ic-input-label": LocalJSX.IcInputLabel & JSXBase.HTMLAttributes<HTMLIcInputLabelElement>;
             "ic-input-validation": LocalJSX.IcInputValidation & JSXBase.HTMLAttributes<HTMLIcInputValidationElement>;
+            "ic-layout-grid": LocalJSX.IcLayoutGrid & JSXBase.HTMLAttributes<HTMLIcLayoutGridElement>;
+            "ic-layout-grid-item": LocalJSX.IcLayoutGridItem & JSXBase.HTMLAttributes<HTMLIcLayoutGridItemElement>;
             "ic-link": LocalJSX.IcLink & JSXBase.HTMLAttributes<HTMLIcLinkElement>;
             "ic-loading-indicator": LocalJSX.IcLoadingIndicator & JSXBase.HTMLAttributes<HTMLIcLoadingIndicatorElement>;
             "ic-menu": LocalJSX.IcMenu & JSXBase.HTMLAttributes<HTMLIcMenuElement>;

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

@@ -19,6 +19,10 @@ export declare const VARIANT_ICONS: {
         icon: string;
         ariaLabel: string;
     };
+    ai: {
+        icon: string;
+        ariaLabel: string;
+    };
 };
 export declare const IC_INHERITED_ARIA: string[];
 export declare const IC_DEVICE_SIZES: {

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

@@ -69,13 +69,13 @@ export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrand
  */
 export declare const isMobileOrTablet: () => boolean;
 /**
- * Will create a button within the lightDOM which interacts with the parent form.
+ * Will create a button within the lightDOM which interacts with the form.
  * This is required as buttons within the shadowDOM will not invoke a submit or reset
  *
- * @param form - parent form element which contains shadowDom button
+ * @param form - form element to associate button with
  * @param button - shadowDOM button
  */
-export declare const handleHiddenFormButtonClick: (form: HTMLFormElement, button: HTMLIcButtonElement | HTMLButtonElement) => void;
+export declare const handleHiddenFormButtonClick: (form: HTMLFormElement | null, button: HTMLIcButtonElement) => void;
 export declare const isEmptyString: (value?: string) => boolean;
 export declare const isPropDefined: (prop?: string) => string | undefined;
 /**

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

@@ -1,5 +1,5 @@
 export type IcFocusableComponents = HTMLIcBreadcrumbElement | HTMLIcButtonElement | HTMLIcCardVerticalElement | HTMLIcCheckboxElement | HTMLIcChipElement | HTMLIcLinkElement | HTMLIcNavigationButtonElement | HTMLIcNavigationGroupElement | HTMLIcNavigationItemElement | HTMLIcRadioOptionElement | HTMLIcSearchBarElement | HTMLIcSelectElement | HTMLIcSwitchElement | HTMLIcTabElement | HTMLIcTextFieldElement;
-export type IcStatusVariants = "neutral" | "info" | "warning" | "error" | "success";
+export type IcStatusVariants = "neutral" | "info" | "warning" | "error" | "success" | "ai";
 export declare enum IcInformationStatus {
     Warning = "warning",
     Error = "error",