@uh-design-system/component-library 1.1.0-rc.5 → 1.1.0-rc.7

package/dist/types/components/01-base-components/ds-badge/ds-badge.d.ts

@@ -0,0 +1,10 @@
+export declare class DsBadge {
+    el: HTMLElement;
+    dsId?: string;
+    dsText: string;
+    dsVariant: 'default' | 'success' | 'attention' | 'danger' | 'info' | 'notification' | 'primary';
+    dsHiddenAssistiveText?: string;
+    dsAriaLabel?: string;
+    private get DsVisuallyHidden();
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-badge/stories/ds-badge.features.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsBadge } from '../ds-badge';
+declare const meta: Meta<typeof DsBadge.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Attention: Story;
+export declare const Danger: Story;
+export declare const Info: Story;
+export declare const Notification: Story;
+export declare const Primary: Story;
+export declare const Slots: Story;

package/dist/types/components/01-base-components/ds-badge/stories/ds-badge.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsBadge } from '../ds-badge';
+declare const meta: Meta<typeof DsBadge.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-button/ds-button.d.ts

@@ -6,6 +6,7 @@ export declare class DsButton {
     dsForm?: string;
     dsId?: string;
     dsName?: string;
+    dsText: string;
     dsValue: string;
     dsVariant: 'primary' | 'secondary' | 'supplementary';
     dsColour: 'blue' | 'black' | 'white';
@@ -27,9 +28,12 @@ export declare class DsButton {
     dsActive: boolean;
     hasContent: boolean;
     isActive: boolean;
+    text: string;
     setFocus(): Promise<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    dsTextObserver(newValue: string): void;
+    dsValueObserver(newValue: string): void;
     dsActiveObserver(newValue: boolean): void;
     ariaAttributeObserver(newValue: string, _oldValue: string, propName: string): void;
     private handleKeyDown;

package/dist/types/components/01-base-components/ds-link/ds-link.d.ts

@@ -25,12 +25,12 @@ export declare class DsLink {
     dsAriaLabel: string;
     dsColour?: 'black' | 'white';
     dsTag?: 'a' | 'span';
-    dsIsSpaceClickable?: boolean;
     targetBlank: {
         icon: string;
         rel: string;
     } | null;
     setFocus(): Promise<void>;
+    getLink(): Promise<HTMLSpanElement | HTMLAnchorElement>;
     get linkAttributes(): {
         href?: undefined;
         hrefLang?: undefined;
@@ -48,7 +48,6 @@ export declare class DsLink {
     componentWillLoad(): void;
     onTargetChanged(newValue: LinkTarget): void;
     ariaLabelObserver(newValue: string): void;
-    handleKeyDown(event: KeyboardEvent): void;
     private renderIcon;
     private renderSuffixIcon;
     render(): any;

package/dist/types/components/01-base-components/ds-link/stories/ds-link.examples.stories.d.ts

@@ -9,3 +9,4 @@ export declare const Back: Story;
 export declare const Download: Story;
 export declare const StandaloneBoldLinkWithIcon: Story;
 export declare const NavigationLink: Story;
+export declare const MenuItemLink: Story;

package/dist/types/components/01-base-components/ds-ribbon/ds-ribbon.d.ts

@@ -5,6 +5,8 @@ export declare class DsRibbon {
     private inheritedAttributes;
     el: HTMLElement;
     private drawerRef?;
+    private mobileToggleRef?;
+    private closeButtonRef?;
     dsIcon?: string;
     dsSiteName?: string;
     dsHideBranding: boolean;
@@ -12,11 +14,12 @@ export declare class DsRibbon {
     dsIconAriaLabel?: string;
     dsLinks?: RibbonLink[];
     dsBrandingUrls?: Record<string, string>;
-    dsSitesText?: string;
-    dsCloseText?: string;
+    dsMobileToggleText?: string;
+    dsCloseButtonText?: string;
     dsNavAriaLabel?: string;
     dsLogoAriaLabel?: string;
-    closeButtonId: string;
+    dsCloseButtonId: string;
+    dsMobileToggleId: string;
     dsDataUrl?: string;
     isMobileDrawerOpen: boolean;
     isMobileDrawerClicked: boolean;
@@ -24,6 +27,11 @@ export declare class DsRibbon {
     lang: Language;
     icon: string;
     brandingUrls: Record<string, string>;
+    private get DsLinkLogo();
+    private get DsLink();
+    private get DsButton();
+    private get DsTag();
+    private get DsVisuallyHidden();
     private get localizedLinks();
     private get localizedSiteName();
     private get localizedSitesText();
@@ -41,7 +49,6 @@ export declare class DsRibbon {
     handleLanguageChange(newValue: CustomEvent<Language>): void;
     handleKeyDown(event: KeyboardEvent): void;
     handleWindowResize(): void;
-    private lastFocusedElement;
     private resizeTimeout;
     private storeUnsubscribe?;
     private handleMobileToggle;

package/dist/types/components/01-base-components/ds-ribbon/stories/ds-ribbon.stories.d.ts

@@ -5,4 +5,6 @@ export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
 export declare const WithoutBranding: Story;
+export declare const CustomTagName: Story;
+export declare const WithExternalData: Story;
 export declare const Playground: Story;

package/dist/types/components.d.ts

@@ -108,6 +108,31 @@ export namespace Components {
          */
         "dsText"?: string;
     }
+    interface DsBadge {
+        /**
+          * Passed to the `aria-label` attribute of the `span` element.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Assistive text for screen readers
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Passed to the `id` attribute of the `span` element.
+          * @default dsBadgeIdGenerator.next().value as string
+         */
+        "dsId"?: string;
+        /**
+          * The text content of the badge
+          * @default ''
+         */
+        "dsText": string;
+        /**
+          * The variant style of the badge
+          * @default 'default'
+         */
+        "dsVariant": 'default' | 'success' | 'attention' | 'danger' | 'info' | 'notification' | 'primary';
+    }
     interface DsBreadcrumb {
         /**
           * Passed to the `download` attribute of the `a` element
@@ -277,6 +302,11 @@ export namespace Components {
           * Information for screen readers when spinner is displayed
          */
         "dsSpinnerHiddenText": string;
+        /**
+          * Text to display inside the button.
+          * @default ''
+         */
+        "dsText": string;
         /**
           * Passed to the `type` attribute of the `button` element
           * @default 'button'
@@ -288,7 +318,7 @@ export namespace Components {
          */
         "dsUseSpinner": boolean;
         /**
-          * Text to display inside the button.
+          * Passed to the `value` attribute of the `button` element.
           * @default ''
          */
         "dsValue": string;
@@ -4446,11 +4476,6 @@ export namespace Components {
           * Passed to the `dsTitle` property of the `ds-icon` element
          */
         "dsIconTitle"?: string;
-        /**
-          * If true, the spacebar key can be used to activate the link when `dsTag` is set to `a`.
-          * @default false
-         */
-        "dsIsSpaceClickable"?: boolean;
         /**
           * Passed to the `rel` attribute of the `a` element
          */
@@ -4482,6 +4507,11 @@ export namespace Components {
           * @default 'regular'
          */
         "dsWeight": LinkWeight;
+        /**
+          * Get the a/span element rendered inside `ds-link` component.
+          * @returns The a/span element.
+         */
+        "getLink": () => Promise<HTMLSpanElement | HTMLAnchorElement>;
         /**
           * Sets focus to the a/span element rendered inside `ds-link` component.
          */
@@ -4710,7 +4740,7 @@ export namespace Components {
           * Variant of the notification
           * @default 'neutral'
          */
-        "dsVariant": "success" | "info" | "neutral" | "neutralWhite" | "attention" | "danger";
+        "dsVariant": "success" | "info" | "attention" | "danger" | "neutral" | "neutralWhite";
     }
     interface DsOption {
         /**
@@ -4964,19 +4994,19 @@ export namespace Components {
      * Navigation ribbon that appears at the top of the site as a "banner".
      */
     interface DsRibbon {
-        /**
-          * ID for the "Close" button
-          * @default idGenerator('ds-button-drawer-close').next().value as string
-         */
-        "closeButtonId": string;
         /**
           * Branding URLs organized by language
          */
         "dsBrandingUrls"?: Record<string, string>;
         /**
-          * Text for "Close" button
+          * ID for the "Close" button
+          * @default idGenerator('ds-button-drawer-close').next().value as string
          */
-        "dsCloseText"?: string;
+        "dsCloseButtonId": string;
+        /**
+          * Text for close button
+         */
+        "dsCloseButtonText"?: string;
         /**
           * URL for external data.json source. If empty, no external data is loaded
           * @default ''
@@ -5007,6 +5037,15 @@ export namespace Components {
           * ARIA label for the logo link
          */
         "dsLogoAriaLabel"?: string;
+        /**
+          * ID for the mobile toggle button
+          * @default idGenerator('ds-button-mobile-toggle').next().value as string
+         */
+        "dsMobileToggleId": string;
+        /**
+          * Text for mobile toggle button
+         */
+        "dsMobileToggleText"?: string;
         /**
           * ARIA label for the navigation element
          */
@@ -5015,10 +5054,6 @@ export namespace Components {
           * Site name text
          */
         "dsSiteName"?: string;
-        /**
-          * Text for "Sites" button
-         */
-        "dsSitesText"?: string;
     }
     interface DsSelect {
         /**
@@ -5577,6 +5612,12 @@ declare global {
         prototype: HTMLDsAssistiveTextElement;
         new (): HTMLDsAssistiveTextElement;
     };
+    interface HTMLDsBadgeElement extends Components.DsBadge, HTMLStencilElement {
+    }
+    var HTMLDsBadgeElement: {
+        prototype: HTMLDsBadgeElement;
+        new (): HTMLDsBadgeElement;
+    };
     interface HTMLDsBreadcrumbElementEventMap {
         "dsIsHiddenChange": boolean;
     }
@@ -7697,6 +7738,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
         "ds-assistive-text": HTMLDsAssistiveTextElement;
+        "ds-badge": HTMLDsBadgeElement;
         "ds-breadcrumb": HTMLDsBreadcrumbElement;
         "ds-breadcrumbs": HTMLDsBreadcrumbsElement;
         "ds-breadcrumbs-collapsible": HTMLDsBreadcrumbsCollapsibleElement;
@@ -8070,6 +8112,31 @@ declare namespace LocalJSX {
          */
         "dsText"?: string;
     }
+    interface DsBadge {
+        /**
+          * Passed to the `aria-label` attribute of the `span` element.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Assistive text for screen readers
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Passed to the `id` attribute of the `span` element.
+          * @default dsBadgeIdGenerator.next().value as string
+         */
+        "dsId"?: string;
+        /**
+          * The text content of the badge
+          * @default ''
+         */
+        "dsText"?: string;
+        /**
+          * The variant style of the badge
+          * @default 'default'
+         */
+        "dsVariant"?: 'default' | 'success' | 'attention' | 'danger' | 'info' | 'notification' | 'primary';
+    }
     interface DsBreadcrumb {
         /**
           * Passed to the `download` attribute of the `a` element
@@ -8248,6 +8315,11 @@ declare namespace LocalJSX {
           * Information for screen readers when spinner is displayed
          */
         "dsSpinnerHiddenText"?: string;
+        /**
+          * Text to display inside the button.
+          * @default ''
+         */
+        "dsText"?: string;
         /**
           * Passed to the `type` attribute of the `button` element
           * @default 'button'
@@ -8259,7 +8331,7 @@ declare namespace LocalJSX {
          */
         "dsUseSpinner"?: boolean;
         /**
-          * Text to display inside the button.
+          * Passed to the `value` attribute of the `button` element.
           * @default ''
          */
         "dsValue"?: string;
@@ -12462,11 +12534,6 @@ declare namespace LocalJSX {
           * Passed to the `dsTitle` property of the `ds-icon` element
          */
         "dsIconTitle"?: string;
-        /**
-          * If true, the spacebar key can be used to activate the link when `dsTag` is set to `a`.
-          * @default false
-         */
-        "dsIsSpaceClickable"?: boolean;
         /**
           * Passed to the `rel` attribute of the `a` element
          */
@@ -12730,7 +12797,7 @@ declare namespace LocalJSX {
           * Variant of the notification
           * @default 'neutral'
          */
-        "dsVariant"?: "success" | "info" | "neutral" | "neutralWhite" | "attention" | "danger";
+        "dsVariant"?: "success" | "info" | "attention" | "danger" | "neutral" | "neutralWhite";
         /**
           * Event emitted when user clicks the dismiss button.
          */
@@ -13025,19 +13092,19 @@ declare namespace LocalJSX {
      * Navigation ribbon that appears at the top of the site as a "banner".
      */
     interface DsRibbon {
-        /**
-          * ID for the "Close" button
-          * @default idGenerator('ds-button-drawer-close').next().value as string
-         */
-        "closeButtonId"?: string;
         /**
           * Branding URLs organized by language
          */
         "dsBrandingUrls"?: Record<string, string>;
         /**
-          * Text for "Close" button
+          * ID for the "Close" button
+          * @default idGenerator('ds-button-drawer-close').next().value as string
          */
-        "dsCloseText"?: string;
+        "dsCloseButtonId"?: string;
+        /**
+          * Text for close button
+         */
+        "dsCloseButtonText"?: string;
         /**
           * URL for external data.json source. If empty, no external data is loaded
           * @default ''
@@ -13068,6 +13135,15 @@ declare namespace LocalJSX {
           * ARIA label for the logo link
          */
         "dsLogoAriaLabel"?: string;
+        /**
+          * ID for the mobile toggle button
+          * @default idGenerator('ds-button-mobile-toggle').next().value as string
+         */
+        "dsMobileToggleId"?: string;
+        /**
+          * Text for mobile toggle button
+         */
+        "dsMobileToggleText"?: string;
         /**
           * ARIA label for the navigation element
          */
@@ -13076,10 +13152,6 @@ declare namespace LocalJSX {
           * Site name text
          */
         "dsSiteName"?: string;
-        /**
-          * Text for "Sites" button
-         */
-        "dsSitesText"?: string;
         /**
           * Emitted when mobile drawer is opened or closed
          */
@@ -13570,6 +13642,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "ds-accordion": DsAccordion;
         "ds-assistive-text": DsAssistiveText;
+        "ds-badge": DsBadge;
         "ds-breadcrumb": DsBreadcrumb;
         "ds-breadcrumbs": DsBreadcrumbs;
         "ds-breadcrumbs-collapsible": DsBreadcrumbsCollapsible;
@@ -13886,6 +13959,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.DsAccordion & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
             "ds-assistive-text": LocalJSX.DsAssistiveText & JSXBase.HTMLAttributes<HTMLDsAssistiveTextElement>;
+            "ds-badge": LocalJSX.DsBadge & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
             "ds-breadcrumb": LocalJSX.DsBreadcrumb & JSXBase.HTMLAttributes<HTMLDsBreadcrumbElement>;
             "ds-breadcrumbs": LocalJSX.DsBreadcrumbs & JSXBase.HTMLAttributes<HTMLDsBreadcrumbsElement>;
             "ds-breadcrumbs-collapsible": LocalJSX.DsBreadcrumbsCollapsible & JSXBase.HTMLAttributes<HTMLDsBreadcrumbsCollapsibleElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.1.0-rc.5",
+  "version": "1.1.0-rc.7",
   "publishConfig": {
     "access": "public"
   },
@@ -109,5 +109,5 @@
     "ts-node": "^10.9.2"
   },
   "license": "MIT",
-  "gitHead": "728e6cf555403348047860a6a035dee727d1295b"
+  "gitHead": "7c4ee63b22b1c94f71f14b4df019098f3f42b1dc"
 }

package/dist/component-library/cx-cUUyxfnb.js

@@ -1 +0,0 @@
-import{E as o}from"./index-Pzt6Wixq.js";const s=s=>`${s}__${o.PACKAGE_VERSION}`;export{s as c}