Merge branch 'develop' into 7487-fix-drawer-slot-style-v3

Author: anicyne

.vscode/settings.json

@@ -37,5 +37,6 @@
 	"javascript.updateImportsOnFileMove.enabled": "always",
 	"typescript.preferences.importModuleSpecifier": "relative",
 	"typescript.updateImportsOnFileMove.enabled": "always",
-	"html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"]
+	"html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"],
+	"stylelint.validate": ["css", "scss", "sass", "less"]
 }

package.json

@@ -13,7 +13,6 @@
 		"prettier": "3.5.3",
 		"rimraf": "6.0.1",
 		"ts-node": "10.9.2",
-		"ts-prune": "0.10.3",
 		"typescript": "5.8.2"
 	},
 	"engines": {
@@ -27,9 +26,11 @@
 		"clean:pnpm": "pnpm -r exec rimraf pnpm-lock.yaml && rimraf pnpm-lock.yaml && pnpm clean",
 		"format": "pnpm -r format",
 		"lint": "pnpm -r lint",
+		"lint:eslint": "pnpm -r --no-bail lint:eslint",
+		"lint:stylelint": "pnpm -r --no-bail lint:stylelint",
+		"lint:tsc": "pnpm -r --no-bail lint:tsc",
 		"lint-staged": "lint-staged",
 		"unused": "pnpm -r unused",
-		"ts-prune": "git clean -f -d -X packages/adapters/**/src && pnpm -r exec npx ts-prune src -e",
 		"ncu:major": "ncu && pnpm -r exec ncu",
 		"ncu:minor": "ncu -t minor -u && pnpm -r exec ncu -t minor -u -x @types/react,@stencil/core,@unocss/*",
 		"ncu:patch": "ncu -t patch -u && pnpm -r exec ncu -t patch -u -x @types/react",

packages/.ts-prunerc.js

@@ -0,0 +1 @@
+src/assets/

packages/components/.stylelintignore

@@ -0,0 +1,42 @@
+{
+	"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+	"plugins": ["stylelint-scss"],
+	"rules": {
+		"block-no-empty": true,
+		"color-no-invalid-hex": true,
+		"custom-property-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$",
+		"declaration-block-no-duplicate-properties": true,
+		"declaration-property-value-no-unknown": null,
+		"no-duplicate-selectors": true,
+		"selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
+
+		"scss/load-no-partial-leading-underscore": true,
+		"scss/at-mixin-pattern": "^[a-z][a-z0-9-]*$",
+		"scss/dollar-variable-pattern": "^[a-z][a-z0-9-]*$",
+
+		"comment-empty-line-before": null,
+		"declaration-empty-line-before": null,
+		"selector-pseudo-element-colon-notation": null,
+		"color-function-notation": null,
+		"alpha-value-notation": null,
+		"value-keyword-case": null,
+		"property-no-vendor-prefix": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"media-feature-range-notation": null,
+		"declaration-block-no-redundant-longhand-properties": null,
+		"shorthand-property-no-redundant-values": null,
+		"comment-whitespace-inside": null,
+		"declaration-property-value-keyword-no-deprecated": null,
+		"declaration-block-no-duplicate-properties": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"font-family-no-missing-generic-family-keyword": null,
+		"keyframes-name-pattern": null,
+		"declaration-block-no-shorthand-property-overrides": null,
+		"color-hex-length": null,
+		"custom-property-empty-line-before": null,
+		"scss/at-mixin-pattern": null,
+		"scss/dollar-variable-pattern": null
+	}
+}

packages/components/.stylelintrc.json

@@ -60,7 +60,10 @@
 		"clear": "rimraf -g dist doc loader www ../adapters/angular/v15/src ../adapters/angular/v16/src ../adapters/angular/v17/src ../adapters/angular/v18/src ../adapters/hydrate/dist ../adapters/react/src ../adapters/solid/src ../adapters/vaadin/*.java ../adapters/vue/src",
 		"format": "prettier --check src",
 		"lighthouse": "lighthouse --chrome-flags=\"--headless\" --output-path lighthouse.report.html --preset=desktop --quiet",
-		"lint": "tsc --noemit && eslint src",
+		"lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+		"lint:eslint": "eslint src",
+		"lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+		"lint:tsc": "tsc --noemit",
 		"dev": "cross-env NODE_ENV=development stencil build --prod --watch",
 		"test": "pnpm test:unit",
 		"test:unit": "cross-env NODE_ENV=test stencil test --spec --json --outputFile dist/jest-test-results.json",
@@ -123,6 +126,10 @@
 		"pug": "3.0.3",
 		"rimraf": "6.0.1",
 		"stencil-awesome-test": "1.0.6",
+		"stylelint": "16.17.0",
+		"stylelint-config-recommended-scss": "14.1.0",
+		"stylelint-config-standard": "37.0.0",
+		"stylelint-scss": "6.11.1",
 		"terser": "5.39.0",
 		"twig": "1.17.1",
 		"typescript": "5.8.2"

packages/components/package.json

@@ -13,7 +13,6 @@ type States = Generic.Element.Members<RequiredStates, OptionalStates>;
 // @Component({
 //   tag: 'kol-all',
 // })
-// ts-prune-ignore-next
 export class KolAll implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
 	@State() public state: States = {};
 

packages/components/src/components/@else/all/component.tsx

@@ -10,7 +10,6 @@ import { h, Host, State } from '@stencil/core';
 // 	},
 // 	shadow: true,
 // })
-// ts-prune-ignore-next
 export class KolCounter {
 	@State() public state = {
 		_count: 0,

packages/components/src/components/@else/counter/component.tsx

@@ -0,0 +1,17 @@
+@use 'mixins' as *;
+
+@mixin kol-popover-button-styles {
+	@layer kol-component {
+		.kol-popover-button {
+			&__button {
+				display: inline-block; // critical for floating UI to work correctly
+			}
+
+			&__popover {
+				border: 1px solid #000;
+				margin: 0;
+				padding: 0;
+			}
+		}
+	}
+}

packages/components/src/components/@shared/_kol-popover-button-mixin.scss

@@ -0,0 +1,32 @@
+@use './mixins' as *;
+
+@mixin kol-table-settings-styles {
+	@layer kol-component {
+		.kol-table-settings {
+			background: #fff;
+			position: absolute;
+			right: 0;
+			top: 0;
+			z-index: 1;
+
+			&__columns-container {
+				margin-top: rem(16);
+				max-height: rem(200);
+				overflow: auto;
+			}
+
+			&__columns {
+				align-items: center;
+				display: grid;
+				gap: rem(8);
+				grid-auto-rows: min-content;
+				grid-template-columns: min-content 1fr rem(100) auto auto;
+				overflow: hidden;
+			}
+
+			&__column {
+				display: contents;
+			}
+		}
+	}
+}