@mezzanine-ui/core 1.0.2 → 1.0.3-rc.0

package/alert-banner/alertBanner.d.ts

@@ -8,9 +8,9 @@ export type AlertBannerSeverity = 'info' | 'warning' | 'error';
 export declare const alertBannerPrefix = "mzn-alert-banner";
 export declare const alertBannerGroupPrefix = "mzn-alert-banner-group";
 export declare const alertBannerIcons: {
-    readonly info: import("@mezzanine-ui/icons").IconDefinition;
-    readonly warning: import("@mezzanine-ui/icons").IconDefinition;
-    readonly error: import("@mezzanine-ui/icons").IconDefinition;
+    readonly info: any;
+    readonly warning: any;
+    readonly error: any;
 };
 export declare const alertBannerClasses: {
     readonly host: "mzn-alert-banner";

package/autocomplete/_autocomplete-styles.scss

@@ -30,9 +30,11 @@
       pointer-events: none;
     }
 
-    // Inside trigger uses a plain Input instead of SelectTrigger in some cases.
-    // Hide it consistently so the host collapses when dropdown is closed.
-    .#{input.$prefix} {
+    // Inside trigger uses a plain Input (React) or an [mznTextField] div
+    // (Angular) instead of SelectTrigger in some cases. Hide both so the
+    // host collapses when the dropdown is closed, regardless of platform.
+    .#{input.$prefix},
+    .#{text-field.$prefix} {
       opacity: 0;
       pointer-events: none;
     }

package/calendarMethodsDayjs/index.js

@@ -347,6 +347,18 @@ const CalendarMethodsDayjs = {
             const halfYear = Math.ceil(quarter / 2);
             return result.format(format.replace('n', halfYear.toString()));
         }
+        // Handle week-year formats (moment-compatible tokens not native to dayjs)
+        // gggg = locale week year, ww = locale week number
+        // GGGG = ISO week year, WW = ISO week number
+        if (format.includes('gggg') || format.includes('GGGG')) {
+            const isMon = isMondayFirst(locale);
+            const weekYear = isMon ? result.isoWeekYear() : result.year();
+            const weekNum = isMon ? result.isoWeek() : result.week();
+            return format
+                .replace(/gggg|GGGG/, String(weekYear))
+                .replace(/\[([^\]]*)\]/g, '$1')
+                .replace(/ww|WW/, String(weekNum).padStart(2, '0'));
+        }
         return result.format(format);
     },
     formatToISOString: (date) => dayjs(date).toISOString(),

package/inline-message/inlineMessage.d.ts

@@ -1,8 +1,8 @@
 export declare const inlineMessagePrefix = "mzn-inline-message";
 export declare const inlineMessageIcons: {
-    readonly info: import("@mezzanine-ui/icons").IconDefinition;
-    readonly warning: import("@mezzanine-ui/icons").IconDefinition;
-    readonly error: import("@mezzanine-ui/icons").IconDefinition;
+    readonly info: any;
+    readonly warning: any;
+    readonly error: any;
 };
 export type InlineMessageSeverity = keyof typeof inlineMessageIcons;
 export declare const inlineMessageClasses: {

package/message/message.d.ts

@@ -2,10 +2,10 @@ import { SeverityWithInfo } from '@mezzanine-ui/system/severity';
 export type MessageSeverity = SeverityWithInfo | 'loading';
 export declare const messagePrefix = "mzn-message";
 export declare const messageIcons: {
-    readonly success: import("@mezzanine-ui/icons").IconDefinition;
-    readonly warning: import("@mezzanine-ui/icons").IconDefinition;
-    readonly error: import("@mezzanine-ui/icons").IconDefinition;
-    readonly info: import("@mezzanine-ui/icons").IconDefinition;
+    readonly success: any;
+    readonly warning: any;
+    readonly error: any;
+    readonly info: any;
 };
 export declare const messageClasses: {
     readonly host: "mzn-message";

package/modal/modal.d.ts

@@ -28,11 +28,11 @@ export type ModalSize = 'tight' | 'narrow' | 'regular' | 'wide';
 export type ModalType = 'extended' | 'extendedSplit' | 'standard' | 'mediaPreview' | 'verification';
 export declare const modalPrefix = "mzn-modal";
 export declare const modalStatusTypeIcons: {
-    readonly success: import("@mezzanine-ui/icons").IconDefinition;
-    readonly warning: import("@mezzanine-ui/icons").IconDefinition;
-    readonly error: import("@mezzanine-ui/icons").IconDefinition;
-    readonly info: import("@mezzanine-ui/icons").IconDefinition;
-    readonly email: import("@mezzanine-ui/icons").IconDefinition;
+    readonly success: any;
+    readonly warning: any;
+    readonly error: any;
+    readonly info: any;
+    readonly email: any;
     readonly delete: import("@mezzanine-ui/icons").IconDefinition;
 };
 export declare const modalClasses: {

package/notification-center/_notification-center-styles.scss

@@ -243,6 +243,11 @@ $drawer-container-config: (
 
   &__dot-icon-button {
     padding: spacing.semantic-variable(padding, vertical, tight);
+    // 讓 dot 按鈕對齊區塊右上（而非預設 align-items: stretch 造成的垂直置中）。
+    // React 該按鈕外層還包一層 `<div class="mzn-dropdown">`，wrapper 是 flex item
+    // 而 button 不是；Angular 的 `<button>` 直接當 flex item 會被拉成全高並把 icon
+    // 置中，因此以 align-self: flex-start 補齊 — React 側 button 非 flex item，no-op。
+    align-self: flex-start;
   }
 
   &__body-content {

package/notification-center/notificationCenter.d.ts

@@ -9,10 +9,10 @@ export type NotificationType = 'notification' | 'drawer';
 export declare const notificationPrefix = "mzn-notification-center";
 export declare const notificationRootPrefix = "mzn-notification-center-root";
 export declare const notificationIcons: {
-    success: import("@mezzanine-ui/icons").IconDefinition;
-    warning: import("@mezzanine-ui/icons").IconDefinition;
-    error: import("@mezzanine-ui/icons").IconDefinition;
-    info: import("@mezzanine-ui/icons").IconDefinition;
+    success: any;
+    warning: any;
+    error: any;
+    info: any;
 };
 export declare const notificationClasses: {
     readonly notificationsContainer: "mzn-notification-center__notifications-container";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "1.0.2",
+  "version": "1.0.3-rc.0",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/select/_select-styles.scss

@@ -128,6 +128,8 @@
     &:focus-within:not(.#{text-field.$prefix}--disabled):not(.#{text-field.$prefix}--readonly) {
       .#{text-field.$prefix}__clear-icon {
         display: inline-flex;
+        opacity: 1;
+        pointer-events: auto;
       }
 
       .#{text-field.$prefix}__suffix {

package/select/select.d.ts

@@ -28,6 +28,8 @@ export declare const selectClasses: {
     readonly triggerReadOnly: "mzn-select-trigger--readonly";
     readonly triggerDisabled: "mzn-select-trigger--disabled";
     readonly triggerInput: "mzn-select-trigger__input";
+    readonly triggerPrefix: "mzn-select-trigger__prefix";
+    readonly triggerClearIcon: "mzn-select-trigger__clear-icon";
     readonly triggerTagsInputWrapper: "mzn-select-trigger__tags-input-wrapper";
     readonly triggerTagsInputWrapperEllipsis: "mzn-select-trigger__tags-input-wrapper--ellipsis";
     readonly triggerTagsInputWrapperWrap: "mzn-select-trigger__tags-input-wrapper--wrap";

package/select/select.js

@@ -14,6 +14,8 @@ const selectClasses = {
     triggerReadOnly: `${selectTriggerPrefix}--readonly`,
     triggerDisabled: `${selectTriggerPrefix}--disabled`,
     triggerInput: `${selectTriggerPrefix}__input`,
+    triggerPrefix: `${selectTriggerPrefix}__prefix`,
+    triggerClearIcon: `${selectTriggerPrefix}__clear-icon`,
     triggerTagsInputWrapper: `${selectTriggerPrefix}__tags-input-wrapper`,
     triggerTagsInputWrapperEllipsis: `${selectTriggerPrefix}__tags-input-wrapper--ellipsis`,
     triggerTagsInputWrapperWrap: `${selectTriggerPrefix}__tags-input-wrapper--wrap`,

package/table/_table-styles.scss

@@ -673,3 +673,35 @@ $z-index-config: (
     background-color: palette.semantic-variable(separator, neutral);
   }
 }
+
+/* ------------------------------------------------------------------ *
+ * Angular CDK drag-drop integration                                   *
+ *                                                                     *
+ * Angular `MznTable` wires CDK's `cdkDropList` + `cdkDrag` on         *
+ * `<tbody>`/`<tr>`. CDK ships no CSS — it only applies marker         *
+ * classes (`.cdk-drag-placeholder`, `.cdk-drag-animating`,            *
+ * `.cdk-drop-list-dragging`) and expects consumers to style them to   *
+ * match `@hello-pangea/dnd`'s behaviour on the React side: the        *
+ * source row becomes an invisible space-reserving placeholder while   *
+ * sibling rows slide to reveal the drop target.                       *
+ *                                                                     *
+ * Rules are scoped inside `.#{$prefix}` so they only affect           *
+ * Mezzanine tables. React never emits these classes, so the block    *
+ * is a no-op there.                                                   *
+ * ------------------------------------------------------------------ */
+.#{$prefix} {
+  /* Source row while dragging — hide so only the preview is visible. */
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  /* Sibling rows transition smoothly as the preview passes by. */
+  &__body.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
+    transition: transition.standard(transform, moderate);
+  }
+
+  /* Ease the drop-settle animation when the user releases. */
+  .cdk-drag-animating {
+    transition: transition.standard(transform, moderate);
+  }
+}

package/typography/typography.d.ts

@@ -19,11 +19,11 @@ export interface TypographyCssVars {
 }
 export declare const typographyClasses: {
     readonly type: (type: TypographySemanticType) => string;
-    readonly align: "mzn-typography--align";
-    readonly color: "mzn-typography--color";
-    readonly display: "mzn-typography--display";
-    readonly ellipsis: "mzn-typography--ellipsis";
-    readonly noWrap: "mzn-typography--nowrap";
+    readonly align: `${any}--align`;
+    readonly color: `${any}--color`;
+    readonly display: `${any}--display`;
+    readonly ellipsis: `${any}--ellipsis`;
+    readonly noWrap: `${any}--nowrap`;
 };
 export declare function toTypographyCssVars(variables: TypographyCssVars): CssVarInterpolations;
 export {};