@ukic/web-components 3.15.0 → 3.16.0

package/dist/collection/components/ic-footer/ic-footer.stories.js

@@ -11,6 +11,7 @@ const defaultArgs = {
   caption:
     "All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.",
   copyright: true,
+  copyrightText: "© Crown Copyright",
   description:
     "The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.",
   groupLinks: true,
@@ -22,6 +23,7 @@ export const Playground = {
     breakpoint=${args.breakpoint}
     caption=${args.caption}
     copyright=${args.copyright}
+    copyright-text=${args.copyrightText}
     description=${args.description}
     group-links=${args.groupLinks}
   >
@@ -454,3 +456,32 @@ export const SlottedDescriptionAndCaption = {
 
   name: "Slotted description and caption",
 };
+
+export const CustomCopyright = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+      copyright-text="© 2025 Coffeehouse Inc. All rights reserved."
+    >
+      <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+      <ic-footer-link slot="link" href="/" target="_blank"
+        >Components</ic-footer-link
+      >
+      <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+      <div
+        slot="logo"
+        style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+      >
+        Logo
+      </div>
+    </ic-footer>
+  `,
+
+  name: "Custom copyright text",
+};

package/dist/collection/components/ic-hero/ic-hero.css

@@ -528,7 +528,6 @@ ic-typography.heading-bottom-spacing {
   --ic-select-field-label: var(--ic-brand-text-color);
   --ic-switch-label: var(--ic-brand-text-color);
   --ic-text-field-label: var(--ic-brand-text-color);
-
   --ic-date-input-subtitle: var(--ic-brand-text-color);
   --ic-time-picker-subtitle: var(--ic-brand-text-color);
   --ic-checkbox-group-subtitle: var(--ic-brand-text-color);
@@ -537,7 +536,6 @@ ic-typography.heading-bottom-spacing {
   --ic-select-input-field-label-subtitle: var(--ic-brand-text-color);
   --ic-switch-subtitle: var(--ic-brand-text-color);
   --ic-text-field-subtitle: var(--ic-brand-text-color);
-
   --ic-checkbox-text: var(--ic-brand-text-color);
   --ic-radio-button-text-option: var(--ic-brand-text-color);
 }

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -32,6 +32,7 @@ ic-input-component-container {
 
 ic-input-component-container.ic-input-component-container-full-width {
   width: 100%;
+  max-width: none;
 }
 
 ic-input-component-container.ic-input-component-container-disabled,
@@ -206,3 +207,11 @@ ic-input-component-container:focus {
     border: var(--ic-border-width) dashed GrayText;
   }
 }
+
+/* Breakpoint value chosen as it's a small amount bigger than the input's default width */
+@media screen AND (max-width: 22rem) {
+  ic-input-component-container {
+    max-width: var(--input-width, 20rem);
+    width: 100%;
+  }
+}

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

@@ -1,5 +1,5 @@
 ic-input-validation {
-  width: var(--input-width, 20rem);
+  max-width: var(--input-width, 20rem);
   display: flex;
 }
 
@@ -9,6 +9,7 @@ ic-input-validation.ic-input-validation-with-status {
 
 ic-input-validation.ic-input-validation-full-width {
   width: 100%;
+  max-width: none;
 }
 
 ic-input-validation span.status-icon {

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.stories.js

@@ -35,13 +35,13 @@ export default {
 };
 
 export const CircularIndeterminate = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator label="Loading..."></ic-loading-indicator>`,
   name: "Circular (indeterminate)",
 };
 
 export const CircularDeterminate = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator
       progress="30"
       min="0"
@@ -53,7 +53,7 @@ export const CircularDeterminate = {
 };
 
 export const CircularLongLabel = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator
       label="This is a label for a loading indicator that is indeterminate and should wrap onto more than one line when it gets too long"
     ></ic-loading-indicator>`,
@@ -62,7 +62,7 @@ export const CircularLongLabel = {
 };
 
 export const CircularVariantsIndeterminate = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator label="Small" size="small"></ic-loading-indicator>
       <ic-loading-indicator label="Default"></ic-loading-indicator>
@@ -73,7 +73,7 @@ export const CircularVariantsIndeterminate = {
 };
 
 export const CircularVariantsDeterminate = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         progress="30"
@@ -101,13 +101,12 @@ export const CircularVariantsDeterminate = {
 };
 
 export const Icon = {
-  render: (args) =>
-    html`<ic-loading-indicator size="icon"></ic-loading-indicator>`,
+  render: () => html`<ic-loading-indicator size="icon"></ic-loading-indicator>`,
   name: "Icon",
 };
 
 export const LinearIndeterminate = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator
       label="Loading..."
       type="linear"
@@ -117,7 +116,7 @@ export const LinearIndeterminate = {
 };
 
 export const LinearDeterminate = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator
       progress="30"
       min="0"
@@ -130,7 +129,7 @@ export const LinearDeterminate = {
 };
 
 export const LinearLongLabel = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator
       type="linear"
       label="This is a label for a loading indicator that is indeterminate and should wrap onto more than one line when it gets too long"
@@ -140,7 +139,7 @@ export const LinearLongLabel = {
 };
 
 export const LinearVariantsIndeterminate = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         label="Small"
@@ -168,7 +167,7 @@ export const LinearVariantsIndeterminate = {
 };
 
 export const LinearVariantsDeterminate = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         progress="30"
@@ -208,7 +207,7 @@ export const LinearVariantsDeterminate = {
 };
 
 export const CircularDarkMode = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         label="Small"
@@ -233,7 +232,7 @@ export const CircularDarkMode = {
 };
 
 export const IconDarkMode = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator
       size="icon"
       theme="dark"
@@ -249,7 +248,7 @@ export const IconDarkMode = {
 };
 
 export const LinearDarkMode = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         label="Default"
@@ -306,7 +305,7 @@ export const LinearDarkMode = {
 };
 
 export const Monochrome = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         label="Light"
@@ -351,7 +350,7 @@ export const Monochrome = {
 };
 
 export const NoLabel = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator description="Loading"></ic-loading-indicator
       ><ic-loading-indicator
@@ -377,7 +376,7 @@ export const NoLabel = {
 };
 
 export const ChangingLabel = {
-  render: (args) =>
+  render: () =>
     html`<ic-loading-indicator label-duration="4000"></ic-loading-indicator>
       <script>
         document.querySelector("ic-loading-indicator").label = [

package/dist/collection/components/ic-menu/ic-menu.css

@@ -740,3 +740,11 @@ video {
     --ic-typography-color: GrayText;
   }
 }
+
+/* Breakpoint value chosen as it's a small amount bigger than the menu's default width */
+@media screen AND (max-width: 22rem) {
+  :host {
+    max-width: var(--menu-width, var(--input-width, 20rem));
+    width: 100%;
+  }
+}

package/dist/collection/components/ic-navigation-group/ic-navigation-group.css

@@ -587,6 +587,18 @@ video {
   transform: rotate(-90deg);
 }
 
+#nav-group-title {
+  text-wrap: nowrap;
+}
+
+:host(.in-side-menu) #nav-group-title {
+  text-wrap: wrap;
+}
+
+:host(.ic-navigation-group-side-nav) #nav-group-title {
+  text-wrap: wrap;
+}
+
 :host(.ic-navigation-group-expanded) .grouped-links-wrapper {
   height: var(--navigation-child-items-height, auto) !important;
   transition: var(--ic-easing-transition-slow);

package/dist/collection/components/ic-navigation-item/ic-navigation-item.css

@@ -595,13 +595,6 @@ svg {
   fill: var(--ic-color-text-primary);
 }
 
-:host(.navigation-item-top-nav-child) .link,
-:host(.navigation-item-top-nav-child) ::slotted(a) {
-  color: var(--ic-color-text-primary);
-
-  --ic-typography-color: var(--ic-color-text-primary);
-}
-
 :host(.navigation-item-side-menu) ::slotted(a) {
   font: var(--ic-font-body) !important;
   letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;
@@ -655,6 +648,8 @@ svg {
   position: relative;
   transition: box-shadow var(--ic-transition-duration-fast),
     border-radius var(--ic-transition-duration-slow);
+
+  --ic-typography-color: var(--ic-color-text-primary);
 }
 
 :host(.navigation-item-top-nav-child) ::slotted(a) {

package/dist/collection/components/ic-pagination/ic-pagination.stories.js

@@ -21,7 +21,7 @@ export default {
 };
 
 export const Simple = {
-  render: (args) => html`
+  render: () => html`
     <p>Default appearance</p>
     <ic-pagination pages="15"></ic-pagination>
     <br />
@@ -45,7 +45,7 @@ export const Simple = {
 };
 
 export const Complex = {
-  render: (args) => html`
+  render: () => html`
     <p>Default appearance</p>
     <ic-pagination pages="15" type="complex"></ic-pagination>
     <br />
@@ -67,7 +67,7 @@ export const Complex = {
 };
 
 export const ComplexAdjacentBoundaryItemsSet = {
-  render: (args) => html`
+  render: () => html`
   <p style={{ padding: 10 }}>Adjacent: 0, Boundary: 0</p>
       <ic-pagination
         pages="15"

package/dist/collection/components/ic-popover-menu/ic-popover-menu.stories.js

@@ -19,7 +19,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) => html`
+  render: () => html`
     <ic-button id="button-1" onclick="buttonClick()"
       >Show/Hide popover</ic-button
     >
@@ -91,7 +91,7 @@ export const Default = {
 };
 
 export const MaxHeight = {
-  render: (args) => html`
+  render: () => html`
     <style>
       ic-popover-menu {
         --max-height: 100px;
@@ -158,7 +158,7 @@ export const MaxHeight = {
 };
 
 export const LeftPlacement = {
-  render: (args) => html`
+  render: () => html`
     <div style="margin-left: 1000px">
       <ic-button id="button-1" onclick="buttonClick()"
         >Show/Hide popover</ic-button
@@ -228,7 +228,7 @@ export const LeftPlacement = {
 };
 
 export const TopPlacement = {
-  render: (args) => html`
+  render: () => html`
     <div style="margin-top: 540px">
       <ic-button id="button-1" onclick="buttonClick()"
         >Show/Hide popover</ic-button
@@ -298,7 +298,7 @@ export const TopPlacement = {
 };
 
 export const MultiplePopoversOnPage = {
-  render: (args) =>
+  render: () =>
     html` <ic-link href="/">Link1</ic-link>
       <ic-button id="button-1" onclick="buttonClick(1)"
         >Show/Hide popover</ic-button
@@ -429,7 +429,7 @@ export const MultiplePopoversOnPage = {
 };
 
 export const AutoOpening = {
-  render: (args) => html`
+  render: () => html`
     <ic-button id="button-1" onclick="buttonClick()"
       >Show/Hide popover</ic-button
     >
@@ -498,7 +498,7 @@ export const AutoOpening = {
 };
 
 export const PositioningStrategy = {
-  render: (args) => html`
+  render: () => html`
     <script>
       var icPopovers = document.querySelectorAll("ic-popover-menu");
       var icParentPopover = icPopovers[0];

package/dist/collection/components/ic-radio-group/ic-radio-group.css

@@ -452,11 +452,11 @@ video {
   --ic-input-validation-error: var(--ic-radio-button-state-icon-error);
 }
 
-ic-input-label.error {
+:host ic-input-label.error {
   --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);
 }
 
-ic-input-label.disabled {
+:host ic-input-label.disabled {
   --ic-input-label-text-color: var(
     --ic-radio-button-input-field-label-disabled
   );
@@ -465,7 +465,7 @@ ic-input-label.disabled {
   );
 }
 
-ic-input-validation.show-validation {
+:host ic-input-validation.show-validation {
   margin-top: var(--ic-space-sm);
 }
 
@@ -473,8 +473,8 @@ ic-input-validation.show-validation {
   margin-top: calc(var(--ic-space-sm) / 2);
 }
 
-ic-input-label:not(.with-helper) .ic-typography-label,
-ic-input-label .helpertext {
+:host ic-input-label:not(.with-helper) .ic-typography-label,
+:host ic-input-label .helpertext {
   margin-bottom: var(--ic-space-sm);
 }
 
@@ -485,7 +485,7 @@ ic-input-label .helpertext {
   margin-bottom: calc(var(--ic-space-sm) / 2);
 }
 
-ic-input-label .helpertext {
+:host ic-input-label .helpertext {
   display: block;
 }
 

package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js

@@ -29,7 +29,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group label="This is a label" name="1">
       <ic-radio-option
         value="valueName1"
@@ -52,7 +52,7 @@ export const Default = {
 };
 
 export const Horizontal = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group
       orientation="horizontal"
       label="This should be horizontal"
@@ -90,7 +90,7 @@ export const Horizontal = {
 };
 
 export const Required = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group label="This is a label" required name="1">
       <ic-radio-option
         value="valueName1"
@@ -113,7 +113,7 @@ export const Required = {
 };
 
 export const Disabled = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group label="This is a label" name="1">
       <ic-radio-option
         value="valueName1"
@@ -143,7 +143,7 @@ export const Disabled = {
 };
 
 export const ConditionalDynamic = {
-  render: (args) => html`
+  render: () => html`
     <script>
       function handleIcChange(ev) {
         console.log(ev.detail.selectedOption);
@@ -214,7 +214,7 @@ export const ConditionalDynamic = {
 };
 
 export const ConditionalStatic = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group label=" Conditional static" name="1">
       <ic-radio-option value="valueName1" label="option1">
         <ic-text-field
@@ -248,7 +248,7 @@ export const ConditionalStatic = {
 };
 
 export const HelperText = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group
       label="Pick Your Coffee"
       name="1"
@@ -292,7 +292,7 @@ export const HelperText = {
 };
 
 export const Small = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group label="This is a label" name="1" size="small">
       <ic-radio-option
         value="valueName1"
@@ -315,7 +315,7 @@ export const Small = {
 };
 
 export const Validation = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group
       label="This is a label"
       name="1"
@@ -343,7 +343,7 @@ export const Validation = {
 };
 
 export const AriaLiveBehaviour = {
-  render: (args) =>
+  render: () =>
     html`<ic-radio-group
         id="field-1"
         label="This is a label"
@@ -496,7 +496,7 @@ export const AriaLiveBehaviour = {
 };
 
 export const Form = {
-  render: (args) => html`
+  render: () => html`
     <form>
       <ic-radio-group label="This is a label" name="1">
         <ic-radio-option
@@ -528,7 +528,7 @@ export const Form = {
 };
 
 export const RTL = {
-  render: (args) => html`
+  render: () => html`
     <ic-radio-group label="This is a label" name="group1" dir="rtl">
       <ic-radio-option value="valueName1" label="Default"></ic-radio-option>
       <ic-radio-option