Merge branch 'main' into ps/extension-refresh

libs/components/src/section/section.component.ts

@@ -1,14 +1,21 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
 @Component({
   selector: "bit-section",
   standalone: true,
   imports: [CommonModule],
   template: `
-    <section class="tw-mb-6 md:tw-mb-12">
+    <section
+      [ngClass]="{
+        'tw-mb-6 md:tw-mb-12': !disableMargin
+      }"
+    >
       <ng-content></ng-content>
     </section>
   `,
 })
-export class SectionComponent {}
+export class SectionComponent {
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+}

libs/components/src/section/section.mdx

@@ -13,6 +13,19 @@ import { SectionComponent, SectionHeaderComponent } from "@bitwarden/components"
 Sections are simple containers that apply a responsive bottom margin and utilize the semantic
 `section` HTML element.
 
+```html
+<bit-section>
+  <div>Lots of amazing content!</div>
+</bit-section>
+```
+
+To remove the bottom margin (for example, if the section is the last item on the page), you can pass
+the `disableMargin` input.
+
+```html
+<bit-section disableMargin></bit-section>
+```
+
 <Canvas>
   <Story of={stories.Default} />
 </Canvas>
@@ -24,7 +37,7 @@ Sections often contain a heading. Use `bit-section-header` inside of the `bit-se
 ```html
 <bit-section>
   <bit-section-header>
-    <h1 bitTypography="h1">I'm a section header</h2>
+    <h1 bitTypography="h1">I'm a section header</h1>
   </bit-section-header>
   <div>Section content here!</div>
 </bit-section>

libs/components/src/section/section.stories.ts

@@ -41,6 +41,12 @@ export const Default: Story = {
           </bit-section-header>
           <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
         </bit-section>
+        <bit-section disableMargin>
+          <bit-section-header>
+            <h2 bitTypography="h2">Baz</h2>
+          </bit-section-header>
+          <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+        </bit-section>
     `,
   }),
 };

libs/components/src/select/select.component.html

@@ -10,11 +10,11 @@
   appendTo="body"
 >
   <ng-template ng-option-tmp let-item="item">
-    <div class="tw-flex">
+    <div class="tw-flex" [title]="item.label">
       <div class="tw-mr-2 tw-flex-initial">
         <i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
       </div>
-      <div class="tw-flex-1">
+      <div class="tw-flex-1 tw-text-ellipsis tw-overflow-hidden">
         {{ item.label }}
       </div>
     </div>

libs/components/src/toggle-group/toggle.component.ts

@@ -17,7 +17,7 @@ export class ToggleComponent<TValue> {
   constructor(private groupComponent: ToggleGroupComponent<TValue>) {}
 
   @HostBinding("tabIndex") tabIndex = "-1";
-  @HostBinding("class") classList = ["tw-group"];
+  @HostBinding("class") classList = ["tw-group/toggle"];
 
   get name() {
     return this.groupComponent.name;
@@ -28,7 +28,7 @@ export class ToggleComponent<TValue> {
   }
 
   get inputClasses() {
-    return ["tw-peer", "tw-appearance-none", "tw-outline-none"];
+    return ["tw-peer/toggle-input", "tw-appearance-none", "tw-outline-none"];
   }
 
   get labelClasses() {
@@ -43,27 +43,27 @@ export class ToggleComponent<TValue> {
       "tw-border-r",
       "tw-border-l-0",
       "tw-cursor-pointer",
-      "group-first-of-type:tw-border-l",
-      "group-first-of-type:tw-rounded-l",
-      "group-last-of-type:tw-rounded-r",
+      "group-first-of-type/toggle:tw-border-l",
+      "group-first-of-type/toggle:tw-rounded-l",
+      "group-last-of-type/toggle:tw-rounded-r",
 
-      "peer-focus:tw-outline-none",
-      "peer-focus:tw-ring",
-      "peer-focus:tw-ring-offset-2",
-      "peer-focus:tw-ring-primary-600",
-      "peer-focus:tw-z-10",
-      "peer-focus:tw-bg-primary-600",
-      "peer-focus:tw-border-primary-600",
-      "peer-focus:!tw-text-contrast",
+      "peer-focus/toggle-input:tw-outline-none",
+      "peer-focus/toggle-input:tw-ring",
+      "peer-focus/toggle-input:tw-ring-offset-2",
+      "peer-focus/toggle-input:tw-ring-primary-600",
+      "peer-focus/toggle-input:tw-z-10",
+      "peer-focus/toggle-input:tw-bg-primary-600",
+      "peer-focus/toggle-input:tw-border-primary-600",
+      "peer-focus/toggle-input:!tw-text-contrast",
 
       "hover:tw-no-underline",
       "hover:tw-bg-text-muted",
       "hover:tw-border-text-muted",
       "hover:!tw-text-contrast",
 
-      "peer-checked:tw-bg-primary-600",
-      "peer-checked:tw-border-primary-600",
-      "peer-checked:!tw-text-contrast",
+      "peer-checked/toggle-input:tw-bg-primary-600",
+      "peer-checked/toggle-input:tw-border-primary-600",
+      "peer-checked/toggle-input:!tw-text-contrast",
       "tw-py-1.5",
       "tw-px-3",