Added density and component styling helpers (#170)

Author: bheston

change/@adaptive-web-adaptive-ui-0f4590a7-06cd-4556-921f-54831283c1dd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added density and component styling helpers",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-web-components-1b25a35c-1ea0-4c2b-a03b-1514a5895a2a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added density and component styling helpers",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui/docs/api-report.md

@@ -221,6 +221,7 @@ export class DensityPaddingAndGapTokenGroup implements TokenGroup {
     readonly horizontalPaddingUnits: TypedDesignToken<number>;
     // (undocumented)
     readonly name: string;
+    get padding(): CSSDirective;
     readonly verticalGap: TypedCSSDesignToken<string>;
     readonly verticalGapUnits: TypedDesignToken<number>;
     readonly verticalPadding: TypedCSSDesignToken<string>;

packages/adaptive-ui/src/density/index.ts

@@ -1,3 +1,4 @@
+import { css, type CSSDirective } from "@microsoft/fast-element";
 import type { DesignTokenResolver } from "@microsoft/fast-foundation";
 import { DesignTokenType, TypedCSSDesignToken, TypedDesignToken } from "../adaptive-design-tokens.js";
 import { TokenGroup } from "../types.js";
@@ -181,4 +182,16 @@ export class DensityPaddingAndGapTokenGroup implements TokenGroup {
                 `calc((${resolve(this.verticalGapUnits)} + ${resolve(densityAdjustmentUnits)}) * ${resolve(designUnit)})`
         );
     }
+
+    /**
+     * Convenience accessor for vertical and horizontal padding, adjusted for border thickness.
+     *
+     * @remarks
+     * Convenience combination of `verticalPadding` and `horizontalPadding`.
+     *
+     * @public
+     */
+    public get padding(): CSSDirective {
+        return css.partial`${this.verticalPadding} ${this.horizontalPadding}`;
+    }
 }

packages/adaptive-web-components/docs/api-report.md

@@ -6,6 +6,7 @@
 
 import { ComponentAnatomy } from '@adaptive-web/adaptive-ui';
 import { ComposableStyles } from '@microsoft/fast-element';
+import { CSSDirective } from '@microsoft/fast-element';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTAccordion } from '@microsoft/fast-foundation';
@@ -271,6 +272,9 @@ export const badgeTemplate: (ds: DesignSystem) => ElementViewTemplate<FASTBadge>
 // @public
 export const badgeTemplateStyles: ElementStyles;
 
+// @public @deprecated (undocumented)
+export const baseHeightMultiplier: CSSDirective;
+
 // @public
 export const breadcrumbAestheticStyles: ElementStyles;
 
@@ -494,6 +498,9 @@ export const comboboxTemplate: (ds: DesignSystem) => ElementViewTemplate<FASTCom
 // @public
 export const comboboxTemplateStyles: ElementStyles;
 
+// @public
+export const componentBaseStyles = "\n    :host([hidden]) {\n        display: none !important;\n    }\n\n    :host {\n        box-sizing: border-box;\n    }\n\n    *, *:before, *:after {\n        box-sizing: inherit;\n    }\n";
+
 // Warning: (ae-forgotten-export) The symbol "ComposeOptions" needs to be exported by the entry point index.d.ts
 // Warning: (ae-incompatible-release-tags) The symbol "composeAccordion" is marked as @public, but its signature references "DesignSystem" which is marked as @beta
 //
@@ -834,6 +841,9 @@ export const dataGridTemplate: (ds: DesignSystem) => ElementViewTemplate<FASTDat
 // @public
 export const dataGridTemplateStyles: ElementStyles;
 
+// @public @deprecated (undocumented)
+export const density: CSSDirective;
+
 // @beta
 export class DesignSystem {
     // Warning: (ae-forgotten-export) The symbol "ElementStaticMap" needs to be exported by the entry point index.d.ts
@@ -972,6 +982,9 @@ export const flipperTemplateStyles: ElementStyles;
 // @public
 export const globalStyleModules: (anatomy?: ComponentAnatomy<any, any>) => StyleModules;
 
+// @public @deprecated (undocumented)
+export const heightNumber: CSSDirective;
+
 // @public
 export const horizontalScrollAestheticStyles: ElementStyles;
 
@@ -1556,6 +1569,9 @@ export const sliderTemplate: (ds: DesignSystem) => ElementViewTemplate<FASTSlide
 // @public
 export const sliderTemplateStyles: ElementStyles;
 
+// @public
+export const svgIconStyles = "\n    .stroked {\n        stroke: currentcolor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        stroke-width: 1px;\n    }\n";
+
 // @public
 export const switchAestheticStyles: ElementStyles;
 

packages/adaptive-web-components/src/index.ts

@@ -3,4 +3,5 @@ export {
 	DefaultDesignSystem as AdaptiveDesignSystem,
 } from "./design-system.js";
 export * from "./global.styles.modules.js";
-export * from "./components/index.js";
+export * from "./components/index.js";
+export * from "./styles/index.js";