codexly-ui 0.19.5 → 0.19.6

package/fesm2022/codexly-ui.mjs

@@ -1247,17 +1247,24 @@ class ClxButtonGroupComponent {
     _groupClass = computed(() => {
         const isVertical = this.orientation() === 'vertical';
         const dir = isVertical ? 'flex-col' : 'flex-row';
-        const gap = this.attached() ? 'gap-0' : 'gap-2';
-        return `inline-flex items-center ${dir} ${gap}`;
+        if (!this.attached())
+            return `inline-flex items-center ${dir} gap-2`;
+        // Attached = one segmented control: only the outer corners stay rounded and neighbouring
+        // borders overlap (no double line). The hovered/focused button is raised so its full border
+        // and focus ring are never hidden under the next one.
+        const joined = isVertical
+            ? '[&>*:not(:first-child)]:!rounded-t-none [&>*:not(:last-child)]:!rounded-b-none [&>*:not(:first-child)]:-mt-0.5'
+            : '[&>*:not(:first-child)]:!rounded-l-none [&>*:not(:last-child)]:!rounded-r-none [&>*:not(:first-child)]:-ml-0.5';
+        return `inline-flex items-stretch ${dir} gap-0 ${joined} [&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10`;
     }, ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxButtonGroupComponent, isStandalone: true, selector: "clx-button-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, ngImport: i0, template: `
-    @if (label()) {
-      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
-    }
-    <div [class]="_groupClass()">
-      <ng-content />
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxButtonGroupComponent, isStandalone: true, selector: "clx-button-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, ngImport: i0, template: `
+    @if (label()) {
+      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
+    }
+    <div [class]="_groupClass()">
+      <ng-content />
+    </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonGroupComponent, decorators: [{
@@ -1265,13 +1272,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{
                     selector: 'clx-button-group',
                     standalone: true,
-                    template: `
-    @if (label()) {
-      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
-    }
-    <div [class]="_groupClass()">
-      <ng-content />
-    </div>
+                    template: `
+    @if (label()) {
+      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
+    }
+    <div [class]="_groupClass()">
+      <ng-content />
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,