@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/hydrate/package.json

@@ -2,5 +2,11 @@
   "name": "@ukic/web-components/hydrate",
   "description": "core component hydration app.",
   "main": "index.js",
-  "types": "index.d.ts"
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
 }

package/loader/cdn.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,3 +1 @@
-
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,2 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "3.0.0-alpha.9",
+  "version": "3.1.0",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -9,7 +9,7 @@
   },
   "repository": {
     "url": "https://github.com/mi6/ic-ui-kit",
-    "directory": "packages/react"
+    "directory": "packages/web-components"
   },
   "main": "dist/index.cjs.js",
   "module": "./dist/index.js",
@@ -37,7 +37,7 @@
     "test-a11y": "jest",
     "create-component": "stencil generate",
     "storybook": "npm-run-all --parallel build:watch start-storybook",
-    "start-storybook": "storybook dev -p 6006 -s dist",
+    "start-storybook": "storybook dev -p 6006 dist",
     "build-storybook": "rimraf /storybook-static && storybook build",
     "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
     "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^4.9.0"
+    "@stencil/core": "^4.26.0"
   },
   "peerDependencies": {
     "@ukic/fonts": "^2.6.0"
@@ -57,18 +57,23 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
+    "@jest/transform": "^29.7.0",
+    "@jest/types": "^29.6.3",
     "@mdx-js/react": "^1.6.22",
     "@open-wc/testing-helpers": "^2.0.2",
     "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^7.6.7",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/addon-a11y": "^8.5.3",
+    "@storybook/addon-actions": "^8.5.3",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/addon-mdx-gfm": "^8.5.3",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/web-components": "^7.6.7",
-    "@storybook/web-components-webpack5": "^7.6.7",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/preview-api": "^8.5.3",
+    "@storybook/web-components": "^8.5.3",
+    "@storybook/web-components-webpack5": "^8.5.3",
     "@types/autoprefixer": "^10.2.0",
     "@types/jest": "^26.0.24",
     "@types/jest-axe": "^3.5.3",
@@ -86,10 +91,11 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "stencil-inline-svg": "^1.1.0",
-    "storybook": "^7.6.7",
+    "storybook": "^8.5.3",
     "ts-jest": "^26.5.6",
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "c4ead3a55cd2fcb22af6e0e92a46f99c89cb194f"
+  "packageManager": "^npm@10.9.2",
+  "gitHead": "6ddd470175efc6e34d94c67fe05db42304dd4e3c"
 }

package/vscode-data.json

@@ -187,6 +187,21 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "position",
+          "description": "The horizontal position of the element.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
         {
           "name": "target",
           "description": "The ID of the element to jump back to when the link is clicked."
@@ -891,7 +906,7 @@
         },
         {
           "name": "validation-text",
-          "description": "The validation text - e.g. 'error' | 'warning' | 'success'."
+          "description": "The text to display as the validation message."
         }
       ]
     },
@@ -1107,17 +1122,13 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "buttons",
-          "description": "If set to `false`, default buttons or slotted dialog controls will not be displayed."
-        },
         {
           "name": "close-on-backdrop-click",
           "description": "If set to `false`, the dialog will not close when the backdrop is clicked."
         },
         {
           "name": "destructive",
-          "description": "If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
+          "description": "If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
         },
         {
           "name": "disable-height-constraint",
@@ -1139,6 +1150,10 @@
           "name": "hide-close-button",
           "description": "If `true`, the close button will not be displayed."
         },
+        {
+          "name": "hide-default-controls",
+          "description": "If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed."
+        },
         {
           "name": "label",
           "description": "Sets the optional label for the dialog which appears above the heading."
@@ -1329,6 +1344,21 @@
         {
           "name": "subheading",
           "description": "The subtitle rendered in the empty state container."
+        },
+        {
+          "name": "theme",
+          "description": "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.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -2169,7 +2199,7 @@
       "attributes": [
         {
           "name": "expandable",
-          "description": "If `true`, the group will be expandable in the side menu."
+          "description": "If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes."
         },
         {
           "name": "label",
@@ -2639,7 +2669,7 @@
         },
         {
           "name": "validation-text",
-          "description": "The validation text - e.g. 'error' | 'warning' | 'success'."
+          "description": "The text to display as the validation message."
         }
       ]
     },
@@ -2728,171 +2758,7 @@
         },
         {
           "name": "autocomplete",
-          "description": "The state of autocompletion the browser can apply on the text value.",
-          "values": [
-            {
-              "name": "name"
-            },
-            {
-              "name": "on"
-            },
-            {
-              "name": "off"
-            },
-            {
-              "name": "honorific-prefix"
-            },
-            {
-              "name": "given-name"
-            },
-            {
-              "name": "additional-name"
-            },
-            {
-              "name": "family-name"
-            },
-            {
-              "name": "honorific-suffix"
-            },
-            {
-              "name": "nickname"
-            },
-            {
-              "name": "email"
-            },
-            {
-              "name": "username"
-            },
-            {
-              "name": "new-password"
-            },
-            {
-              "name": "current-password"
-            },
-            {
-              "name": "one-time-code"
-            },
-            {
-              "name": "organization-title"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "street-address"
-            },
-            {
-              "name": "address-line1"
-            },
-            {
-              "name": "address-line2"
-            },
-            {
-              "name": "address-line3"
-            },
-            {
-              "name": "address-level4"
-            },
-            {
-              "name": "address-level3"
-            },
-            {
-              "name": "address-level2"
-            },
-            {
-              "name": "address-level1"
-            },
-            {
-              "name": "country"
-            },
-            {
-              "name": "country-name"
-            },
-            {
-              "name": "postal-code"
-            },
-            {
-              "name": "cc-name"
-            },
-            {
-              "name": "cc-given-name"
-            },
-            {
-              "name": "cc-additional-name"
-            },
-            {
-              "name": "cc-family-name"
-            },
-            {
-              "name": "cc-number"
-            },
-            {
-              "name": "cc-exp"
-            },
-            {
-              "name": "cc-exp-month"
-            },
-            {
-              "name": "cc-exp-year"
-            },
-            {
-              "name": "cc-csc"
-            },
-            {
-              "name": "cc-type"
-            },
-            {
-              "name": "transaction-currency"
-            },
-            {
-              "name": "transaction-amount"
-            },
-            {
-              "name": "language"
-            },
-            {
-              "name": "bday"
-            },
-            {
-              "name": "bday-day"
-            },
-            {
-              "name": "bday-month"
-            },
-            {
-              "name": "bday-year"
-            },
-            {
-              "name": "sex"
-            },
-            {
-              "name": "tel"
-            },
-            {
-              "name": "tel-country-code"
-            },
-            {
-              "name": "tel-national"
-            },
-            {
-              "name": "tel-area-code"
-            },
-            {
-              "name": "tel-local"
-            },
-            {
-              "name": "tel-extension"
-            },
-            {
-              "name": "impp"
-            },
-            {
-              "name": "url"
-            },
-            {
-              "name": "photo"
-            }
-          ]
+          "description": "The state of autocompletion the browser can apply on the text value."
         },
         {
           "name": "autocorrect",
@@ -3321,6 +3187,54 @@
         }
       ]
     },
+    {
+      "name": "ic-skip-link",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "full-width",
+          "description": "If `true`, the skip link will fill the width of the page."
+        },
+        {
+          "name": "inline",
+          "description": "If `true`, the skip link will appear inline with surrounding page content when focused."
+        },
+        {
+          "name": "label",
+          "description": "The label displayed when the skip link is focused."
+        },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the skip link will display as black in the light theme, and white in the dark theme."
+        },
+        {
+          "name": "target",
+          "description": "The target ID for the element which should receive focus when triggering the skip link."
+        },
+        {
+          "name": "theme",
+          "description": "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.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "transparent-background",
+          "description": "If `true`, the background will be hidden."
+        }
+      ]
+    },
     {
       "name": "ic-status-tag",
       "description": {
@@ -3668,171 +3582,7 @@
         },
         {
           "name": "autocomplete",
-          "description": "The state of autocompletion the browser can apply on the text value.",
-          "values": [
-            {
-              "name": "name"
-            },
-            {
-              "name": "on"
-            },
-            {
-              "name": "off"
-            },
-            {
-              "name": "honorific-prefix"
-            },
-            {
-              "name": "given-name"
-            },
-            {
-              "name": "additional-name"
-            },
-            {
-              "name": "family-name"
-            },
-            {
-              "name": "honorific-suffix"
-            },
-            {
-              "name": "nickname"
-            },
-            {
-              "name": "email"
-            },
-            {
-              "name": "username"
-            },
-            {
-              "name": "new-password"
-            },
-            {
-              "name": "current-password"
-            },
-            {
-              "name": "one-time-code"
-            },
-            {
-              "name": "organization-title"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "street-address"
-            },
-            {
-              "name": "address-line1"
-            },
-            {
-              "name": "address-line2"
-            },
-            {
-              "name": "address-line3"
-            },
-            {
-              "name": "address-level4"
-            },
-            {
-              "name": "address-level3"
-            },
-            {
-              "name": "address-level2"
-            },
-            {
-              "name": "address-level1"
-            },
-            {
-              "name": "country"
-            },
-            {
-              "name": "country-name"
-            },
-            {
-              "name": "postal-code"
-            },
-            {
-              "name": "cc-name"
-            },
-            {
-              "name": "cc-given-name"
-            },
-            {
-              "name": "cc-additional-name"
-            },
-            {
-              "name": "cc-family-name"
-            },
-            {
-              "name": "cc-number"
-            },
-            {
-              "name": "cc-exp"
-            },
-            {
-              "name": "cc-exp-month"
-            },
-            {
-              "name": "cc-exp-year"
-            },
-            {
-              "name": "cc-csc"
-            },
-            {
-              "name": "cc-type"
-            },
-            {
-              "name": "transaction-currency"
-            },
-            {
-              "name": "transaction-amount"
-            },
-            {
-              "name": "language"
-            },
-            {
-              "name": "bday"
-            },
-            {
-              "name": "bday-day"
-            },
-            {
-              "name": "bday-month"
-            },
-            {
-              "name": "bday-year"
-            },
-            {
-              "name": "sex"
-            },
-            {
-              "name": "tel"
-            },
-            {
-              "name": "tel-country-code"
-            },
-            {
-              "name": "tel-national"
-            },
-            {
-              "name": "tel-area-code"
-            },
-            {
-              "name": "tel-local"
-            },
-            {
-              "name": "tel-extension"
-            },
-            {
-              "name": "impp"
-            },
-            {
-              "name": "url"
-            },
-            {
-              "name": "photo"
-            }
-          ]
+          "description": "The state of autocompletion the browser can apply on the text value."
         },
         {
           "name": "autocorrect",
@@ -3920,6 +3670,14 @@
           "name": "max-characters",
           "description": "The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)"
         },
+        {
+          "name": "max-characters-message",
+          "description": "The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached."
+        },
+        {
+          "name": "max-message",
+          "description": "The text to display as the error message when the maximum value (the `max` prop value) has been exceeded."
+        },
         {
           "name": "min",
           "description": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
@@ -3928,6 +3686,14 @@
           "name": "min-characters",
           "description": "The minimum number of characters that can be entered in the field."
         },
+        {
+          "name": "min-characters-message",
+          "description": "The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met."
+        },
+        {
+          "name": "min-message",
+          "description": "The text to display as the error message when the minimum value (the `min` prop value) has not been met."
+        },
         {
           "name": "name",
           "description": "The name of the control, which is submitted with the form data."
@@ -4031,7 +3797,7 @@
         },
         {
           "name": "validation-text",
-          "description": "The validation state - e.g. 'error' | 'warning' | 'success'."
+          "description": "The text to display as the validation message."
         },
         {
           "name": "value",
@@ -4384,6 +4150,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "disable-click",
+          "description": "If `true`, the tooltip will not be displayed on click, it will require hover or using the display method."
+        },
         {
           "name": "disable-hover",
           "description": "If `true`, the tooltip will not be displayed on hover, it will require a click."