@daoyi/nmtl-ui 2.0.1-beta.130 → 2.0.1-beta.133

package/lib/components/ContactModal.js

@@ -1,9 +1,13 @@
-export { C as default } from './ContactModal-7e5b14e8.js';
+export { C as default } from './ContactModal-159de99c.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
+import './defaultTheme-c5dd0f64.js';
+import '@material-ui/styles';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
 import 'axios';
 import './Modal-e04532fa.js';
 import './index-b76a85f4.js';
@@ -14,11 +18,7 @@ import './style-inject.es-1f59c1d0.js';
 import './Spin-8f87eadc.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './defaultTheme-ed7746fe.js';
-import '@material-ui/styles';
-import './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
-import './Select-cb3e1ba1.js';
+import './Select-89841c71.js';
 import './Empty-c6a44967.js';
-import './createSvgIcon-e3803ee1.js';
+import './createSvgIcon-dc603596.js';
 import 'react-dom';

package/lib/components/Drawer-a5be9257.js

@@ -0,0 +1,245 @@
+import { _ as _extends, a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
+import { DehazeRounded, CloseRounded } from '@material-ui/icons';
+import { S as Select } from './Select-89841c71.js';
+import { S as SegmentedControl } from './SegmentedControl-81f63afc.js';
+import { useRouteMatch, NavLink } from 'react-router-dom';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var defaultSupportLanguage = [
+// { value: 'en', label: 'English' },
+{
+  value: 'zh-tw',
+  label: '繁體中文'
+}
+// { value: 'zh-cn', label: '簡體中文' },
+];
+
+/* [檢查-語系]本系統是否支援該語系 並回傳語系 */
+var checkLanguageSupport = function checkLanguageSupport(_ref) {
+  var language = _ref.language,
+    supportLanguages = _ref.supportLanguages;
+  var isSupport = supportLanguages.some(function (_ref2) {
+    var value = _ref2.value;
+    return value === language;
+  });
+  return isSupport ? language : supportLanguages[0].value;
+};
+
+/* 抽屜內的主選單：與桌機頁首一致用真連結（可長按另開、讀屏唸「連結」）。
+ * 保留 MUI List／ListItem／ListItemText 結構：各站以主題或 app.scss 覆蓋了這些 class
+ * （ada 的 MuiList 深底白字、tahl 的 hover 色），換成自訂標記會讓那些樣式失效。
+ * - ListItem 以 NavLink 渲染成 <a href>；目前所在頁由 NavLink 自動加 aria-current="page"，
+ *   並掛上 Mui-selected（沿用各站既有的選中底色）與 drawer__link--active（左側色條＋粗體）
+ * - ButtonBase 對非 <button> 元件會補 role="button"，須明確清掉，否則讀屏仍唸成按鈕 */
+const DrawerList = _ref => {
+  let {
+    drawerList,
+    setOpen
+  } = _ref;
+  const {
+    url
+  } = useRouteMatch();
+  return /*#__PURE__*/React__default.createElement("nav", null, /*#__PURE__*/React__default.createElement(List, {
+    className: "drawer__list"
+  }, Array.isArray(drawerList) && drawerList.map((_ref2, index) => {
+    let {
+      name,
+      icon,
+      path = ''
+    } = _ref2;
+    const internalProps = {
+      component: NavLink,
+      to: `${url}${path}`,
+      activeClassName: 'Mui-selected drawer__link--active'
+    };
+    /* 外部連結比照桌機頁首另開新視窗，並預先提示（WCAG 3.2.2） */
+    const externalProps = {
+      component: 'a',
+      href: path,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      'aria-label': `${name}${getIntl().formatMessage({
+        id: 'aria.newWindow'
+      })}`
+    };
+    const linkProps = path.indexOf('http') > -1 ? externalProps : internalProps;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: index.toString()
+    }, /*#__PURE__*/React__default.createElement(ListItem, _extends({
+      button: true,
+      className: "drawer__link",
+      role: undefined,
+      onClick: () => setOpen(false)
+    }, linkProps), icon && /*#__PURE__*/React__default.createElement(ListItemIcon, {
+      style: {
+        marginRight: 24
+      }
+    }, icon), /*#__PURE__*/React__default.createElement(ListItemText, {
+      primary: name
+    })));
+  })));
+};
+DrawerList.defaultProps = {};
+DrawerList.propTypes = {
+  drawerList: PropTypes.arrayOf(PropTypes.any).isRequired,
+  setOpen: PropTypes.func.isRequired
+};
+
+var css_248z = "@charset \"UTF-8\";\n/* 抽屜內容統一靠左對齊在同一條線上（選單文字、工具區標籤都從 1.5rem 起排） */\n.drawer {\n  /* 兩層 class 提高權重，蓋過 MUI 主題注入的 .MuiIconButton-root */\n  /* ListItem（渲染成 <a>）。hover／選中底色沿用 MUI 與各站主題的 MuiListItem、Mui-selected 設定 */\n  /* 目前所在頁：左側色條＋粗體，不只靠底色（WCAG 1.4.1）。\n     色條畫在文字元素上取 currentColor：各站常以 !important 改抽屜文字色（ada 白字、tahl 藍綠），\n     色條才會與文字同色；ListItem 本身是 position:relative，色條貼齊整列左緣 */\n  /* 語系超過 3 種時退回下拉：撐滿工具區寬度 */\n}\n.drawer__icon {\n  display: none !important;\n}\n.drawer__paper {\n  width: 20rem;\n  max-width: 90vw;\n  /* 開啟時 MUI 把焦點放在紙面本身（tabindex=-1 的容器，非操作元件），不畫焦點框；\n     須 !important 才蓋得過各站 a11y.scss 的全域 :focus-visible */\n}\n.drawer__paper:focus {\n  outline: none !important;\n}\n.drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 0.75rem 0.5rem 0.75rem 1.5rem;\n}\n.drawer__header-brand {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.drawer__header-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n}\n.drawer__header .drawer__close {\n  flex-shrink: 0;\n  /* 觸控目標 48px（WCAG 2.5.5）：共用主題把 IconButton padding 改成 8（只剩 40px），\n     部分子站手機版又把根字級縮到 70%，故用 px 保底 */\n  min-width: 48px;\n  min-height: 48px;\n  margin-left: auto;\n  /* 深色主題（palette.type=dark，如 ada、tahl）的 IconButton 預設白色，在淺色抽屜上看不見 → 沿用抽屜文字色 */\n  color: inherit;\n}\n.drawer__header .drawer__close.Mui-focusVisible {\n  outline: 2px solid currentColor;\n}\n.drawer__list > li {\n  list-style: none;\n}\n.drawer__list .drawer__link {\n  /* 觸控目標 48px（WCAG 2.5.5） */\n  min-height: 3rem;\n  /* 文字與工具區標籤對齊 1.5rem（蓋過 MuiListItem-gutters 的 16px） */\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n  /* 連結撐滿抽屜寬度，紙面又會捲動（overflow:auto），外凸的焦點框左右會被裁掉 → 內縮完整框。\n     各站 a11y.scss 的全域 :focus-visible 以 !important 設 outline-offset，這裡也須 !important 才蓋得過 */\n}\n.drawer__list .drawer__link:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: -4px !important;\n}\n.drawer__link--active .MuiTypography-root {\n  font-weight: 700;\n}\n.drawer__link--active .MuiTypography-root::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 0.25rem;\n  background: currentColor;\n}\n.drawer__tools {\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n  padding: 1.25rem 1.5rem;\n}\n.drawer__lang.select {\n  width: 100%;\n}\n\n@media screen and (max-width: 768px) {\n  .drawer {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .drawer__icon {\n    display: flex !important;\n  }\n}";
+styleInject(css_248z);
+
+/* 語系不多時並排成分段按鈕（點一下即切換），太多才退回下拉 */
+var MAX_SEGMENTED_LANGUAGES = 3;
+var Drawer = function Drawer(_ref) {
+  var title = _ref.title,
+    logo = _ref.logo,
+    locale = _ref.locale,
+    supportLanguages = _ref.supportLanguages,
+    drawerList = _ref.drawerList,
+    onLanguageChange = _ref.onLanguageChange,
+    languageSelectLabel = _ref.languageSelectLabel,
+    extraTools = _ref.extraTools;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var languages = Array.isArray(supportLanguages) ? supportLanguages : [];
+  var currentLanguage = languages.length > 0 ? checkLanguageSupport({
+    language: locale,
+    supportLanguages: languages
+  }) : undefined;
+  /* extraTools 可傳函式，依擺放位置（header／drawer）給不同版面 */
+  var tools = typeof extraTools === 'function' ? extraTools({
+    placement: 'drawer'
+  }) : extraTools;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "drawer__icon",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.menuOpen'
+    }),
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(DehazeRounded, {
+    fontSize: "large",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React__default.createElement(Drawer$1, {
+    anchor: "right",
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') setOpen(false);
+    }
+    /* 抽屜是強制回應的浮層（背景不可操作），以 dialog 語意讓讀屏在開啟時唸出名稱（WCAG 4.1.2） */,
+    PaperProps: {
+      className: 'drawer__paper',
+      role: 'dialog',
+      'aria-modal': true,
+      'aria-label': getIntl().formatMessage({
+        id: 'aria.header.navigation'
+      })
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header"
+  }, (logo || title) && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-brand"
+  }, logo && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-logo"
+  }, logo), title && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-title"
+  }, title)), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "drawer__close",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.menuClose'
+    }),
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(CloseRounded, {
+    "aria-hidden": "true"
+  }))), /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement(DrawerList, {
+    drawerList: (Array.isArray(drawerList) ? drawerList : []).filter(function (_ref2) {
+      var showInHeader = _ref2.showInHeader;
+      return showInHeader;
+    }),
+    setOpen: setOpen
+  }), (languages.length > 0 || tools) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__tools"
+  }, languages.length > 0 && languages.length <= MAX_SEGMENTED_LANGUAGES && /*#__PURE__*/React__default.createElement(SegmentedControl, {
+    className: "drawer__lang",
+    label: getIntl().formatMessage({
+      id: 'header.language'
+    }),
+    options: languages.map(function (_ref3) {
+      var value = _ref3.value,
+        label = _ref3.label,
+        lang = _ref3.lang;
+      return {
+        value: value,
+        label: label,
+        lang: lang
+      };
+    }),
+    value: currentLanguage,
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    }
+  }), languages.length > MAX_SEGMENTED_LANGUAGES && /*#__PURE__*/React__default.createElement(Select, {
+    className: "drawer__lang",
+    ariaLabel: languageSelectLabel || getIntl().formatMessage({
+      id: 'aria.header.languageSelect'
+    }),
+    defaultValue: currentLanguage,
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    },
+    options: languages
+  }), tools && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__extraTools"
+  }, tools)))));
+};
+Drawer.defaultProps = {
+  title: undefined,
+  logo: undefined,
+  locale: undefined,
+  supportLanguages: [
+  // { value: 'en', label: 'English' },
+  {
+    value: 'zh-tw',
+    label: '繁體中文'
+  }
+  // { value: 'zh-cn', label: '簡體中文' },
+  ],
+
+  drawerList: undefined,
+  onLanguageChange: function onLanguageChange() {},
+  languageSelectLabel: undefined,
+  extraTools: undefined
+};
+Drawer.propTypes = {
+  title: PropTypes.string,
+  logo: PropTypes.node,
+  /** 目前語系（決定語言切換鈕的選中狀態） */
+  locale: PropTypes.string,
+  /** 支援的語系；3 種以內並排成分段按鈕，超過改用下拉 */
+  supportLanguages: PropTypes.arrayOf(PropTypes.any),
+  drawerList: PropTypes.arrayOf(PropTypes.any),
+  onLanguageChange: PropTypes.func,
+  /** 語言下拉的無障礙名稱（WCAG 3.3.2）；未提供時使用套件內 aria.header.languageSelect */
+  languageSelectLabel: PropTypes.string,
+  /** 呼叫端自訂的工具區（如字級縮放）；由 Header 一併傳入，窄畫面時顯示於抽屜內。
+      傳函式時以 ({ placement: 'drawer' }) 呼叫，可給抽屜專用的版面 */
+  extraTools: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export { Drawer as D, checkLanguageSupport as c, defaultSupportLanguage as d };

package/lib/components/Drawer.js

@@ -1,17 +1,18 @@
-export { D as default } from './Drawer-629e59c7.js';
+export { D as default } from './Drawer-a5be9257.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-cb3e1ba1.js';
+import './Select-89841c71.js';
 import './index-b76a85f4.js';
-import './defaultTheme-ed7746fe.js';
+import './defaultTheme-c5dd0f64.js';
 import 'react-is';
 import '@material-ui/styles';
-import './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
 import './Empty-c6a44967.js';
 import './style-inject.es-1f59c1d0.js';
 import './globalConfig';
+import './SegmentedControl-81f63afc.js';
 import 'react-router-dom';

package/lib/components/Footer.js

@@ -3,24 +3,24 @@ import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { C as ContactModal } from './ContactModal-7e5b14e8.js';
+import { C as ContactModal } from './ContactModal-159de99c.js';
 import { S as Spin } from './Spin-8f87eadc.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
+import './defaultTheme-c5dd0f64.js';
+import '@material-ui/styles';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
 import './Modal-e04532fa.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-7bd5aa09.js';
 import './_commonjsHelpers-70de2c37.js';
-import './defaultTheme-ed7746fe.js';
-import '@material-ui/styles';
-import './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
-import './Select-cb3e1ba1.js';
+import './Select-89841c71.js';
 import './Empty-c6a44967.js';
-import './createSvgIcon-e3803ee1.js';
+import './createSvgIcon-dc603596.js';
 import 'react-dom';
 
 /* eslint-disable max-len */

package/lib/components/Header.js

@@ -6,25 +6,26 @@ import { d as debounce_1 } from './debounce-127da66c.js';
 import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
 import { Typography, IconButton } from '@material-ui/core';
 import { SearchOutlined } from '@material-ui/icons';
-import { K as KeywordSearch } from './KeywordSearch-fec33a2c.js';
-import { S as Select } from './Select-cb3e1ba1.js';
-import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-629e59c7.js';
+import { K as KeywordSearch } from './KeywordSearch-db9c45d9.js';
+import { S as Select } from './Select-89841c71.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-a5be9257.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
 import 'axios';
-import './Autocomplete-3b418e5f.js';
+import './Autocomplete-0ea4a31c.js';
 import '@material-ui/lab';
-import './createSvgIcon-e3803ee1.js';
-import './defaultTheme-ed7746fe.js';
+import './createSvgIcon-dc603596.js';
+import './defaultTheme-c5dd0f64.js';
 import 'react-is';
 import '@material-ui/styles';
 import 'react-dom';
-import './toConsumableArray-dbe8af76.js';
+import './toConsumableArray-c268c112.js';
 import './Empty-c6a44967.js';
-import './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import './SegmentedControl-81f63afc.js';
 
 var css_248z = "@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n  /* 呼叫端自訂工具區（如字級縮放）：與語系選單同屬右側工具列 */\n}\n.header__logo {\n  display: flex;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  margin-right: 30px !important;\n  cursor: pointer;\n  text-decoration: none;\n}\n.header__logo__img {\n  display: flex;\n  align-items: center;\n}\n.header__logo__title {\n  white-space: nowrap;\n  margin-left: 1rem !important;\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links {\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 14px;\n}\n.header__links a {\n  text-decoration: none;\n}\n.header__links--full {\n  flex: 1;\n}\n.header__links__item {\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 1.125rem !important;\n  font-weight: 500 !important;\n  white-space: nowrap;\n  padding: 6px 14px;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links__item--active .header__links__item {\n  font-weight: 800 !important;\n  background: transparent;\n  border-radius: 45px;\n}\n.header__links__item:hover {\n  font-weight: 800 !important;\n}\n.header__language {\n  min-width: 100px !important;\n}\n.header__extraTools {\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n}\n.header__searchIcon {\n  display: none !important;\n}\n@media screen and (max-width: 768px) {\n  .header--smallUseSearchIcon .header__searchIcon {\n    display: flex !important;\n    margin-right: 10px !important;\n  }\n  .header--smallUseSearchIcon .keywordSearch {\n    visibility: hidden;\n    flex: 1;\n    width: 0;\n  }\n}\n.header--hide {\n  top: -100px;\n}\n.header--focus .header__links {\n  display: none;\n}\n.header .MuiTypography-root {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.header .autocomplete {\n  float: right;\n}\n.header .autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  padding: 1px 8px !important;\n}\n.header .keywordSearch {\n  margin-right: 8px;\n}\n.header .keywordSearch--focus .autocomplete {\n  width: 100% !important;\n}\n.header .keywordSearch--animation .autocomplete {\n  width: 240px;\n  transition: width 0.3s ease-in-out;\n}\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%;\n  }\n}\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important;\n    /* 窄畫面比照語系選單收進抽屜，避免擠壓搜尋框 */\n  }\n  .header__logo {\n    margin-right: 16px !important;\n  }\n  .header__logo__title {\n    display: none !important;\n  }\n  .header__links {\n    display: none;\n  }\n  .header__links__item {\n    font-size: 1rem !important;\n  }\n  .header__language {\n    display: none !important;\n  }\n  .header__extraTools {\n    display: none !important;\n  }\n  .header--focus .header__logo {\n    display: none !important;\n  }\n\n  .autocomplete__icon {\n    display: none !important;\n  }\n}";
 styleInject(css_248z);
@@ -152,7 +153,9 @@ var Header = function Header(props) {
     "aria-hidden": "true"
   })), showDarkModeSwitch , extraTools && /*#__PURE__*/React__default.createElement("div", {
     className: "header__extraTools"
-  }, extraTools), Array.isArray(supportLanguages) && supportLanguages.length > 0 && /*#__PURE__*/React__default.createElement(Select, {
+  }, typeof extraTools === 'function' ? extraTools({
+    placement: 'header'
+  }) : extraTools), Array.isArray(supportLanguages) && supportLanguages.length > 0 && /*#__PURE__*/React__default.createElement(Select, {
     className: "header__language",
     ariaLabel: languageSelectLabel || getIntl().formatMessage({
       id: 'aria.header.languageSelect'
@@ -168,6 +171,7 @@ var Header = function Header(props) {
   }), /*#__PURE__*/React__default.createElement(Drawer, {
     title: title,
     logo: logo,
+    locale: locale,
     drawerList: pages,
     supportLanguages: supportLanguages,
     onLanguageChange: onLanguageChange,
@@ -226,8 +230,9 @@ Header.propTypes = {
   onSearchIconClick: PropTypes.func,
   /** 語言下拉的無障礙名稱（WCAG 3.3.2）；未提供時使用套件內 aria.header.languageSelect */
   languageSelectLabel: PropTypes.string,
-  /** 呼叫端自訂的工具區（如字級縮放）：寬畫面顯示於語系選單之前，窄畫面隨語系一起收進抽屜 */
-  extraTools: PropTypes.node
+  /** 呼叫端自訂的工具區（如字級縮放）：寬畫面顯示於語系選單之前，窄畫面隨語系一起收進抽屜。
+      傳函式時以 ({ placement: 'header' | 'drawer' }) 呼叫，可依位置給不同版面 */
+  extraTools: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 
 export { Header as default };

package/lib/components/{KeywordSearch-fec33a2c.js → KeywordSearch-db9c45d9.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import axios from 'axios';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { A as Autocomplete } from './Autocomplete-3b418e5f.js';
+import { A as Autocomplete } from './Autocomplete-0ea4a31c.js';
 
 var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px;\n}\n.keywordSearch--animation .autocomplete {\n  transition: max-width 0.3s ease-out;\n  max-width: 240px;\n}\n.keywordSearch--focus {\n  flex: 1;\n}\n.keywordSearch--focus .autocomplete {\n  max-width: 100%;\n}\n.keywordSearch .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  border-radius: 10px;\n  background-color: #ffffff66;\n}";
 styleInject(css_248z);

package/lib/components/KeywordSearch.js

@@ -1,22 +1,22 @@
-export { K as default } from './KeywordSearch-fec33a2c.js';
+export { K as default } from './KeywordSearch-db9c45d9.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import 'axios';
 import './style-inject.es-1f59c1d0.js';
-import './Autocomplete-3b418e5f.js';
+import './Autocomplete-0ea4a31c.js';
 import './debounce-127da66c.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
 import '@material-ui/lab';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './createSvgIcon-e3803ee1.js';
-import './defaultTheme-ed7746fe.js';
+import './createSvgIcon-dc603596.js';
+import './defaultTheme-c5dd0f64.js';
 import 'react-is';
 import '@material-ui/styles';
 import 'react-dom';
-import './toConsumableArray-dbe8af76.js';
+import './toConsumableArray-c268c112.js';
 import './globalConfig';
 import './Empty-c6a44967.js';

package/lib/components/Keywords.js

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { M as Modal } from './Modal-e04532fa.js';
 import { Typography } from '@material-ui/core';
-import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-dc603596.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';
 import './Button-7bd5aa09.js';
 import './Spin-8f87eadc.js';
 import './_commonjsHelpers-70de2c37.js';
-import './defaultTheme-ed7746fe.js';
+import './defaultTheme-c5dd0f64.js';
 import 'react-is';
 import '@material-ui/styles';
 import 'react-dom';

package/lib/components/MUITheme.js

@@ -2,10 +2,10 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { a as _baseGetTag, b as isObject_1, _ as _root, i as isObjectLike_1, c as _freeGlobal } from './isObjectLike-e111475d.js';
 import { CssBaseline } from '@material-ui/core';
-import { u as createTheme } from './defaultTheme-ed7746fe.js';
+import { v as createTheme } from './defaultTheme-c5dd0f64.js';
 import 'react-is';
 import { ThemeProvider } from '@material-ui/styles';
-import './withTheme-2d778133.js';
+import './withTheme-3486f38b.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_commonjsHelpers-70de2c37.js';
 

package/lib/components/Pagination.js

@@ -2,13 +2,13 @@ import { c as _objectWithoutProperties$1, a as _slicedToArray$1 } from './_rollu
 import * as React$2 from 'react';
 import React__default, { Children, isValidElement, cloneElement, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
-import { u as useControlled, c as clsx, b as useEventCallback, w as withStyles, d as useIsFocusVisible, e as useForkRef, f as createSvgIcon, g as capitalize, h as debounce, r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
+import { k as _objectWithoutProperties, q as _slicedToArray, _ as _extends, r as _objectWithoutPropertiesLoose, u as alpha, j as formatMuiErrorMessage } from './defaultTheme-c5dd0f64.js';
+import { u as useControlled, c as clsx, b as useEventCallback, w as withStyles, d as useIsFocusVisible, e as useForkRef, f as createSvgIcon, g as capitalize, h as debounce, r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-dc603596.js';
 import 'react-is';
 import '@material-ui/styles';
-import './withTheme-2d778133.js';
-import { _ as _toConsumableArray } from './toConsumableArray-dbe8af76.js';
-import { u as useTheme } from './useTheme-d16d02d9.js';
+import './withTheme-3486f38b.js';
+import { _ as _toConsumableArray } from './toConsumableArray-c268c112.js';
+import { u as useTheme } from './useTheme-98b6cf17.js';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { c as classNames } from './index-b76a85f4.js';

package/lib/components/SegmentedControl-81f63afc.js

@@ -0,0 +1,113 @@
+import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { o as getContrastRatio } from './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import { u as useTheme } from './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "@charset \"UTF-8\";\n.segmentedControl__label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 700;\n}\n.segmentedControl__group {\n  display: flex;\n}\n.segmentedControl__btn {\n  flex: 1 1 0;\n  min-width: 0;\n  /* 觸控目標 44px（WCAG 2.5.5） */\n  min-height: 2.75rem;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid;\n  background: transparent;\n  color: inherit;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  cursor: pointer;\n  /* 相鄰框線疊成一條 */\n  /* 焦點框顏色由元件以 outlineColor 給主題文字色；拉到上層避免被相鄰按鈕蓋住 */\n}\n.segmentedControl__btn + .segmentedControl__btn {\n  margin-left: -1px;\n}\n.segmentedControl__btn:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.segmentedControl__btn:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.segmentedControl__btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n.segmentedControl__btn:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline-width: 2px;\n  outline-style: solid;\n  outline-offset: 2px;\n}\n.segmentedControl__btn--active {\n  font-weight: 700;\n}";
+styleInject(css_248z);
+
+/* 每個實例需要唯一 id 才能做 aria-labelledby 串接 */
+var segmentedSeq = 0;
+
+/* 選中底色優先用主題主色（與站台色調一致）；主色配字對比不足 4.5:1（WCAG 1.4.3）
+   或主色框線對紙張不足 3:1（WCAG 1.4.11）時，退回「文字色／紙張色」反白，對比必然足夠 */
+var pickColors = function pickColors(_ref) {
+  var primary = _ref.primary,
+    text = _ref.text,
+    background = _ref.background;
+  var primaryOk = getContrastRatio(primary.main, primary.contrastText) >= 4.5 && getContrastRatio(primary.main, background.paper) >= 3;
+  return primaryOk ? {
+    fill: primary.main,
+    onFill: primary.contrastText
+  } : {
+    fill: text.primary,
+    onFill: background.paper
+  };
+};
+
+/* 分段按鈕（少量互斥選項並排，點一下即切換，如抽屜內的語言、字級）。
+ * - 可見標籤即群組名稱：role="group" + aria-labelledby 指向標籤（WCAG 1.3.1／2.5.3）
+ * - 每個選項是切換鈕，以 aria-pressed 表達目前選中者（WCAG 4.1.2）
+ * - 選中態反白（配色見 pickColors），另加粗體，不只靠顏色區分（WCAG 1.4.1） */
+var SegmentedControl = function SegmentedControl(_ref2) {
+  var className = _ref2.className,
+    label = _ref2.label,
+    options = _ref2.options,
+    value = _ref2.value,
+    onChange = _ref2.onChange;
+  var theme = useTheme();
+  var _pickColors = pickColors(theme.palette),
+    fill = _pickColors.fill,
+    onFill = _pickColors.onFill;
+  var labelIdRef = useRef(null);
+  if (!labelIdRef.current) {
+    segmentedSeq += 1;
+    labelIdRef.current = "nmtl-segmented-".concat(segmentedSeq, "-label");
+  }
+  var labelId = labelIdRef.current;
+  /* 框線、焦點框與選中底色同色（站台若有全域焦點樣式會以 !important 蓋過焦點框色，屬預期） */
+  var baseStyle = {
+    borderColor: fill,
+    outlineColor: fill
+  };
+  var activeStyle = _objectSpread2(_objectSpread2({}, baseStyle), {}, {
+    backgroundColor: fill,
+    color: onFill
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('segmentedControl', className)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    id: labelId,
+    className: "segmentedControl__label"
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    className: "segmentedControl__group",
+    role: "group",
+    "aria-labelledby": labelId
+  }, options.map(function (option) {
+    var active = option.value === value;
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: option.value,
+      type: "button",
+      className: classNames('segmentedControl__btn', {
+        'segmentedControl__btn--active': active
+      }),
+      "aria-pressed": active,
+      "aria-label": option.ariaLabel,
+      lang: option.lang,
+      style: active ? activeStyle : baseStyle,
+      onClick: function onClick() {
+        if (!active) onChange(option.value);
+      }
+    }, option.label);
+  })));
+};
+SegmentedControl.defaultProps = {
+  className: undefined,
+  value: undefined,
+  onChange: function onChange() {}
+};
+SegmentedControl.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 可見標籤，同時作為群組的可及名稱 */
+  label: PropTypes.string.isRequired,
+  /** 選項：label 為可見文字；ariaLabel 在可見文字對讀屏沒有意義時提供（如 A+）；lang 標示與頁面不同的語言 */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    label: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string,
+    lang: PropTypes.string
+  })).isRequired,
+  /** 目前選中的值 */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 選擇其他選項時的 callback（點選已選中的選項不會觸發） */
+  onChange: PropTypes.func
+};
+
+export { SegmentedControl as S };

package/lib/components/SegmentedControl.js

@@ -0,0 +1,11 @@
+export { S as default } from './SegmentedControl-81f63afc.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-b76a85f4.js';
+import './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/{Select-cb3e1ba1.js → Select-89841c71.js}

@@ -3,11 +3,11 @@ import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
-import './defaultTheme-ed7746fe.js';
+import './defaultTheme-c5dd0f64.js';
 import 'react-is';
 import '@material-ui/styles';
-import { u as useTheme } from './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
+import { u as useTheme } from './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
 import { E as Empty } from './Empty-c6a44967.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';