@arclux/arc-ui 1.5.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "ARC UI — Lit Web Components implementing the Arclight design system.",
   "type": "module",
   "main": "src/index.js",

package/src/content/data-table.js

@@ -5,8 +5,8 @@ import './column.js';
 export class ArcDataTable extends LitElement {
   static properties = {
     rows:          { type: Array },
-    sortable:      { type: Boolean },
-    selectable:    { type: Boolean },
+    sortable:      { type: Boolean, reflect: true },
+    selectable:    { type: Boolean, reflect: true },
     sortColumn:    { type: String, attribute: 'sort-column' },
     sortDirection: { type: String, reflect: true, attribute: 'sort-direction' },
     _columns:      { state: true },

package/src/feedback/alert.js

@@ -7,7 +7,7 @@ export class ArcAlert extends LitElement {
   static properties = {
     variant:     { type: String, reflect: true },
     compact:     { type: Boolean, reflect: true },
-    dismissible: { type: Boolean },
+    dismissible: { type: Boolean, reflect: true },
     heading:     { type: String },
   };
 

package/src/feedback/modal.js

@@ -7,7 +7,7 @@ export class ArcModal extends LitElement {
     heading:    { type: String },
     size:       { type: String, reflect: true },
     fullscreen: { type: Boolean, reflect: true },
-    closable:   { type: Boolean },
+    closable:   { type: Boolean, reflect: true },
   };
 
   static styles = [

package/src/input/file-upload.js

@@ -4,7 +4,7 @@ import { tokenStyles } from '../shared-styles.js';
 export class ArcFileUpload extends LitElement {
   static properties = {
     accept:    { type: String },
-    multiple:  { type: Boolean },
+    multiple:  { type: Boolean, reflect: true },
     maxSize:   { type: Number, attribute: 'max-size' },
     disabled:  { type: Boolean, reflect: true },
     _files:    { state: true },

package/src/input/form.js

@@ -5,10 +5,10 @@ export class ArcForm extends LitElement {
   static properties = {
     action:       { type: String },
     method:       { type: String },
-    novalidate:   { type: Boolean },
+    novalidate:   { type: Boolean, reflect: true },
     loading:      { type: Boolean, reflect: true },
     disabled:     { type: Boolean, reflect: true },
-    errorSummary: { type: Boolean, attribute: 'error-summary' },
+    errorSummary: { type: Boolean, reflect: true, attribute: 'error-summary' },
     _errors:      { state: true },
   };
 

package/src/input/input.js

@@ -13,10 +13,10 @@ export class ArcInput extends LitElement {
     placeholder: { type: String },
     value:       { type: String },
     disabled:    { type: Boolean, reflect: true },
-    required:    { type: Boolean },
+    required:    { type: Boolean, reflect: true },
     error:       { type: String },
     size:        { type: String, reflect: true },
-    multiline:   { type: Boolean },
+    multiline:   { type: Boolean, reflect: true },
     rows:        { type: Number },
     _hasPrefix:  { state: true },
     _hasSuffix:  { state: true },

package/src/navigation/link.js

@@ -7,7 +7,7 @@ export class ArcLink extends LitElement {
     variant:   { type: String, reflect: true },
     underline: { type: String, reflect: true },
     active:    { type: Boolean, reflect: true },
-    external:  { type: Boolean },
+    external:  { type: Boolean, reflect: true },
   };
 
   static styles = [

package/src/navigation/scroll-to-top.js

@@ -7,7 +7,7 @@ import { tokenStyles } from '../shared-styles.js';
 export class ArcScrollToTop extends LitElement {
   static properties = {
     threshold: { type: Number },
-    smooth:    { type: Boolean },
+    smooth:    { type: Boolean, reflect: true },
     position:  { type: String, reflect: true },
     offset:    { type: String },
     _visible:  { state: true },

package/src/shared-styles.js

@@ -11,6 +11,12 @@ import { css } from 'lit';
  * as fallback defaults.
  */
 export const tokenStyles = css`
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
   :host {
     --font-body: 'Host Grotesk', system-ui, sans-serif;
     --font-accent: 'Tektur', system-ui, sans-serif;