@semcore/typography 5.54.0-prerelease.5 → 5.54.0-prerelease.6

package/lib/esm/Hint.mjs

@@ -0,0 +1,81 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
+import Text from "./Text.mjs";
+/*!__reshadow-styles__:"./style/hint.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SHint_19apg_gg_{display:inline-block;transition:all .15s ease-in-out;-webkit-text-decoration:none;text-decoration:none;outline:0;cursor:pointer;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SHint_19apg_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SHint_19apg_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SHint_19apg_gg_.__active_19apg_gg_,.___SHint_19apg_gg_:active{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SHint_19apg_gg_:hover{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SHint_19apg_gg_.__keyboardFocused_19apg_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___SHint_19apg_gg_.__keyboardFocused_19apg_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SHint_19apg_gg_.__keyboardFocused_19apg_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SHint_19apg_gg_.__disabled_19apg_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_19apg_gg_{vertical-align:middle;display:inline-flex}.___SHint_19apg_gg_ .___SAddon_19apg_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SHint_19apg_gg_ .___SAddon_19apg_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_19apg_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}@media (prefers-reduced-motion){.___SHint_19apg_gg_{transition:none}}",
+    /*__inner_css_end__*/
+    "19apg_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHint": "___SHint_19apg_gg_",
+    "_keyboardFocused": "__keyboardFocused_19apg_gg_",
+    "_disabled": "__disabled_19apg_gg_",
+    "__SAddon": "___SAddon_19apg_gg_",
+    "__SText": "___SText_19apg_gg_",
+    "_active": "__active_19apg_gg_"
+  })
+);
+var RootHint = /* @__PURE__ */ function(_Component) {
+  _inherits(RootHint2, _Component);
+  var _super = _createSuper(RootHint2);
+  function RootHint2() {
+    _classCallCheck(this, RootHint2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(RootHint2, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref4;
+      var SHint = Text;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, addonLeft = _this$asProps.addonLeft, addonRight = _this$asProps.addonRight;
+      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHint, _ref4.cn("SHint", _objectSpread({}, assignProps({
+        "tag": "abbr"
+      }, _ref))), addonLeft ? /* @__PURE__ */ React.createElement(Hint.Addon, {
+        tag: addonLeft
+      }) : null, addonTextChildren(Children, Hint.Text, Hint.Addon), addonRight ? /* @__PURE__ */ React.createElement(Hint.Addon, {
+        tag: addonRight
+      }) : null);
+    }
+  }]);
+  return RootHint2;
+}(Component);
+_defineProperty(RootHint, "displayName", "Hint");
+_defineProperty(RootHint, "style", style);
+_defineProperty(RootHint, "enhance", [keyboardFocusEnhance()]);
+function Addon(props) {
+  var _ref2 = arguments[0], _ref5;
+  var SAddon = Box;
+  var styles = props.styles;
+  return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref5.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref2))));
+}
+function HintText(props) {
+  var _ref3 = arguments[0], _ref6;
+  var SText = Box;
+  var styles = props.styles;
+  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref6.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref3))));
+}
+var Hint = createComponent(RootHint, {
+  Text: HintText,
+  Addon
+});
+export {
+  Hint as default
+};

package/lib/esm/{components/List/List.mjs → List.mjs}

@@ -1,38 +1,40 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
-import { Flex } from "@semcore/base-components";
-import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
-import isNode from "@semcore/core/lib/utils/isNode";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
 import React from "react";
-import Text from "../Text/Text.mjs";
-/*!__reshadow-styles__:"../../style/list.shadow.css"*/
+import { Flex } from "@semcore/flex-box";
+import isNode from "@semcore/utils/lib/isNode";
+import { isAdvanceMode } from "@semcore/utils/lib/findComponent";
+import Text from "./Text.mjs";
+/*!__reshadow-styles__:"./style/list.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SList_13mha_gg_{padding:0;margin:0;list-style-type:none}.___SContent_13mha_gg_{overflow:inherit;text-overflow:inherit}.___SItem_13mha_gg_+.___SItem_13mha_gg_,.___SList_13mha_gg_ .___SList_13mha_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_13mha_gg_{display:flex}.___SMarker_13mha_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));line-height:normal}@supports (color:color(display-p3 0 0 0%)){.___SMarker_13mha_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SMarker_13mha_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}",
+    ".___SList_1pd9u_gg_{padding:0;margin:0;list-style-type:none}.___SContent_1pd9u_gg_{overflow:inherit;text-overflow:inherit}.___SItem_1pd9u_gg_+.___SItem_1pd9u_gg_,.___SList_1pd9u_gg_ .___SList_1pd9u_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_1pd9u_gg_{display:flex}.___SMarker_1pd9u_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));line-height:normal}@supports (color:color(display-p3 0 0 0)){.___SMarker_1pd9u_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SMarker_1pd9u_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}",
     /*__inner_css_end__*/
-    "13mha_gg_"
+    "1pd9u_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SList": "___SList_13mha_gg_",
-    "__SContent": "___SContent_13mha_gg_",
-    "__SItem": "___SItem_13mha_gg_",
-    "__SMarker": "___SMarker_13mha_gg_"
+    "__SList": "___SList_1pd9u_gg_",
+    "__SContent": "___SContent_1pd9u_gg_",
+    "__SItem": "___SItem_1pd9u_gg_",
+    "__SMarker": "___SMarker_1pd9u_gg_"
   })
 );
-var ListRoot = /* @__PURE__ */ (function(_Component) {
+var ListRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(ListRoot2, _Component);
+  var _super = _createSuper(ListRoot2);
   function ListRoot2() {
     _classCallCheck(this, ListRoot2);
-    return _callSuper(this, ListRoot2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(ListRoot2, _Component);
-  return _createClass(ListRoot2, [{
+  _createClass(ListRoot2, [{
     key: "getItemProps",
     value: function getItemProps() {
       var marker = this.asProps.marker;
@@ -46,47 +48,52 @@ var ListRoot = /* @__PURE__ */ (function(_Component) {
       var _ref = this.asProps, _ref4;
       var SList = Text;
       var styles = this.asProps.styles;
-      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SList, _ref4.cn("SList", _objectSpread({}, assignProps({
-        "tag": "ul"
+      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SList, _ref4.cn("SList", _objectSpread({}, assignProps({
+        "tag": "ul",
+        "role": "list"
       }, _ref))));
     }
   }]);
-})(Component);
+  return ListRoot2;
+}(Component);
 _defineProperty(ListRoot, "displayName", "List");
 _defineProperty(ListRoot, "style", style);
 _defineProperty(ListRoot, "defaultProps", {
   marker: "•"
 });
-var ItemRoot = /* @__PURE__ */ (function(_Component2) {
+var ItemRoot = /* @__PURE__ */ function(_Component2) {
+  _inherits(ItemRoot2, _Component2);
+  var _super2 = _createSuper(ItemRoot2);
   function ItemRoot2() {
     _classCallCheck(this, ItemRoot2);
-    return _callSuper(this, ItemRoot2, arguments);
+    return _super2.apply(this, arguments);
   }
-  _inherits(ItemRoot2, _Component2);
-  return _createClass(ItemRoot2, [{
+  _createClass(ItemRoot2, [{
     key: "render",
     value: function render() {
       var _ref2 = this.asProps, _ref5;
       var SItem = Text;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, markerNode = _this$asProps.marker, Children = _this$asProps.Children;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, children = _this$asProps.children, markerNode = _this$asProps.marker, Children = _this$asProps.Children;
       var SMarker = "span";
       var SContent = "div";
       var isAdvancedMode = isAdvanceMode(Children, [List.Item.Content.displayName]);
-      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref5.cn("SItem", _objectSpread({}, assignProps({
-        "tag": "li"
+      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref5.cn("SItem", _objectSpread({}, assignProps({
+        "tag": "li",
+        "role": "listitem"
       }, _ref2))), isNode(markerNode) && /* @__PURE__ */ React.createElement(SMarker, _ref5.cn("SMarker", {
         "aria-hidden": "true"
-      }), markerNode), isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(SContent, _ref5.cn("SContent", {}), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))));
+      }), markerNode), isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(SContent, _ref5.cn("SContent", {}), children));
     }
   }]);
-})(Component);
+  return ItemRoot2;
+}(Component);
 _defineProperty(ItemRoot, "style", style);
 _defineProperty(ItemRoot, "displayName", "Item");
 function Content(props) {
   var _ref3 = arguments[0], _ref6;
   var styles = props.styles, children = props.children;
   var SContent = Flex;
-  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))), children);
+  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))), children);
 }
 Content.displayName = "Content";
 var Item = createComponent(ItemRoot, {

package/lib/esm/Text.mjs

@@ -0,0 +1,78 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import { createBaseComponent, sstyled as sstyled$1, assignProps } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import { useColorResolver } from "@semcore/utils/lib/use/useColorResolver";
+/*!__reshadow-styles__:"./style/text.shadow.css"*/
+var styles = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SText_uovzp_gg_{padding:0;margin:0}.___SText_uovzp_gg_._size_100_uovzp_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SText_uovzp_gg_._size_200_uovzp_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_uovzp_gg_._size_300_uovzp_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SText_uovzp_gg_._size_400_uovzp_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SText_uovzp_gg_._size_500_uovzp_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SText_uovzp_gg_._size_600_uovzp_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_uovzp_gg_._size_700_uovzp_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_uovzp_gg_._size_800_uovzp_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}.___SText_uovzp_gg_.__noWrap_uovzp_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_uovzp_gg_.__medium_uovzp_gg_{font-weight:var(--intergalactic-medium, 500)}.___SText_uovzp_gg_.__semibold_uovzp_gg_{font-weight:var(--intergalactic-semi-bold, 600)}.___SText_uovzp_gg_.__bold_uovzp_gg_{font-weight:var(--intergalactic-bold, 700)}.___SText_uovzp_gg_.__italic_uovzp_gg_{font-style:italic}.___SText_uovzp_gg_.__monospace_uovzp_gg_{font-family:Consolas,"Roboto Mono",Menlo,Courier,monospace}.___SText_uovzp_gg_.__uppercase_uovzp_gg_{text-transform:uppercase}.___SText_uovzp_gg_.__lowercase_uovzp_gg_{text-transform:lowercase}.___SText_uovzp_gg_.__capitalize_uovzp_gg_{text-transform:capitalize}.___SText_uovzp_gg_.__decoration_uovzp_gg_{-webkit-text-decoration:var(--decoration_uovzp);text-decoration:var(--decoration_uovzp)}.___SText_uovzp_gg_.__color_uovzp_gg_{color:var(--color_uovzp)}.___SText_uovzp_gg_.__fontSize_uovzp_gg_{font-size:var(--fontSize_uovzp)}.___SText_uovzp_gg_.__lineHeight_uovzp_gg_{line-height:var(--lineHeight_uovzp)}.___SText_uovzp_gg_.__fontWeight_uovzp_gg_{font-weight:var(--fontWeight_uovzp)}.___SText_uovzp_gg_.__textAlign_uovzp_gg_{text-align:var(--textAlign_uovzp)}.___SText_uovzp_gg_._use_primary_uovzp_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___SText_uovzp_gg_._use_secondary_uovzp_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SText_uovzp_gg_._use_secondary_uovzp_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SText_uovzp_gg_._use_secondary_uovzp_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SText_uovzp_gg_.__disabled_uovzp_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}',
+    /*__inner_css_end__*/
+    "uovzp_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SText": "___SText_uovzp_gg_",
+    "_size_100": "_size_100_uovzp_gg_",
+    "_size_200": "_size_200_uovzp_gg_",
+    "_size_300": "_size_300_uovzp_gg_",
+    "_size_400": "_size_400_uovzp_gg_",
+    "_size_500": "_size_500_uovzp_gg_",
+    "_size_600": "_size_600_uovzp_gg_",
+    "_size_700": "_size_700_uovzp_gg_",
+    "_size_800": "_size_800_uovzp_gg_",
+    "_noWrap": "__noWrap_uovzp_gg_",
+    "_medium": "__medium_uovzp_gg_",
+    "_semibold": "__semibold_uovzp_gg_",
+    "_bold": "__bold_uovzp_gg_",
+    "_italic": "__italic_uovzp_gg_",
+    "_monospace": "__monospace_uovzp_gg_",
+    "_uppercase": "__uppercase_uovzp_gg_",
+    "_lowercase": "__lowercase_uovzp_gg_",
+    "_capitalize": "__capitalize_uovzp_gg_",
+    "_decoration": "__decoration_uovzp_gg_",
+    "--decoration": "--decoration_uovzp",
+    "_color": "__color_uovzp_gg_",
+    "--color": "--color_uovzp",
+    "_fontSize": "__fontSize_uovzp_gg_",
+    "--fontSize": "--fontSize_uovzp",
+    "_lineHeight": "__lineHeight_uovzp_gg_",
+    "--lineHeight": "--lineHeight_uovzp",
+    "_fontWeight": "__fontWeight_uovzp_gg_",
+    "--fontWeight": "--fontWeight_uovzp",
+    "_textAlign": "__textAlign_uovzp_gg_",
+    "--textAlign": "--textAlign_uovzp",
+    "_use_primary": "_use_primary_uovzp_gg_",
+    "_use_secondary": "_use_secondary_uovzp_gg_",
+    "_disabled": "__disabled_uovzp_gg_"
+  })
+);
+function getTextDecoration(underline, lineThrough) {
+  if (underline) {
+    return "underline";
+  }
+  if (lineThrough) {
+    return "line-through";
+  }
+}
+function Text(props, ref) {
+  var _ref = arguments[0], _ref2;
+  var SText = Box;
+  var color = props.color, underline = props.underline, lineThrough = props.lineThrough;
+  var textDecoration = getTextDecoration(underline, lineThrough);
+  var resolveColor = useColorResolver();
+  return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref2.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span",
+    "data-ui-name": "Text",
+    "ref": ref,
+    "use:decoration": textDecoration,
+    "use:color": resolveColor(color)
+  }, _ref))));
+}
+Text.displayName = "Text";
+const Text$1 = createBaseComponent(Text);
+export {
+  Text$1 as default
+};

package/lib/esm/index.mjs

@@ -1,11 +1,10 @@
-import { default as default2 } from "./components/Text/Text.mjs";
-import { default as default3 } from "./components/Blockquote/Blockquote.mjs";
-import { default as default4 } from "./components/List/List.mjs";
-import "./components/Text/Text.type.mjs";
-import "./components/Blockquote/Blockquote.type.mjs";
-import "./components/List/List.type.mjs";
+import { default as default2 } from "./Text.mjs";
+import { default as default3 } from "./Blockquote.mjs";
+import { default as default4 } from "./List.mjs";
+import { default as default5 } from "./Hint.mjs";
 export {
   default3 as Blockquote,
+  default5 as Hint,
   default4 as List,
   default2 as Text
 };

package/lib/esm/style/hint.shadow.css

@@ -0,0 +1,51 @@
+SHint {
+  display: inline-block;
+  transition: all 0.15s ease-in-out;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+
+  &[active],
+  &:active,
+  &:hover {
+    color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
+  }
+}
+
+SHint[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+}
+
+SHint[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
+  cursor: default;
+  pointer-events: none; /* Disable hint interactions */
+}
+
+SAddon {
+  vertical-align: middle;
+  display: inline-flex;
+}
+
+SHint SAddon {
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SText {
+  border-bottom-width: 1px;
+  border-bottom-style: dashed;
+  border-color: currentColor;
+}
+
+@media (prefers-reduced-motion) {
+  SHint {
+    transition: none;
+  }
+}