chore(docs): all examples fixed styles + remove encapsulation (DS-3107) (koobiq#429)

Author: sk8knut

.stylelintrc.js

@@ -29,6 +29,7 @@ const config = {
                 ignoreTypes: ['app']
             }
         ],
+        'selector-pseudo-element-no-unknown': [true, { ignorePseudoElements: ['ng-deep'] }],
         'font-family-no-missing-generic-family-keyword': [
             true,
             {

packages/components/core/styles/visual/_layout.scss

@@ -475,7 +475,7 @@
         '7xl': var(--kbq-size-7xl)
     );
 
-    $indents: 'padding', 'margin';
+    $indents: 'padding', 'margin', 'gap';
 
     @each $indent in $indents {
         @each $name, $value in $sizes {

packages/docs-examples/components/accordion/accordion-content/accordion-content-example.ts

@@ -3,13 +3,13 @@ import { KbqAccordionModule } from '@koobiq/components/accordion';
 import { KbqCheckboxModule } from '@koobiq/components/checkbox';
 
 /**
- * @title accordion-content
+ * @title Accordion content
  */
 @Component({
     standalone: true,
     selector: 'accordion-content-example',
     templateUrl: 'accordion-content-example.html',
-    styleUrl: 'accordion-content-example.css',
+    styleUrls: ['accordion-content-example.css'],
     imports: [KbqAccordionModule, KbqCheckboxModule]
 })
 export class AccordionContentExample {

packages/docs-examples/components/accordion/accordion-header/accordion-header-example.ts

@@ -5,7 +5,7 @@ import { KbqCheckboxModule } from '@koobiq/components/checkbox';
 import { KbqIcon, KbqIconButton } from '@koobiq/components/icon';
 
 /**
- * @title accordion-header
+ * @title Accordion header
  */
 @Component({
     standalone: true,

packages/docs-examples/components/accordion/accordion-in-panel/accordion-in-panel-example.ts

@@ -9,7 +9,7 @@ import {
 } from '@koobiq/components/sidepanel';
 
 /**
- * @title accordion-in-panel
+ * @title Accordion in panel
  */
 @Component({
     standalone: true,

packages/docs-examples/components/accordion/accordion-in-section/accordion-in-section-example.ts

@@ -2,13 +2,13 @@ import { Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 
 /**
- * @title accordion-in-section
+ * @title Accordion in section
  */
 @Component({
     standalone: true,
     selector: 'accordion-in-section-example',
     templateUrl: 'accordion-in-section-example.html',
-    styleUrl: 'accordion-in-section-example.css',
+    styleUrls: ['accordion-in-section-example.css'],
     imports: [KbqAccordionModule, KbqAccordionModule]
 })
 export class AccordionInSectionExample {}

packages/docs-examples/components/accordion/accordion-inactive-section/accordion-inactive-section-example.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 
 /**
- * @title accordion-inactive-section
+ * @title Accordion inactive section
  */
 @Component({
     standalone: true,

packages/docs-examples/components/accordion/accordion-overview/accordion-overview-example.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 
 /**
- * @title accordion-overview
+ * @title Accordion
  */
 @Component({
     standalone: true,

packages/docs-examples/components/accordion/accordion-sections/accordion-sections-example.ts

@@ -3,7 +3,7 @@ import { KbqAccordionModule } from '@koobiq/components/accordion';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 
 /**
- * @title accordion-sections
+ * @title Accordion sections
  */
 @Component({
     standalone: true,

packages/docs-examples/components/accordion/accordion-states/accordion-states-example.ts

@@ -3,7 +3,7 @@ import { KbqAccordionModule, KbqAccordionVariant } from '@koobiq/components/acco
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 
 /**
- * @title accordion-states
+ * @title Accordion states
  */
 @Component({
     standalone: true,