intergalactic 15.93.0 → 15.94.0-prerelease.0

package/CHANGELOG.md

@@ -1,3 +1,67 @@
+## [15.94.0] - 2024-06-07
+
+### @semcore/breadcrumbs
+
+- **Changed** Added `nav` tag for breadcrumbs container.
+- **Changed** Added default `a` tag for breadcrumb item.
+- **Changed** Wrapped breadcrumb items in an `ol` list.
+
+### @semcore/button
+
+- **Added** `Hint` for Button with addon and without text.
+
+### @semcore/card
+
+- **Changed** `Tooltip` to `DescriptionTooltip` for hints in card title.
+
+### @semcore/carousel
+
+- **Fixed** Button styles because DOM for `Button` with only addons has been changed.
+
+### @semcore/d3-chart
+
+- **Added** `ReferenceStripes` component.
+- **Added** `ReferenceBackground` component (previously `ReferenceLine.Background`).
+- **Changed** `ReferenceLine.Background` deprecated in favor of `ReferenceBackground`.
+
+### @semcore/feedback-form
+
+- **Fixed** Children type for `FeedbackForm.Item`.
+
+### @semcore/fullscreen-modal
+
+- **Changed** Tag for `FullscreenModal.Section` is `section` instead of `div`.
+
+### @semcore/input
+
+- **Fixed** Type definition for Input's `placeholder` prop.
+
+### @semcore/input-number
+
+- **Fixed** Incorrect increment/dicrement in formatted Number Inputs.
+- **Fixed** Removed onChange handler call for the value that ends with `-` and `.` as in native input with `type="number"`.
+
+### @semcore/link
+
+- **Added** `Hint` for Link with addon and without text.
+
+### @semcore/popper
+
+- **Fixed** Programmatically opened popper were getting `tabIndex={0}` even without focusable elements inside.
+
+### @semcore/scroll-area
+
+- **Added** Auto resizing for `ScrollArea` if the parent element changes its size.
+
+### @semcore/tooltip
+
+- **Fixed** Merging tooltip with Button component was breaking the button styles.
+- **Fixed** Removed `aria-haspopup` and `role` from triggers of `Hint` and `Tooltip`.
+- **Fixed** Removed `interaction` property from types of `Hint`.
+- **Fixed** Removed warning theme from types of `Hint`.
+- **Changed** `aria-haspopup` of `DescriptionTooltip` changed to `dialog`.
+- **Fixed** `DescriptionTooltip` default children.
+
 ## [15.93.0] - 2024-05-31
 
 ### @semcore/feedback-form

package/accordion/lib/cjs/Accordion.js

@@ -25,13 +25,13 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/
 var _uniqueID = _interopRequireDefault(require("intergalactic/utils/lib/uniqueID"));
 var _useCssVariable = require("intergalactic/utils/lib/useCssVariable");
 /*__reshadow-styles__:"./style/accordion.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SItemToggle_kxso1_gg_{position:relative;cursor:pointer;outline:0}.___SItemToggle_kxso1_gg_.__keyboardFocused_kxso1_gg_:not(._tabIndex_-1_kxso1_gg_)::after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:3}.___SItemToggle_kxso1_gg_.__disabled_kxso1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_kxso1_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SItemChevron_kxso1_gg_.__selected_kxso1_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_kxso1_gg_{transition:none}}" /*__inner_css_end__*/, "kxso1_gg_") /*__reshadow_css_end__*/, {
-  "__SItemToggle": "___SItemToggle_kxso1_gg_",
-  "_keyboardFocused": "__keyboardFocused_kxso1_gg_",
-  "_tabIndex_-1": "_tabIndex_-1_kxso1_gg_",
-  "_disabled": "__disabled_kxso1_gg_",
-  "__SItemChevron": "___SItemChevron_kxso1_gg_",
-  "_selected": "__selected_kxso1_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SItemToggle_rwp4y_gg_{position:relative;cursor:pointer;outline:0}.___SItemToggle_rwp4y_gg_.__keyboardFocused_rwp4y_gg_:not(._tabIndex_-1_rwp4y_gg_)::after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:3}.___SItemToggle_rwp4y_gg_.__disabled_rwp4y_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_rwp4y_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SItemChevron_rwp4y_gg_.__selected_rwp4y_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_rwp4y_gg_{transition:none}}" /*__inner_css_end__*/, "rwp4y_gg_") /*__reshadow_css_end__*/, {
+  "__SItemToggle": "___SItemToggle_rwp4y_gg_",
+  "_keyboardFocused": "__keyboardFocused_rwp4y_gg_",
+  "_tabIndex_-1": "_tabIndex_-1_rwp4y_gg_",
+  "_disabled": "__disabled_rwp4y_gg_",
+  "__SItemChevron": "___SItemChevron_rwp4y_gg_",
+  "_selected": "__selected_rwp4y_gg_"
 });
 var RootAccordion = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RootAccordion, _Component);

package/accordion/lib/es6/Accordion.js

@@ -20,13 +20,13 @@ import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocus
 import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
 import { cssVariableEnhance } from 'intergalactic/utils/lib/useCssVariable';
 /*__reshadow-styles__:"./style/accordion.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SItemToggle_kxso1_gg_{position:relative;cursor:pointer;outline:0}.___SItemToggle_kxso1_gg_.__keyboardFocused_kxso1_gg_:not(._tabIndex_-1_kxso1_gg_)::after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:3}.___SItemToggle_kxso1_gg_.__disabled_kxso1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_kxso1_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SItemChevron_kxso1_gg_.__selected_kxso1_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_kxso1_gg_{transition:none}}" /*__inner_css_end__*/, "kxso1_gg_") /*__reshadow_css_end__*/, {
-  "__SItemToggle": "___SItemToggle_kxso1_gg_",
-  "_keyboardFocused": "__keyboardFocused_kxso1_gg_",
-  "_tabIndex_-1": "_tabIndex_-1_kxso1_gg_",
-  "_disabled": "__disabled_kxso1_gg_",
-  "__SItemChevron": "___SItemChevron_kxso1_gg_",
-  "_selected": "__selected_kxso1_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SItemToggle_rwp4y_gg_{position:relative;cursor:pointer;outline:0}.___SItemToggle_rwp4y_gg_.__keyboardFocused_rwp4y_gg_:not(._tabIndex_-1_rwp4y_gg_)::after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:3}.___SItemToggle_rwp4y_gg_.__disabled_rwp4y_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_rwp4y_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SItemChevron_rwp4y_gg_.__selected_rwp4y_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_rwp4y_gg_{transition:none}}" /*__inner_css_end__*/, "rwp4y_gg_") /*__reshadow_css_end__*/, {
+  "__SItemToggle": "___SItemToggle_rwp4y_gg_",
+  "_keyboardFocused": "__keyboardFocused_rwp4y_gg_",
+  "_tabIndex_-1": "_tabIndex_-1_rwp4y_gg_",
+  "_disabled": "__disabled_rwp4y_gg_",
+  "__SItemChevron": "___SItemChevron_rwp4y_gg_",
+  "_selected": "__selected_rwp4y_gg_"
 });
 var RootAccordion = /*#__PURE__*/function (_Component) {
   _inherits(RootAccordion, _Component);

package/breadcrumbs/lib/cjs/Breadcrumbs.js

@@ -21,12 +21,14 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 var _i18nEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/i18nEnhance"));
 /*__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SBreadcrumbs_1wmbk_gg_{display:flex;align-items:center;padding:0;margin:0;list-style:none}.___SSeparator_1wmbk_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);display:flex}.___SSeparator_1wmbk_gg_:last-child{display:none}.___SBreadcrumbsItem_1wmbk_gg_{position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, #6c6e79);-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;outline:0;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.___SBreadcrumbsItem_1wmbk_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, #191b23)}}.___SBreadcrumbsItem_1wmbk_gg_.__keyboardFocused_1wmbk_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBreadcrumbsItem_1wmbk_gg_.__active_1wmbk_gg_{color:var(--intergalactic-text-primary, #191b23);cursor:default}@media (hover:hover){.___SBreadcrumbsItem_1wmbk_gg_.__active_1wmbk_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}" /*__inner_css_end__*/, "1wmbk_gg_") /*__reshadow_css_end__*/, {
-  "__SBreadcrumbs": "___SBreadcrumbs_1wmbk_gg_",
-  "__SBreadcrumbsItem": "___SBreadcrumbsItem_1wmbk_gg_",
-  "_keyboardFocused": "__keyboardFocused_1wmbk_gg_",
-  "__SSeparator": "___SSeparator_1wmbk_gg_",
-  "_active": "__active_1wmbk_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SBreadcrumbs_151yw_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SSeparator_151yw_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);display:flex}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SSeparator_151yw_gg_:last-child{display:none}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_{overflow:hidden}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_{width:100%;display:block;position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, #6c6e79);-webkit-text-decoration:none;text-decoration:none;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, #191b23)}}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_.__keyboardFocused_151yw_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_.__active_151yw_gg_{color:var(--intergalactic-text-primary, #191b23);cursor:default}@media (hover:hover){.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_.__active_151yw_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}" /*__inner_css_end__*/, "151yw_gg_") /*__reshadow_css_end__*/, {
+  "__SBreadcrumbs": "___SBreadcrumbs_151yw_gg_",
+  "__SListContainer": "___SListContainer_151yw_gg_",
+  "__SSeparator": "___SSeparator_151yw_gg_",
+  "__SListItem": "___SListItem_151yw_gg_",
+  "__SBreadcrumbsItem": "___SBreadcrumbsItem_151yw_gg_",
+  "_keyboardFocused": "__keyboardFocused_151yw_gg_",
+  "_active": "__active_151yw_gg_"
 });
 var Breadcrumbs = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Breadcrumbs, _Component);
@@ -52,13 +54,14 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref3;
       var SBreadcrumbs = _flexBox.Box;
+      var SListContainer = 'ol';
       var _this$asProps2 = this.asProps,
         styles = _this$asProps2.styles,
-        getI18nText = _this$asProps2.getI18nText;
+        getI18nText = _this$asProps2.getI18nText,
+        Children = _this$asProps2.Children;
       return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBreadcrumbs, _ref3.cn("SBreadcrumbs", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "aria-label": getI18nText('breadcrumbs'),
-        "role": 'group'
-      }, _ref))));
+        "aria-label": getI18nText('breadcrumbs')
+      }, _ref))), /*#__PURE__*/_react["default"].createElement(SListContainer, _ref3.cn("SListContainer", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))));
     }
   }]);
   return Breadcrumbs;
@@ -68,7 +71,7 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(Breadcrumbs, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
 (0, _defineProperty2["default"])(Breadcrumbs, "defaultProps", {
   separator: /*#__PURE__*/_react["default"].createElement(_m["default"], null),
-  tag: 'div',
+  tag: 'nav',
   i18n: _intergalacticDynamicLocales.localizedMessages,
   locale: 'en'
 });
@@ -88,27 +91,25 @@ var Item = /*#__PURE__*/function (_Component2) {
       var _this$asProps3 = this.asProps,
         styles = _this$asProps3.styles,
         separator = _this$asProps3.separator,
-        active = _this$asProps3.active;
+        active = _this$asProps3.active,
+        disabled = _this$asProps3.disabled,
+        href = _this$asProps3.href;
       var SSeparator = 'div';
-      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      var SListItem = 'li';
+      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SListItem, _ref4.cn("SListItem", {}), /*#__PURE__*/_react["default"].createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "use:href": !active && !disabled ? href : undefined,
         "aria-current": active ? 'page' : undefined
-      }, _ref2)))), /*#__PURE__*/_react["default"].createElement(SSeparator, _ref4.cn("SSeparator", {
+      }, _ref2))))), /*#__PURE__*/_react["default"].createElement(SSeparator, _ref4.cn("SSeparator", {
         "aria-hidden": 'true'
       }), separator));
     }
-  }], [{
-    key: "defaultProps",
-    value: function defaultProps(_ref5) {
-      var active = _ref5.active;
-      return {
-        disabled: active,
-        tag: 'a',
-        locale: 'en'
-      };
-    }
   }]);
   return Item;
 }(_core.Component);
+(0, _defineProperty2["default"])(Item, "defaultProps", {
+  tag: 'a',
+  locale: 'en'
+});
 (0, _defineProperty2["default"])(Item, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
 var _default = (0, _core["default"])(Breadcrumbs, {
   Item: Item

package/breadcrumbs/lib/cjs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_m","_keyboardFocusEnhance","_intergalacticDynamicLocales","_i18nEnhance","style","_index","sstyled","insert","Breadcrumbs","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","getItemProps","_this$asProps","asProps","separator","locale","render","_ref","_ref3","SBreadcrumbs","Box","_this$asProps2","styles","getI18nText","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","i18nEnhance","localizedMessages","tag","i18n","Item","_Component2","_super2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","SSeparator","Fragment","undefined","defaultProps","_ref5","disabled","keyboardFocusEnhance","_default","createComponent","exports"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/breadcrumbs.shadow.css';\n\nclass Breadcrumbs extends Component {\n  static displayName = 'Breadcrumbs';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    separator: <SSeparator />,\n    tag: 'div',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  getItemProps() {\n    const { separator, locale } = this.asProps;\n    return {\n      separator,\n      locale,\n    };\n  }\n\n  render() {\n    const SBreadcrumbs = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SBreadcrumbs render={Box} aria-label={getI18nText('breadcrumbs')} role='group' />,\n    );\n  }\n}\n\nclass Item extends Component {\n  static defaultProps({ active }) {\n    return {\n      disabled: active,\n      tag: 'a',\n      locale: 'en',\n    };\n  }\n\n  static enhance = [keyboardFocusEnhance()];\n\n  render() {\n    const SBreadcrumbsItem = Root;\n    const { styles, separator, active } = this.asProps;\n    const SSeparator = 'div';\n\n    return sstyled(styles)(\n      <>\n        <SBreadcrumbsItem render={Box} aria-current={active ? 'page' : undefined} />\n        <SSeparator aria-hidden='true'>{separator}</SSeparator>\n      </>,\n    );\n  }\n}\n\nexport default createComponent(Breadcrumbs, {\n  Item,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_m","_keyboardFocusEnhance","_intergalacticDynamicLocales","_i18nEnhance","style","_index","sstyled","insert","Breadcrumbs","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","getItemProps","_this$asProps","asProps","separator","locale","render","_ref","_ref3","SBreadcrumbs","Box","SListContainer","_this$asProps2","styles","getI18nText","Children","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","i18nEnhance","localizedMessages","tag","i18n","Item","_Component2","_super2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","disabled","href","SSeparator","SListItem","Fragment","undefined","keyboardFocusEnhance","_default","createComponent","exports"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/breadcrumbs.shadow.css';\n\nclass Breadcrumbs extends Component {\n  static displayName = 'Breadcrumbs';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    separator: <SSeparator />,\n    tag: 'nav',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  getItemProps() {\n    const { separator, locale } = this.asProps;\n    return {\n      separator,\n      locale,\n    };\n  }\n\n  render() {\n    const SBreadcrumbs = Root;\n    const SListContainer = 'ol';\n    const { styles, getI18nText, Children } = this.asProps;\n    return sstyled(styles)(\n      <SBreadcrumbs render={Box} aria-label={getI18nText('breadcrumbs')}>\n        <SListContainer>\n          <Children />\n        </SListContainer>\n      </SBreadcrumbs>,\n    );\n  }\n}\n\nclass Item extends Component {\n  static defaultProps = {\n    tag: 'a',\n    locale: 'en',\n  };\n\n  static enhance = [keyboardFocusEnhance()];\n\n  render() {\n    const SBreadcrumbsItem = Root;\n    const { styles, separator, active, disabled, href } = this.asProps;\n    const SSeparator = 'div';\n    const SListItem = 'li';\n\n    return sstyled(styles)(\n      <>\n        <SListItem>\n          <SBreadcrumbsItem\n            render={Box}\n            use:href={!active && !disabled ? href : undefined}\n            aria-current={active ? 'page' : undefined}\n          />\n        </SListItem>\n        <SSeparator aria-hidden='true'>{separator}</SSeparator>\n      </>,\n    );\n  }\n}\n\nexport default createComponent(Breadcrumbs, {\n  Item,\n});\n"],"mappings":"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"}

package/breadcrumbs/lib/cjs/style/breadcrumbs.shadow.css

@@ -3,46 +3,58 @@ SBreadcrumbs {
   align-items: center;
   padding: 0;
   margin: 0;
-  list-style: none;
-}
 
-SSeparator {
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
-  display: flex;
+  SListContainer {
+    display: contents;
+    list-style: none;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
 
-  &:last-child {
-    display: none;
-  }
-}
+    SSeparator {
+      margin: 0 var(--intergalactic-spacing-2x, 8px);
+      color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
+      display: flex;
 
-SBreadcrumbsItem {
-  position: relative;
-  font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  text-decoration: none;
-  box-sizing: border-box;
-  outline: none;
-  cursor: pointer;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  &:hover {
-    text-decoration: underline;
-    color: var(--intergalactic-text-primary, #191b23);
-  }
-}
+      &:last-child {
+        display: none;
+      }
+    }
 
-SBreadcrumbsItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
+    SListItem {
+      overflow: hidden;
+
+
+      SBreadcrumbsItem {
+        width: 100%;
+        display: block;
+        position: relative;
+        font-size: var(--intergalactic-fs-200, 14px);
+        line-height: var(--intergalactic-lh-200, 142%);
+        color: var(--intergalactic-text-secondary, #6c6e79);
+        text-decoration: none;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:hover {
+          text-decoration: underline;
+          color: var(--intergalactic-text-primary, #191b23);
+        }
+      }
+
+      SBreadcrumbsItem[keyboardFocused] {
+        box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+      }
 
-SBreadcrumbsItem[active] {
-  color: var(--intergalactic-text-primary, #191b23);
-  cursor: default;
-  &:hover {
-    text-decoration: none;
+      SBreadcrumbsItem[active] {
+        color: var(--intergalactic-text-primary, #191b23);
+        cursor: default;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
   }
 }

package/breadcrumbs/lib/es6/Breadcrumbs.js

@@ -15,12 +15,14 @@ import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocus
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 /*__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SBreadcrumbs_1wmbk_gg_{display:flex;align-items:center;padding:0;margin:0;list-style:none}.___SSeparator_1wmbk_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);display:flex}.___SSeparator_1wmbk_gg_:last-child{display:none}.___SBreadcrumbsItem_1wmbk_gg_{position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, #6c6e79);-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;outline:0;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.___SBreadcrumbsItem_1wmbk_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, #191b23)}}.___SBreadcrumbsItem_1wmbk_gg_.__keyboardFocused_1wmbk_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBreadcrumbsItem_1wmbk_gg_.__active_1wmbk_gg_{color:var(--intergalactic-text-primary, #191b23);cursor:default}@media (hover:hover){.___SBreadcrumbsItem_1wmbk_gg_.__active_1wmbk_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}" /*__inner_css_end__*/, "1wmbk_gg_") /*__reshadow_css_end__*/, {
-  "__SBreadcrumbs": "___SBreadcrumbs_1wmbk_gg_",
-  "__SBreadcrumbsItem": "___SBreadcrumbsItem_1wmbk_gg_",
-  "_keyboardFocused": "__keyboardFocused_1wmbk_gg_",
-  "__SSeparator": "___SSeparator_1wmbk_gg_",
-  "_active": "__active_1wmbk_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SBreadcrumbs_151yw_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SSeparator_151yw_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);display:flex}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SSeparator_151yw_gg_:last-child{display:none}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_{overflow:hidden}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_{width:100%;display:block;position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, #6c6e79);-webkit-text-decoration:none;text-decoration:none;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, #191b23)}}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_.__keyboardFocused_151yw_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_.__active_151yw_gg_{color:var(--intergalactic-text-primary, #191b23);cursor:default}@media (hover:hover){.___SBreadcrumbs_151yw_gg_ .___SListContainer_151yw_gg_ .___SListItem_151yw_gg_ .___SBreadcrumbsItem_151yw_gg_.__active_151yw_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}" /*__inner_css_end__*/, "151yw_gg_") /*__reshadow_css_end__*/, {
+  "__SBreadcrumbs": "___SBreadcrumbs_151yw_gg_",
+  "__SListContainer": "___SListContainer_151yw_gg_",
+  "__SSeparator": "___SSeparator_151yw_gg_",
+  "__SListItem": "___SListItem_151yw_gg_",
+  "__SBreadcrumbsItem": "___SBreadcrumbsItem_151yw_gg_",
+  "_keyboardFocused": "__keyboardFocused_151yw_gg_",
+  "_active": "__active_151yw_gg_"
 });
 var Breadcrumbs = /*#__PURE__*/function (_Component) {
   _inherits(Breadcrumbs, _Component);
@@ -46,13 +48,14 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref3;
       var SBreadcrumbs = Box;
+      var SListContainer = 'ol';
       var _this$asProps2 = this.asProps,
         styles = _this$asProps2.styles,
-        getI18nText = _this$asProps2.getI18nText;
+        getI18nText = _this$asProps2.getI18nText,
+        Children = _this$asProps2.Children;
       return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SBreadcrumbs, _ref3.cn("SBreadcrumbs", _objectSpread({}, _assignProps({
-        "aria-label": getI18nText('breadcrumbs'),
-        "role": 'group'
-      }, _ref))));
+        "aria-label": getI18nText('breadcrumbs')
+      }, _ref))), /*#__PURE__*/React.createElement(SListContainer, _ref3.cn("SListContainer", {}), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))));
     }
   }]);
   return Breadcrumbs;
@@ -62,7 +65,7 @@ _defineProperty(Breadcrumbs, "style", style);
 _defineProperty(Breadcrumbs, "enhance", [i18nEnhance(localizedMessages)]);
 _defineProperty(Breadcrumbs, "defaultProps", {
   separator: /*#__PURE__*/React.createElement(SSeparator, null),
-  tag: 'div',
+  tag: 'nav',
   i18n: localizedMessages,
   locale: 'en'
 });
@@ -82,27 +85,25 @@ var Item = /*#__PURE__*/function (_Component2) {
       var _this$asProps3 = this.asProps,
         styles = _this$asProps3.styles,
         separator = _this$asProps3.separator,
-        active = _this$asProps3.active;
+        active = _this$asProps3.active,
+        disabled = _this$asProps3.disabled,
+        href = _this$asProps3.href;
       var SSeparator = 'div';
-      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", _objectSpread({}, _assignProps2({
+      var SListItem = 'li';
+      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SListItem, _ref4.cn("SListItem", {}), /*#__PURE__*/React.createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", _objectSpread({}, _assignProps2({
+        "use:href": !active && !disabled ? href : undefined,
         "aria-current": active ? 'page' : undefined
-      }, _ref2)))), /*#__PURE__*/React.createElement(SSeparator, _ref4.cn("SSeparator", {
+      }, _ref2))))), /*#__PURE__*/React.createElement(SSeparator, _ref4.cn("SSeparator", {
         "aria-hidden": 'true'
       }), separator));
     }
-  }], [{
-    key: "defaultProps",
-    value: function defaultProps(_ref5) {
-      var active = _ref5.active;
-      return {
-        disabled: active,
-        tag: 'a',
-        locale: 'en'
-      };
-    }
   }]);
   return Item;
 }(Component);
+_defineProperty(Item, "defaultProps", {
+  tag: 'a',
+  locale: 'en'
+});
 _defineProperty(Item, "enhance", [keyboardFocusEnhance()]);
 export default createComponent(Breadcrumbs, {
   Item: Item

package/breadcrumbs/lib/es6/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["React","createComponent","Component","sstyled","Root","Box","SSeparator","keyboardFocusEnhance","localizedMessages","i18nEnhance","style","_sstyled","insert","Breadcrumbs","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getItemProps","_this$asProps","asProps","separator","locale","render","_ref","_ref3","SBreadcrumbs","_this$asProps2","styles","getI18nText","createElement","cn","_objectSpread","_assignProps","_defineProperty","tag","i18n","Item","_Component2","_super2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","Fragment","_assignProps2","undefined","defaultProps","_ref5","disabled"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/breadcrumbs.shadow.css';\n\nclass Breadcrumbs extends Component {\n  static displayName = 'Breadcrumbs';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    separator: <SSeparator />,\n    tag: 'div',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  getItemProps() {\n    const { separator, locale } = this.asProps;\n    return {\n      separator,\n      locale,\n    };\n  }\n\n  render() {\n    const SBreadcrumbs = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SBreadcrumbs render={Box} aria-label={getI18nText('breadcrumbs')} role='group' />,\n    );\n  }\n}\n\nclass Item extends Component {\n  static defaultProps({ active }) {\n    return {\n      disabled: active,\n      tag: 'a',\n      locale: 'en',\n    };\n  }\n\n  static enhance = [keyboardFocusEnhance()];\n\n  render() {\n    const SBreadcrumbsItem = Root;\n    const { styles, separator, active } = this.asProps;\n    const SSeparator = 'div';\n\n    return sstyled(styles)(\n      <>\n        <SBreadcrumbsItem render={Box} aria-current={active ? 'page' : undefined} />\n        <SSeparator aria-hidden='true'>{separator}</SSeparator>\n      </>,\n    );\n  }\n}\n\nexport default createComponent(Breadcrumbs, {\n  Item,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["React","createComponent","Component","sstyled","Root","Box","SSeparator","keyboardFocusEnhance","localizedMessages","i18nEnhance","style","_sstyled","insert","Breadcrumbs","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getItemProps","_this$asProps","asProps","separator","locale","render","_ref","_ref3","SBreadcrumbs","SListContainer","_this$asProps2","styles","getI18nText","Children","createElement","cn","_objectSpread","_assignProps","_defineProperty","tag","i18n","Item","_Component2","_super2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","disabled","href","SListItem","Fragment","_assignProps2","undefined"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/breadcrumbs.shadow.css';\n\nclass Breadcrumbs extends Component {\n  static displayName = 'Breadcrumbs';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    separator: <SSeparator />,\n    tag: 'nav',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  getItemProps() {\n    const { separator, locale } = this.asProps;\n    return {\n      separator,\n      locale,\n    };\n  }\n\n  render() {\n    const SBreadcrumbs = Root;\n    const SListContainer = 'ol';\n    const { styles, getI18nText, Children } = this.asProps;\n    return sstyled(styles)(\n      <SBreadcrumbs render={Box} aria-label={getI18nText('breadcrumbs')}>\n        <SListContainer>\n          <Children />\n        </SListContainer>\n      </SBreadcrumbs>,\n    );\n  }\n}\n\nclass Item extends Component {\n  static defaultProps = {\n    tag: 'a',\n    locale: 'en',\n  };\n\n  static enhance = [keyboardFocusEnhance()];\n\n  render() {\n    const SBreadcrumbsItem = Root;\n    const { styles, separator, active, disabled, href } = this.asProps;\n    const SSeparator = 'div';\n    const SListItem = 'li';\n\n    return sstyled(styles)(\n      <>\n        <SListItem>\n          <SBreadcrumbsItem\n            render={Box}\n            use:href={!active && !disabled ? href : undefined}\n            aria-current={active ? 'page' : undefined}\n          />\n        </SListItem>\n        <SSeparator aria-hidden='true'>{separator}</SSeparator>\n      </>,\n    );\n  }\n}\n\nexport default createComponent(Breadcrumbs, {\n  Item,\n});\n"],"mappings":"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"}

package/breadcrumbs/lib/es6/style/breadcrumbs.shadow.css

@@ -3,46 +3,58 @@ SBreadcrumbs {
   align-items: center;
   padding: 0;
   margin: 0;
-  list-style: none;
-}
 
-SSeparator {
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
-  display: flex;
+  SListContainer {
+    display: contents;
+    list-style: none;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
 
-  &:last-child {
-    display: none;
-  }
-}
+    SSeparator {
+      margin: 0 var(--intergalactic-spacing-2x, 8px);
+      color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
+      display: flex;
 
-SBreadcrumbsItem {
-  position: relative;
-  font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  text-decoration: none;
-  box-sizing: border-box;
-  outline: none;
-  cursor: pointer;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  &:hover {
-    text-decoration: underline;
-    color: var(--intergalactic-text-primary, #191b23);
-  }
-}
+      &:last-child {
+        display: none;
+      }
+    }
 
-SBreadcrumbsItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
+    SListItem {
+      overflow: hidden;
+
+
+      SBreadcrumbsItem {
+        width: 100%;
+        display: block;
+        position: relative;
+        font-size: var(--intergalactic-fs-200, 14px);
+        line-height: var(--intergalactic-lh-200, 142%);
+        color: var(--intergalactic-text-secondary, #6c6e79);
+        text-decoration: none;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:hover {
+          text-decoration: underline;
+          color: var(--intergalactic-text-primary, #191b23);
+        }
+      }
+
+      SBreadcrumbsItem[keyboardFocused] {
+        box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+      }
 
-SBreadcrumbsItem[active] {
-  color: var(--intergalactic-text-primary, #191b23);
-  cursor: default;
-  &:hover {
-    text-decoration: none;
+      SBreadcrumbsItem[active] {
+        color: var(--intergalactic-text-primary, #191b23);
+        cursor: default;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
   }
 }