@odx/foundation 1.0.0-beta.184 → 1.0.0-beta.185

package/README.md

@@ -76,6 +76,29 @@ import '@odx/foundation/css/native'; // JS
 @import '@odx/foundation/dist/cssNative.css';
 ```
 
+### Framework integration
+
+We currently do not provide any framework specific integration for the `@odx/foundation` package. However, you can easily integrate the web components into your framework of choice by following the standard practices for using web components in that framework.
+
+#### Angular Example
+
+```typescript
+import { Directive, input } from '@angular/core';
+
+@Directive({
+  selector: 'odx-title',
+  host: { '[attr.size]': 'size() || null' },
+})
+export class Title {
+  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>();
+}
+```
+
+#### React Example
+
+See <odx-link href="https://lit.dev/docs/frameworks/react/" target="_blank" strong>Lit documentation</odx-link> for more information on how to use web components in React.
+
+
 
 ### Documentation
 

package/dist/components/area-header/area-header.d.ts

@@ -19,7 +19,7 @@ export declare const AreaHeaderSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "XS" | "SM" | "MD" | "LG" | "XL">;
+}, "SM" | "MD" | "LG" | "XS" | "XL">;
 export declare class OdxAreaHeader extends CustomElement {
     #private;
     alignment: AreaHeaderAlignment;

package/dist/components/avatar/avatar.d.ts

@@ -18,7 +18,7 @@ export declare const AvatarSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "XS" | "SM" | "MD" | "LG" | "XL" | "XXL">;
+}, "SM" | "MD" | "LG" | "XS" | "XL" | "XXL">;
 export type AvatarVariant = ValuesOf<typeof AvatarVariant>;
 export declare const AvatarVariant: Pick<{
     readonly NEUTRAL: "neutral";

package/dist/components/logo/logo.d.ts

@@ -12,7 +12,7 @@ export declare const LogoSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "XS" | "SM" | "MD" | "LG" | "XL">;
+}, "SM" | "MD" | "LG" | "XS" | "XL">;
 export declare class OdxLogo extends CustomElement {
     size: LogoSize;
     compact: boolean;

package/dist/components/main.d.ts

@@ -6,7 +6,6 @@ export * from './action-group/action-group.js';
 export * from './anchor-navigation/index.js';
 export * from './area-footer/area-footer.js';
 export * from './area-header/area-header.js';
-export * from './auto-grid/auto-grid.js';
 export * from './avatar/avatar.js';
 export * from './badge/badge.js';
 export * from './breadcrumbs/breadcrumbs.js';
@@ -62,7 +61,6 @@ export * from './select/select.js';
 export * from './separator/separator.js';
 export * from './skeleton/skeleton.js';
 export * from './slider/index.js';
-export * from './spacer/spacer.js';
 export * from './spinbox/spinbox.js';
 export * from './status/status.js';
 export * from './switch/switch.js';

package/dist/components/text/text.d.ts

@@ -12,7 +12,7 @@ export declare const TextSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "XS" | "SM" | "MD" | "LG">;
+}, "SM" | "MD" | "LG" | "XS">;
 export type TextVariant = ValuesOf<typeof TextVariant>;
 export declare const TextVariant: Pick<{
     readonly NEUTRAL: "neutral";

package/dist/components/title/title.d.ts

@@ -11,10 +11,10 @@ export declare const TitleSize: {
     readonly 'DISPLAY-MD': "display-md";
     readonly 'DISPLAY-LG': "display-lg";
     readonly 'DISPLAY-XL': "display-xl";
-    readonly XS: "xs";
     readonly SM: "sm";
     readonly MD: "md";
     readonly LG: "lg";
+    readonly XS: "xs";
     readonly XL: "xl";
     readonly XXL: "xxl";
 };