@stoplight/elements-core 7.13.2 → 7.13.3

package/components/Docs/Sections.d.ts

@@ -4,6 +4,7 @@ export interface ISectionTitle {
     title: string;
     id?: string;
     size?: HeadingProps['size'];
+    isCompact?: boolean;
 }
 export declare const SectionTitle: React.FC<ISectionTitle>;
 export declare const SectionSubtitle: React.FC<ISectionTitle>;

package/index.esm.js

@@ -2299,10 +2299,10 @@ const CustomLinkHeading = React.memo(function LinkHeading(_a) {
     return React.createElement(LinkHeading$1, Object.assign({ id: id }, props));
 });
 
-const SectionTitle = ({ title, id, size = 2, children }) => {
+const SectionTitle = ({ title, id, size = 2, isCompact = false, children }) => {
     return (React.createElement(Flex, { w: "full" },
         React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        React.createElement(Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
+        React.createElement(Flex, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 }, justify: isCompact ? 'end' : undefined }, children)));
 };
 const SectionSubtitle = props => {
     return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
@@ -2568,7 +2568,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
     const compactResponses = (React.createElement(React.Fragment, null,
         React.createElement(Button, { "aria-label": "response-codes", onPress: open, iconRight: React.createElement(Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
                 color: `var(--color-${codeToIntentVal(activeResponseId)})`,
-            } }, activeResponseId),
+            }, appearance: "minimal" }, activeResponseId),
         React.createElement(Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React.createElement(HStack, { justifyContent: "end" },
                 React.createElement(Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
             React.createElement(ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React.createElement(ListBoxItem, { key: response.id },
@@ -2578,7 +2578,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
                         React.createElement(Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
     const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        React.createElement(SectionTitle, { title: "Responses", isCompact: isCompact }, isCompact ? compactResponses : tabResponses),
         isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
             React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };

package/index.js

@@ -2355,10 +2355,10 @@ const CustomLinkHeading = React__namespace.memo(function LinkHeading(_a) {
     return React__namespace.createElement(mosaic.LinkHeading, Object.assign({ id: id }, props));
 });
 
-const SectionTitle = ({ title, id, size = 2, children }) => {
+const SectionTitle = ({ title, id, size = 2, isCompact = false, children }) => {
     return (React__namespace.createElement(mosaic.Flex, { w: "full" },
         React__namespace.createElement(mosaic.Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        React__namespace.createElement(mosaic.Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
+        React__namespace.createElement(mosaic.Flex, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 }, justify: isCompact ? 'end' : undefined }, children)));
 };
 const SectionSubtitle = props => {
     return React__namespace.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
@@ -2624,7 +2624,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
     const compactResponses = (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(mosaic.Button, { "aria-label": "response-codes", onPress: open, iconRight: React__namespace.createElement(mosaic.Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
                 color: `var(--color-${codeToIntentVal(activeResponseId)})`,
-            } }, activeResponseId),
+            }, appearance: "minimal" }, activeResponseId),
         React__namespace.createElement(mosaic.Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React__namespace.createElement(mosaic.HStack, { justifyContent: "end" },
                 React__namespace.createElement(mosaic.Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
             React__namespace.createElement(mosaic.ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React__namespace.createElement(mosaic.ListBoxItem, { key: response.id },
@@ -2634,7 +2634,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
                         React__namespace.createElement(mosaic.Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
     const tabResponses = (React__namespace.createElement(mosaic.TabList, { density: "compact" }, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8, as: mosaic.Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React__namespace.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        React__namespace.createElement(SectionTitle, { title: "Responses", isCompact: isCompact }, isCompact ? compactResponses : tabResponses),
         isCompact ? (React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React__namespace.createElement(mosaic.TabPanels, { p: 0 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
             React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };

package/index.mjs

@@ -2299,10 +2299,10 @@ const CustomLinkHeading = React.memo(function LinkHeading(_a) {
     return React.createElement(LinkHeading$1, Object.assign({ id: id }, props));
 });
 
-const SectionTitle = ({ title, id, size = 2, children }) => {
+const SectionTitle = ({ title, id, size = 2, isCompact = false, children }) => {
     return (React.createElement(Flex, { w: "full" },
         React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        React.createElement(Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
+        React.createElement(Flex, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 }, justify: isCompact ? 'end' : undefined }, children)));
 };
 const SectionSubtitle = props => {
     return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
@@ -2568,7 +2568,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
     const compactResponses = (React.createElement(React.Fragment, null,
         React.createElement(Button, { "aria-label": "response-codes", onPress: open, iconRight: React.createElement(Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
                 color: `var(--color-${codeToIntentVal(activeResponseId)})`,
-            } }, activeResponseId),
+            }, appearance: "minimal" }, activeResponseId),
         React.createElement(Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React.createElement(HStack, { justifyContent: "end" },
                 React.createElement(Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
             React.createElement(ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React.createElement(ListBoxItem, { key: response.id },
@@ -2578,7 +2578,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
                         React.createElement(Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
     const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        React.createElement(SectionTitle, { title: "Responses", isCompact: isCompact }, isCompact ? compactResponses : tabResponses),
         isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
             React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.13.2",
+  "version": "7.13.3",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",