From c58b6128927db6501d89b6d0f8aba7a2138ab65f Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 29 May 2025 22:26:21 +0200
Subject: [PATCH 1/3] Add uui-divider component

---
 packages/uui-divider/README.md                | 31 ++++++++
 packages/uui-divider/lib/index.ts             |  1 +
 .../uui-divider/lib/uui-divider.element.ts    | 60 ++++++++++++++++
 packages/uui-divider/lib/uui-divider.story.ts | 70 +++++++++++++++++++
 packages/uui-divider/lib/uui-divider.test.ts  | 18 +++++
 packages/uui-divider/package.json             | 44 ++++++++++++
 packages/uui-divider/rollup.config.js         |  5 ++
 packages/uui-divider/tsconfig.json            | 17 +++++
 packages/uui/lib/index.ts                     |  2 +
 9 files changed, 248 insertions(+)
 create mode 100644 packages/uui-divider/README.md
 create mode 100644 packages/uui-divider/lib/index.ts
 create mode 100644 packages/uui-divider/lib/uui-divider.element.ts
 create mode 100644 packages/uui-divider/lib/uui-divider.story.ts
 create mode 100644 packages/uui-divider/lib/uui-divider.test.ts
 create mode 100644 packages/uui-divider/package.json
 create mode 100644 packages/uui-divider/rollup.config.js
 create mode 100644 packages/uui-divider/tsconfig.json

diff --git a/packages/uui-divider/README.md b/packages/uui-divider/README.md
new file mode 100644
index 000000000..982a79e31
--- /dev/null
+++ b/packages/uui-divider/README.md
@@ -0,0 +1,31 @@
+# uui-divider
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-divider?logoColor=%231B264F)
+
+Umbraco style divider component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-divider
+```
+
+Import the registration of `<uui-divider>` via:
+
+```javascript
+import '@umbraco-ui/uui-divider';
+```
+
+When looking to leverage the `UUIDividerElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIDividerElement } from '@umbraco-ui/uui-divider';
+```
+
+## Usage
+
+```html
+<uui-divider></uui-divider>
+```
diff --git a/packages/uui-divider/lib/index.ts b/packages/uui-divider/lib/index.ts
new file mode 100644
index 000000000..9065a61af
--- /dev/null
+++ b/packages/uui-divider/lib/index.ts
@@ -0,0 +1 @@
+export * from './uui-divider.element';
diff --git a/packages/uui-divider/lib/uui-divider.element.ts b/packages/uui-divider/lib/uui-divider.element.ts
new file mode 100644
index 000000000..57abec20c
--- /dev/null
+++ b/packages/uui-divider/lib/uui-divider.element.ts
@@ -0,0 +1,60 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+/**
+ * @element uui-divider
+ * @cssprop --uui-divider-width - Divider width
+ * @cssprop --uui-divider-color - Divider color
+ * @cssprop --uui-divider-spacing - Spacing around the divider
+ */
+@defineElement('uui-divider')
+export class UUIDividerElement extends LitElement {
+  /**
+   * Draws the divider in a vertical orientation.
+   * @type {boolean}
+   * @attr
+   * @default false
+   **/
+  @property({ type: Boolean, reflect: true }) vertical = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'separator');
+  }
+
+  updated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('vertical')) {
+      this.setAttribute(
+        'aria-orientation',
+        this.vertical ? 'vertical' : 'horizontal',
+      );
+    }
+  }
+
+  static styles = [
+    css`
+      :host(:not([vertical])) {
+        display: block;
+        border-top: var(--uui-divider-width, 1px) solid
+          var(--uui-divider-color, var(--uui-color-border));
+        margin: var(--uui-divider-spacing) 0;
+      }
+
+      :host([vertical]) {
+        display: inline-block;
+        height: 100%;
+        border-left: solid var(--uui-divider-border-width, 1px)
+          var(--uui-divider-color, var(--uui-color-border));
+        margin: 0 var(--uui-divider-spacing);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-divider': UUIDividerElement;
+  }
+}
diff --git a/packages/uui-divider/lib/uui-divider.story.ts b/packages/uui-divider/lib/uui-divider.story.ts
new file mode 100644
index 000000000..620500800
--- /dev/null
+++ b/packages/uui-divider/lib/uui-divider.story.ts
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import './uui-divider.element';
+import readme from '../README.md?raw';
+import type { UUIDividerElement } from './uui-divider.element';
+import { html } from 'lit';
+import { renderSlots, spread } from '../../../storyhelpers';
+
+const meta: Meta<UUIDividerElement> = {
+  id: 'uui-divider',
+  title: 'Displays/Divider',
+  component: 'uui-divider',
+  render: args =>
+    html`<uui-divider ${spread(args)}>${renderSlots(args)}</divider>`,
+  parameters: {
+    readme: { markdown: readme },
+    docs: {
+      source: {
+        code: `<uui-divider></uui-divider>`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<UUIDividerElement>;
+
+export const Overview: Story = {};
+
+export const Vertical: Story = {
+  args: {
+    vertical: true,
+  },
+  render: args => {
+    return html`
+      <div style="display: flex; align-items: center; height: 400px">
+        <uui-divider ${spread(args)}>${renderSlots(args)}></uui-divider>
+      </div>
+    `;
+  },
+};
+
+export const Color: Story = {
+  render: () => {
+    return html`
+      <uui-divider
+        style="--uui-divider-color: var(--uui-palette-space-cadet);"></uui-divider>
+    `;
+  },
+};
+
+export const Width: Story = {
+  render: () => {
+    return html`
+      <uui-divider style="--uui-divider-width: 4px;"></uui-divider>
+    `;
+  },
+};
+
+export const Spacing: Story = {
+  render: () => {
+    return html`
+      <div style="text-align: center;">
+        Above
+        <uui-divider style="--uui-divider-spacing: 1rem;"></uui-divider>
+        Below
+      </div>
+    `;
+  },
+};
diff --git a/packages/uui-divider/lib/uui-divider.test.ts b/packages/uui-divider/lib/uui-divider.test.ts
new file mode 100644
index 000000000..f3ffa0acd
--- /dev/null
+++ b/packages/uui-divider/lib/uui-divider.test.ts
@@ -0,0 +1,18 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { UUIDividerElement } from './uui-divider.element';
+
+describe('UUIDividerElement', () => {
+  let element: UUIDividerElement;
+
+  beforeEach(async () => {
+    element = await fixture(html` <uui-divider></uui-divider> `);
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UUIDividerElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+});
diff --git a/packages/uui-divider/package.json b/packages/uui-divider/package.json
new file mode 100644
index 000000000..7ca6447b3
--- /dev/null
+++ b/packages/uui-divider/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@umbraco-ui/uui-divider",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Divider"
+  ],
+  "description": "Umbraco UI divider component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-divider"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.14.0-rc.1"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-divider"
+}
diff --git a/packages/uui-divider/rollup.config.js b/packages/uui-divider/rollup.config.js
new file mode 100644
index 000000000..34524a90d
--- /dev/null
+++ b/packages/uui-divider/rollup.config.js
@@ -0,0 +1,5 @@
+import { UUIProdConfig } from '../rollup-package.config.mjs';
+
+export default UUIProdConfig({
+  entryPoints: ['index'],
+});
diff --git a/packages/uui-divider/tsconfig.json b/packages/uui-divider/tsconfig.json
new file mode 100644
index 000000000..40d176776
--- /dev/null
+++ b/packages/uui-divider/tsconfig.json
@@ -0,0 +1,17 @@
+// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
+
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./lib",
+    "composite": true
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.story.ts"],
+  "references": [
+    {
+      "path": "../uui-base"
+    }
+  ]
+}
diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts
index aa3f630c3..de74e2db0 100644
--- a/packages/uui/lib/index.ts
+++ b/packages/uui/lib/index.ts
@@ -81,3 +81,5 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib';
 export * from '@umbraco-ui/uui-toast-notification/lib';
 export * from '@umbraco-ui/uui-toggle/lib';
 export * from '@umbraco-ui/uui-visually-hidden/lib';
+
+export * from '@umbraco-ui/uui-divider/lib/index.js';

From 71b6acb239144b864b3704c4a432e68ce7373bba Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 29 May 2025 22:31:46 +0200
Subject: [PATCH 2/3] Update CSS prop

---
 packages/uui-divider/lib/uui-divider.element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-divider/lib/uui-divider.element.ts b/packages/uui-divider/lib/uui-divider.element.ts
index 57abec20c..36ea26f7b 100644
--- a/packages/uui-divider/lib/uui-divider.element.ts
+++ b/packages/uui-divider/lib/uui-divider.element.ts
@@ -45,7 +45,7 @@ export class UUIDividerElement extends LitElement {
       :host([vertical]) {
         display: inline-block;
         height: 100%;
-        border-left: solid var(--uui-divider-border-width, 1px)
+        border-left: solid var(--uui-divider-width, 1px)
           var(--uui-divider-color, var(--uui-color-border));
         margin: 0 var(--uui-divider-spacing);
       }

From 81a8f98e9664b1fa6cc41e4192ec5ec528bea69b Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 29 May 2025 22:44:42 +0200
Subject: [PATCH 3/3] Update packages/uui-divider/lib/uui-divider.story.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/uui-divider/lib/uui-divider.story.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-divider/lib/uui-divider.story.ts b/packages/uui-divider/lib/uui-divider.story.ts
index 620500800..b88e46627 100644
--- a/packages/uui-divider/lib/uui-divider.story.ts
+++ b/packages/uui-divider/lib/uui-divider.story.ts
@@ -11,7 +11,7 @@ const meta: Meta<UUIDividerElement> = {
   title: 'Displays/Divider',
   component: 'uui-divider',
   render: args =>
-    html`<uui-divider ${spread(args)}>${renderSlots(args)}</divider>`,
+    html`<uui-divider ${spread(args)}>${renderSlots(args)}</uui-divider>`,
   parameters: {
     readme: { markdown: readme },
     docs: {