@sebgroup/green-core 1.85.1 → 1.85.3

package/README.md

@@ -57,7 +57,7 @@ export class MyApp extends LitElement {
 
 Angular has support for using web components directly in the template. To enable it, you need to do the following:
 
-Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components. It is recommended to add this as locally as possible, only on the moduls/components where you need it, and not in the app module.
+Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components. It is recommended to add this as locally as possible, only on the modules/components where you need it, and not in the app module.
 
 You also need the `NggCoreWrapperModule` from `@sebgroup/green-angular`.
 
@@ -86,7 +86,7 @@ import * as ButtonStyles from '@sebgroup/green-core/components/button/button.tra
 ButtonStyles.register()
 ```
 
-Use the webcomponent in your template with the `*nggCoreElement` directive.
+Use the web component in your template with the `*nggCoreElement` directive.
 
 In your template:
 
@@ -94,11 +94,11 @@ In your template:
 <gds-button *nggCoreElement>Click me!</gds-button>
 ```
 
-The `*nggCoreElement` directive comes from the `NggCoreWrapperModule` you imported above. It has the same pupose as the custom html template tag mentioned in the Lit example above: It handles custom element scoping for you.
+The `*nggCoreElement` directive comes from the `NggCoreWrapperModule` you imported above. It has the same purpose as the custom html template tag mentioned in the Lit example above: It handles custom element scoping for you.
 
 ### Using React
 
-In most cases, we already exort React wrappers for these components from the `@sebgroup/green-react` package. In those cases you can just use those. But you can also easily create your own wrappers using `@lit/react`.
+In most cases, we already export React wrappers for these components from the `@sebgroup/green-react` package. In those cases you can just use those. But you can also easily create your own wrappers using `@lit/react`.
 
 Here is an example:
 

package/components/alert/alert.component.js

@@ -13,7 +13,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import { GdsElement } from "../../gds-element.js";
-import { gdsCustomElement, html } from "../../scoping.js";
+import { gdsCustomElement, getScopedTagName, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
@@ -172,7 +172,7 @@ config_get = function() {
 _renderIcon = new WeakSet();
 renderIcon_fn = function() {
   const icon = `gds-icon-${__privateGet(this, _config, config_get).icon}`;
-  return html`${staticHtml`<${unsafeStatic(icon)} class="icon" solid aria-hidden="true" size="24px"></${unsafeStatic(icon)}>`}`;
+  return html`${staticHtml`<${unsafeStatic(getScopedTagName(icon))} class="icon" solid aria-hidden="true" size="24px"></${unsafeStatic(getScopedTagName(icon))}>`}`;
 };
 _renderMessage = new WeakSet();
 renderMessage_fn = function() {

package/components/alert/alert.style.js

@@ -2,9 +2,10 @@ import "../../chunks/chunk.QTSIPXV3.js";
 import { css } from "lit";
 const alertStyles = css`
   :host {
+    box-sizing: border-box;
     display: block;
+    max-width: 100%;
     container-type: inline-size;
-    margin: 0.3rem;
   }
 
   #alert-message {
@@ -12,7 +13,7 @@ const alertStyles = css`
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-areas: var(--grid-areas);
-    width: 100%;
+    min-width: fit-content;
     position: relative;
     transition:
       opacity 0.3s ease-out,
@@ -47,7 +48,7 @@ const alertStyles = css`
   }
 
   /* Focus styles */
-  #alert-message:focus-within {
+  #alert-message:focus {
     outline: 2px solid var(--gds-focus-color, #000);
     outline-offset: 2px;
   }

package/components/index.d.ts

@@ -37,3 +37,5 @@ export * from './select';
 export * from './spinner';
 export * from './textarea';
 export * from './radio';
+export * from './alert';
+export * from './rich-text';

package/components/index.js

@@ -37,3 +37,5 @@ export * from "./select/index.js";
 export * from "./spinner/index.js";
 export * from "./textarea/index.js";
 export * from "./radio/index.js";
+export * from "./alert/index.js";
+export * from "./rich-text/index.js";

package/components/segmented-control/index.d.ts

@@ -1 +1,2 @@
 export * from './segmented-control';
+export * from './segment/segment';

package/components/segmented-control/index.js

@@ -1 +1,2 @@
 export * from "./segmented-control.js";
+export * from "./segment/segment.js";

package/generated/react/index.d.ts

@@ -1,7 +1,7 @@
 export * from './alert/index.js';
+export * from './badge/index.js';
 export * from './blur/index.js';
 export * from './breadcrumbs/index.js';
-export * from './badge/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
@@ -51,11 +51,6 @@ export * from './filter-chip/index.js';
 export * from './formatted-account/index.js';
 export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
-export * from './radio-group/index.js';
-export * from './segment/index.js';
-export * from './sensitive-account/index.js';
-export * from './sensitive-date/index.js';
-export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -343,3 +338,8 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
+export * from './radio-group/index.js';
+export * from './segment/index.js';
+export * from './sensitive-account/index.js';
+export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -1,7 +1,7 @@
 export * from "./alert/index.js";
+export * from "./badge/index.js";
 export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
-export * from "./badge/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
@@ -51,11 +51,6 @@ export * from "./filter-chip/index.js";
 export * from "./formatted-account/index.js";
 export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
-export * from "./radio-group/index.js";
-export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
-export * from "./sensitive-date/index.js";
-export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -343,3 +338,8 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
+export * from "./radio-group/index.js";
+export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
+export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";

package/generated/react/segmented-control/index.d.ts

@@ -3,7 +3,7 @@ import { GdsSegmentedControl as GdsSegmentedControlClass } from "../../../compon
 export declare const GdsSegmentedControl: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsSegmentedControlClass>>>) => import("react").ReactElement<Omit<{
     size?: "small" | "medium" | undefined;
     value?: any;
-    readonly segments?: import("../../../components/segmented-control/segment").GdsSegment<any>[] | undefined;
+    readonly segments?: import("../../..").GdsSegment<any>[] | undefined;
     intersectionObserver?: IntersectionObserver | null | undefined;
     connectedCallback?: (() => void) | undefined;
     render?: (() => any) | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.85.1",
+  "version": "1.85.3",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-d3e6fd";
+const VER_SUFFIX = "-ac25ce";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])