diff --git a/biome.json b/biome.json index c0e70e7dd8..5d8743dce5 100644 --- a/biome.json +++ b/biome.json @@ -1,5 +1,5 @@ { - "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json", + "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json", "vcs": { "enabled": true, "clientKind": "git", @@ -7,15 +7,13 @@ }, "files": { "ignoreUnknown": false, - "ignore": ["**/dist"] + "includes": ["**", "!**/dist"] }, "formatter": { "indentStyle": "space", "indentWidth": 2 }, - "organizeImports": { - "enabled": false - }, + "assist": { "actions": { "source": { "organizeImports": "off" } } }, "javascript": { "formatter": { "enabled": false @@ -44,5 +42,12 @@ "linter": { "enabled": true } + }, + "linter": { + "rules": { + "style": { + "noDescendingSpecificity": "off" + } + } } } diff --git a/packages/component/src/Activity/CodeBlockContent.module.css b/packages/component/src/Activity/CodeBlockContent.module.css index eb3da714c3..28735a05a2 100644 --- a/packages/component/src/Activity/CodeBlockContent.module.css +++ b/packages/component/src/Activity/CodeBlockContent.module.css @@ -1,6 +1,5 @@ :global(.webchat) .code-block-content { - border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) - var(--webchat__border-color--bubble); + border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) var(--webchat__border-color--bubble); border-radius: var(--webchat__border-radius--bubble); display: block; font-family: var(--webchat__font--primary); @@ -9,8 +8,11 @@ font-weight: 400; margin: 0 calc(var(--webchat__border-width--bubble) * -1) calc(var(--webchat__border-width--bubble) * -1); overflow: hidden; - overflow: clip; position: relative; + + @supports (overflow: clip) { + overflow: clip; + } } :global(.webchat) .code-block-content__header { diff --git a/packages/component/src/Activity/StackedLayout.module.css b/packages/component/src/Activity/StackedLayout.module.css index a0bafaf6bf..20690bdd2e 100644 --- a/packages/component/src/Activity/StackedLayout.module.css +++ b/packages/component/src/Activity/StackedLayout.module.css @@ -106,7 +106,7 @@ color: var(--webchat__color--subtle); display: grid; font-size: 1.1em; - grid-template-areas: "message-status-icon"; + grid-template-areas: 'message-status-icon'; margin-block: calc(var(--webchat__padding--regular) + 1px); margin-inline-start: var(--webchat__padding--regular); place-self: start; @@ -193,12 +193,12 @@ .stacked-layout__bubble { grid-template: 'content' 1fr / 1fr; } - + .stacked-layout__message-status { display: none; } - - &:has(.stacked-layout__message-status--final), + + &:has(.stacked-layout__message-status--final), &:has(.stacked-layout__message-status--incomplete) { .stacked-layout__bubble { grid-template: diff --git a/packages/component/src/Activity/private/MessageStatusLoader.module.css b/packages/component/src/Activity/private/MessageStatusLoader.module.css index 711717e136..092c3fdd34 100644 --- a/packages/component/src/Activity/private/MessageStatusLoader.module.css +++ b/packages/component/src/Activity/private/MessageStatusLoader.module.css @@ -8,7 +8,8 @@ } @keyframes message-status-loader__pulse { - 0%, 100% { + 0%, + 100% { opacity: 0.3; } 50% { diff --git a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css index 7ce7ccc673..caa970d43c 100644 --- a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css +++ b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css @@ -57,4 +57,3 @@ color: var(--webchat__color--subtle); line-height: 20px; } - diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css index 8ca37c206b..c367a410f6 100644 --- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css +++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css @@ -41,7 +41,9 @@ margin: calc(var(--webchat__padding--regular) / -2); overflow: clip; padding: calc(var(--webchat__padding--regular) / 2); - transition: visibility 0s, height 0.2s ease; + transition: + visibility 0s, + height 0.2s ease; visibility: hidden; } diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css index ed419a60f8..23badd540b 100644 --- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css +++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css @@ -2,4 +2,4 @@ .part-grouping-activity__activities { padding-block: 0 var(--webchat__padding--regular); } -} \ No newline at end of file +} diff --git a/packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.module.css b/packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.module.css index 6b50b600be..e78cfdf613 100644 --- a/packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.module.css +++ b/packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.module.css @@ -7,7 +7,9 @@ &.send-box-attachment-bar-item--as-list-item { border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12); + box-shadow: + 0px 2px 4px rgba(0, 0, 0, 0.14), + 0px 0px 2px rgba(0, 0, 0, 0.12); grid-template-areas: 'body auxiliary'; grid-template-columns: 1fr auto; padding: 2px; diff --git a/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css b/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css index e8de00c3e3..dcc1f179b2 100644 --- a/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css +++ b/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css @@ -4,7 +4,7 @@ display: grid; grid-template-areas: 'content'; outline: 0; - + --webchat__transcript--spacing: 10px; .transcript-focus-area__indicator, @@ -24,16 +24,21 @@ min-width: 0; } - &:focus .transcript-focus-area__content--focused > .transcript-focus-area__content-overlay .transcript-focus-area__indicator { + &:focus + .transcript-focus-area__content--focused + > .transcript-focus-area__content-overlay + .transcript-focus-area__indicator { border-color: var(--webchat__color--transcript-activity-visual-keyboard-indicator); border-style: var(--webchat__border-style--transcript-activity-visual-keyboard-indicator); border-width: var(--webchat__border-width--transcript-activity-visual-keyboard-indicator); - inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2) calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2); + inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2) + calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2); position: absolute; } &:focus-visible .transcript-focus-area__transcript-indicator, - .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + .transcript-focus-area__transcript-indicator { + .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + + .transcript-focus-area__transcript-indicator { border-color: var(--webchat__border-color--transcript-visual-keyboard-indicator); border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator); border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator); diff --git a/packages/component/src/decorator/private/BorderFlair.module.css b/packages/component/src/decorator/private/BorderFlair.module.css index 40b9cc8a5f..c5dbf53590 100644 --- a/packages/component/src/decorator/private/BorderFlair.module.css +++ b/packages/component/src/decorator/private/BorderFlair.module.css @@ -104,15 +104,17 @@ var(--webchat-decorator-borderFlair-animated-color2), var(--webchat-decorator-borderFlair-animated-color3) ); - --webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box, - linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box; + --webchat-decorator-borderFlair-borderMask: + linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box, linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) + border-box; animation: borderAnimation-angle 2000ms linear 0ms forwards, borderAnimation-color1 1200ms linear 0ms forwards, borderAnimation-color2 1200ms linear 200ms forwards, borderAnimation-color3 1200ms linear 400ms forwards; - background: var(--webchat-decorator-borderFlair-borderGradient) center center / + background: + var(--webchat-decorator-borderFlair-borderGradient) center center / var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize); border: var(--webchat-decorator-borderFlair-borderSize) solid transparent; border-radius: inherit; diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css index 80a201a57c..13efbd6b7a 100644 --- a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css +++ b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css @@ -31,7 +31,7 @@ outline-offset: -2px; } -:global(.webchat) .code-block-copy-button[aria-disabled="true"] { +:global(.webchat) .code-block-copy-button[aria-disabled='true'] { background: #f0f0f0; border: 1px solid #e0e0e0; color: #bdbdbd; diff --git a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css index c5fb8790d6..8847390332 100644 --- a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css +++ b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css @@ -56,7 +56,9 @@ padding-block: var(--webchat-spacingVerticalS); } /* Hide duplicate bot headers */ - &.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) .part-grouping-decorator__header { + &.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + .part-grouping-decorator__header { display: none; } /* #region Collapsible grouping */ @@ -152,7 +154,7 @@ display: flex; flex-flow: column nowrap; margin-inline: var(--webchat-spacingHorizontalMNudge); - + :global(.stacked-layout) { margin-inline: var(--webchat-spacingHorizontalNone); position: static; @@ -208,7 +210,6 @@ box-shadow: unset; } - /* Message bubble content */ :global(.stacked-layout .webchat__bubble .webchat__bubble__content) { background-color: var(--webchat__bubble--background-color); @@ -258,20 +259,20 @@ font-weight: var(--webchat-fontWeightRegular); margin-block: 0; margin-inline: var(--webchat__bubble--inline-padding); - + :global(.code-block-content__header) { padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL); } - + :global(.code-block-content__code-block) { padding-block: var(--webchat-spacingVerticalM); padding-inline: var(--webchat-spacingHorizontalL) var(--webchat-spacingHorizontalS); } - + :global(.code-block-copy-button) { --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1); --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3); - + margin-block-start: var(--webchat-spacingVerticalM); margin-inline-end: var(--webchat-spacingHorizontalL); position: absolute; @@ -294,25 +295,26 @@ outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2); } } - + :global(.collapsible-content__content) { margin-block: var(--webchat-spacingVerticalNone) var(--webchat__bubble--block-padding); } - + :global(.collapsible-content__content .stacked-layout__attachment-list) { gap: var(--webchat-spacingVerticalS); } - + :global(.collapsible-content__content .stacked-layout__attachment-row) { margin: 0; } - + :global(.collapsible-content__content .stacked-layout__attachment-row .webchat__text-content) { padding-block: 0; } } - - &.part-grouping-decorator--group :global(.stacked-layout .webchat__bubble .collapsible-content .collapsible-content__content) { + + &.part-grouping-decorator--group + :global(.stacked-layout .webchat__bubble .collapsible-content .collapsible-content__content) { margin-block: var(--webchat__bubble--block-padding) var(--webchat-spacingVerticalNone); } } @@ -326,10 +328,11 @@ padding-block: var(--webchat__bubble--block-padding); padding-inline: var(--webchat__bubble--inline-padding); position: relative; - transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid), + transition: + background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid), box-shadow var(--webchat-durationNormal) var(--webchat-curveDecelerateMid); } - + &.part-grouping-decorator--group:has(:global(.collapsible-grouping--open)) :global(.collapsible-grouping) { background-color: var(--webchat__bubble--background-color); box-shadow: var(--webchat__bubble--box-shadow); @@ -364,7 +367,8 @@ padding-block: var(--webchat-spacingVerticalS); } - &:where(:not(.part-grouping-decorator--group).part-grouping-decorator--from-bot) :global(.webchat__bubble .webchat__bubble__content) { + &:where(:not(.part-grouping-decorator--group).part-grouping-decorator--from-bot) + :global(.webchat__bubble .webchat__bubble__content) { background-color: var(--webchat__bubble--background-color); border-radius: var(--webchat__bubble--border-radius); box-shadow: var(--webchat__bubble--box-shadow); @@ -429,7 +433,7 @@ &.part-grouping-decorator--from-bot { margin-inline-end: var(--webchat-spacingHorizontalXXL); - + :global(.stacked-layout) { margin: 0; position: static; @@ -466,7 +470,8 @@ } } - &:not(.part-grouping-decorator--group) :global(.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content) { + &:not(.part-grouping-decorator--group) + :global(.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content) { anchor-name: --webchat-flair; max-width: unset; } diff --git a/packages/fluent-theme/src/components/sendBox/SendBox.module.css b/packages/fluent-theme/src/components/sendBox/SendBox.module.css index 22cb4f30f7..0236547b42 100644 --- a/packages/fluent-theme/src/components/sendBox/SendBox.module.css +++ b/packages/fluent-theme/src/components/sendBox/SendBox.module.css @@ -105,9 +105,10 @@ background-color: var(--webchat-colorNeutralBackground1); border-radius: var(--webchat-borderRadiusMedium); color: var(--webchat-colorNeutralForeground1); - transition: background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), color - var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), opacity var(--webchat-durationUltraFast) - var(--webchat-curveAccelerateMid); + transition: + background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), + color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), + opacity var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid); &:hover { background-color: var(--webchat-colorNeutralBackground1Hover); diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css index fea5d5f2be..1e1cc127a9 100644 --- a/packages/fluent-theme/src/components/theme/Theme.module.css +++ b/packages/fluent-theme/src/components/theme/Theme.module.css @@ -277,9 +277,8 @@ } } -:global(.webchat-fluent).theme.variant-copilot - :global(.transcript-focus-area) { - --webchat__transcript--spacing: var(--webchat-spacingVerticalM); +:global(.webchat-fluent).theme.variant-copilot :global(.transcript-focus-area) { + --webchat__transcript--spacing: var(--webchat-spacingVerticalM); } :global(.webchat-fluent).theme.variant-copilot @@ -289,7 +288,10 @@ /* Transcript focus indicator color when in focus-visible state */ :global(.webchat-fluent).theme - :global(.transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + .transcript-focus-area__transcript-indicator) { + :global( + .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + + .transcript-focus-area__transcript-indicator + ) { border-color: var(--webchat-colorStrokeFocus2); } @@ -334,7 +336,8 @@ } } - &:has(:global(.collapsible-grouping)) > :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) { + &:has(:global(.collapsible-grouping)) + > :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) { display: none; } @@ -376,7 +379,8 @@ } /* Transcript focused content copilot variant */ -:global(.webchat-fluent).theme.variant-copilot :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) { +:global(.webchat-fluent).theme.variant-copilot + :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) { :global(.collapsible-grouping)::after { inset: -2px -4px; }