agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "agnosticui-core",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.21",
+  "author": "AgnosticUI",
+  "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -449,18 +451,6 @@
       "types": "./dist/components/Image/vue/index.d.ts",
       "import": "./dist/components/Image/vue/index.js"
     },
-    "./table": {
-      "types": "./dist/components/Table/core/_Table.d.ts",
-      "import": "./dist/components/Table/core/_Table.js"
-    },
-    "./table/react": {
-      "types": "./dist/components/Table/react/ReactTable.d.ts",
-      "import": "./dist/components/Table/react/ReactTable.js"
-    },
-    "./table/vue": {
-      "types": "./dist/components/Table/vue/index.d.ts",
-      "import": "./dist/components/Table/vue/index.js"
-    },
     "./close-button": {
       "types": "./dist/components/shared/CloseButton/_CloseButton.d.ts",
       "import": "./dist/components/shared/CloseButton/_CloseButton.js"
@@ -708,6 +698,54 @@
     "./icon-button-fx/vue": {
       "types": "./dist/components/IconButtonFx/vue/index.d.ts",
       "import": "./dist/components/IconButtonFx/vue/index.js"
+    },
+    "./selection-card": {
+      "types": "./dist/components/SelectionCard/core/SelectionCard.d.ts",
+      "import": "./dist/components/SelectionCard/core/SelectionCard.js"
+    },
+    "./selection-card/react": {
+      "types": "./dist/components/SelectionCard/react/index.d.ts",
+      "import": "./dist/components/SelectionCard/react/index.js"
+    },
+    "./selection-card/vue": {
+      "types": "./dist/components/SelectionCard/vue/index.d.ts",
+      "import": "./dist/components/SelectionCard/vue/index.js"
+    },
+    "./selection-card-group": {
+      "types": "./dist/components/SelectionCardGroup/core/SelectionCardGroup.d.ts",
+      "import": "./dist/components/SelectionCardGroup/core/SelectionCardGroup.js"
+    },
+    "./selection-card-group/react": {
+      "types": "./dist/components/SelectionCardGroup/react/index.d.ts",
+      "import": "./dist/components/SelectionCardGroup/react/index.js"
+    },
+    "./selection-card-group/vue": {
+      "types": "./dist/components/SelectionCardGroup/vue/index.d.ts",
+      "import": "./dist/components/SelectionCardGroup/vue/index.js"
+    },
+    "./selection-button": {
+      "types": "./dist/components/SelectionButton/core/SelectionButton.d.ts",
+      "import": "./dist/components/SelectionButton/core/SelectionButton.js"
+    },
+    "./selection-button/react": {
+      "types": "./dist/components/SelectionButton/react/index.d.ts",
+      "import": "./dist/components/SelectionButton/react/index.js"
+    },
+    "./selection-button/vue": {
+      "types": "./dist/components/SelectionButton/vue/index.d.ts",
+      "import": "./dist/components/SelectionButton/vue/index.js"
+    },
+    "./selection-button-group": {
+      "types": "./dist/components/SelectionButtonGroup/core/SelectionButtonGroup.d.ts",
+      "import": "./dist/components/SelectionButtonGroup/core/SelectionButtonGroup.js"
+    },
+    "./selection-button-group/react": {
+      "types": "./dist/components/SelectionButtonGroup/react/index.d.ts",
+      "import": "./dist/components/SelectionButtonGroup/react/index.js"
+    },
+    "./selection-button-group/vue": {
+      "types": "./dist/components/SelectionButtonGroup/vue/index.d.ts",
+      "import": "./dist/components/SelectionButtonGroup/vue/index.js"
     }
   },
   "scripts": {

package/src/components/Alert/core/_Alert.ts

@@ -76,6 +76,22 @@ export class AgAlert extends LitElement implements AlertProps {
     .alert-bordered {
       border-color: var(--ag-border);
     }
+    .alert-bordered.alert-warning {
+      border-color: var(--ag-warning);
+    }
+    .alert-bordered.alert-info {
+      border-color: var(--ag-info);
+    }
+    .alert-bordered.alert-success {
+      border-color: var(--ag-success);
+    }
+    .alert-bordered.alert-danger,
+    .alert-bordered.alert-error {
+      border-color: var(--ag-danger);
+    }
+    .alert-bordered.alert-primary {
+      border-color: var(--ag-primary);
+    }
     .alert-border-left {
       border-inline-start-width: var(--ag-border-width-3);
       border-inline-start-color: var(--ag-border);
@@ -118,8 +134,11 @@ export class AgAlert extends LitElement implements AlertProps {
       border-inline-start-color: var(--ag-primary);
     }
     .alert-monochrome {
-      background-color: var(--ag-background-primary-inverted);
-      color: var(--ag-text-primary-inverted);
+      background-color: var(--ag-info-background);
+      color: var(--ag-text-primary);
+    }
+    .alert-bordered.alert-monochrome {
+      border-color: var(--ag-text-primary);
     }
     .alert-border-left.alert-monochrome {
       border-inline-start-color: var(--ag-text-primary);

package/src/components/Button/core/_Button.ts

@@ -42,6 +42,7 @@ export interface ButtonProps {
   ghost?: boolean;
   link?: boolean;
   grouped?: boolean;
+  fullWidth?: boolean;
   type?: 'button' | 'submit' | 'reset';
   disabled?: boolean;
   loading?: boolean;
@@ -77,10 +78,20 @@ export class AgButton extends LitElement implements ButtonProps {
       justify-content: center;
     }
 
+    /* Full-width variant */
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([full-width]) button {
+      width: 100%;
+    }
+
     button {
       /* Reset browser defaults */
       margin: 0;
-      border: none;
+      border: 1px solid transparent;
       background: var(--ag-background-tertiary);
 
       /* Inherit font styling from parent */
@@ -114,32 +125,32 @@ export class AgButton extends LitElement implements ButtonProps {
       background: var(--ag-neutral-500);
     }
 
-    /* Primary, success, warning, and danger all have white text and get
-      darker on hover */
+    /* Primary, success, warning, and danger use variant-specific foreground
+      tokens (--ag-{variant}-fg) and get darker on hover */
     :host([variant="primary"]) button {
       background: var(--ag-primary);
-      color: var(--ag-white);
+      color: var(--ag-primary-fg);
     }
     :host([variant="primary"]) button:hover {
       background: var(--ag-primary-dark);
     }
     :host([variant="success"]) button {
       background: var(--ag-success);
-      color: var(--ag-white);
+      color: var(--ag-success-fg);
     }
     :host([variant="success"]) button:hover {
       background: var(--ag-success-dark);
     }
     :host([variant="warning"]) button {
       background: var(--ag-warning);
-      color: var(--ag-neutral-900);
+      color: var(--ag-warning-fg);
     }
     :host([variant="warning"]) button:hover {
       background: var(--ag-warning-dark);
     }
     :host([variant="danger"]) button {
       background: var(--ag-danger);
-      color: var(--ag-white);
+      color: var(--ag-danger-fg);
     }
     :host([variant="danger"]) button:hover {
       background: var(--ag-danger-dark);
@@ -156,30 +167,45 @@ export class AgButton extends LitElement implements ButtonProps {
 
     /* Size variants */
     :host([size="x-sm"]) button {
+      height: var(--ag-space-8);
+      min-height: var(--ag-space-8);
       font-size: calc(var(--ag-font-size-base) - 0.375rem);
-      padding: var(--ag-space-1) var(--ag-space-2);
+      padding-inline: var(--ag-space-2);
+      padding-block: 0;
     }
 
     :host([size="sm"]) button {
+      height: var(--ag-space-9);
+      min-height: var(--ag-space-9);
       font-size: var(--ag-font-size-xs);
-      padding: var(--ag-space-2) var(--ag-space-3);
+      padding-inline: var(--ag-space-3);
+      padding-block: 0;
     }
 
     /* Default size (md) - applies when no size attribute or size="md" */
     button,
     :host([size="md"]) button {
+      height: var(--ag-space-10);
+      min-height: var(--ag-space-10);
       font-size: var(--ag-font-size-sm);
-      padding: var(--ag-space-3) var(--ag-space-4);
+      padding-inline: var(--ag-space-4);
+      padding-block: 0;
     }
 
     :host([size="lg"]) button {
+      height: var(--ag-space-12);
+      min-height: var(--ag-space-12);
       font-size: var(--ag-font-size-base);
-      padding: var(--ag-space-3) var(--ag-space-5);
+      padding-inline: var(--ag-space-5);
+      padding-block: 0;
     }
 
     :host([size="xl"]) button {
+      height: var(--ag-space-14);
+      min-height: var(--ag-space-14);
       font-size: var(--ag-font-size-md);
-      padding: var(--ag-space-3) var(--ag-space-6);
+      padding-inline: var(--ag-space-6);
+      padding-block: 0;
     }
 
     /* Shape variants */
@@ -222,7 +248,7 @@ export class AgButton extends LitElement implements ButtonProps {
     :host([ghost]) button,
     :host([link]) button {
       background: transparent;
-      border: none;
+      border-color: transparent;
       box-shadow: none;
     }
 
@@ -303,7 +329,7 @@ export class AgButton extends LitElement implements ButtonProps {
     /* Bordered variant - outline style */
     :host([bordered]) button {
       background: transparent;
-      border: 1px solid var(--ag-neutral-500);
+      border-color: var(--ag-neutral-500);
     }
 
     :host([bordered][variant="primary"]) button {
@@ -311,11 +337,11 @@ export class AgButton extends LitElement implements ButtonProps {
       border-color: var(--ag-primary-text);
     }
 
-    /* Bordered Buttons on Hover have a filled background with white text.  The
-      Default Bordered is an exception to this rule. */
+    /* Bordered Buttons on Hover have a filled background with variant-specific
+      foreground text.  The Default Bordered is an exception to this rule. */
     :host([bordered][variant="primary"]) button:hover {
       background: var(--ag-primary);
-      color: var(--ag-white);
+      color: var(--ag-primary-fg);
     }
 
     :host([bordered][variant="secondary"]) button,
@@ -330,7 +356,7 @@ export class AgButton extends LitElement implements ButtonProps {
     }
 
     :host([bordered][variant="success"]) button:hover {
-      color: var(--ag-white);
+      color: var(--ag-success-fg);
       background: var(--ag-success);
     }
 
@@ -341,7 +367,7 @@ export class AgButton extends LitElement implements ButtonProps {
 
     :host([bordered][variant="warning"]) button:hover {
       background: var(--ag-warning);
-      color: var(--ag-neutral-900);
+      color: var(--ag-warning-fg);
     }
 
     :host([bordered][variant="danger"]) button {
@@ -351,7 +377,7 @@ export class AgButton extends LitElement implements ButtonProps {
 
     :host([bordered][variant="danger"]) button:hover {
       background: var(--ag-danger);
-      color: var(--ag-white);
+      color: var(--ag-danger-fg);
     }
 
     :host([bordered][variant="monochrome"]) button {
@@ -372,11 +398,56 @@ export class AgButton extends LitElement implements ButtonProps {
       background: var(--ag-background-secondary);
     }
 
+    /* Disabled states - per-variant to maintain tonal identity */
+
+    /* Filled buttons - use lighter background tokens */
+    :host([variant="primary"]) button:disabled {
+      background: var(--ag-primary-background);
+      color: var(--ag-primary-text);
+    }
+
+    :host([variant="success"]) button:disabled {
+      background: var(--ag-success-background);
+      color: var(--ag-success-text);
+    }
+
+    :host([variant="warning"]) button:disabled {
+      background: var(--ag-warning-background);
+      color: var(--ag-warning-text);
+    }
+
+    :host([variant="danger"]) button:disabled {
+      background: var(--ag-danger-background);
+      color: var(--ag-danger-text);
+    }
+
+    :host([variant="secondary"]) button:disabled,
     button:disabled {
-      cursor: not-allowed;
       background: var(--ag-background-disabled);
     }
 
+    :host([variant="monochrome"]) button:disabled {
+      background: var(--ag-background-tertiary);
+    }
+
+    /* Bordered buttons - dim the border and text with opacity */
+    :host([bordered]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* Ghost and link buttons - dim with opacity */
+    :host([ghost]) button:disabled,
+    :host([link]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* All disabled buttons get not-allowed cursor */
+    button:disabled {
+      cursor: not-allowed;
+    }
+
     button:focus-visible,
     button:focus:not(:hover) {
       /* Softer focus ring using alpha channel */
@@ -428,6 +499,12 @@ export class AgButton extends LitElement implements ButtonProps {
   @property({ type: Boolean, reflect: true })
   declare grouped: boolean;
 
+  /**
+   * Full-width style - button takes 100% width of container
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'full-width' })
+  declare fullWidth: boolean;
+
   /**
    * Button type - determines behavior in forms
    */
@@ -486,6 +563,7 @@ export class AgButton extends LitElement implements ButtonProps {
     this.ghost = false;
     this.link = false;
     this.grouped = false;
+    this.fullWidth = false;
     this.type = 'button';
     this.ariaLabel = '';
     this.variant = '';
@@ -499,6 +577,18 @@ export class AgButton extends LitElement implements ButtonProps {
       this.onClick(event);
     }
 
+    // Shadow DOM buttons cannot natively submit/reset their owner form.
+    // Walk up the light DOM from the host element to find the enclosing form.
+    if (!this.disabled && !this.loading && !event.defaultPrevented) {
+      if (this.type === 'submit') {
+        const form = this.closest('form');
+        if (form) form.requestSubmit();
+      } else if (this.type === 'reset') {
+        const form = this.closest('form');
+        if (form) form.reset();
+      }
+    }
+
     if (this.toggle && !this.disabled && !this.loading && !event.defaultPrevented) {
       this.pressed = !this.pressed;
 

package/src/components/Button/vue/VueButton.vue

@@ -9,6 +9,7 @@
     .ghost="ghost"
     .link="link"
     .grouped="grouped"
+    .fullWidth="fullWidth"
     .ariaLabel="ariaLabel"
     :type="type"
     :variant="variant"
@@ -51,6 +52,7 @@ const props = withDefaults(defineProps<VueButtonProps>(), {
   ghost: false,
   link: false,
   grouped: false,
+  fullWidth: false,
   ariaLabel: "",
 });
 

package/src/components/Card/core/_Card.ts

@@ -1,24 +1,48 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { hasSlotContent } from '../../../utils/slot';
 
 export type CardVariant = 'success' | 'info' | 'error' | 'warning' | 'monochrome' | '';
 export type CardRounded = 'sm' | 'md' | 'lg' | '';
+export type CardMediaPosition = 'top' | 'bottom';
+
+/**
+ * Converter for rounded prop: accepts boolean (true -> 'md') or string values
+ * See https://lit.dev/docs/v1/components/properties/#conversion-converter
+ */
+const roundedConverter = {
+  fromAttribute(value: string | null): CardRounded {
+    if (value === '' || value === 'true') return 'md';
+    if (value === 'false' || value === null) return '';
+    return (value as CardRounded) || '';
+  },
+  toAttribute(value: CardRounded | boolean): string | null {
+    if (typeof value === 'boolean') return value ? 'md' : null;
+    return value || null;
+  }
+};
 
 export interface CardProps {
   stacked?: boolean;
   shadow?: boolean;
   animated?: boolean;
-  rounded?: CardRounded;
+  /** Border radius size. Use 'sm', 'md', 'lg' or true (defaults to 'md') */
+  rounded?: CardRounded | boolean;
   variant?: CardVariant;
+  /** Enables the media slot for edge-to-edge image/video rendering */
+  hasMedia?: boolean;
+  /** Whether media renders above or below the header/content/footer */
+  mediaPosition?: CardMediaPosition;
 }
 
 export class AgCard extends LitElement implements CardProps {
   @property({ type: Boolean, reflect: true }) declare stacked: boolean;
   @property({ type: Boolean, reflect: true }) declare shadow: boolean;
   @property({ type: Boolean, reflect: true }) declare animated: boolean;
-  @property({ type: String, reflect: true }) declare rounded: CardRounded;
+  @property({ converter: roundedConverter, reflect: true }) declare rounded: CardRounded;
   @property({ type: String, reflect: true }) declare variant: CardVariant;
+  @property({ type: Boolean, reflect: true, attribute: 'has-media' }) declare hasMedia: boolean;
+  @property({ type: String, reflect: true, attribute: 'media-position' }) declare mediaPosition: CardMediaPosition;
 
   private _hasHeaderSlotContent = false;
   private _hasFooterSlotContent = false;
@@ -30,6 +54,8 @@ export class AgCard extends LitElement implements CardProps {
     this.animated = false;
     this.rounded = '';
     this.variant = '';
+    this.hasMedia = false;
+    this.mediaPosition = 'top';
   }
 
   /**
@@ -192,6 +218,37 @@ export class AgCard extends LitElement implements CardProps {
       position: relative;
       z-index: 2;
     }
+
+    /* ── Media slot ─────────────────────────────────────────────────── */
+
+    /* Clip image corners to the card's border-radius for non-shadow cards */
+    :host([has-media]) {
+      overflow: hidden;
+    }
+
+    .card-media {
+      overflow: hidden; /* belt-and-suspenders for non-rounded cards */
+      line-height: 0;   /* collapses inline whitespace below slotted img */
+    }
+
+    /* Top media: clip only the card's top two corners */
+    :host([rounded="sm"]) .card-media--top  { border-radius: var(--ag-radius-sm) var(--ag-radius-sm) 0 0; }
+    :host([rounded="md"]) .card-media--top  { border-radius: var(--ag-radius-md) var(--ag-radius-md) 0 0; }
+    :host([rounded="lg"]) .card-media--top  { border-radius: var(--ag-radius-lg) var(--ag-radius-lg) 0 0; }
+
+    /* Bottom media: clip only the card's bottom two corners */
+    :host([rounded="sm"]) .card-media--bottom { border-radius: 0 0 var(--ag-radius-sm) var(--ag-radius-sm); }
+    :host([rounded="md"]) .card-media--bottom { border-radius: 0 0 var(--ag-radius-md) var(--ag-radius-md); }
+    :host([rounded="lg"]) .card-media--bottom { border-radius: 0 0 var(--ag-radius-lg) var(--ag-radius-lg); }
+
+    /* Sensible defaults for slotted media elements */
+    .card-media ::slotted(img),
+    .card-media ::slotted(video) {
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
   `;
 
   render() {
@@ -200,6 +257,11 @@ export class AgCard extends LitElement implements CardProps {
 
     return html`
       <div class="card-wrapper" part="ag-card-wrapper">
+        ${this.hasMedia && this.mediaPosition === 'top' ? html`
+          <div class="card-media card-media--top" part="ag-card-media">
+            <slot name="media"></slot>
+          </div>` : nothing}
+
         <div class="${headerClass}" part="ag-card-header">
           <slot name="header" @slotchange=${this._handleSlotChange}></slot>
         </div>
@@ -209,6 +271,11 @@ export class AgCard extends LitElement implements CardProps {
         <div class="${footerClass}" part="ag-card-footer">
           <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
         </div>
+
+        ${this.hasMedia && this.mediaPosition === 'bottom' ? html`
+          <div class="card-media card-media--bottom" part="ag-card-media">
+            <slot name="media"></slot>
+          </div>` : nothing}
       </div>
     `;
   }

package/src/components/Card/vue/VueCard.vue

@@ -6,8 +6,14 @@
     .animated="animated"
     :rounded="rounded"
     :variant="variant"
+    .hasMedia="hasMedia"
+    .mediaPosition="mediaPosition"
     v-bind="$attrs"
   >
+    <slot
+      name="media"
+      slot="media"
+    />
     <slot
       name="header"
       slot="header"
@@ -22,7 +28,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, type PropType } from "vue";
-import type { CardProps, CardVariant, CardRounded } from "../core/Card";
+import type { CardProps, CardVariant, CardRounded, CardMediaPosition } from "../core/Card";
 import "../core/Card"; // Registers the ag-card web component
 
 export default defineComponent({
@@ -41,15 +47,23 @@ export default defineComponent({
       default: false,
     },
     rounded: {
-      type: String as PropType<CardRounded>,
+      type: [String, Boolean] as PropType<CardRounded | boolean>,
       default: "" as CardRounded,
     },
     variant: {
       type: String as PropType<CardVariant>,
       default: "" as CardVariant,
     },
+    hasMedia: {
+      type: Boolean,
+      default: false,
+    },
+    mediaPosition: {
+      type: String as PropType<CardMediaPosition>,
+      default: "top" as CardMediaPosition,
+    },
   },
-  setup(props, { emit }) {
+  setup(props) {
     const agComponent = ref<(HTMLElement & CardProps) | null>(null);
 
     onMounted(async () => {
@@ -68,6 +82,8 @@ export default defineComponent({
       animated: props.animated,
       rounded: props.rounded,
       variant: props.variant,
+      hasMedia: props.hasMedia,
+      mediaPosition: props.mediaPosition,
     };
   },
 });