@telus-uds/components-web 5.0.0-alpha.0 → 5.0.0-alpha.2

package/CHANGELOG.md

@@ -1,12 +1,59 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 20 Mar 2026 02:26:39 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Apr 2026 23:54:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 5.0.0-alpha.2
+
+Fri, 17 Apr 2026 23:54:32 GMT
+
+### Patches
+
+- `DatePicker`: Remove z-index from inline variant (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v4.0.0-alpha.2
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.2
+
+## 4.19.3
+
+Thu, 16 Apr 2026 21:04:33 GMT
+
+### Patches
+
+- `DatePicker`: Remove z-index from inline variant (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.30.0
+- Bump @telus-uds/system-theme-tokens to v4.21.0
+
+## 5.0.0-alpha.1
+
+Fri, 10 Apr 2026 17:20:03 GMT
+
+### Major changes
+
+- `Link`: deprecate alternative and inverse variants (guillermo.peitzner@telus.com)
+- `Card`: remove background variant and set style as default (sergio.ramirez@telus.com)
+- `CarouselTabs`: remove component from baseExports file (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v4.0.0-alpha.1
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.1
+
+### Patches
+
+- `Card`: padding affected when interactive prop change fixed (josue.higueroscalderon@telus.com)
+- `TextInput`: Include hint and feedback in the describedBy prop (david.melara1@telus.com)
+
+## 4.19.2
+
+Mon, 06 Apr 2026 21:25:56 GMT
+
+### Patches
+
+- `Card`: padding affected when interactive prop change fixed (josue.higueroscalderon@telus.com)
+- `TextInput`: Include hint and feedback in the describedBy prop (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.29.1
+
 ## 5.0.0-alpha.0
 
-Fri, 20 Mar 2026 02:26:39 GMT
+Fri, 20 Mar 2026 00:57:29 GMT
 
 ### Major changes
 
@@ -15,10 +62,6 @@ Fri, 20 Mar 2026 02:26:39 GMT
 - Bump @telus-uds/system-constants to v4.0.0-alpha.0
 - Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.0
 
-### Patches
-
-- `Card`: padding affected when interactive prop change fixed (josue.higueroscalderon@telus.com)
-
 ## 4.19.1
 
 Fri, 13 Mar 2026 20:33:41 GMT

package/lib/cjs/BlockQuote/BlockQuote.js

@@ -163,7 +163,7 @@ const BlockQuote = exports.BlockQuote = /*#__PURE__*/_react.default.forwardRef((
           color
         },
         variant: {
-          alternative: true
+          style: 'subtle'
         },
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
@@ -230,7 +230,7 @@ BlockQuote.propTypes = {
   ..._componentsBase.withLinkRouter.propTypes,
   tokens: (0, _componentsBase.getTokensPropType)('BlockQuote'),
   variant: _propTypes.default.exact({
-    alternative: _propTypes.default.bool,
+    style: _propTypes.default.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse']),
     size: _propTypes.default.string
   }),
   /**

package/lib/cjs/Card/Card.js

@@ -81,7 +81,7 @@ const getCardContentTokens = function (baseTokens) {
  * ### With Footer
  *
  * Pass any component or simply a string in the `footer` prop in order to render
- * a card with a footer (which uses the `alternative` background).
+ * a card with a footer (which uses the `feature2` style).
  *
  * ### With Full Bleed Content
  *

package/lib/cjs/Card/CardFooter.js

@@ -52,7 +52,7 @@ const CardFooter = _ref2 => {
   const viewport = (0, _componentsBase.useViewport)();
   const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {
     ...variant,
-    background: 'alternative'
+    style: 'feature2'
   }, {
     viewport
   });

package/lib/cjs/DatePicker/CalendarContainer.js

@@ -21,12 +21,13 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_styledCompon
     $calendarDayDefaultHeight,
     $calendarDayDefaultWidth,
     $calendarWeekFontTokens,
-    $defaultFontTokens
+    $defaultFontTokens,
+    $isInline = false
   } = _ref;
   return `
   ${_reactDatesCss.defaultReactDatesCss}
   > div {
-    z-index: 1000;
+    z-index: ${$isInline ? 'auto' : 1000};
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -38,7 +39,7 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_styledCompon
     border: 1px solid ${$remainingTokens.singleDatePickerBorderColor};
     border-radius: ${$remainingTokens.singleDatePickerRadius}px;
     padding: ${$remainingTokens.singleDatePickerPaddingTopBottom}px ${$remainingTokens.singleDatePickerLeftRight}px;
-    z-index: 1000;
+    z-index: ${$isInline ? 'auto' : 1000};
   }
   .DateInput {
     width: 100%;

package/lib/cjs/DatePicker/DatePicker.js

@@ -339,6 +339,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/_react.default.forwardRef((
         $calendarMonthFontTokens: calendarMonthFontTokens,
         $calendarWeekFontTokens: calendarWeekFontTokens,
         $defaultFontTokens: defaultFontTokens,
+        $isInline: inline,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDates.DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,

package/lib/cjs/Toast/Toast.js

@@ -81,7 +81,7 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref
   const {
     color: chevronInverseColor
   } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {
-    inverse: true
+    style: 'inverse'
   });
   if (!toast) {
     return null;
@@ -123,7 +123,7 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref
       direction: "row"
     }), link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
       variant: {
-        inverse: true
+        style: 'inverse'
       },
       tokens: {
         blockFontWeight: chevronlinkFontWeight

package/lib/cjs/baseExports.js

@@ -93,12 +93,6 @@ Object.defineProperty(exports, "CarouselProvider", {
     return _componentsBase.CarouselProvider;
   }
 });
-Object.defineProperty(exports, "CarouselTabs", {
-  enumerable: true,
-  get: function () {
-    return _componentsBase.CarouselTabs;
-  }
-});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -321,6 +315,18 @@ Object.defineProperty(exports, "Responsive", {
     return _componentsBase.Responsive;
   }
 });
+Object.defineProperty(exports, "Scroll", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Scroll;
+  }
+});
+Object.defineProperty(exports, "ScrollItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ScrollItem;
+  }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () {

package/lib/esm/BlockQuote/BlockQuote.js

@@ -156,7 +156,7 @@ export const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
           color
         },
         variant: {
-          alternative: true
+          style: 'subtle'
         },
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
@@ -223,7 +223,7 @@ BlockQuote.propTypes = {
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('BlockQuote'),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool,
+    style: PropTypes.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse']),
     size: PropTypes.string
   }),
   /**

package/lib/esm/Card/Card.js

@@ -75,7 +75,7 @@ const getCardContentTokens = function (baseTokens) {
  * ### With Footer
  *
  * Pass any component or simply a string in the `footer` prop in order to render
- * a card with a footer (which uses the `alternative` background).
+ * a card with a footer (which uses the `feature2` style).
  *
  * ### With Full Bleed Content
  *

package/lib/esm/Card/CardFooter.js

@@ -45,7 +45,7 @@ export const CardFooter = _ref2 => {
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Card', tokens, {
     ...variant,
-    background: 'alternative'
+    style: 'feature2'
   }, {
     viewport
   });

package/lib/esm/DatePicker/CalendarContainer.js

@@ -15,12 +15,13 @@ export const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
     $calendarDayDefaultHeight,
     $calendarDayDefaultWidth,
     $calendarWeekFontTokens,
-    $defaultFontTokens
+    $defaultFontTokens,
+    $isInline = false
   } = _ref;
   return `
   ${defaultReactDatesCss}
   > div {
-    z-index: 1000;
+    z-index: ${$isInline ? 'auto' : 1000};
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -32,7 +33,7 @@ export const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
     border: 1px solid ${$remainingTokens.singleDatePickerBorderColor};
     border-radius: ${$remainingTokens.singleDatePickerRadius}px;
     padding: ${$remainingTokens.singleDatePickerPaddingTopBottom}px ${$remainingTokens.singleDatePickerLeftRight}px;
-    z-index: 1000;
+    z-index: ${$isInline ? 'auto' : 1000};
   }
   .DateInput {
     width: 100%;

package/lib/esm/DatePicker/DatePicker.js

@@ -332,6 +332,7 @@ export const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         $calendarMonthFontTokens: calendarMonthFontTokens,
         $calendarWeekFontTokens: calendarWeekFontTokens,
         $defaultFontTokens: defaultFontTokens,
+        $isInline: inline,
         children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,

package/lib/esm/Toast/Toast.js

@@ -73,7 +73,7 @@ export const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const {
     color: chevronInverseColor
   } = useThemeTokens('ChevronLink', {}, {
-    inverse: true
+    style: 'inverse'
   });
   if (!toast) {
     return null;
@@ -115,7 +115,7 @@ export const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       direction: "row"
     }), link && /*#__PURE__*/_jsx(ChevronLink, {
       variant: {
-        inverse: true
+        style: 'inverse'
       },
       tokens: {
         blockFontWeight: chevronlinkFontWeight

package/lib/esm/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yInfoProvider, A11yText, ActionCard, ActivityIndicator, Autocomplete, BaseProvider, Box, Button, ButtonLink, ButtonGroup, ButtonDropdown, CardGroup, Carousel, CarouselItem, CarouselTabs, CarouselProvider, ViewportProvider, ThemeProvider, Checkbox, CheckboxGroup, ColourToggle, Divider, DownloadApp, ExpandCollapse, ExpandCollapseAccordion, ExpandCollapsePanel, ExpandCollapseMini, Feedback, FileUpload, FlexGrid, FlexGridCol, FlexGridRow, Icon, InputLabel, InputSupports, ChevronLink, Link, TextButton, Listbox, ListboxOverlay, Modal, MultiSelectFilter, Notification, Pagination, PaginationPageButton, PaginationPageButtonBase, Portal, QuickLinks, QuickLinksItem, QuickLinksFeature, QuickLinksFeatureItem, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SelectItem, SelectGroup, Shortcuts, ShortcutsItem, SideNav, SideNavItem, SideNavItemsGroup, Skeleton, SkipLink, Spacer, StackView, StackWrap, Status, StepTracker, TabBar, TabBarItem, Tabs, Tags, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yInfoProvider, A11yText, ActionCard, ActivityIndicator, Autocomplete, BaseProvider, Box, Button, ButtonLink, ButtonGroup, ButtonDropdown, CardGroup, Carousel, CarouselItem, CarouselProvider, ViewportProvider, ThemeProvider, Checkbox, CheckboxGroup, ColourToggle, Divider, DownloadApp, ExpandCollapse, ExpandCollapseAccordion, ExpandCollapsePanel, ExpandCollapseMini, Feedback, FileUpload, FlexGrid, FlexGridCol, FlexGridRow, Icon, InputLabel, InputSupports, ChevronLink, Link, TextButton, Listbox, ListboxOverlay, Modal, MultiSelectFilter, Notification, Pagination, PaginationPageButton, PaginationPageButtonBase, Portal, QuickLinks, QuickLinksItem, QuickLinksFeature, QuickLinksFeatureItem, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Scroll, ScrollItem, Search, Select, SelectItem, SelectGroup, Shortcuts, ShortcutsItem, SideNav, SideNavItem, SideNavItemsGroup, Skeleton, SkipLink, Spacer, StackView, StackWrap, Status, StepTracker, TabBar, TabBarItem, Tabs, Tags, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^4.0.0-alpha.0",
+    "@telus-uds/components-base": "^4.0.0-alpha.2",
     "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -73,5 +73,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "5.0.0-alpha.0"
+  "version": "5.0.0-alpha.2"
 }

package/src/BlockQuote/BlockQuote.jsx

@@ -165,7 +165,7 @@ export const BlockQuote = React.forwardRef(
               blockLineHeight: linkLineHeight,
               color
             }}
-            variant={{ alternative: true }}
+            variant={{ style: 'subtle' }}
             LinkRouter={LinkRouter}
             linkRouterProps={linkRouterProps}
           >
@@ -241,7 +241,7 @@ BlockQuote.propTypes = {
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('BlockQuote'),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool,
+    style: PropTypes.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse']),
     size: PropTypes.string
   }),
   /**

package/src/Card/Card.jsx

@@ -88,7 +88,7 @@ const getCardContentTokens = (baseTokens, options = {}) => {
  * ### With Footer
  *
  * Pass any component or simply a string in the `footer` prop in order to render
- * a card with a footer (which uses the `alternative` background).
+ * a card with a footer (which uses the `feature2` style).
  *
  * ### With Full Bleed Content
  *

package/src/Card/CardFooter.jsx

@@ -43,7 +43,7 @@ export const CardFooter = ({ children, padding, tokens, variant, ...rest }) => {
   const themeTokens = useThemeTokens(
     'Card',
     tokens,
-    { ...variant, background: 'alternative' },
+    { ...variant, style: 'feature2' },
     { viewport }
   )
   const { paddingBottom, paddingLeft, paddingRight, paddingTop } = padding || themeTokens

package/src/DatePicker/CalendarContainer.jsx

@@ -12,11 +12,12 @@ export const CalendarContainer = styled.div(
     $calendarDayDefaultHeight,
     $calendarDayDefaultWidth,
     $calendarWeekFontTokens,
-    $defaultFontTokens
+    $defaultFontTokens,
+    $isInline = false
   }) => `
   ${defaultReactDatesCss}
   > div {
-    z-index: 1000;
+    z-index: ${$isInline ? 'auto' : 1000};
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -30,7 +31,7 @@ export const CalendarContainer = styled.div(
     padding: ${$remainingTokens.singleDatePickerPaddingTopBottom}px ${
     $remainingTokens.singleDatePickerLeftRight
   }px;
-    z-index: 1000;
+    z-index: ${$isInline ? 'auto' : 1000};
   }
   .DateInput {
     width: 100%;

package/src/DatePicker/DatePicker.jsx

@@ -329,6 +329,7 @@ export const DatePicker = React.forwardRef(
               $calendarMonthFontTokens={calendarMonthFontTokens}
               $calendarWeekFontTokens={calendarWeekFontTokens}
               $defaultFontTokens={defaultFontTokens}
+              $isInline={inline}
             >
               <DayPickerSingleDateController
                 date={inputDate}

package/src/Toast/Toast.jsx

@@ -117,7 +117,7 @@ export const Toast = React.forwardRef(
 
     // inherit ChevronLink tokens for animation colors
     const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
-    const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { inverse: true })
+    const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { style: 'inverse' })
 
     if (!toast) {
       return null
@@ -150,7 +150,7 @@ export const Toast = React.forwardRef(
         {link && (
           <ChevronLink
             variant={{
-              inverse: true
+              style: 'inverse'
             }}
             tokens={{ blockFontWeight: chevronlinkFontWeight }}
             href={link.href}

package/src/baseExports.js

@@ -19,7 +19,6 @@ export {
   CardGroup,
   Carousel,
   CarouselItem,
-  CarouselTabs,
   CarouselProvider,
   ViewportProvider,
   ThemeProvider,
@@ -61,6 +60,8 @@ export {
   RadioCard,
   RadioCardGroup,
   Responsive,
+  Scroll,
+  ScrollItem,
   Search,
   Select,
   SelectItem,